@dxos/plugin-sheet 0.6.14-main.8b352a0 → 0.6.14-staging.3e2eaca

package/dist/lib/browser/{chunk-I2DKJ72A.mjs → chunk-4LKIURJA.mjs}

@@ -17,13 +17,14 @@ import {
   isFormula,
   rangeFromIndex,
   rangeToA1Notation
-} from "./chunk-KCYJSOFB.mjs";
+} from "./chunk-VMSX6Z4X.mjs";
 import {
-  Range
-} from "./chunk-5KVQ5IPW.mjs";
+  Range,
+  SheetAction
+} from "./chunk-BVUN7SHF.mjs";
 import {
   SHEET_PLUGIN
-} from "./chunk-D3QTX46O.mjs";
+} from "./chunk-RABELMEQ.mjs";
 
 // packages/plugins/plugin-sheet/src/components/ComputeGraph/ComputeGraphContextProvider.tsx
 import React, { createContext, useContext } from "react";
@@ -283,21 +284,39 @@ import { Grid, useGridContext } from "@dxos/react-ui-grid";
 // packages/plugins/plugin-sheet/src/model/sheet-model.ts
 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 as invariant2 } from "@dxos/invariant";
 import { PublicKey } from "@dxos/keys";
 import { log } from "@dxos/log";
-import { FieldValueType } from "@dxos/schema";
 import { DetailedCellError, ExportedCellChange } from "#hyperformula";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
 var typeMap = {
-  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
+  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
+  }
 };
 var getTopLeft = (range) => {
   const to = range.to ?? range.from;
@@ -347,11 +366,16 @@ var SheetModel = class extends Resource {
       id: this.id
     }, {
       F: __dxlog_file,
-      L: 111,
+      L: 113,
       S: this,
       C: (f, a) => f(...a)
     });
     initialize(this._sheet);
+    this._graph.update.on((event) => {
+      if (event.type === "functionsUpdated") {
+        this.reset();
+      }
+    });
     this._node = this._graph.getOrCreateNode(createSheetName({
       type: getTypename(this._sheet),
       id: this._sheet.id
@@ -369,7 +393,7 @@ var SheetModel = class extends Resource {
   reset() {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 131,
+      L: 139,
       S: this,
       A: [
         "this._node",
@@ -380,7 +404,7 @@ var SheetModel = class extends Resource {
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
       invariant2(this._node, void 0, {
         F: __dxlog_file,
-        L: 134,
+        L: 142,
         S: this,
         A: [
           "this._node",
@@ -389,7 +413,12 @@ var SheetModel = class extends Resource {
       });
       const { col, row } = addressFromIndex(this._sheet, key);
       if (isFormula(value)) {
-        value = this._graph.mapFormulaToNative(this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)));
+        const binding = this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value));
+        if (binding) {
+          value = this._graph.mapFormulaToNative(binding);
+        } else {
+          value = "";
+        }
       }
       this._node.graph.hf.setCellContents({
         sheet: this._node.sheetId,
@@ -409,11 +438,79 @@ var SheetModel = class extends Resource {
     this._node?.graph.hf.rebuildAndRecalculate();
   }
   insertRows(i, 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, 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) {
+    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) {
+    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 }) {
+    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 }) {
+    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();
   }
   //
@@ -426,7 +523,7 @@ var SheetModel = class extends Resource {
   clear(range) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 176,
+      L: 245,
       S: this,
       A: [
         "this._node",
@@ -444,7 +541,7 @@ var SheetModel = class extends Resource {
   cut(range) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 187,
+      L: 256,
       S: this,
       A: [
         "this._node",
@@ -460,7 +557,7 @@ var SheetModel = class extends Resource {
   copy(range) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 196,
+      L: 265,
       S: this,
       A: [
         "this._node",
@@ -472,7 +569,7 @@ var SheetModel = class extends Resource {
   paste(cell) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 201,
+      L: 270,
       S: this,
       A: [
         "this._node",
@@ -499,7 +596,7 @@ var SheetModel = class extends Resource {
   undo() {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 216,
+      L: 285,
       S: this,
       A: [
         "this._node",
@@ -513,7 +610,7 @@ var SheetModel = class extends Resource {
   redo() {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 224,
+      L: 293,
       S: this,
       A: [
         "this._node",
@@ -557,15 +654,25 @@ var SheetModel = class extends Resource {
   getValue(cell) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 267,
+      L: 336,
       S: this,
       A: [
         "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) {
+      log.info("cell error", {
+        cell,
+        error: value
+      }, {
+        F: __dxlog_file,
+        L: 341,
+        S: this,
+        C: (f, a) => f(...a)
+      });
       return value.toString();
     }
     return value;
@@ -573,10 +680,10 @@ var SheetModel = class extends Resource {
   /**
   * Get value type.
   */
-  getValueType(cell) {
+  getValueDescription(cell) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 280,
+      L: 352,
       S: this,
       A: [
         "this._node",
@@ -593,7 +700,7 @@ var SheetModel = class extends Resource {
   setValue(cell, value) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 290,
+      L: 362,
       S: this,
       A: [
         "this._node",
@@ -690,7 +797,7 @@ var SheetModel = class extends Resource {
   mapFormulaRefsToIndices(formula) {
     invariant2(isFormula(formula), void 0, {
       F: __dxlog_file,
-      L: 379,
+      L: 451,
       S: this,
       A: [
         "isFormula(formula)",
@@ -707,7 +814,7 @@ var SheetModel = class extends Resource {
   mapFormulaIndicesToRefs(formula) {
     invariant2(isFormula(formula), void 0, {
       F: __dxlog_file,
-      L: 389,
+      L: 461,
       S: this,
       A: [
         "isFormula(formula)",
@@ -733,7 +840,7 @@ var SheetModel = class extends Resource {
   toDateTime(num) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 410,
+      L: 482,
       S: this,
       A: [
         "this._node",
@@ -745,7 +852,7 @@ var SheetModel = class extends Resource {
   toDate(num) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 415,
+      L: 487,
       S: this,
       A: [
         "this._node",
@@ -757,7 +864,7 @@ var SheetModel = class extends Resource {
   toTime(num) {
     invariant2(this._node, void 0, {
       F: __dxlog_file,
-      L: 420,
+      L: 492,
       S: this,
       A: [
         "this._node",
@@ -868,9 +975,10 @@ var SheetProvider = ({ children, graph, sheet, readonly, onInfo }) => {
 
 // packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
 import React4, { useCallback as useCallback4, useMemo as useMemo2, useRef, useState as useState4 } from "react";
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { DropdownMenu, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
-import { closestCell, editorKeys, Grid as Grid2, GridCellEditor } from "@dxos/react-ui-grid";
+import { closestCell, defaultSizeRow, editorKeys, Grid as Grid2, GridCellEditor } from "@dxos/react-ui-grid";
 
 // packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
 import { useEffect as useEffect3, useState as useState3 } from "react";
@@ -928,7 +1036,7 @@ var RangeList = ({ sheet }) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/index.ts
-var SheetContainer = lazy(() => import("./SheetContainer-R65IDJHN.mjs"));
+var SheetContainer = lazy(() => import("./SheetContainer-P3NF5KEI.mjs"));
 
 // packages/plugins/plugin-sheet/src/integrations/thread-ranges.ts
 var completeCellRangeToThreadCursor = (range) => {
@@ -1068,11 +1176,20 @@ var projectCellProps = (model, col, row) => {
     const range = thread?.anchor && parseThreadAnchorAsCellRange(thread.anchor);
     return thread && range ? inRange(range, address) : false;
   }).map((thread) => fullyQualifiedId3(thread)).join(" ");
-  const type = model.getValueType(address);
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
   const classNames = ranges?.map(cellClassNameForRange).reverse();
   return {
-    value: parseValue(type, rawValue),
-    className: mx2(cellClassesForFieldType(type), threadRefs && commentedClassName, classNames),
+    value: parseValue({
+      type,
+      format,
+      value: rawValue
+    }),
+    className: mx2(cellClassesForFieldType({
+      type,
+      format
+    }), threadRefs && commentedClassName, classNames),
     dataRefs: threadRefs
   };
 };
@@ -1095,11 +1212,12 @@ var gridCellGetter = (model) => {
 };
 var rowLabelCell = (row) => ({
   value: rowToA1Notation(row),
-  className: "text-end !pie-1",
+  className: "text-end !pie-1 text-subdued",
   resizeHandle: "row"
 });
 var colLabelCell = (col) => ({
   value: colToA1Notation(col),
+  className: "text-subdued",
   resizeHandle: "col"
 });
 var cellGetter = (model) => {
@@ -1131,7 +1249,7 @@ var cellGetter = (model) => {
 };
 var useSheetModelDxGridProps = (dxGrid, model) => {
   const [columns, setColumns] = useState3(createDxGridColumns(model));
-  const [rows, setRows] = useState3(createDxGridColumns(model));
+  const [rows, setRows] = useState3(createDxGridRows(model));
   useEffect3(() => {
     const cellsAccessor = createDocAccessor(model.sheet, [
       "cells"
@@ -1143,7 +1261,11 @@ var useSheetModelDxGridProps = (dxGrid, model) => {
       dxGrid?.requestUpdate("initialCells");
     };
     cellsAccessor.handle.addListener("change", handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+      unsubscribe();
+    };
   }, [
     model,
     dxGrid
@@ -1168,7 +1290,8 @@ var useSheetModelDxGridProps = (dxGrid, model) => {
       rowMetaAccessor.handle.removeListener("change", handleRowMetaUpdate);
     };
   }, [
-    model
+    model,
+    dxGrid
   ]);
   return {
     columns,
@@ -1203,11 +1326,11 @@ var frozen = {
 };
 var sheetRowDefault = {
   frozenRowsStart: {
-    size: 32,
+    size: defaultSizeRow,
     readonly: true
   },
   grid: {
-    size: 32,
+    size: defaultSizeRow,
     resizeable: true
   }
 };
@@ -1223,42 +1346,50 @@ var sheetColDefault = {
 };
 var GridSheet = () => {
   const { t } = useTranslation2(SHEET_PLUGIN);
-  const { id, model, editing, setEditing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
+  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = useSheetContext();
   const [dxGrid, setDxGrid] = useState4(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState4(null);
+  const dispatch = useIntentDispatcher2();
   const rangeController = useRef();
   const { hasAttention } = useAttention(id);
   const handleFocus = useCallback4((event) => {
     if (!editing) {
       const cell = closestCell(event.target);
-      if (cell && cell.plane === "grid") {
-        setCursor({
-          col: cell.col,
-          row: cell.row
-        });
+      if (cell) {
+        if (cell.plane === "grid") {
+          setCursor({
+            col: cell.col,
+            row: cell.row
+          });
+          setExtraplanarFocus(null);
+        } else {
+          setExtraplanarFocus(cell);
+        }
+      } else {
+        setExtraplanarFocus(null);
       }
     }
   }, [
     editing
   ]);
-  const handleClose = useCallback4((value, { key, shift }) => {
-    if (value !== void 0) {
-      model.setValue(dxGridCellIndexToSheetCellAddress(editing.index), value);
+  const handleClose = useCallback4((_value, event) => {
+    if (event) {
+      const { key, shift } = event;
+      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?.refocus(axis, delta);
     }
-    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?.refocus(axis, delta);
   }, [
     model,
     editing,
@@ -1268,7 +1399,6 @@ var GridSheet = () => {
     if (value !== void 0) {
       model.setValue(dxGridCellIndexToSheetCellAddress(editing.index), value);
     }
-    setEditing(null);
   }, [
     model,
     editing
@@ -1314,12 +1444,63 @@ var GridSheet = () => {
   }, [
     hasAttention
   ]);
+  const selectEntireAxis = useCallback4((pos) => {
+    switch (pos.plane) {
+      case "frozenRowsStart":
+        return dxGrid?.setSelection({
+          start: {
+            col: pos.col,
+            row: 0,
+            plane: "grid"
+          },
+          end: {
+            col: pos.col,
+            row: model.sheet.rows.length - 1,
+            plane: "grid"
+          }
+        });
+      case "frozenColsStart":
+        return dxGrid?.setSelection({
+          start: {
+            row: pos.row,
+            col: 0,
+            plane: "grid"
+          },
+          end: {
+            row: pos.row,
+            col: model.sheet.columns.length - 1,
+            plane: "grid"
+          }
+        });
+    }
+  }, [
+    dxGrid,
+    model.sheet
+  ]);
+  const handleClick = useCallback4((event) => {
+    const cell = closestCell(event.target);
+    if (cell) {
+      selectEntireAxis(cell);
+    }
+  }, [
+    selectEntireAxis
+  ]);
   const handleKeyDown = useCallback4((event) => {
     switch (event.key) {
       case "Backspace":
       case "Delete":
         event.preventDefault();
         return cursorFallbackRange && model.clear(cursorFallbackRange);
+      case "Enter":
+      case "Space":
+        if (dxGrid && extraplanarFocus) {
+          switch (extraplanarFocus.plane) {
+            case "frozenRowsStart":
+            case "frozenColsStart":
+              event.preventDefault();
+              return selectEntireAxis(extraplanarFocus);
+          }
+        }
     }
     if (event.metaKey || event.ctrlKey) {
       switch (event.key) {
@@ -1347,7 +1528,9 @@ var GridSheet = () => {
   }, [
     cursorFallbackRange,
     model,
-    cursor
+    cursor,
+    extraplanarFocus,
+    selectEntireAxis
   ]);
   const contextMenuAnchorRef = useRef(null);
   const [contextMenuOpen, setContextMenuOpen] = useState4(null);
@@ -1362,16 +1545,32 @@ var GridSheet = () => {
   }, []);
   const handleAxisMenuAction = useCallback4((operation) => {
     switch (operation) {
-      case "add-before":
-      case "add-after":
-        model[contextMenuAxis === "col" ? "insertColumns" : "insertRows"](contextMenuOpen[contextMenuAxis] + (operation === "add-before" ? 0 : 1), 1);
+      case "insert-before":
+      case "insert-after":
+        return dispatch({
+          action: SheetAction.INSERT_AXIS,
+          data: {
+            model,
+            axis: contextMenuAxis,
+            index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
+          }
+        });
         break;
-      case "remove":
+      case "drop":
+        return dispatch({
+          action: SheetAction.DROP_AXIS,
+          data: {
+            model,
+            axis: contextMenuAxis,
+            axisIndex: model.sheet[contextMenuAxis === "row" ? "rows" : "columns"][contextMenuOpen[contextMenuAxis]]
+          }
+        });
     }
   }, [
     contextMenuAxis,
     contextMenuOpen,
-    model
+    model,
+    dispatch
   ]);
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
   const extension = useMemo2(() => [
@@ -1424,8 +1623,9 @@ var GridSheet = () => {
     onWheelCapture: handleWheel,
     onKeyDown: handleKeyDown,
     onContextMenu: handleContextMenu,
-    overscroll: "inline",
-    className: "[--dx-grid-base:var(--surface-bg)]",
+    onClick: handleClick,
+    overscroll: "trap",
+    className: "[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:border-bs [&_.dx-grid]:border-separator",
     activeRefs,
     ref: setDxGrid
   }), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
@@ -1439,18 +1639,17 @@ var GridSheet = () => {
     sideOffset: 4,
     collisionPadding: 8
   }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => handleAxisMenuAction("add-before")
+    onClick: () => handleAxisMenuAction("insert-before")
   }, /* @__PURE__ */ React4.createElement(Icon, {
     size: 5,
     icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular"
   }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} before label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => handleAxisMenuAction("add-after")
+    onClick: () => handleAxisMenuAction("insert-after")
   }, /* @__PURE__ */ React4.createElement(Icon, {
     size: 5,
     icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular"
   }), /* @__PURE__ */ React4.createElement("span", null, t(`add ${contextMenuAxis} after label`))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    disabled: true,
-    onClick: () => handleAxisMenuAction("remove")
+    onClick: () => handleAxisMenuAction("drop")
   }, /* @__PURE__ */ React4.createElement(Icon, {
     size: 5,
     icon: "ph--backspace--regular"
@@ -1468,4 +1667,4 @@ export {
   RangeList,
   SheetContainer
 };
-//# sourceMappingURL=chunk-I2DKJ72A.mjs.map
+//# sourceMappingURL=chunk-4LKIURJA.mjs.map