@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/ridgeline/ridgeline.js

@@ -0,0 +1,701 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { REVEAL, SWELL, tween } from "../lib/spring-tween.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ridgeline/ridgeline.tsx
+/** Points along each ridge, the axis strip, the gap between the tooltip and what it describes, and how far the lifted ridge rises, in pixels. */
+const SAMPLES = 96;
+const AXIS = 28;
+const TIP = 14;
+const LIFT = 6;
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const PERCENT = new Intl.NumberFormat("en-US", {
+	style: "percent",
+	maximumFractionDigits: 0
+});
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const mix = (a, b, t) => a + (b - a) * t;
+function quantile(sorted, q) {
+	if (!sorted.length) return 0;
+	const at = (sorted.length - 1) * q;
+	const low = Math.floor(at);
+	const high = Math.ceil(at);
+	return sorted[low] + (sorted[high] - sorted[low]) * (at - low);
+}
+function statsOf(values) {
+	const sorted = values.filter(Number.isFinite).sort((a, b) => a - b);
+	return {
+		sorted,
+		n: sorted.length,
+		min: sorted[0] ?? 0,
+		max: sorted[sorted.length - 1] ?? 0,
+		q1: quantile(sorted, .25),
+		median: quantile(sorted, .5),
+		q3: quantile(sorted, .75)
+	};
+}
+/** Silverman's rule of thumb for the smoothing of a Gaussian kernel. */
+function silverman(stats) {
+	if (stats.n < 2) return 1;
+	const mean = stats.sorted.reduce((sum, value) => sum + value, 0) / stats.n;
+	const sd = Math.sqrt(stats.sorted.reduce((sum, value) => sum + (value - mean) ** 2, 0) / (stats.n - 1));
+	const spread = Math.min(sd, (stats.q3 - stats.q1) / 1.34 || sd);
+	return Math.max(1e-6, .9 * (spread || 1) * Math.pow(stats.n, -.2));
+}
+function niceStep(span, count) {
+	const raw = span / Math.max(1, count) || 1;
+	const power = Math.pow(10, Math.floor(Math.log10(raw)));
+	const unit = raw / power;
+	return (unit >= 5 ? 5 : unit >= 2 ? 2 : 1) * power;
+}
+/** Samples a Gaussian kernel density across the domain. */
+function density(stats, lo, hi, bandwidth) {
+	const xs = [];
+	const ys = [];
+	const norm = 1 / (Math.max(1, stats.n) * bandwidth * Math.sqrt(2 * Math.PI));
+	for (let i = 0; i < SAMPLES; i++) {
+		const x = lo + (hi - lo) * i / 95;
+		let sum = 0;
+		for (const value of stats.sorted) {
+			const u = (x - value) / bandwidth;
+			if (u > -5 && u < 5) sum += Math.exp(-.5 * u * u);
+		}
+		xs.push(x);
+		ys.push(sum * norm);
+	}
+	return {
+		xs,
+		ys
+	};
+}
+const heightAt = (shape, x) => {
+	const { xs, ys } = shape;
+	if (x <= xs[0] || x >= xs[xs.length - 1]) return 0;
+	let i = 1;
+	while (i < xs.length - 1 && xs[i] < x) i++;
+	const t = (x - xs[i - 1]) / (xs[i] - xs[i - 1] || 1);
+	return mix(ys[i - 1], ys[i], t);
+};
+/** Ridge tone: one hue, the first series colour, from a light tint (low median) to full strength (high median), so the scale never passes through a muddy middle. */
+const toneOf = (t) => `color-mix(in oklab, var(--color-chart-1) ${Math.round(38 + clamp(t, 0, 1) * 62)}%, var(--color-surface))`;
+const Ridgeline = forwardRef(function Ridgeline({ series, label, unit = "", formatValue, domain, overlap = 2.4, rowHeight = 30, bandwidth, tint = true, active, defaultActive = null, onActiveChange, emptyLabel = "No data yet", className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const plot = useRef(null);
+	const tip = useRef(null);
+	const cross = useRef(null);
+	const format = (value) => formatValue ? formatValue(value) : `${GROUPED.format(value).replace("-", "−")}${unit}`;
+	const [width, setWidth] = useState(0);
+	useIsomorphicLayoutEffect(() => {
+		const node = plot.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setWidth(node.clientWidth));
+		observer.observe(node);
+		setWidth(node.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	const signature = JSON.stringify([
+		series,
+		domain,
+		bandwidth
+	]);
+	const model = useMemo(() => {
+		const stats = series.map((entry) => statsOf(entry.values));
+		const widths = stats.map((entry) => bandwidth ?? silverman(entry));
+		const filled = stats.map((entry, index) => ({
+			entry,
+			room: 2.5 * widths[index]
+		})).filter(({ entry }) => entry.n);
+		let lo = domain?.[0] ?? Math.min(...filled.map(({ entry, room }) => entry.min - room));
+		let hi = domain?.[1] ?? Math.max(...filled.map(({ entry, room }) => entry.max + room));
+		if (!Number.isFinite(lo) || !Number.isFinite(hi) || lo === hi) {
+			lo = 0;
+			hi = 1;
+		}
+		if (!domain) {
+			const step = niceStep(hi - lo, 5);
+			lo = Math.floor(lo / step) * step;
+			hi = Math.ceil(hi / step) * step;
+		}
+		const curves = stats.map((entry, index) => entry.n ? density(entry, lo, hi, widths[index]) : {
+			xs: Array.from({ length: SAMPLES }, (_, i) => lo + (hi - lo) * i / 95),
+			ys: new Array(SAMPLES).fill(0)
+		});
+		const peak = Math.max(1e-9, ...curves.flatMap((curve) => curve.ys));
+		const shapes = new Map(series.map((entry, index) => {
+			const curve = curves[index];
+			const stat = stats[index];
+			return [entry.id, {
+				xs: curve.xs,
+				ys: curve.ys.map((y) => y / peak),
+				row: index,
+				q1: stat.q1,
+				median: stat.median,
+				q3: stat.q3
+			}];
+		}));
+		return {
+			stats: new Map(series.map((entry, index) => [entry.id, stats[index]])),
+			shapes,
+			lo,
+			hi
+		};
+	}, [signature]);
+	const [ownActive, setOwnActive] = useState(defaultActive);
+	const current = active !== void 0 ? active : ownActive;
+	const setCurrent = (id) => {
+		if (active === void 0) setOwnActive(id);
+		if (id !== current) onActiveChange?.(id);
+	};
+	const [cursor, setCursor] = useState(null);
+	const gutter = width > 0 && width < 420 ? 36 : 52;
+	const top = Math.ceil((overlap - 1) * rowHeight) + LIFT + 8;
+	const height = top + series.length * rowHeight + AXIS;
+	const plotWidth = Math.max(40, width - gutter - 4);
+	const baselineOf = (row) => top + (row + 1) * rowHeight;
+	const drawn = useRef({
+		shapes: /* @__PURE__ */ new Map(),
+		lo: 0,
+		hi: 1
+	});
+	const geometry = useRef({
+		gutter,
+		plotWidth,
+		rowHeight,
+		overlap,
+		top,
+		current
+	});
+	const xOf = (value) => {
+		const d = drawn.current;
+		return gutter + (value - d.lo) / (d.hi - d.lo || 1) * plotWidth;
+	};
+	const paint = () => {
+		const root = plot.current;
+		if (!root) return;
+		const d = drawn.current;
+		const g = geometry.current;
+		const sx = (value) => g.gutter + (value - d.lo) / (d.hi - d.lo || 1) * g.plotWidth;
+		const lift = g.rowHeight * g.overlap;
+		/** A ridge as a path; `from` and `to` cut it to a stretch of the axis (the middle half). */
+		const curvePath = (shape, closed, from = -Infinity, to = Infinity) => {
+			const base = g.top + (shape.row + 1) * g.rowHeight;
+			const points = [];
+			const push = (x, y) => points.push(`${sx(x).toFixed(2)},${(base - y * lift).toFixed(2)}`);
+			if (from > -Infinity) push(from, heightAt(shape, from));
+			shape.xs.forEach((x, i) => {
+				if (x > from && x < to) push(x, shape.ys[i]);
+			});
+			if (to < Infinity) push(to, heightAt(shape, to));
+			if (!points.length) return "";
+			const first = from > -Infinity ? from : shape.xs[0];
+			const last = to < Infinity ? to : shape.xs[shape.xs.length - 1];
+			return closed ? `M${sx(first).toFixed(2)},${base}L${points.join("L")}L${sx(last).toFixed(2)},${base}Z` : `M${points.join("L")}`;
+		};
+		const mark = (node, shape) => {
+			if (!node) return;
+			const x = sx(shape.median).toFixed(2);
+			const base = g.top + (shape.row + 1) * g.rowHeight;
+			node.setAttribute("x1", x);
+			node.setAttribute("x2", x);
+			node.setAttribute("y1", String(base));
+			node.setAttribute("y2", (base - heightAt(shape, shape.median) * lift).toFixed(2));
+		};
+		for (const [id, shape] of d.shapes) {
+			const group = root.querySelector(`[data-ridge="${CSS.escape(id)}"]`);
+			group?.querySelector("[data-part=fill]")?.setAttribute("d", curvePath(shape, true));
+			group?.querySelector("[data-part=line]")?.setAttribute("d", curvePath(shape, false));
+			mark(group?.querySelector("[data-part=median]") ?? null, shape);
+		}
+		const shape = g.current ? d.shapes.get(g.current) : void 0;
+		if (shape) {
+			const lens = root.querySelector("[data-part=lens]");
+			lens?.querySelector("[data-part=lens-fill]")?.setAttribute("d", curvePath(shape, true));
+			lens?.querySelector("[data-part=lens-line]")?.setAttribute("d", curvePath(shape, false));
+			lens?.querySelector("[data-part=lens-band]")?.setAttribute("d", curvePath(shape, true, shape.q1, shape.q3));
+			mark(lens?.querySelector("[data-part=lens-median]") ?? null, shape);
+		}
+		for (const node of root.querySelectorAll("[data-tick]")) node.style.transform = `translate3d(${sx(Number(node.dataset.tick)).toFixed(2)}px, 0, 0)`;
+	};
+	const paintRef = useRef(paint);
+	useIsomorphicLayoutEffect(() => {
+		geometry.current = {
+			gutter,
+			plotWidth,
+			rowHeight,
+			overlap,
+			top,
+			current
+		};
+		paintRef.current = paint;
+		paint();
+	});
+	const [shown, setShown] = useState(false);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setShown(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setShown(true);
+		}, { threshold: .3 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (!shown) return;
+		const d = drawn.current;
+		const first = d.shapes.size === 0;
+		const from = /* @__PURE__ */ new Map();
+		for (const [id, target] of model.shapes) {
+			const now = d.shapes.get(id);
+			from.set(id, now ? {
+				...now,
+				xs: [...now.xs],
+				ys: [...now.ys]
+			} : {
+				...target,
+				ys: target.ys.map(() => 0),
+				q1: target.median,
+				q3: target.median
+			});
+		}
+		const fromLo = first ? model.lo : d.lo;
+		const fromHi = first ? model.hi : d.hi;
+		const settle = () => {
+			d.shapes = new Map([...model.shapes].map(([id, shape]) => [id, { ...shape }]));
+			d.lo = model.lo;
+			d.hi = model.hi;
+			paintRef.current();
+		};
+		d.shapes = new Map([...from].map(([id, shape]) => [id, {
+			...shape,
+			xs: [...shape.xs],
+			ys: [...shape.ys]
+		}]));
+		return tween(first ? SWELL : REVEAL, (t) => {
+			d.lo = mix(fromLo, model.lo, t);
+			d.hi = mix(fromHi, model.hi, t);
+			for (const [id, to] of model.shapes) {
+				const f = from.get(id);
+				const out = d.shapes.get(id);
+				const local = first ? clamp((t - to.row * .025) / (1 - Math.min(.5, model.shapes.size * .025)), 0, 1) : t;
+				for (let i = 0; i < SAMPLES; i++) {
+					out.xs[i] = mix(f.xs[i], to.xs[i], local);
+					out.ys[i] = mix(f.ys[i], to.ys[i], local);
+				}
+				out.row = mix(f.row, to.row, local);
+				out.q1 = mix(f.q1, to.q1, local);
+				out.median = mix(f.median, to.median, local);
+				out.q3 = mix(f.q3, to.q3, local);
+			}
+			paintRef.current();
+		}, settle);
+	}, [shown, model]);
+	const tickCount = Math.max(2, Math.floor(plotWidth / 72));
+	const step = niceStep(model.hi - model.lo, tickCount);
+	const ticks = [];
+	for (let value = Math.ceil(model.lo / step) * step; value <= model.hi + 1e-9; value += step) ticks.push(Math.round(value * 1e6) / 1e6 || 0);
+	const activeStats = current ? model.stats.get(current) : void 0;
+	const activeSeries = current ? series.find((entry) => entry.id === current) : void 0;
+	const reading = cursor && activeStats ? {
+		value: cursor.value,
+		below: activeStats.n ? activeStats.sorted.filter((value) => value <= cursor.value).length / activeStats.n : 0
+	} : null;
+	const [held, setHeld] = useState(null);
+	if (current && (held?.id !== current || held.value !== (reading?.value ?? null))) setHeld({
+		id: current,
+		value: reading?.value ?? null
+	});
+	const tipSeries = held ? series.find((entry) => entry.id === held.id) : void 0;
+	const tipStats = held ? model.stats.get(held.id) : void 0;
+	const tipBelow = held && held.value !== null && tipStats?.n ? tipStats.sorted.filter((value) => value <= held.value).length / tipStats.n : 0;
+	const shownBefore = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		const bubble = tip.current;
+		const shape = current ? model.shapes.get(current) : void 0;
+		if (cross.current) cross.current.style.transform = `translate3d(${reading ? xOf(reading.value).toFixed(2) : 0}px, 0, 0)`;
+		if (!bubble || !shape || !width) {
+			shownBefore.current = false;
+			return;
+		}
+		const tw = bubble.offsetWidth;
+		const th = bubble.offsetHeight;
+		const ax = reading ? xOf(reading.value) : xOf(shape.median);
+		const ay = cursor?.pointerY ?? baselineOf(shape.row) - heightAt(shape, shape.median) * rowHeight * overlap - LIFT;
+		let left = ax + TIP;
+		if (left + tw > width) left = ax - TIP - tw;
+		let y = ay - th - TIP;
+		if (y < 0) y = ay + TIP;
+		if (!shownBefore.current) bubble.style.transition = "none";
+		bubble.style.translate = `${clamp(left, 0, Math.max(0, width - tw))}px ${clamp(y, 0, Math.max(0, height - th))}px`;
+		if (!shownBefore.current) {
+			bubble.offsetWidth;
+			bubble.style.transition = "";
+		}
+		shownBefore.current = true;
+	});
+	const valueAt = (x) => {
+		const d = drawn.current;
+		return d.lo + clamp((x - gutter) / plotWidth, 0, 1) * (d.hi - d.lo);
+	};
+	/** The ridge under the pointer: the front-most one whose outline holds it, else the row it is in. */
+	const pick = (x, y) => {
+		const value = valueAt(x);
+		const lift = rowHeight * overlap;
+		let best = null;
+		let bestId = null;
+		for (const [id, shape] of drawn.current.shapes) {
+			const base = baselineOf(shape.row);
+			const h = heightAt(shape, value) * lift;
+			if (y <= base + 2 && y >= base - h - 4 && (!best || shape.row > best.row)) {
+				best = shape;
+				bestId = id;
+			}
+		}
+		if (!bestId) bestId = series[clamp(Math.floor((y - top) / rowHeight), 0, series.length - 1)]?.id ?? null;
+		return {
+			id: bestId,
+			value
+		};
+	};
+	const onPointerMove = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const y = event.clientY - rect.top;
+		if (x < gutter - 8 || y > height - AXIS + 4) {
+			if (event.pointerType === "mouse") {
+				setCurrent(null);
+				setCursor(null);
+			}
+			return;
+		}
+		const hit = pick(x, y);
+		setCurrent(hit.id);
+		setCursor({
+			value: hit.value,
+			pointerY: y
+		});
+	};
+	const onKeyDown = (event) => {
+		const at = current ? series.findIndex((entry) => entry.id === current) : -1;
+		const choose = (index) => {
+			event.preventDefault();
+			const next = series[clamp(index, 0, series.length - 1)];
+			if (!next) return;
+			setCurrent(next.id);
+			setCursor({
+				value: cursor?.value ?? model.stats.get(next.id)?.median ?? model.lo,
+				pointerY: null
+			});
+		};
+		const nudge = (direction) => {
+			event.preventDefault();
+			if (!current) {
+				choose(0);
+				return;
+			}
+			const base = cursor?.value ?? model.stats.get(current)?.median ?? model.lo;
+			setCursor({
+				value: clamp((Math.round(base / step) + direction) * step, model.lo, model.hi),
+				pointerY: null
+			});
+		};
+		if (event.key === "ArrowDown") choose(at + 1);
+		else if (event.key === "ArrowUp") choose(at < 0 ? 0 : at - 1);
+		else if (event.key === "Home") choose(0);
+		else if (event.key === "End") choose(series.length - 1);
+		else if (event.key === "ArrowRight") nudge(1);
+		else if (event.key === "ArrowLeft") nudge(-1);
+		else if (event.key === "Escape" && current) {
+			event.preventDefault();
+			setCurrent(null);
+			setCursor(null);
+		}
+	};
+	const empty = !series.length || series.every((entry) => !entry.values.length);
+	const ridgeColor = (value) => tint ? toneOf((value - model.lo) / (model.hi - model.lo || 1)) : "var(--color-chart-1)";
+	const describe = (entry) => {
+		const s = model.stats.get(entry.id);
+		return `${entry.label}: median ${format(s.median)}, middle half ${format(s.q1)} to ${format(s.q3)}, range ${format(s.min)} to ${format(s.max)}, ${s.n} values`;
+	};
+	const spoken = activeSeries ? `${describe(activeSeries)}${reading ? `. ${PERCENT.format(reading.below)} at or below ${format(reading.value)}` : ""}` : "";
+	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}. ${series.map(describe).join(". ")}.`;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "ridgeline",
+		"aria-label": label,
+		className: cn("ridgeline box-border font-sans text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: plot,
+				"data-slot": "ridgeline-plot",
+				"data-active": current ? "" : void 0,
+				"data-scrubbing": current ? "" : void 0,
+				"data-cursor": reading ? "" : void 0,
+				role: empty ? void 0 : "slider",
+				tabIndex: empty ? void 0 : 0,
+				"aria-label": empty ? void 0 : `${label}, choose a ridge`,
+				"aria-orientation": empty ? void 0 : "vertical",
+				"aria-valuemin": empty ? void 0 : 1,
+				"aria-valuemax": empty ? void 0 : series.length,
+				"aria-valuenow": empty ? void 0 : (activeSeries ? series.indexOf(activeSeries) : 0) + 1,
+				"aria-valuetext": empty ? void 0 : spoken || summary,
+				className: "ridgeline-plot",
+				style: { height },
+				onPointerMove,
+				onPointerDown: onPointerMove,
+				onPointerLeave: (event) => {
+					if (event.pointerType === "mouse") {
+						setCurrent(null);
+						setCursor(null);
+					}
+				},
+				onKeyDown,
+				onBlur: () => {
+					setCurrent(null);
+					setCursor(null);
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-x-0 top-0",
+						style: { height: height - AXIS + 22 },
+						children: ticks.map((value) => /* @__PURE__ */ jsx("div", {
+							"data-tick": value,
+							className: "ridgeline-tick motion-safe:animate-fade-in",
+							style: { top: top - rowHeight * .5 },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "ridgeline-tick-label",
+								children: format(value)
+							})
+						}, value))
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: cross,
+						"aria-hidden": "true",
+						className: "ridgeline-crosshair",
+						style: {
+							top: top - rowHeight * .5,
+							height: height - AXIS - top + rowHeight * .5
+						}
+					}),
+					/* @__PURE__ */ jsxs("svg", {
+						width: width || void 0,
+						height,
+						viewBox: `0 0 ${Math.max(1, width)} ${height}`,
+						"aria-hidden": "true",
+						focusable: "false",
+						className: "absolute inset-0 block overflow-visible",
+						children: [series.map((entry) => /* @__PURE__ */ jsxs("g", {
+							"data-ridge": entry.id,
+							"data-dim": current !== null && current !== entry.id || void 0,
+							"data-lifted": current === entry.id || void 0,
+							className: "ridgeline-ridge",
+							style: { "--ridge": ridgeColor(model.stats.get(entry.id)?.median ?? model.lo) },
+							children: [
+								/* @__PURE__ */ jsx("path", {
+									"data-part": "fill",
+									className: "ridgeline-fill"
+								}),
+								/* @__PURE__ */ jsx("line", {
+									"data-part": "median",
+									className: "ridgeline-median"
+								}),
+								/* @__PURE__ */ jsx("path", {
+									"data-part": "line",
+									className: "ridgeline-line"
+								})
+							]
+						}, entry.id)), /* @__PURE__ */ jsxs("g", {
+							"data-part": "lens",
+							"data-on": current ? "" : void 0,
+							className: "ridgeline-lens",
+							style: tipStats ? { "--ridge": ridgeColor(tipStats.median) } : void 0,
+							children: [
+								/* @__PURE__ */ jsx("path", {
+									"data-part": "lens-fill",
+									className: "ridgeline-lens-fill"
+								}),
+								/* @__PURE__ */ jsx("path", {
+									"data-part": "lens-band",
+									className: "ridgeline-lens-band"
+								}),
+								/* @__PURE__ */ jsx("line", {
+									"data-part": "lens-median",
+									className: "ridgeline-lens-median"
+								}),
+								/* @__PURE__ */ jsx("path", {
+									"data-part": "lens-line",
+									className: "ridgeline-lens-line"
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-0",
+						children: series.map((entry, index) => /* @__PURE__ */ jsx("span", {
+							"data-active": current === entry.id || void 0,
+							className: "ridgeline-row-label",
+							style: {
+								top: baselineOf(index) - 18,
+								width: gutter - 10
+							},
+							children: entry.label
+						}, entry.id))
+					}),
+					empty ? /* @__PURE__ */ jsx("p", {
+						className: "pointer-events-none absolute inset-0 m-0 grid place-items-center text-sm text-muted-foreground",
+						children: emptyLabel
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						ref: tip,
+						"aria-hidden": "true",
+						"data-slot": "ridgeline-tooltip",
+						className: "line-chart-tooltip",
+						children: tipSeries && tipStats ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "m-0 mb-0.5 text-xs text-text-secondary",
+								children: tipSeries.label
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "ridgeline-tip-row text-sm font-medium",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-xs font-normal text-muted-foreground",
+									children: "Median"
+								}), /* @__PURE__ */ jsx("span", { children: format(tipStats.median) })]
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "ridgeline-tip-row text-xs",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: "Middle half"
+								}), /* @__PURE__ */ jsxs("span", { children: [
+									format(tipStats.q1),
+									" to ",
+									format(tipStats.q3)
+								] })]
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "ridgeline-tip-row text-xs",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: "Range"
+								}), /* @__PURE__ */ jsxs("span", { children: [
+									format(tipStats.min),
+									" to ",
+									format(tipStats.max)
+								] })]
+							}),
+							held?.value != null ? /* @__PURE__ */ jsxs("p", {
+								className: "m-0 mt-1 text-xs tabular-nums text-muted-foreground",
+								children: [
+									PERCENT.format(tipBelow),
+									" at or below ",
+									format(held.value)
+								]
+							}) : null
+						] }) : null
+					})
+				]
+			}),
+			tint && !empty ? /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "mt-3 flex flex-wrap items-center justify-end gap-2 text-xs tabular-nums text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "me-1 text-text-secondary",
+						children: "Median"
+					}),
+					/* @__PURE__ */ jsx("span", { children: format(model.lo) }),
+					/* @__PURE__ */ jsx("span", {
+						className: "inline-flex gap-0.5",
+						children: [
+							0,
+							.25,
+							.5,
+							.75,
+							1
+						].map((at) => /* @__PURE__ */ jsx("span", {
+							className: "ridgeline-step",
+							style: { "--ridge": toneOf(at) }
+						}, at))
+					}),
+					/* @__PURE__ */ jsx("span", { children: format(model.hi) })
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: spoken
+			}),
+			empty ? null : /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Series"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Median"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "First quartile"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Third quartile"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Lowest"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Highest"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Count"
+						})
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: series.map((entry) => {
+						const s = model.stats.get(entry.id);
+						return /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("th", {
+								scope: "row",
+								children: entry.label
+							}),
+							/* @__PURE__ */ jsx("td", { children: format(s.median) }),
+							/* @__PURE__ */ jsx("td", { children: format(s.q1) }),
+							/* @__PURE__ */ jsx("td", { children: format(s.q3) }),
+							/* @__PURE__ */ jsx("td", { children: format(s.min) }),
+							/* @__PURE__ */ jsx("td", { children: format(s.max) }),
+							/* @__PURE__ */ jsx("td", { children: s.n })
+						] }, entry.id);
+					}) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { Ridgeline };
+
+//# sourceMappingURL=ridgeline.js.map