@modernrelay/orbit-react 0.2.0

package/dist/components/Timeline.js

@@ -0,0 +1,182 @@
+import { useRangeBrush, brushRangePct, sliderValueText, sliderValueNow } from '../chunk-DGFLU2SN.js';
+import { useCrossfilterDimension, useSessionSetBrush } from '../chunk-JN7QCMFW.js';
+import { useResolvedInstance } from '../chunk-7XB47YST.js';
+import { useCallback, useSyncExternalStore } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ROOT_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: 6,
+  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 BUTTON_STYLE = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  borderRadius: 6,
+  color: "inherit",
+  cursor: "pointer",
+  font: "inherit",
+  minWidth: 28,
+  minHeight: 28,
+  padding: "2px 6px"
+};
+var DISABLED_BUTTON_STYLE = {
+  ...BUTTON_STYLE,
+  cursor: "default",
+  opacity: 0.4
+};
+var PLOT_STYLE = {
+  position: "relative",
+  flex: 1,
+  cursor: "crosshair",
+  touchAction: "none",
+  userSelect: "none"
+};
+var SVG_STYLE = { display: "block", width: "100%" };
+var TRACK_FILL = "rgba(148, 163, 184, 0.18)";
+var DENSITY_FILL = "rgba(148, 163, 184, 0.4)";
+var WINDOW_FILL = "rgba(122, 162, 255, 0.28)";
+var WINDOW_STROKE = "rgba(122, 162, 255, 0.9)";
+function GraphTimeline(props) {
+  const instance = useResolvedInstance(props.instance, "<GraphTimeline>");
+  const { summary, brush } = useCrossfilterDimension(instance, props.dimension);
+  const setBrush = useSessionSetBrush(instance, props.dimension);
+  const subscribe = useCallback(
+    (onStoreChange) => instance.store.subscribe(onStoreChange),
+    [instance]
+  );
+  const getPlayingKey = useCallback(
+    () => instance.store.getState().timeline.playingKey,
+    [instance]
+  );
+  const playingKey = useSyncExternalStore(subscribe, getPlayingKey, getPlayingKey);
+  const playing = playingKey === props.dimension;
+  const domain = summary?.domain ?? null;
+  const handlers = useRangeBrush({
+    domain,
+    binCount: summary?.bins.length ?? 0,
+    brush,
+    setBrush
+  });
+  const playable = summary !== null && summary.kind !== "categorical" && domain !== null;
+  const toggle = useCallback(() => {
+    if (instance.store.getState().timeline.playingKey === props.dimension) {
+      instance.pauseTimeline();
+      return;
+    }
+    try {
+      instance.playTimeline(props.dimension, props.playback);
+    } catch {
+    }
+  }, [instance, props.dimension, props.playback]);
+  const styled = props.className === void 0;
+  const height = props.height ?? 24;
+  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;
+  const range = brushRangePct(brush, domain);
+  const label = playing ? "Pause timeline" : "Play timeline";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-orbit-timeline": props.dimension,
+      role: "group",
+      "aria-label": `${props.dimension} timeline`,
+      className: props.className,
+      style: styled ? { ...ROOT_STYLE, ...props.style } : props.style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-orbit-timeline-toggle": "",
+            "aria-label": label,
+            title: label,
+            "aria-pressed": playing,
+            disabled: !playable,
+            className: props.buttonClassName,
+            style: props.buttonClassName !== void 0 ? void 0 : playable ? BUTTON_STYLE : DISABLED_BUTTON_STYLE,
+            onClick: toggle,
+            children: playing ? "\u23F8" : "\u25B6"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-orbit-timeline-plot": "",
+            tabIndex: 0,
+            "aria-label": `${props.dimension} timeline 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: [
+                  /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 100, height: 100, fill: TRACK_FILL, rx: 2 }),
+                  bins.map((bin, i) => {
+                    const h = maxTotal > 0 ? bin.total / maxTotal * 100 : 0;
+                    return /* @__PURE__ */ jsx(
+                      "rect",
+                      {
+                        "data-orbit-timeline-density": "",
+                        x: i * barW + barW * 0.1,
+                        y: 100 - h,
+                        width: barW * 0.8,
+                        height: h,
+                        fill: DENSITY_FILL
+                      },
+                      i
+                    );
+                  }),
+                  range !== null ? /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      "data-orbit-timeline-window": "",
+                      x: range.leftPct,
+                      y: 0,
+                      width: range.widthPct,
+                      height: 100,
+                      fill: WINDOW_FILL,
+                      stroke: WINDOW_STROKE,
+                      strokeWidth: 0.75,
+                      pointerEvents: "none"
+                    }
+                  ) : null
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { GraphTimeline };
+//# sourceMappingURL=Timeline.js.map
+//# sourceMappingURL=Timeline.js.map

package/dist/components/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Timeline/index.tsx"],"names":[],"mappings":"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","file":"Timeline.js","sourcesContent":["/**\n * <GraphTimeline> — §16.6 timeline playback control (S9).\n *\n * A slim horizontal band over one numeric/temporal crossfilter dimension:\n * the same pointer-drag brushing as the histogram (shared module), a\n * play/pause button wired to instance.playTimeline/pauseTimeline (the button\n * mirrors store `timeline.playingKey === dimension`), and a translucent\n * current-window indicator. While PLAYING, a user drag pauses playback (the\n * core folds the pause into the same brush publication). Headless-styleable:\n * providing `className` drops the built-in dark-theme inline styles.\n */\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport type { TimelinePlayback } from '@modernrelay/orbit-core';\nimport type { AnyGraphInstance } from '../../GraphProvider';\nimport { useResolvedInstance } from '../shared';\nimport { brushRangePct, sliderValueNow, sliderValueText, useRangeBrush } from '../_shared/brush';\nimport { useCrossfilterDimension, useSessionSetBrush } from '../_shared/crossfilter';\n\nexport interface GraphTimelineProps {\n  /** Crossfilter dimension key — numeric/temporal to be playable (§16.6). */\n  dimension: string;\n  /** Playback options forwarded to instance.playTimeline. */\n  playback?: Partial<TimelinePlayback>;\n  /** Band height in CSS px. Default 24. */\n  height?: number;\n  /** Explicit instance; defaults to the ambient <Graph>/<GraphProvider> one. */\n  instance?: AnyGraphInstance;\n  /** Class hook for the root; providing it drops the default styles. */\n  className?: string;\n  style?: CSSProperties;\n  /** Class hook for the play/pause button; providing it drops its defaults. */\n  buttonClassName?: string;\n}\n\n// --- default dark-theme styling (dropped when `className` is provided) ---\n\nconst ROOT_STYLE: CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 8,\n  padding: 6,\n  borderRadius: 8,\n  background: 'rgba(23, 25, 32, 0.92)',\n  border: '1px solid rgba(255, 255, 255, 0.14)',\n  color: '#e8eaf0',\n  font: '12px/1.4 system-ui, sans-serif',\n};\n\nconst BUTTON_STYLE: CSSProperties = {\n  appearance: 'none',\n  background: 'transparent',\n  border: 'none',\n  borderRadius: 6,\n  color: 'inherit',\n  cursor: 'pointer',\n  font: 'inherit',\n  minWidth: 28,\n  minHeight: 28,\n  padding: '2px 6px',\n};\n\nconst DISABLED_BUTTON_STYLE: CSSProperties = {\n  ...BUTTON_STYLE,\n  cursor: 'default',\n  opacity: 0.4,\n};\n\nconst PLOT_STYLE: CSSProperties = {\n  position: 'relative',\n  flex: 1,\n  cursor: 'crosshair',\n  touchAction: 'none',\n  userSelect: 'none',\n};\n\nconst SVG_STYLE: CSSProperties = { display: 'block', width: '100%' };\n\nconst TRACK_FILL = 'rgba(148, 163, 184, 0.18)';\nconst DENSITY_FILL = 'rgba(148, 163, 184, 0.4)';\nconst WINDOW_FILL = 'rgba(122, 162, 255, 0.28)';\nconst WINDOW_STROKE = 'rgba(122, 162, 255, 0.9)';\n\nexport function GraphTimeline(props: GraphTimelineProps): ReactElement {\n  const instance = useResolvedInstance(props.instance, '<GraphTimeline>');\n  const { summary, brush } = useCrossfilterDimension(instance, props.dimension);\n  const setBrush = useSessionSetBrush(instance, props.dimension);\n\n  // --- store mirror: timeline.playingKey drives the play/pause toggle ---\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => instance.store.subscribe(onStoreChange),\n    [instance],\n  );\n  const getPlayingKey = useCallback(\n    (): string | null => instance.store.getState().timeline.playingKey,\n    [instance],\n  );\n  const playingKey = useSyncExternalStore(subscribe, getPlayingKey, getPlayingKey);\n  const playing = playingKey === props.dimension;\n\n  const domain = summary?.domain ?? null;\n  const handlers = useRangeBrush({\n    domain,\n    binCount: summary?.bins.length ?? 0,\n    brush,\n    setBrush,\n  });\n\n  const playable = summary !== null && summary.kind !== 'categorical' && domain !== null;\n  const toggle = useCallback((): void => {\n    if (instance.store.getState().timeline.playingKey === props.dimension) {\n      instance.pauseTimeline();\n      return;\n    }\n    try {\n      instance.playTimeline(props.dimension, props.playback);\n    } catch {\n      // Not playable (categorical / unknown / no dimensions yet): inert.\n    }\n  }, [instance, props.dimension, props.playback]);\n\n  const styled = props.className === undefined;\n  const height = props.height ?? 24;\n  const bins = summary?.bins ?? [];\n  const maxTotal = bins.reduce((m, b) => (b.total > m ? b.total : m), 0);\n  const barW = bins.length > 0 ? 100 / bins.length : 100;\n  const range = brushRangePct(brush, domain);\n  const label = playing ? 'Pause timeline' : 'Play timeline';\n\n  return (\n    <div\n      data-orbit-timeline={props.dimension}\n      role=\"group\"\n      aria-label={`${props.dimension} timeline`}\n      className={props.className}\n      style={styled ? { ...ROOT_STYLE, ...props.style } : props.style}\n    >\n      <button\n        type=\"button\"\n        data-orbit-timeline-toggle=\"\"\n        aria-label={label}\n        title={label}\n        aria-pressed={playing}\n        disabled={!playable}\n        className={props.buttonClassName}\n        style={\n          props.buttonClassName !== undefined\n            ? undefined\n            : playable\n              ? BUTTON_STYLE\n              : DISABLED_BUTTON_STYLE\n        }\n        onClick={toggle}\n      >\n        {playing ? '⏸' : '▶'}\n      </button>\n      <div\n        data-orbit-timeline-plot=\"\"\n        tabIndex={0}\n        aria-label={`${props.dimension} timeline brush: drag to filter, arrow keys nudge, Escape clears`}\n        role=\"slider\"\n        aria-orientation=\"horizontal\"\n        aria-valuemin={summary?.domain?.min ?? 0}\n        aria-valuemax={summary?.domain?.max ?? 0}\n        aria-valuenow={sliderValueNow(brush, summary?.domain)}\n        aria-valuetext={sliderValueText(brush, summary?.domain)}\n        style={styled ? PLOT_STYLE : undefined}\n        onPointerDown={handlers.onPointerDown}\n        onPointerMove={handlers.onPointerMove}\n        onPointerUp={handlers.onPointerUp}\n        onPointerCancel={handlers.onPointerCancel}\n        onDoubleClick={handlers.onDoubleClick}\n        onKeyDown={handlers.onKeyDown}\n      >\n        <svg\n          width=\"100%\"\n          height={height}\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          style={styled ? SVG_STYLE : undefined}\n        >\n          <rect x={0} y={0} width={100} height={100} fill={TRACK_FILL} rx={2} />\n          {bins.map((bin, i) => {\n            const h = maxTotal > 0 ? (bin.total / maxTotal) * 100 : 0;\n            return (\n              <rect\n                key={i}\n                data-orbit-timeline-density=\"\"\n                x={i * barW + barW * 0.1}\n                y={100 - h}\n                width={barW * 0.8}\n                height={h}\n                fill={DENSITY_FILL}\n              />\n            );\n          })}\n          {range !== null ? (\n            <rect\n              data-orbit-timeline-window=\"\"\n              x={range.leftPct}\n              y={0}\n              width={range.widthPct}\n              height={100}\n              fill={WINDOW_FILL}\n              stroke={WINDOW_STROKE}\n              strokeWidth={0.75}\n              pointerEvents=\"none\"\n            />\n          ) : null}\n        </svg>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties, RefObject, ReactNode, ReactElement } from 'react';
+import { A as AnyGraphInstance } from '../GraphProvider-B8ITDXS0.js';
+import { G as GraphCorner } from '../shared-Bj3Gk219.js';
+import '@modernrelay/orbit-core';
+
+/**
+ * <GraphToolbar> — §16.1 camera & simulation controls (S7-T06).
+ *
+ * Thin view over the GraphInstance ref API: zoom ±, fit view, reset view,
+ * fullscreen toggle, screenshot download, and a simulation play/pause toggle
+ * that mirrors the store's `simulationRunning` field. Headless-styleable:
+ * providing `className`/`buttonClassName` drops the built-in dark-theme
+ * inline styles, and `renderButton` replaces the default <button> rendering
+ * entirely while keeping the wiring.
+ *
+ * Fullscreen note: the instance exposes no container getter by design — the
+ * element sent fullscreen is `containerRef.current`, defaulting to
+ * `document.documentElement`.
+ */
+
+type GraphToolbarAction = 'zoom-in' | 'zoom-out' | 'fit-view' | 'reset-view' | 'fullscreen' | 'screenshot' | 'simulation';
+/** One toolbar affordance, as handed to the `renderButton` render prop. */
+interface GraphToolbarButton {
+    action: GraphToolbarAction;
+    /** Accessible label (also the default tooltip). */
+    label: string;
+    /** Default glyph rendered inside the button. */
+    glyph: string;
+    disabled: boolean;
+    /** Present on the toggles (fullscreen, simulation). */
+    pressed?: boolean;
+    /** Perform the action. */
+    run(): void;
+}
+interface GraphToolbarProps {
+    /** Explicit instance; defaults to the ambient <Graph>/<GraphProvider> one. */
+    instance?: AnyGraphInstance;
+    /** Corner the toolbar anchors to. Default 'top-left'. */
+    position?: GraphCorner;
+    /** Distance from the two anchored edges in CSS px. Default 12. */
+    offset?: number;
+    /** Class hook for the toolbar root; providing it drops the default styles
+     * INCLUDING placement — position it yourself in CSS. */
+    className?: string;
+    /** Style overrides merged over the defaults; an inset you set here wins
+     * over the one `position` implies (they are resolved per axis, never
+     * layered). */
+    style?: CSSProperties;
+    /** Class hook for each button; providing it drops the default styles. */
+    buttonClassName?: string;
+    /** Element sent fullscreen; default `document.documentElement`. */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Download filename for screenshots. Default 'orbit-graph.png'. */
+    screenshotFileName?: string;
+    /** Render-prop replacement for a single button (wiring stays intact). */
+    renderButton?: (button: GraphToolbarButton) => ReactNode;
+}
+declare function GraphToolbar(props: GraphToolbarProps): ReactElement;
+
+export { GraphToolbar, type GraphToolbarAction, type GraphToolbarButton, type GraphToolbarProps };

package/dist/components/Toolbar.js

@@ -0,0 +1,220 @@
+import { useResolvedInstance, mergeStyle, cornerStyle } from '../chunk-7XB47YST.js';
+import { useCallback, useSyncExternalStore, useState, useEffect, Fragment } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TOOLBAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: 2,
+  padding: 4,
+  borderRadius: 8,
+  background: "rgba(23, 25, 32, 0.92)",
+  border: "1px solid rgba(255, 255, 255, 0.14)",
+  boxShadow: "0 4px 16px rgba(0, 0, 0, 0.4)",
+  color: "#e8eaf0",
+  font: "13px/1.4 system-ui, sans-serif"
+};
+var BUTTON_STYLE = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  borderRadius: 6,
+  color: "inherit",
+  cursor: "pointer",
+  font: "inherit",
+  minWidth: 28,
+  minHeight: 28,
+  padding: "2px 6px"
+};
+var DISABLED_BUTTON_STYLE = {
+  ...BUTTON_STYLE,
+  cursor: "default",
+  opacity: 0.4
+};
+function GraphToolbar(props) {
+  const instance = useResolvedInstance(props.instance, "<GraphToolbar>");
+  const subscribe = useCallback(
+    (onStoreChange) => instance.store.subscribe(onStoreChange),
+    [instance]
+  );
+  const getSimulationRunning = useCallback(
+    () => instance.store.getState().simulationRunning,
+    [instance]
+  );
+  const simulationRunning = useSyncExternalStore(
+    subscribe,
+    getSimulationRunning,
+    getSimulationRunning
+  );
+  const [fullscreenActive, setFullscreenActive] = useState(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return void 0;
+    const onChange = () => {
+      setFullscreenActive((document.fullscreenElement ?? null) !== null);
+    };
+    document.addEventListener("fullscreenchange", onChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onChange);
+    };
+  }, []);
+  const [screenshotSupported, setScreenshotSupported] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    let unsubscribe = null;
+    const probe = () => {
+      void instance.captureScreenshot().then((blob) => {
+        if (!cancelled && blob === null) setScreenshotSupported(false);
+      });
+    };
+    if (instance.store.getState().status === "ready") {
+      probe();
+    } else {
+      unsubscribe = instance.store.subscribe(() => {
+        if (instance.store.getState().status !== "ready") return;
+        unsubscribe?.();
+        unsubscribe = null;
+        probe();
+      });
+    }
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
+  }, [instance]);
+  const screenshotFileName = props.screenshotFileName;
+  const takeScreenshot = useCallback(() => {
+    void instance.captureScreenshot().then((blob) => {
+      if (blob === null) {
+        setScreenshotSupported(false);
+        return;
+      }
+      if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") return;
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = screenshotFileName ?? "orbit-graph.png";
+      anchor.rel = "noopener";
+      anchor.style.display = "none";
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
+    });
+  }, [instance, screenshotFileName]);
+  const containerRef = props.containerRef;
+  const toggleFullscreen = useCallback(() => {
+    if (typeof document === "undefined") return;
+    if ((document.fullscreenElement ?? null) !== null) {
+      if (typeof document.exitFullscreen === "function") {
+        void document.exitFullscreen().catch(() => void 0);
+      }
+      return;
+    }
+    const el = containerRef?.current ?? document.documentElement;
+    if (typeof el.requestFullscreen === "function") {
+      void el.requestFullscreen().catch(() => void 0);
+    }
+  }, [containerRef]);
+  const buttons = [
+    {
+      action: "zoom-in",
+      label: "Zoom in",
+      glyph: "+",
+      disabled: false,
+      run: () => {
+        instance.zoomIn();
+      }
+    },
+    {
+      action: "zoom-out",
+      label: "Zoom out",
+      glyph: "\u2212",
+      disabled: false,
+      run: () => {
+        instance.zoomOut();
+      }
+    },
+    {
+      action: "fit-view",
+      label: "Fit view",
+      glyph: "\u2922",
+      disabled: false,
+      run: () => {
+        instance.fitView();
+      }
+    },
+    {
+      action: "reset-view",
+      label: "Reset view",
+      glyph: "\u21BA",
+      disabled: false,
+      run: () => {
+        instance.setViewport({ x: 0, y: 0, zoom: 1 });
+      }
+    },
+    {
+      action: "fullscreen",
+      label: fullscreenActive ? "Exit fullscreen" : "Enter fullscreen",
+      glyph: "\u26F6",
+      disabled: false,
+      pressed: fullscreenActive,
+      run: toggleFullscreen
+    },
+    {
+      action: "screenshot",
+      label: "Save screenshot",
+      glyph: "\u25EB",
+      disabled: !screenshotSupported,
+      run: takeScreenshot
+    },
+    {
+      action: "simulation",
+      label: simulationRunning ? "Pause simulation" : "Resume simulation",
+      glyph: simulationRunning ? "\u23F8" : "\u25B6",
+      disabled: false,
+      pressed: simulationRunning,
+      run: () => {
+        if (instance.isSimulationRunning()) instance.pauseSimulation();
+        else instance.resumeSimulation();
+      }
+    }
+  ];
+  const renderButton = props.renderButton;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-orbit-toolbar": "",
+      role: "toolbar",
+      "aria-label": "Graph controls",
+      className: props.className,
+      style: props.className !== void 0 ? props.style : mergeStyle(
+        { ...cornerStyle(props.position ?? "top-left", props.offset), ...TOOLBAR_STYLE },
+        props.style
+      ),
+      children: buttons.map(
+        (button) => renderButton !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: renderButton(button) }, button.action) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-orbit-toolbar-button": button.action,
+            className: props.buttonClassName,
+            style: props.buttonClassName !== void 0 ? void 0 : button.disabled ? DISABLED_BUTTON_STYLE : BUTTON_STYLE,
+            "aria-label": button.label,
+            title: button.label,
+            "aria-pressed": button.pressed,
+            disabled: button.disabled,
+            onClick: () => {
+              button.run();
+            },
+            children: button.glyph
+          },
+          button.action
+        )
+      )
+    }
+  );
+}
+
+export { GraphToolbar };
+//# sourceMappingURL=Toolbar.js.map
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Toolbar/index.tsx"],"names":[],"mappings":"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","file":"Toolbar.js","sourcesContent":["/**\n * <GraphToolbar> — §16.1 camera & simulation controls (S7-T06).\n *\n * Thin view over the GraphInstance ref API: zoom ±, fit view, reset view,\n * fullscreen toggle, screenshot download, and a simulation play/pause toggle\n * that mirrors the store's `simulationRunning` field. Headless-styleable:\n * providing `className`/`buttonClassName` drops the built-in dark-theme\n * inline styles, and `renderButton` replaces the default <button> rendering\n * entirely while keeping the wiring.\n *\n * Fullscreen note: the instance exposes no container getter by design — the\n * element sent fullscreen is `containerRef.current`, defaulting to\n * `document.documentElement`.\n */\n\nimport { Fragment, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport type { CSSProperties, ReactElement, ReactNode, RefObject } from 'react';\nimport type { AnyGraphInstance } from '../../GraphProvider';\nimport { cornerStyle, mergeStyle, useResolvedInstance } from '../shared';\nimport type { GraphCorner } from '../shared';\n\nexport type GraphToolbarAction =\n  | 'zoom-in'\n  | 'zoom-out'\n  | 'fit-view'\n  | 'reset-view'\n  | 'fullscreen'\n  | 'screenshot'\n  | 'simulation';\n\n/** One toolbar affordance, as handed to the `renderButton` render prop. */\nexport interface GraphToolbarButton {\n  action: GraphToolbarAction;\n  /** Accessible label (also the default tooltip). */\n  label: string;\n  /** Default glyph rendered inside the button. */\n  glyph: string;\n  disabled: boolean;\n  /** Present on the toggles (fullscreen, simulation). */\n  pressed?: boolean;\n  /** Perform the action. */\n  run(): void;\n}\n\nexport interface GraphToolbarProps {\n  /** Explicit instance; defaults to the ambient <Graph>/<GraphProvider> one. */\n  instance?: AnyGraphInstance;\n  /** Corner the toolbar anchors to. Default 'top-left'. */\n  position?: GraphCorner;\n  /** Distance from the two anchored edges in CSS px. Default 12. */\n  offset?: number;\n  /** Class hook for the toolbar root; providing it drops the default styles\n   * INCLUDING placement — position it yourself in CSS. */\n  className?: string;\n  /** Style overrides merged over the defaults; an inset you set here wins\n   * over the one `position` implies (they are resolved per axis, never\n   * layered). */\n  style?: CSSProperties;\n  /** Class hook for each button; providing it drops the default styles. */\n  buttonClassName?: string;\n  /** Element sent fullscreen; default `document.documentElement`. */\n  containerRef?: RefObject<HTMLElement | null>;\n  /** Download filename for screenshots. Default 'orbit-graph.png'. */\n  screenshotFileName?: string;\n  /** Render-prop replacement for a single button (wiring stays intact). */\n  renderButton?: (button: GraphToolbarButton) => ReactNode;\n}\n\n// --- default dark-theme styling (dropped when class hooks are provided) ---\n\nconst TOOLBAR_STYLE: CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  padding: 4,\n  borderRadius: 8,\n  background: 'rgba(23, 25, 32, 0.92)',\n  border: '1px solid rgba(255, 255, 255, 0.14)',\n  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',\n  color: '#e8eaf0',\n  font: '13px/1.4 system-ui, sans-serif',\n};\n\nconst BUTTON_STYLE: CSSProperties = {\n  appearance: 'none',\n  background: 'transparent',\n  border: 'none',\n  borderRadius: 6,\n  color: 'inherit',\n  cursor: 'pointer',\n  font: 'inherit',\n  minWidth: 28,\n  minHeight: 28,\n  padding: '2px 6px',\n};\n\nconst DISABLED_BUTTON_STYLE: CSSProperties = {\n  ...BUTTON_STYLE,\n  cursor: 'default',\n  opacity: 0.4,\n};\n\nexport function GraphToolbar(props: GraphToolbarProps): ReactElement {\n  const instance = useResolvedInstance(props.instance, '<GraphToolbar>');\n\n  // --- store mirror: simulationRunning drives the play/pause toggle ---\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => instance.store.subscribe(onStoreChange),\n    [instance],\n  );\n  const getSimulationRunning = useCallback(\n    () => instance.store.getState().simulationRunning,\n    [instance],\n  );\n  const simulationRunning = useSyncExternalStore(\n    subscribe,\n    getSimulationRunning,\n    getSimulationRunning,\n  );\n\n  // --- fullscreen state mirror (for aria-pressed / label) ---\n  const [fullscreenActive, setFullscreenActive] = useState(false);\n  useEffect(() => {\n    if (typeof document === 'undefined') return undefined;\n    const onChange = (): void => {\n      setFullscreenActive((document.fullscreenElement ?? null) !== null);\n    };\n    document.addEventListener('fullscreenchange', onChange);\n    return () => {\n      document.removeEventListener('fullscreenchange', onChange);\n    };\n  }, []);\n\n  // --- screenshot capability sniff: probe once when the instance is ready\n  // (captureScreenshot resolves null pre-ready and when the engine lacks\n  // support); a null resolution no-op-disables the button permanently. ---\n  const [screenshotSupported, setScreenshotSupported] = useState(true);\n  useEffect(() => {\n    let cancelled = false;\n    let unsubscribe: (() => void) | null = null;\n    const probe = (): void => {\n      void instance.captureScreenshot().then((blob) => {\n        if (!cancelled && blob === null) setScreenshotSupported(false);\n      });\n    };\n    if (instance.store.getState().status === 'ready') {\n      probe();\n    } else {\n      unsubscribe = instance.store.subscribe(() => {\n        if (instance.store.getState().status !== 'ready') return;\n        unsubscribe?.();\n        unsubscribe = null;\n        probe();\n      });\n    }\n    return () => {\n      cancelled = true;\n      unsubscribe?.();\n    };\n  }, [instance]);\n\n  const screenshotFileName = props.screenshotFileName;\n  const takeScreenshot = useCallback((): void => {\n    void instance.captureScreenshot().then((blob) => {\n      if (blob === null) {\n        // Unsupported / not ready — no-op-disable from here on.\n        setScreenshotSupported(false);\n        return;\n      }\n      if (typeof document === 'undefined' || typeof URL.createObjectURL !== 'function') return;\n      const url = URL.createObjectURL(blob);\n      const anchor = document.createElement('a');\n      anchor.href = url;\n      anchor.download = screenshotFileName ?? 'orbit-graph.png';\n      anchor.rel = 'noopener';\n      anchor.style.display = 'none';\n      document.body.appendChild(anchor);\n      anchor.click();\n      anchor.remove();\n      if (typeof URL.revokeObjectURL === 'function') URL.revokeObjectURL(url);\n    });\n  }, [instance, screenshotFileName]);\n\n  const containerRef = props.containerRef;\n  const toggleFullscreen = useCallback((): void => {\n    if (typeof document === 'undefined') return;\n    if ((document.fullscreenElement ?? null) !== null) {\n      if (typeof document.exitFullscreen === 'function') {\n        void document.exitFullscreen().catch(() => undefined);\n      }\n      return;\n    }\n    const el = containerRef?.current ?? document.documentElement;\n    if (typeof el.requestFullscreen === 'function') {\n      void el.requestFullscreen().catch(() => undefined);\n    }\n  }, [containerRef]);\n\n  const buttons: GraphToolbarButton[] = [\n    {\n      action: 'zoom-in',\n      label: 'Zoom in',\n      glyph: '+',\n      disabled: false,\n      run: () => {\n        instance.zoomIn();\n      },\n    },\n    {\n      action: 'zoom-out',\n      label: 'Zoom out',\n      glyph: '−',\n      disabled: false,\n      run: () => {\n        instance.zoomOut();\n      },\n    },\n    {\n      action: 'fit-view',\n      label: 'Fit view',\n      glyph: '⤢',\n      disabled: false,\n      run: () => {\n        instance.fitView();\n      },\n    },\n    {\n      action: 'reset-view',\n      label: 'Reset view',\n      glyph: '↺',\n      disabled: false,\n      run: () => {\n        instance.setViewport({ x: 0, y: 0, zoom: 1 });\n      },\n    },\n    {\n      action: 'fullscreen',\n      label: fullscreenActive ? 'Exit fullscreen' : 'Enter fullscreen',\n      glyph: '⛶',\n      disabled: false,\n      pressed: fullscreenActive,\n      run: toggleFullscreen,\n    },\n    {\n      action: 'screenshot',\n      label: 'Save screenshot',\n      glyph: '◫',\n      disabled: !screenshotSupported,\n      run: takeScreenshot,\n    },\n    {\n      action: 'simulation',\n      label: simulationRunning ? 'Pause simulation' : 'Resume simulation',\n      glyph: simulationRunning ? '⏸' : '▶',\n      disabled: false,\n      pressed: simulationRunning,\n      run: () => {\n        if (instance.isSimulationRunning()) instance.pauseSimulation();\n        else instance.resumeSimulation();\n      },\n    },\n  ];\n\n  const renderButton = props.renderButton;\n  return (\n    <div\n      data-orbit-toolbar=\"\"\n      role=\"toolbar\"\n      aria-label=\"Graph controls\"\n      className={props.className}\n      style={\n        props.className !== undefined\n          ? props.style\n          : mergeStyle(\n              { ...cornerStyle(props.position ?? 'top-left', props.offset), ...TOOLBAR_STYLE },\n              props.style,\n            )\n      }\n    >\n      {buttons.map((button) =>\n        renderButton !== undefined ? (\n          <Fragment key={button.action}>{renderButton(button)}</Fragment>\n        ) : (\n          <button\n            key={button.action}\n            type=\"button\"\n            data-orbit-toolbar-button={button.action}\n            className={props.buttonClassName}\n            style={\n              props.buttonClassName !== undefined\n                ? undefined\n                : button.disabled\n                  ? DISABLED_BUTTON_STYLE\n                  : BUTTON_STYLE\n            }\n            aria-label={button.label}\n            title={button.label}\n            aria-pressed={button.pressed}\n            disabled={button.disabled}\n            onClick={() => {\n              button.run();\n            }}\n          >\n            {button.glyph}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { GraphNode, AcceptedEdge } from '@modernrelay/orbit-core';
+import { A as AnyGraphInstance } from '../GraphProvider-B8ITDXS0.js';
+
+/**
+ * `@modernrelay/orbit-react/components/Tooltip` — `<GraphTooltip>`, the §16.9
+ * hover card (S11-T12).
+ *
+ * Visibility rides the store hover slice (the §7.4 typed hover lane): a
+ * non-null hover arms a `delayMs` timer (default 150); the card mounts when
+ * it fires and unmounts IMMEDIATELY when hover clears — no flicker-out delay.
+ *
+ * BOTH hover namespaces are served: `hover.nodeId` and `hover.edgeId`. A node
+ * WINS when both are set — it is the more specific target and sits on top of
+ * its own links. Edges have no entry in the overlay position lane (that lane
+ * tracks labeled NODE slots), so an edge card always rides the cursor
+ * fallback, which is exactly right: the hovered edge is under the pointer.
+ *
+ * Positioning is imperative (transform writes on a ref — never a React
+ * re-render per movement), fed by two lanes:
+ *  1. the S7 overlay position lane (`instance.labels.subscribePositions` —
+ *     the same public seam <LabelLayer> renders from): when the hovered id is
+ *     in the tracked candidate set, each scheduler tick writes its fresh
+ *     container-relative screen x/y, so the card follows the node through
+ *     simulation drift and camera moves;
+ *  2. the pointer fallback: when the hovered id is NOT label-tracked (the
+ *     common case — labels cover k ranked nodes), a window `pointermove`
+ *     listener (attached only while hovering) pins the card to the cursor
+ *     + a fixed offset. The engine's `spaceToScreen` is not reachable through
+ *     the public instance surface in v0.9, so cursor-anchoring is the
+ *     documented fallback — the hovered node is by definition under the
+ *     cursor.
+ *
+ * Default content: the target's label (`attrs.label` string, else id) plus up
+ * to {@link TOOLTIP_ATTR_ROWS} attr rows (label excluded — it is the title),
+ * every key/value rendered as TEXT NODES only (§14 untrusted-content rule;
+ * hostile attr strings appear literally). `render` / `renderEdge` replace the
+ * card content entirely, and `getEdgeText` retitles an edge card without
+ * taking over its body — useful where the meaningful name lives in an
+ * adapter-injected attr rather than `label` (an Omnigraph edge's relationship
+ * type is at `attrs['orbit:type']`, for instance). The card is pointer-inert
+ * (it must never steal canvas hover).
+ */
+
+/** Max attr rows in the default card content. */
+declare const TOOLTIP_ATTR_ROWS = 6;
+interface GraphTooltipProps {
+    /** Explicit instance (multi-instance pages); ambient context otherwise. */
+    instance?: AnyGraphInstance;
+    /** Replaces the default card content for a NODE (label + attr rows). */
+    render?: (node: GraphNode<any>) => ReactNode;
+    /** Replaces the default card content for an EDGE. */
+    renderEdge?: (edge: AcceptedEdge<any>) => ReactNode;
+    /** Title text for an edge card. Default `attrs.label ?? id`. */
+    getEdgeText?: (edge: AcceptedEdge<any>) => string;
+    /** Set false to ignore edge hovers entirely (nodes only). Default true. */
+    edges?: boolean;
+    /** Hover → show delay in ms. Default 150. */
+    delayMs?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function GraphTooltip(props: GraphTooltipProps): ReactElement;
+
+export { GraphTooltip, type GraphTooltipProps, TOOLTIP_ATTR_ROWS };