@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/big/thread-triptych.js

@@ -0,0 +1,334 @@
+"use client";
+import { Plot as e } from "../core.js";
+import { rndSigned as t } from "../../lib/random.js";
+import { noteOf as n, noteSpace as r, sansWidth as i, stagger as a } from "../util.js";
+import { HitRect as o } from "../hover.js";
+import { LABEL_TICK as s } from "../marks.js";
+import { Dot as c, Ring as l } from "../markers.js";
+import { FootNote as u } from "../plot-note.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { DottedLine as p } from "../texture.js";
+import { threadTriptychDemo as m } from "./thread-triptych.data.js";
+import { useEffect as h, useMemo as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/charts/big/thread-triptych.tsx
+var x = 12, S = 29, C = 18, w = 46, T = 14, E = 44, D = (e, t) => `${e}:${t}`, O = (e, t) => {
+	let n = /* @__PURE__ */ new Map();
+	for (let r of e) {
+		let e = r.stops[t] ?? "";
+		n.set(e, (n.get(e) ?? 0) + 1);
+	}
+	return [...n].toSorted((e, t) => t[1] - e[1])[0]?.[0] ?? "";
+}, k = (e, t, n) => new Map(e.map((r, i) => [r, e.length === 1 ? (t + n) / 2 : t + (n - t) * i / (e.length - 1)])), A = (e, t, n, r) => new Map(e.map((e) => {
+	let i = [...new Set(t.flatMap((t) => t.stops[n] === e ? [t.stops[n - 1] ?? ""] : []))].map((e) => r.get(e) ?? w);
+	return [e, i.reduce((e, t) => e + t, 0) / Math.max(1, i.length)];
+})), j = (e) => Math.min(E, ...e.slice(1).map((t, n) => Math.abs(t - (e[n] ?? t)))), M = (e) => Math.ceil(Math.max(0, ...e.map((e) => i(e, 12)))), N = (e, n, r) => {
+	let i = e.columns.length - 1, a = M(e.columns[0] ?? []) + T - .5, o = n - M(e.columns[i] ?? []) - T + 1.5, s = e.columns.map((e, t) => a + (o - a) * t / i), c = [];
+	for (let [t, n] of e.columns.entries()) c.push(t === 0 ? k(n, w, r) : A(n, e.paths, t, c[t - 1] ?? /* @__PURE__ */ new Map()));
+	let l = c.flatMap((e, t) => [...e].map(([e, n], r) => ({
+		column: t,
+		index: r,
+		key: D(t, e),
+		name: e,
+		y: n
+	}))), u = Math.min(18, n * .012), d = e.paths.map((e, n) => {
+		let r = (t) => c[t]?.get(e.stops[t] ?? "") ?? w, i = s.slice(1).map((e, i) => {
+			let o = ((s[i] ?? a) + e) / 2 + t(n, 5 + i * 4) * u;
+			return `C${o},${r(i)} ${o},${r(i + 1)} ${e},${r(i + 1)}`;
+		});
+		return {
+			d: `M${a + 4},${r(0)}${i.join("")}`,
+			path: e
+		};
+	}), f = c.map((e) => j([...e.values()]));
+	return {
+		every: f.map((e) => Math.max(1, Math.ceil(C / e))),
+		hero: O(e.paths, i),
+		pitch: f,
+		stops: l,
+		threads: d,
+		wide: n >= 640,
+		xs: s
+	};
+}, P = (e, t) => t.kind === "thread" ? e.id === t.id : e.stops[t.column] === t.name, F = (e, t) => e === null || t === null ? e === t : e.kind === "thread" && t.kind === "thread" ? e.id === t.id : e.kind === "node" && t.kind === "node" && e.column === t.column && e.name === t.name, I = .16, L = (e) => /* @__PURE__ */ b("g", {
+	className: "transition-opacity group-data-[focus=true]/threads:opacity-30",
+	fill: "none",
+	children: [e.threads.map((e, t) => /* @__PURE__ */ y("path", {
+		className: "draw stroke-ink cap-round",
+		d: e.d,
+		pathLength: 1,
+		strokeOpacity: I,
+		strokeWidth: 1.5,
+		style: a(t * .5, "dense")
+	}, e.path.id)), e.threads.map((e) => /* @__PURE__ */ y("path", {
+		className: "cursor-pointer stroke-transparent",
+		d: e.d,
+		"data-thread": e.path.id,
+		strokeWidth: 7
+	}, `hit-${e.path.id}`))]
+}), R = (e, t) => e ? "fill-ink" : t, z = (e) => {
+	let { stop: t, x: n } = e;
+	return /* @__PURE__ */ b(v, { children: [e.hero ? /* @__PURE__ */ y(c, {
+		className: "fill-hero",
+		cx: n,
+		cy: t.y,
+		size: "md"
+	}) : /* @__PURE__ */ y(l, {
+		className: `transition-tone ${e.bright ? "stroke-ink" : "stroke-l3"}`,
+		cx: n,
+		cy: t.y,
+		size: "md"
+	}), /* @__PURE__ */ y(f, {
+		className: R(e.bright || e.hero, "fill-text"),
+		dy: "0.35em",
+		voice: "label",
+		x: n + T,
+		y: t.y,
+		children: t.name
+	})] });
+}, B = (e) => {
+	let { stop: t, triptych: n } = e, r = e.lit === !1 ? "opacity-30" : "", i = e.lit === !0, a = n.xs[t.column] ?? 0, o = Math.round(t.y) - 1;
+	if (t.column === 0) return /* @__PURE__ */ b("g", {
+		className: `transition-opacity ${r}`,
+		children: [/* @__PURE__ */ y("rect", {
+			className: R(i, "fill-l3"),
+			height: s.h,
+			width: s.w,
+			x: Math.round(a) - 2 - s.w,
+			y: o
+		}), /* @__PURE__ */ y(f, {
+			anchor: "end",
+			className: R(i, "fill-text"),
+			dy: "0.35em",
+			voice: "label",
+			x: a - T,
+			y: t.y,
+			children: t.name
+		})]
+	});
+	if (t.column < n.xs.length - 1) {
+		let e = n.every[t.column] ?? 1;
+		return /* @__PURE__ */ b("g", {
+			className: `transition-opacity ${r}`,
+			children: [/* @__PURE__ */ y("rect", {
+				className: R(i, "fill-l3"),
+				height: s.h,
+				width: s.w,
+				x: Math.round(a) - s.w / 2,
+				y: o
+			}), (n.wide && t.index % e === 0 || i) && /* @__PURE__ */ y(f, {
+				className: R(i, "fill-muted"),
+				dy: "0.35em",
+				halo: !0,
+				voice: "axis",
+				x: a + 9,
+				y: t.y,
+				children: t.name
+			})]
+		});
+	}
+	return /* @__PURE__ */ y("g", {
+		className: `transition-opacity ${r}`,
+		children: /* @__PURE__ */ y(z, {
+			bright: i,
+			hero: t.name === n.hero,
+			stop: t,
+			x: a
+		})
+	});
+}, V = (e, t) => {
+	let n = t.xs[e.column] ?? 0;
+	return e.column === 0 ? {
+		width: n - 4,
+		x: 0
+	} : e.column < t.xs.length - 1 ? {
+		width: 70,
+		x: n - 6
+	} : {
+		width: 110,
+		x: n - 8
+	};
+}, H = (e) => {
+	let { lit: t, triptych: n } = e;
+	return /* @__PURE__ */ y("g", { children: n.stops.map((e) => {
+		let r = n.pitch[e.column] ?? E;
+		return /* @__PURE__ */ b("g", {
+			className: "cursor-pointer",
+			children: [/* @__PURE__ */ y(o, {
+				"data-stop": e.key,
+				height: r,
+				y: e.y - r / 2,
+				...V(e, n)
+			}), /* @__PURE__ */ y("g", {
+				className: "pointer-events-none",
+				children: /* @__PURE__ */ y(B, {
+					lit: t === null ? null : t.has(e.key),
+					stop: e,
+					triptych: n
+				})
+			})]
+		}, e.key);
+	}) });
+}, U = (e, t) => new Set(e.map((e) => e.stops[t])).size, W = (e) => /* @__PURE__ */ b(f, {
+	anchor: e.anchor,
+	className: "fade",
+	muted: !0,
+	voice: "label",
+	x: e.x,
+	y: e.y,
+	children: [
+		/* @__PURE__ */ y("tspan", { children: e.label }),
+		" ",
+		/* @__PURE__ */ y("tspan", {
+			className: "t-value",
+			children: e.count
+		})
+	]
+}), G = (e) => {
+	let { wide: t, xs: n } = e.triptych, r = n.length - 1, a = (a, o) => {
+		let s = n[a] ?? 0;
+		if (a === 0) return {
+			anchor: "end",
+			x: s - T,
+			y: x
+		};
+		if (a < r) return t ? {
+			anchor: "start",
+			x: s + 9,
+			y: x
+		} : {
+			anchor: "middle",
+			x: s,
+			y: a % 2 == 0 ? S : x
+		};
+		let c = Math.ceil(i(`${o} ${U(e.paths, a)}`, 12));
+		return {
+			anchor: "start",
+			x: Math.min(s + T, e.width - c - 2),
+			y: x
+		};
+	};
+	return /* @__PURE__ */ y("g", {
+		"aria-live": "polite",
+		children: n.map((t, n) => {
+			let r = e.headings[n] ?? "";
+			return /* @__PURE__ */ y(W, {
+				count: U(e.paths, n),
+				label: r,
+				...a(n, r)
+			}, r);
+		})
+	});
+}, K = (e, t) => {
+	let { target: n } = e;
+	if (!(n instanceof SVGElement)) return null;
+	let { thread: r } = n.dataset;
+	if (r !== void 0) return {
+		id: r,
+		kind: "thread"
+	};
+	let i = t.stops.find((e) => e.key === n.dataset.stop);
+	return i === void 0 ? null : {
+		column: i.column,
+		kind: "node",
+		name: i.name
+	};
+}, q = (e, t) => {
+	h(() => {
+		let n = (e) => {
+			e.key === "Escape" && t();
+		};
+		return e && window.addEventListener("keydown", n), () => {
+			window.removeEventListener("keydown", n);
+		};
+	}, [e, t]);
+}, J = (e) => /* @__PURE__ */ y("g", {
+	className: "fade",
+	children: e.triptych.xs.slice(1, -1).map((t) => /* @__PURE__ */ y(p, {
+		tone: "fill-l5",
+		x0: t,
+		x1: t,
+		y0: 40,
+		y1: e.floor + 2
+	}, t))
+}), Y = (e) => {
+	let { data: t, focus: n, height: i, note: a, width: s } = e, c = i - 16 - r(a, s - 16, 18), l = g(() => N(t, s, c), [
+		t,
+		s,
+		c
+	]), f = g(() => /* @__PURE__ */ y(L, { threads: l.threads }), [l]), p = n === null ? [] : l.threads.filter((e) => P(e.path, n)), m = n === null ? null : new Set(p.flatMap((e) => e.path.stops.map((e, t) => D(t, e)))), h = `Mammal tree: ${t.columns.map((t, n) => `${t.length} ${(e.headings[n] ?? "").toLowerCase()}`).join(" in ")}`;
+	return /* @__PURE__ */ b(d, {
+		className: "group/threads",
+		"data-focus": n !== null,
+		height: i,
+		label: h,
+		leave: () => {
+			e.onHover(null);
+		},
+		onPointerMove: (t) => {
+			e.onHover(K(t, l));
+		},
+		onPointerUp: (t) => {
+			e.onPin(K(t, l));
+		},
+		width: s,
+		children: [
+			/* @__PURE__ */ y(o, {
+				height: i,
+				width: s
+			}),
+			/* @__PURE__ */ y(G, {
+				headings: e.headings,
+				paths: n === null ? t.paths : p.map((e) => e.path),
+				triptych: l,
+				width: s
+			}),
+			/* @__PURE__ */ y(J, {
+				floor: c,
+				triptych: l
+			}),
+			f,
+			/* @__PURE__ */ y("g", {
+				className: "stroke-ink cap-round pointer-events-none",
+				fill: "none",
+				strokeWidth: 1.5,
+				children: p.map((e) => /* @__PURE__ */ y("path", { d: e.d }, e.path.id))
+			}),
+			/* @__PURE__ */ y(H, {
+				lit: m,
+				triptych: l
+			}),
+			/* @__PURE__ */ y(u, {
+				height: i,
+				text: a,
+				width: s
+			})
+		]
+	});
+}, X = (t) => {
+	let r = t.data ?? m, [i, a] = _(null), [o, s] = _(null), c = o ?? i, l = g(() => () => {
+		s(null);
+	}, []);
+	return q(o !== null, l), /* @__PURE__ */ y(e, { children: (e) => /* @__PURE__ */ y(Y, {
+		data: r,
+		focus: c,
+		headings: t.headings ?? [
+			"Genera",
+			"Families",
+			"Orders",
+			"Superorders"
+		],
+		height: t.height ?? 560,
+		note: n(t),
+		onHover: (e) => {
+			a((t) => F(t, e) ? t : e);
+		},
+		onPin: (e) => {
+			s((t) => e === null || F(t, e) ? null : e);
+		},
+		width: e
+	}) });
+};
+//#endregion
+export { X as ThreadTriptych };

package/lib/charts/board/room.js

@@ -0,0 +1,6 @@
+"use client";
+import { sansWidth as e } from "../util.js";
+//#region src/charts/board/room.ts
+var t = (t, n = .92, r) => Math.ceil(Math.max(0, ...t.map((t) => e(t, void 0, r))) * n);
+//#endregion
+export { t as nameWidth };

package/lib/charts/board/slope.js

@@ -0,0 +1,176 @@
+"use client";
+import { plural as e } from "../../lib/format.js";
+import { resolveFormat as t } from "../../schema/format.js";
+import { keyOf as n } from "../../schema/key.js";
+import { useHover as r } from "../hooks.js";
+import { VALUE as i } from "../roles.js";
+import { Plot as a } from "../core.js";
+import { stagger as o } from "../util.js";
+import { DimGroup as s } from "../hover.js";
+import { Dot as c, Ring as l } from "../markers.js";
+import { VRule as u } from "../rules.js";
+import { chartTable as d, plotOptions as f, scoped as p } from "../shared-options.js";
+import { ChartSvg as m } from "../svg.js";
+import { Label as h } from "../text.js";
+import { nameWidth as g } from "./room.js";
+import { relax as _ } from "./spread.js";
+import { scaleLinear as v } from "d3-scale";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/charts/board/slope.tsx
+var x = (e) => e.xs.map((t, n) => /* @__PURE__ */ b("g", { children: [/* @__PURE__ */ y(u, {
+	kind: "grid",
+	x: t,
+	y0: e.top,
+	y1: e.height
+}), /* @__PURE__ */ y(h, {
+	anchor: "middle",
+	voice: "axis",
+	x: t,
+	y: e.top - 14,
+	children: e.labels[n]
+})] }, t)), S = 1, C = 520, w = 14, T = {
+	lead: {
+		dotClass: "fill-hero",
+		ringClass: "stroke-hero",
+		stroke: "var(--hl-hero)",
+		value: "fill-ink"
+	},
+	rest: {
+		dotClass: "fill-l3",
+		ringClass: "stroke-l3",
+		stroke: "var(--hl-l3)",
+		value: "fill-muted"
+	},
+	worst: {
+		dotClass: "fill-alert",
+		ringClass: "stroke-alert",
+		stroke: "var(--hl-alert)",
+		value: "fill-ink"
+	}
+}, E = (e) => {
+	let { i: t, row: n, y: r } = e, [a, u] = e.xs, d = T[e.role], f = `${i} ${d.value}`, { name: p } = n;
+	return /* @__PURE__ */ b(s, {
+		className: "fade",
+		dim: e.dim,
+		style: o(t),
+		onPointerEnter: e.onHover,
+		children: [
+			/* @__PURE__ */ y("line", {
+				x1: a,
+				x2: u,
+				y1: r(n.from),
+				y2: r(n.to),
+				stroke: "transparent",
+				strokeWidth: 14
+			}),
+			/* @__PURE__ */ y("line", {
+				className: "cap-round",
+				x1: a,
+				x2: u,
+				y1: r(n.from),
+				y2: r(n.to),
+				stroke: d.stroke,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ y(l, {
+				className: d.ringClass,
+				cx: a,
+				cy: r(n.from),
+				size: "sm"
+			}),
+			/* @__PURE__ */ y(c, {
+				className: d.dotClass,
+				cx: u,
+				cy: r(n.to),
+				size: e.role === "rest" ? "sm" : "md"
+			}),
+			/* @__PURE__ */ b("text", {
+				x: a - w,
+				y: e.labelYs[0],
+				dy: "0.34em",
+				textAnchor: "end",
+				className: "t-label",
+				children: [/* @__PURE__ */ b("tspan", {
+					fill: "var(--hl-muted)",
+					children: [p, " "]
+				}), /* @__PURE__ */ y("tspan", {
+					className: f,
+					children: e.format(n.from)
+				})]
+			}),
+			/* @__PURE__ */ b("text", {
+				x: u + w,
+				y: e.labelYs[1],
+				dy: "0.34em",
+				className: "t-label",
+				children: [/* @__PURE__ */ y("tspan", {
+					className: f,
+					children: e.format(n.to)
+				}), /* @__PURE__ */ b("tspan", {
+					fill: "var(--hl-muted)",
+					children: [" ", p]
+				})]
+			})
+		]
+	});
+}, D = (e, t) => {
+	let n = (e) => e.to - e.from, r = Math.min(...t.map(n)), i = Math.max(...t.map(n));
+	return r < 0 && n(e) === r ? "lead" : i > 0 && n(e) === i ? "worst" : "rest";
+}, O = (e) => {
+	let t = e.flatMap((e) => [e.from, e.to]), n = Math.min(...t), r = Math.max(...t);
+	return t.length === 0 ? [0, 1] : n === r ? [n - 1, r + 1] : [n, r];
+}, k = (t, n, r) => {
+	if (t.length === 0) return "No data.";
+	let [i] = t, [a] = t;
+	for (let e of t) i = e.to - e.from > i.to - i.from ? e : i, a = e.to - e.from < a.to - a.from ? e : a;
+	return `${e(t.length, "line")} from ${n[0]} to ${n[1]}. Biggest rise: ${i.name}, ${r(i.from)} to ${r(i.to)}. Biggest fall: ${a.name}, ${r(a.from)} to ${r(a.to)}. The data table lists every line.`;
+}, A = (e) => {
+	let i = (e.rows ?? []).filter((e) => Number.isFinite(e.from) && Number.isFinite(e.to)), o = e.height ?? 420, s = t(e.format), c = e.narrowFormat === void 0 ? s : t(e.narrowFormat), l = e.domain ?? O(i), u = r();
+	return /* @__PURE__ */ y(a, {
+		...f(e),
+		initialWidth: e.initialWidth,
+		table: d(e, e.title ?? e.label ?? "Change between two points", [
+			"Name",
+			e.labels[0],
+			e.labels[1]
+		], i.map((e) => [
+			e.name,
+			s(e.from),
+			s(e.to)
+		])),
+		width: e.width,
+		children: (t) => {
+			let r = t < C ? c : s, a = [w + g(i.map((e) => `${e.name} ${r(e.from)}`), S, e.metrics), t - w - 3 - g(i.map((e) => `${r(e.to)} ${e.name}`), S, e.metrics)], d = v().domain(l).range([o - 24, 56]), f = (e) => e.length === 0 ? e : _(e, 15, 48, o - 8), p = f(i.map((e) => d(e.from))), h = f(i.map((e) => d(e.to))), T = /* @__PURE__ */ new Map(), O = i.map((e) => {
+				let t = n(e), r = T.get(t) ?? 0;
+				return T.set(t, r + 1), `${t}#${r}`;
+			}), A = (t, n) => e.emphasis === void 0 ? D(t, i) : O[n] === `${e.emphasis}#0` ? "lead" : "rest", j = e.title ?? e.label ?? (i.length === 0 ? "No data" : i.map((t) => `${t.name} ${r(t.from)} ${e.labels[0]}, ${r(t.to)} ${e.labels[1]}`).join("; "));
+			return /* @__PURE__ */ b(m, {
+				desc: k(i, e.labels, r),
+				height: o,
+				label: j,
+				leave: u.clear,
+				width: t,
+				children: [/* @__PURE__ */ y(x, {
+					xs: a,
+					labels: e.labels,
+					top: 40,
+					height: o
+				}), i.map((e, t) => /* @__PURE__ */ y(E, {
+					row: e,
+					i: t,
+					xs: a,
+					labelYs: [p[t], h[t]],
+					y: d,
+					dim: u.dim(t),
+					role: A(e, t),
+					format: r,
+					onHover: () => {
+						u.show(t);
+					}
+				}, O[t]))]
+			});
+		}
+	});
+}, j = (e) => p(e.idPrefix, /* @__PURE__ */ y(A, { ...e }));
+//#endregion
+export { j as Slope };

package/lib/charts/board/spread.js

@@ -0,0 +1,28 @@
+"use client";
+//#region src/charts/board/spread.ts
+var e = (e, t) => {
+	let n = !1;
+	for (let r = 1; r < e.length; r += 1) {
+		let i = t - (e[r].y - e[r - 1].y);
+		i > .1 && (e[r - 1].y -= i / 2, e[r].y += i / 2, n = !0);
+	}
+	return n;
+}, t = (e, t, n, r) => {
+	let i = e.length - 1;
+	e[i].y = Math.min(e[i].y, r);
+	for (let n = i - 1; n >= 0; --n) e[n].y = Math.min(e[n].y, e[n + 1].y - t);
+	e[0].y = Math.max(e[0].y, n);
+	for (let n = 1; n <= i; n += 1) e[n].y = Math.max(e[n].y, e[n - 1].y + t);
+}, n = (n, r, i, a) => {
+	let o = n.map((e, t) => ({
+		i: t,
+		y: e
+	})).toSorted((e, t) => e.y - t.y);
+	for (let t = 0; t < 40 && e(o, r); t += 1);
+	t(o, r, i, a);
+	let s = [...n];
+	for (let e of o) s[e.i] = e.y;
+	return s;
+};
+//#endregion
+export { n as relax };

package/lib/charts/control.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/charts/control.tsx
+var t = (e) => e === !0 ? "border-ink bg-ink text-paper" : "border-rule bg-paper text-text group-hover:border-faint", n = (n) => /* @__PURE__ */ e("button", {
+	type: "button",
+	"aria-label": n.label,
+	"aria-pressed": n.pressed,
+	onClick: () => {
+		n.onClick();
+	},
+	className: `group inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:outline-none ${n.className ?? ""}`,
+	children: /* @__PURE__ */ e("span", {
+		className: `group-focus-visible:outline-muted text-tick inline-flex h-7 items-center gap-1.5 rounded-full border px-3 font-medium transition-colors group-focus-visible:outline-1 group-focus-visible:outline-offset-2 ${t(n.pressed)}`,
+		children: n.children
+	})
+});
+//#endregion
+export { n as Control };

package/lib/charts/core.js

@@ -0,0 +1,84 @@
+"use client";
+import { useEntry as e, useMeasure as t, useReveal as n } from "./hooks.js";
+import { PANEL as r } from "./roles.js";
+import { ScaleContext as i } from "./scale-context.js";
+import { useContext as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/charts/core.tsx
+var d = (e) => e ? "is-shown" : "is-hidden", f = (e) => e === "still" ? "is-still" : d(e === "shown"), p = (e) => {
+	let i = s(null), [a, o] = t(), c = n(i);
+	return /* @__PURE__ */ u("figure", {
+		ref: i,
+		className: `m-0 ${r} ${d(c)} ${e.className ?? ""}`,
+		children: [
+			e.top,
+			/* @__PURE__ */ l("div", {
+				ref: a,
+				children: o > 0 && e.children(o)
+			}),
+			e.bottom
+		]
+	});
+}, m = {}, h = (n) => {
+	let r = n.width !== void 0, [a, o] = t(n.width ?? n.initialWidth ?? 0, !r), s = n.width ?? o, c = e(a, {
+		...n,
+		animate: n.animate ?? (r ? "off" : "scroll")
+	});
+	return /* @__PURE__ */ u("div", {
+		ref: a,
+		"data-hl-ready": c.ready ? "true" : "false",
+		className: `[&_svg:focus-visible]:outline-muted relative min-w-0 [&_svg]:block [&_svg]:select-none [&_svg:focus]:outline-none [&_svg:focus-visible]:outline-1 [&_svg:focus-visible]:outline-offset-4 [&_svg:focus-visible]:outline-solid ${f(c.phase)} ${n.className ?? ""}`,
+		style: n.style,
+		children: [/* @__PURE__ */ u(i.Provider, {
+			value: n.scaling ?? m,
+			children: [s > 0 && n.children(s), n.overlay]
+		}), n.table]
+	});
+}, g = 4, _ = ({ fit: e, scale: t }) => e === !0 ? 1 : t ?? 1, v = (e) => {
+	let t = _(a(i)), n = e.x * t, r = e.y * t, u = s(null), [d, f] = c(0);
+	return o(() => {
+		let e = u.current, t = e?.offsetParent;
+		if (e === null || !(t instanceof HTMLElement)) return;
+		let r = e.offsetWidth / 2, i = t.querySelector("svg")?.getBoundingClientRect().width ?? 0, a = Math.min(Math.max(n, r + g), Math.max(t.clientWidth, i) - r - g);
+		f(a - n);
+	}, [n]), /* @__PURE__ */ l("output", {
+		ref: u,
+		className: `rounded-tip bg-ink text-paper text-tick/normal pointer-events-none absolute z-10 px-2.5 py-1.75 whitespace-nowrap tabular-nums [&_b]:font-semibold ${e.below === !0 ? "-translate-x-1/2 translate-y-3" : "-mt-2.5 -translate-x-1/2 -translate-y-full"}`,
+		style: {
+			left: n + d,
+			top: r
+		},
+		children: e.children
+	});
+}, y = (e) => /* @__PURE__ */ u("defs", { children: [
+	/* @__PURE__ */ l("clipPath", {
+		id: `${e.id}-past`,
+		children: /* @__PURE__ */ l("rect", {
+			x: -40,
+			y: -40,
+			width: Math.max(0, e.x + 40),
+			height: e.height + 80
+		})
+	}),
+	/* @__PURE__ */ l("clipPath", {
+		id: `${e.id}-future`,
+		children: /* @__PURE__ */ l("rect", {
+			x: e.x,
+			y: -40,
+			width: e.width + 40,
+			height: e.height + 80
+		})
+	}),
+	/* @__PURE__ */ l("clipPath", {
+		id: `${e.id}-sweep`,
+		children: /* @__PURE__ */ l("rect", {
+			className: "sweep",
+			x: -40,
+			y: -40,
+			width: e.width + 80,
+			height: e.height + 80
+		})
+	})
+] });
+//#endregion
+export { p as Chart, h as Plot, y as SplitClips, v as Tooltip };

package/lib/charts/data-table.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/charts/data-table.tsx
+var n = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return e.map((e) => {
+		let n = (t.get(e) ?? 0) + 1;
+		return t.set(e, n), {
+			key: `${e}#${n}`,
+			text: e
+		};
+	});
+}, r = (r) => {
+	let i = n(r.columns), a = n(r.rows.map((e) => e.join(""))), o = /* @__PURE__ */ t("table", {
+		className: r.visible === !0 ? "text-small mt-3 w-full border-collapse text-left tabular-nums" : void 0,
+		children: [
+			/* @__PURE__ */ e("caption", {
+				className: r.visible === !0 ? "sr-only" : void 0,
+				children: r.caption
+			}),
+			/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: i.map(({ key: t, text: n }) => /* @__PURE__ */ e("th", {
+				scope: "col",
+				children: n
+			}, t)) }) }),
+			/* @__PURE__ */ e("tbody", { children: a.map(({ key: t }, i) => /* @__PURE__ */ e("tr", { children: n(r.rows[i] ?? []).map((t) => /* @__PURE__ */ e("td", { children: t.text }, t.key)) }, t)) })
+		]
+	});
+	return r.visible === !0 ? o : /* @__PURE__ */ e("div", {
+		className: "sr-only",
+		children: o
+	});
+};
+//#endregion
+export { r as DataTable };