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

package/dist/lib/node/SheetContainer-AXQV3ZT5.cjs

@@ -1,1765 +0,0 @@
-"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 SheetContainer_AXQV3ZT5_exports = {};
-__export(SheetContainer_AXQV3ZT5_exports, {
-  default: () => SheetContainer_default
-});
-module.exports = __toCommonJS(SheetContainer_AXQV3ZT5_exports);
-var import_chunk_CN3RPESU = require("./chunk-CN3RPESU.cjs");
-var import_chunk_5KKJ4NPP = require("./chunk-5KKJ4NPP.cjs");
-var import_chunk_DSYKOI4E = require("./chunk-DSYKOI4E.cjs");
-var import_chunk_BJ6ZD7MN = require("./chunk-BJ6ZD7MN.cjs");
-var import_react = __toESM(require("react"));
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_core = require("@dnd-kit/core");
-var import_modifiers = require("@dnd-kit/modifiers");
-var import_utilities = require("@dnd-kit/utilities");
-var import_react2 = require("@phosphor-icons/react");
-var import_re_resizable = require("re-resizable");
-var import_react3 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
-var import_react_resize_detector = require("react-resize-detector");
-var import_async = require("@dxos/async");
-var import_echo = require("@dxos/client/echo");
-var import_log = require("@dxos/log");
-var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react4 = require("react");
-var import_react5 = require("react");
-var import_react6 = __toESM(require("react"));
-var import_invariant = require("@dxos/invariant");
-var import_echo2 = require("@dxos/react-client/echo");
-var import_view = require("@codemirror/view");
-var import_react7 = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_editor = require("@dxos/react-ui-editor");
-var import_autocomplete = require("@codemirror/autocomplete");
-var import_language = require("@codemirror/language");
-var import_state = require("@codemirror/state");
-var import_view2 = require("@codemirror/view");
-var import_highlight = require("@lezer/highlight");
-var import_codemirror_lang_spreadsheet = require("codemirror-lang-spreadsheet");
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var axisWidth = "calc(var(--rail-size)-2px)";
-var axisHeight = 34;
-var minWidth = 40;
-var maxWidth = 800;
-var minHeight = axisHeight;
-var maxHeight = 400;
-var defaultWidth = 200;
-var defaultHeight = minHeight;
-var CELL_DATA_KEY = "cell";
-var useGridLayout = ({ scroller, size, rows, columns, rowSizes, columnSizes }) => {
-  const [rowPositions, setRowPositions] = (0, import_react4.useState)([]);
-  (0, import_react4.useEffect)(() => {
-    if (!rowSizes) {
-      return;
-    }
-    let y = 0;
-    setRowPositions(rows.map((idx, i) => {
-      const height2 = rowSizes?.[idx] ?? defaultHeight;
-      const top = y;
-      y += height2 - 1;
-      return {
-        row: i,
-        top,
-        height: height2
-      };
-    }));
-  }, [
-    rows,
-    rowSizes
-  ]);
-  const [columnPositions, setColumnPositions] = (0, import_react4.useState)([]);
-  (0, import_react4.useEffect)(() => {
-    if (!columns) {
-      return;
-    }
-    let x = 0;
-    setColumnPositions(columns.map((idx, i) => {
-      const width2 = columnSizes?.[idx] ?? defaultWidth;
-      const left = x;
-      x += width2 - 1;
-      return {
-        column: i,
-        left,
-        width: width2
-      };
-    }));
-  }, [
-    columns,
-    columnSizes
-  ]);
-  const height = rowPositions.length ? rowPositions[rowPositions.length - 1].top + rowPositions[rowPositions.length - 1].height : 0;
-  const width = columnPositions.length ? columnPositions[columnPositions.length - 1].left + columnPositions[columnPositions.length - 1].width : 0;
-  const [{ rowRange, columnRange }, setWindow] = (0, import_react4.useState)({
-    rowRange: [],
-    columnRange: []
-  });
-  (0, import_react4.useEffect)(() => {
-    const handleScroll = () => {
-      if (!scroller) {
-        return;
-      }
-      const { scrollLeft: left, scrollTop: top, clientWidth: width2, clientHeight: height2 } = scroller;
-      let rowStart = 0;
-      let rowEnd = 0;
-      for (let i = 0; i < rowPositions.length; i++) {
-        const row = rowPositions[i];
-        if (row.top <= top) {
-          rowStart = i;
-        }
-        if (row.top + row.height >= top + height2) {
-          rowEnd = i;
-          break;
-        }
-      }
-      let columnStart = 0;
-      let columnEnd = 0;
-      for (let i = 0; i < columnPositions.length; i++) {
-        const column = columnPositions[i];
-        if (column.left <= left) {
-          columnStart = i;
-        }
-        if (column.left + column.width >= left + width2) {
-          columnEnd = i;
-          break;
-        }
-      }
-      const overscan = 5;
-      setWindow({
-        rowRange: rowPositions.slice(Math.max(0, rowStart - overscan), Math.min(rowPositions.length, rowEnd + overscan)),
-        columnRange: columnPositions.slice(Math.max(0, columnStart - overscan), Math.min(columnPositions.length, columnEnd + overscan))
-      });
-    };
-    scroller?.addEventListener("scroll", handleScroll);
-    handleScroll();
-    return () => {
-      scroller?.removeEventListener("scroll", handleScroll);
-    };
-  }, [
-    size.width,
-    size.height,
-    rowPositions,
-    columnPositions
-  ]);
-  return {
-    width,
-    height,
-    rowRange,
-    columnRange
-  };
-};
-var getCellAtPointer = (event) => {
-  const element = document.elementFromPoint(event.clientX, event.clientY);
-  const root = element?.closest(`[data-${CELL_DATA_KEY}]`);
-  if (root) {
-    const value = root.dataset[CELL_DATA_KEY];
-    if (value) {
-      return (0, import_chunk_5KKJ4NPP.addressFromA1Notation)(value);
-    }
-  }
-};
-var getCellElement = (root, cell) => {
-  const pos = (0, import_chunk_5KKJ4NPP.addressToA1Notation)(cell);
-  return root.querySelector(`[data-${CELL_DATA_KEY}="${pos}"]`);
-};
-var handleNav = (ev, cursor, range, size) => {
-  if (cursor && ev.shiftKey) {
-    const opposite = range?.to ?? {
-      ...cursor
-    };
-    switch (ev.key) {
-      case "ArrowUp": {
-        if (opposite.row > 0) {
-          opposite.row -= 1;
-        }
-        break;
-      }
-      case "ArrowDown": {
-        if (opposite.row < size.numRows - 1) {
-          opposite.row += 1;
-        }
-        break;
-      }
-      case "ArrowLeft": {
-        if (opposite.column > 0) {
-          opposite.column -= 1;
-        }
-        break;
-      }
-      case "ArrowRight": {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 1;
-        }
-        break;
-      }
-    }
-    return {
-      cursor,
-      range: {
-        from: cursor,
-        to: opposite
-      }
-    };
-  }
-  const next = handleArrowNav(ev, cursor, size);
-  return {
-    cursor: next
-  };
-};
-var handleArrowNav = (ev, cursor, { numRows, numColumns }) => {
-  switch (ev.key) {
-    case "ArrowUp":
-      if (cursor === void 0) {
-        return {
-          row: 0,
-          column: 0
-        };
-      } else if (cursor.row > 0) {
-        return {
-          row: ev.metaKey ? 0 : cursor.row - 1,
-          column: cursor.column
-        };
-      }
-      break;
-    case "ArrowDown":
-      if (cursor === void 0) {
-        return {
-          row: 0,
-          column: 0
-        };
-      } else if (cursor.row < numRows - 1) {
-        return {
-          row: ev.metaKey ? numRows - 1 : cursor.row + 1,
-          column: cursor.column
-        };
-      }
-      break;
-    case "ArrowLeft":
-      if (cursor === void 0) {
-        return {
-          row: 0,
-          column: 0
-        };
-      } else if (cursor.column > 0) {
-        return {
-          row: cursor.row,
-          column: ev.metaKey ? 0 : cursor.column - 1
-        };
-      }
-      break;
-    case "ArrowRight":
-      if (cursor === void 0) {
-        return {
-          row: 0,
-          column: 0
-        };
-      } else if (cursor.column < numColumns - 1) {
-        return {
-          row: cursor.row,
-          column: ev.metaKey ? numColumns - 1 : cursor.column + 1
-        };
-      }
-      break;
-    case "Home":
-      return {
-        row: 0,
-        column: 0
-      };
-    case "End":
-      return {
-        row: numRows - 1,
-        column: numColumns - 1
-      };
-  }
-};
-var useRangeSelect = (cb) => {
-  const [from, setFrom] = (0, import_react5.useState)();
-  const [to, setTo] = (0, import_react5.useState)();
-  const onMouseDown = (ev) => {
-    const current = getCellAtPointer(ev);
-    setFrom(current);
-    if (current) {
-      setTimeout(() => cb("start", {
-        from: current
-      }));
-    }
-  };
-  const onMouseMove = (ev) => {
-    if (from) {
-      let current = getCellAtPointer(ev);
-      if ((0, import_chunk_5KKJ4NPP.posEquals)(current, from)) {
-        current = void 0;
-      }
-      setTo(current);
-      setTimeout(() => cb("move", {
-        from,
-        to: current
-      }));
-    }
-  };
-  const onMouseUp = (ev) => {
-    if (from) {
-      let current = getCellAtPointer(ev);
-      if ((0, import_chunk_5KKJ4NPP.posEquals)(current, from)) {
-        current = void 0;
-      }
-      setFrom(void 0);
-      setTo(void 0);
-      setTimeout(() => cb("end", current ? {
-        from,
-        to: current
-      } : void 0));
-    }
-  };
-  return {
-    range: from ? {
-      from,
-      to
-    } : void 0,
-    handlers: {
-      onMouseDown,
-      onMouseMove,
-      onMouseUp
-    }
-  };
-};
-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 = this.model.addressToIndex(cell);
-    let formatting = this.model.sheet.formatting?.[idx] ?? {};
-    const classNames = [
-      ...formatting?.classNames ?? []
-    ];
-    for (const [idx2, _formatting] of Object.entries(this.model.sheet.formatting)) {
-      const range = this.model.rangeFromIndex(idx2);
-      if ((0, import_chunk_5KKJ4NPP.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_chunk_DSYKOI4E.ValueTypeEnum.Boolean: {
-        return {
-          value: value.toLocaleString().toUpperCase(),
-          classNames: [
-            ...classNames,
-            value ? "!text-greenText" : "!text-orangeText"
-          ]
-        };
-      }
-      //
-      // Numbers.
-      //
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Number: {
-        return {
-          value: value.toLocaleString(locales),
-          classNames: [
-            ...classNames,
-            defaultNumber
-          ]
-        };
-      }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Percent: {
-        return {
-          value: value * 100 + "%",
-          classNames: [
-            ...classNames,
-            defaultNumber
-          ]
-        };
-      }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Currency: {
-        return {
-          value: value.toLocaleString(locales, {
-            style: "currency",
-            currency: "USD",
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2
-          }),
-          classNames: [
-            ...classNames,
-            defaultNumber
-          ]
-        };
-      }
-      //
-      // Dates.
-      //
-      case import_chunk_DSYKOI4E.ValueTypeEnum.DateTime: {
-        const date = this.model.toLocalDate(value);
-        return {
-          value: date.toLocaleString(locales),
-          classNames
-        };
-      }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Date: {
-        const date = this.model.toLocalDate(value);
-        return {
-          value: date.toLocaleDateString(locales),
-          classNames
-        };
-      }
-      case import_chunk_DSYKOI4E.ValueTypeEnum.Time: {
-        const date = this.model.toLocalDate(value);
-        return {
-          value: date.toLocaleTimeString(locales),
-          classNames
-        };
-      }
-      default: {
-        return {
-          value: String(value),
-          classNames
-        };
-      }
-    }
-  }
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx";
-var OBJECT_ID_LENGTH = 60;
-var SheetContext = /* @__PURE__ */ (0, import_react6.createContext)(null);
-var useSheetContext = () => {
-  const context = (0, import_react6.useContext)(SheetContext);
-  (0, import_invariant.invariant)(context, void 0, {
-    F: __dxlog_file,
-    L: 45,
-    S: void 0,
-    A: [
-      "context",
-      ""
-    ]
-  });
-  return context;
-};
-var mapFormulaBindingToId = (functions) => (formula) => {
-  return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
-    if (import_chunk_5KKJ4NPP.defaultFunctions.find((fn2) => fn2.name === binding) || binding === "EDGE") {
-      return match;
-    }
-    const fn = functions.find((fn2) => fn2.binding === binding);
-    if (fn) {
-      return `${(0, import_echo2.fullyQualifiedId)(fn)}(${args})`;
-    } else {
-      return match;
-    }
-  });
-};
-var mapFormulaBindingFromId = (functions) => (formula) => {
-  return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
-    const id = `${spaceId}:${objectId}`;
-    if (id.length !== OBJECT_ID_LENGTH) {
-      return match;
-    }
-    const fn = functions.find((fn2) => (0, import_echo2.fullyQualifiedId)(fn2) === id);
-    if (fn?.binding) {
-      return `${fn.binding}(${args})`;
-    } else {
-      return match;
-    }
-  });
-};
-var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...options }) => {
-  const graph = (0, import_chunk_CN3RPESU.useComputeGraph)(space, options);
-  const [cursor, setCursor] = (0, import_react6.useState)();
-  const [range, setRange] = (0, import_react6.useState)();
-  const [editing, setEditing] = (0, import_react6.useState)(false);
-  const [[model, formatting] = [], setModels] = (0, import_react6.useState)(void 0);
-  (0, import_react6.useEffect)(() => {
-    let model2;
-    let formatting2;
-    const t = setTimeout(async () => {
-      model2 = new import_chunk_5KKJ4NPP.SheetModel(graph, sheet, space, {
-        readonly,
-        mapFormulaBindingToId,
-        mapFormulaBindingFromId
-      });
-      await model2.initialize();
-      formatting2 = new FormattingModel(model2);
-      setModels([
-        model2,
-        formatting2
-      ]);
-    });
-    return () => {
-      clearTimeout(t);
-      void model2?.destroy();
-    };
-  }, [
-    graph,
-    readonly
-  ]);
-  if (!model || !formatting) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react6.default.createElement(SheetContext.Provider, {
-    value: {
-      model,
-      formatting,
-      cursor,
-      setCursor,
-      range,
-      setRange,
-      editing,
-      setEditing,
-      // TODO(burdon): Change to event.
-      onInfo
-    }
-  }, children);
-};
-var getRelativeClientRect = (root, element) => {
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-  return new DOMRect(elementRect.left - rootRect.left + root.scrollLeft, elementRect.top - rootRect.top + root.scrollTop, elementRect.width, elementRect.height);
-};
-var getRectUnion = (b1, b2) => {
-  return {
-    left: Math.min(b1.left, b2.left),
-    top: Math.min(b1.top, b2.top),
-    width: Math.abs(b1.left - b2.left) + (b1.left > b2.left ? b1.width : b2.width),
-    height: Math.abs(b1.top - b2.top) + (b1.height > b2.height ? b1.height : b2.height)
-  };
-};
-var scrollIntoView = (scrollContainer, el) => {
-  el.scrollIntoView({
-    block: "nearest",
-    inline: "nearest"
-  });
-  const cellBounds = el.getBoundingClientRect();
-  const scrollerBounds = scrollContainer.getBoundingClientRect();
-  if (cellBounds.top < scrollerBounds.top) {
-    scrollContainer.scrollTop -= scrollerBounds.top - cellBounds.top;
-  } else if (cellBounds.bottom >= scrollerBounds.bottom - 1) {
-    scrollContainer.scrollTop += 2 + scrollerBounds.bottom - cellBounds.bottom;
-  }
-  if (cellBounds.left < scrollerBounds.left) {
-    scrollContainer.scrollLeft -= scrollerBounds.left - cellBounds.left;
-  } else if (cellBounds.right >= scrollerBounds.right) {
-    scrollContainer.scrollLeft += 2 + scrollerBounds.right - cellBounds.right;
-  }
-};
-var editorKeys = ({ onNav, onClose }) => {
-  return import_view.keymap.of([
-    {
-      key: "ArrowUp",
-      run: (editor) => {
-        const value = editor.state.doc.toString();
-        onNav?.(value, {
-          key: "ArrowUp"
-        });
-        return !!onNav;
-      }
-    },
-    {
-      key: "ArrowDown",
-      run: (editor) => {
-        const value = editor.state.doc.toString();
-        onNav?.(value, {
-          key: "ArrowDown"
-        });
-        return !!onNav;
-      }
-    },
-    {
-      key: "ArrowLeft",
-      run: (editor) => {
-        const value = editor.state.doc.toString();
-        onNav?.(value, {
-          key: "ArrowLeft"
-        });
-        return !!onNav;
-      }
-    },
-    {
-      key: "ArrowRight",
-      run: (editor) => {
-        const value = editor.state.doc.toString();
-        onNav?.(value, {
-          key: "ArrowRight"
-        });
-        return !!onNav;
-      }
-    },
-    {
-      key: "Enter",
-      run: (editor) => {
-        onClose(editor.state.doc.toString());
-        return true;
-      }
-    },
-    {
-      key: "Escape",
-      run: () => {
-        onClose(void 0);
-        return true;
-      }
-    }
-  ]);
-};
-var CellEditor = ({ value, extension, autoFocus, onBlur }) => {
-  const { themeMode } = (0, import_react_ui.useThemeContext)();
-  const { parentRef } = (0, import_react_ui_editor.useTextEditor)(() => {
-    return {
-      autoFocus,
-      initialValue: value,
-      selection: {
-        anchor: value?.length ?? 0
-      },
-      extensions: [
-        extension ?? [],
-        import_react_ui_editor.preventNewline,
-        import_view.EditorView.focusChangeEffect.of((_, focusing) => {
-          if (!focusing) {
-            onBlur?.({
-              type: "blur"
-            });
-          }
-          return null;
-        }),
-        (0, import_react_ui_editor.createBasicExtensions)({
-          lineWrapping: false
-        }),
-        (0, import_react_ui_editor.createThemeExtensions)({
-          themeMode,
-          slots: {
-            editor: {
-              className: "flex w-full [&>.cm-scroller]:scrollbar-none"
-            },
-            content: {
-              className: "!px-2 !py-1"
-            }
-          }
-        })
-      ]
-    };
-  }, [
-    extension
-  ]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
-    ref: parentRef,
-    className: "flex w-full"
-  });
-};
-var highlightStyles = import_language.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 = import_state.Facet.define();
-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_language.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_theme3.mx)(
-        // TODO(burdon): Factor out fragments.
-        // TODO(burdon): Size to make width same as column.
-        "!-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 __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx";
-var fragments = {
-  axis: "bg-axisSurface text-axisText text-xs select-none",
-  axisSelected: "bg-attention text-baseText",
-  cell: "bg-gridCell",
-  cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface"
-};
-var SheetRoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ import_react3.default.createElement(SheetContextProvider, props, children);
-};
-var SheetMain = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, numRows, numColumns }, forwardRef2) => {
-  const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
-  const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
-  const [rows, setRows] = (0, import_react3.useState)([
-    ...model.sheet.rows
-  ]);
-  const [columns, setColumns] = (0, import_react3.useState)([
-    ...model.sheet.columns
-  ]);
-  (0, import_react3.useEffect)(() => {
-    const rowsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
-      "rows"
-    ]);
-    const columnsAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
-      "columns"
-    ]);
-    const handleUpdate = (0, import_async.debounce)(() => {
-      setRows([
-        ...model.sheet.rows
-      ]);
-      setColumns([
-        ...model.sheet.columns
-      ]);
-    }, 100);
-    rowsAccessor.handle.addListener("change", handleUpdate);
-    columnsAccessor.handle.addListener("change", handleUpdate);
-    handleUpdate();
-    return () => {
-      rowsAccessor.handle.removeListener("change", handleUpdate);
-      columnsAccessor.handle.removeListener("change", handleUpdate);
-    };
-  }, [
-    model
-  ]);
-  (0, import_react3.useEffect)(() => {
-    model.reset();
-  }, [
-    rows,
-    columns
-  ]);
-  const handleMoveRows = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
-    const [rows2] = model.sheet.rows.splice(from, num);
-    model.sheet.rows.splice(to, 0, rows2);
-    if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
-    }
-    setRows([
-      ...model.sheet.rows
-    ]);
-  };
-  const handleMoveColumns = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : void 0;
-    const columns2 = model.sheet.columns.splice(from, num);
-    model.sheet.columns.splice(to, 0, ...columns2);
-    if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
-    }
-    setColumns([
-      ...model.sheet.columns
-    ]);
-  };
-  const [rowSizes, setRowSizes] = (0, import_react3.useState)();
-  const [columnSizes, setColumnSizes] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
-    const rowAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
-      "rowMeta"
-    ]);
-    const columnAccessor = (0, import_echo.createDocAccessor)(model.sheet, [
-      "columnMeta"
-    ]);
-    const handleUpdate = (0, import_async.debounce)(() => {
-      const mapSizes = (values) => values.reduce((map, [idx, meta]) => {
-        if (meta.size) {
-          map[idx] = meta.size;
-        }
-        return map;
-      }, {});
-      setRowSizes(mapSizes(Object.entries(model.sheet.rowMeta)));
-      setColumnSizes(mapSizes(Object.entries(model.sheet.columnMeta)));
-    }, 100);
-    rowAccessor.handle.addListener("change", handleUpdate);
-    columnAccessor.handle.addListener("change", handleUpdate);
-    handleUpdate();
-    return () => {
-      rowAccessor.handle.removeListener("change", handleUpdate);
-      columnAccessor.handle.removeListener("change", handleUpdate);
-    };
-  }, [
-    model
-  ]);
-  const handleResizeRow = (idx, size, save) => {
-    if (save) {
-      model.sheet.rowMeta[idx] ??= {};
-      model.sheet.rowMeta[idx].size = size;
-    } else {
-      setRowSizes((sizes) => ({
-        ...sizes,
-        [idx]: size
-      }));
-    }
-  };
-  const handleResizeColumn = (idx, size, save) => {
-    if (save) {
-      model.sheet.columnMeta[idx] ??= {};
-      model.sheet.columnMeta[idx].size = size;
-    } else {
-      setColumnSizes((sizes) => ({
-        ...sizes,
-        [idx]: size
-      }));
-    }
-  };
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme2.mx)("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
-  }, /* @__PURE__ */ import_react3.default.createElement(GridCorner, {
-    onClick: () => {
-      setCursor(void 0);
-      setRange(void 0);
-      setEditing(false);
-    }
-  }), /* @__PURE__ */ import_react3.default.createElement(SheetColumns, {
-    ref: columnsRef,
-    columns,
-    sizes: columnSizes,
-    selected: cursor?.column,
-    onSelect: (column) => setCursor(cursor?.column === column ? void 0 : {
-      row: -1,
-      column
-    }),
-    onResize: handleResizeColumn,
-    onMove: handleMoveColumns
-  }), /* @__PURE__ */ import_react3.default.createElement(SheetRows, {
-    ref: rowsRef,
-    rows,
-    sizes: rowSizes,
-    selected: cursor?.row,
-    onSelect: (row) => setCursor(cursor?.row === row ? void 0 : {
-      row,
-      column: -1
-    }),
-    onResize: handleResizeRow,
-    onMove: handleMoveRows
-  }), /* @__PURE__ */ import_react3.default.createElement(SheetGrid, {
-    ref: contentRef,
-    size: {
-      numRows: numRows ?? rows.length,
-      numColumns: numColumns ?? columns.length
-    },
-    rows,
-    columns,
-    rowSizes,
-    columnSizes
-  }), /* @__PURE__ */ import_react3.default.createElement(GridCorner, null), /* @__PURE__ */ import_react3.default.createElement(SheetStatusBar, null));
-});
-var useScrollHandlers = () => {
-  const rowsRef = (0, import_react3.useRef)(null);
-  const columnsRef = (0, import_react3.useRef)(null);
-  const contentRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
-    const handleRowsScroll = (ev) => {
-      const { scrollTop } = ev.target;
-      if (!rowsRef.current.dataset.locked) {
-        contentRef.current.scrollTop = scrollTop;
-      }
-    };
-    const handleColumnsScroll = (ev) => {
-      const { scrollLeft } = ev.target;
-      if (!columnsRef.current.dataset.locked) {
-        contentRef.current.scrollLeft = scrollLeft;
-      }
-    };
-    const handleContentScroll = (ev) => {
-      const { scrollTop, scrollLeft } = ev.target;
-      rowsRef.current.scrollTop = scrollTop;
-      columnsRef.current.scrollLeft = scrollLeft;
-    };
-    const rows = rowsRef.current;
-    const columns = columnsRef.current;
-    const content = contentRef.current;
-    rows.addEventListener("scroll", handleRowsScroll);
-    columns.addEventListener("scroll", handleColumnsScroll);
-    content.addEventListener("scroll", handleContentScroll);
-    return () => {
-      rows.removeEventListener("scroll", handleRowsScroll);
-      columns.removeEventListener("scroll", handleColumnsScroll);
-      content.removeEventListener("scroll", handleContentScroll);
-    };
-  }, []);
-  return {
-    rowsRef,
-    columnsRef,
-    contentRef
-  };
-};
-var GridCorner = (props) => {
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: fragments.axis,
-    ...props
-  });
-};
-var MovingOverlay = ({ label }) => {
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer"
-  }, label);
-};
-var mouseConstraints = {
-  distance: 10
-};
-var touchConstraints = {
-  delay: 250,
-  tolerance: 5
-};
-var SheetRows = /* @__PURE__ */ (0, import_react3.forwardRef)(({ rows, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
-  const mouseSensor = (0, import_core.useSensor)(import_core.MouseSensor, {
-    activationConstraint: mouseConstraints
-  });
-  const touchSensor = (0, import_core.useSensor)(import_core.TouchSensor, {
-    activationConstraint: touchConstraints
-  });
-  const keyboardSensor = (0, import_core.useSensor)(import_core.KeyboardSensor, {});
-  const sensors = (0, import_core.useSensors)(mouseSensor, touchSensor, keyboardSensor);
-  const [active, setActive] = (0, import_react3.useState)(null);
-  const handleDragStart = ({ active: active2 }) => {
-    setActive(active2);
-  };
-  const handleDragEnd = ({ over, active: active2 }) => {
-    if (over && over.id !== active2.id) {
-      setActive(null);
-      onMove?.(active2.data.current.index, over.data.current.index);
-    }
-  };
-  const snapToCenter = ({ activatorEvent, draggingNodeRect, transform }) => {
-    if (draggingNodeRect && activatorEvent) {
-      const activatorCoordinates = (0, import_utilities.getEventCoordinates)(activatorEvent);
-      if (!activatorCoordinates) {
-        return transform;
-      }
-      const offset = activatorCoordinates.y - draggingNodeRect.top;
-      return {
-        ...transform,
-        y: transform.y + offset - draggingNodeRect.height / 2
-      };
-    }
-    return transform;
-  };
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
-    style: {
-      width: axisWidth
-    }
-  }), /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref: forwardRef2,
-    role: "rowheader",
-    className: "grow overflow-y-auto scrollbar-none"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_core.DndContext, {
-    sensors,
-    modifiers: [
-      import_modifiers.restrictToVerticalAxis,
-      snapToCenter
-    ],
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "flex flex-col",
-    style: {
-      width: axisWidth
-    }
-  }, rows.map((idx, index) => /* @__PURE__ */ import_react3.default.createElement(GridRowCell, {
-    key: idx,
-    idx,
-    index,
-    label: String(index + 1),
-    size: sizes?.[idx] ?? defaultHeight,
-    resize: index < rows.length - 1,
-    selected: selected === index,
-    onResize,
-    onSelect
-  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react3.default.createElement(MovingOverlay, {
-    label: String(active.data.current.index + 1)
-  })), document.body))));
-});
-var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResize }) => {
-  const { setNodeRef: setDroppableNodeRef } = (0, import_core.useDroppable)({
-    id: idx,
-    data: {
-      index
-    }
-  });
-  const { setNodeRef: setDraggableNodeRef, attributes, listeners, isDragging, over } = (0, import_core.useDraggable)({
-    id: idx,
-    data: {
-      index
-    }
-  });
-  const setNodeRef = (0, import_utilities.useCombinedRefs)(setDroppableNodeRef, setDraggableNodeRef);
-  const [initialSize, setInitialSize] = (0, import_react3.useState)(size);
-  const [resizing, setResizing] = (0, import_react3.useState)(false);
-  const scrollHandler = (0, import_react3.useRef)();
-  const handleResizeStart = (_ev, _dir, elementRef) => {
-    const scrollContainer = elementRef.closest('[role="rowheader"]');
-    const scrollTop = scrollContainer.scrollTop;
-    scrollHandler.current = (ev) => ev.target.scrollTop = scrollTop;
-    scrollContainer.addEventListener("scroll", scrollHandler.current);
-    scrollContainer.dataset.locked = "true";
-    setResizing(true);
-  };
-  const handleResize = (_ev, _dir, _elementRef, { height }) => {
-    onResize?.(idx, initialSize + height);
-  };
-  const handleResizeStop = (_ev, _dir, elementRef, { height }) => {
-    const scrollContainer = elementRef.closest('[role="rowheader"]');
-    scrollContainer.removeEventListener("scroll", scrollHandler.current);
-    delete scrollContainer.dataset.locked;
-    scrollHandler.current = void 0;
-    setInitialSize(initialSize + height);
-    onResize?.(idx, initialSize + height, true);
-    setResizing(false);
-  };
-  return /* @__PURE__ */ import_react3.default.createElement(import_re_resizable.Resizable, {
-    enable: {
-      bottom: resize
-    },
-    size: {
-      height: size - 1
-    },
-    minHeight: minHeight - 1,
-    maxHeight,
-    onResizeStart: handleResizeStart,
-    onResize: handleResize,
-    onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref: setNodeRef,
-    ...attributes,
-    ...listeners,
-    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-t border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
-    onClick: () => onSelect?.(index)
-  }, /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface"
-  })));
-};
-var SheetColumns = /* @__PURE__ */ (0, import_react3.forwardRef)(({ columns, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
-  const mouseSensor = (0, import_core.useSensor)(import_core.MouseSensor, {
-    activationConstraint: mouseConstraints
-  });
-  const touchSensor = (0, import_core.useSensor)(import_core.TouchSensor, {
-    activationConstraint: touchConstraints
-  });
-  const keyboardSensor = (0, import_core.useSensor)(import_core.KeyboardSensor, {});
-  const sensors = (0, import_core.useSensors)(mouseSensor, touchSensor, keyboardSensor);
-  const [active, setActive] = (0, import_react3.useState)(null);
-  const handleDragStart = ({ active: active2 }) => {
-    setActive(active2);
-  };
-  const handleDragEnd = ({ active: active2, over }) => {
-    if (over && over.id !== active2.id) {
-      setActive(null);
-      onMove?.(active2.data.current.index, over.data.current.index);
-    }
-  };
-  const snapToCenter = ({ activatorEvent, draggingNodeRect, transform }) => {
-    if (draggingNodeRect && activatorEvent) {
-      const activatorCoordinates = (0, import_utilities.getEventCoordinates)(activatorEvent);
-      if (!activatorCoordinates) {
-        return transform;
-      }
-      const offset = activatorCoordinates.x - draggingNodeRect.left;
-      return {
-        ...transform,
-        x: transform.x + offset - draggingNodeRect.width / 2
-      };
-    }
-    return transform;
-  };
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
-    style: {
-      height: axisHeight
-    }
-  }), /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref: forwardRef2,
-    role: "columnheader",
-    className: "grow overflow-x-auto scrollbar-none"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_core.DndContext, {
-    autoScroll: {
-      enabled: true
-    },
-    sensors,
-    modifiers: [
-      import_modifiers.restrictToHorizontalAxis,
-      snapToCenter
-    ],
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "flex h-full",
-    style: {
-      height: axisHeight
-    }
-  }, columns.map((idx, index) => /* @__PURE__ */ import_react3.default.createElement(GridColumnCell, {
-    key: idx,
-    idx,
-    index,
-    label: (0, import_chunk_5KKJ4NPP.columnLetter)(index),
-    size: sizes?.[idx] ?? defaultWidth,
-    resize: index < columns.length - 1,
-    selected: selected === index,
-    onResize,
-    onSelect
-  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement(import_core.DragOverlay, null, active && /* @__PURE__ */ import_react3.default.createElement(MovingOverlay, {
-    label: (0, import_chunk_5KKJ4NPP.columnLetter)(active.data.current.index)
-  })), document.body))));
-});
-var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onResize }) => {
-  const { setNodeRef: setDroppableNodeRef } = (0, import_core.useDroppable)({
-    id: idx,
-    data: {
-      index
-    }
-  });
-  const { setNodeRef: setDraggableNodeRef, attributes, listeners, over, isDragging } = (0, import_core.useDraggable)({
-    id: idx,
-    data: {
-      index
-    }
-  });
-  const setNodeRef = (0, import_utilities.useCombinedRefs)(setDroppableNodeRef, setDraggableNodeRef);
-  const [initialSize, setInitialSize] = (0, import_react3.useState)(size);
-  const [resizing, setResizing] = (0, import_react3.useState)(false);
-  const scrollHandler = (0, import_react3.useRef)();
-  const handleResizeStart = (_ev, _dir, elementRef) => {
-    const scrollContainer = elementRef.closest('[role="columnheader"]');
-    const scrollLeft = scrollContainer.scrollLeft;
-    scrollHandler.current = (ev) => ev.target.scrollLeft = scrollLeft;
-    scrollContainer.addEventListener("scroll", scrollHandler.current);
-    scrollContainer.dataset.locked = "true";
-    setResizing(true);
-  };
-  const handleResize = (_ev, _dir, _elementRef, { width }) => {
-    onResize?.(idx, initialSize + width);
-  };
-  const handleResizeStop = (_ev, _dir, elementRef, { width }) => {
-    const scrollContainer = elementRef.closest('[role="columnheader"]');
-    scrollContainer.removeEventListener("scroll", scrollHandler.current);
-    delete scrollContainer.dataset.locked;
-    scrollHandler.current = void 0;
-    setInitialSize(initialSize + width);
-    onResize?.(idx, initialSize + width, true);
-    setResizing(false);
-  };
-  return /* @__PURE__ */ import_react3.default.createElement(import_re_resizable.Resizable, {
-    enable: {
-      right: resize
-    },
-    size: {
-      width: size - 1
-    },
-    minWidth: minWidth - 1,
-    maxWidth,
-    onResizeStart: handleResizeStart,
-    onResize: handleResize,
-    onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref: setNodeRef,
-    ...attributes,
-    ...listeners,
-    className: (0, import_react_ui_theme2.mx)("flex h-full items-center justify-center cursor-pointer", "border-l border-gridLine focus-visible:outline-none", fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
-    onClick: () => onSelect?.(index)
-  }, /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface"
-  })));
-};
-var SheetGrid = /* @__PURE__ */ (0, import_react3.forwardRef)(({ size, rows, columns, rowSizes, columnSizes }, forwardRef2) => {
-  const { ref: containerRef, width: containerWidth = 0, height: containerHeight = 0 } = (0, import_react_resize_detector.useResizeDetector)({
-    refreshRate: 200
-  });
-  const scrollerRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useImperativeHandle)(forwardRef2, () => scrollerRef.current);
-  const { model, cursor, range, editing, setCursor, setRange, setEditing, onInfo } = useSheetContext();
-  const initialText = (0, import_react3.useRef)();
-  const quickEdit = (0, import_react3.useRef)(false);
-  const [, forceUpdate] = (0, import_react3.useState)({});
-  (0, import_react3.useEffect)(() => {
-    const unsubscribe = model.update.on(() => {
-      (0, import_log.log)("updated", {
-        id: model.id
-      }, {
-        F: __dxlog_file2,
-        L: 730,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      forceUpdate({});
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [
-    model
-  ]);
-  const inputRef = (0, import_react3.useRef)(null);
-  const handleKeyDown = (ev) => {
-    const isMacOS = /Mac|iPhone|iPod|iPad/.test(navigator.userAgent);
-    if (cursor && (isMacOS && ev.metaKey || ev.ctrlKey)) {
-      switch (ev.key) {
-        case "x": {
-          model.cut(range ?? {
-            from: cursor
-          });
-          return;
-        }
-        case "c": {
-          model.copy(range ?? {
-            from: cursor
-          });
-          return;
-        }
-        case "v": {
-          model.paste(cursor);
-          return;
-        }
-        case "z": {
-          if (ev.shiftKey) {
-            model.redo();
-          } else {
-            model.undo();
-          }
-          return;
-        }
-      }
-    }
-    switch (ev.key) {
-      case "ArrowUp":
-      case "ArrowDown":
-      case "ArrowLeft":
-      case "ArrowRight":
-      case "Home":
-      case "End": {
-        const next = handleNav(ev, cursor, range, size);
-        setRange(next.range);
-        if (next.cursor) {
-          setCursor(next.cursor);
-          const element = getCellElement(scrollerRef.current, next.cursor);
-          if (element) {
-            scrollIntoView(scrollerRef.current, element);
-          }
-        }
-        break;
-      }
-      case "Backspace": {
-        if (cursor) {
-          if (range) {
-            model.clear(range);
-          } else {
-            model.setValue(cursor, null);
-          }
-        }
-        break;
-      }
-      case "Escape": {
-        setRange(void 0);
-        break;
-      }
-      case "Enter": {
-        ev.stopPropagation();
-        if (cursor) {
-          setEditing(true);
-        }
-        break;
-      }
-      case "?": {
-        onInfo?.();
-        break;
-      }
-      default: {
-        if (ev.key.length === 1) {
-          initialText.current = ev.key;
-          quickEdit.current = true;
-          setEditing(true);
-        }
-      }
-    }
-  };
-  const { handlers } = useRangeSelect((event, range2) => {
-    switch (event) {
-      case "start": {
-        setRange(void 0);
-        break;
-      }
-      default: {
-        setRange(range2);
-      }
-    }
-  });
-  const { width, height, rowRange, columnRange } = useGridLayout({
-    scroller: scrollerRef.current,
-    size: {
-      width: containerWidth,
-      height: containerHeight
-    },
-    rows,
-    columns,
-    rowSizes,
-    columnSizes
-  });
-  const id = (0, import_echo.fullyQualifiedId)(model.sheet);
-  const attendableAttrs = (0, import_react_ui_attention.createAttendableAttributes)(id);
-  const hasAttention = (0, import_react_ui_attention.useHasAttention)(id);
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref: containerRef,
-    role: "grid",
-    className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute inset-0 border border-gridLine pointer-events-none")
-  }), /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref: scrollerRef,
-    className: (0, import_react_ui_theme2.mx)("grow", hasAttention && "overflow-auto scrollbar-thin")
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "relative select-none",
-    style: {
-      width,
-      height
-    },
-    onClick: () => inputRef.current?.focus(),
-    ...handlers
-  }, scrollerRef.current && /* @__PURE__ */ import_react3.default.createElement(SelectionOverlay, {
-    root: scrollerRef.current
-  }), rowRange.map(({ row, top, height: height2 }) => {
-    return columnRange.map(({ column, left, width: width2 }) => {
-      const style = {
-        position: "absolute",
-        top,
-        left,
-        width: width2,
-        height: height2
-      };
-      const cell = {
-        row,
-        column
-      };
-      const id2 = (0, import_chunk_5KKJ4NPP.addressToA1Notation)(cell);
-      const idx = model.addressToIndex(cell);
-      const active = (0, import_chunk_5KKJ4NPP.posEquals)(cursor, cell);
-      if (active && editing) {
-        const value = initialText.current ?? model.getCellText(cell) ?? "";
-        const handleClose = (value2) => {
-          initialText.current = void 0;
-          quickEdit.current = false;
-          if (value2 !== void 0) {
-            model.setValue(cell, value2);
-            const next = handleArrowNav({
-              key: "ArrowDown",
-              metaKey: false
-            }, cursor, size);
-            if (next) {
-              setCursor(next);
-            }
-          }
-          inputRef.current?.focus();
-          setEditing(false);
-        };
-        const handleNav2 = (value2, { key }) => {
-          initialText.current = void 0;
-          model.setValue(cell, value2 ?? null);
-          const next = handleArrowNav({
-            key,
-            metaKey: false
-          }, cursor, size);
-          if (next) {
-            setCursor(next);
-          }
-          inputRef.current?.focus();
-          setEditing(false);
-        };
-        return /* @__PURE__ */ import_react3.default.createElement(GridCellEditor, {
-          key: idx,
-          value,
-          style,
-          onNav: quickEdit.current ? handleNav2 : void 0,
-          onClose: handleClose
-        });
-      }
-      return /* @__PURE__ */ import_react3.default.createElement(SheetCell, {
-        key: id2,
-        id: id2,
-        cell,
-        active,
-        style,
-        onSelect: (cell2, edit) => {
-          setEditing(edit);
-          setCursor(cell2);
-        }
-      });
-    });
-  }))), /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react3.default.createElement("input", {
-    ref: inputRef,
-    autoFocus: true,
-    className: "absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent",
-    onKeyDown: handleKeyDown,
-    ...attendableAttrs
-  }), document.body));
-});
-var SelectionOverlay = ({ root }) => {
-  const { range } = useSheetContext();
-  if (!range) {
-    return null;
-  }
-  const c1 = getCellElement(root, range.from);
-  const c2 = range.to ? getCellElement(root, range.to) : c1;
-  if (!c1 || !c2) {
-    return null;
-  }
-  const b1 = getRelativeClientRect(root, c1);
-  const b2 = getRelativeClientRect(root, c2);
-  const bounds = getRectUnion(b1, b2);
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "none",
-    style: bounds,
-    className: "z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay"
-  });
-};
-var SheetCell = ({ id, cell, style, active, onSelect }) => {
-  const { formatting, editing, setRange } = useSheetContext();
-  const { value, classNames } = formatting.getFormatting(cell);
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    [`data-${CELL_DATA_KEY}`]: id,
-    role: "cell",
-    style,
-    className: (0, import_react_ui_theme2.mx)("flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer", fragments.cell, active && [
-      "z-20",
-      fragments.cellSelected
-    ], classNames),
-    onClick: () => {
-      if (editing) {
-        setRange?.({
-          from: cell
-        });
-      } else {
-        onSelect?.(cell, false);
-      }
-    },
-    onDoubleClick: () => onSelect?.(cell, true)
-  }, value);
-};
-var GridCellEditor = ({ style, value, onNav, onClose }) => {
-  const { model, range } = useSheetContext();
-  const notifier = (0, import_react3.useRef)();
-  (0, import_react3.useEffect)(() => {
-    if (range) {
-      notifier.current?.((0, import_chunk_5KKJ4NPP.rangeToA1Notation)(range));
-    }
-  }, [
-    range
-  ]);
-  const extension = (0, import_react3.useMemo)(() => [
-    editorKeys({
-      onNav,
-      onClose
-    }),
-    sheetExtension({
-      functions: model.functions
-    }),
-    rangeExtension((fn) => notifier.current = fn)
-  ], [
-    model
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "cell",
-    style,
-    className: (0, import_react_ui_theme2.mx)("z-20 flex", fragments.cellSelected),
-    onClick: (ev) => ev.stopPropagation()
-  }, /* @__PURE__ */ import_react3.default.createElement(CellEditor, {
-    autoFocus: true,
-    value,
-    extension
-  }));
-};
-var SheetStatusBar = () => {
-  const { model, cursor, range } = useSheetContext();
-  let value;
-  let isFormula = false;
-  if (cursor) {
-    value = model.getCellValue(cursor);
-    if (typeof value === "string" && value.charAt(0) === "=") {
-      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
-      isFormula = true;
-    } else if (value != null) {
-      value = String(value);
-    }
-  }
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "flex gap-4 items-center"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "flex w-16 items-center font-mono"
-  }, range && (0, import_chunk_5KKJ4NPP.rangeToA1Notation)(range) || cursor && (0, import_chunk_5KKJ4NPP.addressToA1Notation)(cursor)), /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.Function, {
-    className: (0, import_react_ui_theme2.mx)("text-greenText", isFormula ? "visible" : "invisible")
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "font-mono"
-  }, value))));
-};
-var SheetDebug = () => {
-  const { model, cursor, range } = useSheetContext();
-  const [, forceUpdate] = (0, import_react3.useState)({});
-  (0, import_react3.useEffect)(() => {
-    const accessor = (0, import_echo.createDocAccessor)(model.sheet, []);
-    const handleUpdate = () => forceUpdate({});
-    accessor.handle.addListener("change", handleUpdate);
-    handleUpdate();
-    return () => {
-      accessor.handle.removeListener("change", handleUpdate);
-    };
-  }, [
-    model
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: (0, import_react_ui_theme2.mx)("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80")
-  }, /* @__PURE__ */ import_react3.default.createElement("pre", {
-    className: "whitespace-pre-wrap"
-  }, JSON.stringify({
-    cursor,
-    range,
-    cells: model.sheet.cells,
-    rowMeta: model.sheet.rowMeta,
-    columnMeta: model.sheet.columnMeta,
-    formatting: model.sheet.formatting
-  }, void 0, 2)));
-};
-var Sheet = {
-  Root: SheetRoot,
-  Main: SheetMain,
-  Rows: SheetRows,
-  Columns: SheetColumns,
-  Grid: SheetGrid,
-  Cell: SheetCell,
-  StatusBar: SheetStatusBar,
-  Debug: SheetDebug
-};
-var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("flex", role === "article" && "row-span-2", role === "section" && "aspect-square border-y border-is border-separator")
-  }, /* @__PURE__ */ import_react.default.createElement(Sheet.Root, {
-    sheet,
-    space,
-    remoteFunctionUrl
-  }, /* @__PURE__ */ import_react.default.createElement(Sheet.Main, null)));
-};
-var SheetContainer_default = SheetContainer;
-//# sourceMappingURL=SheetContainer-AXQV3ZT5.cjs.map