@dxos/plugin-sheet 0.6.12 → 0.6.13-main.548ca8d

package/dist/lib/node/chunk-6F43RV45.cjs

@@ -0,0 +1,1610 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chunk_6F43RV45_exports = {};
+__export(chunk_6F43RV45_exports, {
+  ComputeGraphContextProvider: () => ComputeGraphContextProvider,
+  GridSheet: () => GridSheet,
+  SheetContainer: () => SheetContainer,
+  SheetProvider: () => SheetProvider,
+  addressToA1Notation: () => addressToA1Notation,
+  addressToIndex: () => addressToIndex,
+  compareIndexPositions: () => compareIndexPositions,
+  computeGraphFacet: () => computeGraphFacet,
+  createSheet: () => createSheet,
+  rangeToA1Notation: () => rangeToA1Notation,
+  useComputeGraph: () => useComputeGraph,
+  useSheetContext: () => useSheetContext
+});
+module.exports = __toCommonJS(chunk_6F43RV45_exports);
+var import_chunk_ER3PM7GD = require("./chunk-ER3PM7GD.cjs");
+var import_chunk_QIFIGEKV = require("./chunk-QIFIGEKV.cjs");
+var import_chunk_5XPK2V4A = require("./chunk-5XPK2V4A.cjs");
+var import_react = __toESM(require("react"));
+var import_crypto = require("@dxos/crypto");
+var import_echo_schema = require("@dxos/echo-schema");
+var import_invariant = require("@dxos/invariant");
+var import_language = require("@codemirror/language");
+var import_state = require("@codemirror/state");
+var import_view = require("@codemirror/view");
+var import_async = require("@dxos/async");
+var import_invariant2 = require("@dxos/invariant");
+var import_state2 = require("@dxos/react-ui-editor/state");
+var import_autocomplete = require("@codemirror/autocomplete");
+var import_language2 = require("@codemirror/language");
+var import_view2 = require("@codemirror/view");
+var import_highlight = require("@lezer/highlight");
+var import_codemirror_lang_spreadsheet = require("codemirror-lang-spreadsheet");
+var import_state3 = require("@dxos/react-ui-editor/state");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react2 = require("react");
+var import_debug = require("@dxos/debug");
+var import_react_hooks = require("@dxos/react-hooks");
+var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_grid = require("@dxos/react-ui-grid");
+var import_react5 = require("react");
+var import_echo = require("@dxos/react-client/echo");
+var import_react_ui_grid2 = require("@dxos/react-ui-grid");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react6 = require("react");
+var import_echo_schema2 = require("@dxos/echo-schema");
+var import_schema = require("@dxos/schema");
+var import_async2 = require("@dxos/async");
+var import_context = require("@dxos/context");
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_invariant3 = require("@dxos/invariant");
+var import_keys = require("@dxos/keys");
+var import_log = require("@dxos/log");
+var import_schema2 = require("@dxos/schema");
+var import_hyperformula = require("#hyperformula");
+var import_react7 = require("react");
+var import_signals_core = require("@preact/signals-core");
+var import_react8 = require("react");
+var import_app_framework = require("@dxos/app-framework");
+var import_async3 = require("@dxos/async");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react9 = __toESM(require("react"));
+var import_invariant4 = require("@dxos/invariant");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_react_ui_grid3 = require("@dxos/react-ui-grid");
+var ComputeGraphContext = /* @__PURE__ */ (0, import_react.createContext)(void 0);
+var ComputeGraphContextProvider = ({ registry, children }) => {
+  return /* @__PURE__ */ import_react.default.createElement(ComputeGraphContext.Provider, {
+    value: {
+      registry
+    }
+  }, children);
+};
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/defs/types.ts";
+var DEFAULT_ROWS = 50;
+var DEFAULT_COLUMNS = 26;
+var MAX_ROWS = 500;
+var MAX_COLUMNS = 26 * 2;
+var posEquals = (a, b) => {
+  return a?.col === b?.col && a?.row === b?.row;
+};
+var columnLetter = (col) => {
+  (0, import_invariant.invariant)(col < MAX_COLUMNS, `Invalid column: ${col}`, {
+    F: __dxlog_file,
+    L: 26,
+    S: void 0,
+    A: [
+      "col < MAX_COLUMNS",
+      "`Invalid column: ${col}`"
+    ]
+  });
+  return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
+};
+var addressToA1Notation = ({ col, row }) => {
+  return `${columnLetter(col)}${row + 1}`;
+};
+var addressFromA1Notation = (ref) => {
+  const match = ref.match(/([A-Z]+)(\d+)/);
+  (0, import_invariant.invariant)(match, `Invalid notation: ${ref}`, {
+    F: __dxlog_file,
+    L: 40,
+    S: void 0,
+    A: [
+      "match",
+      "`Invalid notation: ${ref}`"
+    ]
+  });
+  return {
+    row: parseInt(match[2], 10) - 1,
+    col: match[1].split("").reduce((acc, c) => acc * 26 + c.charCodeAt(0) - "A".charCodeAt(0) + 1, 0) - 1
+  };
+};
+var rangeToA1Notation = (range) => {
+  return [
+    range?.from && addressToA1Notation(range?.from),
+    range?.to && addressToA1Notation(range?.to)
+  ].filter(Boolean).join(":");
+};
+var inRange = (range, cell) => {
+  if (!range) {
+    return false;
+  }
+  const { from, to } = range;
+  if (from && posEquals(from, cell) || to && posEquals(to, cell)) {
+    return true;
+  }
+  if (!from || !to) {
+    return false;
+  }
+  const { col: c1, row: r1 } = from;
+  const { col: c2, row: r2 } = to;
+  const cMin = Math.min(c1, c2);
+  const cMax = Math.max(c1, c2);
+  const rMin = Math.min(r1, r2);
+  const rMax = Math.max(r1, r2);
+  const { col, row } = cell;
+  return col >= cMin && col <= cMax && row >= rMin && row <= rMax;
+};
+var ApiError = class extends Error {
+};
+var ReadonlyException = class extends ApiError {
+};
+var RangeException = class extends ApiError {
+  constructor(n) {
+    super();
+  }
+};
+var createIndex = (length = 8) => {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  const randomBuffer = (0, import_crypto.randomBytes)(length);
+  return Array.from(randomBuffer, (byte) => characters[byte % charactersLength]).join("");
+};
+var createIndices = (length) => Array.from({
+  length
+}).map(() => createIndex());
+var insertIndices = (indices, i, n, max) => {
+  if (i + n > max) {
+    throw new RangeException(i + n);
+  }
+  const idx = createIndices(n);
+  indices.splice(i, 0, ...idx);
+};
+var initialize = (sheet, { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS } = {}) => {
+  if (!sheet.rows.length) {
+    insertIndices(sheet.rows, 0, rows, MAX_ROWS);
+  }
+  if (!sheet.columns.length) {
+    insertIndices(sheet.columns, 0, columns, MAX_COLUMNS);
+  }
+};
+var createSheet = ({ name, cells, ...size } = {}) => {
+  const sheet = (0, import_echo_schema.create)(import_chunk_ER3PM7GD.SheetType, {
+    name,
+    cells: {},
+    rows: [],
+    columns: [],
+    rowMeta: {},
+    columnMeta: {},
+    formatting: []
+  });
+  initialize(sheet, size);
+  if (cells) {
+    Object.entries(cells).forEach(([key, { value }]) => {
+      const idx = addressToIndex(sheet, addressFromA1Notation(key));
+      sheet.cells[idx] = {
+        value
+      };
+    });
+  }
+  return sheet;
+};
+var addressToIndex = (sheet, cell) => {
+  return `${sheet.columns[cell.col]}@${sheet.rows[cell.row]}`;
+};
+var addressFromIndex = (sheet, idx) => {
+  const [column, row] = idx.split("@");
+  return {
+    col: sheet.columns.indexOf(column),
+    row: sheet.rows.indexOf(row)
+  };
+};
+var rangeFromIndex = (sheet, idx) => {
+  const [from, to] = idx.split(":").map((index) => addressFromIndex(sheet, index));
+  return {
+    from,
+    to
+  };
+};
+var closest = (cursor, cells) => {
+  let closestCell2;
+  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) {
+      closestCell2 = cell;
+      closestDistance = distance;
+    }
+  }
+  return closestCell2;
+};
+var compareIndexPositions = (sheet, indexA, indexB) => {
+  const { row: rowA, col: columnA } = addressFromIndex(sheet, indexA);
+  const { row: rowB, col: columnB } = addressFromIndex(sheet, indexB);
+  if (rowA !== rowB) {
+    return rowA - rowB;
+  } else {
+    return columnA - columnB;
+  }
+};
+var updateAllDecorations = import_state.StateEffect.define();
+var computeGraphFacet = (0, import_state2.singleValueFacet)();
+var highlightStyles = import_language2.HighlightStyle.define([
+  // Function.
+  {
+    tag: import_highlight.tags.name,
+    class: "text-accentText"
+  },
+  // Range.
+  {
+    tag: import_highlight.tags.tagName,
+    class: "text-pinkText"
+  },
+  // Values.
+  {
+    tag: import_highlight.tags.number,
+    class: "text-tealText"
+  },
+  {
+    tag: import_highlight.tags.bool,
+    class: "text-tealText"
+  },
+  {
+    tag: import_highlight.tags.string,
+    class: "text-tealText"
+  },
+  // Error.
+  {
+    tag: import_highlight.tags.invalid,
+    class: "text-unAccent"
+  }
+]);
+var languageFacet = (0, import_state3.singleValueFacet)();
+var sheetExtension = ({ functions = [] }) => {
+  const { extension, language } = (0, import_codemirror_lang_spreadsheet.spreadsheet)({
+    idiom: "en-US",
+    decimalSeparator: "."
+  });
+  const createCompletion = (name) => {
+    const { section = "Custom", description, syntax } = functions.find((value) => value.name === name) ?? {};
+    return {
+      section,
+      label: name,
+      info: () => {
+        if (!description && !syntax) {
+          return null;
+        }
+        const root = document.createElement("div");
+        root.className = "flex flex-col gap-2 text-sm";
+        const title = document.createElement("h2");
+        title.innerText = name;
+        title.className = "text-lg font-mono text-accentText";
+        root.appendChild(title);
+        if (description) {
+          const info = document.createElement("p");
+          info.innerText = description;
+          info.className = "text-subdued";
+          root.appendChild(info);
+        }
+        if (syntax) {
+          const detail = document.createElement("pre");
+          detail.innerText = syntax;
+          detail.className = "whitespace-pre-wrap text-greenText";
+          root.appendChild(detail);
+        }
+        return root;
+      },
+      apply: (view, completion, from, to) => {
+        const insertParens = to === view.state.doc.toString().length;
+        view.dispatch(view.state.update({
+          changes: {
+            from,
+            to,
+            insert: completion.label + (insertParens ? "()" : "")
+          },
+          selection: {
+            anchor: from + completion.label.length + 1
+          }
+        }));
+      }
+    };
+  };
+  return [
+    extension,
+    languageFacet.of(language),
+    language.data.of({
+      autocomplete: (context) => {
+        if (context.state.doc.toString()[0] !== "=") {
+          return null;
+        }
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to) {
+          return null;
+        }
+        const text = match.text.toUpperCase();
+        if (!context.explicit && match.text.length < 2) {
+          return null;
+        }
+        return {
+          from: match.from,
+          options: functions?.filter(({ name }) => name.startsWith(text)).map(({ name }) => createCompletion(name)) ?? []
+        };
+      }
+    }),
+    (0, import_language2.syntaxHighlighting)(highlightStyles),
+    (0, import_autocomplete.autocompletion)({
+      aboveCursor: false,
+      defaultKeymap: true,
+      activateOnTyping: true,
+      // NOTE: Useful for debugging.
+      closeOnBlur: false,
+      icons: false,
+      tooltipClass: () => (0, import_react_ui_theme.mx)("!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]", "[&>ul>li[aria-selected]]:!bg-accentSurface", "border-separator")
+    }),
+    import_view2.keymap.of([
+      {
+        key: "Tab",
+        run: (view) => {
+          return (0, import_autocomplete.completionStatus)(view.state) === "active" ? (0, import_autocomplete.acceptCompletion)(view) : (0, import_autocomplete.startCompletion)(view);
+        }
+      }
+    ])
+  ];
+};
+var rangeExtension = (onInit) => {
+  let view;
+  let activeRange;
+  const provider = (range) => {
+    if (activeRange) {
+      view.dispatch(view.state.update({
+        changes: {
+          ...activeRange,
+          insert: range.toString()
+        },
+        selection: {
+          anchor: activeRange.from + range.length
+        }
+      }));
+    }
+    view.focus();
+  };
+  return import_view2.ViewPlugin.fromClass(class {
+    constructor(_view) {
+      view = _view;
+      onInit(provider);
+    }
+    update(view2) {
+      const { anchor } = view2.state.selection.ranges[0];
+      activeRange = void 0;
+      const language = view2.state.facet(languageFacet);
+      const { topNode } = language.parser.parse(view2.state.doc.toString());
+      visitTree(topNode, ({ type, from, to }) => {
+        if (from <= anchor && to >= anchor) {
+          switch (type.name) {
+            case "Function": {
+              activeRange = {
+                from: to,
+                to
+              };
+              break;
+            }
+            case "CloseParen": {
+              activeRange = {
+                from,
+                to: from
+              };
+              break;
+            }
+            case "RangeToken":
+            case "CellToken":
+              activeRange = {
+                from,
+                to
+              };
+              return true;
+          }
+        }
+        return false;
+      });
+      if (!activeRange && view2.state.doc.toString()[0] === "=") {
+        activeRange = {
+          from: 1,
+          to: view2.state.doc.toString().length
+        };
+      }
+    }
+  });
+};
+var visitTree = (node, callback) => {
+  if (callback(node)) {
+    return true;
+  }
+  for (let child = node.firstChild; child !== null; child = child.nextSibling) {
+    if (visitTree(child, callback)) {
+      return true;
+    }
+  }
+  return false;
+};
+var dxGridCellIndexToSheetCellAddress = (index) => {
+  const [colStr, rowStr] = index.split(",");
+  return {
+    col: parseInt(colStr),
+    row: parseInt(rowStr)
+  };
+};
+var createDxGridColumns = (model) => {
+  return model.sheet.columns.reduce((acc, 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: {}
+  });
+};
+var createDxGridRows = (model) => {
+  return model.sheet.rows.reduce((acc, 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: {}
+  });
+};
+var gridCellGetter = (model, formatting) => {
+  const cachedGridCells = {};
+  return (nextBounds) => {
+    [
+      ...Array(nextBounds.end.col - nextBounds.start.col)
+    ].forEach((_, c0) => {
+      return [
+        ...Array(nextBounds.end.row - nextBounds.start.row)
+      ].forEach((_2, r0) => {
+        const col = nextBounds.start.col + c0;
+        const row = nextBounds.start.row + r0;
+        const cell = formatting.getFormatting({
+          col,
+          row
+        });
+        if (cell.value) {
+          cachedGridCells;
+          cachedGridCells[`${col},${row}`] = {
+            value: cell.value,
+            className: (0, import_react_ui_theme2.mx)(cell.classNames)
+          };
+        }
+      });
+    });
+    return cachedGridCells;
+  };
+};
+var rowLabelCell = (row) => ({
+  value: (0, import_react_ui_grid2.rowToA1Notation)(row),
+  className: "text-end !pie-1",
+  resizeHandle: "row"
+});
+var colLabelCell = (col) => ({
+  value: (0, import_react_ui_grid2.colToA1Notation)(col),
+  resizeHandle: "col"
+});
+var cellGetter = (model, formatting) => {
+  const getGridCells = gridCellGetter(model, formatting);
+  return (nextBounds, plane) => {
+    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 {};
+    }
+  };
+};
+var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
+  const [columns, setColumns] = (0, import_react5.useState)(createDxGridColumns(model));
+  const [rows, setRows] = (0, import_react5.useState)(createDxGridColumns(model));
+  (0, import_react5.useLayoutEffect)(() => {
+    const cellsAccessor = (0, import_echo.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
+  ]);
+  (0, import_react5.useEffect)(() => {
+    const columnMetaAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
+      "columnMeta"
+    ]);
+    const rowMetaAccessor = (0, import_echo.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
+  };
+};
+var createDecorations = () => {
+  const { decorations } = (0, import_echo_schema2.create)({
+    decorations: {}
+  });
+  const addDecoration = (cellIndex, decorator) => {
+    decorations[cellIndex] = [
+      ...decorations[cellIndex] || [],
+      decorator
+    ];
+  };
+  const removeDecoration = (cellIndex, type) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+  const getDecorationsForCell = (cellIndex) => {
+    return decorations[cellIndex];
+  };
+  const getAllDecorations = () => {
+    const result = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations
+  };
+};
+var FormattingModel = class {
+  constructor(_model) {
+    this._model = _model;
+  }
+  /**
+  * Get formatted string value and className for cell.
+  */
+  getFormatting(cell) {
+    const value = this._model.getValue(cell);
+    if (value === void 0 || value === null) {
+      return {};
+    }
+    const locales = void 0;
+    const idx = addressToIndex(this._model.sheet, cell);
+    let formatting = this._model.sheet.formatting.find?.(({ range }) => range === idx);
+    const classNames = [
+      ...formatting?.classNames ?? []
+    ];
+    for (const [idx2, _formatting] of Object.entries(this._model.sheet.formatting)) {
+      const range = rangeFromIndex(this._model.sheet, idx2);
+      if (inRange(range, cell)) {
+        if (_formatting.classNames) {
+          classNames.push(..._formatting.classNames);
+        }
+        if (_formatting.type) {
+          formatting = _formatting;
+        }
+      }
+    }
+    const defaultNumber = "justify-end font-mono";
+    const type = formatting?.type ?? this._model.getValueType(cell);
+    switch (type) {
+      case import_schema.FieldValueType.Boolean: {
+        return {
+          value: value.toLocaleString().toUpperCase(),
+          classNames: [
+            ...classNames,
+            value ? "!text-greenText" : "!text-orangeText"
+          ]
+        };
+      }
+      //
+      // Numbers.
+      //
+      case import_schema.FieldValueType.Number: {
+        return {
+          value: value.toLocaleString(locales),
+          classNames: [
+            ...classNames,
+            defaultNumber
+          ]
+        };
+      }
+      case import_schema.FieldValueType.Percent: {
+        return {
+          value: value * 100 + "%",
+          classNames: [
+            ...classNames,
+            defaultNumber
+          ]
+        };
+      }
+      case import_schema.FieldValueType.Currency: {
+        return {
+          value: value.toLocaleString(locales, {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+          }),
+          classNames: [
+            ...classNames,
+            defaultNumber
+          ]
+        };
+      }
+      //
+      // Dates.
+      //
+      case import_schema.FieldValueType.DateTime: {
+        const date = this._model.toLocalDate(value);
+        return {
+          value: date.toLocaleString(locales),
+          classNames
+        };
+      }
+      case import_schema.FieldValueType.Date: {
+        const date = this._model.toLocalDate(value);
+        return {
+          value: date.toLocaleDateString(locales),
+          classNames
+        };
+      }
+      case import_schema.FieldValueType.Time: {
+        const date = this._model.toLocalDate(value);
+        return {
+          value: date.toLocaleTimeString(locales),
+          classNames
+        };
+      }
+      default: {
+        return {
+          value: String(value),
+          classNames
+        };
+      }
+    }
+  }
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
+var typeMap = {
+  BOOLEAN: import_schema2.FieldValueType.Boolean,
+  NUMBER_RAW: import_schema2.FieldValueType.Number,
+  NUMBER_PERCENT: import_schema2.FieldValueType.Percent,
+  NUMBER_CURRENCY: import_schema2.FieldValueType.Currency,
+  NUMBER_DATETIME: import_schema2.FieldValueType.DateTime,
+  NUMBER_DATE: import_schema2.FieldValueType.Date,
+  NUMBER_TIME: import_schema2.FieldValueType.Time
+};
+var getTopLeft = (range) => {
+  const to = range.to ?? range.from;
+  return {
+    row: Math.min(range.from.row, to.row),
+    col: Math.min(range.from.col, to.col)
+  };
+};
+var toSimpleCellAddress = (sheet, cell) => ({
+  sheet,
+  row: cell.row,
+  col: cell.col
+});
+var toModelRange = (sheet, range) => ({
+  start: toSimpleCellAddress(sheet, range.from),
+  end: toSimpleCellAddress(sheet, range.to ?? range.from)
+});
+var SheetModel = class extends import_context.Resource {
+  constructor(_graph, _sheet, _options = {}) {
+    super();
+    this._graph = _graph;
+    this._sheet = _sheet;
+    this._options = _options;
+    this.id = `model-${import_keys.PublicKey.random().truncate()}`;
+    this.update = new import_async2.Event();
+  }
+  get graph() {
+    return this._graph;
+  }
+  get sheet() {
+    return this._sheet;
+  }
+  get readonly() {
+    return this._options.readonly;
+  }
+  get bounds() {
+    return {
+      rows: this._sheet.rows.length,
+      columns: this._sheet.columns.length
+    };
+  }
+  /**
+  * Initialize sheet and engine.
+  */
+  async _open() {
+    (0, import_log.log)("initialize", {
+      id: this.id
+    }, {
+      F: __dxlog_file2,
+      L: 106,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    initialize(this._sheet);
+    this._node = this._graph.getOrCreateNode((0, import_chunk_5XPK2V4A.createSheetName)({
+      type: (0, import_echo_schema3.getTypename)(this._sheet),
+      id: this._sheet.id
+    }));
+    await this._node.open();
+    const unsubscribe = this._node.update.on((event) => this.update.emit(event));
+    this._ctx.onDispose(unsubscribe);
+    this.reset();
+  }
+  /**
+  * Update engine.
+  * NOTE: This resets the undo history.
+  * @deprecated
+  */
+  reset() {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 126,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.clearSheet(this._node.sheetId);
+    Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      (0, import_invariant3.invariant)(this._node, void 0, {
+        F: __dxlog_file2,
+        L: 129,
+        S: this,
+        A: [
+          "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)));
+      }
+      this._node.graph.hf.setCellContents({
+        sheet: this._node.sheetId,
+        row,
+        col
+      }, value);
+    });
+  }
+  /**
+  * Recalculate formulas.
+  * NOTE: This resets the undo history.
+  * https://hyperformula.handsontable.com/guide/volatile-functions.html#volatile-actions
+  * @deprecated
+  */
+  // TODO(burdon): Remove.
+  recalculate() {
+    this._node?.graph.hf.rebuildAndRecalculate();
+  }
+  insertRows(i, n = 1) {
+    insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    this.reset();
+  }
+  insertColumns(i, n = 1) {
+    insertIndices(this._sheet.columns, i, n, MAX_COLUMNS);
+    this.reset();
+  }
+  //
+  // Undoable actions.
+  // TODO(burdon): Group undoable methods; consistently update hf/sheet.
+  //
+  /**
+  * Clear range of values.
+  */
+  clear(range) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 171,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    const topLeft = getTopLeft(range);
+    const values = this._iterRange(range, () => null);
+    this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
+    this._iterRange(range, (cell) => {
+      const idx = addressToIndex(this._sheet, cell);
+      delete this._sheet.cells[idx];
+    });
+  }
+  cut(range) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 182,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
+    this._iterRange(range, (cell) => {
+      const idx = addressToIndex(this._sheet, cell);
+      delete this._sheet.cells[idx];
+    });
+  }
+  copy(range) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 191,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
+  }
+  paste(cell) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 196,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (!this._node.graph.hf.isClipboardEmpty()) {
+      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+      for (const change of changes) {
+        if (change instanceof import_hyperformula.ExportedCellChange) {
+          const { address, newValue } = change;
+          const idx = addressToIndex(this._sheet, {
+            row: address.row,
+            col: address.col
+          });
+          this._sheet.cells[idx] = {
+            value: newValue
+          };
+        }
+      }
+    }
+  }
+  // TODO(burdon): Display undo/redo state.
+  undo() {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 211,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
+    }
+  }
+  redo() {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 219,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToRedo()) {
+      this._node.graph.hf.redo();
+    }
+  }
+  /**
+  * Get value from sheet.
+  */
+  getCellValue(cell) {
+    const idx = addressToIndex(this._sheet, cell);
+    return this._sheet.cells[idx]?.value ?? null;
+  }
+  /**
+  * Get value as a string for editing.
+  */
+  getCellText(cell) {
+    const value = this.getCellValue(cell);
+    if (value == null) {
+      return void 0;
+    }
+    if (typeof value === "string" && value.charAt(0) === "=") {
+      return this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
+    } else {
+      return String(value);
+    }
+  }
+  /**
+  * Get array of raw values from sheet.
+  */
+  getCellValues(range) {
+    return this._iterRange(range, (cell) => this.getCellValue(cell));
+  }
+  /**
+  * Gets the regular or computed value from the engine.
+  */
+  getValue(cell) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 262,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    if (value instanceof import_hyperformula.DetailedCellError) {
+      return value.toString();
+    }
+    return value;
+  }
+  /**
+  * Get value type.
+  */
+  getValueType(cell) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 275,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    const addr = toSimpleCellAddress(this._node.sheetId, cell);
+    const type = this._node.graph.hf.getCellValueDetailedType(addr);
+    return typeMap[type];
+  }
+  /**
+  * Sets the value, updating the sheet and engine.
+  */
+  setValue(cell, value) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 285,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._options.readonly) {
+      throw new ReadonlyException();
+    }
+    let refresh = false;
+    if (cell.row >= this._sheet.rows.length) {
+      insertIndices(this._sheet.rows, cell.row, 1, MAX_ROWS);
+      refresh = true;
+    }
+    if (cell.col >= this._sheet.columns.length) {
+      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLUMNS);
+      refresh = true;
+    }
+    if (refresh) {
+      this.reset();
+    }
+    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
+      ]
+    ]);
+    const idx = addressToIndex(this._sheet, cell);
+    if (value === void 0 || value === null) {
+      delete this._sheet.cells[idx];
+    } else {
+      if (typeof value === "string" && value.charAt(0) === "=") {
+        value = this._graph.mapFunctionBindingToId(this.mapFormulaRefsToIndices(value));
+      }
+      this._sheet.cells[idx] = {
+        value
+      };
+    }
+  }
+  /**
+  * Sets values from a simple map.
+  */
+  setValues(values) {
+    Object.entries(values).forEach(([key, { value }]) => {
+      this.setValue(addressFromA1Notation(key), value);
+    });
+  }
+  /**
+  * Iterate range.
+  */
+  _iterRange(range, cb) {
+    const to = range.to ?? range.from;
+    const rowRange = [
+      Math.min(range.from.row, to.row),
+      Math.max(range.from.row, to.row)
+    ];
+    const columnRange = [
+      Math.min(range.from.col, to.col),
+      Math.max(range.from.col, to.col)
+    ];
+    const rows = [];
+    for (let row = rowRange[0]; row <= rowRange[1]; row++) {
+      const rowCells = [];
+      for (let column = columnRange[0]; column <= columnRange[1]; column++) {
+        const value = cb({
+          row,
+          col: column
+        });
+        if (value !== void 0) {
+          rowCells.push(value);
+        }
+      }
+      rows.push(rowCells);
+    }
+    return rows;
+  }
+  // TODO(burdon): Delete index.
+  _deleteIndices(indices, i, n) {
+    throw new Error("Not implemented");
+  }
+  // TODO(burdon): Move. Cannot use fractional without changing. Switch back to using unique IDs?
+  _moveIndices(indices, i, j, n) {
+    throw new Error("Not implemented");
+  }
+  //
+  // Indices.
+  //
+  /**
+  * Map from A1 notation to indices.
+  */
+  mapFormulaRefsToIndices(formula) {
+    (0, import_invariant3.invariant)(formula.charAt(0) === "=", void 0, {
+      F: __dxlog_file2,
+      L: 374,
+      S: this,
+      A: [
+        "formula.charAt(0) === '='",
+        ""
+      ]
+    });
+    return formula.replace(/([a-zA-Z]+)([0-9]+)/g, (match) => {
+      return addressToIndex(this._sheet, addressFromA1Notation(match));
+    });
+  }
+  /**
+  * Map from indices to A1 notation.
+  */
+  mapFormulaIndicesToRefs(formula) {
+    (0, import_invariant3.invariant)(formula.charAt(0) === "=", void 0, {
+      F: __dxlog_file2,
+      L: 384,
+      S: this,
+      A: [
+        "formula.charAt(0) === '='",
+        ""
+      ]
+    });
+    return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
+      return addressToA1Notation(addressFromIndex(this._sheet, idx));
+    });
+  }
+  //
+  // Values
+  //
+  /**
+  * https://hyperformula.handsontable.com/guide/date-and-time-handling.html#example
+  * https://hyperformula.handsontable.com/api/interfaces/configparams.html#nulldate
+  * NOTE: TODAY() is number of FULL days since nullDate. It will typically be -1 days from NOW().
+  */
+  toLocalDate(num) {
+    const { year, month, day, hours, minutes, seconds } = this.toDateTime(num);
+    return new Date(year, month - 1, day, hours, minutes, seconds);
+  }
+  toDateTime(num) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 405,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDateTime(num);
+  }
+  toDate(num) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 410,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDate(num);
+  }
+  toTime(num) {
+    (0, import_invariant3.invariant)(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 415,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToTime(num);
+  }
+};
+var useFormattingModel = (model) => {
+  return (0, import_react6.useMemo)(() => model && new FormattingModel(model), [
+    model
+  ]);
+};
+var useSheetModel = (graph, sheet, { readonly } = {}) => {
+  const [model, setModel] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    if (!graph || !sheet) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new SheetModel(graph, sheet, {
+        readonly
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    graph,
+    sheet,
+    readonly
+  ]);
+  return model;
+};
+var useUpdateFocusedCellOnThreadSelection = (model, grid) => {
+  const handleScrollIntoView = (0, import_react8.useCallback)(({ action, data }) => {
+    switch (action) {
+      case import_app_framework.LayoutAction.SCROLL_INTO_VIEW: {
+        if (!data?.id || data?.cursor === void 0 || data?.id !== (0, import_echo2.fullyQualifiedId)(model.sheet)) {
+          return;
+        }
+        const cellAddress = addressFromIndex(model.sheet, data.cursor);
+        grid.current?.setFocus({
+          ...cellAddress,
+          plane: "grid"
+        }, true);
+      }
+    }
+  }, [
+    model.sheet
+  ]);
+  (0, import_app_framework.useIntentResolver)(import_chunk_QIFIGEKV.SHEET_PLUGIN, handleScrollIntoView);
+};
+var useSelectThreadOnCellFocus = (model, cursor) => {
+  const dispatch = (0, import_app_framework.useIntentDispatcher)();
+  const activeThreads = (0, import_react8.useMemo)(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+    // TODO(thure): Surely we can find a better dependency for this…
+    JSON.stringify(model.sheet.threads)
+  ]);
+  const activeThreadAddresses = (0, import_react8.useMemo)(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
+    activeThreads,
+    model.sheet
+  ]);
+  const selectClosestThread = (0, import_react8.useCallback)((cellAddress) => {
+    if (!cellAddress || !activeThreads) {
+      return;
+    }
+    const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
+    if (closestThreadAnchor) {
+      const closestThread = activeThreads.find((thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor));
+      if (closestThread) {
+        void dispatch([
+          {
+            action: "dxos.org/plugin/thread/action/select",
+            data: {
+              current: (0, import_echo2.fullyQualifiedId)(closestThread)
+            }
+          }
+        ]);
+      }
+    }
+  }, [
+    dispatch,
+    activeThreads,
+    activeThreadAddresses,
+    model.sheet
+  ]);
+  const debounced = (0, import_react8.useMemo)(() => {
+    return (0, import_async3.debounce)((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  (0, import_react8.useEffect)(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    selectClosestThread
+  ]);
+};
+var createThreadDecoration = (cellIndex, threadId, sheetId) => {
+  return {
+    type: "comment",
+    classNames: [
+      "bg-greenFill"
+    ],
+    cellIndex
+  };
+};
+var useThreadDecorations = (model, decorations) => {
+  const sheet = (0, import_react8.useMemo)(() => model.sheet, [
+    model.sheet
+  ]);
+  const sheetId = (0, import_react8.useMemo)(() => (0, import_echo2.fullyQualifiedId)(sheet), [
+    sheet
+  ]);
+  (0, import_react8.useEffect)(() => {
+    const unsubscribe = (0, import_signals_core.effect)(() => {
+      const activeThreadAnchors = /* @__PURE__ */ new Set();
+      if (!sheet.threads) {
+        return;
+      }
+      for (const thread of sheet.threads) {
+        if (!thread || thread.anchor === void 0 || thread.status === "resolved") {
+          continue;
+        }
+        activeThreadAnchors.add(thread.anchor);
+        const index = thread.anchor;
+        const existingDecorations = decorations.getDecorationsForCell(index);
+        if (!existingDecorations || !existingDecorations.some((d) => d.type === "comment")) {
+          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
+        }
+      }
+      for (const decoration of decorations.getAllDecorations()) {
+        if (decoration.type !== "comment") {
+          continue;
+        }
+        if (!activeThreadAnchors.has(decoration.cellIndex)) {
+          decorations.removeDecoration(decoration.cellIndex, "comment");
+        }
+      }
+    });
+    return () => unsubscribe();
+  });
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx";
+var SheetContext = /* @__PURE__ */ (0, import_react9.createContext)(null);
+var useSheetContext = () => {
+  const context = (0, import_react9.useContext)(SheetContext);
+  (0, import_invariant4.invariant)(context, void 0, {
+    F: __dxlog_file3,
+    L: 46,
+    S: void 0,
+    A: [
+      "context",
+      ""
+    ]
+  });
+  return context;
+};
+var SheetProviderImpl = ({ model, formatting, onInfo, children, __gridScope }) => {
+  const { id, editing, setEditing } = (0, import_react_ui_grid3.useGridContext)("SheetProvider", __gridScope);
+  const decorations = (0, import_react9.useMemo)(() => createDecorations(), []);
+  const [cursor, setCursor] = (0, import_react9.useState)();
+  const [range, setRange] = (0, import_react9.useState)();
+  useSelectThreadOnCellFocus(model, cursor);
+  useThreadDecorations(model, decorations);
+  return /* @__PURE__ */ import_react9.default.createElement(SheetContext.Provider, {
+    value: {
+      id,
+      model,
+      formatting,
+      editing,
+      setEditing,
+      cursor,
+      setCursor,
+      range,
+      setRange,
+      // TODO(burdon): Change to event.
+      onInfo,
+      decorations
+    }
+  }, children);
+};
+var SheetProvider = ({ children, graph, sheet, readonly, onInfo }) => {
+  const model = useSheetModel(graph, sheet, {
+    readonly
+  });
+  const formatting = useFormattingModel(model);
+  return !model || !formatting ? null : /* @__PURE__ */ import_react9.default.createElement(import_react_ui_grid3.Grid.Root, {
+    id: (0, import_echo3.fullyQualifiedId)(sheet)
+  }, /* @__PURE__ */ import_react9.default.createElement(SheetProviderImpl, {
+    model,
+    formatting,
+    onInfo
+  }, children));
+};
+var 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;
+  }, {})
+};
+var frozen = {
+  frozenColsStart: 1,
+  frozenRowsStart: 1
+};
+var sheetRowDefault = {
+  grid: {
+    size: 32,
+    resizeable: true
+  }
+};
+var sheetColDefault = {
+  frozenColsStart: {
+    size: 48
+  },
+  grid: {
+    size: 180,
+    resizeable: true
+  }
+};
+var GridSheet = () => {
+  const { id, model, formatting, editing, setEditing, setCursor, setRange } = useSheetContext();
+  const dxGrid = (0, import_react4.useRef)(null);
+  const rangeNotifier = (0, import_react4.useRef)();
+  const { hasAttention } = (0, import_react_ui_attention.useAttention)(id);
+  const handleFocus = (0, import_react4.useCallback)((event) => {
+    if (!editing) {
+      const cell = (0, import_react_ui_grid.closestCell)(event.target);
+      setCursor(cell && cell.plane === "grid" ? {
+        col: cell.col,
+        row: cell.row
+      } : void 0);
+    }
+  }, [
+    editing
+  ]);
+  const handleClose = (0, import_react4.useCallback)((value, { key, shift }) => {
+    if (value !== void 0) {
+      model.setValue(dxGridCellIndexToSheetCellAddress(editing.index), value);
+    }
+    setEditing(null);
+    const axis = [
+      "Enter",
+      "ArrowUp",
+      "ArrowDown"
+    ].includes(key) ? "row" : [
+      "Tab",
+      "ArrowLeft",
+      "ArrowRight"
+    ].includes(key) ? "col" : void 0;
+    const delta = key.startsWith("Arrow") ? [
+      "ArrowUp",
+      "ArrowLeft"
+    ].includes(key) ? -1 : 1 : shift ? -1 : 1;
+    dxGrid.current?.refocus(axis, delta);
+  }, [
+    model,
+    editing,
+    setEditing
+  ]);
+  const handleAxisResize = (0, import_react4.useCallback)(({ 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 = (0, import_react4.useCallback)(({ minCol, maxCol, minRow, maxRow }) => {
+    const range = {
+      from: {
+        col: minCol,
+        row: minRow
+      }
+    };
+    if (minCol !== maxCol || minRow !== maxRow) {
+      range.to = {
+        col: maxCol,
+        row: maxRow
+      };
+    }
+    if (editing) {
+      rangeNotifier.current?.(rangeToA1Notation(range));
+    } else {
+      setRange(range.to ? range : void 0);
+    }
+  }, [
+    editing
+  ]);
+  const handleWheel = (0, import_react4.useCallback)((event) => {
+    if (!hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention
+  ]);
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
+  const extension = (0, import_react4.useMemo)(() => [
+    (0, import_react_ui_grid.editorKeys)({
+      onClose: handleClose,
+      ...editing?.initialContent && {
+        onNav: handleClose
+      }
+    }),
+    sheetExtension({
+      functions: model.graph.getFunctions()
+    }),
+    rangeExtension((fn) => rangeNotifier.current = fn)
+  ], [
+    model,
+    handleClose,
+    editing
+  ]);
+  const getCellContent = (0, import_react4.useCallback)((index) => {
+    const cell = dxGridCellIndexToSheetCellAddress(index);
+    return model.getCellText(cell);
+  }, [
+    model
+  ]);
+  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid.GridCellEditor, {
+    getCellContent,
+    extension
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui_grid.Grid.Content, {
+    initialCells,
+    limitColumns: DEFAULT_COLUMNS,
+    limitRows: DEFAULT_ROWS,
+    columns,
+    rows,
+    onAxisResize: handleAxisResize,
+    onSelect: handleSelect,
+    rowDefault: sheetRowDefault,
+    columnDefault: sheetColDefault,
+    frozen,
+    onFocus: handleFocus,
+    onWheelCapture: handleWheel,
+    className: "[--dx-grid-base:var(--surface-bg)]",
+    ref: dxGrid
+  }));
+};
+var SheetContainer = import_react3.default.lazy(() => import("./SheetContainer-YSQGJD7K.cjs"));
+var useComputeGraph = (space) => {
+  const { registry } = (0, import_react2.useContext)(ComputeGraphContext) ?? (0, import_debug.raise)(new Error("Missing ComputeGraphContext"));
+  const [graph] = (0, import_react_hooks.useAsyncState)(async () => {
+    if (space) {
+      const graph2 = registry.getOrCreateGraph(space);
+      await graph2.open();
+      return graph2;
+    }
+  }, [
+    space,
+    registry
+  ]);
+  return graph;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComputeGraphContextProvider,
+  GridSheet,
+  SheetContainer,
+  SheetProvider,
+  addressToA1Notation,
+  addressToIndex,
+  compareIndexPositions,
+  computeGraphFacet,
+  createSheet,
+  rangeToA1Notation,
+  useComputeGraph,
+  useSheetContext
+});
+//# sourceMappingURL=chunk-6F43RV45.cjs.map