@dxos/plugin-sheet 0.6.12-main.89e9959 → 0.6.12-main.c1d977f

package/dist/lib/node-esm/{chunk-KK3XL37M.mjs → chunk-JYDBXLDH.mjs}

@@ -2,10 +2,10 @@ import { createRequire } from 'node:module';const require = createRequire(import
 import {
   SheetType,
   ValueTypeEnum
-} from "./chunk-RR2AO4SM.mjs";
+} from "./chunk-2X36GIGW.mjs";
 import {
   SHEET_PLUGIN
-} from "./chunk-IU2L277A.mjs";
+} from "./chunk-VCYJWE3O.mjs";
 import {
   createSheetName
 } from "./chunk-5WPZCXNS.mjs";
@@ -16,13 +16,14 @@ import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modif
 import { getEventCoordinates, useCombinedRefs } from "@dnd-kit/utilities";
 import { Function as FunctionIcon } from "@phosphor-icons/react";
 import { Resizable } from "re-resizable";
-import React6, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo4, useRef, useState as useState5 } from "react";
+import React5, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo4, useRef, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 import { useResizeDetector } from "react-resize-detector";
-import { debounce as debounce2 } from "@dxos/async";
+import { debounce as debounce3 } from "@dxos/async";
 import { fullyQualifiedId as fullyQualifiedId2, createDocAccessor } from "@dxos/client/echo";
 import { log as log2 } from "@dxos/log";
 import { ATTENABLE_ATTRIBUTE, useAttendableAttributes, useAttention, useAttentionPath } from "@dxos/react-ui-attention";
+import { CellEditor, editorKeys } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
@@ -545,7 +546,7 @@ var ComputeGraphContextProvider = ({ registry, children }) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/index.ts
-var SheetContainer = React2.lazy(() => import("./SheetContainer-4XS2G25Z.mjs"));
+var SheetContainer = React2.lazy(() => import("./SheetContainer-5WYNOYYD.mjs"));
 
 // packages/plugins/plugin-sheet/src/hooks/useComputeGraph.ts
 var useComputeGraph = (space) => {
@@ -1439,169 +1440,23 @@ var scrollIntoView = (scrollContainer, el) => {
   }
 };
 
-// packages/plugins/plugin-sheet/src/components/CellEditor/CellEditor.tsx
-import { EditorView, keymap } from "@codemirror/view";
-import React5 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(), {
-          key: "Enter"
-        });
-        return true;
-      },
-      shift: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Enter",
-          shift: true
-        });
-        return true;
-      }
-    },
-    {
-      key: "Tab",
-      run: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Tab"
-        });
-        return true;
-      },
-      shift: (editor) => {
-        onClose(editor.state.doc.toString(), {
-          key: "Tab",
-          shift: true
-        });
-        return true;
-      }
-    },
-    {
-      key: "Escape",
-      run: () => {
-        onClose(void 0, {
-          key: "Escape"
-        });
-        return true;
-      }
-    }
-  ]);
-};
-var editorVariants = {
-  // TODO(thure): remove when legacy is no longer used.
-  legacy: {
-    root: "flex w-full",
-    editor: "flex w-full [&>.cm-scroller]:scrollbar-none",
-    content: "!px-2 !py-1"
-  },
-  grid: {
-    root: "absolute z-[1]",
-    editor: "[&>.cm-scroller]:scrollbar-none tabular-nums",
-    content: "!border !border-transparent !p-0.5"
-  }
-};
-var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box, gridId }) => {
-  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: editorVariants[variant].editor
-            },
-            content: {
-              className: editorVariants[variant].content
-            }
-          }
-        })
-      ]
-    };
-  }, [
-    extension,
-    autoFocus,
-    value,
-    variant,
-    onBlur
-  ]);
-  return /* @__PURE__ */ React5.createElement("div", {
-    ref: parentRef,
-    className: editorVariants[variant].root,
-    style: box,
-    ...gridId && {
-      "data-grid": gridId
-    }
-  });
-};
+// packages/plugins/plugin-sheet/src/extensions/compute.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { debounce as debounce2 } from "@dxos/async";
+import { invariant as invariant4 } from "@dxos/invariant";
+import { documentId, singleValueFacet } from "@dxos/react-ui-editor/state";
+var updateAllDecorations = StateEffect.define();
+var computeGraphFacet = singleValueFacet();
 
-// packages/plugins/plugin-sheet/src/components/CellEditor/extension.ts
+// packages/plugins/plugin-sheet/src/extensions/editor/extension.ts
 import { acceptCompletion, autocompletion, completionStatus, startCompletion } from "@codemirror/autocomplete";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { ViewPlugin, keymap as keymap2 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin2, keymap } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { spreadsheet } from "codemirror-lang-spreadsheet";
-import { singleValueFacet } from "@dxos/react-ui-editor/state";
+import { singleValueFacet as singleValueFacet2 } from "@dxos/react-ui-editor/state";
 import { mx } from "@dxos/react-ui-theme";
 var highlightStyles = HighlightStyle.define([
   // Function.
@@ -1633,7 +1488,7 @@ var highlightStyles = HighlightStyle.define([
     class: "text-unAccent"
   }
 ]);
-var languageFacet = singleValueFacet();
+var languageFacet = singleValueFacet2();
 var sheetExtension = ({ functions = [] }) => {
   const { extension, language } = spreadsheet({
     idiom: "en-US",
@@ -1715,7 +1570,7 @@ var sheetExtension = ({ functions = [] }) => {
       icons: false,
       tooltipClass: () => mx("!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]", "[&>ul>li[aria-selected]]:!bg-accentSurface", "border-separator")
     }),
-    keymap2.of([
+    keymap.of([
       {
         key: "Tab",
         run: (view) => {
@@ -1742,7 +1597,7 @@ var rangeExtension = (onInit) => {
     }
     view.focus();
   };
-  return ViewPlugin.fromClass(class {
+  return ViewPlugin2.fromClass(class {
     constructor(_view) {
       view = _view;
       onInit(provider);
@@ -1810,7 +1665,7 @@ var fragments = {
   cellSelected: "bg-gridCellSelected text-baseText border !border-accentSurface"
 };
 var SheetRoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ React6.createElement(SheetContextProvider, props, children);
+  return /* @__PURE__ */ React5.createElement(SheetContextProvider, props, children);
 };
 var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, forwardRef2) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
@@ -1829,7 +1684,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, fo
     const columnsAccessor = createDocAccessor(model.sheet, [
       "columns"
     ]);
-    const handleUpdate = debounce2(() => {
+    const handleUpdate = debounce3(() => {
       setRows([
         ...model.sheet.rows
       ]);
@@ -1884,7 +1739,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, fo
     const columnAccessor = createDocAccessor(model.sheet, [
       "columnMeta"
     ]);
-    const handleUpdate = debounce2(() => {
+    const handleUpdate = debounce3(() => {
       const mapSizes = (values) => values.reduce((map, [idx, meta]) => {
         if (meta.size) {
           map[idx] = meta.size;
@@ -1926,16 +1781,16 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, fo
       }));
     }
   };
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx2("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
-  }, /* @__PURE__ */ React6.createElement(GridCorner, {
+  }, /* @__PURE__ */ React5.createElement(GridCorner, {
     onClick: () => {
       setCursor(void 0);
       setRange(void 0);
       setEditing(false);
     }
-  }), /* @__PURE__ */ React6.createElement(SheetColumns, {
+  }), /* @__PURE__ */ React5.createElement(SheetColumns, {
     ref: columnsRef,
     columns,
     sizes: columnSizes,
@@ -1946,7 +1801,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, fo
     }),
     onResize: handleResizeColumn,
     onMove: handleMoveColumns
-  }), /* @__PURE__ */ React6.createElement(SheetRows, {
+  }), /* @__PURE__ */ React5.createElement(SheetRows, {
     ref: rowsRef,
     rows,
     sizes: rowSizes,
@@ -1957,7 +1812,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, fo
     }),
     onResize: handleResizeRow,
     onMove: handleMoveRows
-  }), /* @__PURE__ */ React6.createElement(SheetGrid, {
+  }), /* @__PURE__ */ React5.createElement(SheetGrid, {
     ref: contentRef,
     size: {
       numRows: numRows ?? rows.length,
@@ -1967,7 +1822,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numCols }, fo
     columns,
     rowSizes,
     columnSizes
-  }), /* @__PURE__ */ React6.createElement(GridCorner, null), /* @__PURE__ */ React6.createElement(SheetStatusBar, null));
+  }), /* @__PURE__ */ React5.createElement(GridCorner, null), /* @__PURE__ */ React5.createElement(SheetStatusBar, null));
 });
 var useScrollHandlers = () => {
   const rowsRef = useRef(null);
@@ -2010,13 +1865,13 @@ var useScrollHandlers = () => {
   };
 };
 var GridCorner = (props) => {
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: fragments.axis,
     ...props
   });
 };
 var MovingOverlay = ({ label }) => {
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: "flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer"
   }, label);
 };
@@ -2060,18 +1915,18 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     }
     return transform;
   };
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: mx2("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
     style: {
       width: axisWidth
     }
-  }), /* @__PURE__ */ React6.createElement("div", {
+  }), /* @__PURE__ */ React5.createElement("div", {
     ref: forwardRef2,
     role: "rowheader",
     className: "grow overflow-y-auto scrollbar-none"
-  }, /* @__PURE__ */ React6.createElement(DndContext, {
+  }, /* @__PURE__ */ React5.createElement(DndContext, {
     sensors,
     modifiers: [
       restrictToVerticalAxis,
@@ -2079,12 +1934,12 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex flex-col",
     style: {
       width: axisWidth
     }
-  }, rows.map((idx, index) => /* @__PURE__ */ React6.createElement(GridRowCell, {
+  }, rows.map((idx, index) => /* @__PURE__ */ React5.createElement(GridRowCell, {
     key: idx,
     idx,
     index,
@@ -2094,7 +1949,7 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(DragOverlay, null, active && /* @__PURE__ */ React6.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(DragOverlay, null, active && /* @__PURE__ */ React5.createElement(MovingOverlay, {
     label: String(active.data.current.index + 1)
   })), document.body))));
 });
@@ -2135,7 +1990,7 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResize?.(idx, initialSize + height, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ React6.createElement(Resizable, {
+  return /* @__PURE__ */ React5.createElement(Resizable, {
     enable: {
       bottom: resize
     },
@@ -2147,17 +2002,17 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
     className: mx2("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__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React5.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React6.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React5.createElement("div", {
     className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ React6.createElement("div", {
+  }), resizing && /* @__PURE__ */ React5.createElement("div", {
     className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface"
   })));
 };
@@ -2194,18 +2049,18 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     }
     return transform;
   };
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: mx2("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
     style: {
       height: axisHeight
     }
-  }), /* @__PURE__ */ React6.createElement("div", {
+  }), /* @__PURE__ */ React5.createElement("div", {
     ref: forwardRef2,
     role: "columnheader",
     className: "grow overflow-x-auto scrollbar-none"
-  }, /* @__PURE__ */ React6.createElement(DndContext, {
+  }, /* @__PURE__ */ React5.createElement(DndContext, {
     autoScroll: {
       enabled: true
     },
@@ -2216,12 +2071,12 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     ],
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex h-full",
     style: {
       height: axisHeight
     }
-  }, columns.map((idx, index) => /* @__PURE__ */ React6.createElement(GridColumnCell, {
+  }, columns.map((idx, index) => /* @__PURE__ */ React5.createElement(GridColumnCell, {
     key: idx,
     idx,
     index,
@@ -2231,7 +2086,7 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
     selected: selected === index,
     onResize,
     onSelect
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(DragOverlay, null, active && /* @__PURE__ */ React6.createElement(MovingOverlay, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(DragOverlay, null, active && /* @__PURE__ */ React5.createElement(MovingOverlay, {
     label: columnLetter(active.data.current.index)
   })), document.body))));
 });
@@ -2272,7 +2127,7 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResize?.(idx, initialSize + width, true);
     setResizing(false);
   };
-  return /* @__PURE__ */ React6.createElement(Resizable, {
+  return /* @__PURE__ */ React5.createElement(Resizable, {
     enable: {
       right: resize
     },
@@ -2284,17 +2139,17 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     ref: setNodeRef,
     ...attributes,
     ...listeners,
     className: mx2("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__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React5.createElement("span", {
     className: "flex w-full justify-center"
-  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React6.createElement("div", {
+  }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React5.createElement("div", {
     className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
-  }), resizing && /* @__PURE__ */ React6.createElement("div", {
+  }), resizing && /* @__PURE__ */ React5.createElement("div", {
     className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface"
   })));
 };
@@ -2314,7 +2169,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         id: model.id
       }, {
         F: __dxlog_file4,
-        L: 738,
+        L: 732,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2433,16 +2288,16 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
   });
   const id = fullyQualifiedId2(model.sheet);
   const { hasAttention } = useAttention(id);
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     ref: containerRef,
     role: "grid",
     className: "relative flex grow overflow-hidden"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: mx2("z-20 absolute inset-0 border border-gridLine pointer-events-none")
-  }), /* @__PURE__ */ React6.createElement("div", {
+  }), /* @__PURE__ */ React5.createElement("div", {
     ref: scrollerRef,
     className: mx2("grow", hasAttention && "overflow-auto scrollbar-thin")
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "relative select-none",
     style: {
       width,
@@ -2450,7 +2305,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     },
     onClick: () => inputRef.current?.focus(),
     ...handlers
-  }, scrollerRef.current && /* @__PURE__ */ React6.createElement(SelectionOverlay, {
+  }, scrollerRef.current && /* @__PURE__ */ React5.createElement(SelectionOverlay, {
     root: scrollerRef.current
   }), rowRange.map(({ row, top, height: height2 }) => {
     return columnRange.map(({ col, left, width: width2 }) => {
@@ -2499,7 +2354,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
           inputRef.current?.focus();
           setEditing(false);
         };
-        return /* @__PURE__ */ React6.createElement(GridCellEditor, {
+        return /* @__PURE__ */ React5.createElement(GridCellEditor, {
           key: idx,
           value,
           style,
@@ -2507,7 +2362,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
           onClose: handleClose
         });
       }
-      return /* @__PURE__ */ React6.createElement(SheetCell, {
+      return /* @__PURE__ */ React5.createElement(SheetCell, {
         key: id2,
         id: id2,
         cell,
@@ -2519,7 +2374,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         }
       });
     });
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(SheetInput, {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(SheetInput, {
     ref: inputRef,
     id,
     onKeyDown: handleKeyDown
@@ -2529,10 +2384,10 @@ var SheetInput = /* @__PURE__ */ forwardRef(({ id, onKeyDown }, forwardedRef) =>
   const path = useAttentionPath();
   const attendableAttrs = useAttendableAttributes(id);
   return path.toReversed().reduce((acc, part) => {
-    return /* @__PURE__ */ React6.createElement("div", {
+    return /* @__PURE__ */ React5.createElement("div", {
       [ATTENABLE_ATTRIBUTE]: part
     }, acc);
-  }, /* @__PURE__ */ React6.createElement("input", {
+  }, /* @__PURE__ */ React5.createElement("input", {
     ref: forwardedRef,
     className: "absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent",
     onKeyDown,
@@ -2552,7 +2407,7 @@ var SelectionOverlay = ({ root }) => {
   const b1 = getRelativeClientRect(root, c1);
   const b2 = getRelativeClientRect(root, c2);
   const bounds = getRectUnion(b1, b2);
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     style: bounds,
     className: "z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay"
@@ -2570,12 +2425,12 @@ var SheetCell = ({ id, cell, style, active, onSelect }) => {
       return children;
     }
     const DecoratorComponent = decorate;
-    return /* @__PURE__ */ React6.createElement(DecoratorComponent, null, children);
-  }, /* @__PURE__ */ React6.createElement("div", {
+    return /* @__PURE__ */ React5.createElement(DecoratorComponent, null, children);
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx2("flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer", ...decorationAddedClasses)
   }, value));
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     [`data-${CELL_DATA_KEY}`]: id,
     role: "cell",
     style,
@@ -2617,12 +2472,12 @@ var GridCellEditor = ({ style, value, onNav, onClose }) => {
   ], [
     model
   ]);
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "cell",
     style,
     className: mx2("z-20 flex", fragments.cellSelected),
     onClick: (ev) => ev.stopPropagation()
-  }, /* @__PURE__ */ React6.createElement(CellEditor, {
+  }, /* @__PURE__ */ React5.createElement(CellEditor, {
     autoFocus: true,
     value,
     extension
@@ -2641,17 +2496,17 @@ var SheetStatusBar = () => {
       value = String(value);
     }
   }
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: mx2("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex gap-4 items-center"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex w-16 items-center font-mono"
-  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React6.createElement("div", {
+  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React5.createElement("div", {
     className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ React6.createElement(FunctionIcon, {
+  }, /* @__PURE__ */ React5.createElement(FunctionIcon, {
     className: mx2("text-greenText", isFormula ? "visible" : "invisible")
-  }), /* @__PURE__ */ React6.createElement("span", {
+  }), /* @__PURE__ */ React5.createElement("span", {
     className: "font-mono"
   }, value))));
 };
@@ -2669,9 +2524,9 @@ var SheetDebug = () => {
   }, [
     model
   ]);
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: mx2("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__ */ React6.createElement("pre", {
+  }, /* @__PURE__ */ React5.createElement("pre", {
     className: "whitespace-pre-wrap"
   }, JSON.stringify({
     cursor,
@@ -2700,7 +2555,8 @@ export {
   compareIndexPositions,
   useComputeGraph,
   useSheetContext,
+  computeGraphFacet,
   Sheet,
   SheetContainer
 };
-//# sourceMappingURL=chunk-KK3XL37M.mjs.map
+//# sourceMappingURL=chunk-JYDBXLDH.mjs.map