@modernrelay/orbit-react 0.2.0

package/dist/components/ContextMenu.js

@@ -0,0 +1,367 @@
+import { useResolvedInstance } from '../chunk-7XB47YST.js';
+import { useState, useRef, useCallback, useEffect, useSyncExternalStore } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MENU_CHROME = {
+  minWidth: 160,
+  display: "flex",
+  flexDirection: "column",
+  padding: 4,
+  borderRadius: 8,
+  background: "rgba(23, 25, 32, 0.96)",
+  border: "1px solid rgba(255, 255, 255, 0.14)",
+  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.5)",
+  color: "#e8eaf0",
+  font: "13px/1.4 system-ui, sans-serif",
+  zIndex: 10
+};
+var HEADING_STYLE = {
+  padding: "4px 10px",
+  fontSize: 11,
+  opacity: 0.65,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: 240
+};
+var ITEM_STYLE = {
+  appearance: "none",
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  background: "transparent",
+  border: "none",
+  borderRadius: 6,
+  color: "inherit",
+  cursor: "pointer",
+  font: "inherit",
+  padding: "6px 10px"
+};
+function nodeLabelText(node) {
+  const attrs = node.attrs;
+  const label = attrs?.["label"];
+  return label === void 0 || label === null ? String(node.id) : String(label);
+}
+function legacyCopy(text) {
+  if (typeof document === "undefined") return;
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.setAttribute("readonly", "");
+  ta.style.position = "fixed";
+  ta.style.left = "-9999px";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+  } catch {
+  }
+  ta.remove();
+}
+function copyText(text) {
+  const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+  if (clipboard !== void 0 && typeof clipboard.writeText === "function") {
+    void clipboard.writeText(text).catch(() => {
+      legacyCopy(text);
+    });
+    return;
+  }
+  legacyCopy(text);
+}
+function defaultNodeItems(instance, node, pendingExpansions, pathPair) {
+  const pinned = instance.store.getState().pins.has(node.id);
+  const expanding = pendingExpansions.has(node.id);
+  const folded = instance.getFold(node.id) !== null;
+  const items = [
+    {
+      id: "focus",
+      label: "Focus",
+      onSelect: () => {
+        instance.focusNode(node.id);
+      }
+    },
+    {
+      id: "select-neighbors",
+      label: "Select neighbors",
+      onSelect: () => {
+        instance.selectNeighbors(node.id);
+      }
+    },
+    {
+      id: "expand",
+      label: expanding ? "Expanding\u2026" : "Expand neighbors",
+      disabled: expanding,
+      onSelect: () => {
+        void instance.expandNode(node.id).catch(() => {
+        });
+      }
+    },
+    {
+      id: "isolate",
+      label: "Isolate",
+      onSelect: () => {
+        instance.applyHostUpdate({ subgraph: { seedIds: [node.id], hops: 1 } });
+      }
+    },
+    folded ? {
+      id: "unfold",
+      label: "Expand neighborhood",
+      onSelect: () => {
+        instance.unfoldNode(node.id);
+      }
+    } : {
+      id: "fold",
+      label: "Collapse neighborhood",
+      onSelect: () => {
+        instance.foldNode(node.id);
+      }
+    },
+    pinned ? {
+      id: "unpin",
+      label: "Unpin",
+      onSelect: () => {
+        instance.unpinNode(node.id);
+      }
+    } : {
+      id: "pin",
+      label: "Pin",
+      onSelect: () => {
+        instance.pinNode(node.id);
+      }
+    },
+    {
+      id: "hide",
+      label: "Hide",
+      onSelect: () => {
+        instance.hideNodes([node.id]);
+      }
+    },
+    {
+      id: "copy-id",
+      label: "Copy id",
+      onSelect: () => {
+        copyText(String(node.id));
+      }
+    }
+  ];
+  if (pathPair !== null) {
+    items.push({
+      id: "find-path-from",
+      label: "Find path from here",
+      onSelect: () => {
+        pathPair.setAnchor(node.id);
+      }
+    });
+    if (pathPair.anchorId !== null && pathPair.anchorId !== node.id) {
+      const anchorId = pathPair.anchorId;
+      items.push({
+        id: "find-path-to",
+        label: "Find path to here",
+        onSelect: () => {
+          pathPair.setAnchor(null);
+          pathPair.onFindPath(anchorId, node.id);
+        }
+      });
+    }
+  }
+  return items;
+}
+function defaultBackgroundItems(instance, scope) {
+  const items = [
+    {
+      id: "select-all",
+      label: "Select all",
+      onSelect: () => {
+        instance.selectAll();
+      }
+    },
+    {
+      id: "clear-selection",
+      label: "Clear selection",
+      onSelect: () => {
+        instance.clearSelection();
+      }
+    },
+    {
+      id: "fit-view",
+      label: "Fit view",
+      onSelect: () => {
+        instance.fitView();
+      }
+    }
+  ];
+  if (scope !== null) {
+    items.push({
+      id: "reset-isolation",
+      label: "Reset isolation",
+      onSelect: () => {
+        instance.resetIsolation();
+      }
+    });
+  }
+  return items;
+}
+var selectScope = (s) => s.scope;
+var selectPendingExpansions = (s) => s.pendingExpansions;
+function useInstanceStore(instance, selector) {
+  const subscribe = useCallback(
+    (onChange) => instance.store.subscribe(onChange),
+    [instance]
+  );
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const getSnapshot = useCallback(() => selectorRef.current(instance.store.getState()), [instance]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function GraphContextMenu(props) {
+  const instance = useResolvedInstance(props.instance, "<GraphContextMenu>");
+  const scope = useInstanceStore(instance, selectScope);
+  const pendingExpansions = useInstanceStore(instance, selectPendingExpansions);
+  const [open, setOpen] = useState(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const rootRef = useRef(null);
+  const itemRefs = useRef([]);
+  const restoreFocusRef = useRef(null);
+  const pathAnchorRef = useRef(null);
+  const close = useCallback((restoreFocus) => {
+    setOpen(null);
+    const el = restoreFocusRef.current;
+    restoreFocusRef.current = null;
+    if (restoreFocus && el !== null && el.isConnected) el.focus();
+  }, []);
+  useEffect(() => {
+    const off = instance.on("contextMenu", (payload) => {
+      restoreFocusRef.current = typeof document !== "undefined" && document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      setOpen({ target: payload.target, screen: payload.screen });
+      setActiveIndex(0);
+    });
+    return off;
+  }, [instance]);
+  useEffect(() => {
+    if (open === null) return void 0;
+    const onDocPointerDown = (e) => {
+      const root = rootRef.current;
+      if (root !== null && e.target instanceof Node && root.contains(e.target)) return;
+      close(false);
+    };
+    const onWindowBlur = () => {
+      close(false);
+    };
+    document.addEventListener("pointerdown", onDocPointerDown, true);
+    window.addEventListener("blur", onWindowBlur);
+    return () => {
+      document.removeEventListener("pointerdown", onDocPointerDown, true);
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, [open, close]);
+  useEffect(() => {
+    if (open === null) return;
+    const el = itemRefs.current[activeIndex] ?? itemRefs.current[0] ?? rootRef.current;
+    el?.focus();
+  }, [open, activeIndex]);
+  if (open === null) return null;
+  const onFindPath = props.onFindPath;
+  const defaultItems = open.target.kind === "node" ? defaultNodeItems(
+    instance,
+    open.target.node,
+    pendingExpansions,
+    onFindPath !== void 0 ? {
+      onFindPath,
+      anchorId: pathAnchorRef.current,
+      setAnchor: (id) => {
+        pathAnchorRef.current = id;
+      }
+    } : null
+  ) : defaultBackgroundItems(instance, scope);
+  const items = props.renderItems !== void 0 ? props.renderItems({ target: open.target, defaultItems }) : defaultItems;
+  const heading = open.target.kind === "node" ? nodeLabelText(open.target.node) : null;
+  const activate = (item) => {
+    close(true);
+    item.onSelect();
+  };
+  const onKeyDown = (e) => {
+    const count = items.length;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((i) => count === 0 ? 0 : (i + 1) % count);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((i) => count === 0 ? 0 : (i - 1 + count) % count);
+        break;
+      case "Home":
+        e.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActiveIndex(count === 0 ? 0 : count - 1);
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const item = items[activeIndex];
+        if (item !== void 0 && item.disabled !== true) activate(item);
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        close(true);
+        break;
+      case "Tab":
+        e.preventDefault();
+        break;
+    }
+  };
+  const positionStyle = {
+    position: "absolute",
+    left: open.screen[0],
+    top: open.screen[1]
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-orbit-context-menu": "",
+      role: "menu",
+      "aria-label": heading ?? "Graph",
+      tabIndex: -1,
+      className: props.className,
+      style: props.className !== void 0 ? { ...positionStyle, ...props.style } : { ...MENU_CHROME, ...positionStyle, ...props.style },
+      onKeyDown,
+      children: [
+        heading !== null ? (
+          // Target-derived text renders as a TEXT NODE (§14/§15 injection ban).
+          /* @__PURE__ */ jsx("div", { "data-orbit-context-menu-heading": "", role: "presentation", style: HEADING_STYLE, children: heading })
+        ) : null,
+        items.map((item, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            type: "button",
+            role: "menuitem",
+            "data-orbit-context-menu-item": item.id,
+            tabIndex: index === activeIndex ? 0 : -1,
+            disabled: item.disabled === true,
+            className: props.itemClassName,
+            style: props.itemClassName !== void 0 ? void 0 : ITEM_STYLE,
+            onClick: () => {
+              if (item.disabled !== true) activate(item);
+            },
+            onPointerEnter: () => {
+              setActiveIndex(index);
+            },
+            children: item.label
+          },
+          item.id
+        ))
+      ]
+    }
+  );
+}
+
+export { GraphContextMenu };
+//# sourceMappingURL=ContextMenu.js.map
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ContextMenu/index.tsx"],"names":[],"mappings":";;;;AAiFA,IAAM,WAAA,GAA6B;AAAA,EACjC,QAAA,EAAU,GAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,OAAA,EAAS,CAAA;AAAA,EACT,YAAA,EAAc,CAAA;AAAA,EACd,UAAA,EAAY,wBAAA;AAAA,EACZ,MAAA,EAAQ,qCAAA;AAAA,EACR,SAAA,EAAW,+BAAA;AAAA,EACX,KAAA,EAAO,SAAA;AAAA,EACP,IAAA,EAAM,gCAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,aAAA,GAA+B;AAAA,EACnC,OAAA,EAAS,UAAA;AAAA,EACT,QAAA,EAAU,EAAA;AAAA,EACV,OAAA,EAAS,IAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,QAAA,EAAU,QAAA;AAAA,EACV,YAAA,EAAc,UAAA;AAAA,EACd,QAAA,EAAU;AACZ,CAAA;AAEA,IAAM,UAAA,GAA4B;AAAA,EAChC,UAAA,EAAY,MAAA;AAAA,EACZ,OAAA,EAAS,OAAA;AAAA,EACT,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,UAAA,EAAY,aAAA;AAAA,EACZ,MAAA,EAAQ,MAAA;AAAA,EACR,YAAA,EAAc,CAAA;AAAA,EACd,KAAA,EAAO,SAAA;AAAA,EACP,MAAA,EAAQ,SAAA;AAAA,EACR,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAGA,SAAS,cAAc,IAAA,EAA8B;AACnD,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA;AACnB,EAAA,MAAM,KAAA,GAAQ,QAAQ,OAAO,CAAA;AAC7B,EAAA,OAAO,KAAA,KAAU,UAAa,KAAA,KAAU,IAAA,GAAO,OAAO,IAAA,CAAK,EAAE,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA;AAC/E;AAEA,SAAS,WAAW,IAAA,EAAoB;AACtC,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,UAAU,CAAA;AAC5C,EAAA,EAAA,CAAG,KAAA,GAAQ,IAAA;AACX,EAAA,EAAA,CAAG,YAAA,CAAa,YAAY,EAAE,CAAA;AAC9B,EAAA,EAAA,CAAG,MAAM,QAAA,GAAW,OAAA;AACpB,EAAA,EAAA,CAAG,MAAM,IAAA,GAAO,SAAA;AAChB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,EAAE,CAAA;AAC5B,EAAA,EAAA,CAAG,MAAA,EAAO;AACV,EAAA,IAAI;AACF,IAAA,QAAA,CAAS,YAAY,MAAM,CAAA;AAAA,EAC7B,CAAA,CAAA,MAAQ;AAAA,EAER;AACA,EAAA,EAAA,CAAG,MAAA,EAAO;AACZ;AAGA,SAAS,SAAS,IAAA,EAAoB;AACpC,EAAA,MAAM,SAAA,GAAY,OAAO,SAAA,KAAc,WAAA,GAAc,UAAU,SAAA,GAAY,MAAA;AAC3E,EAAA,IAAI,SAAA,KAAc,MAAA,IAAa,OAAO,SAAA,CAAU,cAAc,UAAA,EAAY;AACxE,IAAA,KAAK,SAAA,CAAU,SAAA,CAAU,IAAI,CAAA,CAAE,MAAM,MAAM;AACzC,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,IACjB,CAAC,CAAA;AACD,IAAA;AAAA,EACF;AACA,EAAA,UAAA,CAAW,IAAI,CAAA;AACjB;AAgBA,SAAS,gBAAA,CACP,QAAA,EACA,IAAA,EACA,iBAAA,EACA,QAAA,EACwB;AACxB,EAAA,MAAM,MAAA,GAAS,SAAS,KAAA,CAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,KAAK,EAAE,CAAA;AACzD,EAAA,MAAM,SAAA,GAAY,iBAAA,CAAkB,GAAA,CAAI,IAAA,CAAK,EAAE,CAAA;AAC/C,EAAA,MAAM,MAAA,GAAS,QAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,EAAE,CAAA,KAAM,IAAA;AAC7C,EAAA,MAAM,KAAA,GAAgC;AAAA,IACpC;AAAA,MACE,EAAA,EAAI,OAAA;AAAA,MACJ,KAAA,EAAO,OAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,SAAA,CAAU,KAAK,EAAE,CAAA;AAAA,MAC5B;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,kBAAA;AAAA,MACJ,KAAA,EAAO,kBAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,eAAA,CAAgB,KAAK,EAAE,CAAA;AAAA,MAClC;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,QAAA;AAAA,MACJ,KAAA,EAAO,YAAY,iBAAA,GAAe,kBAAA;AAAA,MAClC,QAAA,EAAU,SAAA;AAAA,MACV,UAAU,MAAM;AAGd,QAAA,KAAK,SAAS,UAAA,CAAW,IAAA,CAAK,EAAE,CAAA,CAAE,MAAM,MAAM;AAAA,QAAC,CAAC,CAAA;AAAA,MAClD;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,SAAA;AAAA,MACJ,KAAA,EAAO,SAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,eAAA,CAAgB,EAAE,QAAA,EAAU,EAAE,OAAA,EAAS,CAAC,IAAA,CAAK,EAAE,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE,EAAG,CAAA;AAAA,MACxE;AAAA,KACF;AAAA,IACA,MAAA,GACI;AAAA,MACE,EAAA,EAAI,QAAA;AAAA,MACJ,KAAA,EAAO,qBAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,UAAA,CAAW,KAAK,EAAE,CAAA;AAAA,MAC7B;AAAA,KACF,GACA;AAAA,MACE,EAAA,EAAI,MAAA;AAAA,MACJ,KAAA,EAAO,uBAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,QAAA,CAAS,KAAK,EAAE,CAAA;AAAA,MAC3B;AAAA,KACF;AAAA,IACJ,MAAA,GACI;AAAA,MACE,EAAA,EAAI,OAAA;AAAA,MACJ,KAAA,EAAO,OAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,SAAA,CAAU,KAAK,EAAE,CAAA;AAAA,MAC5B;AAAA,KACF,GACA;AAAA,MACE,EAAA,EAAI,KAAA;AAAA,MACJ,KAAA,EAAO,KAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,EAAE,CAAA;AAAA,MAC1B;AAAA,KACF;AAAA,IACJ;AAAA,MACE,EAAA,EAAI,MAAA;AAAA,MACJ,KAAA,EAAO,MAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,SAAA,CAAU,CAAC,IAAA,CAAK,EAAE,CAAC,CAAA;AAAA,MAC9B;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,SAAA;AAAA,MACJ,KAAA,EAAO,SAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,EAAE,CAAC,CAAA;AAAA,MAC1B;AAAA;AACF,GACF;AACA,EAAA,IAAI,aAAa,IAAA,EAAM;AACrB,IAAA,KAAA,CAAM,IAAA,CAAK;AAAA,MACT,EAAA,EAAI,gBAAA;AAAA,MACJ,KAAA,EAAO,qBAAA;AAAA,MACP,UAAU,MAAM;AAEd,QAAA,QAAA,CAAS,SAAA,CAAU,KAAK,EAAE,CAAA;AAAA,MAC5B;AAAA,KACD,CAAA;AACD,IAAA,IAAI,SAAS,QAAA,KAAa,IAAA,IAAQ,QAAA,CAAS,QAAA,KAAa,KAAK,EAAA,EAAI;AAC/D,MAAA,MAAM,WAAW,QAAA,CAAS,QAAA;AAC1B,MAAA,KAAA,CAAM,IAAA,CAAK;AAAA,QACT,EAAA,EAAI,cAAA;AAAA,QACJ,KAAA,EAAO,mBAAA;AAAA,QACP,UAAU,MAAM;AAEd,UAAA,QAAA,CAAS,UAAU,IAAI,CAAA;AACvB,UAAA,QAAA,CAAS,UAAA,CAAW,QAAA,EAAU,IAAA,CAAK,EAAE,CAAA;AAAA,QACvC;AAAA,OACD,CAAA;AAAA,IACH;AAAA,EACF;AACA,EAAA,OAAO,KAAA;AACT;AAEA,SAAS,sBAAA,CACP,UACA,KAAA,EACwB;AACxB,EAAA,MAAM,KAAA,GAAgC;AAAA,IACpC;AAAA,MACE,EAAA,EAAI,YAAA;AAAA,MACJ,KAAA,EAAO,YAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,SAAA,EAAU;AAAA,MACrB;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,iBAAA;AAAA,MACJ,KAAA,EAAO,iBAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,cAAA,EAAe;AAAA,MAC1B;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAA,EAAI,UAAA;AAAA,MACJ,KAAA,EAAO,UAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,OAAA,EAAQ;AAAA,MACnB;AAAA;AACF,GACF;AACA,EAAA,IAAI,UAAU,IAAA,EAAM;AAClB,IAAA,KAAA,CAAM,IAAA,CAAK;AAAA,MACT,EAAA,EAAI,iBAAA;AAAA,MACJ,KAAA,EAAO,iBAAA;AAAA,MACP,UAAU,MAAM;AACd,QAAA,QAAA,CAAS,cAAA,EAAe;AAAA,MAC1B;AAAA,KACD,CAAA;AAAA,EACH;AACA,EAAA,OAAO,KAAA;AACT;AAEA,IAAM,WAAA,GAAc,CAAC,CAAA,KAA4C,CAAA,CAAE,KAAA;AACnE,IAAM,uBAAA,GAA0B,CAAC,CAAA,KAA4C,CAAA,CAAE,iBAAA;AAI/E,SAAS,gBAAA,CAAoB,UAA4B,QAAA,EAAwC;AAC/F,EAAA,MAAM,SAAA,GAAY,WAAA;AAAA,IAChB,CAAC,QAAA,KAAyB,QAAA,CAAS,KAAA,CAAM,UAAU,QAAQ,CAAA;AAAA,IAC3D,CAAC,QAAQ;AAAA,GACX;AACA,EAAA,MAAM,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AACtB,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,MAAM,WAAA,CAAY,OAAA,CAAQ,QAAA,CAAS,KAAA,CAAM,QAAA,EAAU,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAChG,EAAA,OAAO,oBAAA,CAAqB,SAAA,EAAW,WAAA,EAAa,WAAW,CAAA;AACjE;AAEO,SAAS,iBAAiB,KAAA,EAAmD;AAClF,EAAA,MAAM,QAAA,GAAW,mBAAA,CAAoB,KAAA,CAAM,QAAA,EAAU,oBAAoB,CAAA;AAGzE,EAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,QAAA,EAAU,WAAW,CAAA;AACpD,EAAA,MAAM,iBAAA,GAAoB,gBAAA,CAAiB,QAAA,EAAU,uBAAuB,CAAA;AAE5E,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA2B,IAAI,CAAA;AACvD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAChD,EAAA,MAAM,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,QAAA,GAAW,MAAA,CAA+B,EAAE,CAAA;AAElD,EAAA,MAAM,eAAA,GAAkB,OAA2B,IAAI,CAAA;AAIvD,EAAA,MAAM,aAAA,GAAgB,OAAsB,IAAI,CAAA;AAEhD,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,CAAC,YAAA,KAAgC;AACzD,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,MAAM,KAAK,eAAA,CAAgB,OAAA;AAC3B,IAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAC1B,IAAA,IAAI,gBAAgB,EAAA,KAAO,IAAA,IAAQ,EAAA,CAAG,WAAA,KAAgB,KAAA,EAAM;AAAA,EAC9D,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,GAAA,GAAM,QAAA,CAAS,EAAA,CAAG,aAAA,EAAe,CAAC,OAAA,KAAY;AAClD,MAAA,eAAA,CAAgB,OAAA,GACd,OAAO,QAAA,KAAa,WAAA,IAAe,SAAS,aAAA,YAAyB,WAAA,GACjE,SAAS,aAAA,GACT,IAAA;AACN,MAAA,OAAA,CAAQ,EAAE,MAAA,EAAQ,OAAA,CAAQ,QAAQ,MAAA,EAAQ,OAAA,CAAQ,QAAQ,CAAA;AAC1D,MAAA,cAAA,CAAe,CAAC,CAAA;AAAA,IAClB,CAAC,CAAA;AACD,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAIb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,KAAS,MAAM,OAAO,MAAA;AAC1B,IAAA,MAAM,gBAAA,GAAmB,CAAC,CAAA,KAAmB;AAC3C,MAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,MAAA,IAAI,IAAA,KAAS,QAAQ,CAAA,CAAE,MAAA,YAAkB,QAAQ,IAAA,CAAK,QAAA,CAAS,CAAA,CAAE,MAAM,CAAA,EAAG;AAC1E,MAAA,KAAA,CAAM,KAAK,CAAA;AAAA,IACb,CAAA;AACA,IAAA,MAAM,eAAe,MAAY;AAC/B,MAAA,KAAA,CAAM,KAAK,CAAA;AAAA,IACb,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAA,EAAe,gBAAA,EAAkB,IAAI,CAAA;AAC/D,IAAA,MAAA,CAAO,gBAAA,CAAiB,QAAQ,YAAY,CAAA;AAC5C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAA,EAAe,gBAAA,EAAkB,IAAI,CAAA;AAClE,MAAA,MAAA,CAAO,mBAAA,CAAoB,QAAQ,YAAY,CAAA;AAAA,IACjD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,KAAK,CAAC,CAAA;AAGhB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,IAAA,EAAM;AACnB,IAAA,MAAM,EAAA,GAAK,SAAS,OAAA,CAAQ,WAAW,KAAK,QAAA,CAAS,OAAA,CAAQ,CAAC,CAAA,IAAK,OAAA,CAAQ,OAAA;AAC3E,IAAA,EAAA,EAAI,KAAA,EAAM;AAAA,EACZ,CAAA,EAAG,CAAC,IAAA,EAAM,WAAW,CAAC,CAAA;AAEtB,EAAA,IAAI,IAAA,KAAS,MAAM,OAAO,IAAA;AAE1B,EAAA,MAAM,aAAa,KAAA,CAAM,UAAA;AACzB,EAAA,MAAM,YAAA,GACJ,IAAA,CAAK,MAAA,CAAO,IAAA,KAAS,MAAA,GACjB,gBAAA;AAAA,IACE,QAAA;AAAA,IACA,KAAK,MAAA,CAAO,IAAA;AAAA,IACZ,iBAAA;AAAA,IACA,eAAe,MAAA,GACX;AAAA,MACE,UAAA;AAAA,MACA,UAAU,aAAA,CAAc,OAAA;AAAA,MACxB,SAAA,EAAW,CAAC,EAAA,KAAO;AACjB,QAAA,aAAA,CAAc,OAAA,GAAU,EAAA;AAAA,MAC1B;AAAA,KACF,GACA;AAAA,GACN,GACA,sBAAA,CAAuB,QAAA,EAAU,KAAK,CAAA;AAC5C,EAAA,MAAM,KAAA,GACJ,KAAA,CAAM,WAAA,KAAgB,MAAA,GAClB,KAAA,CAAM,WAAA,CAAY,EAAE,MAAA,EAAQ,IAAA,CAAK,MAAA,EAAQ,YAAA,EAAc,CAAA,GACvD,YAAA;AACN,EAAA,MAAM,OAAA,GAAU,KAAK,MAAA,CAAO,IAAA,KAAS,SAAS,aAAA,CAAc,IAAA,CAAK,MAAA,CAAO,IAAI,CAAA,GAAI,IAAA;AAEhF,EAAA,MAAM,QAAA,GAAW,CAAC,IAAA,KAAqC;AACrD,IAAA,KAAA,CAAM,IAAI,CAAA;AACV,IAAA,IAAA,CAAK,QAAA,EAAS;AAAA,EAChB,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAgD;AACjE,IAAA,MAAM,QAAQ,KAAA,CAAM,MAAA;AACpB,IAAA,QAAQ,EAAE,GAAA;AAAK,MACb,KAAK,WAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,cAAA,CAAe,CAAC,CAAA,KAAO,KAAA,KAAU,IAAI,CAAA,GAAA,CAAK,CAAA,GAAI,KAAK,KAAM,CAAA;AACzD,QAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,cAAA,CAAe,CAAC,MAAO,KAAA,KAAU,CAAA,GAAI,KAAK,CAAA,GAAI,CAAA,GAAI,SAAS,KAAM,CAAA;AACjE,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,cAAA,CAAe,CAAC,CAAA;AAChB,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,cAAA,CAAe,KAAA,KAAU,CAAA,GAAI,CAAA,GAAI,KAAA,GAAQ,CAAC,CAAA;AAC1C,QAAA;AAAA,MACF,KAAK,OAAA;AAAA,MACL,KAAK,GAAA,EAAK;AACR,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,MAAM,IAAA,GAAO,MAAM,WAAW,CAAA;AAC9B,QAAA,IAAI,SAAS,MAAA,IAAa,IAAA,CAAK,QAAA,KAAa,IAAA,WAAe,IAAI,CAAA;AAC/D,QAAA;AAAA,MACF;AAAA,MACA,KAAK,QAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,KAAA,CAAM,IAAI,CAAA;AACV,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA;AAEA;AACJ,EACF,CAAA;AAEA,EAAA,MAAM,aAAA,GAA+B;AAAA,IACnC,QAAA,EAAU,UAAA;AAAA,IACV,IAAA,EAAM,IAAA,CAAK,MAAA,CAAO,CAAC,CAAA;AAAA,IACnB,GAAA,EAAK,IAAA,CAAK,MAAA,CAAO,CAAC;AAAA,GACpB;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,yBAAA,EAAwB,EAAA;AAAA,MACxB,IAAA,EAAK,MAAA;AAAA,MACL,cAAY,OAAA,IAAW,OAAA;AAAA,MACvB,QAAA,EAAU,EAAA;AAAA,MACV,WAAW,KAAA,CAAM,SAAA;AAAA,MACjB,OACE,KAAA,CAAM,SAAA,KAAc,SAChB,EAAE,GAAG,eAAe,GAAG,KAAA,CAAM,KAAA,EAAM,GACnC,EAAE,GAAG,WAAA,EAAa,GAAG,aAAA,EAAe,GAAG,MAAM,KAAA,EAAM;AAAA,MAEzD,SAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,KAAY,IAAA;AAAA;AAAA,0BAEX,GAAA,CAAC,SAAI,iCAAA,EAAgC,EAAA,EAAG,MAAK,cAAA,EAAe,KAAA,EAAO,eAChE,QAAA,EAAA,OAAA,EACH;AAAA,YACE,IAAA;AAAA,QACH,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBAChB,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,GAAA,EAAK,CAAC,EAAA,KAAO;AACX,cAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,GAAI,EAAA;AAAA,YAC5B,CAAA;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,UAAA;AAAA,YACL,gCAA8B,IAAA,CAAK,EAAA;AAAA,YACnC,QAAA,EAAU,KAAA,KAAU,WAAA,GAAc,CAAA,GAAI,EAAA;AAAA,YACtC,QAAA,EAAU,KAAK,QAAA,KAAa,IAAA;AAAA,YAC5B,WAAW,KAAA,CAAM,aAAA;AAAA,YACjB,KAAA,EAAO,KAAA,CAAM,aAAA,KAAkB,MAAA,GAAY,MAAA,GAAY,UAAA;AAAA,YACvD,SAAS,MAAM;AACb,cAAA,IAAI,IAAA,CAAK,QAAA,KAAa,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA;AAAA,YAC3C,CAAA;AAAA,YACA,gBAAgB,MAAM;AACpB,cAAA,cAAA,CAAe,KAAK,CAAA;AAAA,YACtB,CAAA;AAAA,YAEC,QAAA,EAAA,IAAA,CAAK;AAAA,WAAA;AAAA,UAlBD,IAAA,CAAK;AAAA,SAoBb;AAAA;AAAA;AAAA,GACH;AAEJ","file":"ContextMenu.js","sourcesContent":["/**\n * <GraphContextMenu> — §16.4 right-click / long-press menu (S7-T08).\n *\n * Listens to the instance's typed 'contextMenu' event (the ONLY channel — the\n * instance has no openContextMenu method) and renders a portal-free,\n * absolutely-positioned menu at the event's container-relative screen\n * coordinates, so it must be composed inside the <Graph> container (or any\n * positioned ancestor sharing the canvas coordinate space).\n *\n * Fully keyboard reachable: the menu opens focused on its first item,\n * ArrowUp/ArrowDown rove (wrapping), Enter/Space activates, Escape closes and\n * returns focus to the previously focused element; it also closes on outside\n * pointerdown and window blur. All target-derived text (the node label\n * heading) renders as TEXT NODES — never markup.\n *\n * §16.2 path pair (S12-T08): with `onFindPath` provided, node menus carry\n * 'Find path from here' / 'Find path to here'. The pending 'from' anchor is\n * stashed locally in the component (session-local); completing the pair\n * fires `onFindPath(anchorId, targetId)` and clears the anchor.\n */\n\nimport { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactElement } from 'react';\nimport type { GraphNode, GraphStoreState, NodeId, SubgraphSpec } from '@modernrelay/orbit-core';\nimport type { AnyGraphInstance } from '../../GraphProvider';\nimport { useResolvedInstance } from '../shared';\n\n/** The typed 'contextMenu' event target (generics erased like AnyGraphInstance). */\nexport type GraphContextMenuTarget =\n  | { kind: 'node'; node: GraphNode<any> }\n  | { kind: 'background' };\n\nexport interface GraphContextMenuItem {\n  /** Stable key; default items use 'focus' | 'select-neighbors' | 'expand' |\n   * 'isolate' | 'fold' | 'unfold' | 'pin' | 'unpin' | 'hide' | 'copy-id' |\n   * 'find-path-from' | 'find-path-to' | 'select-all' | 'clear-selection' |\n   * 'fit-view' | 'reset-isolation'. */\n  id: string;\n  /** Rendered as a text node. */\n  label: string;\n  disabled?: boolean;\n  onSelect(): void;\n}\n\n/** Pinned-interface alias (§16.4 render-prop item type). */\nexport type MenuItem = GraphContextMenuItem;\n\nexport interface GraphContextMenuProps {\n  /** Explicit instance; defaults to the ambient <Graph>/<GraphProvider> one. */\n  instance?: AnyGraphInstance;\n  /** Class hook for the menu root; providing it drops the default chrome\n   * (positioning is always applied). */\n  className?: string;\n  style?: CSSProperties;\n  /** Class hook for each item; providing it drops the default item styles. */\n  itemClassName?: string;\n  /** Render-prop REPLACEMENT for the item list; receives the default items\n   * so extension is `[...defaultItems, mine]`. */\n  renderItems?: (ctx: {\n    target: GraphContextMenuTarget;\n    defaultItems: readonly GraphContextMenuItem[];\n  }) => readonly GraphContextMenuItem[];\n  /**\n   * §16.2 path pair (S12-T08): providing this adds 'Find path from here' /\n   * 'Find path to here' to node menus. 'From here' stashes the anchor node\n   * id locally (component state — session-local, never serialized); 'to\n   * here' appears once an anchor exists on a DIFFERENT node, fires\n   * `(anchorId, targetId)`, and clears the anchor. The component never\n   * resolves paths itself — wire this to the ref API's findPath.\n   */\n  onFindPath?: (sourceId: NodeId, targetId: NodeId) => void;\n}\n\ninterface OpenState {\n  target: GraphContextMenuTarget;\n  /** Container-relative CSS px (event contract §15). */\n  screen: readonly [number, number];\n}\n\n// --- default dark-theme styling (dropped when class hooks are provided) ---\n\nconst MENU_CHROME: CSSProperties = {\n  minWidth: 160,\n  display: 'flex',\n  flexDirection: 'column',\n  padding: 4,\n  borderRadius: 8,\n  background: 'rgba(23, 25, 32, 0.96)',\n  border: '1px solid rgba(255, 255, 255, 0.14)',\n  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.5)',\n  color: '#e8eaf0',\n  font: '13px/1.4 system-ui, sans-serif',\n  zIndex: 10,\n};\n\nconst HEADING_STYLE: CSSProperties = {\n  padding: '4px 10px',\n  fontSize: 11,\n  opacity: 0.65,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: 240,\n};\n\nconst ITEM_STYLE: CSSProperties = {\n  appearance: 'none',\n  display: 'block',\n  width: '100%',\n  textAlign: 'left',\n  background: 'transparent',\n  border: 'none',\n  borderRadius: 6,\n  color: 'inherit',\n  cursor: 'pointer',\n  font: 'inherit',\n  padding: '6px 10px',\n};\n\n/** Same derivation as the core §14 label default: `attrs.label ?? id`. */\nfunction nodeLabelText(node: GraphNode<any>): string {\n  const attrs = node.attrs as Record<string, unknown> | undefined;\n  const label = attrs?.['label'];\n  return label === undefined || label === null ? String(node.id) : String(label);\n}\n\nfunction legacyCopy(text: string): void {\n  if (typeof document === 'undefined') return;\n  const ta = document.createElement('textarea');\n  ta.value = text;\n  ta.setAttribute('readonly', '');\n  ta.style.position = 'fixed';\n  ta.style.left = '-9999px';\n  document.body.appendChild(ta);\n  ta.select();\n  try {\n    document.execCommand('copy');\n  } catch {\n    /* copy unavailable in this environment */\n  }\n  ta.remove();\n}\n\n/** navigator.clipboard.writeText with the execCommand('copy') fallback. */\nfunction copyText(text: string): void {\n  const clipboard = typeof navigator !== 'undefined' ? navigator.clipboard : undefined;\n  if (clipboard !== undefined && typeof clipboard.writeText === 'function') {\n    void clipboard.writeText(text).catch(() => {\n      legacyCopy(text);\n    });\n    return;\n  }\n  legacyCopy(text);\n}\n\n/** §16.2 path-pair state threaded into the node items when the host\n * provided `onFindPath` (null otherwise — the items don't render). */\ninterface PathPairContext {\n  onFindPath: (sourceId: NodeId, targetId: NodeId) => void;\n  anchorId: NodeId | null;\n  setAnchor: (id: NodeId | null) => void;\n}\n\n/** Default node-target items. Pin/Unpin toggles on the store's pin slice at\n * open/render time; Expand shows a busy state while the node's expansion is\n * in flight (§9.2 pendingExpansions); Isolate hard-scopes to the node's\n * 1-hop ego network (§9.2); Collapse/Expand folds the node's neighbourhood\n * behind it (§16.3 — containment, distinct from Expand neighbors, which\n * fetches). */\nfunction defaultNodeItems(\n  instance: AnyGraphInstance,\n  node: GraphNode<any>,\n  pendingExpansions: ReadonlySet<NodeId>,\n  pathPair: PathPairContext | null,\n): GraphContextMenuItem[] {\n  const pinned = instance.store.getState().pins.has(node.id);\n  const expanding = pendingExpansions.has(node.id);\n  const folded = instance.getFold(node.id) !== null;\n  const items: GraphContextMenuItem[] = [\n    {\n      id: 'focus',\n      label: 'Focus',\n      onSelect: () => {\n        instance.focusNode(node.id);\n      },\n    },\n    {\n      id: 'select-neighbors',\n      label: 'Select neighbors',\n      onSelect: () => {\n        instance.selectNeighbors(node.id);\n      },\n    },\n    {\n      id: 'expand',\n      label: expanding ? 'Expanding…' : 'Expand neighbors',\n      disabled: expanding,\n      onSelect: () => {\n        // A discard/collapse rejects the promise by design (§9.2); the menu\n        // fires-and-forgets, so swallow it here — diagnostics carry the why.\n        void instance.expandNode(node.id).catch(() => {});\n      },\n    },\n    {\n      id: 'isolate',\n      label: 'Isolate',\n      onSelect: () => {\n        instance.applyHostUpdate({ subgraph: { seedIds: [node.id], hops: 1 } });\n      },\n    },\n    folded\n      ? {\n          id: 'unfold',\n          label: 'Expand neighborhood',\n          onSelect: () => {\n            instance.unfoldNode(node.id);\n          },\n        }\n      : {\n          id: 'fold',\n          label: 'Collapse neighborhood',\n          onSelect: () => {\n            instance.foldNode(node.id);\n          },\n        },\n    pinned\n      ? {\n          id: 'unpin',\n          label: 'Unpin',\n          onSelect: () => {\n            instance.unpinNode(node.id);\n          },\n        }\n      : {\n          id: 'pin',\n          label: 'Pin',\n          onSelect: () => {\n            instance.pinNode(node.id);\n          },\n        },\n    {\n      id: 'hide',\n      label: 'Hide',\n      onSelect: () => {\n        instance.hideNodes([node.id]);\n      },\n    },\n    {\n      id: 'copy-id',\n      label: 'Copy id',\n      onSelect: () => {\n        copyText(String(node.id));\n      },\n    },\n  ];\n  if (pathPair !== null) {\n    items.push({\n      id: 'find-path-from',\n      label: 'Find path from here',\n      onSelect: () => {\n        // Re-selecting on another node re-anchors (last 'from' wins).\n        pathPair.setAnchor(node.id);\n      },\n    });\n    if (pathPair.anchorId !== null && pathPair.anchorId !== node.id) {\n      const anchorId = pathPair.anchorId;\n      items.push({\n        id: 'find-path-to',\n        label: 'Find path to here',\n        onSelect: () => {\n          // A completed pair consumes the anchor (one findPath per pair).\n          pathPair.setAnchor(null);\n          pathPair.onFindPath(anchorId, node.id);\n        },\n      });\n    }\n  }\n  return items;\n}\n\nfunction defaultBackgroundItems(\n  instance: AnyGraphInstance,\n  scope: SubgraphSpec | null,\n): GraphContextMenuItem[] {\n  const items: GraphContextMenuItem[] = [\n    {\n      id: 'select-all',\n      label: 'Select all',\n      onSelect: () => {\n        instance.selectAll();\n      },\n    },\n    {\n      id: 'clear-selection',\n      label: 'Clear selection',\n      onSelect: () => {\n        instance.clearSelection();\n      },\n    },\n    {\n      id: 'fit-view',\n      label: 'Fit view',\n      onSelect: () => {\n        instance.fitView();\n      },\n    },\n  ];\n  if (scope !== null) {\n    items.push({\n      id: 'reset-isolation',\n      label: 'Reset isolation',\n      onSelect: () => {\n        instance.resetIsolation();\n      },\n    });\n  }\n  return items;\n}\n\nconst selectScope = (s: GraphStoreState): SubgraphSpec | null => s.scope;\nconst selectPendingExpansions = (s: GraphStoreState): ReadonlySet<NodeId> => s.pendingExpansions;\n\n/** Store slice subscription local to this component (the ambient hooks in\n * ../hooks require the provider; here the instance may be an explicit prop). */\nfunction useInstanceStore<T>(instance: AnyGraphInstance, selector: (s: GraphStoreState) => T): T {\n  const subscribe = useCallback(\n    (onChange: () => void) => instance.store.subscribe(onChange),\n    [instance],\n  );\n  const selectorRef = useRef(selector);\n  selectorRef.current = selector;\n  const getSnapshot = useCallback(() => selectorRef.current(instance.store.getState()), [instance]);\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\nexport function GraphContextMenu(props: GraphContextMenuProps): ReactElement | null {\n  const instance = useResolvedInstance(props.instance, '<GraphContextMenu>');\n  // §9.2 state the default items reflect live while the menu is open: the\n  // expand item's busy flag and the background reset-isolation gate.\n  const scope = useInstanceStore(instance, selectScope);\n  const pendingExpansions = useInstanceStore(instance, selectPendingExpansions);\n\n  const [open, setOpen] = useState<OpenState | null>(null);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const itemRefs = useRef<(HTMLElement | null)[]>([]);\n  /** Element focused when the menu opened; Escape/activation restores it. */\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n  /** §16.2 pending 'Find path from here' anchor. A ref, not state: it only\n   * changes via item activation, which closes the menu — the next open\n   * re-renders and reads it fresh. Session-local, never serialized. */\n  const pathAnchorRef = useRef<NodeId | null>(null);\n\n  const close = useCallback((restoreFocus: boolean): void => {\n    setOpen(null);\n    const el = restoreFocusRef.current;\n    restoreFocusRef.current = null;\n    if (restoreFocus && el !== null && el.isConnected) el.focus();\n  }, []);\n\n  // The typed 'contextMenu' event is the only open channel.\n  useEffect(() => {\n    const off = instance.on('contextMenu', (payload) => {\n      restoreFocusRef.current =\n        typeof document !== 'undefined' && document.activeElement instanceof HTMLElement\n          ? document.activeElement\n          : null;\n      setOpen({ target: payload.target, screen: payload.screen });\n      setActiveIndex(0);\n    });\n    return off;\n  }, [instance]);\n\n  // Outside pointerdown (capture, so it runs before anything swallows it) and\n  // window blur both dismiss without stealing focus back.\n  useEffect(() => {\n    if (open === null) return undefined;\n    const onDocPointerDown = (e: Event): void => {\n      const root = rootRef.current;\n      if (root !== null && e.target instanceof Node && root.contains(e.target)) return;\n      close(false);\n    };\n    const onWindowBlur = (): void => {\n      close(false);\n    };\n    document.addEventListener('pointerdown', onDocPointerDown, true);\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      document.removeEventListener('pointerdown', onDocPointerDown, true);\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [open, close]);\n\n  // The menu opens focused; roving focus follows activeIndex.\n  useEffect(() => {\n    if (open === null) return;\n    const el = itemRefs.current[activeIndex] ?? itemRefs.current[0] ?? rootRef.current;\n    el?.focus();\n  }, [open, activeIndex]);\n\n  if (open === null) return null;\n\n  const onFindPath = props.onFindPath;\n  const defaultItems =\n    open.target.kind === 'node'\n      ? defaultNodeItems(\n          instance,\n          open.target.node,\n          pendingExpansions,\n          onFindPath !== undefined\n            ? {\n                onFindPath,\n                anchorId: pathAnchorRef.current,\n                setAnchor: (id) => {\n                  pathAnchorRef.current = id;\n                },\n              }\n            : null,\n        )\n      : defaultBackgroundItems(instance, scope);\n  const items =\n    props.renderItems !== undefined\n      ? props.renderItems({ target: open.target, defaultItems })\n      : defaultItems;\n  const heading = open.target.kind === 'node' ? nodeLabelText(open.target.node) : null;\n\n  const activate = (item: GraphContextMenuItem): void => {\n    close(true);\n    item.onSelect();\n  };\n\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    const count = items.length;\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        setActiveIndex((i) => (count === 0 ? 0 : (i + 1) % count));\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        setActiveIndex((i) => (count === 0 ? 0 : (i - 1 + count) % count));\n        break;\n      case 'Home':\n        e.preventDefault();\n        setActiveIndex(0);\n        break;\n      case 'End':\n        e.preventDefault();\n        setActiveIndex(count === 0 ? 0 : count - 1);\n        break;\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        const item = items[activeIndex];\n        if (item !== undefined && item.disabled !== true) activate(item);\n        break;\n      }\n      case 'Escape':\n        e.preventDefault();\n        close(true);\n        break;\n      case 'Tab':\n        e.preventDefault(); // focus stays inside the menu while open\n        break;\n      default:\n        break;\n    }\n  };\n\n  const positionStyle: CSSProperties = {\n    position: 'absolute',\n    left: open.screen[0],\n    top: open.screen[1],\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      data-orbit-context-menu=\"\"\n      role=\"menu\"\n      aria-label={heading ?? 'Graph'}\n      tabIndex={-1}\n      className={props.className}\n      style={\n        props.className !== undefined\n          ? { ...positionStyle, ...props.style }\n          : { ...MENU_CHROME, ...positionStyle, ...props.style }\n      }\n      onKeyDown={onKeyDown}\n    >\n      {heading !== null ? (\n        // Target-derived text renders as a TEXT NODE (§14/§15 injection ban).\n        <div data-orbit-context-menu-heading=\"\" role=\"presentation\" style={HEADING_STYLE}>\n          {heading}\n        </div>\n      ) : null}\n      {items.map((item, index) => (\n        <button\n          key={item.id}\n          ref={(el) => {\n            itemRefs.current[index] = el;\n          }}\n          type=\"button\"\n          role=\"menuitem\"\n          data-orbit-context-menu-item={item.id}\n          tabIndex={index === activeIndex ? 0 : -1}\n          disabled={item.disabled === true}\n          className={props.itemClassName}\n          style={props.itemClassName !== undefined ? undefined : ITEM_STYLE}\n          onClick={() => {\n            if (item.disabled !== true) activate(item);\n          }}\n          onPointerEnter={() => {\n            setActiveIndex(index);\n          }}\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/components/Histogram.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactElement } from 'react';
+import { A as AnyGraphInstance } from '../GraphProvider-B8ITDXS0.js';
+import '@modernrelay/orbit-core';
+
+/**
+ * <GraphHistogram> — §16.6 crossfilter histogram (S9).
+ *
+ * SVG dual-layer bar chart over one crossfilter dimension: total bars
+ * (muted) with the joint-filtered layer (accent) overlaid. Numeric/temporal
+ * dimensions brush by pointer-drag over the plot (any drag REPLACES the
+ * brush), double-click clears, ArrowLeft/ArrowRight nudge the window by one
+ * bin, Escape clears (the plot is focusable). Categorical dimensions render
+ * clickable rows toggling category exclusions. All text values (dimension
+ * key, category keys) render as TEXT NODES. Headless-styleable: providing
+ * `className` drops the built-in dark-theme inline styles.
+ */
+
+interface GraphHistogramProps {
+    /** Crossfilter dimension key (must appear in the `crossfilter` prop). */
+    dimension: string;
+    /** Plot height in CSS px. Default 96. */
+    height?: number;
+    /** Explicit instance; defaults to the ambient <Graph>/<GraphProvider> one. */
+    instance?: AnyGraphInstance;
+    /** Class hook for the root; providing it drops the default styles. */
+    className?: string;
+    style?: CSSProperties;
+    /** Class hook for each categorical row; providing it drops its defaults. */
+    categoryClassName?: string;
+}
+declare function GraphHistogram(props: GraphHistogramProps): ReactElement;
+
+export { GraphHistogram, type GraphHistogramProps };

package/dist/components/Histogram.js

@@ -0,0 +1,216 @@
+import { useRangeBrush, brushRangePct, sliderValueText, sliderValueNow, toggleCategoryExclusion } from '../chunk-DGFLU2SN.js';
+import { useCrossfilterDimension, useSessionSetBrush } from '../chunk-JN7QCMFW.js';
+import { useResolvedInstance } from '../chunk-7XB47YST.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ROOT_STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  padding: 8,
+  borderRadius: 8,
+  background: "rgba(23, 25, 32, 0.92)",
+  border: "1px solid rgba(255, 255, 255, 0.14)",
+  color: "#e8eaf0",
+  font: "12px/1.4 system-ui, sans-serif"
+};
+var TITLE_STYLE = { opacity: 0.75 };
+var PLOT_STYLE = {
+  position: "relative",
+  cursor: "crosshair",
+  touchAction: "none",
+  userSelect: "none"
+};
+var SVG_STYLE = { display: "block", width: "100%" };
+var CATEGORY_ROW_STYLE = {
+  appearance: "none",
+  display: "flex",
+  justifyContent: "space-between",
+  gap: 8,
+  background: "transparent",
+  border: "none",
+  borderRadius: 4,
+  color: "inherit",
+  cursor: "pointer",
+  font: "inherit",
+  padding: "2px 4px",
+  textAlign: "left"
+};
+var EXCLUDED_ROW_STYLE = {
+  ...CATEGORY_ROW_STYLE,
+  opacity: 0.45,
+  textDecoration: "line-through"
+};
+var TOTAL_FILL = "rgba(148, 163, 184, 0.35)";
+var FILTERED_FILL = "#7aa2ff";
+var BRUSH_FILL = "rgba(122, 162, 255, 0.18)";
+var BRUSH_STROKE = "rgba(122, 162, 255, 0.85)";
+function GraphHistogram(props) {
+  const instance = useResolvedInstance(props.instance, "<GraphHistogram>");
+  const { summary, brush } = useCrossfilterDimension(instance, props.dimension);
+  const setBrush = useSessionSetBrush(instance, props.dimension);
+  const domain = summary?.domain ?? null;
+  const handlers = useRangeBrush({
+    domain,
+    binCount: summary?.bins.length ?? 0,
+    brush,
+    setBrush
+  });
+  const styled = props.className === void 0;
+  const height = props.height ?? 96;
+  const categorical = summary !== null && summary.kind === "categorical";
+  const range = brushRangePct(brush, domain);
+  const renderCategory = (cat, maxTotal) => {
+    const pct = maxTotal > 0 ? Math.round(cat.filtered / maxTotal * 100) : 0;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-orbit-histogram-category": cat.key,
+        "aria-pressed": cat.excluded,
+        "aria-label": `Toggle category ${cat.key}`,
+        className: props.categoryClassName,
+        style: props.categoryClassName !== void 0 ? void 0 : cat.excluded ? EXCLUDED_ROW_STYLE : CATEGORY_ROW_STYLE,
+        onClick: () => {
+          setBrush(toggleCategoryExclusion(brush, cat.key));
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { "data-orbit-histogram-category-label": "", children: cat.key }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-orbit-histogram-category-count": "",
+              "aria-hidden": "true",
+              style: props.categoryClassName !== void 0 ? void 0 : {
+                background: `linear-gradient(to right, ${FILTERED_FILL}33 ${pct}%, transparent ${pct}%)`,
+                borderRadius: 2,
+                padding: "0 4px"
+              },
+              children: [
+                cat.filtered,
+                "/",
+                cat.total
+              ]
+            }
+          )
+        ]
+      },
+      cat.key
+    );
+  };
+  let body;
+  if (summary === null) {
+    body = /* @__PURE__ */ jsx("div", { "data-orbit-histogram-empty": "", style: styled ? TITLE_STYLE : void 0, children: "No data" });
+  } else if (categorical) {
+    const maxTotal = summary.categories.reduce((m, c) => c.total > m ? c.total : m, 0);
+    body = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-orbit-histogram-categories": "",
+        style: styled ? { display: "flex", flexDirection: "column" } : void 0,
+        children: summary.categories.map((cat) => renderCategory(cat, maxTotal))
+      }
+    );
+  } else {
+    const bins = summary.bins;
+    const maxTotal = bins.reduce((m, b) => b.total > m ? b.total : m, 0);
+    const barW = bins.length > 0 ? 100 / bins.length : 100;
+    body = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-orbit-histogram-plot": "",
+        tabIndex: 0,
+        "aria-label": `${props.dimension} brush: drag to filter, arrow keys nudge, Escape clears`,
+        role: "slider",
+        "aria-orientation": "horizontal",
+        "aria-valuemin": summary.domain?.min ?? 0,
+        "aria-valuemax": summary.domain?.max ?? 0,
+        "aria-valuenow": sliderValueNow(brush, summary.domain),
+        "aria-valuetext": sliderValueText(brush, summary.domain),
+        style: styled ? PLOT_STYLE : void 0,
+        onPointerDown: handlers.onPointerDown,
+        onPointerMove: handlers.onPointerMove,
+        onPointerUp: handlers.onPointerUp,
+        onPointerCancel: handlers.onPointerCancel,
+        onDoubleClick: handlers.onDoubleClick,
+        onKeyDown: handlers.onKeyDown,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height,
+            viewBox: "0 0 100 100",
+            preserveAspectRatio: "none",
+            "aria-hidden": "true",
+            focusable: "false",
+            style: styled ? SVG_STYLE : void 0,
+            children: [
+              bins.map((bin, i) => {
+                const x = i * barW + barW * 0.05;
+                const w = barW * 0.9;
+                const totalH = maxTotal > 0 ? bin.total / maxTotal * 100 : 0;
+                const filteredH = maxTotal > 0 ? bin.filtered / maxTotal * 100 : 0;
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      "data-orbit-histogram-bar-total": "",
+                      x,
+                      y: 100 - totalH,
+                      width: w,
+                      height: totalH,
+                      fill: TOTAL_FILL
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      "data-orbit-histogram-bar-filtered": "",
+                      x,
+                      y: 100 - filteredH,
+                      width: w,
+                      height: filteredH,
+                      fill: FILTERED_FILL
+                    }
+                  )
+                ] }, i);
+              }),
+              range !== null ? /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  "data-orbit-histogram-brush": "",
+                  x: range.leftPct,
+                  y: 0,
+                  width: range.widthPct,
+                  height: 100,
+                  fill: BRUSH_FILL,
+                  stroke: BRUSH_STROKE,
+                  strokeWidth: 0.5,
+                  pointerEvents: "none"
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-orbit-histogram": props.dimension,
+      role: "group",
+      "aria-label": `${props.dimension} histogram`,
+      className: props.className,
+      style: styled ? { ...ROOT_STYLE, ...props.style } : props.style,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-orbit-histogram-title": "", style: styled ? TITLE_STYLE : void 0, children: props.dimension }),
+        body
+      ]
+    }
+  );
+}
+
+export { GraphHistogram };
+//# sourceMappingURL=Histogram.js.map
+//# sourceMappingURL=Histogram.js.map