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

package/dist/lib/node/{chunk-6F43RV45.cjs → chunk-AXQZA2YS.cjs}

@@ -26,8 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_6F43RV45_exports = {};
-__export(chunk_6F43RV45_exports, {
+var chunk_AXQZA2YS_exports = {};
+__export(chunk_AXQZA2YS_exports, {
   ComputeGraphContextProvider: () => ComputeGraphContextProvider,
   GridSheet: () => GridSheet,
   SheetContainer: () => SheetContainer,
@@ -37,12 +37,13 @@ __export(chunk_6F43RV45_exports, {
   compareIndexPositions: () => compareIndexPositions,
   computeGraphFacet: () => computeGraphFacet,
   createSheet: () => createSheet,
+  inRange: () => inRange,
   rangeToA1Notation: () => rangeToA1Notation,
   useComputeGraph: () => useComputeGraph,
   useSheetContext: () => useSheetContext
 });
-module.exports = __toCommonJS(chunk_6F43RV45_exports);
-var import_chunk_ER3PM7GD = require("./chunk-ER3PM7GD.cjs");
+module.exports = __toCommonJS(chunk_AXQZA2YS_exports);
+var import_chunk_NZARD7UP = require("./chunk-NZARD7UP.cjs");
 var import_chunk_QIFIGEKV = require("./chunk-QIFIGEKV.cjs");
 var import_chunk_5XPK2V4A = require("./chunk-5XPK2V4A.cjs");
 var import_react = __toESM(require("react"));
@@ -71,26 +72,25 @@ 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_data = require("@dxos/react-ui-data");
 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_schema = 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_react7 = 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_react8 = __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");
@@ -201,14 +201,14 @@ var initialize = (sheet, { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS } = {}
   }
 };
 var createSheet = ({ name, cells, ...size } = {}) => {
-  const sheet = (0, import_echo_schema.create)(import_chunk_ER3PM7GD.SheetType, {
+  const sheet = (0, import_echo_schema.create)(import_chunk_NZARD7UP.SheetType, {
     name,
     cells: {},
     rows: [],
     columns: [],
     rowMeta: {},
     columnMeta: {},
-    formatting: []
+    ranges: []
   });
   initialize(sheet, size);
   if (cells) {
@@ -231,13 +231,6 @@ var addressFromIndex = (sheet, idx) => {
     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;
@@ -259,6 +252,32 @@ var compareIndexPositions = (sheet, indexA, indexB) => {
     return columnA - columnB;
   }
 };
+var cellClassNameForRange = ({ key, value }) => {
+  switch (key) {
+    case "align":
+      switch (value) {
+        case "start":
+          return "text-start";
+        case "center":
+          return "text-center";
+        case "end":
+          return "text-end";
+        default:
+          return void 0;
+      }
+    case "comment":
+      return "bg-gridComment";
+    case "style":
+      switch (value) {
+        case "highlight":
+          return "bg-gridHighlight";
+        default:
+          return void 0;
+      }
+    default:
+      return void 0;
+  }
+};
 var updateAllDecorations = import_state.StateEffect.define();
 var computeGraphFacet = (0, import_state2.singleValueFacet)();
 var highlightStyles = import_language2.HighlightStyle.define([
@@ -491,7 +510,26 @@ var createDxGridRows = (model) => {
     grid: {}
   });
 };
-var gridCellGetter = (model, formatting) => {
+var projectCellProps = (model, col, row) => {
+  const address = {
+    col,
+    row
+  };
+  const rawValue = model.getValue(address);
+  if (rawValue === void 0 || rawValue === null) {
+    return {
+      value: ""
+    };
+  }
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
+  const type = model.getValueType(address);
+  const classNames = ranges?.map(cellClassNameForRange).reverse();
+  return {
+    value: (0, import_react_ui_data.parseValue)(type, rawValue),
+    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_data.cellClassesForFieldType)(type), classNames)
+  };
+};
+var gridCellGetter = (model) => {
   const cachedGridCells = {};
   return (nextBounds) => {
     [
@@ -502,16 +540,10 @@ var gridCellGetter = (model, formatting) => {
       ].forEach((_2, r0) => {
         const col = nextBounds.start.col + c0;
         const row = nextBounds.start.row + r0;
-        const cell = formatting.getFormatting({
-          col,
-          row
-        });
+        const cell = projectCellProps(model, col, row);
         if (cell.value) {
           cachedGridCells;
-          cachedGridCells[`${col},${row}`] = {
-            value: cell.value,
-            className: (0, import_react_ui_theme2.mx)(cell.classNames)
-          };
+          cachedGridCells[`${col},${row}`] = cell;
         }
       });
     });
@@ -527,8 +559,8 @@ var colLabelCell = (col) => ({
   value: (0, import_react_ui_grid2.colToA1Notation)(col),
   resizeHandle: "col"
 });
-var cellGetter = (model, formatting) => {
-  const getGridCells = gridCellGetter(model, formatting);
+var cellGetter = (model) => {
+  const getGridCells = gridCellGetter(model);
   return (nextBounds, plane) => {
     switch (plane) {
       case "grid":
@@ -554,7 +586,7 @@ var cellGetter = (model, formatting) => {
     }
   };
 };
-var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
+var useSheetModelDxGridProps = (dxGridRef, model) => {
   const [columns, setColumns] = (0, import_react5.useState)(createDxGridColumns(model));
   const [rows, setRows] = (0, import_react5.useState)(createDxGridColumns(model));
   (0, import_react5.useLayoutEffect)(() => {
@@ -562,7 +594,7 @@ var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
       "cells"
     ]);
     if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model, formatting);
+      dxGridRef.current.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
       dxGridRef.current?.requestUpdate("initialCells");
@@ -570,8 +602,7 @@ var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
     cellsAccessor.handle.addListener("change", handleCellsUpdate);
     return () => cellsAccessor.handle.removeListener("change", handleCellsUpdate);
   }, [
-    model,
-    formatting
+    model
   ]);
   (0, import_react5.useEffect)(() => {
     const columnMetaAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
@@ -636,124 +667,15 @@ var createDecorations = () => {
     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
+  BOOLEAN: import_schema.FieldValueType.Boolean,
+  NUMBER_RAW: import_schema.FieldValueType.Number,
+  NUMBER_PERCENT: import_schema.FieldValueType.Percent,
+  NUMBER_CURRENCY: import_schema.FieldValueType.Currency,
+  NUMBER_DATETIME: import_schema.FieldValueType.DateTime,
+  NUMBER_DATE: import_schema.FieldValueType.Date,
+  NUMBER_TIME: import_schema.FieldValueType.Time
 };
 var getTopLeft = (range) => {
   const to = range.to ?? range.from;
@@ -1223,14 +1145,9 @@ var SheetModel = class extends import_context.Resource {
     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)(() => {
+  const [model, setModel] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
     if (!graph || !sheet) {
       return;
     }
@@ -1254,7 +1171,7 @@ var useSheetModel = (graph, sheet, { readonly } = {}) => {
   return model;
 };
 var useUpdateFocusedCellOnThreadSelection = (model, grid) => {
-  const handleScrollIntoView = (0, import_react8.useCallback)(({ action, data }) => {
+  const handleScrollIntoView = (0, import_react7.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)) {
@@ -1274,15 +1191,15 @@ var useUpdateFocusedCellOnThreadSelection = (model, grid) => {
 };
 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") ?? [], [
+  const activeThreads = (0, import_react7.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)), [
+  const activeThreadAddresses = (0, import_react7.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) => {
+  const selectClosestThread = (0, import_react7.useCallback)((cellAddress) => {
     if (!cellAddress || !activeThreads) {
       return;
     }
@@ -1306,12 +1223,12 @@ var useSelectThreadOnCellFocus = (model, cursor) => {
     activeThreadAddresses,
     model.sheet
   ]);
-  const debounced = (0, import_react8.useMemo)(() => {
+  const debounced = (0, import_react7.useMemo)(() => {
     return (0, import_async3.debounce)((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
   }, [
     selectClosestThread
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!cursor) {
       return;
     }
@@ -1331,13 +1248,13 @@ var createThreadDecoration = (cellIndex, threadId, sheetId) => {
   };
 };
 var useThreadDecorations = (model, decorations) => {
-  const sheet = (0, import_react8.useMemo)(() => model.sheet, [
+  const sheet = (0, import_react7.useMemo)(() => model.sheet, [
     model.sheet
   ]);
-  const sheetId = (0, import_react8.useMemo)(() => (0, import_echo2.fullyQualifiedId)(sheet), [
+  const sheetId = (0, import_react7.useMemo)(() => (0, import_echo2.fullyQualifiedId)(sheet), [
     sheet
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const unsubscribe = (0, import_signals_core.effect)(() => {
       const activeThreadAnchors = /* @__PURE__ */ new Set();
       if (!sheet.threads) {
@@ -1367,12 +1284,12 @@ var useThreadDecorations = (model, decorations) => {
   });
 };
 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 SheetContext = /* @__PURE__ */ (0, import_react8.createContext)(null);
 var useSheetContext = () => {
-  const context = (0, import_react9.useContext)(SheetContext);
+  const context = (0, import_react8.useContext)(SheetContext);
   (0, import_invariant4.invariant)(context, void 0, {
     F: __dxlog_file3,
-    L: 46,
+    L: 45,
     S: void 0,
     A: [
       "context",
@@ -1381,18 +1298,17 @@ var useSheetContext = () => {
   });
   return context;
 };
-var SheetProviderImpl = ({ model, formatting, onInfo, children, __gridScope }) => {
+var SheetProviderImpl = ({ model, 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)();
+  const decorations = (0, import_react8.useMemo)(() => createDecorations(), []);
+  const [cursor, setCursor] = (0, import_react8.useState)();
+  const [range, setRange] = (0, import_react8.useState)();
   useSelectThreadOnCellFocus(model, cursor);
   useThreadDecorations(model, decorations);
-  return /* @__PURE__ */ import_react9.default.createElement(SheetContext.Provider, {
+  return /* @__PURE__ */ import_react8.default.createElement(SheetContext.Provider, {
     value: {
       id,
       model,
-      formatting,
       editing,
       setEditing,
       cursor,
@@ -1409,12 +1325,10 @@ 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, {
+  return !model ? null : /* @__PURE__ */ import_react8.default.createElement(import_react_ui_grid3.Grid.Root, {
     id: (0, import_echo3.fullyQualifiedId)(sheet)
-  }, /* @__PURE__ */ import_react9.default.createElement(SheetProviderImpl, {
+  }, /* @__PURE__ */ import_react8.default.createElement(SheetProviderImpl, {
     model,
-    formatting,
     onInfo
   }, children));
 };
@@ -1453,17 +1367,19 @@ var sheetColDefault = {
   }
 };
 var GridSheet = () => {
-  const { id, model, formatting, editing, setEditing, setCursor, setRange } = useSheetContext();
+  const { id, model, 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);
+      if (cell && cell.plane === "grid") {
+        setCursor({
+          col: cell.col,
+          row: cell.row
+        });
+      }
     }
   }, [
     editing
@@ -1533,7 +1449,7 @@ var GridSheet = () => {
   }, [
     hasAttention
   ]);
-  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
   const extension = (0, import_react4.useMemo)(() => [
     (0, import_react_ui_grid.editorKeys)({
       onClose: handleClose,
@@ -1577,7 +1493,7 @@ var GridSheet = () => {
     ref: dxGrid
   }));
 };
-var SheetContainer = import_react3.default.lazy(() => import("./SheetContainer-YSQGJD7K.cjs"));
+var SheetContainer = import_react3.default.lazy(() => import("./SheetContainer-J7XROAMN.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 () => {
@@ -1603,8 +1519,9 @@ var useComputeGraph = (space) => {
   compareIndexPositions,
   computeGraphFacet,
   createSheet,
+  inRange,
   rangeToA1Notation,
   useComputeGraph,
   useSheetContext
 });
-//# sourceMappingURL=chunk-6F43RV45.cjs.map
+//# sourceMappingURL=chunk-AXQZA2YS.cjs.map