@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/glance/jitter-strip.js

@@ -0,0 +1,157 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, stagger as i } from "../util.js";
+import { DimGroup as a, TipText as o } from "../hover.js";
+import { DOT as s } from "../marks.js";
+import { Ring as c } from "../markers.js";
+import { FootNote as l } from "../plot-note.js";
+import { VRule as u } from "../rules.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { labelRoom as p, textWidth as m } from "./util-a.js";
+import { jitterStripDemo as h } from "./jitter-strip.data.js";
+import { useState as g } from "react";
+import { scaleLinear as _ } from "d3-scale";
+import { median as v, tickStep as y } from "d3-array";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/glance/jitter-strip.tsx
+var S = (e) => `${Math.round(e * 10) / 10}`, C = (e) => {
+	let t = y(0, e, 4);
+	return Array.from({ length: Math.ceil(e / t) + 1 }, (e, n) => n * t);
+}, w = (e, t, n, r, i) => {
+	let a = Math.ceil(i / t), o = e.map((e) => Math.max(a, Math.round(e / t))), s = /* @__PURE__ */ new Map();
+	for (let e of o) s.set(e, (s.get(e) ?? 0) + 1);
+	let c = Math.max(1, ...s.values()), l = Math.min(t, r / c), u = /* @__PURE__ */ new Map();
+	return o.map((e) => {
+		let r = u.get(e) ?? 0;
+		u.set(e, r + 1);
+		let i = Math.ceil(r / 2) * (r % 2 == 0 ? -1 : 1);
+		return {
+			x: e * t,
+			y: n + i * l
+		};
+	});
+}, T = (e) => {
+	let t = s[e.dot], n = w(e.group.values.map((t) => e.x(t)), t * 2 + 2, Math.round(e.top + e.band / 2), e.band * .9, e.x(0) + t + 2);
+	return /* @__PURE__ */ x(a, {
+		dim: e.hover !== null && e.hover.g !== e.g,
+		children: [
+			/* @__PURE__ */ b(f, {
+				className: e.heroRow ? "fill-ink" : void 0,
+				dy: "0.35em",
+				muted: !e.heroRow,
+				voice: "label",
+				x: e.labelX,
+				y: e.top + e.band / 2,
+				children: e.group.label
+			}),
+			e.group.values.map((r, a) => {
+				let o = n[a], s = e.hover !== null && e.hover.g === e.g && e.hover.k === a;
+				return /* @__PURE__ */ b(c, {
+					className: `pop ${s || e.hero ? "stroke-ink" : "stroke-l4"}`,
+					style: i(a, "dense"),
+					cx: o.x,
+					cy: o.y,
+					open: !0,
+					size: s ? "lg" : e.dot,
+					pointerEvents: "visible",
+					onPointerEnter: () => {
+						e.onEnter({
+							g: e.g,
+							k: a,
+							x: o.x,
+							y: o.y - t - 4
+						});
+					}
+				}, `${e.group.label}-${String(a)}`);
+			}),
+			e.heroRow ? /* @__PURE__ */ b("line", {
+				className: "fade stroke-ink",
+				style: i(8 + e.g),
+				x1: Math.round(e.x(e.med)),
+				x2: Math.round(e.x(e.med)),
+				y1: Math.round(e.top + e.band * .04),
+				y2: Math.round(e.top + e.band * .96),
+				strokeWidth: 2
+			}) : /* @__PURE__ */ b("line", {
+				className: "fade stroke-rule",
+				style: i(8 + e.g),
+				x1: Math.round(e.x(e.med)),
+				x2: Math.round(e.x(e.med)),
+				y1: Math.round(e.top + e.band * .04),
+				y2: Math.round(e.top + e.band * .96),
+				strokeWidth: 2
+			})
+		]
+	});
+}, E = (i) => {
+	let a = i.data ?? h, s = i.height ?? 420, c = i.format ?? S, y = i.unit ?? "record", w = i.tickFormat ?? c, [E, D] = g(null), O = Math.max(...a.flatMap((e) => e.values)), k = a.map((e) => v(e.values) ?? 0), A = `Jitter strip: ${a.map((e, t) => `${e.label}, ${e.values.length} records, median ${c(k[t])}`).join("; ")}`;
+	return /* @__PURE__ */ b(e, {
+		overlay: E === null ? null : /* @__PURE__ */ b(t, {
+			x: E.x,
+			y: E.y,
+			children: /* @__PURE__ */ b(o, {
+				facts: [`${a[E.g].names?.[E.k] ?? `this ${y}`} ${c(a[E.g].values[E.k])}`, `median ${c(k[E.g])}`],
+				lead: a[E.g].label
+			})
+		}),
+		children: (e) => {
+			let t = e < 480, o = C(O), c = {
+				bottom: 40 + r(n(i), e - 16, 16),
+				left: p(a.map((e) => e.label)) + 10,
+				right: Math.ceil(m(w(o.at(-1) ?? 0), "t-axis") / 2),
+				top: 10
+			}, h = _().domain([0, o.at(-1) ?? O]).range([c.left + 6, e - c.right]), g = (s - c.top - c.bottom) / a.length, v = s - c.bottom;
+			return /* @__PURE__ */ x(d, {
+				height: s,
+				label: A,
+				leave: () => {
+					D(null);
+				},
+				width: e,
+				children: [
+					o.map((e) => /* @__PURE__ */ x("g", { children: [/* @__PURE__ */ b(u, {
+						kind: e === 0 ? "hairline" : "grid",
+						x: h(e),
+						y0: c.top,
+						y1: v
+					}), /* @__PURE__ */ b(f, {
+						anchor: "middle",
+						voice: "axis",
+						x: h(e),
+						y: v + 16,
+						children: w(e)
+					})] }, e)),
+					i.axisLabel === void 0 ? null : /* @__PURE__ */ b(f, {
+						anchor: "end",
+						voice: "axis",
+						x: e,
+						y: v + 34,
+						children: i.axisLabel
+					}),
+					a.map((e, n) => /* @__PURE__ */ b(T, {
+						band: g,
+						dot: t ? "sm" : "md",
+						hero: i.highlight === n,
+						heroRow: (i.highlight ?? 0) === n,
+						g: n,
+						group: e,
+						hover: E,
+						labelX: 0,
+						med: k[n],
+						onEnter: D,
+						top: c.top + g * n,
+						x: h
+					}, e.label)),
+					/* @__PURE__ */ b(l, {
+						height: s,
+						text: n(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { E as JitterStrip };

package/lib/charts/glance/link-bundle.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/charts/glance/link-bundle.tsx
+var t = 2, n = (e, t) => {
+	let n = Math.hypot(t.x - e.x, t.y - e.y) || 1;
+	return {
+		x: -(t.y - e.y) / n,
+		y: (t.x - e.x) / n
+	};
+}, r = (e, t) => e.x * t.y - e.y * t.x, i = (e, t, i, a) => {
+	let o = n(e, t), s = n(t, i), c = {
+		x: t.x - e.x,
+		y: t.y - e.y
+	}, l = {
+		x: i.x - t.x,
+		y: i.y - t.y
+	}, u = {
+		x: e.x + a * o.x,
+		y: e.y + a * o.y
+	}, d = {
+		x: i.x + a * s.x,
+		y: i.y + a * s.y
+	}, f = r(c, l), p = Math.abs(f) < 1e-6 ? .5 : r({
+		x: d.x - u.x,
+		y: d.y - u.y
+	}, l) / f, m = Math.abs(f) < 1e-6 ? {
+		x: t.x + a * o.x,
+		y: t.y + a * o.y
+	} : {
+		x: u.x + c.x * p,
+		y: u.y + c.y * p
+	};
+	return `M${u.x},${u.y}Q${m.x},${m.y} ${d.x},${d.y}`;
+}, a = (n) => {
+	let r = n.q ?? {
+		x: (n.s.x + n.t.x) / 2,
+		y: (n.s.y + n.t.y) / 2
+	}, a = Array.from({ length: n.lines }, (e, r) => (r - (n.lines - 1) / 2) * t);
+	return /* @__PURE__ */ e("g", {
+		className: n.className,
+		fill: "none",
+		style: n.style,
+		children: a.map((t) => /* @__PURE__ */ e("path", {
+			d: i(n.s, r, n.t, t),
+			pathLength: 1,
+			strokeWidth: 1
+		}, t))
+	});
+};
+//#endregion
+export { a as LinkBundle };

package/lib/charts/glance/matrix-heat-glance.data.js

@@ -0,0 +1,108 @@
+"use client";
+//#region src/charts/glance/matrix-heat-glance.data.ts
+var e = {
+	columns: [
+		"Car",
+		"Tumble dryer",
+		"Dishwasher",
+		"Computer",
+		"Internet",
+		"Mobile"
+	],
+	rows: [
+		"Lowest tenth",
+		"2nd",
+		"3rd",
+		"4th",
+		"5th",
+		"6th",
+		"7th",
+		"8th",
+		"9th",
+		"Highest tenth"
+	],
+	values: [
+		[
+			40,
+			36,
+			20,
+			63,
+			69,
+			88
+		],
+		[
+			54,
+			44,
+			23,
+			70,
+			72,
+			87
+		],
+		[
+			65,
+			51,
+			30,
+			83,
+			86,
+			95
+		],
+		[
+			79,
+			55,
+			39,
+			87,
+			90,
+			96
+		],
+		[
+			84,
+			56,
+			47,
+			94,
+			96,
+			98
+		],
+		[
+			93,
+			60,
+			51,
+			96,
+			98,
+			99
+		],
+		[
+			92,
+			65,
+			55,
+			97,
+			99,
+			99
+		],
+		[
+			93,
+			67,
+			64,
+			99,
+			99,
+			99
+		],
+		[
+			94,
+			72,
+			74,
+			99,
+			99,
+			99
+		],
+		[
+			92,
+			73,
+			83,
+			100,
+			99,
+			99
+		]
+	]
+};
+//#endregion
+export { e as matrixHeatGlanceDemo };

package/lib/charts/glance/matrix-heat-glance.js

@@ -0,0 +1,170 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, stagger as i } from "../util.js";
+import { DimGroup as a, TipText as o } from "../hover.js";
+import { KEY as s } from "../marks.js";
+import { FootNote as c } from "../plot-note.js";
+import { ChartSvg as l } from "../svg.js";
+import { Label as u } from "../text.js";
+import { HALFTONE_R as d, paint as f, useTextureIds as p } from "../texture-ids.js";
+import { DotScreen as m, KeySwatch as h, PlateLabel as g } from "../texture.js";
+import { labelRoom as _, textWidth as v } from "./util-a.js";
+import { matrixHeatGlanceDemo as y } from "./matrix-heat-glance.data.js";
+import { useState as b } from "react";
+import { scaleQuantize as x } from "d3-scale";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/charts/glance/matrix-heat-glance.tsx
+var w = 2, T = d, E = s.swatch, D = s.gap, O = s.entryGap, k = (e) => Math.max(9, Math.floor((e - 5) / 4) * 4 + 5), A = (e) => `${Math.round(e)}`, j = (e) => /* @__PURE__ */ C(a, {
+	className: "pop",
+	dim: e.dimmed,
+	style: i(e.stagger, "mark"),
+	transform: `translate(${e.x} ${e.y})`,
+	onPointerEnter: () => {
+		e.onEnter();
+	},
+	children: [/* @__PURE__ */ S("rect", {
+		x: .5,
+		y: .5,
+		width: e.w - 1,
+		height: e.h - 1,
+		rx: w,
+		className: `shape-crisp ${e.hero ? "fill-hero stroke-hero" : "stroke-l5"}`,
+		fill: e.hero ? void 0 : e.fill,
+		strokeWidth: 1
+	}), /* @__PURE__ */ S(g, {
+		hero: e.hero,
+		text: e.text,
+		x: e.w / 2,
+		y: e.h / 2
+	})]
+}), M = (e) => {
+	let t = e.labels.map((e) => Math.ceil(v(e, "t-axis"))), n = (e) => E + D + t[e], r = t.reduce((e, t, r) => e + n(r), 0) + O * (t.length - 1), i = Math.max(0, Math.round(e.right - r)), a = e.labels.map((r, a) => ({
+		at: i + t.slice(0, a).reduce((e, t, r) => e + n(r) + O, 0),
+		l: r,
+		screen: e.screens[a]
+	}));
+	return /* @__PURE__ */ S("g", {
+		className: "fade",
+		children: a.map((t) => /* @__PURE__ */ C("g", { children: [/* @__PURE__ */ S(h, {
+			fill: t.screen,
+			x: t.at,
+			y: e.y
+		}), /* @__PURE__ */ S(u, {
+			dy: "0.35em",
+			voice: "axis",
+			x: t.at + E + D,
+			y: e.y + E / 2,
+			children: t.l
+		})] }, t.l))
+	});
+}, N = (e) => /* @__PURE__ */ S("g", { children: e.data.rows.map((t, n) => {
+	let r = e.top + n * (e.pitch + e.gap);
+	return /* @__PURE__ */ C("g", { children: [/* @__PURE__ */ S(u, {
+		anchor: "end",
+		dy: "0.36em",
+		muted: !0,
+		voice: "label",
+		x: e.x0 - e.labelGap,
+		y: r + e.pitch / 2,
+		children: t
+	}), e.data.columns.map((t, i) => {
+		let a = e.x0 + i * (e.cell + e.gap);
+		return /* @__PURE__ */ S(j, {
+			dimmed: e.hover !== null && (e.hover.r !== n || e.hover.c !== i),
+			fill: e.fillOf(n, i),
+			h: e.pitch,
+			hero: n === e.hero[0] && i === e.hero[1],
+			onEnter: () => {
+				e.onHover({
+					c: i,
+					r: n,
+					x: a + e.cell / 2,
+					y: r - 4
+				});
+			},
+			stagger: n + i,
+			text: e.format(e.data.values[n][i]),
+			w: e.cell,
+			x: a,
+			y: r
+		}, t);
+	})] }, t);
+}) }), P = (e) => x().domain(e).range([
+	0,
+	1,
+	2,
+	3,
+	4
+]), F = (e, t) => T.map((n, r) => {
+	let [i, a] = P(e).invertExtent(r);
+	return `${t(i)}–${t(a)}${r === T.length - 1 ? "%" : ""}`;
+}), I = (e) => {
+	let t = [0, 0];
+	for (let [n, r] of e.entries()) for (let [i, a] of r.entries()) a > e[t[0]][t[1]] && (t = [n, i]);
+	return t;
+}, L = (i) => {
+	let a = i.data ?? y, s = i.format ?? A, d = i.unit ?? "% of households", h = a.rows.length, g = a.columns.length, x = i.domain ?? [0, 100], w = P(x), [D, O] = i.highlight ?? I(a.values), [j, L] = b(null), R = p("heat"), z = T.map((e, t) => f(R(`s${t}`))), B = F(x, s), V = `Matrix of ${h} by ${g}: ${a.rows.map((e, t) => `${e}: ${a.values[t].map((e, t) => `${a.columns[t]} ${s(e)}`).join(", ")}`).join("; ")}`;
+	return /* @__PURE__ */ S(e, {
+		overlay: j === null ? null : /* @__PURE__ */ S(t, {
+			x: j.x,
+			y: j.y,
+			children: /* @__PURE__ */ S(o, {
+				facts: [`${s(a.values[j.r][j.c])}${d}`],
+				lead: `${a.rows[j.r]} · ${a.columns[j.c]}`
+			})
+		}),
+		children: (e) => {
+			let t = e < 480, o = t ? 5 : 10, d = t ? 8 : 16, f = _(a.rows), p = k(Math.min(80, (e - f - d - o * (g - 1)) / g)), y = p * g + o * (g - 1), b = Math.round((e - f - d - y) / 2 + f + d), x = Math.max(...a.columns.map((e) => v(e, "t-label"))) > p, A = x ? 40 : 26, P = k(Math.min(p * .86, 76)), F = A + h * P + o * (h - 1) + 18, I = i.height ?? F + E + 6 + r(n(i), e - 16, 30);
+			return /* @__PURE__ */ C(l, {
+				height: I,
+				label: V,
+				leave: () => {
+					L(null);
+				},
+				width: e,
+				children: [
+					/* @__PURE__ */ S("defs", { children: T.map((e, t) => /* @__PURE__ */ S(m, {
+						id: R(`s${t}`),
+						r: e,
+						tone: "fill-l3"
+					}, e)) }),
+					a.columns.map((e, t) => /* @__PURE__ */ S(u, {
+						anchor: "middle",
+						muted: !0,
+						voice: "label",
+						x: b + t * (p + o) + p / 2,
+						y: A - 12 - (x && t % 2 == 0 ? 14 : 0),
+						children: e
+					}, e)),
+					/* @__PURE__ */ S(N, {
+						cell: p,
+						data: a,
+						fillOf: (e, t) => e === D && t === O ? "" : z[w(a.values[e][t])],
+						format: s,
+						gap: o,
+						hero: [D, O],
+						hover: j,
+						labelGap: d,
+						onHover: L,
+						pitch: P,
+						top: A,
+						x0: b
+					}),
+					/* @__PURE__ */ S(M, {
+						labels: B,
+						right: b + y,
+						screens: z,
+						y: F
+					}),
+					/* @__PURE__ */ S(c, {
+						height: I,
+						text: n(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { L as MatrixHeatGlance };

package/lib/charts/glance/pictorial-bar.data.js

@@ -0,0 +1,22 @@
+"use client";
+//#region src/charts/glance/pictorial-bar.data.ts
+var e = [
+	{
+		label: "Les Misérables",
+		value: 565
+	},
+	{
+		label: "War and Peace",
+		value: 563
+	},
+	{
+		label: "Don Quixote",
+		value: 427
+	},
+	{
+		label: "Middlemarch",
+		value: 316
+	}
+];
+//#endregion
+export { e as pictorialBarDemo };

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

@@ -0,0 +1,180 @@
+"use client";
+import { useHover as e, useSvgId 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 { FootNote as u } from "../plot-note.js";
+import { ChartSvg as d } from "../svg.js";
+import { Label as f } from "../text.js";
+import { paint as p, useTextureIds as m } from "../texture-ids.js";
+import { Hatch as h } from "../texture.js";
+import { labelRoom as g, rankTones as _ } from "./util-a.js";
+import { pictorialBarDemo as v } from "./pictorial-bar.data.js";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/charts/glance/pictorial-bar.tsx
+var S = 4, C = 18, w = 24, T = 7.5 / 18, E = (e) => g(e.map((e) => e.label), "t-label") + 18, D = (e, t, n, r) => t + Math.max(0, Math.floor((e - t - n - 10 - r - 4) / 2)), O = (e, t) => g(e.map((e) => t(e.value)), "t-value"), k = (e) => `${e}k words`, A = (e, t) => {
+	let n = Math.max(2, Math.round(e * T)), r = e - .5, i = t - .5;
+	return {
+		body: `M0.5 0.5H${r - n}L${r} ${.5 + n}V${i}H0.5Z`,
+		fold: `M${r - n} 0.5V${.5 + n}H${r}`
+	};
+}, j = (e) => {
+	let t = A(e.w, e.h);
+	return /* @__PURE__ */ x("g", {
+		className: `${e.tone} shape-crisp`,
+		fill: "none",
+		strokeLinejoin: "round",
+		strokeWidth: 1,
+		transform: `translate(${e.x} ${e.y})`,
+		children: [/* @__PURE__ */ b("path", {
+			className: e.fill === void 0 ? "fill-paper" : void 0,
+			d: t.body,
+			fill: e.fill
+		}), /* @__PURE__ */ b("path", { d: t.fold })]
+	});
+}, M = ({ row: e, g: t, hero: n, id: r, texture: i, width: a, dim: o, label: l, onEnter: u }) => {
+	let d = Math.round(e.cy - (t.lines * t.ih + (t.lines - 1) * S) / 2), p = Array.from({ length: t.slots }, (n, r) => ({
+		id: `${e.datum.label}-${r}`,
+		x: Math.round(t.x0 + r % t.perLine * t.pitch + (t.pitch - t.iw) / 2),
+		y: d + Math.floor(r / t.perLine) * (t.ih + S)
+	}));
+	return /* @__PURE__ */ x(s, {
+		dim: o,
+		onPointerEnter: u,
+		children: [
+			/* @__PURE__ */ b(c, {
+				x: 0,
+				y: e.cy - t.rowH / 2,
+				width: a,
+				height: t.rowH
+			}),
+			/* @__PURE__ */ b(f, {
+				anchor: "end",
+				dy: "0.35em",
+				muted: !0,
+				voice: "label",
+				x: t.x0 - 14,
+				y: e.cy,
+				children: e.datum.label
+			}),
+			/* @__PURE__ */ b("g", { children: p.map((e) => /* @__PURE__ */ b(j, {
+				h: t.ih,
+				tone: "stroke-l5",
+				w: t.iw,
+				x: e.x,
+				y: e.y
+			}, e.id)) }),
+			/* @__PURE__ */ b("g", {
+				clipPath: `url(#${r}-c${e.i})`,
+				children: p.map((e) => /* @__PURE__ */ b(j, {
+					fill: i,
+					h: t.ih,
+					tone: n ? "stroke-ink" : "stroke-l3",
+					w: t.iw,
+					x: e.x,
+					y: e.y
+				}, e.id))
+			}),
+			/* @__PURE__ */ b(f, {
+				dy: "0.35em",
+				muted: !n,
+				order: e.i + 4,
+				tier: "series",
+				voice: "value",
+				x: t.x0 + t.perLine * t.pitch + 10,
+				y: e.cy,
+				children: l
+			})
+		]
+	});
+}, N = (e) => {
+	let t = e.g.lines * e.g.ih + (e.g.lines - 1) * S;
+	return /* @__PURE__ */ b(y, { children: e.rows.map((n) => /* @__PURE__ */ b("clipPath", {
+		id: `${e.id}-c${n.i}`,
+		children: n.cuts.map((r, i) => /* @__PURE__ */ b("rect", {
+			className: "grow-x",
+			style: o(n.i + i, "series"),
+			x: e.g.x0,
+			y: n.cy - t / 2 + i * (e.g.ih + S) - 1,
+			width: r - e.g.x0,
+			height: e.g.ih + 2
+		}, `line-${String(i)}`))
+	}, n.datum.label)) });
+}, P = (o) => {
+	let s = o.data ?? v, c = o.unit ?? 50, f = o.height ?? 320, g = o.format ?? k, y = t("pict"), T = m("pict"), A = e(), j = _(s.map((e) => e.value), [0, 4]), P = (e) => o.highlight === void 0 ? j[e] === 0 : o.highlight === e, F = Math.ceil(Math.max(...s.map((e) => e.value)) / c), I = `One page = ${c}k words. ${s.map((e) => `${e.label} ${g(e.value)}`).join(", ")}`;
+	return /* @__PURE__ */ b(n, {
+		overlay: A.at === null ? null : /* @__PURE__ */ b(r, {
+			x: A.at.x,
+			y: A.at.y,
+			children: /* @__PURE__ */ b(l, {
+				facts: [g(s[A.at.key].value)],
+				lead: s[A.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = E(s), n = O(s, g), r = Math.max(48, n + 18), l = e < 460 ? 2 : 1, m = Math.ceil(F / l), _ = Math.min(30, (e - t - r) / m), v = D(e, t, m * _, n), k = Math.min(1.1, _ * .82 / C), j = a(i(o), e - 16, 22), L = Math.min((f - 16 - j) / s.length, e < 460 ? 64 : Infinity), R = 16 + L * s.length + j, z = {
+				ih: Math.round(w * k),
+				iw: Math.round(C * k),
+				lines: l,
+				perLine: m,
+				pitch: _,
+				rowH: L,
+				slots: F,
+				x0: v
+			}, B = s.map((e, t) => {
+				let n = e.value / c;
+				return {
+					cuts: Array.from({ length: l }, (e, t) => {
+						let r = Math.max(0, Math.min(m, n - t * m)), i = Math.floor(r);
+						return r >= m ? v + m * _ : Math.round(v + i * _ + (_ - z.iw) / 2 + (r - i) * z.iw);
+					}),
+					cy: 8 + (t + .5) * z.rowH,
+					datum: e,
+					i: t,
+					n
+				};
+			});
+			return /* @__PURE__ */ x(d, {
+				height: R,
+				label: I,
+				leave: A.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ x("defs", { children: [
+						/* @__PURE__ */ b(h, {
+							id: T("row"),
+							tone: "fill-l3"
+						}),
+						/* @__PURE__ */ b(h, {
+							id: T("hero"),
+							tone: "fill-hero"
+						}),
+						/* @__PURE__ */ b(N, {
+							g: z,
+							id: y,
+							rows: B
+						})
+					] }),
+					B.map((t) => /* @__PURE__ */ b(M, {
+						row: t,
+						g: z,
+						hero: P(t.i),
+						id: y,
+						texture: p(T(P(t.i) ? "hero" : "row")),
+						width: e,
+						dim: A.dim(t.i),
+						label: g(t.datum.value),
+						onEnter: A.enter(t.i, v + Math.min(t.n, m) * _, t.cy - (l * z.ih + (l - 1) * S) / 2 - 4)
+					}, t.datum.label)),
+					/* @__PURE__ */ b(u, {
+						height: R,
+						text: i(o),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { P as PictorialBar };