@dxos/plugin-sheet 0.6.11 → 0.6.12-main.5cc132e

package/dist/lib/node-esm/SheetContainer-Y7ZMFBAP.mjs

@@ -0,0 +1,2231 @@
+import {
+  useComputeGraph
+} from "./chunk-PGKZPKUD.mjs";
+import {
+  SheetModel,
+  addressFromA1Notation,
+  addressFromIndex,
+  addressToA1Notation,
+  addressToIndex,
+  closest,
+  columnLetter,
+  defaultFunctions,
+  inRange,
+  posEquals,
+  rangeFromIndex,
+  rangeToA1Notation
+} from "./chunk-GNNVBNCX.mjs";
+import {
+  ValueTypeEnum
+} from "./chunk-WUPTZUTX.mjs";
+import {
+  SHEET_PLUGIN
+} from "./chunk-JRL5LGCE.mjs";
+
+// packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
+import React7, { useCallback as useCallback2 } from "react";
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { fullyQualifiedId as fullyQualifiedId4 } from "@dxos/react-client/echo";
+import { useIsDirectlyAttended } from "@dxos/react-ui-attention";
+import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { getEventCoordinates, useCombinedRefs } from "@dnd-kit/utilities";
+import { Function as FunctionIcon } from "@phosphor-icons/react";
+import { Resizable } from "re-resizable";
+import React4, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo3, useRef, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+import { useResizeDetector } from "react-resize-detector";
+import { debounce as debounce2 } from "@dxos/async";
+import { fullyQualifiedId as fullyQualifiedId3, createDocAccessor } from "@dxos/client/echo";
+import { log } from "@dxos/log";
+import { createAttendableAttributes, useHasAttention } from "@dxos/react-ui-attention";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
+import { useEffect, useState } from "react";
+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] = useState([]);
+  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] = useState([]);
+  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] = useState({
+    rowRange: [],
+    columnRange: []
+  });
+  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 addressFromA1Notation(value);
+    }
+  }
+};
+var getCellElement = (root, cell) => {
+  const pos = addressToA1Notation(cell);
+  return root.querySelector(`[data-${CELL_DATA_KEY}="${pos}"]`);
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/nav.ts
+import { useState as useState2 } from "react";
+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] = useState2();
+  const [to, setTo] = useState2();
+  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 (posEquals(current, from)) {
+        current = void 0;
+      }
+      setTo(current);
+      setTimeout(() => cb("move", {
+        from,
+        to: current
+      }));
+    }
+  };
+  const onMouseUp = (ev) => {
+    if (from) {
+      let current = getCellAtPointer(ev);
+      if (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
+    }
+  };
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx
+import React, { createContext, useContext, useState as useState3, useEffect as useEffect2, useMemo } from "react";
+import { invariant } from "@dxos/invariant";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+
+// packages/plugins/plugin-sheet/src/components/Sheet/decorations.ts
+import { create } from "@dxos/echo-schema";
+var createDecorations = () => {
+  const { decorations } = create({
+    decorations: {}
+  });
+  const addDecoration = (cellIndex, decorator) => {
+    decorations[cellIndex] = [
+      ...decorations[cellIndex] || [],
+      decorator
+    ];
+  };
+  const removeDecoration = (cellIndex, type) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+  const getDecorationsForCell = (cellIndex) => {
+    return decorations[cellIndex];
+  };
+  const getAllDecorations = () => {
+    const result = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations
+  };
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/formatting.ts
+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?.[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 ValueTypeEnum.Boolean: {
+        return {
+          value: value.toLocaleString().toUpperCase(),
+          classNames: [
+            ...classNames,
+            value ? "!text-greenText" : "!text-orangeText"
+          ]
+        };
+      }
+      //
+      // Numbers.
+      //
+      case ValueTypeEnum.Number: {
+        return {
+          value: value.toLocaleString(locales),
+          classNames: [
+            ...classNames,
+            defaultNumber
+          ]
+        };
+      }
+      case ValueTypeEnum.Percent: {
+        return {
+          value: value * 100 + "%",
+          classNames: [
+            ...classNames,
+            defaultNumber
+          ]
+        };
+      }
+      case ValueTypeEnum.Currency: {
+        return {
+          value: value.toLocaleString(locales, {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+          }),
+          classNames: [
+            ...classNames,
+            defaultNumber
+          ]
+        };
+      }
+      //
+      // Dates.
+      //
+      case ValueTypeEnum.DateTime: {
+        const date = this.model.toLocalDate(value);
+        return {
+          value: date.toLocaleString(locales),
+          classNames
+        };
+      }
+      case ValueTypeEnum.Date: {
+        const date = this.model.toLocalDate(value);
+        return {
+          value: date.toLocaleDateString(locales),
+          classNames
+        };
+      }
+      case ValueTypeEnum.Time: {
+        const date = this.model.toLocalDate(value);
+        return {
+          value: date.toLocaleTimeString(locales),
+          classNames
+        };
+      }
+      default: {
+        return {
+          value: String(value),
+          classNames
+        };
+      }
+    }
+  }
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/sheet-context.tsx
+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__ */ createContext(null);
+var useSheetContext = () => {
+  const context = useContext(SheetContext);
+  invariant(context, void 0, {
+    F: __dxlog_file,
+    L: 49,
+    S: void 0,
+    A: [
+      "context",
+      ""
+    ]
+  });
+  return context;
+};
+var mapFormulaBindingToId = (functions) => (formula) => {
+  return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
+    if (defaultFunctions.find((fn2) => fn2.name === binding) || binding === "EDGE") {
+      return match;
+    }
+    const fn = functions.find((fn2) => fn2.binding === binding);
+    if (fn) {
+      return `${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) => fullyQualifiedId(fn2) === id);
+    if (fn?.binding) {
+      return `${fn.binding}(${args})`;
+    } else {
+      return match;
+    }
+  });
+};
+var SheetContextProvider = ({ children, sheet, space, readonly, onInfo, ...options }) => {
+  const graph = useComputeGraph(space, options);
+  const [cursor, setCursor] = useState3();
+  const [range, setRange] = useState3();
+  const [editing, setEditing] = useState3(false);
+  const decorations = useMemo(() => createDecorations(), []);
+  const [[model, formatting] = [], setModels] = useState3(void 0);
+  useEffect2(() => {
+    let model2;
+    let formatting2;
+    const t = setTimeout(async () => {
+      model2 = new 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__ */ React.createElement(SheetContext.Provider, {
+    value: {
+      model,
+      formatting,
+      cursor,
+      setCursor,
+      range,
+      setRange,
+      editing,
+      setEditing,
+      // TODO(burdon): Change to event.
+      onInfo,
+      decorations
+    }
+  }, children);
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/threads.tsx
+import { effect } from "@preact/signals-core";
+import React2, { useCallback, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import { LayoutAction, useIntentDispatcher, useIntentResolver } from "@dxos/app-framework";
+import { debounce } from "@dxos/async";
+import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
+import { Icon, useTranslation } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+var CommentIndicator = () => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent"
+  });
+};
+var ThreadedCellWrapper = ({ children }) => {
+  const dispatch = useIntentDispatcher();
+  const [isHovered, setIsHovered] = React2.useState(true);
+  const { t } = useTranslation(SHEET_PLUGIN);
+  const handleClick = React2.useCallback((_event) => {
+    void dispatch({
+      action: LayoutAction.SET_LAYOUT,
+      data: {
+        element: "complementary",
+        state: true
+      }
+    });
+  }, [
+    dispatch
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("relative h-full is-full"),
+    onMouseEnter: () => {
+      setIsHovered(true);
+    },
+    onMouseLeave: () => {
+      setIsHovered(false);
+    }
+  }, /* @__PURE__ */ React2.createElement(CommentIndicator, null), isHovered && /* @__PURE__ */ React2.createElement("div", {
+    className: "absolute inset-0 flex items-center justify-end pr-1"
+  }, /* @__PURE__ */ React2.createElement("button", {
+    className: "ch-button text-xs min-bs-0 p-1",
+    onClick: handleClick,
+    "aria-label": t("open comment for sheet cell")
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--chat--regular",
+    "aria-hidden": true
+  }))), children);
+};
+var createThreadDecoration = (cellIndex, threadId, sheetId) => {
+  return {
+    type: "comment",
+    cellIndex,
+    decorate: (props) => /* @__PURE__ */ React2.createElement(ThreadedCellWrapper, props)
+  };
+};
+var useUpdateCursorOnThreadSelection = () => {
+  const { setCursor, model } = useSheetContext();
+  const handleScrollIntoView = useCallback(({ action, data }) => {
+    switch (action) {
+      case LayoutAction.SCROLL_INTO_VIEW: {
+        if (!data?.id || data?.cursor === void 0 || data?.id !== fullyQualifiedId2(model.sheet)) {
+          return;
+        }
+        const cellAddress = addressFromIndex(model.sheet, data.cursor);
+        setCursor(cellAddress);
+      }
+    }
+  }, [
+    model.sheet,
+    setCursor
+  ]);
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+var useSelectThreadOnCursorChange = () => {
+  const { cursor, model } = useSheetContext();
+  const dispatch = useIntentDispatcher();
+  const activeThreads = useMemo2(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+    JSON.stringify(model.sheet.threads)
+  ]);
+  const activeThreadAddresses = useMemo2(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
+    activeThreads,
+    model.sheet
+  ]);
+  const selectClosestThread = useCallback((cellAddress) => {
+    if (!cellAddress || !activeThreads) {
+      return;
+    }
+    const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
+    if (closestThreadAnchor) {
+      const closestThread = activeThreads.find((thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor));
+      if (closestThread) {
+        void dispatch([
+          {
+            action: "dxos.org/plugin/thread/action/select",
+            data: {
+              current: fullyQualifiedId2(closestThread)
+            }
+          }
+        ]);
+      }
+    }
+  }, [
+    dispatch,
+    activeThreads,
+    activeThreadAddresses,
+    model.sheet
+  ]);
+  const debounced = useMemo2(() => {
+    return debounce((cursor2) => requestAnimationFrame(() => selectClosestThread(cursor2)), 50);
+  }, [
+    selectClosestThread
+  ]);
+  useEffect3(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [
+    cursor,
+    selectClosestThread
+  ]);
+};
+var useThreadDecorations = () => {
+  const { decorations, model } = useSheetContext();
+  const sheet = useMemo2(() => model.sheet, [
+    model.sheet
+  ]);
+  const sheetId = useMemo2(() => fullyQualifiedId2(sheet), [
+    sheet
+  ]);
+  useEffect3(() => {
+    const unsubscribe = effect(() => {
+      const activeThreadAnchors = /* @__PURE__ */ new Set();
+      if (!sheet.threads) {
+        return;
+      }
+      for (const thread of sheet.threads) {
+        if (!thread || thread.anchor === void 0 || thread.status === "resolved") {
+          continue;
+        }
+        activeThreadAnchors.add(thread.anchor);
+        const index = thread.anchor;
+        const existingDecorations = decorations.getDecorationsForCell(index);
+        if (!existingDecorations || !existingDecorations.some((d) => d.type === "comment")) {
+          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
+        }
+      }
+      for (const decoration of decorations.getAllDecorations()) {
+        if (decoration.type !== "comment") {
+          continue;
+        }
+        if (!activeThreadAnchors.has(decoration.cellIndex)) {
+          decorations.removeDecoration(decoration.cellIndex, "comment");
+        }
+      }
+    });
+    return () => unsubscribe();
+  });
+};
+var useThreads = () => {
+  useUpdateCursorOnThreadSelection();
+  useSelectThreadOnCursorChange();
+  useThreadDecorations();
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/util.ts
+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;
+  }
+};
+
+// packages/plugins/plugin-sheet/src/components/CellEditor/CellEditor.tsx
+import { EditorView, keymap } from "@codemirror/view";
+import React3 from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { createBasicExtensions, createThemeExtensions, preventNewline, useTextEditor } from "@dxos/react-ui-editor";
+var editorKeys = ({ onNav, onClose }) => {
+  return 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 } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
+      autoFocus,
+      initialValue: value,
+      selection: {
+        anchor: value?.length ?? 0
+      },
+      extensions: [
+        extension ?? [],
+        preventNewline,
+        EditorView.focusChangeEffect.of((_, focusing) => {
+          if (!focusing) {
+            onBlur?.({
+              type: "blur"
+            });
+          }
+          return null;
+        }),
+        createBasicExtensions({
+          lineWrapping: false
+        }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            editor: {
+              className: "flex w-full [&>.cm-scroller]:scrollbar-none"
+            },
+            content: {
+              className: "!px-2 !py-1"
+            }
+          }
+        })
+      ]
+    };
+  }, [
+    extension
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    ref: parentRef,
+    className: "flex w-full"
+  });
+};
+
+// packages/plugins/plugin-sheet/src/components/CellEditor/extension.ts
+import { acceptCompletion, autocompletion, completionStatus, startCompletion } from "@codemirror/autocomplete";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { Facet } from "@codemirror/state";
+import { ViewPlugin, keymap as keymap2 } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { spreadsheet } from "codemirror-lang-spreadsheet";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var highlightStyles = HighlightStyle.define([
+  // Function.
+  {
+    tag: tags.name,
+    class: "text-accentText"
+  },
+  // Range.
+  {
+    tag: tags.tagName,
+    class: "text-pinkText"
+  },
+  // Values.
+  {
+    tag: tags.number,
+    class: "text-tealText"
+  },
+  {
+    tag: tags.bool,
+    class: "text-tealText"
+  },
+  {
+    tag: tags.string,
+    class: "text-tealText"
+  },
+  // Error.
+  {
+    tag: tags.invalid,
+    class: "text-unAccent"
+  }
+]);
+var languageFacet = Facet.define();
+var sheetExtension = ({ functions = [] }) => {
+  const { extension, language } = 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)) ?? []
+        };
+      }
+    }),
+    syntaxHighlighting(highlightStyles),
+    autocompletion({
+      aboveCursor: false,
+      defaultKeymap: true,
+      activateOnTyping: true,
+      // NOTE: Useful for debugging.
+      closeOnBlur: false,
+      icons: false,
+      tooltipClass: () => mx2(
+        // 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"
+      )
+    }),
+    keymap2.of([
+      {
+        key: "Tab",
+        run: (view) => {
+          return completionStatus(view.state) === "active" ? acceptCompletion(view) : 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 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;
+};
+
+// packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx
+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__ */ React4.createElement(SheetContextProvider, props, children);
+};
+var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns }, forwardRef2) => {
+  const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
+  const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
+  useThreads();
+  const [rows, setRows] = useState4([
+    ...model.sheet.rows
+  ]);
+  const [columns, setColumns] = useState4([
+    ...model.sheet.columns
+  ]);
+  useEffect4(() => {
+    const rowsAccessor = createDocAccessor(model.sheet, [
+      "rows"
+    ]);
+    const columnsAccessor = createDocAccessor(model.sheet, [
+      "columns"
+    ]);
+    const handleUpdate = debounce2(() => {
+      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
+  ]);
+  useEffect4(() => {
+    model.reset();
+  }, [
+    rows,
+    columns
+  ]);
+  const handleMoveRows = (from, to, num = 1) => {
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : void 0;
+    const [rows2] = model.sheet.rows.splice(from, num);
+    model.sheet.rows.splice(to, 0, rows2);
+    if (cursorIdx) {
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
+    }
+    setRows([
+      ...model.sheet.rows
+    ]);
+  };
+  const handleMoveColumns = (from, to, num = 1) => {
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : void 0;
+    const columns2 = model.sheet.columns.splice(from, num);
+    model.sheet.columns.splice(to, 0, ...columns2);
+    if (cursorIdx) {
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
+    }
+    setColumns([
+      ...model.sheet.columns
+    ]);
+  };
+  const [rowSizes, setRowSizes] = useState4();
+  const [columnSizes, setColumnSizes] = useState4();
+  useEffect4(() => {
+    const rowAccessor = createDocAccessor(model.sheet, [
+      "rowMeta"
+    ]);
+    const columnAccessor = createDocAccessor(model.sheet, [
+      "columnMeta"
+    ]);
+    const handleUpdate = debounce2(() => {
+      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__ */ React4.createElement("div", {
+    role: "none",
+    className: mx3("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
+  }, /* @__PURE__ */ React4.createElement(GridCorner, {
+    onClick: () => {
+      setCursor(void 0);
+      setRange(void 0);
+      setEditing(false);
+    }
+  }), /* @__PURE__ */ React4.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__ */ React4.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__ */ React4.createElement(SheetGrid, {
+    ref: contentRef,
+    size: {
+      numRows: numRows ?? rows.length,
+      numColumns: numColumns ?? columns.length
+    },
+    rows,
+    columns,
+    rowSizes,
+    columnSizes
+  }), /* @__PURE__ */ React4.createElement(GridCorner, null), /* @__PURE__ */ React4.createElement(SheetStatusBar, null));
+});
+var useScrollHandlers = () => {
+  const rowsRef = useRef(null);
+  const columnsRef = useRef(null);
+  const contentRef = useRef(null);
+  useEffect4(() => {
+    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__ */ React4.createElement("div", {
+    className: fragments.axis,
+    ...props
+  });
+};
+var MovingOverlay = ({ label }) => {
+  return /* @__PURE__ */ React4.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__ */ forwardRef(({ rows, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: mouseConstraints
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    activationConstraint: touchConstraints
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {});
+  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+  const [active, setActive] = useState4(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 = 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__ */ React4.createElement("div", {
+    className: "relative flex grow overflow-hidden"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
+    style: {
+      width: axisWidth
+    }
+  }), /* @__PURE__ */ React4.createElement("div", {
+    ref: forwardRef2,
+    role: "rowheader",
+    className: "grow overflow-y-auto scrollbar-none"
+  }, /* @__PURE__ */ React4.createElement(DndContext, {
+    sensors,
+    modifiers: [
+      restrictToVerticalAxis,
+      snapToCenter
+    ],
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex flex-col",
+    style: {
+      width: axisWidth
+    }
+  }, rows.map((idx, index) => /* @__PURE__ */ React4.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__ */ createPortal(/* @__PURE__ */ React4.createElement(DragOverlay, null, active && /* @__PURE__ */ React4.createElement(MovingOverlay, {
+    label: String(active.data.current.index + 1)
+  })), document.body))));
+});
+var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResize }) => {
+  const { setNodeRef: setDroppableNodeRef } = useDroppable({
+    id: idx,
+    data: {
+      index
+    }
+  });
+  const { setNodeRef: setDraggableNodeRef, attributes, listeners, isDragging, over } = useDraggable({
+    id: idx,
+    data: {
+      index
+    }
+  });
+  const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
+  const [initialSize, setInitialSize] = useState4(size);
+  const [resizing, setResizing] = useState4(false);
+  const scrollHandler = 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__ */ React4.createElement(Resizable, {
+    enable: {
+      bottom: resize
+    },
+    size: {
+      height: size - 1
+    },
+    minHeight: minHeight - 1,
+    maxHeight,
+    onResizeStart: handleResizeStart,
+    onResize: handleResize,
+    onResizeStop: handleResizeStop
+  }, /* @__PURE__ */ React4.createElement("div", {
+    ref: setNodeRef,
+    ...attributes,
+    ...listeners,
+    className: mx3("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__ */ React4.createElement("span", {
+    className: "flex w-full justify-center"
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React4.createElement("div", {
+    className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
+  }), resizing && /* @__PURE__ */ React4.createElement("div", {
+    className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface"
+  })));
+};
+var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSelect, onResize, onMove }, forwardRef2) => {
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: mouseConstraints
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    activationConstraint: touchConstraints
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {});
+  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+  const [active, setActive] = useState4(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 = 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__ */ React4.createElement("div", {
+    className: "relative flex grow overflow-hidden"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
+    style: {
+      height: axisHeight
+    }
+  }), /* @__PURE__ */ React4.createElement("div", {
+    ref: forwardRef2,
+    role: "columnheader",
+    className: "grow overflow-x-auto scrollbar-none"
+  }, /* @__PURE__ */ React4.createElement(DndContext, {
+    autoScroll: {
+      enabled: true
+    },
+    sensors,
+    modifiers: [
+      restrictToHorizontalAxis,
+      snapToCenter
+    ],
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex h-full",
+    style: {
+      height: axisHeight
+    }
+  }, columns.map((idx, index) => /* @__PURE__ */ React4.createElement(GridColumnCell, {
+    key: idx,
+    idx,
+    index,
+    label: columnLetter(index),
+    size: sizes?.[idx] ?? defaultWidth,
+    resize: index < columns.length - 1,
+    selected: selected === index,
+    onResize,
+    onSelect
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(DragOverlay, null, active && /* @__PURE__ */ React4.createElement(MovingOverlay, {
+    label: columnLetter(active.data.current.index)
+  })), document.body))));
+});
+var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onResize }) => {
+  const { setNodeRef: setDroppableNodeRef } = useDroppable({
+    id: idx,
+    data: {
+      index
+    }
+  });
+  const { setNodeRef: setDraggableNodeRef, attributes, listeners, over, isDragging } = useDraggable({
+    id: idx,
+    data: {
+      index
+    }
+  });
+  const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
+  const [initialSize, setInitialSize] = useState4(size);
+  const [resizing, setResizing] = useState4(false);
+  const scrollHandler = 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__ */ React4.createElement(Resizable, {
+    enable: {
+      right: resize
+    },
+    size: {
+      width: size - 1
+    },
+    minWidth: minWidth - 1,
+    maxWidth,
+    onResizeStart: handleResizeStart,
+    onResize: handleResize,
+    onResizeStop: handleResizeStop
+  }, /* @__PURE__ */ React4.createElement("div", {
+    ref: setNodeRef,
+    ...attributes,
+    ...listeners,
+    className: mx3("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__ */ React4.createElement("span", {
+    className: "flex w-full justify-center"
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React4.createElement("div", {
+    className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
+  }), resizing && /* @__PURE__ */ React4.createElement("div", {
+    className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface"
+  })));
+};
+var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, columnSizes }, forwardRef2) => {
+  const { ref: containerRef, width: containerWidth = 0, height: containerHeight = 0 } = useResizeDetector({
+    refreshRate: 200
+  });
+  const scrollerRef = useRef(null);
+  useImperativeHandle(forwardRef2, () => scrollerRef.current);
+  const { model, cursor, range, editing, setCursor, setRange, setEditing, onInfo } = useSheetContext();
+  const initialText = useRef();
+  const quickEdit = useRef(false);
+  const [, forceUpdate] = useState4({});
+  useEffect4(() => {
+    const unsubscribe = model.update.on(() => {
+      log("updated", {
+        id: model.id
+      }, {
+        F: __dxlog_file2,
+        L: 737,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      forceUpdate({});
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [
+    model
+  ]);
+  const inputRef = 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 = fullyQualifiedId3(model.sheet);
+  const attendableAttrs = createAttendableAttributes(id);
+  const hasAttention = useHasAttention(id);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref: containerRef,
+    role: "grid",
+    className: "relative flex grow overflow-hidden"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("z-20 absolute inset-0 border border-gridLine pointer-events-none")
+  }), /* @__PURE__ */ React4.createElement("div", {
+    ref: scrollerRef,
+    className: mx3("grow", hasAttention && "overflow-auto scrollbar-thin")
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "relative select-none",
+    style: {
+      width,
+      height
+    },
+    onClick: () => inputRef.current?.focus(),
+    ...handlers
+  }, scrollerRef.current && /* @__PURE__ */ React4.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 = addressToA1Notation(cell);
+      const idx = addressToIndex(model.sheet, cell);
+      const active = 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__ */ React4.createElement(GridCellEditor, {
+          key: idx,
+          value,
+          style,
+          onNav: quickEdit.current ? handleNav2 : void 0,
+          onClose: handleClose
+        });
+      }
+      return /* @__PURE__ */ React4.createElement(SheetCell, {
+        key: id2,
+        id: id2,
+        cell,
+        active,
+        style,
+        onSelect: (cell2, edit) => {
+          setEditing(edit);
+          setCursor(cell2);
+        }
+      });
+    });
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.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__ */ React4.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, decorations, model: { sheet } } = useSheetContext();
+  const { value, classNames } = formatting.getFormatting(cell);
+  const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
+  const decorationAddedClasses = useMemo3(() => decorationsForCell.flatMap((d) => d.classNames ?? []), [
+    decorationsForCell
+  ]);
+  const decoratedContent = decorationsForCell.reduce((children, { decorate }) => {
+    if (!decorate) {
+      return children;
+    }
+    const DecoratorComponent = decorate;
+    return /* @__PURE__ */ React4.createElement(DecoratorComponent, null, children);
+  }, /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: mx3("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
+  }, value));
+  return /* @__PURE__ */ React4.createElement("div", {
+    [`data-${CELL_DATA_KEY}`]: id,
+    role: "cell",
+    style,
+    className: mx3("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)
+  }, decoratedContent);
+};
+var GridCellEditor = ({ style, value, onNav, onClose }) => {
+  const { model, range } = useSheetContext();
+  const notifier = useRef();
+  useEffect4(() => {
+    if (range) {
+      notifier.current?.(rangeToA1Notation(range));
+    }
+  }, [
+    range
+  ]);
+  const extension = useMemo3(() => [
+    editorKeys({
+      onNav,
+      onClose
+    }),
+    sheetExtension({
+      functions: model.functions
+    }),
+    rangeExtension((fn) => notifier.current = fn)
+  ], [
+    model
+  ]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "cell",
+    style,
+    className: mx3("z-20 flex", fragments.cellSelected),
+    onClick: (ev) => ev.stopPropagation()
+  }, /* @__PURE__ */ React4.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__ */ React4.createElement("div", {
+    className: mx3("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex gap-4 items-center"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: "flex w-16 items-center font-mono"
+  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React4.createElement("div", {
+    className: "flex gap-2 items-center"
+  }, /* @__PURE__ */ React4.createElement(FunctionIcon, {
+    className: mx3("text-greenText", isFormula ? "visible" : "invisible")
+  }), /* @__PURE__ */ React4.createElement("span", {
+    className: "font-mono"
+  }, value))));
+};
+var SheetDebug = () => {
+  const { model, cursor, range } = useSheetContext();
+  const [, forceUpdate] = useState4({});
+  useEffect4(() => {
+    const accessor = createDocAccessor(model.sheet, []);
+    const handleUpdate = () => forceUpdate({});
+    accessor.handle.addListener("change", handleUpdate);
+    handleUpdate();
+    return () => {
+      accessor.handle.removeListener("change", handleUpdate);
+    };
+  }, [
+    model
+  ]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: mx3("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__ */ React4.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
+};
+
+// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
+import { Calendar, ChatText, CurrencyDollar, Eraser, HighlighterCircle, TextAlignCenter, TextAlignLeft, TextAlignRight } from "@phosphor-icons/react";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React6 from "react";
+import { DensityProvider, ElevationProvider, Toolbar as NaturalToolbar2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { nonNullable } from "@dxos/util";
+
+// packages/plugins/plugin-sheet/src/components/Toolbar/common.tsx
+import React5 from "react";
+import { Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var iconStyles = getSize(5);
+var buttonStyles = "min-bs-0 p-2";
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
+var ToolbarSeparator = () => /* @__PURE__ */ React5.createElement("div", {
+  role: "separator",
+  className: "grow"
+});
+var ToolbarButton = ({ Icon: Icon2, children, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(Tooltip.Root, null, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
+    className: iconStyles
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
+};
+var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(Tooltip.Root, null, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(NaturalToolbar.ToggleGroupItem, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
+    className: iconStyles
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
+};
+
+// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
+var [ToolbarContextProvider, useToolbarContext] = createContext2("Toolbar");
+var ToolbarRoot = ({ children, onAction, classNames }) => {
+  return /* @__PURE__ */ React6.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ React6.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React6.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ React6.createElement(NaturalToolbar2.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      classNames
+    ]
+  }, children))));
+};
+var formatOptions = [
+  {
+    type: "date",
+    Icon: Calendar,
+    getState: (state) => false
+  },
+  {
+    type: "currency",
+    Icon: CurrencyDollar,
+    getState: (state) => false
+  }
+];
+var Format = () => {
+  const { onAction } = useToolbarContext("Format");
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
+    type: "single"
+  }, formatOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
+    key: type,
+    value: type,
+    Icon: Icon2,
+    // disabled={state?.blockType === 'codeblock'}
+    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+    onClick: () => onAction?.({
+      type
+    })
+  }, t(`toolbar ${type} label`))));
+};
+var alignmentOptions = [
+  {
+    type: "left",
+    Icon: TextAlignLeft,
+    getState: (state) => false
+  },
+  {
+    type: "center",
+    Icon: TextAlignCenter,
+    getState: (state) => false
+  },
+  {
+    type: "right",
+    Icon: TextAlignRight,
+    getState: (state) => false
+  }
+];
+var Alignment = () => {
+  const { onAction } = useToolbarContext("Alignment");
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
+    type: "single"
+  }, alignmentOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
+    key: type,
+    value: type,
+    Icon: Icon2,
+    // disabled={state?.blockType === 'codeblock'}
+    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+    onClick: () => onAction?.({
+      type
+    })
+  }, t(`toolbar ${type} label`))));
+};
+var styleOptions = [
+  {
+    type: "clear",
+    Icon: Eraser,
+    getState: (state) => false
+  },
+  {
+    type: "highlight",
+    Icon: HighlighterCircle,
+    getState: (state) => false
+  }
+];
+var Styles = () => {
+  const { onAction } = useToolbarContext("Alignment");
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  return /* @__PURE__ */ React6.createElement(NaturalToolbar2.ToggleGroup, {
+    type: "single"
+  }, styleOptions.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React6.createElement(ToolbarToggleButton, {
+    key: type,
+    value: type,
+    Icon: Icon2,
+    // disabled={state?.blockType === 'codeblock'}
+    // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+    onClick: () => onAction?.({
+      type
+    })
+  }, t(`toolbar ${type} label`))));
+};
+var Actions = () => {
+  const { onAction } = useToolbarContext("Actions");
+  const { cursor, range, model } = useSheetContext();
+  const { t } = useTranslation2(SHEET_PLUGIN);
+  const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
+    if (!cursor) {
+      return false;
+    }
+    return addressToIndex(model.sheet, cursor) === thread.anchor;
+  });
+  const hasCursor = !!cursor;
+  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
+  const tooltipLabelKey = !hasCursor ? "no cursor label" : overlapsCommentAnchor ? "selection overlaps existing comment label" : range ? "comment ranges not supported label" : "comment label";
+  return /* @__PURE__ */ React6.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
+    "data-testid": "editor.toolbar.comment",
+    onClick: () => {
+      if (!cursor) {
+        return;
+      }
+      return onAction?.({
+        type: "comment",
+        anchor: addressToIndex(model.sheet, cursor),
+        cellContent: model.getCellText(cursor)
+      });
+    },
+    disabled: !cursorOnly || overlapsCommentAnchor
+  }, t(tooltipLabelKey));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Separator: ToolbarSeparator,
+  Alignment,
+  Format,
+  Styles,
+  Actions
+};
+
+// packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
+var attentionFragment = mx4("group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface", "group-focus-within/editor:border-separator");
+var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
+var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
+  const dispatch = useIntentDispatcher2();
+  const id = fullyQualifiedId4(sheet);
+  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const handleAction = useCallback2((action) => {
+    switch (action.type) {
+      case "comment": {
+        void dispatch({
+          action: "dxos.org/plugin/thread/action/create",
+          data: {
+            cursor: action.anchor,
+            name: action.cellContent,
+            subject: sheet
+          }
+        });
+      }
+    }
+  }, [
+    sheet,
+    dispatch
+  ]);
+  return /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0
+  }, /* @__PURE__ */ React7.createElement(Sheet.Root, {
+    sheet,
+    space,
+    remoteFunctionUrl
+  }, /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: mx4("flex flex-0 justify-center overflow-x-auto")
+  }, /* @__PURE__ */ React7.createElement(Toolbar.Root, {
+    onAction: handleAction,
+    classNames: mx4(role === "section" ? [
+      "z-[2] group-focus-within/section:visible",
+      !isDirectlyAttended && "invisible",
+      sectionToolbarLayout
+    ] : "group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator")
+  }, /* @__PURE__ */ React7.createElement(Toolbar.Separator, null), /* @__PURE__ */ React7.createElement(Toolbar.Actions, null))), /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: mx4(role === "section" && "aspect-square border-is border-bs border-be border-separator", role === "article" && "flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator", focusRing, attentionFragment)
+  }, /* @__PURE__ */ React7.createElement(Sheet.Main, null))));
+};
+var SheetContainer_default = SheetContainer;
+export {
+  SheetContainer_default as default,
+  sectionToolbarLayout
+};
+//# sourceMappingURL=SheetContainer-Y7ZMFBAP.mjs.map