@modernrelay/orbit-react 0.2.0

package/dist/index.js

@@ -0,0 +1,827 @@
+import { setSearchResultUnavailableCallback, useScaleInfoSubscription } from './chunk-QJ7JXQVK.js';
+export { useGraphCrossfilter, useGraphDiagnostics, useGraphEdgeHover, useGraphHistory, useGraphHover, useGraphInstance, useGraphOverlays, useGraphPendingExpansions, useGraphPins, useGraphScope, useGraphSearch, useGraphSelection, useGraphSimulationRunning, useGraphStatus, useGraphTheme, useGraphTimeline, useGraphViewport, useGraphVisible } from './chunk-QJ7JXQVK.js';
+import './chunk-JN7QCMFW.js';
+import { overlayLayerStyle, overlaySurface, GraphProvider, visuallyHiddenStyle, useAmbientGraphInstance } from './chunk-7XB47YST.js';
+export { DEFAULT_CORNER_OFFSET, GraphProvider, useResolvedInstance } from './chunk-7XB47YST.js';
+import { forwardRef, useState, useRef, useLayoutEffect, useEffect, useImperativeHandle, useId, useCallback, useMemo } from 'react';
+import { createGraphInstance, canonicalJson, sameGroupSpecArrays, canonicalScaleKey } from '@modernrelay/orbit-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var OVERLAY_BASE = {
+  position: "absolute",
+  inset: 0,
+  touchAction: "none",
+  userSelect: "none"
+};
+var OVERLAY_INACTIVE = { ...OVERLAY_BASE, pointerEvents: "none" };
+var OVERLAY_ACTIVE = {
+  ...OVERLAY_BASE,
+  pointerEvents: "auto",
+  cursor: "crosshair"
+};
+var SVG_STYLE = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+  overflow: "visible"
+};
+function toPathData(points) {
+  let d = `M ${points[0][0]} ${points[0][1]}`;
+  for (let i = 1; i < points.length; i++) d += ` L ${points[i][0]} ${points[i][1]}`;
+  return points.length >= 3 ? `${d} Z` : d;
+}
+function scheduleFrame(cb) {
+  if (typeof requestAnimationFrame === "function") return requestAnimationFrame(cb);
+  cb();
+  return null;
+}
+function cancelFrame(id) {
+  if (id !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(id);
+}
+function capturePointer(el, pointerId) {
+  if (typeof el.setPointerCapture === "function") {
+    try {
+      el.setPointerCapture(pointerId);
+    } catch {
+    }
+  }
+}
+function releasePointer(el, pointerId) {
+  if (typeof el.releasePointerCapture === "function") {
+    try {
+      el.releasePointerCapture(pointerId);
+    } catch {
+    }
+  }
+}
+function Lasso() {
+  const instance = useAmbientGraphInstance("Lasso");
+  const overlayRef = useRef(null);
+  const dragRef = useRef(null);
+  const [shiftHeld, setShiftHeld] = useState(false);
+  const [preview, setPreview] = useState(null);
+  const releaseDrag = useCallback(() => {
+    const drag = dragRef.current;
+    if (drag === null) return;
+    dragRef.current = null;
+    cancelFrame(drag.frame);
+    const el = overlayRef.current;
+    if (el !== null) releasePointer(el, drag.pointerId);
+    setPreview(null);
+  }, []);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.key === "Shift") setShiftHeld(true);
+      else if (e.key === "Escape") releaseDrag();
+    };
+    const onKeyUp = (e) => {
+      if (e.key === "Shift") setShiftHeld(false);
+    };
+    const onBlur = () => setShiftHeld(false);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", onBlur);
+      releaseDrag();
+    };
+  }, [releaseDrag]);
+  const localPoint = (e) => {
+    const el = overlayRef.current;
+    if (el === null) return [e.clientX, e.clientY];
+    const rect = el.getBoundingClientRect();
+    return [e.clientX - rect.left, e.clientY - rect.top];
+  };
+  const commitPending = (drag) => {
+    if (drag.pending === null) return;
+    drag.points.push(drag.pending);
+    drag.pending = null;
+    setPreview([...drag.points]);
+  };
+  const onPointerDown = (e) => {
+    if (dragRef.current !== null || e.button !== 0) return;
+    if (!e.shiftKey && !shiftHeld) return;
+    const pointerId = e.pointerId ?? -1;
+    const el = overlayRef.current;
+    if (el !== null) capturePointer(el, pointerId);
+    const p = localPoint(e);
+    dragRef.current = { pointerId, points: [p], pending: null, frame: null };
+    setPreview([p]);
+    e.preventDefault();
+  };
+  const onPointerMove = (e) => {
+    const drag = dragRef.current;
+    if (drag === null || (e.pointerId ?? -1) !== drag.pointerId) return;
+    drag.pending = localPoint(e);
+    if (drag.frame !== null) return;
+    commitPending(drag);
+    const tick = () => {
+      drag.frame = null;
+      if (dragRef.current !== drag) return;
+      if (drag.pending !== null) {
+        commitPending(drag);
+        drag.frame = scheduleFrame(tick);
+      }
+    };
+    drag.frame = scheduleFrame(tick);
+  };
+  const onPointerUp = (e) => {
+    const drag = dragRef.current;
+    if (drag === null || (e.pointerId ?? -1) !== drag.pointerId) return;
+    commitPending(drag);
+    const polygon = drag.points;
+    const additive = e.metaKey;
+    releaseDrag();
+    if (polygon.length >= 3) instance.selectWithinPolygon(polygon, { additive });
+  };
+  const onPointerCancel = (e) => {
+    const drag = dragRef.current;
+    if (drag === null || (e.pointerId ?? -1) !== drag.pointerId) return;
+    releaseDrag();
+  };
+  const active = shiftHeld || preview !== null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      "data-orbit-lasso": "",
+      style: active ? OVERLAY_ACTIVE : OVERLAY_INACTIVE,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      children: preview !== null && preview.length > 0 ? /* @__PURE__ */ jsx("svg", { "data-orbit-lasso-preview": "", style: SVG_STYLE, children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: toPathData(preview),
+          fill: "rgba(88, 134, 255, 0.12)",
+          stroke: "rgba(88, 134, 255, 0.9)",
+          strokeWidth: 1.5,
+          strokeDasharray: "4 3"
+        }
+      ) }) : null
+    }
+  );
+}
+function placementKey(p) {
+  return p.kind === "cluster" ? `cluster\0${p.id}` : `node\0${p.id}`;
+}
+var LAYER_STYLE = { ...overlayLayerStyle, overflow: "hidden" };
+var LABEL_BASE_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  pointerEvents: "auto",
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  userSelect: "none",
+  willChange: "transform"
+};
+function transformOf(x, y) {
+  return `translate3d(${x}px, ${y}px, 0)`;
+}
+function LabelLayer(props) {
+  const instance = useAmbientGraphInstance("LabelLayer");
+  const labels = overlaySurface(instance).labels;
+  const [candidates, setCandidates] = useState([]);
+  const elementsRef = useRef(/* @__PURE__ */ new Map());
+  const positionsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (labels === void 0) return void 0;
+    return labels.subscribeCandidates((list) => {
+      const positions = positionsRef.current;
+      const keep = /* @__PURE__ */ new Set();
+      for (const p of list) {
+        const key = placementKey(p);
+        keep.add(key);
+        positions.set(key, [p.x, p.y]);
+      }
+      for (const key of [...positions.keys()]) {
+        if (!keep.has(key)) positions.delete(key);
+      }
+      setCandidates(list.map((p) => ({ ...p })));
+    });
+  }, [labels]);
+  useLayoutEffect(() => {
+    if (labels === void 0) return void 0;
+    return labels.subscribePositions((list) => {
+      const elements = elementsRef.current;
+      const positions = positionsRef.current;
+      for (const p of list) {
+        const key = placementKey(p);
+        positions.set(key, [p.x, p.y]);
+        const el = elements.get(key);
+        if (el !== void 0) el.style.transform = transformOf(p.x, p.y);
+      }
+    });
+  }, [labels]);
+  const onLabelClick = (id, e) => {
+    e.stopPropagation();
+    if (e.metaKey || e.shiftKey) {
+      const cur = instance.store.getState().selection.nodeIds;
+      instance.setSelection(cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
+      return;
+    }
+    instance.setSelection([id]);
+  };
+  const onClusterLabelClick = (key, e) => {
+    e.stopPropagation();
+    instance.selectCluster(key, { additive: e.metaKey || e.shiftKey });
+  };
+  const layerRef = useRef(null);
+  const onLabelContextMenu = (id, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = layerRef.current?.getBoundingClientRect();
+    if (rect === void 0) return;
+    instance.requestNodeContextMenu(id, [e.clientX - rect.left, e.clientY - rect.top]);
+  };
+  const clusterMembers = (key) => instance.getClusters().find((c) => c.key === key)?.memberIds ?? [];
+  return /* @__PURE__ */ jsx("div", { "data-orbit-label-layer": "", ref: layerRef, style: LAYER_STYLE, children: candidates.map((p) => {
+    const key = placementKey(p);
+    const [x, y] = positionsRef.current.get(key) ?? [p.x, p.y];
+    const isCluster = p.kind === "cluster";
+    const className = isCluster ? [props.labelClassName, props.clusterLabelClassName].filter(Boolean).join(" ") || void 0 : props.labelClassName;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...isCluster ? { "data-orbit-cluster-label": p.id } : { "data-orbit-label": p.id },
+        className,
+        style: { ...LABEL_BASE_STYLE, transform: transformOf(x, y) },
+        ref: (el) => {
+          if (el === null) elementsRef.current.delete(key);
+          else elementsRef.current.set(key, el);
+        },
+        onClick: (e) => isCluster ? onClusterLabelClick(p.id, e) : onLabelClick(p.id, e),
+        onContextMenu: isCluster ? void 0 : (e) => onLabelContextMenu(p.id, e),
+        children: isCluster ? props.renderClusterLabel !== void 0 ? props.renderClusterLabel({
+          clusterKey: p.id,
+          text: p.text,
+          memberIds: clusterMembers(p.id)
+        }) : p.text : props.renderNodeLabel !== void 0 ? props.renderNodeLabel({
+          node: instance.getNode(p.id) ?? { id: p.id },
+          text: p.text
+        }) : p.text
+      },
+      key
+    );
+  }) });
+}
+var ANNOUNCE_INTERVAL_MS = 800;
+function summarize(s) {
+  const selected = s.selection.nodeIds.length + s.selection.edgeIds.length;
+  return `Graph ${s.status}. ${s.nodeCount} nodes, ${s.edgeCount} edges. ${selected} selected.`;
+}
+function LiveRegion(props) {
+  const instance = useAmbientGraphInstance("LiveRegion");
+  const enabled = props.announcements !== false;
+  const [message, setMessage] = useState("");
+  const lastAnnouncedRef = useRef(null);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return void 0;
+    const store = instance.store;
+    lastAnnouncedRef.current = summarize(store.getState());
+    const fire = () => {
+      timerRef.current = null;
+      const next = summarize(store.getState());
+      if (next === lastAnnouncedRef.current) return;
+      lastAnnouncedRef.current = next;
+      setMessage(next);
+    };
+    const unsubscribe = store.subscribe(() => {
+      if (timerRef.current !== null) return;
+      if (summarize(store.getState()) === lastAnnouncedRef.current) return;
+      timerRef.current = setTimeout(fire, ANNOUNCE_INTERVAL_MS);
+    });
+    return () => {
+      unsubscribe();
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [instance, enabled]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-orbit-live-region": "",
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: visuallyHiddenStyle,
+      children: message
+    }
+  );
+}
+function scaleKeyOf(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const kind = value.kind;
+  if (kind !== "sequential" && kind !== "categorical" && kind !== "diverging") return void 0;
+  return canonicalScaleKey(value);
+}
+function styleChannelChanged(prevValue, prevKey, nextValue, nextKey) {
+  if (nextKey !== void 0 || prevKey !== void 0) return nextKey !== prevKey;
+  return prevValue !== nextValue;
+}
+function filterSideKey(side) {
+  if (side === void 0) return "u";
+  if (typeof side === "function") return "fn";
+  return JSON.stringify(side);
+}
+function filterKeyOf(spec) {
+  if (spec === null) return "null";
+  return `${spec.mode ?? "hide"}|${filterSideKey(spec.nodes)}|${filterSideKey(spec.edges)}`;
+}
+function sameFilterSpec(prev, prevKey, next, nextKey) {
+  if (prevKey === void 0 || prevKey !== nextKey) return false;
+  if (next === null) return prev === null;
+  if (prev === null || prev === void 0) return false;
+  if (typeof next.nodes === "function" && next.nodes !== prev.nodes) return false;
+  if (typeof next.edges === "function" && next.edges !== prev.edges) return false;
+  return true;
+}
+function sameIdArrays(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+var CONTAINER_BASE_STYLE = {
+  position: "relative",
+  width: "100%",
+  height: "100%"
+};
+var CANVAS_STYLE = { position: "absolute", inset: 0 };
+var LEGEND_SLOT_STYLE = {
+  position: "absolute",
+  left: 12,
+  bottom: 12
+};
+function LegendSlot(props) {
+  const { instance } = props;
+  const { version, theme } = useScaleInfoSubscription(instance);
+  const info = useMemo(
+    () => ({
+      nodeColor: instance.getScaleInfo("nodeColor"),
+      nodeSize: instance.getScaleInfo("nodeSize"),
+      theme
+    }),
+    // `version` is the invalidation token: a new store revision can change
+    // what getScaleInfo returns without changing any other dependency.
+    [instance, theme, version]
+  );
+  return /* @__PURE__ */ jsx("div", { "data-orbit-legend-slot": "", style: LEGEND_SLOT_STYLE, children: props.renderLegend(info) });
+}
+function GraphInner(props, ref) {
+  const [instance] = useState(() => {
+    const options = { engine: props.engine };
+    if (props.fitViewOnFirstData !== void 0) {
+      options.fitViewOnFirstData = props.fitViewOnFirstData;
+    }
+    if (props.searchIndex !== void 0) options.searchIndex = props.searchIndex;
+    if (props.services !== void 0) options.services = props.services;
+    return createGraphInstance(options);
+  });
+  const searchIndexWarnedRef = useRef(false);
+  const containerRef = useRef(null);
+  const callbacksRef = useRef({
+    onNodeClick: void 0,
+    onBackgroundClick: void 0,
+    onNodeHover: void 0,
+    onEdgeClick: void 0,
+    onEdgeHover: void 0,
+    onNodeDragStart: void 0,
+    onNodeDragEnd: void 0,
+    onSelectionChange: void 0,
+    onGroupClick: void 0,
+    onMetaEdgeClick: void 0,
+    onGroupsChange: void 0,
+    onViewStateRestore: void 0,
+    onViewStateMismatch: void 0,
+    onPinnedChange: void 0,
+    onViewportChange: void 0,
+    onReady: void 0,
+    onError: void 0
+  });
+  useLayoutEffect(() => {
+    callbacksRef.current = {
+      onNodeClick: props.onNodeClick,
+      onBackgroundClick: props.onBackgroundClick,
+      onNodeHover: props.onNodeHover,
+      onEdgeClick: props.onEdgeClick,
+      onEdgeHover: props.onEdgeHover,
+      onNodeDragStart: props.onNodeDragStart,
+      onNodeDragEnd: props.onNodeDragEnd,
+      onSelectionChange: props.onSelectionChange,
+      onGroupClick: props.onGroupClick,
+      onMetaEdgeClick: props.onMetaEdgeClick,
+      onGroupsChange: props.onGroupsChange,
+      onViewStateRestore: props.onViewStateRestore,
+      onViewStateMismatch: props.onViewStateMismatch,
+      onPinnedChange: props.onPinnedChange,
+      onViewportChange: props.onViewportChange,
+      onReady: props.onReady,
+      onError: props.onError
+    };
+  });
+  const prevRef = useRef(null);
+  useLayoutEffect(() => {
+    const prev = prevRef.current;
+    const update = {};
+    let dirty = false;
+    if (props.data !== void 0 && (prev === null || prev.data !== props.data)) {
+      update.data = props.data;
+      dirty = true;
+    }
+    const nodeColorKey = scaleKeyOf(props.nodeColor);
+    if (props.nodeColor !== void 0 && (prev === null || styleChannelChanged(prev.nodeColor, prev.nodeColorKey, props.nodeColor, nodeColorKey))) {
+      update.nodeColor = props.nodeColor;
+      dirty = true;
+    }
+    const nodeSizeKey = scaleKeyOf(props.nodeSize);
+    if (props.nodeSize !== void 0 && (prev === null || styleChannelChanged(prev.nodeSize, prev.nodeSizeKey, props.nodeSize, nodeSizeKey))) {
+      update.nodeSize = props.nodeSize;
+      dirty = true;
+    }
+    if (props.linkColor !== void 0 && (prev === null || prev.linkColor !== props.linkColor)) {
+      update.linkColor = props.linkColor;
+      dirty = true;
+    }
+    if (props.linkWidth !== void 0 && (prev === null || prev.linkWidth !== props.linkWidth)) {
+      update.linkWidth = props.linkWidth;
+      dirty = true;
+    }
+    if (props.layout !== void 0 && (prev === null || prev.layout !== props.layout)) {
+      update.layout = props.layout;
+      dirty = true;
+    }
+    if (props.simulation !== void 0 && (prev === null || prev.simulation !== props.simulation)) {
+      update.simulation = props.simulation;
+      dirty = true;
+    }
+    let themeJson;
+    if (props.theme !== void 0) {
+      themeJson = JSON.stringify(props.theme);
+      if (prev === null || prev.themeJson !== themeJson) {
+        update.theme = props.theme;
+        dirty = true;
+      }
+    }
+    if (props.metrics !== void 0 && (prev === null || prev.metrics !== props.metrics)) {
+      update.metrics = props.metrics;
+      dirty = true;
+    }
+    if (props.nodeImage !== void 0 && (prev === null || prev.nodeImage !== props.nodeImage)) {
+      update.nodeImage = props.nodeImage;
+      dirty = true;
+    } else if (props.nodeImage === void 0 && prev !== null && prev.nodeImage !== void 0) {
+      update.nodeImage = null;
+      dirty = true;
+    }
+    if (props.edgeArrows !== void 0 && (prev === null || prev.edgeArrows !== props.edgeArrows)) {
+      update.edgeArrows = props.edgeArrows;
+      dirty = true;
+    }
+    if (props.showLinks !== void 0 && (prev === null || prev.showLinks !== props.showLinks)) {
+      update.showLinks = props.showLinks;
+      dirty = true;
+    }
+    if (props.selection !== void 0 && (prev === null || prev.selection === void 0 || !sameIdArrays(prev.selection, props.selection))) {
+      update.selection = props.selection;
+      dirty = true;
+    }
+    if (props.labels !== void 0 && (prev === null || prev.labels !== props.labels)) {
+      update.labels = props.labels;
+      dirty = true;
+    }
+    if (props.accessibility !== void 0 && (prev === null || prev.accessibility !== props.accessibility)) {
+      update.accessibility = props.accessibility;
+      dirty = true;
+    }
+    let subgraphJson;
+    if (props.subgraph !== void 0) {
+      subgraphJson = JSON.stringify(props.subgraph);
+      if (prev === null || prev.subgraphJson !== subgraphJson) {
+        update.subgraph = props.subgraph;
+        dirty = true;
+      }
+    }
+    let filterKey;
+    if (props.filter !== void 0) {
+      filterKey = filterKeyOf(props.filter);
+      if (prev === null || !sameFilterSpec(prev.filter, prev.filterKey, props.filter, filterKey)) {
+        update.filter = props.filter;
+        dirty = true;
+      }
+    }
+    if (props.crossfilter !== void 0 && (prev === null || prev.crossfilter !== props.crossfilter)) {
+      update.crossfilter = props.crossfilter;
+      dirty = true;
+    }
+    if (props.dataRef !== void 0) {
+      const prevRef2 = prev === null ? void 0 : prev.dataRef;
+      if (prevRef2 === void 0 || canonicalJson(props.dataRef) !== canonicalJson(prevRef2)) {
+        update.dataRef = props.dataRef;
+        dirty = true;
+      }
+    }
+    if (props.groups !== void 0) {
+      const prevGroups = prev === null ? void 0 : prev.groups;
+      if (prevGroups === void 0 || !sameGroupSpecArrays(prevGroups, props.groups)) {
+        update.groups = props.groups;
+        dirty = true;
+      }
+    }
+    if (props.groupBy !== void 0 && (prev === null || prev.groupBy !== props.groupBy)) {
+      update.groupBy = props.groupBy;
+      dirty = true;
+    }
+    if (props.clusters !== void 0 && (prev === null || prev.clusters !== props.clusters)) {
+      update.clusters = props.clusters;
+      dirty = true;
+    }
+    if (props.pinnedNodeIds !== void 0) {
+      const prevPinned = prev === null ? void 0 : prev.pinnedNodeIds;
+      const changed = prevPinned === void 0 || prevPinned === null || props.pinnedNodeIds === null || !sameIdArrays(prevPinned, props.pinnedNodeIds);
+      if (changed) {
+        update.pinnedNodeIds = props.pinnedNodeIds;
+        dirty = true;
+      }
+    }
+    if (prev !== null && !sameIdArrays(prev.searchIndex ?? [], props.searchIndex ?? []) && !searchIndexWarnedRef.current) {
+      searchIndexWarnedRef.current = true;
+      console.warn(
+        "[orbit] searchIndex is construction-only (\xA716.5): the changed value was ignored \u2014 key-remount <Graph> to change it"
+      );
+    }
+    prevRef.current = {
+      data: props.data,
+      nodeColor: props.nodeColor,
+      nodeColorKey,
+      nodeSize: props.nodeSize,
+      nodeSizeKey,
+      linkColor: props.linkColor,
+      linkWidth: props.linkWidth,
+      layout: props.layout,
+      simulation: props.simulation,
+      themeJson,
+      metrics: props.metrics,
+      nodeImage: props.nodeImage,
+      edgeArrows: props.edgeArrows,
+      showLinks: props.showLinks,
+      selection: props.selection,
+      labels: props.labels,
+      accessibility: props.accessibility,
+      subgraphJson,
+      filter: props.filter,
+      filterKey,
+      crossfilter: props.crossfilter,
+      groups: props.groups,
+      dataRef: props.dataRef,
+      groupBy: props.groupBy,
+      clusters: props.clusters,
+      pinnedNodeIds: props.pinnedNodeIds,
+      searchIndex: props.searchIndex
+    };
+    if (dirty) instance.applyHostUpdate(update);
+  });
+  useLayoutEffect(() => {
+    setSearchResultUnavailableCallback(instance, props.onSearchResultUnavailable);
+  });
+  useEffect(() => {
+    const offs = [
+      instance.on("nodeClick", (p) => callbacksRef.current.onNodeClick?.(p)),
+      instance.on("backgroundClick", () => callbacksRef.current.onBackgroundClick?.()),
+      instance.on("nodeHover", (p) => callbacksRef.current.onNodeHover?.(p)),
+      instance.on("edgeClick", (p) => callbacksRef.current.onEdgeClick?.(p)),
+      instance.on("edgeHover", (p) => callbacksRef.current.onEdgeHover?.(p)),
+      instance.on("nodeDragStart", (p) => callbacksRef.current.onNodeDragStart?.(p)),
+      instance.on("nodeDragEnd", (p) => callbacksRef.current.onNodeDragEnd?.(p)),
+      instance.on("selectionChange", (p) => callbacksRef.current.onSelectionChange?.(p)),
+      instance.on("groupClick", (p) => callbacksRef.current.onGroupClick?.(p)),
+      instance.on("metaEdgeClick", (p) => callbacksRef.current.onMetaEdgeClick?.(p)),
+      instance.on("groupsChange", (p) => callbacksRef.current.onGroupsChange?.(p.groups)),
+      instance.on("viewStateRestore", (p) => callbacksRef.current.onViewStateRestore?.(p)),
+      instance.on(
+        "viewStateMismatch",
+        (p) => callbacksRef.current.onViewStateMismatch?.(p.stored, p.current)
+      ),
+      instance.on("pinnedChange", (p) => callbacksRef.current.onPinnedChange?.(p.pinnedNodeIds)),
+      instance.on("viewportChange", (v) => callbacksRef.current.onViewportChange?.(v)),
+      instance.on("ready", () => callbacksRef.current.onReady?.()),
+      instance.on("error", (p) => callbacksRef.current.onError?.(p))
+    ];
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [instance]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null) return void 0;
+    let active = true;
+    void instance.attach(container).catch((err) => {
+      if (!active) return;
+      if (instance.store.getState().status === "error") return;
+      const error = err instanceof Error ? err : new Error(String(err));
+      callbacksRef.current.onError?.({ error });
+    });
+    return () => {
+      active = false;
+      instance.detach();
+    };
+  }, [instance]);
+  const destroyGateRef = useRef({ pendingDestroy: false });
+  useEffect(() => {
+    const gate = destroyGateRef.current;
+    gate.pendingDestroy = false;
+    return () => {
+      gate.pendingDestroy = true;
+      queueMicrotask(() => {
+        if (gate.pendingDestroy) instance.destroy();
+      });
+    };
+  }, [instance]);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return void 0;
+    }
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const surface = overlaySurface(instance);
+    surface.setReducedMotion?.(mq.matches);
+    const onChange = (e) => {
+      surface.setReducedMotion?.(e.matches);
+    };
+    if (typeof mq.addEventListener === "function") {
+      mq.addEventListener("change", onChange);
+      return () => {
+        mq.removeEventListener("change", onChange);
+      };
+    }
+    if (typeof mq.addListener === "function") {
+      mq.addListener(onChange);
+      return () => {
+        mq.removeListener(onChange);
+      };
+    }
+    return void 0;
+  }, [instance]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      fitView: (_opts) => {
+        instance.fitView();
+      },
+      zoomIn: () => {
+        instance.zoomIn();
+      },
+      zoomOut: () => {
+        instance.zoomOut();
+      },
+      setViewport: (v, _opts) => {
+        instance.setViewport(v);
+      },
+      requestNodeContextMenu: (id, screen) => {
+        instance.requestNodeContextMenu(id, screen);
+      },
+      getViewState: (opts) => instance.getViewState(opts),
+      setViewState: (raw, opts) => instance.setViewState(raw, opts),
+      exportImage: ((format, opts) => format === "png" ? instance.exportImage("png") : instance.exportImage("svg", opts)),
+      exportData: (scope, opts) => instance.exportData(scope, opts),
+      exportDataStream: (scope) => instance.exportDataStream(scope),
+      exportLayout: (opts) => instance.exportLayout(opts),
+      exportLayoutStream: () => instance.exportLayoutStream(),
+      focusNode: (id) => {
+        instance.focusNode(id);
+      },
+      setSelection: (ids) => {
+        instance.setSelection(ids);
+      },
+      findPath: (sourceId, targetId, options) => instance.findPath(sourceId, targetId, options),
+      clearPath: () => {
+        instance.clearPath();
+      },
+      clearSelection: () => {
+        instance.clearSelection();
+      },
+      selectNeighbors: (id) => {
+        instance.selectNeighbors(id);
+      },
+      selectAll: () => {
+        instance.selectAll();
+      },
+      invertSelection: () => {
+        instance.invertSelection();
+      },
+      selectWithinPolygon: (polygon, opts) => instance.selectWithinPolygon(polygon, opts),
+      pinNode: (id, xy) => {
+        instance.pinNode(id, xy);
+      },
+      unpinNode: (id) => {
+        instance.unpinNode(id);
+      },
+      clearPins: () => {
+        instance.clearPins();
+      },
+      hideNodes: (ids) => {
+        instance.hideNodes(ids);
+      },
+      showAll: () => {
+        instance.showAll();
+      },
+      isolateSelection: () => {
+        instance.isolateSelection();
+      },
+      resetIsolation: () => {
+        instance.resetIsolation();
+      },
+      expandNode: (id, opts) => instance.expandNode(id, opts),
+      retractExpansion: (id) => {
+        instance.retractExpansion(id);
+      },
+      pinNodes: (ids) => {
+        instance.pinNodes(ids);
+      },
+      unpinNodes: (ids) => {
+        instance.unpinNodes(ids);
+      },
+      groupNodes: (spec) => {
+        instance.groupNodes(spec);
+      },
+      ungroup: (groupId) => {
+        instance.ungroup(groupId);
+      },
+      setGroupCollapsed: (groupId, collapsed) => {
+        instance.setGroupCollapsed(groupId, collapsed);
+      },
+      foldNode: (id, opts) => {
+        instance.foldNode(id, opts);
+      },
+      unfoldNode: (id) => {
+        instance.unfoldNode(id);
+      },
+      getFold: (id) => instance.getFold(id),
+      getClusters: () => instance.getClusters(),
+      selectCluster: (key, opts) => {
+        instance.selectCluster(key, opts);
+      },
+      beginIngest: (opts) => instance.beginIngest(opts),
+      removeOverlay: (overlayId) => instance.removeOverlay(overlayId),
+      undo: () => instance.undo(),
+      redo: () => instance.redo(),
+      playTimeline: (key, playback) => {
+        instance.playTimeline(key, playback);
+      },
+      pauseTimeline: () => {
+        instance.pauseTimeline();
+      },
+      getCrossfilterSession: () => instance.getCrossfilterSession(),
+      getScaleInfo: (channel) => instance.getScaleInfo(channel),
+      getMetricValue: (metric, id) => instance.getMetricValue(metric, id),
+      getRevisions: () => instance.getRevisions(),
+      getDiagnostics: () => instance.getDiagnostics(),
+      instance
+    }),
+    [instance]
+  );
+  const descriptionId = useId();
+  const description = props.accessibility?.description;
+  return /* @__PURE__ */ jsx("div", { className: props.className, style: { ...CONTAINER_BASE_STYLE, ...props.style }, children: /* @__PURE__ */ jsxs(GraphProvider, { instance, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        "data-orbit-canvas": "",
+        style: CANVAS_STYLE,
+        role: "application",
+        "aria-label": props.accessibility?.label ?? "Graph visualization",
+        "aria-describedby": description !== void 0 ? descriptionId : void 0
+      }
+    ),
+    description !== void 0 ? /* @__PURE__ */ jsx("div", { id: descriptionId, style: visuallyHiddenStyle, children: description }) : null,
+    props.labels?.enabled !== false ? /* @__PURE__ */ jsx(
+      LabelLayer,
+      {
+        labelClassName: props.labelClassName,
+        renderNodeLabel: props.renderNodeLabel,
+        clusterLabelClassName: props.clusterLabelClassName,
+        renderClusterLabel: props.renderClusterLabel
+      }
+    ) : null,
+    props.enableLasso !== false ? /* @__PURE__ */ jsx(Lasso, {}) : null,
+    /* @__PURE__ */ jsx(LiveRegion, { announcements: props.accessibility?.announcements }),
+    props.renderLegend !== void 0 ? /* @__PURE__ */ jsx(LegendSlot, { instance, renderLegend: props.renderLegend }) : null,
+    props.children
+  ] }) });
+}
+var Graph = forwardRef(GraphInner);
+
+export { Graph, LabelLayer, LiveRegion };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map