@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/lupi/calendar-heat.js

@@ -0,0 +1,175 @@
+"use client";
+import { monthTickLabels as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { noteOf as i, noteSpace as a, stagger as o } from "../util.js";
+import { DimGroup as s, TipText as c } from "../hover.js";
+import { FootNote as l } from "../plot-note.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { HALFTONE_R as f, TEXTURE_PITCH as p, paint as m, useTextureIds as h } from "../texture-ids.js";
+import { CrossHatch as g, DotScreen as _ } from "../texture.js";
+import { calendarHeatDemo as v } from "./calendar-heat.data.js";
+import { utcFormat as y } from "d3-time-format";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/lupi/calendar-heat.tsx
+var S = 864e5, C = 3, w = 6, T = 4, E = f, D = 2.5, O = Math.floor(p.screen / 2) + .5, k = y("%a %-d %b %Y"), A = (e, t) => {
+	let n = new Date(Date.parse(`${e[0]?.date ?? "1970-01-01"}T00:00:00Z`)), r = (n.getUTCDay() + 6) % 7, i = e.map((e) => {
+		let i = Date.parse(`${e.date}T00:00:00Z`), a = new Date(i), o = (a.getUTCFullYear() - n.getUTCFullYear()) * 12 + a.getUTCMonth() - n.getUTCMonth();
+		return {
+			...e,
+			band: Math.floor(o / t),
+			col: Math.floor((Math.round((i - n.getTime()) / S) + r) / 7),
+			dow: (a.getUTCDay() + 6) % 7,
+			month: o,
+			t: i
+		};
+	}), a = /* @__PURE__ */ new Map();
+	for (let e of i) a.set(e.band, Math.min(a.get(e.band) ?? e.col, e.col));
+	return i.map((e) => ({
+		...e,
+		col: e.col - (a.get(e.band) ?? 0)
+	}));
+}, j = (e, t, n) => `${e}:${t}:${n}`, M = (e, t) => e.x0 + e.pitch * t.col, N = (e, t) => e.top + t.band * e.bandH + e.pitch * t.dow, P = (e, t) => e.x0 + e.pitch * t - 2, F = (e, t, n) => e.top + t * e.bandH + e.pitch * n - 2, I = (e, t) => t <= 0 ? -1 : t >= e.max ? E.length : Math.min(E.length - 1, Math.floor(t / e.max * E.length)), L = (e, t) => `${e ? "end" : "week"}-${t}`, R = ({ ids: e }) => /* @__PURE__ */ x("defs", { children: [[!1, !0].flatMap((t) => E.map((n, r) => /* @__PURE__ */ b(_, {
+	id: e(L(t, r)),
+	r: n,
+	tone: t ? "fill-l4" : "fill-l3"
+}, L(t, r)))), /* @__PURE__ */ b(g, {
+	id: e("peak"),
+	tone: "fill-hero"
+})] }), z = (e, t, n) => {
+	let r = I(e, t.value);
+	return r < 0 ? null : r >= E.length ? {
+		fill: m(n("peak")),
+		rule: "stroke-ink"
+	} : {
+		fill: m(n(L(t.dow >= 5, r))),
+		rule: ""
+	};
+}, B = (e) => {
+	let { d: t, g: n } = e, r = z(n, t, e.ids);
+	return r === null ? null : /* @__PURE__ */ b("g", {
+		transform: `translate(${M(n, t) - n.inset} ${N(n, t) - n.inset})`,
+		children: /* @__PURE__ */ b("rect", {
+			className: `pop shape-crisp ${r.rule}`,
+			fill: r.fill,
+			height: n.cell - 1,
+			strokeWidth: 1,
+			style: o(t.col + t.band * 4 + t.dow * .3, "fine"),
+			width: n.cell - 1,
+			x: n.inset + .5,
+			y: n.inset + .5
+		})
+	});
+}, V = (e, t, n, r) => `M${e} ${t}h${n}v${r}h${-n}z`, H = (e, t) => {
+	let n = new Map(e.map((e) => [j(e.band, e.col, e.dow), e])), r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map(), a = (e, t, n) => {
+		r.has(t) || (r.add(t), i.set(e.month, [...i.get(e.month) ?? [], n]));
+	};
+	for (let r of e) {
+		let e = (e, t) => n.get(j(r.band, e, t))?.month !== r.month, i = (e) => P(t, e), o = (e) => F(t, r.band, e);
+		for (let n of [r.col, r.col + 1]) e(n === r.col ? n - 1 : n, r.dow) && a(r, `v${r.band}:${n}:${r.dow}`, V(i(n), o(r.dow), 1, t.pitch + 1));
+		for (let n of [r.dow, r.dow + 1]) e(r.col, n === r.dow ? n - 1 : n) && a(r, `h${r.band}:${r.col}:${n}`, V(i(r.col), o(n), t.pitch + 1, 1));
+	}
+	return [...i.entries()].map(([e, t]) => ({
+		d: t.join(""),
+		month: e
+	}));
+}, U = ({ days: t, g: n }) => {
+	let r = t.filter((e) => e.dow === 0), i = r.filter((e, t) => r.findIndex((t) => t.month === e.month) === t), a = e(i.map((e) => new Date(e.t))), o = Math.max(...t.map((e) => e.band)) + 1;
+	return /* @__PURE__ */ x("g", { children: [i.map((e, t) => /* @__PURE__ */ b(d, {
+		order: e.col + e.band * 4,
+		tier: "fine",
+		voice: "axis",
+		x: P(n, i.findIndex((t) => t.band === e.band) === t ? 0 : e.col),
+		y: F(n, e.band, 0) - 9,
+		children: a[t]
+	}, e.date)), Array.from({ length: o }, (e, t) => t).flatMap((e) => [
+		"Mon",
+		"Wed",
+		"Fri",
+		"Sun"
+	].map((t, r) => /* @__PURE__ */ b(d, {
+		anchor: "end",
+		middle: !0,
+		voice: "axis",
+		x: n.x0 - (n.narrow ? 8 : 14),
+		y: F(n, e, r * 2) + 2 + n.cell / 2,
+		children: t
+	}, `${e}-${t}`)))] });
+}, W = (e, t, n) => {
+	let r = e.currentTarget.getBoundingClientRect(), i = e.clientY - r.top - t.top + 2, a = Math.floor(i / t.bandH), o = Math.floor((e.clientX - r.left - t.x0 + 2) / t.pitch), s = Math.floor((i - a * t.bandH) / t.pitch);
+	return n.get(j(a, o, s)) ?? null;
+}, G = (e, t, n) => `Daily ${t} across ${e.length} days${n === void 0 ? "" : `; busiest ${k(new Date(n.t))} with ${n.value}`}`, K = (e, t, n, r, i) => {
+	let a = e < 640, o = a ? 36 : 46, s = Math.max(...t.map((e) => e.band)) + 1, c = Math.max(...t.map((e) => e.col)) + 1, l = e - o - 8, u = ((i ?? (a ? Infinity : 560)) - 26 - r - (s - 1) * 42) / (7 * s), d = 2 * Math.floor(Math.min(44, l / c, u) / 2), f = d - C, m = Math.floor((f - 2 * D) / p.screen) + 1, h = (f - p.screen * (m - 1)) / 2;
+	return {
+		bandH: d * 7 + 42,
+		cell: f,
+		inset: O - h,
+		max: n,
+		narrow: a,
+		pitch: d,
+		svgH: 26 + s * (d * 7 + 42) - 42 + r,
+		top: 26,
+		x0: o + Math.max(0, Math.floor((l - d * c) / 2))
+	};
+}, q = (e) => {
+	let d = e.data ?? v, f = e.unit ?? "events", p = t(), m = h("almanac"), g = Math.max(1, ...d.map((e) => e.value));
+	return /* @__PURE__ */ b(n, { children: (t) => {
+		let n = A(d, t < 640 ? T : w), h = n.find((e) => e.value === g), _ = 6 + a(i(e), t - 16, 24), v = K(t, n, g, _, e.height), y = new Map(n.map((e, t) => [j(e.band, e.col, e.dow), t])), S = p.key === null ? void 0 : n[p.key];
+		return /* @__PURE__ */ x("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ x(u, {
+				height: v.svgH,
+				label: G(n, f, h),
+				leave: p.clear,
+				onPointerMove: (e) => {
+					p.set(W(e, v, y));
+				},
+				title: `Daily ${f}`,
+				width: t,
+				children: [
+					/* @__PURE__ */ b(R, { ids: m }),
+					/* @__PURE__ */ b(U, {
+						days: n,
+						g: v
+					}),
+					/* @__PURE__ */ b(s, {
+						dim: p.key !== null,
+						children: n.map((e) => /* @__PURE__ */ b(B, {
+							d: e,
+							g: v,
+							ids: m
+						}, e.date))
+					}),
+					H(n, v).map((e) => /* @__PURE__ */ b("path", {
+						className: "fade fill-l2 shape-crisp",
+						d: e.d,
+						style: o(e.month, "mark")
+					}, e.month)),
+					S !== void 0 && /* @__PURE__ */ b("rect", {
+						className: "stroke-ink shape-crisp pointer-events-none fill-none",
+						height: v.cell - 1,
+						strokeWidth: 1,
+						width: v.cell - 1,
+						x: M(v, S) + .5,
+						y: N(v, S) + .5
+					}),
+					/* @__PURE__ */ b(l, {
+						height: v.svgH,
+						text: i(e),
+						width: t
+					})
+				]
+			}), S !== void 0 && /* @__PURE__ */ b(r, {
+				x: M(v, S) + v.cell / 2,
+				y: N(v, S) - 4,
+				children: /* @__PURE__ */ b(c, {
+					facts: [`${S.value} ${f}`],
+					lead: k(new Date(S.t))
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { q as CalendarHeat };

package/lib/charts/lupi/cluster-field.data.js

@@ -0,0 +1,83 @@
+"use client";
+//#region src/charts/lupi/cluster-field.data.ts
+var e = {
+	clusters: [
+		{
+			at: [215, 215],
+			id: "heunisch",
+			label: "Heunisch weiss",
+			members: [
+				222927,
+				53421,
+				30083,
+				24990,
+				23096,
+				18353,
+				15714,
+				12603,
+				12431,
+				8483
+			]
+		},
+		{
+			at: [500, 100],
+			id: "savagnin",
+			label: "Savagnin blanc",
+			members: [
+				144031,
+				131983,
+				30859,
+				25320,
+				19082,
+				11629,
+				8990
+			]
+		},
+		{
+			at: [545, 268],
+			id: "cabfranc",
+			label: "Cabernet franc",
+			members: [
+				279479,
+				257778,
+				10322
+			]
+		},
+		{
+			at: [450, 420],
+			id: "heben",
+			label: "Hebén",
+			members: [
+				226805,
+				190426,
+				58160,
+				12331,
+				11229,
+				9351
+			]
+		},
+		{
+			at: [62, 410],
+			id: "muscat",
+			label: "Muscat blanc",
+			members: [
+				30218,
+				24834,
+				13493,
+				12531,
+				9558,
+				9482,
+				8941,
+				7914
+			]
+		}
+	],
+	links: [
+		["savagnin", "heunisch"],
+		["cabfranc", "savagnin"],
+		["heben", "savagnin"],
+		["heunisch", "muscat"]
+	]
+};
+//#endregion
+export { e as clusterFieldDemo };

package/lib/charts/lupi/cluster-field.js

@@ -0,0 +1,173 @@
+"use client";
+import { fmtInt as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { clamp as i, noteOf as a, noteSpace as o, sansWidth as s, stagger as c, sum as l } from "../util.js";
+import { DimGroup as u, HitCircle as d, TipText as f } from "../hover.js";
+import { Dot as p, Ring as m } from "../markers.js";
+import { FootNote as h } from "../plot-note.js";
+import { ChartSvg as g } from "../svg.js";
+import { Label as _ } from "../text.js";
+import { clusterFieldDemo as v } from "./cluster-field.data.js";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/charts/lupi/cluster-field.tsx
+var x = (e, t) => t ? 150 : 14 + 7 * Math.sqrt(e.members.length), S = 34, C = (e, t, n) => {
+	let r = t.map((e, t) => {
+		let r = e.id === n, [i, a] = e.at ?? [t * 120, 0];
+		return {
+			cluster: e,
+			core: r,
+			fx: i,
+			fy: a,
+			r: x(e, r)
+		};
+	}), i = r.map((e) => s(`${e.cluster.label} · ${e.cluster.members.length}`, 11) / 2), a = (e) => {
+		let t = r.map((t, n) => Math.max(t.r * e + 4, i[n]));
+		return {
+			hi: Math.max(...r.map((n, r) => n.fx * e + t[r])),
+			lo: Math.min(...r.map((n, r) => n.fx * e - t[r]))
+		};
+	}, [o, c] = [.01, 8];
+	for (let t = 0; t < 40; t += 1) {
+		let t = (o + c) / 2, n = a(t);
+		n.hi - n.lo > e ? c = t : o = t;
+	}
+	let l = o, { lo: u } = a(l), d = Math.min(...r.map((e) => e.fy - e.r)), f = Math.max(...r.map((e) => e.fy + e.r)), p = r.map((e) => ({
+		R: e.r * l,
+		cluster: e.cluster,
+		core: e.core,
+		x: e.fx * l - u,
+		y: (e.fy - d) * l + 4
+	}));
+	return {
+		height: Math.round((f - d) * l + 4 + S),
+		placed: p,
+		s: l
+	};
+}, w = (e, t) => t === 0 ? e : w(t, e % t), T = (e) => {
+	let t = Math.round(e * (1 - 2 / (1 + Math.sqrt(5))));
+	return Array.from({ length: e }, (e, t) => t + 1).filter((t) => w(t, e) === 1).toSorted((e, n) => Math.abs(e - t) - Math.abs(n - t))[0] ?? 1;
+}, E = (e) => {
+	let t = e.cluster.members.length, n = T(t), r = e.core ? .28 : .38;
+	return e.cluster.members.map((i, a) => {
+		let o = a * n % t / t * 2 * Math.PI, s = e.R * (r + (1 - r) * Math.sqrt((a + .5) / t));
+		return {
+			id: `${e.cluster.id}-${a}`,
+			k: a,
+			size: i,
+			x: e.x + Math.sin(o) * s,
+			y: e.y - Math.cos(o) * s
+		};
+	});
+}, D = (e) => {
+	let { p: t } = e, n = i(e.s + .25, .7, 1.2);
+	return /* @__PURE__ */ b(u, {
+		dim: e.dim,
+		onPointerEnter: e.onEnter,
+		children: [
+			/* @__PURE__ */ y(d, {
+				cx: t.x,
+				cy: t.y,
+				r: t.R
+			}),
+			E(t).map((r) => /* @__PURE__ */ b("g", { children: [/* @__PURE__ */ y("line", {
+				className: "draw stroke-l6",
+				pathLength: 1,
+				strokeWidth: 1,
+				style: c(r.k, "dense"),
+				x1: t.x,
+				x2: r.x,
+				y1: t.y,
+				y2: r.y
+			}), /* @__PURE__ */ y("circle", {
+				className: `pop ${t.core ? "fill-l3" : "fill-l4"}`,
+				cx: r.x,
+				cy: r.y,
+				r: (.9 + 2.25 * Math.sqrt(r.size / e.maxSize)) * n,
+				style: c(r.k, "dense")
+			})] }, r.id)),
+			t.core ? /* @__PURE__ */ y(p, {
+				className: "pop fill-hero",
+				cx: t.x,
+				cy: t.y,
+				size: "lg"
+			}) : /* @__PURE__ */ y(m, {
+				className: "pop stroke-l2",
+				cx: t.x,
+				cy: t.y,
+				size: "sm"
+			}),
+			/* @__PURE__ */ b(_, {
+				anchor: "middle",
+				className: "fade",
+				muted: !t.core,
+				voice: "label",
+				x: t.x,
+				y: t.y + t.R + 22,
+				children: [
+					t.cluster.label,
+					" · ",
+					t.cluster.members.length
+				]
+			})
+		]
+	});
+}, O = (e) => {
+	let t = new Map(e.placed.map((e) => [e.cluster.id, e]));
+	return /* @__PURE__ */ y("g", {
+		className: "fade",
+		children: e.links.map(([e, n]) => {
+			let r = t.get(e), i = t.get(n);
+			if (r === void 0 || i === void 0) return null;
+			let a = (r.x + i.x) / 2, o = (r.y + i.y) / 2, s = a - (i.y - r.y) * .12, c = o + (i.x - r.x) * .12;
+			return /* @__PURE__ */ y("path", {
+				className: "stroke-l6",
+				d: `M${r.x},${r.y}Q${s},${c} ${i.x},${i.y}`,
+				fill: "none",
+				strokeWidth: 1.5
+			}, `${e}-${n}`);
+		})
+	});
+}, k = (i) => {
+	let s = i.data ?? v, c = s.clusters.toSorted((e, t) => t.members.length - e.members.length).at(0), u = c === void 0 ? "" : c.id, d = i.noun ?? "variety", p = i.sizeNoun ?? "ha", m = i.nouns ?? "varieties", _ = Math.max(1, ...s.clusters.flatMap((e) => e.members)), x = t(), S = x.key === null ? void 0 : s.clusters.find((e) => e.id === x.key);
+	return /* @__PURE__ */ y(n, {
+		overlay: x.at === null || S === void 0 ? null : /* @__PURE__ */ y(r, {
+			x: x.at.x,
+			y: x.at.y,
+			children: /* @__PURE__ */ y(f, {
+				facts: [`${S.members.length} ${S.members.length === 1 ? d : m}`, `${e(l(S.members))} ${p}`],
+				lead: S.label
+			})
+		}),
+		children: (e) => {
+			let t = C(e, s.clusters, u), n = i.height ?? t.height + o(a(i), e - 16, 24);
+			return /* @__PURE__ */ b(g, {
+				height: n,
+				label: `Grape families: ${s.clusters.map((e) => `${e.label} ${e.members.length}`).join(", ")}`,
+				leave: x.clear,
+				title: "Grape families as a core cluster with satellite islands",
+				width: e,
+				children: [
+					/* @__PURE__ */ y(O, {
+						links: s.links,
+						placed: t.placed
+					}),
+					t.placed.map((e) => /* @__PURE__ */ y(D, {
+						dim: x.dim(e.cluster.id),
+						maxSize: _,
+						onEnter: x.enter(e.cluster.id, e.x, e.y - e.R - 4),
+						p: e,
+						s: t.s
+					}, e.cluster.id)),
+					/* @__PURE__ */ y(h, {
+						height: n,
+						text: a(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { k as ClusterField };

package/lib/charts/lupi/dot-cascade.data.js

@@ -0,0 +1,54 @@
+"use client";
+//#region src/charts/lupi/dot-cascade.data.ts
+var e = [
+	{
+		label: "Morphy's",
+		value: 7133
+	},
+	{
+		label: "Anastasia's",
+		value: 7524
+	},
+	{
+		label: "Arabian",
+		value: 7560
+	},
+	{
+		label: "Triangle",
+		value: 7741
+	},
+	{
+		label: "Swallow's tail",
+		value: 8397
+	},
+	{
+		label: "Hook",
+		value: 10729
+	},
+	{
+		label: "Corner",
+		value: 10782
+	},
+	{
+		label: "Epaulette",
+		value: 22646
+	},
+	{
+		label: "Smothered",
+		value: 24332
+	},
+	{
+		label: "Opera",
+		value: 63940
+	},
+	{
+		label: "Pillsbury's",
+		value: 67644
+	},
+	{
+		label: "Back rank",
+		value: 208093
+	}
+];
+//#endregion
+export { e as dotCascadeDemo };

package/lib/charts/lupi/dot-cascade.js

@@ -0,0 +1,124 @@
+"use client";
+import { fmtKInt as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { clamp as i, noteOf as a, noteSpace as o, sansWidth as s, stagger as c } from "../util.js";
+import { DimGroup as l, HitRect as u, TipText as d } from "../hover.js";
+import { FootNote as f } from "../plot-note.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { PixelLine as h } from "../texture.js";
+import { dotCascadeDemo as g } from "./dot-cascade.data.js";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/charts/lupi/dot-cascade.tsx
+var y = (e, t, n, r, a) => {
+	let o = i((e - 40) / n.length, 16, 38), c = (e - o * n.length) / 2 + o / 2, l = (e) => c + e * o, u = Math.max(0, ...r.map((e, t) => 10 + s(e, 11) - (l(t) - c) * .32)), d = t - 6 - a - u, f = (e) => d - (e - c) * .32, p = n.map((e, t) => e > 1 ? (f(l(t)) - 14 - 34) / (e - 1) : 99), m = Math.floor(i(Math.min(...p), 4, 10)), h = Math.max(0, Math.min(...n.map((e, t) => f(l(t)) - 14 - (e - 1) * m - 34)));
+	return {
+		capW: Math.round(Math.min(o * .6, 14)),
+		colX: l,
+		dy: m,
+		floorY: (e) => f(e) - h,
+		gap: 14,
+		height: t - h,
+		pitch: o,
+		tickW: Math.round(Math.min(o * .4, 9))
+	};
+}, b = ({ count: e, datum: t, dim: n, format: r, hero: i, i: a, layout: o, onEnter: s }) => {
+	let { capW: d, colX: f, dy: p, floorY: h, gap: g, pitch: y, tickW: b } = o, x = f(a), S = Math.round(h(x) - g), C = S - (e - 1) * p, w = Array.from({ length: e - 1 }, (e, t) => t);
+	return /* @__PURE__ */ v(l, {
+		dim: n,
+		onPointerEnter: () => {
+			s(x, C - 22);
+		},
+		children: [
+			/* @__PURE__ */ _(u, {
+				height: h(x) - C + 70,
+				width: y,
+				x: x - y / 2,
+				y: C - 26
+			}),
+			w.map((e) => /* @__PURE__ */ _("rect", {
+				className: `pop ${i ? "fill-l3" : "fill-l5"}`,
+				height: 1,
+				style: c(a * 2 + e, "fine"),
+				width: b,
+				x: Math.round(x - b / 2),
+				y: S - e * p
+			}, `${t.label}-${e}`)),
+			/* @__PURE__ */ _("rect", {
+				className: `pop ${i ? "fill-hero" : "fill-l3"}`,
+				height: 2,
+				style: c(a * 2 + e, "fine"),
+				width: d,
+				x: Math.round(x - d / 2),
+				y: C - 1
+			}),
+			/* @__PURE__ */ _(m, {
+				anchor: "middle",
+				order: a,
+				tier: "mark",
+				voice: i ? "value" : "axis",
+				x,
+				y: C - 9,
+				children: r(t.value)
+			}),
+			/* @__PURE__ */ _(m, {
+				anchor: "end",
+				middle: !0,
+				muted: !0,
+				transform: `translate(${x},${h(x) + 10}) rotate(-90)`,
+				voice: "label",
+				children: t.label
+			})
+		]
+	});
+}, x = (i) => {
+	let s = i.data ?? g, c = i.sort === !1 ? s : s.toSorted((e, t) => e.value - t.value), l = i.unit ?? 1e4, u = i.height ?? 440, m = i.format ?? e, x = i.noun ?? "puzzles", S = t(), C = i.highlight ?? c.at(-1)?.label, w = c.map((e) => Math.max(1, Math.ceil(e.value / l)));
+	return /* @__PURE__ */ _(n, {
+		overlay: S.at === null ? null : /* @__PURE__ */ _(r, {
+			x: S.at.x,
+			y: S.at.y,
+			children: /* @__PURE__ */ _(d, {
+				facts: [`${m(c[S.at.key].value)} ${x}`],
+				lead: c[S.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = y(e, u, w, c.map((e) => e.label), o(a(i), e - 16, 20)), n = t.colX(0) - t.pitch * .7, r = t.colX(c.length - 1) + t.pitch * .7;
+			return /* @__PURE__ */ v(p, {
+				height: t.height,
+				label: `Puzzles by mate: ${c.map((e) => `${e.label} ${m(e.value)}`).join(", ")}`,
+				leave: S.clear,
+				title: "Puzzles by named mate as stacked unit ticks",
+				width: e,
+				children: [
+					/* @__PURE__ */ _(h, {
+						className: "fade",
+						tone: "fill-l5",
+						x0: n,
+						x1: r,
+						y0: t.floorY(n),
+						y1: t.floorY(r)
+					}),
+					c.map((e, n) => /* @__PURE__ */ _(b, {
+						count: w[n],
+						datum: e,
+						dim: S.dim(n),
+						format: m,
+						hero: C === e.label,
+						i: n,
+						layout: t,
+						onEnter: S.showAt(n)
+					}, e.label)),
+					/* @__PURE__ */ _(f, {
+						height: t.height,
+						text: a(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { x as DotCascade };