@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/lupi/ridgeline.js

@@ -0,0 +1,195 @@
+"use client";
+import { fmtDegC 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, sansWidth as o, stagger as s } from "../util.js";
+import { DimGroup as c, HitRect as l, TipText as u } from "../hover.js";
+import { Dot as d } from "../markers.js";
+import { PlotNote as f } from "../plot-note.js";
+import { HRule as p, Tick as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { paint as _, useTextureIds as v } from "../texture-ids.js";
+import { CrossHatch as y, Hatch as b } from "../texture.js";
+import { ridgelineDemo as x } from "./ridgeline.data.js";
+import { scaleLinear as S } from "d3-scale";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { area as E, curveBasis as D, line as O } from "d3-shape";
+//#region src/charts/lupi/ridgeline.tsx
+var k = 120, A = (t) => t === 0 ? "0" : e(t).replace(".0 °C", " °C"), j = (e, t, n, r) => {
+	let i = (n - t) / k, a = Array.from({ length: 121 }, (n, a) => {
+		let o = t + i * a, s = 0;
+		for (let t of e.values) {
+			let e = (o - t) / r;
+			s += Math.exp(-.5 * e * e);
+		}
+		return [o, s / (e.values.length * r * Math.sqrt(2 * Math.PI))];
+	}), o = 0;
+	for (let [e, t] of a.entries()) t[1] > a[o][1] && (o = e);
+	let s = o === 0 || o === k ? a[o][1] : (a[o - 1][1] + 4 * a[o][1] + a[o + 1][1]) / 6, c = e.values.toSorted((e, t) => e - t);
+	return {
+		density: a,
+		label: e.label,
+		median: c[Math.floor(c.length / 2)] ?? 0,
+		n: e.values.length,
+		peak: a[o][0],
+		top: s
+	};
+}, M = ({ ridge: e, index: t, base: n, ridgeH: r, maxD: i, x: a, hero: o, dim: l, label: u, fills: d }) => {
+	let f = (e) => n - e / i * r, m = E().x((e) => a(e[0])).y0(n).y1((e) => f(e[1])).curve(D)(e.density), h = O().x((e) => a(e[0])).y((e) => f(e[1])).curve(D)(e.density);
+	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("path", {
+		d: m ?? "",
+		className: "fill-paper"
+	}), /* @__PURE__ */ T(c, {
+		dim: l,
+		children: [
+			/* @__PURE__ */ w("g", {
+				className: "fade",
+				style: s(t, "series"),
+				children: /* @__PURE__ */ w("path", {
+					d: m ?? "",
+					fill: _(o ? d.hero : d.hatch)
+				})
+			}),
+			/* @__PURE__ */ w(p, {
+				x0: a.range()[0],
+				x1: a.range()[1],
+				y: n
+			}),
+			/* @__PURE__ */ w("path", {
+				d: h ?? "",
+				className: `draw cap-round fill-none ${o ? "stroke-hero" : "stroke-l3"}`,
+				pathLength: 1,
+				style: s(t, "series"),
+				strokeWidth: o ? 2 : 1.5
+			}),
+			/* @__PURE__ */ w(g, {
+				anchor: "end",
+				muted: !o,
+				order: t,
+				tier: "series",
+				voice: "label",
+				x: a.range()[0] - 18,
+				y: n - 4,
+				children: u
+			})
+		]
+	})] });
+}, N = ({ ridges: e, baseOf: t, ridgeH: n, maxD: r, x: i, heroOf: a, hover: o, format: l }) => /* @__PURE__ */ w("g", { children: e.map((e, u) => {
+	let f = a(e), p = t(u);
+	return /* @__PURE__ */ T(c, {
+		dim: o !== null && o !== u,
+		children: [/* @__PURE__ */ w(d, {
+			className: `pop ${f ? "fill-hero" : "fill-l3"}`,
+			cx: i(e.peak),
+			cy: p - e.top / r * n,
+			size: f ? "md" : "sm",
+			style: s(u * 6 + 30, "fine")
+		}), /* @__PURE__ */ w(g, {
+			muted: !f,
+			order: u + 6,
+			tier: "series",
+			voice: "value",
+			x: i.range()[1] + 8,
+			y: p - 4,
+			children: l(e.peak)
+		})]
+	}, `peak-${e.label}`);
+}) }), P = ({ x: e, y: t, ticks: n, format: r }) => {
+	let [i, a] = e.domain(), o = Array.from({ length: n + 1 }, (e, t) => i + (a - i) * t / n);
+	return /* @__PURE__ */ w("g", {
+		className: "fade",
+		children: o.map((n) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w(m, {
+			x: e(n),
+			y: Math.round(t)
+		}), /* @__PURE__ */ w(g, {
+			anchor: "middle",
+			voice: "axis",
+			x: e(n),
+			y: t + 20,
+			children: r(n)
+		})] }, `tick-${n}`))
+	});
+}, F = (e) => {
+	let s = e.data ?? x, [c, d] = e.domain ?? [-12, 12], p = e.bandwidth ?? (d - c) / 26, m = e.format ?? A, g = e.height ?? 440, _ = e.ticks ?? 4, C = t(), E = v("ridge"), D = E("hatch"), O = E("hero"), k = s.map((e) => j(e, c, d, p)), F = Math.max(...k.map((e) => e.top)), I = e.highlight ?? k[0]?.label, L = (e) => e.label === I;
+	return /* @__PURE__ */ w(n, { children: (t) => {
+		let n = Math.ceil(18 + Math.max(...k.map((e) => o(e.label, 10.4)))), s = Math.ceil(8 + Math.max(...k.map((e) => o(m(e.peak), 11)))), p = Math.min(t - n - s, 520), v = Math.round(n + (t - n - s - p) / 2), x = S().domain([c, d]).range([v, v + p]), E = t - 16 - Math.abs(2 * v + p - t), A = 34 + a(i(e), E, 24), j = (g - A - 30) / (k.length + .9), I = j * 1.9, R = (e) => g - A - j * (k.length - 1 - e), z = C.key === null ? void 0 : k[C.key];
+		return /* @__PURE__ */ T("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ T(h, {
+				height: g,
+				label: `Ridgeline of ${k.length} distributions; peaks: ${k.map((e) => `${e.label} ${m(e.peak)}`).join(", ")}`,
+				leave: C.clear,
+				title: "January daily mean temperature by decade",
+				width: t,
+				children: [
+					/* @__PURE__ */ T("defs", { children: [/* @__PURE__ */ w(b, {
+						id: D,
+						tone: "fill-l5"
+					}), /* @__PURE__ */ w(y, {
+						id: O,
+						tone: "fill-hero"
+					})] }),
+					k.map((e, n) => /* @__PURE__ */ T("g", {
+						onPointerEnter: C.enter(n),
+						children: [/* @__PURE__ */ w(l, {
+							x: 0,
+							y: R(n) - j,
+							width: t,
+							height: j
+						}), /* @__PURE__ */ w(M, {
+							ridge: e,
+							index: n,
+							base: R(n),
+							ridgeH: I,
+							maxD: F,
+							x,
+							hero: L(e),
+							dim: C.dim(n),
+							label: e.label,
+							fills: {
+								hatch: D,
+								hero: O
+							}
+						})]
+					}, e.label)),
+					/* @__PURE__ */ w(N, {
+						ridges: k,
+						baseOf: R,
+						ridgeH: I,
+						maxD: F,
+						x,
+						heroOf: L,
+						hover: C.key,
+						format: m
+					}),
+					/* @__PURE__ */ w(P, {
+						x,
+						y: R(k.length - 1) + 8,
+						ticks: _,
+						format: m
+					}),
+					/* @__PURE__ */ w(f, {
+						text: i(e),
+						width: E,
+						x: v + p / 2,
+						y: g - 6
+					})
+				]
+			}), z !== void 0 && C.key !== null && /* @__PURE__ */ w(r, {
+				x: x(z.peak),
+				y: R(C.key) - I * .5,
+				children: /* @__PURE__ */ w(u, {
+					facts: [
+						`peak ${m(z.peak)}`,
+						`median ${m(z.median)}`,
+						`n = ${z.n}`
+					],
+					lead: z.label
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { F as Ridgeline };

package/lib/charts/lupi/trend-lineage.data.js

@@ -0,0 +1,51 @@
+"use client";
+//#region src/charts/lupi/trend-lineage.data.ts
+var e = [
+	{
+		name: "Forties",
+		reworked: [1956],
+		shipped: 1924
+	},
+	{
+		name: "Dogger",
+		reworked: [1956],
+		shipped: 1924
+	},
+	{
+		name: "Tay",
+		retired: 1949,
+		shipped: 1924
+	},
+	{
+		name: "German Bight",
+		reworked: [1956],
+		shipped: 1949
+	},
+	{
+		name: "FitzRoy",
+		reworked: [2002],
+		shipped: 1949
+	},
+	{
+		name: "Rockall",
+		shipped: 1949
+	},
+	{
+		name: "Fisher",
+		shipped: 1956
+	},
+	{
+		name: "Viking",
+		shipped: 1956
+	},
+	{
+		name: "North Utsire",
+		shipped: 1984
+	},
+	{
+		name: "South Utsire",
+		shipped: 1984
+	}
+];
+//#endregion
+export { e as trendLineageDemo };

package/lib/charts/lupi/trend-lineage.js

@@ -0,0 +1,198 @@
+"use client";
+import { yearTickLabels 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, HitRect as c, TipText as l } from "../hover.js";
+import { crisp as u } from "../axes.js";
+import { DOT as d } from "../marks.js";
+import { Dot as f, Ring as p } from "../markers.js";
+import { FootNote as m } from "../plot-note.js";
+import { HRule as h, Stem as g } from "../rules.js";
+import { ChartSvg as _ } from "../svg.js";
+import { Label as v } from "../text.js";
+import { TEXTURE_PITCH as y } from "../texture-ids.js";
+import { DottedLine as b } from "../texture.js";
+import { byStep as x } from "./util-b.js";
+import { trendLineageDemo as S } from "./trend-lineage.data.js";
+import { scaleLinear as C } from "d3-scale";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/charts/lupi/trend-lineage.tsx
+var D = .65, O = (e) => Math.floor(e), k = (e) => {
+	let t = [`added ${O(e.shipped)}`], n = e.reworked ?? [], r = e.dormant ?? [];
+	return n.length > 0 && t.push(`changed ${n.map(O).join(", ")}`), r.length > 0 && t.push(`suspended ${r.map(([e, t]) => `${O(e)}–${O(t)}`).join(", ")}`), t.push(e.retired === void 0 ? "in use today" : `dropped ${O(e.retired)}`), t.join(" · ");
+}, A = (e, t) => {
+	let n = e.dormant ?? [], r = [
+		e.shipped,
+		...n.flat(),
+		t
+	].toSorted((e, t) => e - t), i = [];
+	for (let [t, a] of r.entries()) {
+		let o = r[t + 1];
+		if (o !== void 0 && o > a) {
+			let t = (a + o) / 2;
+			i.push({
+				a,
+				b: o,
+				dormant: n.some(([e, n]) => t > e && t < n),
+				id: `${e.name}-${a}`
+			});
+		}
+	}
+	return i;
+}, j = ({ years: t, y: n, x0: r, x1: i, every: a }) => {
+	let o = t.filter((e) => e % a === 0), s = new Map(e(o.map((e) => new Date(Date.UTC(e, 0, 1)))).map((e, t) => [o[t], e]));
+	return /* @__PURE__ */ T("g", { children: (a >= 5 ? o : t).map((e) => /* @__PURE__ */ E("g", { children: [/* @__PURE__ */ T(h, {
+		kind: "grid",
+		x0: r - 8,
+		x1: i,
+		y: n(e)
+	}), s.has(e) && /* @__PURE__ */ T(v, {
+		anchor: "end",
+		middle: !0,
+		voice: "axis",
+		x: r - 16,
+		y: n(e),
+		children: s.get(e)
+	})] }, `year-${e}`)) });
+}, M = ({ feature: e, index: t, x: n, colW: r, top: i, floor: a, floorYear: s, size: l, y: d, hero: m }) => {
+	let h = [e.shipped, ...e.reworked ?? []].toSorted((e, t) => e - t), _ = e.retired ?? s, x = a + 14, S = m ? Math.round(n) : u(n), C = "fill-muted";
+	return m ? C = "" : e.retired !== void 0 && (C = "fill-faint"), /* @__PURE__ */ E(w, { children: [
+		/* @__PURE__ */ T(c, {
+			x: n - r / 2,
+			y: i,
+			width: r,
+			height: a - i + 40
+		}),
+		A(e, _).map((e) => e.dormant ? /* @__PURE__ */ T("g", {
+			className: "fade",
+			style: o(t, "series"),
+			children: /* @__PURE__ */ T(b, {
+				pitch: y.dense,
+				tone: m ? "fill-hero" : "fill-l3",
+				x0: n,
+				x1: n,
+				y0: d(e.a),
+				y1: d(e.b)
+			})
+		}, e.id) : /* @__PURE__ */ T(g, {
+			className: `grow-y from-top ${m ? "stroke-hero" : "stroke-l5"}`,
+			hero: m,
+			style: o(t, "series"),
+			x: n,
+			y0: u(d(e.a)),
+			y1: u(d(e.b))
+		}, e.id)),
+		e.retired === void 0 ? null : /* @__PURE__ */ T(f, {
+			className: "pop fill-l5",
+			style: o(t * 3 + 4, "mark"),
+			cx: S,
+			cy: u(d(e.retired)),
+			size: "xs"
+		}),
+		h.slice(1).map((e) => /* @__PURE__ */ T(p, {
+			className: `pop ${m ? "stroke-hero" : "stroke-l3"}`,
+			style: o(t * 3 + 2, "mark"),
+			cx: S,
+			cy: u(d(e)),
+			size: l
+		}, `rework-${e}`)),
+		/* @__PURE__ */ T(f, {
+			className: `pop ${m ? "fill-hero" : "fill-l3"}`,
+			style: o(t * 3, "mark"),
+			cx: S,
+			cy: u(d(e.shipped)),
+			size: l
+		}),
+		/* @__PURE__ */ T(v, {
+			anchor: "end",
+			className: C,
+			order: t,
+			transform: `rotate(${r < 44 ? -64 : -38} ${n + 3} ${x})`,
+			voice: "label",
+			x: n + 3,
+			y: x,
+			children: e.name
+		})
+	] });
+}, N = (o) => {
+	let c = o.data ?? S, u = o.height ?? 460, f = t(), p = c.flatMap((e) => [
+		e.shipped,
+		...e.reworked ?? [],
+		...e.retired === void 0 ? [] : [e.retired]
+	]), h = o.highlight ?? c.filter((e) => e.retired === void 0).toSorted((e, t) => e.shipped - t.shipped).at(0)?.name, [g, v] = o.years ?? [Math.floor(Math.min(...p)), Math.ceil(Math.max(...p))], y = Math.max(0, ...e(Array.from({ length: v - g + 1 }, (e, t) => new Date(Date.UTC(g + t, 0, 1)))).map((e) => e.length * 7.3));
+	return /* @__PURE__ */ T(n, { children: (e) => {
+		let t = {
+			bottom: (e < 480 ? 84 : 76) + a(i(o), e - 16, 24),
+			left: 16 + y,
+			right: 0,
+			top: 14
+		}, n = Math.min(e - t.left - t.right, c.length * 64), p = t.left + (e - t.left - t.right - n) / 2, b = n / c.length, S = (e) => p + b * (e + .5), w = C().domain([g, v + D]).range([t.top + 8, u - t.bottom]), O = w(g + 1) - w(g), A = w(v + D), N = Math.min(O * .32, b * .2) >= d.lg ? "lg" : "md", P = Array.from({ length: v - g + 1 }, (e, t) => g + t), F = x(O, [
+			{
+				min: 34,
+				out: 1
+			},
+			{
+				min: 10,
+				out: 2
+			},
+			{
+				min: 5,
+				out: 5
+			},
+			{
+				min: 2.5,
+				out: 10
+			}
+		], 25), I = f.key === null ? void 0 : c[f.key];
+		return /* @__PURE__ */ E("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ E(_, {
+				height: u,
+				label: `Sea area lineage ${g}–${v}: ${c.map((e) => `${e.name}, ${k(e)}`).join("; ")}`,
+				leave: f.clear,
+				title: "Sea area lineage",
+				width: e,
+				children: [
+					/* @__PURE__ */ T(j, {
+						years: P,
+						y: w,
+						x0: p,
+						x1: p + n,
+						every: F
+					}),
+					c.map((e, n) => /* @__PURE__ */ T(s, {
+						dim: f.dim(n),
+						onPointerEnter: f.enter(n),
+						children: /* @__PURE__ */ T(M, {
+							feature: e,
+							index: n,
+							x: S(n),
+							colW: b,
+							top: t.top,
+							floor: A,
+							floorYear: v + D,
+							size: N,
+							y: w,
+							hero: h === e.name
+						})
+					}, e.name)),
+					/* @__PURE__ */ T(m, {
+						height: u,
+						text: i(o),
+						width: e
+					})
+				]
+			}), I !== void 0 && f.key !== null && /* @__PURE__ */ T(r, {
+				x: S(f.key),
+				y: w(I.shipped) - d[N] - 4,
+				children: /* @__PURE__ */ T(l, {
+					facts: [k(I)],
+					lead: I.name
+				})
+			})]
+		});
+	} });
+};
+//#endregion
+export { N as TrendLineage };

package/lib/charts/lupi/type-colonnade.data.js

@@ -0,0 +1,18 @@
+"use client";
+var e = [
+	["Trinity House", /* @__PURE__ */ "Anvil Point Lighthouse,Bamburgh Lighthouse,Beachy Head Lighthouse,Berry Head Lighthouse,Bishop Rock Lighthouse,Bull Point Lighthouse,Coquet Lighthouse,Cromer Lighthouse,Crow Point Lighthouse,Dungeness Lighthouse,Eddystone Lighthouse,Farne Lighthouse,Godrevy Lighthouse,Guile Point East Lighthouse,Hartland Point Lighthouse,Heugh Hill Lighthouse,Hilbre Island Lighthouse,Hurst Point Lighthouse,Instow Front Lighthouse,Instow Rear Lighthouse,Lizard Lighthouse,Longships Lighthouse,Longstone Lighthouse,Lowestoft Lighthouse,Lundy North Lighthouse,Lundy South Lighthouse,Lynmouth Foreland Lighthouse,Nab Tower,Needles Lighthouse,North Foreland Lighthouse,Pendeen Lighthouse,Peninnis Lighthouse,Portland Bill Lighthouse,Round Island Lighthouse,Southwold Lighthouse,St Anthony's Lighthouse,St Bees Lighthouse,St. Catherine's Lighthouse,Start Point Lighthouse,Tater Du Lighthouse,Trevose Head Lighthouse,Whitby Lighthouse,Wolf Rock Lighthouse".split(",")],
+	["Harbours", /* @__PURE__ */ "Beach Lighthouse.Berkeley Pill Front light.Berkeley Pill Rear light.Berwick Lighthouse.Chapel Rock Lighthouse.Folkestone Lighthouse.Gorleston South Pier Lighthouse.Herd Groyne Light.Heugh Lighthouse.Ilfracombe Lighthouse.Killingholme High Lighthouse.Killingholme South Low Lighthouse.Lyde Rock lighthouse.Maryport New Lighthouse.Pharos Lighthouse.Plover Scar Lighthouse.Portishead Point Lighthouse.Portland Breakwater Lighthouse.Rampside Lighthouse.Ramsgate West Pier Lighthouse.Roker Pier lighthouse.Shoreham Lighthouse.South Gare Lighthouse.Teignmouth Lighthouse.Thorngumbald Clough High Lighthouse.Thorngumbald Clough Low Lighthouse.Tyne South Pier light.Tynemouth North Pier light.Walney Lighthouse.Watchet Harbour Lighthouse.West Pier Lighthouse.Whitby East Pier Lighthouse.Whitby West Pier Lighthouse.Whitgift Lighthouse".split(".")],
+	["Councils", [
+		"Burnham-on-Sea Low Lighthouse",
+		"Scarborough Lighthouse",
+		"Whitby East Pier beacon",
+		"Whitby West Pier beacon"
+	]],
+	["Trust", ["Happisburgh Lighthouse"]],
+	["Defence", ["Plymouth Breakwater Lighthouse"]]
+].flatMap(([e, t]) => t.map((t) => ({
+	name: t,
+	owner: e
+}))).toSorted((e, t) => e.name.localeCompare(t.name));
+//#endregion
+export { e as typeColonnadeDemo };

package/lib/charts/lupi/type-colonnade.js

@@ -0,0 +1,198 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { dimClass as n, noteOf as r, noteSpace as i, sansWidth as a, stagger as o, wrapWords as s } from "../util.js";
+import { HitRect as c, TipText as l } from "../hover.js";
+import { crisp as u } from "../axes.js";
+import { DOT as d } from "../marks.js";
+import { Ring as f } from "../markers.js";
+import { FootNote as p } from "../plot-note.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 { CrossHatch as v, Hatch as y } from "../texture.js";
+import { typeColonnadeDemo as b } from "./type-colonnade.data.js";
+import { useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/charts/lupi/type-colonnade.tsx
+var w = 12, T = 10, E = 4, D = 2, O = d.xs, k = (e) => a(e.replaceAll("\xA0", " "), 10.4), A = (e) => `${e.owner}\u00A0·\u00A0${e.count}`, j = (e, t, n) => {
+	let r = Math.max(0, ...e.map((e) => t(e.count) + T + k(A(e)) + E));
+	return Math.min(Math.ceil(r), n * .42);
+}, M = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) t.set(n.owner, (t.get(n.owner) ?? 0) + 1);
+	return [...t.entries()].toSorted((e, t) => t[1] - e[1]).map(([e, t], n) => ({
+		count: t,
+		owner: e,
+		rank: n
+	}));
+}, N = (e, t) => {
+	let n = new Map(t.map((e) => [e.owner, e.rank])), r = [...e.keys()].toSorted((t, r) => (n.get(e[t]?.owner ?? "") ?? 0) - (n.get(e[r]?.owner ?? "") ?? 0) || t - r), i = /* @__PURE__ */ new Map(), a = 0, o;
+	for (let t of r) {
+		let n = e[t]?.owner;
+		o !== void 0 && n !== o && (a += D), i.set(t, a), a += 1, o = n;
+	}
+	return {
+		rows: a,
+		slot: i
+	};
+}, P = (e, t, n, r, i) => {
+	let a = e < 460, o = Math.min(e, 600), c = Math.round((e - o) / 2), { rows: l, slot: u } = N(n, r), d = Math.max(4, Math.floor((t - 12 - i) / Math.max(1, l))), f = (e) => 8 + d * (u.get(e) ?? 0), p = new Map(r.map((e) => {
+		let t = [...n.keys()].flatMap((t) => n[t]?.owner === e.owner ? [f(t)] : []);
+		return [e.owner, (Math.min(...t) + Math.max(...t)) / 2];
+	})), m = r[0]?.count ?? 1, h = a ? 12 : 16, g = (e) => Math.max(3, h * Math.sqrt(e / m)), _ = j(r, g, o), v = new Map(r.map((e) => [e.owner, s(A(e), _ - g(e.count) - T - E, k)]));
+	return {
+		blockW: o,
+		height: Math.round(8 + d * (l - 1) + 12 + i),
+		left: c,
+		ownerLines: v,
+		pitch: d,
+		rMax: h,
+		rOf: g,
+		xDot: c + O + 1.5,
+		xOwner: c + o + E - _,
+		xTick0: c,
+		xTick1: c + O * 2 + 2,
+		yItem: f,
+		yOwner: (e) => p.get(e) ?? 8
+	};
+}, F = (e, t, n) => t === null ? null : t.item === void 0 ? t.owner === e[n]?.owner : t.item === n, I = (e, t, n) => t === null ? null : t.owner === void 0 ? e[t.item ?? -1]?.owner === n : t.owner === n, L = ({ data: e, at: t, focus: r, isHero: i, onFocus: a }) => /* @__PURE__ */ S("g", { children: e.map((s, l) => {
+	let d = F(e, r, l), p = u(t.yItem(l)), m = d === !0 || i(s.owner);
+	return /* @__PURE__ */ C("g", {
+		className: n(d === !1),
+		onPointerEnter: () => {
+			a({ item: l });
+		},
+		children: [
+			/* @__PURE__ */ S(c, {
+				height: t.pitch,
+				width: t.xOwner - t.rMax - t.xTick0,
+				x: t.xTick0,
+				y: p - t.pitch / 2
+			}),
+			/* @__PURE__ */ S(f, {
+				className: `pop transition-tone ${m ? "stroke-ink" : "stroke-l3"}`,
+				cx: t.xDot,
+				cy: p,
+				size: "xs",
+				style: o(l, "dense")
+			}),
+			/* @__PURE__ */ S("line", {
+				className: `draw transition-tone ${m ? "stroke-ink" : "stroke-l5"}`,
+				pathLength: 1,
+				strokeWidth: 1,
+				style: o(l, "fine"),
+				x1: t.xTick1,
+				x2: t.xOwner,
+				y1: p,
+				y2: t.yOwner(s.owner)
+			})
+		]
+	}, s.name);
+}) }), R = ({ hero: e, lines: t, owner: n, rank: r, x: i, y: a }) => /* @__PURE__ */ S(h, {
+	muted: !e,
+	order: r + 10,
+	voice: "label",
+	y: a - (t.length - 1) * w / 2,
+	children: t.map((e, t) => /* @__PURE__ */ S("tspan", {
+		dy: t === 0 ? "0.34em" : w,
+		x: i,
+		children: e
+	}, `${n}-${e}`))
+}), z = ({ data: e, owners: t, at: n, focus: r, isHero: i, fills: a, onFocus: s }) => /* @__PURE__ */ S("g", { children: t.map((t) => {
+	let l = I(e, r, t.owner), u = n.yOwner(t.owner), d = n.rOf(t.count), f = i(t.owner);
+	return /* @__PURE__ */ C("g", {
+		className: `transition-opacity ${l === !1 ? "opacity-30" : ""}`,
+		onPointerEnter: () => {
+			s({ owner: t.owner });
+		},
+		children: [
+			/* @__PURE__ */ S(c, {
+				x: n.xOwner - n.rMax,
+				y: u - Math.max(d, 9),
+				width: n.blockW + n.left - n.xOwner + n.rMax,
+				height: Math.max(d, 9) * 2
+			}),
+			/* @__PURE__ */ S("circle", {
+				className: `pop ${f ? "stroke-hero" : "stroke-l5"}`,
+				cx: n.xOwner,
+				cy: u,
+				fill: g(f ? a.hero : a.hatch),
+				r: d,
+				strokeWidth: 1,
+				style: o(t.rank + 24, "mark")
+			}),
+			/* @__PURE__ */ S(R, {
+				hero: f,
+				lines: n.ownerLines.get(t.owner) ?? [A(t)],
+				owner: t.owner,
+				rank: t.rank,
+				x: n.xOwner + d + T,
+				y: u
+			})
+		]
+	}, t.owner);
+}) }), B = (n) => {
+	let a = n.data ?? b, o = n.height ?? 460, s = n.strong ?? 1, c = n.unit ?? "items", [u, d] = x(null), f = M(a), h = _("owners"), g = {
+		hatch: h("hatch"),
+		hero: h("hero")
+	}, w = new Set(n.highlight === void 0 ? f.flatMap((e) => e.rank < s ? [e.owner] : []) : [n.highlight]);
+	return /* @__PURE__ */ S(e, { children: (e) => {
+		let s = P(e, o, a, f, i(r(n), e - 16, 24)), h = {
+			at: s,
+			data: a,
+			fills: g,
+			focus: u,
+			isHero: (e) => w.has(e),
+			onFocus: d,
+			owners: f
+		}, _ = u?.owner, b = u?.item === void 0 ? void 0 : a[u.item];
+		return /* @__PURE__ */ C("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ C(m, {
+					height: s.height,
+					label: `${a.length} ${c} across ${f.length} keepers: ${f.map((e) => `${e.owner} ${e.count}`).join(", ")}`,
+					leave: () => {
+						d(null);
+					},
+					title: "Lights by keeper",
+					width: e,
+					children: [
+						/* @__PURE__ */ C("defs", { children: [/* @__PURE__ */ S(y, {
+							id: g.hatch,
+							tone: "fill-l4"
+						}), /* @__PURE__ */ S(v, {
+							id: g.hero,
+							tone: "fill-hero"
+						})] }),
+						/* @__PURE__ */ S(L, { ...h }),
+						/* @__PURE__ */ S(z, { ...h }),
+						/* @__PURE__ */ S(p, {
+							height: s.height,
+							text: r(n),
+							width: e
+						})
+					]
+				}),
+				_ !== void 0 && /* @__PURE__ */ S(t, {
+					x: s.xOwner,
+					y: s.yOwner(_) - s.rOf(f.find((e) => e.owner === _)?.count ?? 1) - 4,
+					children: /* @__PURE__ */ S(l, {
+						facts: [`${f.find((e) => e.owner === _)?.count ?? 0} ${c}`],
+						lead: _
+					})
+				}),
+				b !== void 0 && u?.item !== void 0 && /* @__PURE__ */ S(t, {
+					x: s.xTick1,
+					y: s.yItem(u.item) - 6,
+					children: /* @__PURE__ */ S(l, {
+						facts: [`kept by ${b.owner}`],
+						lead: b.name
+					})
+				})
+			]
+		});
+	} });
+};
+//#endregion
+export { B as TypeColonnade };

package/lib/charts/lupi/util-a.js

@@ -0,0 +1,14 @@
+"use client";
+//#region src/charts/lupi/util-a.ts
+var e = (e, t, n, r) => {
+	let i = r * Math.PI / 180;
+	return [e + n * Math.sin(i), t - n * Math.cos(i)];
+}, t = (t, n, r, i, a, o) => {
+	let s = +(o - a > 180), [c, l] = e(t, n, i, a), [u, d] = e(t, n, i, o), [f, p] = e(t, n, r, o), [m, h] = e(t, n, r, a);
+	return `M${c},${l}A${i},${i} 0 ${s} 1 ${u},${d}L${f},${p}A${r},${r} 0 ${s} 0 ${m},${h}Z`;
+}, n = (t, n, r, i, a) => {
+	let [o, s] = e(t, n, r, i), [c, l] = e(t, n, r, a);
+	return `M${o},${s}A${r},${r} 0 ${+(a - i > 180)} 1 ${c},${l}`;
+};
+//#endregion
+export { n as arcPath, e as clock, t as sectorPath };

package/lib/charts/lupi/util-b.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/charts/lupi/util-b.ts
+var e = (e, t, n, r, i = .5) => {
+	let a = (r - t) * i;
+	return `M${e},${t}C${e},${t + a} ${n},${r - a} ${n},${r}`;
+}, t = (e, t, n) => t.find((t) => e >= t.min)?.out ?? n, n = (e) => {
+	let t = 0;
+	for (let [n, r] of e.entries()) r > (e[t] ?? -Infinity) && (t = n);
+	return t;
+};
+//#endregion
+export { n as argMax, t as byStep, e as vCurve };