@dxos/plugin-sheet 0.6.10 → 0.6.11-staging.66fb9aa

package/dist/lib/browser/{SheetContainer-ISY6DUVE.mjs → SheetContainer-U4H5D34A.mjs}

@@ -1,3 +1,6 @@
+import {
+  useComputeGraph
+} from "./chunk-APHOLYUB.mjs";
 import {
   SheetModel,
   addressFromA1Notation,
@@ -6,12 +9,11 @@ import {
   defaultFunctions,
   inRange,
   posEquals,
-  rangeToA1Notation,
-  useComputeGraph
-} from "./chunk-CBRBNG3R.mjs";
+  rangeToA1Notation
+} from "./chunk-D5AGLXJP.mjs";
 import {
   ValueTypeEnum
-} from "./chunk-D3PUKBH6.mjs";
+} from "./chunk-FUAGSXA4.mjs";
 import "./chunk-JRL5LGCE.mjs";
 
 // packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
@@ -30,7 +32,7 @@ import { useResizeDetector } from "react-resize-detector";
 import { debounce } from "@dxos/async";
 import { fullyQualifiedId as fullyQualifiedId2, createDocAccessor } from "@dxos/client/echo";
 import { log } from "@dxos/log";
-import { createAttendableAttributes } from "@dxos/react-ui-attention";
+import { createAttendableAttributes, useHasAttention } from "@dxos/react-ui-attention";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
@@ -367,10 +369,13 @@ var FormattingModel = class {
           value: value.toLocaleString().toUpperCase(),
           classNames: [
             ...classNames,
-            value ? "!text-green-500" : "!text-orange-500"
+            value ? "!text-greenText" : "!text-orangeText"
           ]
         };
       }
+      //
+      // Numbers.
+      //
       case ValueTypeEnum.Number: {
         return {
           value: value.toLocaleString(locales),
@@ -403,6 +408,9 @@ var FormattingModel = class {
           ]
         };
       }
+      //
+      // Dates.
+      //
       case ValueTypeEnum.DateTime: {
         const date = this.model.toLocalDate(value);
         return {
@@ -680,30 +688,30 @@ var highlightStyles = HighlightStyle.define([
   // Function.
   {
     tag: tags.name,
-    class: "text-primary-500"
+    class: "text-accentText"
   },
   // Range.
   {
     tag: tags.tagName,
-    class: "text-pink-500"
+    class: "text-pinkText"
   },
   // Values.
   {
     tag: tags.number,
-    class: "text-teal-500"
+    class: "text-tealText"
   },
   {
     tag: tags.bool,
-    class: "text-teal-500"
+    class: "text-tealText"
   },
   {
     tag: tags.string,
-    class: "text-teal-500"
+    class: "text-tealText"
   },
   // Error.
   {
     tag: tags.invalid,
-    class: "text-neutral-500"
+    class: "text-unAccent"
   }
 ]);
 var languageFacet = Facet.define();
@@ -725,7 +733,7 @@ var sheetExtension = ({ functions = [] }) => {
         root.className = "flex flex-col gap-2 text-sm";
         const title = document.createElement("h2");
         title.innerText = name;
-        title.className = "text-lg font-mono text-primary-500";
+        title.className = "text-lg font-mono text-accentText";
         root.appendChild(title);
         if (description) {
           const info = document.createElement("p");
@@ -736,7 +744,7 @@ var sheetExtension = ({ functions = [] }) => {
         if (syntax) {
           const detail = document.createElement("pre");
           detail.innerText = syntax;
-          detail.className = "whitespace-pre-wrap text-green-500";
+          detail.className = "whitespace-pre-wrap text-greenText";
           root.appendChild(detail);
         }
         return root;
@@ -790,8 +798,8 @@ var sheetExtension = ({ functions = [] }) => {
         // 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-primary-700",
-        "border-neutral-200 dark:border-neutral-700"
+        "[&>ul>li[aria-selected]]:!bg-accentSurface",
+        "border-separator"
       )
     }),
     keymap2.of([
@@ -841,6 +849,13 @@ var rangeExtension = (onInit) => {
               };
               break;
             }
+            case "CloseParen": {
+              activeRange = {
+                from,
+                to: from
+              };
+              break;
+            }
             case "RangeToken":
             case "CellToken":
               activeRange = {
@@ -876,11 +891,10 @@ var visitTree = (node, callback) => {
 // 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-neutral-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200 text-xs select-none",
-  axisSelected: "bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white",
-  cell: "dark:bg-neutral-850",
-  cellSelected: "bg-neutral-50 dark:bg-neutral-900 text-black dark:text-white border !border-primary-500",
-  border: "border-neutral-200 dark:border-neutral-700"
+  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__ */ React3.createElement(SheetContextProvider, props, children);
@@ -1000,7 +1014,7 @@ var SheetMain = /* @__PURE__ */ forwardRef(({ classNames, numRows, numColumns },
   };
   return /* @__PURE__ */ React3.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", fragments.border, classNames)
+    className: mx2("grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden", classNames)
   }, /* @__PURE__ */ React3.createElement(GridCorner, {
     onClick: () => {
       setCursor(void 0);
@@ -1089,7 +1103,7 @@ var GridCorner = (props) => {
 };
 var MovingOverlay = ({ label }) => {
   return /* @__PURE__ */ React3.createElement("div", {
-    className: "flex w-full h-full justify-center items-center text-sm p-1 bg-primary-500/50 cursor-pointer"
+    className: "flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer"
   }, label);
 };
 var mouseConstraints = {
@@ -1135,7 +1149,7 @@ var SheetRows = /* @__PURE__ */ forwardRef(({ rows, sizes, selected, onSelect, o
   return /* @__PURE__ */ React3.createElement("div", {
     className: "relative flex grow overflow-hidden"
   }, /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute inset-0 border-y pointer-events-none", fragments.border),
+    className: mx2("z-20 absolute inset-0 border-y border-gridLine pointer-events-none"),
     style: {
       width: axisWidth
     }
@@ -1223,14 +1237,14 @@ var GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onResi
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: mx2("flex h-full items-center justify-center cursor-pointer", "border-t focus-visible:outline-none", fragments.border, fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    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__ */ React3.createElement("span", {
     className: "flex w-full justify-center"
   }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React3.createElement("div", {
-    className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-primary-500"
+    className: "z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface"
   }), resizing && /* @__PURE__ */ React3.createElement("div", {
-    className: "z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-primary-500"
+    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) => {
@@ -1269,7 +1283,7 @@ var SheetColumns = /* @__PURE__ */ forwardRef(({ columns, sizes, selected, onSel
   return /* @__PURE__ */ React3.createElement("div", {
     className: "relative flex grow overflow-hidden"
   }, /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute inset-0 border-x pointer-events-none", fragments.border),
+    className: mx2("z-20 absolute inset-0 border-x border-gridLine pointer-events-none"),
     style: {
       height: axisHeight
     }
@@ -1360,14 +1374,14 @@ var GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, onR
     ref: setNodeRef,
     ...attributes,
     ...listeners,
-    className: mx2("flex h-full items-center justify-center cursor-pointer", "border-l focus-visible:outline-none", fragments.border, fragments.axis, selected && fragments.axisSelected, isDragging && fragments.axisSelected),
+    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__ */ React3.createElement("span", {
     className: "flex w-full justify-center"
   }, label), over?.id === idx && !isDragging && /* @__PURE__ */ React3.createElement("div", {
-    className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-primary-500"
+    className: "z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface"
   }), resizing && /* @__PURE__ */ React3.createElement("div", {
-    className: "z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-primary-500"
+    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) => {
@@ -1386,7 +1400,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         id: model.id
       }, {
         F: __dxlog_file2,
-        L: 735,
+        L: 730,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1503,18 +1517,18 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     rowSizes,
     columnSizes
   });
-  const qualifiedSubjectId = fullyQualifiedId2(model.sheet);
-  const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-  const attended = true;
+  const id = fullyQualifiedId2(model.sheet);
+  const attendableAttrs = createAttendableAttributes(id);
+  const hasAttention = useHasAttention(id);
   return /* @__PURE__ */ React3.createElement("div", {
     ref: containerRef,
     role: "grid",
     className: "relative flex grow overflow-hidden"
   }, /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute inset-0 border pointer-events-none", fragments.border)
+    className: mx2("z-20 absolute inset-0 border border-gridLine pointer-events-none")
   }), /* @__PURE__ */ React3.createElement("div", {
     ref: scrollerRef,
-    className: mx2("grow", attended && "overflow-auto scrollbar-thin")
+    className: mx2("grow", hasAttention && "overflow-auto scrollbar-thin")
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "relative select-none",
     style: {
@@ -1538,7 +1552,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         row,
         column
       };
-      const id = addressToA1Notation(cell);
+      const id2 = addressToA1Notation(cell);
       const idx = model.addressToIndex(cell);
       const active = posEquals(cursor, cell);
       if (active && editing) {
@@ -1581,8 +1595,8 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         });
       }
       return /* @__PURE__ */ React3.createElement(SheetCell, {
-        key: id,
-        id,
+        key: id2,
+        id: id2,
         cell,
         active,
         style,
@@ -1616,7 +1630,7 @@ var SelectionOverlay = ({ root }) => {
   return /* @__PURE__ */ React3.createElement("div", {
     role: "none",
     style: bounds,
-    className: "z-10 absolute pointer-events-none bg-primary-500/20 border border-primary-500/50"
+    className: "z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay"
   });
 };
 var SheetCell = ({ id, cell, style, active, onSelect }) => {
@@ -1626,7 +1640,7 @@ var SheetCell = ({ id, cell, style, active, onSelect }) => {
     [`data-${CELL_DATA_KEY}`]: id,
     role: "cell",
     style,
-    className: mx2("flex w-full h-full truncate items-center border cursor-pointer", "px-2 py-1", fragments.cell, fragments.border, active && [
+    className: mx2("flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer", fragments.cell, active && [
       "z-20",
       fragments.cellSelected
     ], classNames),
@@ -1689,7 +1703,7 @@ var SheetStatusBar = () => {
     }
   }
   return /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x", fragments.border)
+    className: mx2("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine")
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex gap-4 items-center"
   }, /* @__PURE__ */ React3.createElement("div", {
@@ -1697,7 +1711,7 @@ var SheetStatusBar = () => {
   }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React3.createElement("div", {
     className: "flex gap-2 items-center"
   }, /* @__PURE__ */ React3.createElement(FunctionIcon, {
-    className: mx2("text-green-500", isFormula ? "visible" : "invisible")
+    className: mx2("text-greenText", isFormula ? "visible" : "invisible")
   }), /* @__PURE__ */ React3.createElement("span", {
     className: "font-mono"
   }, value))));
@@ -1717,7 +1731,7 @@ var SheetDebug = () => {
     model
   ]);
   return /* @__PURE__ */ React3.createElement("div", {
-    className: mx2("z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin", "border text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80", fragments.border)
+    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__ */ React3.createElement("pre", {
     className: "whitespace-pre-wrap"
   }, JSON.stringify({
@@ -1741,20 +1755,18 @@ var Sheet = {
 };
 
 // packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
-var SheetContainer = ({ sheet, space, role, coordinate = {
-  part: "main",
-  entryId: ""
-} }) => {
+var SheetContainer = ({ sheet, space, role, remoteFunctionUrl }) => {
   return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx3("flex", role === "article" && "row-span-2", role === "section" && "aspect-square border-y border-is border-separator", coordinate.part !== "solo" && "border-is border-separator")
+    className: mx3("flex", role === "article" && "row-span-2", role === "section" && "aspect-square border-y border-is border-separator")
   }, /* @__PURE__ */ React4.createElement(Sheet.Root, {
     sheet,
-    space
+    space,
+    remoteFunctionUrl
   }, /* @__PURE__ */ React4.createElement(Sheet.Main, null)));
 };
 var SheetContainer_default = SheetContainer;
 export {
   SheetContainer_default as default
 };
-//# sourceMappingURL=SheetContainer-ISY6DUVE.mjs.map
+//# sourceMappingURL=SheetContainer-U4H5D34A.mjs.map