@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/glance/bar-race.js

@@ -0,0 +1,246 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { noteOf as r, noteSpace as i, sansWidth as a } from "../util.js";
+import { DimGroup as o, HitRect as s, TipText as c } from "../hover.js";
+import { Bar as l, Dot as u, Ring as d } from "../markers.js";
+import { FootNote as f } from "../plot-note.js";
+import { HRule as p } from "../rules.js";
+import { ChartSvg as m } from "../svg.js";
+import { Label as h } from "../text.js";
+import { paint as g, useTextureIds as _ } from "../texture-ids.js";
+import { Hatch as v } from "../texture.js";
+import { labelRoom as y, textWidth as b } from "./util-a.js";
+import { Control as x } from "../control.js";
+import { easeTravel as S } from "../motion.js";
+import { usePlayhead as C } from "../playback.js";
+import { barRaceDemo as w } from "./bar-race.data.js";
+import { ControlSlot as T } from "./control-slot.js";
+import { useRef as E } from "react";
+import { scaleLinear as D } from "d3-scale";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/charts/glance/bar-race.tsx
+var A = (e) => `${Math.round(e)}m`, j = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map(), i = "";
+	for (let a of t) {
+		let [t, o = ""] = e[a].split(" ");
+		r.set(a, o !== i || a === n ? e[a] : t), i = o;
+	}
+	return r;
+}, M = (e, t) => {
+	let n = e.periods.length - 1, r = Math.max(0, Math.min(n, Math.floor(t))), i = Math.min(n, r + 1), a = S(Math.max(0, Math.min(1, t - r)));
+	return e.series.map((e) => e.values[r] + (e.values[i] - e.values[r]) * a);
+}, N = 900, P = (e, t, n) => C({
+	box: e,
+	end: t,
+	rate: n,
+	reduced: "step",
+	start: t,
+	step: {
+		every: N,
+		unit: 1
+	}
+}), F = 8, I = (e, t, n) => {
+	let r = e.length - 1, i = (t) => {
+		let i = a(e[t], 11), o = t === r ? n(t) + 4 - i : n(t) - i / 2;
+		return {
+			left: o,
+			right: o + i
+		};
+	}, o = i(t);
+	return [...e.flatMap((t, n) => n === 0 || e[n - 1].split(" ")[1] !== t.split(" ")[1] ? [n] : []).filter((e) => {
+		let n = i(e);
+		return e !== t && (n.right + F < o.left || n.left > o.right + F);
+	}), t].toSorted((e, t) => e - t);
+}, L = (e) => {
+	let t = e.periods.length - 1, n = D().domain([0, t]).range([e.left, e.width - Math.max(4, a(e.periods[t] ?? "") / 2)]), r = e.periods.indexOf(e.current), i = e.narrow ? new Map(I(e.periods, r, n).map((t) => [t, e.periods[t]])) : j(e.periods, e.periods.map((e, t) => t), r);
+	return /* @__PURE__ */ k("g", { children: [
+		/* @__PURE__ */ O(p, {
+			kind: "rule",
+			x0: n(0),
+			x1: n(t),
+			y: e.y
+		}),
+		/* @__PURE__ */ O("line", {
+			className: "stroke-ink",
+			x1: n(0),
+			x2: n(e.t),
+			y1: Math.round(e.y),
+			y2: Math.round(e.y),
+			strokeWidth: 2
+		}),
+		/* @__PURE__ */ O(s, {
+			className: "cursor-pointer",
+			x: n(0) - 22,
+			y: e.y - 30,
+			width: n(t) - n(0) + 44,
+			height: 44,
+			onClick: (r) => {
+				let i = r.currentTarget.getBoundingClientRect(), a = n(0) - 22 + (r.clientX - i.left) / i.width * (n(t) - n(0) + 44);
+				e.onSeek(Math.max(0, Math.min(t, Math.round(n.invert(a)))));
+			}
+		}),
+		e.periods.map((t, r) => {
+			let a = r <= e.t, o = i.get(r);
+			return /* @__PURE__ */ k("g", {
+				className: "pointer-events-none",
+				children: [a ? /* @__PURE__ */ O(u, {
+					className: "fill-hero",
+					cx: n(r),
+					cy: e.y,
+					size: "sm"
+				}) : /* @__PURE__ */ O(d, {
+					className: "stroke-l5",
+					cx: n(r),
+					cy: e.y,
+					size: "sm"
+				}), o === void 0 ? null : /* @__PURE__ */ O(h, {
+					anchor: "middle",
+					voice: t === e.current ? "value" : "axis",
+					x: n(r),
+					y: e.y - 10,
+					children: o
+				})]
+			}, t);
+		})
+	] });
+}, R = (e) => /* @__PURE__ */ k(o, {
+	className: e.jump ? void 0 : "ease-travel duration-change transition-transform",
+	dim: e.dimmed,
+	style: { transform: `translateY(${Math.round(e.y)}px)` },
+	onPointerEnter: () => {
+		e.onEnter(e.labelX + e.w / 2, e.y - e.barH / 2 - 4);
+	},
+	children: [
+		/* @__PURE__ */ O(s, {
+			x: 0,
+			y: -e.pitch / 2,
+			width: e.width,
+			height: e.pitch
+		}),
+		/* @__PURE__ */ O(h, {
+			anchor: "end",
+			dy: "0.35em",
+			muted: !e.leader,
+			voice: "label",
+			x: e.labelX - 10,
+			y: 0,
+			children: e.series.label
+		}),
+		/* @__PURE__ */ O(l, {
+			className: e.fill,
+			dir: "right",
+			fill: e.fill === void 0 ? g(e.hatch) : void 0,
+			h: e.barH,
+			w: e.w,
+			x: e.labelX,
+			y: -e.barH / 2
+		}),
+		/* @__PURE__ */ O(h, {
+			dy: "0.36em",
+			muted: !e.leader,
+			voice: "value",
+			x: e.labelX + e.w + 8,
+			y: 0,
+			children: e.value
+		})
+	]
+}), z = (e) => e.done ? /* @__PURE__ */ O("path", {
+	d: "M7.5 3.2A3.6 3.6 0 1 0 8 6",
+	className: "fill-none stroke-current",
+	strokeWidth: 1.5,
+	strokeLinecap: "round"
+}) : e.playing ? /* @__PURE__ */ O("path", {
+	d: "M1 1h2.4v8H1zM5.6 1H8v8H5.6z",
+	className: "fill-current"
+}) : /* @__PURE__ */ O("path", {
+	d: "M1 0.8 8.4 5 1 9.2z",
+	className: "fill-current"
+}), B = (e, t) => e ? "Replay" : t ? "Pause" : "Play", V = (e, t) => ({
+	bottom: 44,
+	left: Math.max(y(e.series.map((e) => e.label), "t-label") + 10, Math.ceil(b(e.periods[0], "t-axis") / 2)),
+	right: 8 + y(e.series.flatMap((e) => e.values.map((e) => t(e))), "t-value"),
+	top: 4
+}), H = (a) => {
+	let o = a.data ?? w, s = (a.height ?? 460) - 44, l = a.format ?? A, u = o.periods.length - 1, d = E(null), p = _("race")("hatch"), h = P(d, u, a.speed ?? 1500), g = e(), y = M(o, h.t), b = y.map((e, t) => ({
+		i: t,
+		v: e
+	})).toSorted((e, t) => t.v - e.v), S = Array.from({ length: y.length }, () => 0);
+	for (let [e, t] of b.entries()) S[t.i] = e;
+	let C = o.periods[Math.min(u, Math.round(h.t))], j = `Bar race, ${o.periods[0]} to ${o.periods[u]}. ${C}: ${b.map((e) => `${o.series[e.i].label} ${l(e.v)}`).join(", ")}`, N = B(h.done, h.playing);
+	return /* @__PURE__ */ k("div", {
+		ref: d,
+		className: "relative",
+		children: [/* @__PURE__ */ O(T, { children: /* @__PURE__ */ k(x, {
+			onClick: h.handleToggle,
+			label: `${N} the race`,
+			children: [/* @__PURE__ */ O("svg", {
+				width: 9,
+				height: 10,
+				viewBox: "0 0 9 10",
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ O(z, {
+					done: h.done,
+					playing: h.playing
+				})
+			}), N]
+		}) }), /* @__PURE__ */ O(t, {
+			overlay: g.at === null ? null : /* @__PURE__ */ O(n, {
+				x: g.at.x,
+				y: g.at.y,
+				children: /* @__PURE__ */ O(c, {
+					facts: [l(y[g.at.key]), `#${S[g.at.key] + 1} in ${C}`],
+					lead: o.series[g.at.key].label
+				})
+			}),
+			children: (e) => {
+				let t = V(o, l), n = (s - t.top - t.bottom) / o.series.length, c = D().domain([0, Math.max(1, b[0]?.v ?? 1)]).range([0, e - t.left - t.right]), u = s + i(r(a), e - 16, 22);
+				return /* @__PURE__ */ k(m, {
+					height: u,
+					label: j,
+					leave: g.clear,
+					width: e,
+					children: [
+						/* @__PURE__ */ O("defs", { children: /* @__PURE__ */ O(v, {
+							id: p,
+							tone: "fill-l4"
+						}) }),
+						o.series.map((r, i) => /* @__PURE__ */ O(R, {
+							barH: Math.min(36, n * .68),
+							jump: h.reduced,
+							dimmed: g.dim(i),
+							fill: a.highlight === r.label || S[i] === 0 ? "fill-hero" : void 0,
+							hatch: p,
+							labelX: t.left,
+							leader: S[i] === 0,
+							onEnter: g.showAt(i),
+							pitch: n,
+							series: r,
+							value: l(y[i]),
+							w: c(y[i]),
+							width: e,
+							y: t.top + n * (S[i] + .5)
+						}, r.label)),
+						/* @__PURE__ */ O(L, {
+							current: C,
+							left: t.left,
+							narrow: e < 520,
+							onSeek: h.handleSeek,
+							periods: o.periods,
+							t: h.t,
+							width: e,
+							y: s - 14
+						}),
+						/* @__PURE__ */ O(f, {
+							height: u,
+							text: r(a),
+							width: e
+						})
+					]
+				});
+			}
+		})]
+	});
+};
+//#endregion
+export { H as BarRace };

package/lib/charts/glance/big-slice.data.js

@@ -0,0 +1,41 @@
+"use client";
+//#region src/charts/glance/big-slice.data.ts
+var e = [
+	{
+		intensity: 169.8,
+		label: "18–24",
+		share: 5246523
+	},
+	{
+		intensity: 156.8,
+		label: "25–34",
+		share: 8957457
+	},
+	{
+		intensity: 169.8,
+		label: "35–44",
+		share: 8996949
+	},
+	{
+		intensity: 209.5,
+		label: "45–54",
+		share: 8448639
+	},
+	{
+		intensity: 242,
+		label: "55–64",
+		share: 8815721
+	},
+	{
+		intensity: 317.6,
+		label: "65–74",
+		share: 8305762
+	},
+	{
+		intensity: 334.8,
+		label: "75+",
+		share: 4376563
+	}
+];
+//#endregion
+export { e as bigSliceDemo };

package/lib/charts/glance/big-slice.js

@@ -0,0 +1,238 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { noteOf as r, noteSpace as i, ranks as a, sansWidth as o, stagger as s } from "../util.js";
+import { DimGroup as c, TipText as l } from "../hover.js";
+import { RING_STEP as u } from "../marks.js";
+import { FootNote as d } from "../plot-note.js";
+import { ChartSvg as f } from "../svg.js";
+import { Label as p } from "../text.js";
+import { paint as m, useTextureIds as h } from "../texture-ids.js";
+import { DotRing as g, Hatch as _ } from "../texture.js";
+import { bigSliceDemo as v } from "./big-slice.data.js";
+import { scaleRadial as y } from "d3-scale";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { arc as S, pie as C } from "d3-shape";
+//#region src/charts/glance/big-slice.tsx
+var w = (e) => `${Math.round(e)}%`, T = (e) => {
+	let t = Math.round(e);
+	return t < 60 ? `${t}m` : `${Math.floor(t / 60)}h ${String(t % 60).padStart(2, "0")}m`;
+}, E = (e) => `${e / 60}h`, D = Math.PI * 2, O = 6, k = 14, A = (e) => Math.min(e % D, D - e % D), j = (e, t) => {
+	let n = e.findIndex((e) => !t(e));
+	if (n === -1) return null;
+	let r = [], i = null;
+	for (let a = 1; a <= e.length; a += 1) {
+		let o = e[(n + a) % e.length];
+		if (t(o)) {
+			let e = i === null ? o.startAngle : i.a0, t = o.startAngle < e ? D : 0;
+			i = {
+				a0: e,
+				a1: o.endAngle + t
+			};
+		} else i !== null && (r.push(i), i = null);
+	}
+	return r;
+}, M = (e) => {
+	let t = e.map((e) => (e.startAngle + e.endAngle) / 2);
+	return (Math.max(...t) + (Math.min(...t) + D)) / 2;
+}, N = (e, t, n, r) => {
+	let i = t(n), a = j(e, (e) => t(e.data.intensity) < i - 7);
+	if (a === null) return M(e);
+	let o = (r / 2 + 8) / i, s = null;
+	for (let e of a) {
+		let t = e.a0 + o, n = e.a1 - o;
+		if (t > n) continue;
+		let r = t <= D && D <= n ? 0 : [t, n].toSorted((e, t) => A(e) - A(t))[0];
+		(s === null || A(r) < A(s)) && (s = r);
+	}
+	return s;
+}, P = (e, t) => {
+	let n = [Math.sin(e), Math.sin(t)];
+	return {
+		max: e <= Math.PI / 2 && t >= Math.PI / 2 ? 1 : Math.max(...n),
+		min: e <= 1.5 * Math.PI && t >= 1.5 * Math.PI ? -1 : Math.min(...n)
+	};
+}, F = (e, t) => {
+	let n = y().domain([0, e.max]).range([t * .24, t]), r = n(e.ring), i = 0, a = 0;
+	for (let [t, s] of e.slices.entries()) {
+		let c = n(s.data.intensity), l = P(s.startAngle, s.endAngle);
+		i = Math.max(i, -l.min * c), a = Math.max(a, l.max * c);
+		let { figures: u, name: d } = e.labels[t], f = o(d, 11) + O + o(u, 11), p = Math.sin((s.startAngle + s.endAngle) / 2) * (Math.max(c, r) + k);
+		p >= 0 ? a = Math.max(a, p + f) : i = Math.max(i, -p + f);
+	}
+	return {
+		left: i,
+		right: a
+	};
+}, I = (e) => {
+	let t = Math.max(60, Math.min((e.height - e.bottom - 56) / 2, (e.width - (e.narrow ? 68 : 300)) / 2)), n = (t) => {
+		let { left: n, right: r } = F(e, t);
+		return n + r + 4 <= e.width;
+	}, r = 60, i = t;
+	if (!n(i)) {
+		for (let e = 0; e < 20; e += 1) {
+			let e = (r + i) / 2;
+			n(e) ? r = e : i = e;
+		}
+		i = r;
+	}
+	let { left: a, right: o } = F(e, i);
+	return {
+		cx: (e.width - a - o) / 2 + a,
+		outer: i
+	};
+}, L = (e) => {
+	let t = e * 180 / Math.PI;
+	return t > 90 && t < 270 ? t - 180 : t;
+}, R = (e) => e.angle === null ? /* @__PURE__ */ b(p, {
+	anchor: "end",
+	dy: "0.7em",
+	halo: !0,
+	voice: "axis",
+	x: -5,
+	y: -e.radius + 3,
+	children: e.text
+}) : /* @__PURE__ */ b(p, {
+	anchor: "middle",
+	dy: "0.35em",
+	halo: !0,
+	transform: `translate(${Math.sin(e.angle) * e.radius},${-Math.cos(e.angle) * e.radius}) rotate(${L(e.angle)})`,
+	voice: "axis",
+	children: e.text
+}), z = (e) => {
+	let t = e.r(e.d.intensity), n = (e.slice.startAngle + e.slice.endAngle) / 2, r = Math.max(t, e.labelRadius) + k, i = Math.sin(n) * r, a = -Math.cos(n) * r, o = Math.sin(n) >= 0 ? "start" : "end", { cx: l, cy: u } = e.centre;
+	return /* @__PURE__ */ x(c, {
+		dim: e.dim,
+		onPointerEnter: () => {
+			e.onEnter(l + Math.sin(n) * t * .7, u - Math.cos(n) * t * .7 - 8);
+		},
+		children: [/* @__PURE__ */ b("path", {
+			className: `pop ${e.fill}`,
+			fill: e.pattern,
+			strokeWidth: e.pattern === void 0 ? void 0 : 1,
+			style: {
+				...s(e.i, "series"),
+				transformBox: "view-box",
+				transformOrigin: `${l}px ${u}px`
+			},
+			d: e.wedge({
+				endAngle: e.slice.endAngle,
+				outer: t,
+				padAngle: e.slice.padAngle,
+				startAngle: e.slice.startAngle
+			}) ?? ""
+		}), /* @__PURE__ */ x("text", {
+			className: "fade fill-text",
+			style: s(e.i + 3),
+			x: i,
+			y: a,
+			dy: "0.35em",
+			textAnchor: o,
+			children: [/* @__PURE__ */ b("tspan", {
+				className: "t-label",
+				children: e.d.label
+			}), /* @__PURE__ */ b("tspan", {
+				className: "t-axis",
+				dx: O,
+				children: e.narrow ? e.shareText : `${e.shareText} · ${e.valueText}`
+			})]
+		})]
+	});
+}, B = (e, t, n, r) => e.map((e) => {
+	let i = o(r(e), 11);
+	return {
+		angle: N(t, n, e, i),
+		half: (i / 2 + 5) / n(e),
+		radius: n(e)
+	};
+}), V = (e) => /* @__PURE__ */ b("g", { children: e.rings.map((e) => e.angle === null ? /* @__PURE__ */ b(g, {
+	cx: 0,
+	cy: 0,
+	r: e.radius,
+	step: u.guide,
+	tone: "fill-l5"
+}, e.radius) : /* @__PURE__ */ b(g, {
+	cx: 0,
+	cy: 0,
+	from: e.angle + e.half,
+	r: e.radius,
+	step: u.guide,
+	to: e.angle - e.half + D,
+	tone: "fill-l5"
+}, e.radius)) }), H = (o) => {
+	let s = o.data ?? v, c = o.height ?? 400, u = o.rings ?? [240, 360], p = o.formatShare ?? w, g = o.format ?? T, D = o.ringFormat ?? E, O = e(), k = a(s.map((e) => e.intensity)), A = o.highlight ?? k.indexOf(0), j = h("slice"), M = s.reduce((e, t) => e + t.share, 0), N = (e) => p(e.share / M * 100), P = `Pie: ${s.map((e) => `${e.label} ${N(e)}, ${g(e.intensity)}`).join("; ")}`, F = o.intensityLabel === void 0 ? "" : ` ${o.intensityLabel}`;
+	return /* @__PURE__ */ b(t, {
+		overlay: O.at === null ? null : /* @__PURE__ */ b(n, {
+			x: O.at.x,
+			y: O.at.y,
+			children: /* @__PURE__ */ b(l, {
+				facts: [`${N(s[O.at.key])} of adults`, `${g(s[O.at.key].intensity)}${F}`],
+				lead: s[O.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = e < 520, n = (e) => ({
+				figures: t ? N(e) : `${N(e)} · ${g(e.intensity)}`,
+				name: e.label
+			}), a = 8 + i(r(o), e - 16, 18), l = C().value((e) => e.share).sortValues(null).padAngle(.035)(s), p = Math.max(...s.map((e) => e.intensity), ...u), { cx: h, outer: v } = I({
+				bottom: a,
+				height: c,
+				labels: l.map((e) => n(e.data)),
+				max: p,
+				narrow: t,
+				ring: u.at(-1) ?? p,
+				slices: l,
+				width: e
+			}), w = v * .24, T = {
+				cx: h,
+				cy: 28 + v
+			}, E = Math.min(c, Math.round(T.cy + v + 34 + a)), k = y().domain([0, p]).range([w, v]), M = B(u, l, k, D), F = S().innerRadius(w).outerRadius((e) => e.outer).cornerRadius(4).padRadius(v);
+			return /* @__PURE__ */ x(f, {
+				height: E,
+				label: P,
+				leave: O.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ b("defs", { children: /* @__PURE__ */ b(_, {
+						id: j("hatch"),
+						tone: "fill-l4"
+					}) }),
+					/* @__PURE__ */ x("g", {
+						transform: `translate(${T.cx},${T.cy})`,
+						children: [
+							/* @__PURE__ */ b(V, { rings: M }),
+							l.map((e, n) => /* @__PURE__ */ b(z, {
+								centre: T,
+								d: e.data,
+								dim: O.dim(n),
+								fill: A === n ? "fill-hero" : "stroke-l5",
+								pattern: A === n ? void 0 : m(j("hatch")),
+								i: n,
+								labelRadius: k(u.at(-1) ?? p),
+								narrow: t,
+								onEnter: O.showAt(n),
+								r: k,
+								shareText: N(e.data),
+								slice: e,
+								valueText: g(e.data.intensity),
+								wedge: F
+							}, e.data.label)),
+							M.map((e, t) => /* @__PURE__ */ b(R, {
+								angle: e.angle,
+								radius: e.radius,
+								text: D(u[t])
+							}, e.radius))
+						]
+					}),
+					/* @__PURE__ */ b(d, {
+						height: E,
+						text: r(o),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { H as BigSlice };

package/lib/charts/glance/chunky-bars.data.js

@@ -0,0 +1,22 @@
+"use client";
+//#region src/charts/glance/chunky-bars.data.ts
+var e = [
+	{
+		label: "1994",
+		value: 158
+	},
+	{
+		label: "2004",
+		value: 233
+	},
+	{
+		label: "2014",
+		value: 337
+	},
+	{
+		label: "2024",
+		value: 477
+	}
+];
+//#endregion
+export { e as chunkyBarsDemo };

package/lib/charts/glance/chunky-bars.js

@@ -0,0 +1,113 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { noteOf as r, noteSpace as i, stagger as a } from "../util.js";
+import { DimGroup as o, HitRect as s, TipText as c } from "../hover.js";
+import { Bar as l } from "../markers.js";
+import { FootNote as u } from "../plot-note.js";
+import { HRule as d } from "../rules.js";
+import { ChartSvg as f } from "../svg.js";
+import { Label as p } from "../text.js";
+import { paint as m, useTextureIds as h } from "../texture-ids.js";
+import { Hatch as g } from "../texture.js";
+import { rankTones as _ } from "./util-a.js";
+import { chunkyBarsDemo as v } from "./chunky-bars.data.js";
+import { scaleBand as y, scaleLinear as b } from "d3-scale";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/charts/glance/chunky-bars.tsx
+var C = (e) => /* @__PURE__ */ x(l, {
+	className: e.hero ? "grow-y fill-hero" : "grow-y",
+	dir: "up",
+	fill: e.hero ? void 0 : m(e.hatch),
+	h: e.floor - e.top,
+	style: a(e.i, "series"),
+	w: e.bw,
+	x: e.cx - e.bw / 2,
+	y: e.top
+}), w = (e) => `£${(e / 100).toFixed(2)}`, T = (a) => {
+	let l = a.data ?? v, m = a.height ?? 400, T = a.format ?? w, E = e(), D = h("bars")("hatch"), O = _(l.map((e) => e.value), [0, 4]), k = l.map((e) => `${e.label} ${T(e.value)}`).join(", ");
+	return /* @__PURE__ */ x(t, {
+		overlay: E.at === null ? null : /* @__PURE__ */ x(n, {
+			x: E.at.x,
+			y: E.at.y,
+			children: /* @__PURE__ */ x(c, {
+				facts: [T(l[E.at.key].value)],
+				lead: l[E.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = e < 460, n = {
+				bottom: 34 + i(r(a), e - 16, 18),
+				left: 8,
+				right: 8,
+				top: 40
+			}, c = y().domain(l.map((e, t) => t)).range([n.left, e - n.right]).paddingInner(t ? .38 : .58).paddingOuter(.25), h = Math.min(c.bandwidth(), 96), _ = m - n.bottom, v = b().domain([0, Math.max(...l.map((e) => e.value))]).range([_, n.top]);
+			return /* @__PURE__ */ S(f, {
+				height: m,
+				label: k,
+				leave: E.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ x("defs", { children: /* @__PURE__ */ x(g, {
+						id: D,
+						tone: "fill-l4"
+					}) }),
+					l.map((e, t) => {
+						let r = (c(t) ?? 0) + c.bandwidth() / 2, i = v(e.value);
+						return /* @__PURE__ */ S(o, {
+							dim: E.dim(t),
+							onPointerEnter: E.enter(t, r, i - 34),
+							children: [
+								/* @__PURE__ */ x(s, {
+									height: _ - n.top + 60,
+									width: h + 16,
+									x: r - h / 2 - 8,
+									y: n.top - 36
+								}),
+								/* @__PURE__ */ x(C, {
+									bw: h,
+									cx: r,
+									floor: _,
+									hatch: D,
+									hero: O[t] === 0 || a.highlight === t,
+									i: t,
+									top: i
+								}),
+								/* @__PURE__ */ x(p, {
+									anchor: "middle",
+									muted: O[t] !== 0,
+									order: t + 3,
+									tier: "series",
+									voice: "value",
+									x: r,
+									y: i - 10,
+									children: T(e.value)
+								}),
+								/* @__PURE__ */ x(p, {
+									anchor: "middle",
+									muted: !0,
+									voice: "label",
+									x: r,
+									y: _ + 20,
+									children: e.label
+								})
+							]
+						}, e.label);
+					}),
+					/* @__PURE__ */ x(d, {
+						x0: n.left,
+						x1: e - n.right,
+						y: _
+					}),
+					/* @__PURE__ */ x(u, {
+						height: m,
+						text: r(a),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { T as ChunkyBars };