nimbus-docs 0.1.6 → 0.1.8

package/dist/react.js

@@ -0,0 +1,782 @@
+import { Component, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/cn.ts
+/**
+* Compose class names with Tailwind conflict resolution. Vendored into
+* lab/diagram so the framework-surface files don't depend on apps/www's
+* `@/lib/cn` alias — keeps the lift to `nimbus-docs/react` verbatim.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/react/registry.ts
+var DiagramRegistry = class {
+	entries = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Set();
+	/** Bumped on every membership change — useSyncExternalStore snapshot key. */
+	version = 0;
+	register(entry) {
+		this.entries.set(entry.id, entry);
+		this.version++;
+		this.notify();
+		return () => {
+			this.entries.delete(entry.id);
+			this.version++;
+			this.notify();
+		};
+	}
+	/**
+	* Pause everything when at least one diagram is unpaused; resume
+	* everything otherwise. A naive per-entry toggle would *invert* mixed
+	* states — resuming the diagrams a reader had deliberately paused.
+	*/
+	toggleAll() {
+		const anyUnpaused = [...this.entries.values()].some((e) => !e.userPaused());
+		for (const entry of this.entries.values()) entry.setPaused(anyUnpaused);
+	}
+	count = () => this.entries.size;
+	getVersion = () => this.version;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	notify() {
+		for (const listener of this.listeners) listener();
+	}
+};
+const diagramRegistry = new DiagramRegistry();
+
+//#endregion
+//#region src/react/diagram.tsx
+function reducer(state, event) {
+	switch (event.type) {
+		case "READY": return state.ready ? state : {
+			...state,
+			ready: true
+		};
+		case "VISIBILITY": return state.visible === event.visible ? state : {
+			...state,
+			visible: event.visible
+		};
+		case "TAB_VISIBILITY": return state.tabVisible === event.tabVisible ? state : {
+			...state,
+			tabVisible: event.tabVisible
+		};
+		case "REDUCED_MOTION": return state.reducedMotion === event.reduced ? state : {
+			...state,
+			reducedMotion: event.reduced
+		};
+		case "TOGGLE": return {
+			...state,
+			userPaused: !state.userPaused
+		};
+		case "SET_PAUSED": return state.userPaused === event.paused ? state : {
+			...state,
+			userPaused: event.paused
+		};
+	}
+}
+function derivePhase(state, reducedMotionMode, pauseWhenOffscreen) {
+	if (!state.ready) return "idle";
+	if (reducedMotionMode === "respect" && state.reducedMotion) return "paused";
+	if (pauseWhenOffscreen && !state.visible) return "paused";
+	if (!state.tabVisible) return "paused";
+	if (state.userPaused) return "paused";
+	return "playing";
+}
+const DiagramContext = createContext(null);
+function useDiagram() {
+	return useContext(DiagramContext);
+}
+const DEFAULT_CONTEXT = {
+	id: "__no_wrapper__",
+	phase: "playing",
+	playing: true,
+	visible: true,
+	tabVisible: true,
+	reducedMotion: false,
+	depth: "working",
+	theme: { id: "default" },
+	reset: () => {},
+	toggle: () => {}
+};
+const WARNED = /* @__PURE__ */ new Set();
+/**
+* Returns the wrapper context, or a default + one-time dev warning when
+* called outside a `<Diagram>`. Used by every hook in nimbus-docs/react
+* so authors can prototype without forgetting the wrapper.
+*/
+function useDiagramOrDefault(hookName) {
+	const ctx = useContext(DiagramContext);
+	if (ctx) return ctx;
+	if (typeof process !== "undefined" && process.env.NODE_ENV !== "production" && !WARNED.has(hookName)) {
+		WARNED.add(hookName);
+		console.warn(`[nimbus-docs/react] ${hookName} called outside a <Diagram> wrapper. Defaults: playing=true, visible=true, reducedMotion=false. Wrap with <Diagram> for off-screen / reduced-motion / tab-hidden gating.`);
+	}
+	return DEFAULT_CONTEXT;
+}
+const MARGIN_ROOTMARGIN_VH = 2;
+/**
+* Debounce window for READY dispatch — only applied when scroll activity
+* was observed in the last `SCROLL_VELOCITY_WINDOW_MS`. On a settled page
+* (initial load, no scrolling), READY fires immediately.
+*
+* Lab finding: the spec's flat 500ms gate caused a visible delay on
+* initial render. Scroll-aware gating preserves the mass-init protection
+* for fast scrolls while keeping page-load latency at zero.
+*/
+const SCROLL_IDLE_MS = 200;
+const SCROLL_VELOCITY_WINDOW_MS = 200;
+/**
+* Catches render errors thrown by the diagram subtree. React 19 still
+* requires class components for error boundaries — no hook equivalent
+* yet. Falls back to a static "Diagram failed" message + a Reset button
+* that both clears local error state AND bumps the outer resetKey so
+* children remount fresh.
+*/
+var DiagramErrorBoundary = class extends Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error, info) {
+		if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") console.error("[nimbus-docs/react] Diagram render error:", error, info);
+	}
+	handleReset = () => {
+		this.setState({ error: null });
+		this.props.onReset();
+	};
+	render() {
+		if (this.state.error) return /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			className: "flex flex-col items-start gap-2 rounded-md border border-red-300 bg-red-50 p-3 text-sm text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-200",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: "Diagram failed to render."
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: this.handleReset,
+				className: "rounded border border-red-400 px-2 py-0.5 text-xs font-medium hover:bg-red-100 dark:border-red-700 dark:hover:bg-red-900",
+				children: "Reset"
+			})]
+		});
+		return this.props.children;
+	}
+};
+/** Inline visually-hidden style — avoids depending on `.sr-only` Tailwind class. */
+const SR_ONLY = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0,0,0,0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+/** True when the keypress originated from a native interactive element — skip our shortcut to let the element's own behaviour fire. */
+function isInteractiveTarget(t) {
+	if (!t || !(t instanceof HTMLElement)) return false;
+	const tag = t.tagName;
+	if (tag === "BUTTON" || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+	if (tag === "A" && t.hasAttribute("href")) return true;
+	if (t.isContentEditable) return true;
+	return false;
+}
+function DiagramRoot(props) {
+	const { children, pauseWhenOffscreen = true, reducedMotion: reducedMotionMode = "respect", errorBoundary = true, keyboard = true, label, className } = props;
+	const id = useId();
+	const rootRef = useRef(null);
+	const [resetKey, setResetKey] = useState(0);
+	const [state, dispatch] = useReducer(reducer, {
+		ready: false,
+		visible: false,
+		tabVisible: true,
+		reducedMotion: false,
+		userPaused: false
+	});
+	useEffect(() => {
+		const doc = (rootRef.current?.ownerDocument.defaultView ?? window).document;
+		const onChange = () => dispatch({
+			type: "TAB_VISIBILITY",
+			tabVisible: doc.visibilityState === "visible"
+		});
+		onChange();
+		doc.addEventListener("visibilitychange", onChange);
+		return () => doc.removeEventListener("visibilitychange", onChange);
+	}, []);
+	useEffect(() => {
+		const mq = (rootRef.current?.ownerDocument.defaultView ?? window).matchMedia("(prefers-reduced-motion: reduce)");
+		const onChange = (e) => dispatch({
+			type: "REDUCED_MOTION",
+			reduced: e.matches
+		});
+		onChange(mq);
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, []);
+	useEffect(() => {
+		const el = rootRef.current;
+		if (!el || typeof IntersectionObserver === "undefined") return;
+		const win = el.ownerDocument.defaultView ?? window;
+		const vh = win.innerHeight || 800;
+		let lastScrollAt = 0;
+		const onScroll = () => {
+			lastScrollAt = Date.now();
+		};
+		win.addEventListener("scroll", onScroll, { passive: true });
+		let scrollIdleTimer = null;
+		let pendingReady = false;
+		const marginObserver = new IntersectionObserver((entries) => {
+			for (const entry of entries) if (entry.isIntersecting) {
+				if (Date.now() - lastScrollAt > SCROLL_VELOCITY_WINDOW_MS) {
+					dispatch({ type: "READY" });
+					continue;
+				}
+				pendingReady = true;
+				if (scrollIdleTimer) clearTimeout(scrollIdleTimer);
+				scrollIdleTimer = setTimeout(() => {
+					if (pendingReady) {
+						dispatch({ type: "READY" });
+						pendingReady = false;
+					}
+				}, SCROLL_IDLE_MS);
+			}
+		}, { rootMargin: `${MARGIN_ROOTMARGIN_VH * vh}px 0px ${MARGIN_ROOTMARGIN_VH * vh}px 0px` });
+		marginObserver.observe(el);
+		const directObserver = new IntersectionObserver((entries) => {
+			for (const entry of entries) dispatch({
+				type: "VISIBILITY",
+				visible: entry.isIntersecting
+			});
+		}, {
+			rootMargin: "0px",
+			threshold: [0, 1]
+		});
+		directObserver.observe(el);
+		return () => {
+			marginObserver.disconnect();
+			directObserver.disconnect();
+			win.removeEventListener("scroll", onScroll);
+			if (scrollIdleTimer) clearTimeout(scrollIdleTimer);
+		};
+	}, []);
+	const toggle = useCallback(() => dispatch({ type: "TOGGLE" }), []);
+	const reset = useCallback(() => {
+		setResetKey((k) => k + 1);
+		dispatch({
+			type: "SET_PAUSED",
+			paused: false
+		});
+	}, []);
+	const handleKeyDown = useCallback((event) => {
+		if (!keyboard) return;
+		if (isInteractiveTarget(event.target)) return;
+		if (event.key === " " || event.code === "Space") {
+			event.preventDefault();
+			toggle();
+		} else if (event.key === "r" || event.key === "R") {
+			event.preventDefault();
+			reset();
+		}
+	}, [
+		keyboard,
+		toggle,
+		reset
+	]);
+	const userPausedRef = useRef(state.userPaused);
+	userPausedRef.current = state.userPaused;
+	useEffect(() => {
+		return diagramRegistry.register({
+			id,
+			setPaused: (paused) => dispatch({
+				type: "SET_PAUSED",
+				paused
+			}),
+			userPaused: () => userPausedRef.current
+		});
+	}, [id]);
+	const phase = derivePhase(state, reducedMotionMode, pauseWhenOffscreen);
+	const playing = phase === "playing";
+	const reducedMotionEffective = reducedMotionMode === "respect" ? state.reducedMotion : false;
+	const visibleEffective = pauseWhenOffscreen ? state.visible : true;
+	const ctx = useMemo(() => ({
+		id,
+		phase,
+		playing,
+		visible: visibleEffective,
+		tabVisible: state.tabVisible,
+		reducedMotion: reducedMotionEffective,
+		depth: "working",
+		theme: { id: "default" },
+		reset,
+		toggle
+	}), [
+		id,
+		phase,
+		playing,
+		visibleEffective,
+		state.tabVisible,
+		reducedMotionEffective,
+		reset,
+		toggle
+	]);
+	const liveText = phase === "playing" ? "Diagram playing" : phase === "paused" ? "Diagram paused" : "";
+	const renderBody = /* @__PURE__ */ jsx("div", {
+		className: "diagram-render",
+		children
+	}, resetKey);
+	return /* @__PURE__ */ jsx(DiagramContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: rootRef,
+			"data-nb-diagram": true,
+			"data-diagram-id": id,
+			"data-phase": phase,
+			"data-playing": String(playing),
+			"data-visible": String(visibleEffective),
+			"data-tab-visible": String(state.tabVisible),
+			"data-reduced-motion": String(reducedMotionEffective),
+			"aria-label": label,
+			role: label ? "region" : void 0,
+			tabIndex: keyboard ? 0 : void 0,
+			onKeyDown: handleKeyDown,
+			className: cn("flex flex-col", className),
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				role: "status",
+				style: SR_ONLY,
+				children: liveText
+			}), errorBoundary ? /* @__PURE__ */ jsx(DiagramErrorBoundary, {
+				onReset: reset,
+				children: renderBody
+			}) : renderBody]
+		})
+	});
+}
+const Diagram = DiagramRoot;
+
+//#endregion
+//#region src/react/hooks/use-phase.ts
+/**
+* Predicate-gated phase walker. Reads `playing` / `visible` / `tabVisible`
+* / `reducedMotion` from the surrounding `<Diagram>` and pauses
+* automatically when any gate fails.
+*
+* Steps may carry a `when(ctx)` predicate that filters them out for a
+* given cycle, and a `data` payload surfaced while the step holds. Mode
+* toggles, branches, alternating loops — anything cycle-dependent —
+* composes via the predicate plus user-supplied `context`.
+*
+* Two run modes:
+* - `autoplay: true` (default) — ambient looping animation. Freezes under
+*   reduced motion (`data` reads `null`).
+* - `autoplay: false` — idle until `start()`. Started runs are
+*   user-initiated *function*, not decoration: they keep advancing under
+*   reduced motion (gate your CSS transition durations card-side), and a
+*   `start()` while the page is paused arms as soon as play resumes.
+*
+* The scheduler depends on the current step's *values* (id, hold), not
+* on `steps` / `context` identity — inline literals are safe and won't
+* re-arm the hold timer under frequent re-renders.
+*/
+function usePhase({ steps, context, loop = true, autoplay = true }) {
+	const ctx = useDiagramOrDefault("usePhase");
+	const [cycle, setCycle] = useState(0);
+	const [index, setIndex] = useState(0);
+	const [running, setRunning] = useState(autoplay);
+	const sequence = useMemo(() => {
+		const seq = [];
+		let prev = "";
+		const userContext = context ?? {};
+		for (const step of steps) {
+			const when = step.when;
+			if (!when || when({
+				cycle,
+				current: prev,
+				...userContext
+			})) {
+				seq.push(step);
+				prev = step.id;
+			}
+		}
+		return seq;
+	}, [
+		cycle,
+		context,
+		steps
+	]);
+	const currentStep = sequence[index] ?? sequence[sequence.length - 1] ?? null;
+	const currentId = running ? currentStep?.id ?? "" : "";
+	const currentHold = currentStep?.hold ?? null;
+	const advanceRef = useRef(() => {});
+	const sequenceRef = useRef(sequence);
+	const runningRef = useRef(running);
+	useEffect(() => {
+		advanceRef.current = () => {
+			if (index + 1 >= sequence.length) {
+				if (loop) {
+					setCycle((c) => c + 1);
+					setIndex(0);
+				} else if (!autoplay) {
+					setCycle((c) => c + 1);
+					setIndex(0);
+					setRunning(false);
+				}
+			} else setIndex((i) => i + 1);
+		};
+		sequenceRef.current = sequence;
+		runningRef.current = running;
+	});
+	const hasSteps = steps.length > 0;
+	useEffect(() => {
+		if (!running) return;
+		if (!ctx.playing) return;
+		if (ctx.reducedMotion && autoplay) return;
+		if (currentHold === null) {
+			if (!hasSteps) return;
+			const t = setTimeout(() => advanceRef.current(), 0);
+			return () => clearTimeout(t);
+		}
+		const t = setTimeout(() => advanceRef.current(), currentHold);
+		return () => clearTimeout(t);
+	}, [
+		index,
+		cycle,
+		running,
+		autoplay,
+		ctx.playing,
+		ctx.reducedMotion,
+		currentId,
+		currentHold,
+		hasSteps
+	]);
+	const start = useCallback(() => {
+		if (runningRef.current) return;
+		setIndex(0);
+		setRunning(true);
+	}, []);
+	const advance = useCallback(() => advanceRef.current(), []);
+	const goto = useCallback((id) => {
+		const i = sequenceRef.current.findIndex((s) => s.id === id);
+		if (i < 0) return;
+		setIndex(i);
+		setRunning(true);
+	}, []);
+	const reset = useCallback(() => {
+		setCycle(0);
+		setIndex(0);
+		setRunning(autoplay);
+	}, [autoplay]);
+	return {
+		current: currentId,
+		index,
+		cycle,
+		data: running && currentStep && !(ctx.reducedMotion && autoplay) ? currentStep.data ?? null : null,
+		running,
+		start,
+		advance,
+		goto,
+		reset
+	};
+}
+
+//#endregion
+//#region src/react/hooks/use-measure.ts
+/**
+* DOM rect + optional selector callback. The selector receives the
+* observed element and its rect, and returns whatever derived geometry
+* the author needs (NodeRect, EdgeData, etc.).
+*
+* For multi-element measurements (e.g. measuring a container plus 5
+* child nodes), pass the container ref and read the other refs from
+* closure inside the selector. The selector recomputes when the
+* container resizes — which it typically does when children grow
+* because the container's intrinsic size is content-derived. For
+* state-driven re-layouts that the ResizeObserver might miss, pass
+* `options.deps`.
+*/
+function useMeasure(ref, selector, options = {}) {
+	const { deps = [] } = options;
+	const [rect, setRect] = useState(null);
+	const [selected, setSelected] = useState(null);
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+	const sampleRef = useRef(() => {});
+	const boundElRef = useRef(null);
+	const unbindRef = useRef(null);
+	const bind = (el) => {
+		const sample = (r) => {
+			setRect(r);
+			const s = selectorRef.current;
+			if (s) setSelected(s(el, r));
+		};
+		sampleRef.current = () => {
+			sample(el.getBoundingClientRect());
+		};
+		let cancelled = false;
+		el.ownerDocument.fonts?.ready.then(() => {
+			if (!cancelled) sampleRef.current();
+		});
+		const win = el.ownerDocument.defaultView ?? window;
+		if (typeof win.ResizeObserver === "undefined") {
+			sampleRef.current();
+			return () => {
+				cancelled = true;
+			};
+		}
+		const ro = new win.ResizeObserver(() => {
+			sample(el.getBoundingClientRect());
+		});
+		ro.observe(el);
+		sampleRef.current();
+		return () => {
+			cancelled = true;
+			ro.disconnect();
+		};
+	};
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (el === boundElRef.current) return;
+		unbindRef.current?.();
+		boundElRef.current = el;
+		unbindRef.current = el ? bind(el) : null;
+	});
+	useLayoutEffect(() => () => {
+		unbindRef.current?.();
+		unbindRef.current = null;
+		boundElRef.current = null;
+	}, []);
+	useLayoutEffect(() => {
+		sampleRef.current();
+	}, deps);
+	return {
+		rect,
+		selected
+	};
+}
+
+//#endregion
+//#region src/react/hooks/use-tab-indicator.ts
+/**
+* Headless sliding-indicator measurement for a tab group.
+*
+* Pure state + lifecycle — no DOM produced, no styling assumed. The
+* consumer renders the indicator however it wants, applying `style`
+* positionally.
+*
+* Re-measures on `activeId` change and on container resize. Returns
+* `null` style when `activeId` is null or its tab ref isn't mounted —
+* consumer renders nothing in that case, which also prevents a
+* "mount-from-zero" transition the first time the indicator appears.
+*/
+function useTabIndicator(containerRef, getTab, activeId) {
+	const [style, setStyle] = useState(null);
+	const measure = useCallback(() => {
+		const container = containerRef.current;
+		if (!container || activeId == null) {
+			setStyle(null);
+			return;
+		}
+		const btn = getTab(activeId);
+		if (!btn) {
+			setStyle(null);
+			return;
+		}
+		const cRect = container.getBoundingClientRect();
+		const bRect = btn.getBoundingClientRect();
+		setStyle({
+			top: bRect.top - cRect.top,
+			left: bRect.left - cRect.left,
+			width: bRect.width,
+			height: bRect.height
+		});
+	}, [
+		containerRef,
+		getTab,
+		activeId
+	]);
+	useLayoutEffect(() => {
+		measure();
+	}, [measure]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => measure());
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [containerRef, measure]);
+	return { style };
+}
+
+//#endregion
+//#region src/react/hooks/use-ref-setters.ts
+/**
+* Stable per-id ref callbacks for a refs map — the ergonomic half of the
+* "refs map + setter factory" pattern. Instead of N individual `useRef`s
+* and N inline `ref={(el) => …}` arrows (which churn refs every render),
+* keep one map and hand each element a cached callback:
+*
+* ```tsx
+* const nodeRefs = useRef<Partial<Record<NodeId, HTMLDivElement | null>>>({});
+* const setNode = useRefSetters(nodeRefs);
+*
+* <div ref={setNode("prompt")}>Prompt</div>
+* <div ref={setNode("model")}>Model</div>
+* ```
+*
+* Measurement stays caller-side (read `refs.current` inside a `useMeasure`
+* selector) — this hook owns only the ref plumbing.
+*/
+function useRefSetters(refs) {
+	const cache = useRef(/* @__PURE__ */ new Map());
+	return (id) => {
+		let cb = cache.current.get(id);
+		if (!cb) {
+			cb = (el) => {
+				refs.current[id] = el;
+			};
+			cache.current.set(id, cb);
+		}
+		return cb;
+	};
+}
+
+//#endregion
+//#region src/react/hooks/use-media-query.ts
+/**
+* Reactive `window.matchMedia` subscription, SSR-safe.
+*
+* The server snapshot returns `defaultValue` (default `false`), so static
+* builds render the no-match branch and hydrate without mismatch warnings;
+* the first client render corrects it if the query matches.
+*
+* ```ts
+* const isMobile = useMediaQuery("(max-width: 640px)");
+* ```
+*/
+function useMediaQuery(query, defaultValue = false) {
+	return useSyncExternalStore(useCallback((onChange) => {
+		const mq = window.matchMedia(query);
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, [query]), () => window.matchMedia(query).matches, () => defaultValue);
+}
+
+//#endregion
+//#region src/react/geometry.ts
+/** Anchor point on a rect edge. `frac` runs 0→1 from top/left. */
+function edgePoint(rect, side, frac = .5) {
+	if (side === "top") return {
+		x: rect.l + rect.w * frac,
+		y: rect.t
+	};
+	if (side === "bottom") return {
+		x: rect.l + rect.w * frac,
+		y: rect.t + rect.h
+	};
+	if (side === "left") return {
+		x: rect.l,
+		y: rect.t + rect.h * frac
+	};
+	return {
+		x: rect.l + rect.w,
+		y: rect.t + rect.h * frac
+	};
+}
+function straightPath(from, to, arrowOffset) {
+	const dx = Math.abs(to.x - from.x);
+	if (Math.abs(to.y - from.y) < 2) {
+		const dir = to.x > from.x ? 1 : -1;
+		return `M ${from.x},${from.y} L ${to.x - dir * arrowOffset},${to.y}`;
+	}
+	if (dx < 2) {
+		const dir = to.y > from.y ? 1 : -1;
+		return `M ${from.x},${from.y} L ${to.x},${to.y - dir * arrowOffset}`;
+	}
+	return `M ${from.x},${from.y} L ${to.x},${to.y}`;
+}
+function elbowPath(from, to, r, arrowOffset) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	const corner = Math.abs(dx) > Math.abs(dy) ? {
+		x: to.x,
+		y: from.y
+	} : {
+		x: from.x,
+		y: to.y
+	};
+	const dx1 = Math.sign(corner.x - from.x);
+	const dy1 = Math.sign(corner.y - from.y);
+	const dx2 = Math.sign(to.x - corner.x);
+	const dy2 = Math.sign(to.y - corner.y);
+	const seg1Len = Math.abs(corner.x - from.x) + Math.abs(corner.y - from.y);
+	const seg2Len = Math.abs(to.x - corner.x) + Math.abs(to.y - corner.y);
+	const rr = Math.max(2, Math.min(r, seg1Len / 2, seg2Len / 2));
+	const preX = corner.x - dx1 * rr;
+	const preY = corner.y - dy1 * rr;
+	const postX = corner.x + dx2 * rr;
+	const postY = corner.y + dy2 * rr;
+	const endX = to.x - dx2 * arrowOffset;
+	const endY = to.y - dy2 * arrowOffset;
+	return `M ${from.x},${from.y} L ${preX},${preY} Q ${corner.x},${corner.y} ${postX},${postY} L ${endX},${endY}`;
+}
+function vSplitPath(from, to, r) {
+	if (Math.abs(from.x - to.x) < 1) return `M ${from.x},${from.y} L ${to.x},${to.y}`;
+	const midY = (from.y + to.y) / 2;
+	const sx = Math.sign(to.x - from.x);
+	const sy1 = Math.sign(midY - from.y);
+	const sy2 = Math.sign(to.y - midY);
+	const rr = Math.min(r, Math.abs(midY - from.y), Math.abs(to.x - from.x) / 2, Math.abs(to.y - midY));
+	return [
+		`M ${from.x},${from.y}`,
+		`L ${from.x},${midY - rr * sy1}`,
+		`Q ${from.x},${midY} ${from.x + rr * sx},${midY}`,
+		`L ${to.x - rr * sx},${midY}`,
+		`Q ${to.x},${midY} ${to.x},${midY + rr * sy2}`,
+		`L ${to.x},${to.y}`
+	].join(" ");
+}
+/** Build an SVG path string between two points using the given route. */
+function routeEdge(from, to, route = "auto", options = {}) {
+	const arrowOffset = options.arrowOffset ?? 6;
+	if (route === "vSplit") return vSplitPath(from, to, options.radius ?? 6);
+	if (route === "straight") return straightPath(from, to, arrowOffset);
+	if (route === "elbow") return elbowPath(from, to, options.radius ?? 10, arrowOffset);
+	return Math.abs(from.x - to.x) < 2 || Math.abs(from.y - to.y) < 2 ? straightPath(from, to, arrowOffset) : elbowPath(from, to, options.radius ?? 10, arrowOffset);
+}
+/**
+* Resolve declarative edge specs against a map of measured rects.
+* Specs whose endpoints aren't in `rects` yet (unmounted nodes,
+* first-paint gaps) are skipped rather than rendered degenerate.
+*/
+function resolveEdges(specs, rects, options = {}) {
+	const out = [];
+	for (const spec of specs) {
+		const fromRect = rects[spec.from[0]];
+		const toRect = rects[spec.to[0]];
+		if (!fromRect || !toRect) continue;
+		const from = edgePoint(fromRect, spec.from[1], spec.from[2] ?? .5);
+		const to = edgePoint(toRect, spec.to[1], spec.to[2] ?? .5);
+		out.push({
+			id: spec.id,
+			from,
+			to,
+			d: routeEdge(from, to, spec.route ?? "auto", options),
+			ghost: spec.ghost
+		});
+	}
+	return out;
+}
+
+//#endregion
+export { Diagram, cn, diagramRegistry, edgePoint, resolveEdges, routeEdge, useDiagram, useDiagramOrDefault, useMeasure, useMediaQuery, usePhase, useRefSetters, useTabIndicator };
+//# sourceMappingURL=react.js.map