@divami-artefacts/ai-design-system 1.0.4 → 1.0.6

package/dist/index.js

@@ -430,85 +430,139 @@ function ie({ rows: e = [], className: t, colors: r }) {
 	});
 }
 //#endregion
+//#region src/components/common/ToggleButton.tsx
+function ae({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCollapsed: r = "View More", "data-testid": i }) {
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		"data-testid": i,
+		onClick: t,
+		style: {
+			display: "flex",
+			width: 90,
+			height: 20,
+			justifyContent: "center",
+			alignItems: "center",
+			gap: 4,
+			boxSizing: "border-box",
+			border: "none",
+			borderRadius: 6,
+			color: "#FFAE43",
+			fontSize: 14,
+			fontFamily: "'Satoshi Variable', 'DM Sans', sans-serif",
+			fontStyle: "normal",
+			fontWeight: 400,
+			lineHeight: "19.5px",
+			textAlign: "center",
+			cursor: "pointer",
+			userSelect: "none"
+		},
+		children: [e ? n : r, /* @__PURE__ */ s("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			style: { transform: e ? "rotate(180deg)" : "rotate(0deg)" },
+			children: /* @__PURE__ */ s("path", {
+				d: "M2 3.5L5 6.5L8 3.5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+//#endregion
 //#region src/components/commitmentRace/CommitmentRace.tsx
-var F = 680, I = 300, ae = [
+var F = 680, I = 42, oe = 10, se = 24, ce = 24, le = 8, ue = [
 	u.green,
 	u.blue,
 	u.cyan,
 	u.amber,
 	u.red
 ];
-function oe({ contractors: e = [], "data-testid": t }) {
-	let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), l = [...e].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), { hoveredRef: d, tooltip: p, hitZonesRef: h } = C(r, {
+function de(e) {
+	let t = Math.abs(e), n = e < 0 ? "-" : "";
+	return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
+}
+function fe({ contractors: e = [], "data-testid": t }) {
+	let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [p, h] = o(!1), g = i(() => [...e].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [e]), x = i(() => p ? g : g.slice(0, le), [g, p]), T = x.length, D = se + ce + T * I + Math.max(0, T - 1) * oe, { hoveredRef: O, tooltip: k, hitZonesRef: A } = C(r, {
 		width: F,
-		height: I
+		height: D
 	});
 	return n(() => {
 		let e = r.current;
 		if (!e) return;
-		let t = _(e, F, I);
-		i.current = 0;
-		let n = F * .13, a = F * .08, s = I * .08, c = I * .14, p = F - n - a, g, x = () => {
-			i.current++;
-			let e = i.current;
-			t.clearRect(0, 0, F, I), h.current = [], o.current.forEach((e, t) => {
-				let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
-				Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
-			}), d.current && !o.current.has(d.current) && o.current.set(d.current, 0), y(t, F, I, e, 40, m(u.blue, .04)), l.forEach((r, i) => {
-				let a = ae[i % ae.length], l = o.current.get(r.id) ?? 0, u = s + i * (c + 10);
-				t.fillStyle = m(a, .04 + l * .04), t.beginPath(), t.roundRect(n, u, p, c, 3), t.fill(), t.strokeStyle = m(a, .08), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(n, u + c / 2), t.lineTo(n + p, u + c / 2), t.stroke(), t.setLineDash([]);
-				let d = (r.percentage ?? 0) / 100, g = n + p * Math.min(d, d * E(Math.min(1, e * .005)));
-				if (g > n + 4) {
-					let e = t.createLinearGradient(n, 0, g, 0);
-					e.addColorStop(0, m(a, .02)), e.addColorStop(1, m(a, .25 + l * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, u + 2, g - n, c - 4, 2), t.fill();
+		let t = _(e, F, D);
+		l.current = 0;
+		let n = F * .13, i = F * .08, a = F - n - i, o, s = () => {
+			l.current++;
+			let e = l.current;
+			t.clearRect(0, 0, F, D), A.current = [], d.current.forEach((e, t) => {
+				let n = t === O.current ? 1 : 0, r = e + (n - e) * .12;
+				Math.abs(r - n) < .005 ? n === 0 ? d.current.delete(t) : d.current.set(t, 1) : d.current.set(t, r);
+			}), O.current && !d.current.has(O.current) && d.current.set(O.current, 0), y(t, F, D, e, 40, m(u.blue, .04)), x.forEach((r, i) => {
+				let o = ue[i % ue.length], s = d.current.get(r.id) ?? 0, c = se + i * (I + oe);
+				t.fillStyle = m(o, .04 + s * .04), t.beginPath(), t.roundRect(n, c, a, I, 3), t.fill(), t.strokeStyle = m(o, .08), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(n, c + I / 2), t.lineTo(n + a, c + I / 2), t.stroke(), t.setLineDash([]);
+				let l = (r.percentage ?? 0) / 100, u = n + a * Math.min(l, l * E(Math.min(1, e * .005)));
+				if (u > n + 4) {
+					let e = t.createLinearGradient(n, 0, u, 0);
+					e.addColorStop(0, m(o, .02)), e.addColorStop(1, m(o, .25 + s * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, c + 2, u - n, I - 4, 2), t.fill();
 				}
-				v(t, g, u + c / 2, 18 + l * 8, a, .3 + l * .2), t.beginPath(), t.arc(g, u + c / 2, 5 + l * 2, 0, Math.PI * 2), t.fillStyle = m(a, .9), t.fill(), w(h.current, r.id, g, u + c / 2, 14, {
+				v(t, u, c + I / 2, 18 + s * 8, o, .3 + s * .2), t.beginPath(), t.arc(u, c + I / 2, 5 + s * 2, 0, Math.PI * 2), t.fillStyle = m(o, .9), t.fill();
+				let p = {
 					label: r.name,
 					value: `${r.percentage ?? 0}% commitment`,
-					sublabel: `Base: £${r.base ?? 0}M · Variations: £${r.variation ?? 0}M`,
-					color: a
-				}), t.font = "bold " + f.font, t.fillStyle = m(a, .9 + l * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, g + 10, u + c / 2), t.font = `${l > 0 ? "bold " : ""}` + f.font, t.fillStyle = l > 0 ? a : f.color, t.textAlign = "right", t.fillText(r.abbreviation ?? r.name.slice(0, 6), n - 8, u + c / 2);
-			}), t.strokeStyle = m(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + p, s), t.lineTo(n + p, s + (l.length - 1) * (c + 10) + c), t.stroke(), b(t, F, I, e, .015), g = requestAnimationFrame(x);
+					sublabel: `Base: ${de(r.base ?? 0)} · Variations: ${de(r.variation ?? 0)}`,
+					color: o
+				};
+				w(A.current, r.id, u, c + I / 2, 14, p), t.font = "bold " + f.font, t.fillStyle = m(o, .9 + s * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, u + 10, c + I / 2), t.font = `${s > 0 ? "bold " : ""}` + f.font, t.fillStyle = s > 0 ? o : f.color, t.textAlign = "right", t.fillText(r.abbreviation ?? r.name.slice(0, 6), n - 8, c + I / 2);
+			}), t.strokeStyle = m(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + a, se), t.lineTo(n + a, se + (T - 1) * (I + oe) + I), t.stroke(), b(t, F, D, e, .015), o = requestAnimationFrame(s);
 		};
-		return x(), () => cancelAnimationFrame(g);
-	}, [l]), /* @__PURE__ */ c("div", {
+		return s(), () => cancelAnimationFrame(o);
+	}, [x, D]), /* @__PURE__ */ c("div", {
 		"data-testid": t,
-		style: {
-			position: "relative",
-			width: F,
-			height: I
-		},
-		children: [/* @__PURE__ */ s("canvas", {
-			ref: r,
-			role: "img",
-			"aria-label": "Commitment race — contractors ranked by commitment percentage",
-			style: {
-				width: F,
-				height: I,
-				display: "block",
-				borderRadius: 8
-			}
-		}), /* @__PURE__ */ s(S, {
-			...p,
-			parentW: F,
-			parentH: I
+		style: { width: F },
+		children: [/* @__PURE__ */ c("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ s("canvas", {
+				ref: r,
+				role: "img",
+				"aria-label": "Commitment race — contractors ranked by commitment percentage",
+				style: {
+					width: F,
+					height: D,
+					display: "block",
+					borderRadius: 8
+				}
+			}), /* @__PURE__ */ s(S, {
+				...k,
+				parentW: F,
+				parentH: D
+			})]
+		}), e.length > le && /* @__PURE__ */ s("div", {
+			style: { marginTop: 8 },
+			children: /* @__PURE__ */ s(ae, {
+				expanded: p,
+				onToggle: () => h((e) => !e)
+			})
 		})]
 	});
 }
 //#endregion
 //#region src/components/compensationGauge/CompensationGauge.tsx
-var se = 480, ce = 340;
-function le({ pct: e, confirmed: t, total: r, "data-testid": i }) {
+var pe = 480, me = 340;
+function he({ pct: e, confirmed: t, total: r, "data-testid": i }) {
 	let o = a(null), c = a(0);
 	return n(() => {
 		let n = o.current;
 		if (!n) return;
-		let i = _(n, se, ce);
+		let i = _(n, pe, me);
 		c.current = 0;
-		let a = se / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p, h = () => {
+		let a = pe / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p, h = () => {
 			c.current++;
 			let n = c.current;
-			i.clearRect(0, 0, se, ce);
+			i.clearRect(0, 0, pe, me);
 			let o = E(Math.min(n / 80, 1)), g = k(Math.min(n / 72, 1));
 			i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle = m(u.bd, .35), i.lineWidth = 46, i.stroke(), [
 				{
@@ -568,16 +622,16 @@ function le({ pct: e, confirmed: t, total: r, "data-testid": i }) {
 		"data-testid": i,
 		style: {
 			position: "relative",
-			width: se,
-			height: ce
+			width: pe,
+			height: me
 		},
 		children: /* @__PURE__ */ s("canvas", {
 			ref: o,
 			role: "img",
 			"aria-label": `Compensation event gauge — ${e}% of NCEs confirmed as compensation events`,
 			style: {
-				width: se,
-				height: ce,
+				width: pe,
+				height: me,
 				display: "block"
 			}
 		})
@@ -585,7 +639,7 @@ function le({ pct: e, confirmed: t, total: r, "data-testid": i }) {
 }
 //#endregion
 //#region src/canvas/useCanvasLoop.ts
-function ue(e, t, r, i, o = !0, s = {}) {
+function ge(e, t, r, i, o = !0, s = {}) {
 	let c = a(0), { easing: l = E, durationFrames: u = 48 } = s;
 	n(() => {
 		let n = e.current;
@@ -617,29 +671,29 @@ function ue(e, t, r, i, o = !0, s = {}) {
 }
 //#endregion
 //#region src/components/contractBars/ContractBars.tsx
-var L = 780, R = 234, de = 130, fe = 52, pe = [
+var L = 780, _e = 234, ve = 130, ye = 52, be = [
 	u.blue,
 	u.cyan,
 	u.amber,
 	u.purple,
 	u.green
-], me = [
+], xe = [
 	"Base Value",
 	"Variations",
 	"Commitment"
-], he = [
+], Se = [
 	"Base",
 	"Var",
 	"Commit"
 ];
-function ge({ contractors: e = [], "data-testid": t }) {
+function Ce({ contractors: e = [], "data-testid": t }) {
 	let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = C(n, {
 		width: L,
-		height: R
+		height: _e
 	}), f = i(() => {
 		let t = Math.max(...e.map((e) => e.base ?? 0)), n = Math.max(...e.map((e) => e.variation ?? 0));
 		return e.map((e, r) => {
-			let i = L * (.12 + r * .19), a = de, o = Math.min(L * .075, fe), s = pe[r % pe.length], c = [
+			let i = L * (.12 + r * .19), a = ve, o = Math.min(L * .075, ye), s = be[r % be.length], c = [
 				(e.base ?? 0) / (t || 1) * 100,
 				(e.variation ?? 0) / (n || 1) * 100,
 				e.percentage ?? 0
@@ -648,10 +702,10 @@ function ge({ contractors: e = [], "data-testid": t }) {
 				`£${e.variation ?? 0}M`,
 				`${e.percentage ?? 0}%`
 			], u = c.map((e, t) => {
-				let n = -Math.PI / 2 + t / me.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
+				let n = -Math.PI / 2 + t / xe.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
 				return {
-					name: me[t],
-					short: he[t],
+					name: xe[t],
+					short: Se[t],
 					label: l[t],
 					val: Math.round(e),
 					x: i + Math.cos(n) * s,
@@ -671,8 +725,8 @@ function ge({ contractors: e = [], "data-testid": t }) {
 			};
 		});
 	}, [e]);
-	return ue(n, L, R, (e, t, n) => {
-		M(r.current, o.current), d.current = [], y(e, L, R, n, 30), f.forEach((t, i) => {
+	return ge(n, L, _e, (e, t, n) => {
+		M(r.current, o.current), d.current = [], y(e, L, _e, n, 30), f.forEach((t, i) => {
 			let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
 			e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = m(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
 				n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
@@ -680,25 +734,25 @@ function ge({ contractors: e = [], "data-testid": t }) {
 				let c = A(n, .05, 5e-4) * .3 + .7, l = 3.5 * c, u = `star-${i}-${s}`, f = r.current.get(u) ?? 0, p = e.createRadialGradient(o.x, o.y, 0, o.x, o.y, l * 4);
 				p.addColorStop(0, m(a, (.2 + .1 * f) * c)), p.addColorStop(1, m(a, 0)), e.fillStyle = p, e.beginPath(), e.arc(o.x, o.y, l * 4, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(o.x, o.y, l + f * 2, 0, Math.PI * 2), e.fillStyle = m(a, (.8 + .2 * f) * c), e.fill();
 				let h = Math.sin(o.angle) < -.3;
-				e.textAlign = "center", e.textBaseline = "middle", h ? (e.font = "8px 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y - 24), e.font = "bold 11px 'JetBrains Mono', monospace", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y - 11)) : (e.font = "8px 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y + 11), e.font = "bold 11px 'JetBrains Mono', monospace", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y + 24)), w(d.current, u, o.x, o.y, l * 4 + 2, {
+				e.textAlign = "center", e.textBaseline = "middle", h ? (e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y - 24), e.font = "500 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y - 11)) : (e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y + 11), e.font = "500 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y + 24)), w(d.current, u, o.x, o.y, l * 4 + 2, {
 					label: o.name,
 					value: o.label,
 					sublabel: t.abbreviation ?? t.name.slice(0, 6),
 					color: a
 				});
-			}), s > 0 && v(e, t.cx, t.cy, 16 * s, a, .15 * s), e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 12, 0, Math.PI * 2), e.strokeStyle = m(a, .1 + A(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = "bold 11px 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = m(u.t2, .65 + s * .25), e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), w(d.current, o, t.cx, t.cy, t.baseR + 5, {
+			}), s > 0 && v(e, t.cx, t.cy, 16 * s, a, .15 * s), e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 12, 0, Math.PI * 2), e.strokeStyle = m(a, .1 + A(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = "500 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = m(u.t2, .65 + s * .25), e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), w(d.current, o, t.cx, t.cy, t.baseR + 5, {
 				label: t.name,
 				value: `£${t.total ?? 0}M total`,
 				sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
 				color: a
 			});
-		}), e.font = "11px 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m(u.t4, .55), e.fillText("▲ top = Base value  ·  ▼▸ lower-right = Variations  ·  ◂▼ lower-left = Commitment %  ·  hover stars for details", L / 2, R - 14), b(e, L, R, n, .012);
+		}), e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = u.t2, e.fillText("▲ top = Base value  ·  ▼▸ lower-right = Variations  ·  ◂▼ lower-left = Commitment %  ·  hover stars for details", L / 2, _e - 14), b(e, L, _e, n, .012);
 	}, !0), /* @__PURE__ */ c("div", {
 		"data-testid": t,
 		style: {
 			position: "relative",
 			width: L,
-			height: R
+			height: _e
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: n,
@@ -706,160 +760,172 @@ function ge({ contractors: e = [], "data-testid": t }) {
 			"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
 			style: {
 				width: L,
-				height: R,
+				height: _e,
 				display: "block"
 			}
 		}), /* @__PURE__ */ s(S, {
 			...l,
 			parentW: L,
-			parentH: R
+			parentH: _e
 		})]
 	});
 }
 //#endregion
 //#region src/components/contractValueOrb/ContractValueOrb.tsx
-var _e = 680, ve = 220, ye = [
+var we = 680, Te = 220, Ee = 8, De = [
 	u.blue,
 	u.cyan,
 	u.amber,
 	u.purple,
 	u.green
-], z = {
+], R = {
 	left: 8,
-	right: 64,
+	right: 80,
 	top: 16,
 	bottom: 38
-}, B = 88, V = 18;
-function be({ data: e, "data-testid": t }) {
-	let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: i, tooltip: o, hitZonesRef: l } = C(n, {
-		width: _e,
-		height: ve
-	}), { contractors: d = [], totals: h } = e, g = d.length, _ = Math.max(...d.map((e) => e.total ?? 0), 1), y = _e - z.left - B - z.right, b = g > 1 ? (ve - z.top - z.bottom - g * V) / (g - 1) : 0;
-	return ue(n, _e, ve, (e, t) => {
-		M(r.current, i.current), l.current = [], d.forEach((n, i) => {
-			let a = ye[i % ye.length], o = j(t, i, g, D), s = z.top + i * (V + b), c = z.left + B, d = r.current.get(n.id) ?? 0, p = (n.base ?? 0) / _ * y * o, h = (n.total ?? 0) / _ * y * o, x = h - p;
-			e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = d > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(n.abbreviation ?? n.name.slice(0, 6), c - 8, s + V / 2), e.fillStyle = m(u.bd, .25), e.beginPath(), e.roundRect(c, s, y, V, 4), e.fill(), p > 0 && (d > 0 && v(e, c + p / 2, s + V / 2, p * .3, a, .1 * d), e.fillStyle = m(a, .5 + d * .15), e.beginPath(), e.roundRect(c, s, p, V, 4), e.fill()), x > 2 && (e.fillStyle = m(a, .22 + d * .08), e.beginPath(), e.roundRect(c + p, s, x, V, [
+}, Oe = 88, z = 18;
+function ke(e) {
+	let t = Math.abs(e), n = e < 0 ? "-" : "";
+	return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
+}
+function Ae({ data: e, "data-testid": t }) {
+	let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { contractors: d = [], totals: h } = e, g = [...d].sort((e, t) => (t.total ?? 0) - (e.total ?? 0)), _ = i ? g : g.slice(0, Ee), y = _.length, b = Math.max(...g.map((e) => Math.abs(e.total ?? 0)), 1), x = Math.max(Te, R.top + R.bottom + y * z + Math.max(0, y - 1) * 8), w = we - R.left - Oe - R.right, E = y > 1 ? (x - R.top - R.bottom - y * z) / (y - 1) : 0, { hoveredRef: O, tooltip: k, hitZonesRef: A } = C(n, {
+		width: we,
+		height: x
+	});
+	return ge(n, we, x, (e, t) => {
+		M(r.current, O.current), A.current = [], _.forEach((n, i) => {
+			let a = De[i % De.length], o = j(t, i, y, D), s = R.top + i * (z + E), c = R.left + Oe, l = r.current.get(n.id) ?? 0, d = Math.max(n.base ?? 0, 0), p = Math.max(n.total ?? 0, 0), h = d / b * w * o, g = p / b * w * o, _ = g - h;
+			e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(n.abbreviation ?? n.name.slice(0, 6), c - 8, s + z / 2), e.fillStyle = m(u.bd, .25), e.beginPath(), e.roundRect(c, s, w, z, 4), e.fill(), h > 0 && (l > 0 && v(e, c + h / 2, s + z / 2, h * .3, a, .1 * l), e.fillStyle = m(a, .5 + l * .15), e.beginPath(), e.roundRect(c, s, h, z, 4), e.fill()), _ > 2 && (e.fillStyle = m(a, .22 + l * .08), e.beginPath(), e.roundRect(c + h, s, _, z, [
 				0,
 				4,
 				4,
 				0
-			]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + p, s + 3), e.lineTo(c + p, s + V - 3), e.stroke(), e.setLineDash([])), d > 0 && h > 0 && (e.strokeStyle = m(a, .5 * d), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, h, V, 4), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = d > 0 ? a : u.t2, e.textAlign = "left", e.textBaseline = "middle", e.fillText(`£${n.total ?? 0}M`, c + h + 6, s + V / 2), e.globalAlpha = 1), T(l.current, n.id, c, s, Math.max(h, 1), V, {
+			]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + h, s + 3), e.lineTo(c + h, s + z - 3), e.stroke(), e.setLineDash([])), l > 0 && g > 0 && (e.strokeStyle = m(a, .5 * l), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, g, z, 4), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : u.t1, e.textAlign = "left", e.textBaseline = "middle", e.fillText(ke(n.total ?? 0), c + g + 6, s + z / 2), e.globalAlpha = 1), T(A.current, n.id, c, s, Math.max(g, 1), z, {
 				label: n.name,
-				value: `£${n.total ?? 0}M total`,
-				sublabel: `Base £${n.base ?? 0}M + Var £${n.variation ?? 0}M · ${n.percentage ?? 0}% committed`,
+				value: `${ke(n.total ?? 0)} total`,
+				sublabel: `Base ${ke(n.base ?? 0)} + Var ${ke(n.variation ?? 0)} · ${n.percentage ?? 0}% committed`,
 				color: a
 			});
 		});
-		let n = ve - 14;
-		e.textBaseline = "middle", e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "left", e.fillStyle = m(u.cyan, .5), e.beginPath(), e.roundRect(z.left + B, n - 3, 14, 6, 2), e.fill(), e.fillStyle = p.color, e.fillText("base value", z.left + B + 18, n), e.fillStyle = m(u.cyan, .22), e.beginPath(), e.roundRect(z.left + B + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(u.cyan, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(z.left + B + 101, n - 3), e.lineTo(z.left + B + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = p.color, e.fillText("approved variations", z.left + B + 112, n), e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "right", e.fillStyle = p.color, e.fillText(`Portfolio: £${h?.total ?? 0}M`, _e - 8, n);
+		let n = x - 14;
+		e.textBaseline = "middle", e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "left", e.fillStyle = m(u.cyan, .5), e.beginPath(), e.roundRect(R.left + Oe, n - 3, 14, 6, 2), e.fill(), e.fillStyle = p.color, e.fillText("base value", R.left + Oe + 18, n), e.fillStyle = m(u.cyan, .22), e.beginPath(), e.roundRect(R.left + Oe + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(u.cyan, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(R.left + Oe + 101, n - 3), e.lineTo(R.left + Oe + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = p.color, e.fillText("approved variations", R.left + Oe + 112, n), e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "right", e.fillStyle = p.color, e.fillText(`Portfolio: ${ke(h?.total ?? 0)}`, we - 8, n);
 	}, !0, { easing: D }), /* @__PURE__ */ c("div", {
 		"data-testid": t,
 		style: {
-			position: "relative",
-			width: _e,
-			height: ve
+			width: we,
+			transition: "all 0.25s ease"
 		},
-		children: [/* @__PURE__ */ s("canvas", {
-			ref: n,
-			role: "img",
-			"aria-label": "Total contract value per contractor — horizontal bar chart",
-			style: {
-				width: _e,
-				height: ve,
-				display: "block",
-				borderRadius: 8
-			}
-		}), /* @__PURE__ */ s(S, {
-			...o,
-			parentW: _e,
-			parentH: ve
+		children: [/* @__PURE__ */ c("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ s("canvas", {
+				ref: n,
+				role: "img",
+				"aria-label": "Total contract value per contractor — horizontal bar chart",
+				style: {
+					width: we,
+					height: x,
+					display: "block",
+					borderRadius: 8
+				}
+			}), /* @__PURE__ */ s(S, {
+				...k,
+				parentW: we,
+				parentH: x
+			})]
+		}), d.length > Ee && /* @__PURE__ */ s("div", {
+			style: { marginTop: 8 },
+			children: /* @__PURE__ */ s(ae, {
+				expanded: i,
+				onToggle: () => l((e) => !e)
+			})
 		})]
 	});
 }
 //#endregion
 //#region src/components/contractorRank/ContractorRank.tsx
-var xe = 780, H = 240, Se = 12, Ce = 10, we = [
+var je = 780, B = 240, Me = 12, Ne = 10, Pe = [
 	"Highest exposure",
 	"Elevated risk",
 	"Moderate exposure",
 	"Moderate exposure",
 	"Low exposure"
 ];
-function Te({ contractors: e = [], "data-testid": t }) {
-	let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
-		width: xe,
-		height: H
-	}), h = [...e].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), g = h.reduce((e, t) => e + (t.count ?? 0), 0);
+function Fe({ contractors: e = [], "data-testid": t }) {
+	let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: p, hitZonesRef: h } = C(r, {
+		width: je,
+		height: B
+	}), g = [...e].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), y = g.reduce((e, t) => e + (t.count ?? 0), 0);
 	return n(() => {
 		let e = r.current;
 		if (!e) return;
-		let t = _(e, xe, H);
+		let t = _(e, je, B);
 		i.current = 0;
-		let n = Math.min(5, h.length), a = (xe - 2 * Se - (n - 1) * Ce) / n, s = H * .84, c = H * .08, d, y = () => {
+		let n = Math.min(5, g.length), a = (je - 2 * Me - (n - 1) * Ne) / n, s = B * .84, c = B * .08, p, x = () => {
 			i.current++;
 			let e = i.current;
-			t.clearRect(0, 0, xe, H), p.current = [], o.current.forEach((e, t) => {
+			t.clearRect(0, 0, je, B), h.current = [], o.current.forEach((e, t) => {
 				let n = t === l.current ? 1 : 0, r = e + (n - e) * .12;
 				Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
-			}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), h.forEach((n, r) => {
-				let i = r === 0, l = i ? u.red : r === 1 ? u.amber : u.blue, d = Se + r * (a + Ce), h = o.current.get(n.id) ?? 0, _ = h * 8, y = d - _ / 2, b = a + _, x = i ? A(e, .04, 3e-4) * .06 + .06 : 0;
-				t.fillStyle = m(l, .08 + h * .07), t.beginPath(), t.roundRect(y, c, b, s, 6), t.fill(), t.strokeStyle = m(l, .2 + h * .4 + x), t.lineWidth = i ? 1.5 : 1, t.stroke(), (h > .01 || i) && v(t, y + b / 2, c + s / 2, b * .55, l, x + h * .14), t.font = "bold " + f.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = m(l, .5 + h * .35), t.fillText(`#${r + 1}`, y + 7, c + 6);
-				let S = a * .28, C = y + b / 2, w = c + s * .38, E = t.createRadialGradient(C, w - S * .2, 0, C, w, S);
-				E.addColorStop(0, m(l, .5 + h * .2)), E.addColorStop(1, m(l, .2 + h * .1)), t.beginPath(), t.arc(C, w, S, 0, Math.PI * 2), t.fillStyle = E, t.fill(), t.strokeStyle = m(l, .4 + h * .3), t.lineWidth = 1, t.stroke(), t.font = "bold " + f.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = m(u.t1, .9), t.fillText(n.abbreviation ?? n.name.slice(0, 6), C, w), t.font = "bold 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.textBaseline = "alphabetic", t.fillStyle = m(l, .9 + h * .1), t.fillText(String(n.count ?? 0), C, c + s * .76), t.font = f.font, t.fillStyle = f.color, t.fillText("open EWs", C, c + s * .88);
-				let D = Math.round((n.count ?? 0) / (g || 1) * 100), O = we[r] ?? "Low exposure";
-				T(p.current, n.id, d, c, a, s, {
+			}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), g.forEach((n, r) => {
+				let i = r === 0, l = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length], p = Me + r * (a + Ne), g = o.current.get(n.id) ?? 0, _ = g * 8, b = p - _ / 2, x = a + _, S = i ? A(e, .04, 3e-4) * .06 + .06 : 0;
+				t.fillStyle = m(l, .08 + g * .07), t.beginPath(), t.roundRect(b, c, x, s, 6), t.fill(), t.strokeStyle = m(l, .2 + g * .4 + S), t.lineWidth = i ? 1.5 : 1, t.stroke(), (g > .01 || i) && v(t, b + x / 2, c + s / 2, x * .55, l, S + g * .14), t.font = "bold " + f.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = m(l, .5 + g * .35), t.fillText(`#${r + 1}`, b + 7, c + 6);
+				let C = Math.min(a * .28, s * .32, 72), w = b + x / 2, E = c + s * .38, D = t.createRadialGradient(w, E - C * .2, 0, w, E, C);
+				D.addColorStop(0, m(l, .5 + g * .2)), D.addColorStop(1, m(l, .2 + g * .1)), t.beginPath(), t.arc(w, E, C, 0, Math.PI * 2), t.fillStyle = D, t.fill(), t.strokeStyle = m(l, .4 + g * .3), t.lineWidth = 1, t.stroke(), t.font = "bold " + f.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = m(u.t1, .9), t.fillText(n.abbreviation ?? n.name.slice(0, 6), w, E), t.font = "bold 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.textBaseline = "alphabetic", t.fillStyle = m(l, .9 + g * .1), t.fillText(String(n.count ?? 0), w, c + s * .76), t.font = f.font, t.fillStyle = f.color, t.fillText("open EWs", w, c + s * .88);
+				let O = Math.round((n.count ?? 0) / (y || 1) * 100), k = Pe[r] ?? "Low exposure";
+				T(h.current, n.id, p, c, a, s, {
 					label: n.name,
-					value: `${n.count ?? 0} open · ${D}% of total`,
-					sublabel: `Rank #${r + 1} · ${O}`,
+					value: `${n.count ?? 0} open · ${O}% of total`,
+					sublabel: `Rank #${r + 1} · ${k}`,
 					color: l
 				});
-			}), b(t, xe, H, e, .015), d = requestAnimationFrame(y);
+			}), b(t, je, B, e, .015), p = requestAnimationFrame(x);
 		};
-		return y(), () => cancelAnimationFrame(d);
-	}, [h, g]), /* @__PURE__ */ c("div", {
+		return x(), () => cancelAnimationFrame(p);
+	}, [g, y]), /* @__PURE__ */ c("div", {
 		"data-testid": t,
 		style: {
 			position: "relative",
-			width: xe,
-			height: H
+			width: je,
+			height: B
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: r,
 			role: "img",
 			"aria-label": "Contractor rank — open EW count per contractor",
 			style: {
-				width: xe,
-				height: H,
+				width: je,
+				height: B,
 				display: "block",
 				borderRadius: 8
 			}
 		}), /* @__PURE__ */ s(S, {
-			...d,
-			parentW: xe,
-			parentH: H
+			...p,
+			parentW: je,
+			parentH: B
 		})]
 	});
 }
 //#endregion
 //#region src/components/ewCategory/EWCategory.tsx
-var U = 680, W = 260;
-function Ee({ categories: e = [], "data-testid": t }) {
+var V = 680, H = 260;
+function Ie({ categories: e = [], "data-testid": t }) {
 	let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef: f } = C(r, {
-		width: U,
-		height: W
+		width: V,
+		height: H
 	});
 	return n(() => {
 		let t = r.current;
 		if (!t) return;
-		let n = _(t, U, W);
+		let n = _(t, V, H);
 		i.current = 0;
-		let a = e.length, s = Math.max(...e.map((e) => e.count), 1), c = s, d = U * .05, p = W * .1, h = U * .9 / a, g = W * .7 / c, x = e.reduce((e, t) => e + t.count, 0), S, C = () => {
+		let a = e.length, s = Math.max(...e.map((e) => e.count), 1), c = s, d = V * .05, p = H * .1, h = V * .9 / a, g = H * .7 / c, x = e.reduce((e, t) => e + t.count, 0), S, C = () => {
 			i.current++;
 			let t = i.current;
-			n.clearRect(0, 0, U, W), f.current = [], o.current.forEach((e, t) => {
+			n.clearRect(0, 0, V, H), f.current = [], o.current.forEach((e, t) => {
 				let n = t === l.current ? 1 : 0, r = e + (n - e) * .12;
 				Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
-			}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), y(n, U, W, t, 40, m(u.blue, .04)), e.forEach((e, r) => {
+			}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), y(n, V, H, t, 40, m(u.blue, .04)), e.forEach((e, r) => {
 				let i = e.count === s, a = i ? u.cyan : u.blue, l = o.current.get(`${e.category}-col`) ?? 0;
 				for (let u = 0; u < c; u++) {
 					let c = d + r * h + h / 2, _ = p + u * g + g / 2, y = Math.min(h, g) * .38;
@@ -877,36 +943,36 @@ function Ee({ categories: e = [], "data-testid": t }) {
 				}
 				let _ = p + c * g + 16;
 				n.font = `${i ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.textAlign = "center", n.textBaseline = "alphabetic", n.fillStyle = i ? u.cyan : m(u.t2, .65), n.fillText(e.category, d + r * h + h / 2, _);
-			}), b(n, U, W, t, .015), S = requestAnimationFrame(C);
+			}), b(n, V, H, t, .015), S = requestAnimationFrame(C);
 		};
 		return C(), () => cancelAnimationFrame(S);
 	}, [e]), /* @__PURE__ */ c("div", {
 		"data-testid": t,
 		style: {
 			position: "relative",
-			width: U,
-			height: W
+			width: V,
+			height: H
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: r,
 			role: "img",
 			"aria-label": "Early Warning count by category — breathing dot grid",
 			style: {
-				width: U,
-				height: W,
+				width: V,
+				height: H,
 				display: "block",
 				borderRadius: 8
 			}
 		}), /* @__PURE__ */ s(S, {
 			...d,
-			parentW: U,
-			parentH: W
+			parentW: V,
+			parentH: H
 		})]
 	});
 }
 //#endregion
 //#region src/components/lineChart/LineChart.tsx
-function De({ rows: e = [], className: t, colors: n }) {
+function Le({ rows: e = [], className: t, colors: n }) {
 	return /* @__PURE__ */ s(te, {
 		rows: e,
 		variant: "line",
@@ -916,7 +982,7 @@ function De({ rows: e = [], className: t, colors: n }) {
 }
 //#endregion
 //#region src/components/constants.ts
-var Oe = [
+var Re = [
 	"#36BFFA",
 	"#16B364",
 	"#D444F1",
@@ -925,7 +991,7 @@ var Oe = [
 	"#7A5AF8",
 	"#EF6820",
 	"#D92D20"
-], ke = {
+], ze = {
 	nodes: [
 		{
 			id: "supplier-x",
@@ -968,8 +1034,8 @@ var Oe = [
 };
 //#endregion
 //#region src/components/miniBars/MiniBars.tsx
-function Ae({ rows: e = [], className: t, colors: n }) {
-	let r = n?.slices ?? Oe;
+function Be({ rows: e = [], className: t, colors: n }) {
+	let r = n?.slices ?? Re;
 	return /* @__PURE__ */ s("div", {
 		className: ["d3-mini-bars", t].filter(Boolean).join(" "),
 		children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
@@ -995,7 +1061,7 @@ function Ae({ rows: e = [], className: t, colors: n }) {
 							width: Math.max(0, Math.min(100, t)),
 							height: "12",
 							rx: "6",
-							className: `d3-mini-fill tone-${i % Oe.length}`,
+							className: `d3-mini-fill tone-${i % Re.length}`,
 							fill: r[i % r.length]
 						})]
 					})
@@ -1007,24 +1073,24 @@ function Ae({ rows: e = [], className: t, colors: n }) {
 }
 //#endregion
 //#region src/components/nceTree/NCETree.tsx
-var je = 680, Me = 320;
-function Ne({ total: e = 0, byContractor: t = [], "data-testid": r }) {
+var Ve = 680, He = 320;
+function Ue({ total: e = 0, byContractor: t = [], "data-testid": r }) {
 	let i = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: p, tooltip: h, hitZonesRef: g } = C(i, {
-		width: je,
-		height: Me
+		width: Ve,
+		height: He
 	});
 	return n(() => {
 		let n = i.current;
 		if (!n) return;
-		let r = _(n, je, Me);
+		let r = _(n, Ve, He);
 		l.current = 0;
-		let a = Me / 2, s = je - 80, c = Math.max(...t.map((e) => e.count ?? 0)), h = (Me - 60) / (t.length - 1), y = t.map((e, t) => ({
+		let a = He / 2, s = Ve - 80, c = Math.max(...t.map((e) => e.count ?? 0)), h = (He - 60) / (t.length - 1), y = t.map((e, t) => ({
 			x: s,
 			y: 30 + t * h
 		})), b, x = () => {
 			l.current++;
 			let n = l.current;
-			r.clearRect(0, 0, je, Me);
+			r.clearRect(0, 0, Ve, He);
 			let i = E(Math.min(n / 72, 1));
 			M(o.current, p.current), g.current = [], v(r, 88, a, 48 * i, u.blue, .15 * i), t.forEach((n, l) => {
 				let p = d[l % d.length], h = j(i, l, t.length, E), _ = y[l], b = o.current.get(n.id) ?? 0, x = Math.max(1.5, (n.count ?? 0) / c * 6);
@@ -1051,42 +1117,42 @@ function Ne({ total: e = 0, byContractor: t = [], "data-testid": r }) {
 		"data-testid": r,
 		style: {
 			position: "relative",
-			width: je,
-			height: Me
+			width: Ve,
+			height: He
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: i,
 			role: "img",
 			"aria-label": "NCE fault tree — NCEs per contractor as branching tree",
 			style: {
-				width: je,
-				height: Me,
+				width: Ve,
+				height: He,
 				display: "block"
 			}
 		}), /* @__PURE__ */ s(S, {
 			...h,
-			parentW: je,
-			parentH: Me
+			parentW: Ve,
+			parentH: He
 		})]
 	});
 }
 //#endregion
 //#region src/components/pieChart/PieChart.tsx
-var Pe = 192, Fe = Pe, Ie = Pe + 80;
-function Le({ rows: e = [], variant: t, className: r, colors: i }) {
+var We = 192, Ge = We, Ke = We + 80;
+function qe({ rows: e = [], variant: t, className: r, colors: i }) {
 	let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0), h = i?.slices ?? d, { hoveredRef: y, tooltip: b, hitZonesRef: x } = C(o, {
-		width: Fe,
-		height: Ie
+		width: Ge,
+		height: Ke
 	});
 	return n(() => {
 		let n = o.current;
 		if (!n) return;
-		let r = _(n, Fe, Ie);
+		let r = _(n, Ge, Ke);
 		p.current = 0;
-		let i = Fe / 2, a = Pe / 2, s = Pe * .4, c = t === "donut" ? Pe * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, d, b = () => {
+		let i = Ge / 2, a = We / 2, s = We * .4, c = t === "donut" ? We * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, d, b = () => {
 			p.current++;
 			let n = p.current;
-			r.clearRect(0, 0, Fe, Ie);
+			r.clearRect(0, 0, Ge, Ke);
 			let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
 			M(f.current, y.current), x.current = [];
 			let _ = -Math.PI / 2;
@@ -1100,10 +1166,10 @@ function Le({ rows: e = [], variant: t, className: r, colors: i }) {
 				let O = A(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? O * 2 : 0);
 				r.beginPath(), r.moveTo(i + Math.cos(_) * c, a + Math.sin(_) * c), r.arc(i, a, k, _, g), c > 0 ? r.arc(i, a, c, g, _, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = m(y, .7 + b * .2), r.fill(), r.strokeStyle = m(u.bg, .8), r.lineWidth = 1.5, r.stroke(), _ = g;
 			}), t === "donut" && e.length > 0 && v(r, i, a, c * .8, u.blue, .06);
-			let S = Pe + 12;
+			let S = We + 12;
 			e.forEach((e, t) => {
 				let n = h[t % h.length], i = (e.pricing ?? 0) / l, a = f.current.get(e.id ?? `sl-${t}`) ?? 0, o = S + t * 18;
-				r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = m(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = m(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = g(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, Fe - 4, o + 3.5);
+				r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = m(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = m(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = g(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, Ge - 4, o + 3.5);
 			}), d = requestAnimationFrame(b);
 		};
 		return b(), () => cancelAnimationFrame(d);
@@ -1117,30 +1183,30 @@ function Le({ rows: e = [], variant: t, className: r, colors: i }) {
 		children: /* @__PURE__ */ c("div", {
 			style: {
 				position: "relative",
-				width: Fe,
-				height: Ie
+				width: Ge,
+				height: Ke
 			},
 			children: [/* @__PURE__ */ s("canvas", {
 				ref: o,
 				role: "img",
 				"aria-label": `${t} chart`,
 				style: {
-					width: Fe,
-					height: Ie,
+					width: Ge,
+					height: Ke,
 					display: "block",
 					borderRadius: 8
 				}
 			}), /* @__PURE__ */ s(S, {
 				...b,
-				parentW: Fe,
-				parentH: Ie
+				parentW: Ge,
+				parentH: Ke
 			})]
 		})
 	});
 }
 //#endregion
 //#region src/components/sankey/SankeySvg.tsx
-function Re(e, t, n, r) {
+function Je(e, t, n, r) {
 	let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
 	for (e.forEach((e) => {
 		i.has(e.id) && !a.has(e.id) && s.push({
@@ -1185,8 +1251,8 @@ function Re(e, t, n, r) {
 		});
 	}), f;
 }
-function ze({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: h, colors: g }) {
-	let y = a(null), x = a(/* @__PURE__ */ new Map()), E = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, j = g?.activeLinks ?? u.blue, ee = g?.activeNodes ?? u.blue, N = i(() => Re(e, t, r, o), [
+function Ye({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: h, colors: g }) {
+	let y = a(null), x = a(/* @__PURE__ */ new Map()), E = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, j = g?.activeLinks ?? u.blue, ee = g?.activeNodes ?? u.blue, N = i(() => Je(e, t, r, o), [
 		e,
 		t,
 		r,
@@ -1286,7 +1352,7 @@ function ze({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
 }
 //#endregion
 //#region src/canvas/CausalFlowCanvas.tsx
-var Be = [
+var Xe = [
 	{
 		x: .13,
 		y: .48
@@ -1319,7 +1385,7 @@ var Be = [
 		x: .92,
 		y: .22
 	}
-], Ve = [
+], Ze = [
 	u.blue,
 	u.cyan,
 	u.orange,
@@ -1328,7 +1394,7 @@ var Be = [
 	u.green,
 	u.amber,
 	u.t2
-], He = [
+], Qe = [
 	26,
 	24,
 	24,
@@ -1338,21 +1404,21 @@ var Be = [
 	22,
 	22
 ];
-function Ue(e, t) {
+function $e(e, t) {
 	let n = 1 - t;
 	return {
 		x: n * n * n * e.p0.x + 3 * n * n * t * e.p1.x + 3 * n * t * t * e.p2.x + t * t * t * e.p3.x,
 		y: n * n * n * e.p0.y + 3 * n * n * t * e.p1.y + 3 * n * t * t * e.p2.y + t * t * t * e.p3.y
 	};
 }
-function We(e, t) {
+function et(e, t) {
 	let n = 1 - t, r = 3 * n * n * (e.p1.x - e.p0.x) + 6 * n * t * (e.p2.x - e.p1.x) + 3 * t * t * (e.p3.x - e.p2.x), i = 3 * n * n * (e.p1.y - e.p0.y) + 6 * n * t * (e.p2.y - e.p1.y) + 3 * t * t * (e.p3.y - e.p2.y), a = Math.sqrt(r * r + i * i) || 1;
 	return {
 		x: -i / a,
 		y: r / a
 	};
 }
-function Ge(e, t) {
+function tt(e, t) {
 	let n = t.x - e.x, r = t.y - e.y;
 	return {
 		p0: {
@@ -1373,7 +1439,7 @@ function Ge(e, t) {
 		}
 	};
 }
-function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
+function nt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
 	let d = a(null), f = a(0), p = a([]), { hoveredRef: h, tooltip: x, hitZonesRef: T } = C(d, {
 		width: r,
 		height: o
@@ -1381,15 +1447,15 @@ function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
 		let t = /* @__PURE__ */ new Map();
 		return e.forEach((e, n) => t.set(e.id, n)), t;
 	}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e, j = i(() => e.map((e, t) => {
-		let n = Be[t % Be.length];
+		let n = Xe[t % Xe.length];
 		return {
 			id: e.id,
 			label: e.name,
 			sub: e.valueLabel ?? "",
 			x: n.x * r,
 			y: n.y * o,
-			r: He[t % He.length],
-			color: Ve[t % Ve.length]
+			r: Qe[t % Qe.length],
+			color: Ze[t % Ze.length]
 		};
 	}), [
 		e,
@@ -1411,7 +1477,7 @@ function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
 			if (t.clearRect(0, 0, r, o), T.current = [], y(t, r, o, e, 50, m(u.blue, .05)), M.forEach((e, n) => {
 				let r = j[e.fromIdx], i = j[e.toIdx];
 				if (!r || !i) return;
-				let a = !!l && (r.id === l || i.id === l), o = g(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = Ge(r, i);
+				let a = !!l && (r.id === l || i.id === l), o = g(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = tt(r, i);
 				t.beginPath(), t.moveTo(d.p0.x, d.p0.y), t.bezierCurveTo(d.p1.x, d.p1.y, d.p2.x, d.p2.y, d.p3.x, d.p3.y), t.strokeStyle = m(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = m(o, c), t.lineWidth = 1.5, t.stroke();
 				for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
 					edgeIdx: n,
@@ -1420,7 +1486,7 @@ function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
 					off: (Math.random() - .5) * 13,
 					sz: .7 + Math.random() * 2
 				});
-				let f = Ue(d, .5), h = `${Math.round(e.conf * 100)}%`;
+				let f = $e(d, .5), h = `${Math.round(e.conf * 100)}%`;
 				t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
 				let _ = t.measureText(h).width + 14;
 				t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - _ / 2, f.y - 11, _, 22, 6), t.fill(), t.strokeStyle = m(u.cyan, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = m(u.cyan, .9), t.textAlign = "center", t.fillText(h, f.x, f.y);
@@ -1430,7 +1496,7 @@ function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
 				if (!n) return !1;
 				let r = j[n.fromIdx], i = j[n.toIdx];
 				if (!r || !i) return !1;
-				let a = Ge(r, i), o = Ue(a, e.t), s = We(a, e.t), c = o.x + s.x * e.off, l = o.y + s.y * e.off, u = Math.sin(e.t * Math.PI) * .7, d = g(r.color, i.color, e.t);
+				let a = tt(r, i), o = $e(a, e.t), s = et(a, e.t), c = o.x + s.x * e.off, l = o.y + s.y * e.off, u = Math.sin(e.t * Math.PI) * .7, d = g(r.color, i.color, e.t);
 				return v(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = m(d, u), t.fill(), !0;
 			}), p.current.length > 350 && (p.current = p.current.slice(-350)), j.forEach((n, r) => {
 				let i = l === n.id, a = h.current === `node-${r}`, o = A(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
@@ -1487,10 +1553,10 @@ function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
 }
 //#endregion
 //#region src/components/sankey/ProcessSankey.tsx
-function qe({ selectedEntity: e, colors: t }) {
-	return /* @__PURE__ */ s(Ke, {
-		nodes: ke.nodes,
-		links: ke.links,
+function rt({ selectedEntity: e, colors: t }) {
+	return /* @__PURE__ */ s(nt, {
+		nodes: ze.nodes,
+		links: ze.links,
 		width: 960,
 		height: 280,
 		selectedEntity: e
@@ -1498,7 +1564,7 @@ function qe({ selectedEntity: e, colors: t }) {
 }
 //#endregion
 //#region src/components/sankey/RankingSankey.tsx
-function Je({ rows: e = [], className: t, colors: n }) {
+function it({ rows: e = [], className: t, colors: n }) {
 	let { nodes: r, links: a } = i(() => {
 		let t = e.slice(0, 5);
 		return {
@@ -1516,7 +1582,7 @@ function Je({ rows: e = [], className: t, colors: n }) {
 			}))
 		};
 	}, [e]);
-	return /* @__PURE__ */ s(ze, {
+	return /* @__PURE__ */ s(Ye, {
 		nodes: r,
 		links: a,
 		width: 760,
@@ -1528,20 +1594,20 @@ function Je({ rows: e = [], className: t, colors: n }) {
 }
 //#endregion
 //#region src/components/quotationBalance/QuotationBalance.tsx
-var Ye = 500, Xe = 320;
-function Ze({ accepted: e, submitted: t, "data-testid": r }) {
+var at = 500, ot = 320;
+function st({ accepted: e, submitted: t, "data-testid": r }) {
 	let i = a(null), o = a(0);
 	return n(() => {
 		let n = i.current;
 		if (!n) return;
-		let r = _(n, Ye, Xe);
+		let r = _(n, at, ot);
 		o.current = 0;
-		let a = Ye / 2, s = Math.max(e.value, t.value), c = (e.value - t.value) / s * 14, l, d = () => {
+		let a = at / 2, s = Math.max(e.value, t.value), c = (e.value - t.value) / s * 14, l, d = () => {
 			o.current++;
 			let n = o.current;
-			r.clearRect(0, 0, Ye, Xe);
+			r.clearRect(0, 0, at, ot);
 			let i = E(Math.min(n / 80, 1)), p = c * k(Math.min(n / 80, 1)) * Math.PI / 180;
-			r.strokeStyle = m(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a, Xe - 80), r.stroke(), r.beginPath(), r.arc(a, 100, 5 * i, 0, Math.PI * 2), r.fillStyle = u.t2, r.fill();
+			r.strokeStyle = m(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a, ot - 80), r.stroke(), r.beginPath(), r.arc(a, 100, 5 * i, 0, Math.PI * 2), r.fillStyle = u.t2, r.fill();
 			let h = {
 				x: a - Math.cos(p) * 160,
 				y: 100 + Math.sin(-p) * 160
@@ -1567,23 +1633,23 @@ function Ze({ accepted: e, submitted: t, "data-testid": r }) {
 				6
 			]), r.fill(), r.stroke(), r.strokeStyle = m(u.t3, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
 				r.beginPath(), r.moveTo(g.x + e, g.y + 4), r.lineTo(g.x + e, x), r.stroke();
-			}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, g.x, x + b + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", g.x, x + b + 32), r.fillText(`${t.count} quotations`, g.x, x + b + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a, Xe - 12), r.globalAlpha = 1), l = requestAnimationFrame(d);
+			}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, g.x, x + b + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", g.x, x + b + 32), r.fillText(`${t.count} quotations`, g.x, x + b + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a, ot - 12), r.globalAlpha = 1), l = requestAnimationFrame(d);
 		};
 		return d(), () => cancelAnimationFrame(l);
 	}, [e, t]), /* @__PURE__ */ s("div", {
 		"data-testid": r,
 		style: {
 			position: "relative",
-			width: Ye,
-			height: Xe
+			width: at,
+			height: ot
 		},
 		children: /* @__PURE__ */ s("canvas", {
 			ref: i,
 			role: "img",
 			"aria-label": "Quotation balance — accepted vs submitted quotation value",
 			style: {
-				width: Ye,
-				height: Xe,
+				width: at,
+				height: ot,
 				display: "block"
 			}
 		})
@@ -1591,25 +1657,25 @@ function Ze({ accepted: e, submitted: t, "data-testid": r }) {
 }
 //#endregion
 //#region src/components/quotationTrend/QuotationTrend.tsx
-var Qe = 680, G = 280;
-function $e({ trend: e = [], "data-testid": t }) {
+var ct = 680, U = 280;
+function lt({ trend: e = [], "data-testid": t }) {
 	let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
-		width: Qe,
-		height: G
+		width: ct,
+		height: U
 	});
 	return n(() => {
 		let t = r.current;
 		if (!t) return;
-		let n = _(t, Qe, G);
+		let n = _(t, ct, U);
 		o.current = 0;
-		let a = Qe - 54 - 28, s = G - 30 - 54, c = Math.max(...e.map((e) => e.count)), d = e.length, h = d > 1 ? a / (d - 1) : a, g = e.map((e, t) => ({
+		let a = ct - 54 - 28, s = U - 30 - 54, c = Math.max(...e.map((e) => e.count), 1), d = e.length, h = d > 1 ? a / (d - 1) : a, g = e.map((e, t) => ({
 			x: 54 + t * h,
 			y: 30 + s - e.count / c * s,
 			point: e
 		})), y, b = () => {
 			o.current++;
 			let e = o.current;
-			n.clearRect(0, 0, Qe, G);
+			n.clearRect(0, 0, ct, U);
 			let t = E(Math.min(e / 72, 1));
 			M(i.current, l.current), p.current = [], [
 				.25,
@@ -1619,7 +1685,7 @@ function $e({ trend: e = [], "data-testid": t }) {
 			].forEach((e) => {
 				let t = 30 + s - e * s;
 				n.strokeStyle = m(u.bd, .18), n.lineWidth = 1, n.setLineDash([3, 5]), n.beginPath(), n.moveTo(54, t), n.lineTo(54 + a, t), n.stroke(), n.setLineDash([]), n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(c * e)), 48, t + 3);
-			}), n.save(), n.translate(12, 30 + s / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Submissions", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Week", 54 + a / 2, G - 6), n.strokeStyle = m(u.bd, .3), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(54, 30 + s), n.lineTo(54 + a, 30 + s), n.stroke();
+			}), n.save(), n.translate(12, 30 + s / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Submissions", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Week", 54 + a / 2, U - 6), n.strokeStyle = m(u.bd, .3), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(54, 30 + s), n.lineTo(54 + a, 30 + s), n.stroke();
 			let r = t * (d - 1), h = Math.floor(r) + 1;
 			if (h >= 2) {
 				n.beginPath(), n.moveTo(g[0].x, 30 + s), n.lineTo(g[0].x, g[0].y);
@@ -1647,60 +1713,170 @@ function $e({ trend: e = [], "data-testid": t }) {
 					color: u.cyan
 				}), a > 0 && x(n, e.x, 30, 30 + s, m(u.cyan, .15 * a));
 				let o = e.point.count === c;
-				(a > 0 || o) && v(n, e.x, e.y, 14, u.cyan, (o ? .3 : 0) + a * .25), n.beginPath(), n.arc(e.x, e.y, a > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, a > 0 ? 1 : .8), n.fill(), (a > 0 || o) && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = a > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x, G - 54 + 14);
+				(a > 0 || o) && v(n, e.x, e.y, 14, u.cyan, (o ? .3 : 0) + a * .25), n.beginPath(), n.arc(e.x, e.y, a > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, a > 0 ? 1 : .8), n.fill(), (a > 0 || o) && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = a > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x, U - 54 + 14);
 			}), y = requestAnimationFrame(b);
 		};
 		return b(), () => cancelAnimationFrame(y);
-	}, [e]), /* @__PURE__ */ c("div", {
+	}, [e]), /* @__PURE__ */ s("div", {
 		"data-testid": t,
+		className: "trend-scroll",
 		style: {
-			position: "relative",
-			width: Qe,
-			height: G
+			width: "100%",
+			overflowX: "auto"
 		},
-		children: [/* @__PURE__ */ s("canvas", {
-			ref: r,
-			role: "img",
-			"aria-label": "Quotation submission trend — weekly count over 12 weeks",
+		children: /* @__PURE__ */ c("div", {
 			style: {
-				width: Qe,
-				height: G,
-				display: "block"
+				position: "relative",
+				width: ct,
+				height: U
+			},
+			children: [/* @__PURE__ */ s("canvas", {
+				ref: r,
+				role: "img",
+				"aria-label": "Trend chart — count over time",
+				style: {
+					width: ct,
+					height: U,
+					display: "block"
+				}
+			}), /* @__PURE__ */ s(S, {
+				...d,
+				parentW: ct,
+				parentH: U
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/trend/Trend.tsx
+var ut = 680, W = 280, dt = 54, ft = 28, pt = 64, mt = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", ht = 12;
+function gt({ trend: e = [], "data-testid": t }) {
+	let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), d = i(() => {
+		if (e.length <= 1) return pt;
+		let t = document.createElement("canvas").getContext("2d");
+		if (!t) return pt;
+		t.font = mt;
+		let n = Math.max(...e.map((e) => t.measureText(e.week).width));
+		return Math.max(pt, n + ht);
+	}, [e]), p = Math.max(ut, dt + ft + Math.max(0, e.length - 1) * d), { hoveredRef: h, tooltip: g, hitZonesRef: y } = C(r, {
+		width: p,
+		height: W
+	});
+	return n(() => {
+		let t = r.current;
+		if (!t) return;
+		let n = _(t, p, W);
+		l.current = 0;
+		let i = dt, a = ft, s = p - i - a, c = W - 30 - 54, g = Math.max(...e.map((e) => e.count), 1), b = e.length, S = b > 1 ? Math.max(s / (b - 1), d) : s, C = e.map((e, t) => ({
+			x: i + t * S,
+			y: 30 + c - e.count / g * c,
+			point: e
+		})), T, D = () => {
+			l.current++;
+			let e = l.current;
+			n.clearRect(0, 0, p, W);
+			let t = E(Math.min(e / 72, 1));
+			M(o.current, h.current), y.current = [], [
+				.25,
+				.5,
+				.75,
+				1
+			].forEach((e) => {
+				let t = 30 + c - e * c;
+				n.strokeStyle = m(u.bd, .18), n.lineWidth = 1, n.setLineDash([3, 5]), n.beginPath(), n.moveTo(i, t), n.lineTo(i + s, t), n.stroke(), n.setLineDash([]), n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(g * e)), i - 6, t + 3);
+			}), n.save(), n.translate(12, 30 + c / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Count", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Period", i + s / 2, W - 6), n.strokeStyle = m(u.bd, .3), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(i, 30 + c), n.lineTo(i + s, 30 + c), n.stroke();
+			let r = t * (b - 1), a = Math.floor(r) + 1;
+			if (a >= 2) {
+				n.beginPath(), n.moveTo(C[0].x, 30 + c), n.lineTo(C[0].x, C[0].y);
+				for (let e = 1; e < a; e++) {
+					let t = r - Math.floor(r), i = e < a - 1 ? C[e].x : C[e - 1].x + (C[e].x - C[e - 1].x) * (e === Math.ceil(r) ? t : 1), o = e < a - 1 ? C[e].y : C[e - 1].y + (C[e].y - C[e - 1].y) * (e === Math.ceil(r) ? t : 1);
+					n.lineTo(i, o);
+				}
+				let e = C[Math.min(a - 1, b - 1)];
+				n.lineTo(e.x, 30 + c), n.closePath();
+				let t = n.createLinearGradient(0, 30, 0, 30 + c);
+				t.addColorStop(0, m(u.cyan, .22)), t.addColorStop(1, m(u.cyan, .02)), n.fillStyle = t, n.fill();
 			}
-		}), /* @__PURE__ */ s(S, {
-			...d,
-			parentW: Qe,
-			parentH: G
-		})]
+			n.beginPath();
+			for (let e = 0; e < a; e++) {
+				let t = r - Math.floor(r), i = e === a - 1 && e > 0 && e === Math.ceil(r), o = e === 0 || e < a - 1 ? C[e].x : C[e - 1].x + (C[e].x - C[e - 1].x) * (i ? t : 1), s = e === 0 || e < a - 1 ? C[e].y : C[e - 1].y + (C[e].y - C[e - 1].y) * (i ? t : 1);
+				e === 0 ? n.moveTo(o, s) : n.lineTo(o, s);
+			}
+			n.strokeStyle = m(u.cyan, .85), n.lineWidth = 2, n.stroke(), C.forEach((e, t) => {
+				if (t >= a) return;
+				let r = `pt-${t}`, i = o.current.get(r) ?? 0;
+				w(y.current, r, e.x, e.y, 10, {
+					label: e.point.week,
+					value: `${e.point.count} submissions`,
+					sublabel: `£${e.point.value}M value`,
+					color: u.cyan
+				}), i > 0 && x(n, e.x, 30, 30 + c, m(u.cyan, .15 * i));
+				let s = e.point.count === g;
+				(i > 0 || s) && v(n, e.x, e.y, 14, u.cyan, (s ? .3 : 0) + i * .25), n.beginPath(), n.arc(e.x, e.y, i > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, i > 0 ? 1 : .8), n.fill(), (i > 0 || s) && (n.font = mt, n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = mt, n.fillStyle = i > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x, W - 54 + 14);
+			}), T = requestAnimationFrame(D);
+		};
+		return D(), () => cancelAnimationFrame(T);
+	}, [
+		e,
+		p,
+		d
+	]), /* @__PURE__ */ s("div", {
+		"data-testid": t,
+		className: "trend-scroll",
+		style: {
+			width: "100%",
+			overflowX: "auto"
+		},
+		children: /* @__PURE__ */ c("div", {
+			style: {
+				position: "relative",
+				width: p,
+				height: W
+			},
+			children: [/* @__PURE__ */ s("canvas", {
+				ref: r,
+				role: "img",
+				"aria-label": "Trend chart — count over time",
+				style: {
+					width: p,
+					height: W,
+					display: "block"
+				}
+			}), /* @__PURE__ */ s(S, {
+				...g,
+				parentW: p,
+				parentH: W
+			})]
+		})
 	});
 }
 //#endregion
 //#region src/components/severityBands/SeverityBands.tsx
-var K = 680, et = 240, tt = {
+var G = 680, _t = 240, vt = {
 	Critical: u.red,
 	High: u.orange,
 	Medium: u.amber,
 	Low: u.green
 };
-function nt({ severities: e = [], "data-testid": t }) {
+function yt({ severities: e = [], "data-testid": t }) {
 	let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
-		width: K,
-		height: et
+		width: G,
+		height: _t
 	});
 	return n(() => {
 		let t = r.current;
 		if (!t) return;
-		let n = _(t, K, et);
+		let n = _(t, G, _t);
 		o.current = 0;
-		let a = e.reduce((e, t) => e + t.count, 0), s = K - 28 - 28, c = et - 50 - 52, d = e.map((e) => e.count / a * s), h, g = () => {
+		let a = e.reduce((e, t) => e + t.count, 0), s = G - 28 - 28, c = _t - 50 - 52, d = e.map((e) => e.count / a * s), h, g = () => {
 			o.current++;
 			let t = o.current;
-			n.clearRect(0, 0, K, et);
+			n.clearRect(0, 0, G, _t);
 			let r = D(Math.min(t / 60, 1));
-			M(i.current, l.current), p.current = [], n.strokeStyle = m(u.bd, .2), n.lineWidth = 1, n.beginPath(), n.rect(28, 50, s, c), n.stroke(), n.strokeStyle = m(u.t4, .15), n.lineWidth = 1, n.setLineDash([4, 4]), n.beginPath(), n.moveTo(K / 2, 50), n.lineTo(K / 2, 50 + c), n.stroke(), n.setLineDash([]);
+			M(i.current, l.current), p.current = [], n.strokeStyle = m(u.bd, .2), n.lineWidth = 1, n.beginPath(), n.rect(28, 50, s, c), n.stroke(), n.strokeStyle = m(u.t4, .15), n.lineWidth = 1, n.setLineDash([4, 4]), n.beginPath(), n.moveTo(G / 2, 50), n.lineTo(G / 2, 50 + c), n.stroke(), n.setLineDash([]);
 			let _ = 28;
 			e.forEach((e, t) => {
-				let o = tt[e.severity] ?? u.blue, s = d[t];
+				let o = vt[e.severity] ?? u.blue, s = d[t];
 				s * r;
 				let l = i.current.get(e.severity) ?? 0, h = _ + s / 2, g = s * .85;
 				h - g / 2;
@@ -1724,57 +1900,57 @@ function nt({ severities: e = [], "data-testid": t }) {
 		"data-testid": t,
 		style: {
 			position: "relative",
-			width: K,
-			height: et
+			width: G,
+			height: _t
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: r,
 			role: "img",
 			"aria-label": "Early Warning severity distribution — prism spectrum bands",
 			style: {
-				width: K,
-				height: et,
+				width: G,
+				height: _t,
 				display: "block"
 			}
 		}), /* @__PURE__ */ s(S, {
 			...d,
-			parentW: K,
-			parentH: et
+			parentW: G,
+			parentH: _t
 		})]
 	});
 }
 //#endregion
 //#region src/components/statusArc/StatusArc.tsx
-var q = 460, J = 300, rt = {
+var K = 460, q = 300, bt = {
 	Open: u.red,
 	Submitted: u.amber,
 	Closed: u.green
 };
-function it({ segments: e = [], title: t, "data-testid": r }) {
+function xt({ segments: e = [], title: t, "data-testid": r }) {
 	let i = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef: h } = C(i, {
-		width: q,
-		height: J
+		width: K,
+		height: q
 	});
 	return n(() => {
 		let t = i.current;
 		if (!t) return;
-		let n = _(t, q, J);
+		let n = _(t, K, q);
 		o.current = 0;
-		let r = q * .5, a = J * .54, s = q * .22, c = e.reduce((e, t) => e + t.count, 0), p = Math.max(...e.map((e) => e.count), 1), g, x = () => {
+		let r = K * .5, a = q * .54, s = K * .22, c = e.reduce((e, t) => e + t.count, 0), p = Math.max(...e.map((e) => e.count), 1), g, x = () => {
 			o.current++;
 			let t = o.current;
-			n.clearRect(0, 0, q, J), h.current = [], l.current.forEach((e, t) => {
+			n.clearRect(0, 0, K, q), h.current = [], l.current.forEach((e, t) => {
 				let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
 				Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
-			}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), y(n, q, J, t, 40, m(u.blue, .04)), e.forEach((e, i) => {
-				let o = i / 3 * Math.PI * 2 - Math.PI / 2, c = r + Math.cos(o) * s, l = a + Math.sin(o) * s, d = rt[e.status] ?? u.blue, h = 2 + e.count / p * 8;
+			}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), y(n, K, q, t, 40, m(u.blue, .04)), e.forEach((e, i) => {
+				let o = i / 3 * Math.PI * 2 - Math.PI / 2, c = r + Math.cos(o) * s, l = a + Math.sin(o) * s, d = bt[e.status] ?? u.blue, h = 2 + e.count / p * 8;
 				n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle = m(d, .08), n.lineWidth = h * 2, n.stroke(), n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle = m(d, .25), n.lineWidth = 1, n.stroke();
 				let g = (t * .005 + i * .33) % 1, _ = r + (c - r) * g, y = a + (l - a) * g;
 				v(n, _, y, 6, d, .4), n.beginPath(), n.arc(_, y, 2, 0, Math.PI * 2), n.fillStyle = m(d, .8), n.fill();
 				let b = (r + c) / 2, x = (a + l) / 2;
 				n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(d, .85), n.fillText(String(e.count), b, x);
 			}), e.forEach((e, t) => {
-				let i = t / 3 * Math.PI * 2 - Math.PI / 2, o = r + Math.cos(i) * s, d = a + Math.sin(i) * s, g = rt[e.status] ?? u.blue, _ = 10 + e.count / p * 18, y = l.current.get(e.status) ?? 0;
+				let i = t / 3 * Math.PI * 2 - Math.PI / 2, o = r + Math.cos(i) * s, d = a + Math.sin(i) * s, g = bt[e.status] ?? u.blue, _ = 10 + e.count / p * 18, y = l.current.get(e.status) ?? 0;
 				v(n, o, d, _ * 2.5, g, .2 + y * .15);
 				let b = n.createRadialGradient(o, d - _ * .2, 0, o, d, _);
 				b.addColorStop(0, m(g, .8 + y * .2)), b.addColorStop(1, m(g, .4 + y * .1)), n.beginPath(), n.arc(o, d, _, 0, Math.PI * 2), n.fillStyle = b, n.fill(), n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(u.t1, .9), n.fillText(e.status, o, d), w(h.current, e.status, o, d, _ + 6, {
@@ -1791,37 +1967,37 @@ function it({ segments: e = [], title: t, "data-testid": r }) {
 				label: "Total EW Status",
 				value: `${c} Early Warnings`,
 				color: u.t3
-			}), b(n, q, J, t, .015), g = requestAnimationFrame(x);
+			}), b(n, K, q, t, .015), g = requestAnimationFrame(x);
 		};
 		return x(), () => cancelAnimationFrame(g);
 	}, [e, t]), /* @__PURE__ */ c("div", {
 		"data-testid": r,
 		style: {
 			position: "relative",
-			width: q,
-			height: J
+			width: K,
+			height: q
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: i,
 			role: "img",
 			"aria-label": t ?? "EW status arc visualization",
 			style: {
-				width: q,
-				height: J,
+				width: K,
+				height: q,
 				display: "block",
 				borderRadius: 8
 			}
 		}), /* @__PURE__ */ s(S, {
 			...p,
-			parentW: q,
-			parentH: J
+			parentW: K,
+			parentH: q
 		})]
 	});
 }
 //#endregion
 //#region src/components/trendChart/TrendChart.tsx
-var at = 280, Y = 96;
-function ot({ points: e = [], className: t, colors: r }) {
+var J = 280, Y = 96;
+function St({ points: e = [], className: t, colors: r }) {
 	let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.map(([e, t]) => {
 		let n = String(t).match(/-?\d+(\.\d+)?/);
 		return {
@@ -1829,18 +2005,18 @@ function ot({ points: e = [], className: t, colors: r }) {
 			value: n ? Number(n[0]) : 0
 		};
 	}), [e]), { mouseRef: h, hoveredRef: g, tooltip: y, hitZonesRef: b } = C(o, {
-		width: at,
+		width: J,
 		height: Y
 	});
 	return n(() => {
 		let e = o.current;
 		if (!e) return;
-		let t = _(e, at, Y);
+		let t = _(e, J, Y);
 		f.current = 0;
 		let n = r?.line ?? u.blue, i = r?.point ?? u.blue, a = r?.axisLine ?? u.bd, s, c = () => {
 			f.current++;
 			let e = f.current;
-			if (t.clearRect(0, 0, at, Y), p.length < 2) {
+			if (t.clearRect(0, 0, J, Y), p.length < 2) {
 				s = requestAnimationFrame(c);
 				return;
 			}
@@ -1849,8 +2025,8 @@ function ot({ points: e = [], className: t, colors: r }) {
 				right: 12,
 				top: 16,
 				bottom: 20
-			}, o = at - r.left - r.right, l = Y - r.top - r.bottom, _ = p.map((e) => e.value), y = Math.min(..._), S = Math.max(..._) - y || 1, C = (e) => r.left + e / (p.length - 1) * o, T = (e) => r.top + (1 - (e - y) / S) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
-			if (M(d.current, g.current), b.current = [], t.strokeStyle = m(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, Y - r.bottom), t.lineTo(at - r.right, Y - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = m(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
+			}, o = J - r.left - r.right, l = Y - r.top - r.bottom, _ = p.map((e) => e.value), y = Math.min(..._), S = Math.max(..._) - y || 1, C = (e) => r.left + e / (p.length - 1) * o, T = (e) => r.top + (1 - (e - y) / S) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
+			if (M(d.current, g.current), b.current = [], t.strokeStyle = m(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, Y - r.bottom), t.lineTo(J - r.right, Y - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = m(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
 				t.fillText(e.label.replace("Day ", "D"), C(n), Y - 4);
 			}), h.current.over && g.current) {
 				let e = parseInt(g.current.split("-")[1]);
@@ -1887,7 +2063,7 @@ function ot({ points: e = [], className: t, colors: r }) {
 		children: /* @__PURE__ */ c("div", {
 			style: {
 				position: "relative",
-				width: at,
+				width: J,
 				height: Y
 			},
 			children: [/* @__PURE__ */ s("canvas", {
@@ -1895,14 +2071,14 @@ function ot({ points: e = [], className: t, colors: r }) {
 				role: "img",
 				"aria-label": "trend chart",
 				style: {
-					width: at,
+					width: J,
 					height: Y,
 					display: "block",
 					borderRadius: 8
 				}
 			}), /* @__PURE__ */ s(S, {
 				...y,
-				parentW: at,
+				parentW: J,
 				parentH: Y
 			})]
 		})
@@ -1910,87 +2086,97 @@ function ot({ points: e = [], className: t, colors: r }) {
 }
 //#endregion
 //#region src/components/variationSplit/VariationSplit.tsx
-var st = 680, ct = 320;
-function lt({ contractors: e = [], "data-testid": t }) {
-	let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: f, hitZonesRef: h } = C(r, {
-		width: st,
-		height: ct
+var Ct = 680, wt = 8, Tt = 26, Et = 14, Dt = 16, Ot = 32;
+function kt({ contractors: e = [], "data-testid": t }) {
+	let r = a(null), l = a(/* @__PURE__ */ new Map()), f = a(0), [h, g] = o(!1), y = i(() => h ? e : e.slice(0, wt), [e, h]), b = Dt + Ot + y.length * (Tt + Et) - Et, { hoveredRef: x, tooltip: w, hitZonesRef: E } = C(r, {
+		width: Ct,
+		height: b
 	});
 	return n(() => {
-		let t = r.current;
-		if (!t) return;
-		let n = _(t, st, ct);
-		o.current = 0;
-		let a = st - 60 - 28, s = Math.max(...e.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0))), c = e.length * 40 - 14, f = 16 + (ct - 16 - 32 - c) / 2, g, y = () => {
-			o.current++;
-			let t = o.current;
-			n.clearRect(0, 0, st, ct);
-			let r = D(Math.min(t / 60, 1));
-			M(i.current, l.current), h.current = [], e.forEach((t, o) => {
-				let c = d[o % d.length], l = j(r, o, e.length, D), p = f + o * 40, g = (t.implemented ?? 0) + (t.unimplemented ?? 0), _ = (t.implemented ?? 0) / s * a * l, y = (t.unimplemented ?? 0) / s * a * l, b = `${t.id}-impl`, x = `${t.id}-un`, S = i.current.get(b) ?? 0, C = i.current.get(x) ?? 0;
-				T(h.current, b, 60, p, _ || 1, 26, {
-					label: `${t.name} — Implemented`,
-					value: `${t.implemented ?? 0} variations`,
-					sublabel: `${Math.round((t.implemented ?? 0) / (g || 1) * 100)}% complete`,
+		let e = r.current;
+		if (!e) return;
+		let t = _(e, Ct, b);
+		f.current = 0;
+		let n = Dt, i = Ot, a = Tt, o = Et, s = Ct - 60 - 28, c = Math.max(...y.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0))), h = y.length * (a + o) - o, g = n + (b - n - i - h) / 2, S, C = () => {
+			f.current++;
+			let e = f.current;
+			t.clearRect(0, 0, Ct, b);
+			let n = D(Math.min(e / 60, 1));
+			M(l.current, x.current), E.current = [], y.forEach((e, r) => {
+				d[r % d.length];
+				let i = j(n, r, y.length, D), f = g + r * (a + o), p = (e.implemented ?? 0) + (e.unimplemented ?? 0), h = (e.implemented ?? 0) / c * s * i, _ = (e.unimplemented ?? 0) / c * s * i, b = `${e.id}-impl`, x = `${e.id}-un`, S = l.current.get(b) ?? 0, C = l.current.get(x) ?? 0;
+				T(E.current, b, 60, f, h || 1, a, {
+					label: `${e.name} — Implemented`,
+					value: `${e.implemented ?? 0} variations`,
+					sublabel: `${Math.round((e.implemented ?? 0) / (p || 1) * 100)}% complete`,
 					color: u.green
-				}), T(h.current, x, 60 + _, p, y || 1, 26, {
-					label: `${t.name} — Unimplemented`,
-					value: `${t.unimplemented ?? 0} variations`,
-					sublabel: `${Math.round((t.unimplemented ?? 0) / (g || 1) * 100)}% pending`,
+				}), T(E.current, x, 60 + h, f, _ || 1, a, {
+					label: `${e.name} — Unimplemented`,
+					value: `${e.unimplemented ?? 0} variations`,
+					sublabel: `${Math.round((e.unimplemented ?? 0) / (p || 1) * 100)}% pending`,
 					color: u.amber
-				}), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(c, .85), n.textAlign = "right", n.fillText(t.abbreviation ?? t.name.slice(0, 6), 52, p + 26 / 2 + 4), n.fillStyle = m(u.bd, .15), n.beginPath(), n.roundRect(60, p, g / s * a, 26, 4), n.fill(), _ > 0 && (S > 0 && v(n, 60 + _ / 2, p + 26 / 2, _ * .3, u.green, .12 * S), n.fillStyle = m(u.green, .6 + S * .2), n.beginPath(), n.roundRect(60, p, _, 26, [
+				}), t.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.fillStyle = u.t2, t.textAlign = "right", t.fillText(e.abbreviation ?? e.name.slice(0, 6), 52, f + a / 2 + 4), t.fillStyle = m(u.bd, .15), t.beginPath(), t.roundRect(60, f, p / c * s, a, 4), t.fill(), h > 0 && (S > 0 && v(t, 60 + h / 2, f + a / 2, h * .3, u.green, .12 * S), t.fillStyle = m(u.green, .6 + S * .2), t.beginPath(), t.roundRect(60, f, h, a, [
 					4,
 					0,
 					0,
 					4
-				]), n.fill(), _ > 28 && l > .5 && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = S > 0 ? u.green : m(u.t1, .8), n.textAlign = "center", n.fillText(String(t.implemented ?? 0), 60 + _ / 2, p + 26 / 2 + 4))), y > 0 && (C > 0 && v(n, 60 + _ + y / 2, p + 26 / 2, y * .3, u.amber, .12 * C), n.fillStyle = m(u.amber, .18 + C * .18), n.strokeStyle = m(u.amber, .3 + C * .3), n.lineWidth = 1, n.beginPath(), n.roundRect(60 + _, p, y, 26, [
+				]), t.fill(), h > 28 && i > .5 && (t.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.fillStyle = S > 0 ? u.green : u.t2, t.textAlign = "center", t.fillText(String(e.implemented ?? 0), 60 + h / 2, f + a / 2 + 4))), _ > 0 && (C > 0 && v(t, 60 + h + _ / 2, f + a / 2, _ * .3, u.amber, .12 * C), t.fillStyle = m(u.amber, .18 + C * .18), t.strokeStyle = m(u.amber, .3 + C * .3), t.lineWidth = 1, t.beginPath(), t.roundRect(60 + h, f, _, a, [
 					0,
 					4,
 					4,
 					0
-				]), n.fill(), n.stroke(), y > 28 && l > .5 && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = C > 0 ? u.amber : m(u.t3, .8), n.textAlign = "center", n.fillText(String(t.unimplemented ?? 0), 60 + _ + y / 2, p + 26 / 2 + 4))), _ > 0 && y > 0 && (n.strokeStyle = m(u.bg, .7), n.lineWidth = 2, n.beginPath(), n.moveTo(60 + _, p), n.lineTo(60 + _, p + 26), n.stroke());
+				]), t.fill(), t.stroke(), _ > 28 && i > .5 && (t.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.fillStyle = C > 0 ? u.amber : u.t2, t.textAlign = "center", t.fillText(String(e.unimplemented ?? 0), 60 + h + _ / 2, f + a / 2 + 4))), h > 0 && _ > 0 && (t.strokeStyle = m(u.bg, .7), t.lineWidth = 2, t.beginPath(), t.moveTo(60 + h, f), t.lineTo(60 + h, f + a), t.stroke());
 			});
-			let _ = f + c + 24, b = 60 + a / 2;
-			n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.textAlign = "right", n.fillStyle = u.green, n.fillText("■ Implemented", b - 10, _), n.textAlign = "left", n.fillStyle = p.color, n.fillText("■ Unimplemented", b + 10, _), g = requestAnimationFrame(y);
+			let r = g + h + 24, i = 60 + s / 2;
+			t.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", t.textAlign = "right", t.fillStyle = u.green, t.fillText("■ Implemented", i - 10, r), t.textAlign = "left", t.fillStyle = p.color, t.fillText("■ Unimplemented", i + 10, r), S = requestAnimationFrame(C);
 		};
-		return y(), () => cancelAnimationFrame(g);
-	}, [e]), /* @__PURE__ */ c("div", {
+		return C(), () => cancelAnimationFrame(S);
+	}, [y, b]), /* @__PURE__ */ c("div", {
 		"data-testid": t,
-		style: {
-			position: "relative",
-			width: st,
-			height: ct
-		},
-		children: [/* @__PURE__ */ s("canvas", {
-			ref: r,
-			role: "img",
-			"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
+		style: { width: Ct },
+		children: [/* @__PURE__ */ c("div", {
 			style: {
-				width: st,
-				height: ct,
-				display: "block"
-			}
-		}), /* @__PURE__ */ s(S, {
-			...f,
-			parentW: st,
-			parentH: ct
+				position: "relative",
+				width: Ct,
+				height: b
+			},
+			children: [/* @__PURE__ */ s("canvas", {
+				ref: r,
+				role: "img",
+				"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
+				style: {
+					width: Ct,
+					height: b,
+					display: "block"
+				}
+			}), /* @__PURE__ */ s(S, {
+				...w,
+				parentW: Ct,
+				parentH: b
+			})]
+		}), e.length > wt && /* @__PURE__ */ s("div", {
+			style: { marginTop: 8 },
+			children: /* @__PURE__ */ s(ae, {
+				expanded: h,
+				onToggle: () => g((e) => !e)
+			})
 		})]
 	});
 }
 //#endregion
 //#region src/components/weeklyFlow/WeeklyFlow.tsx
-var ut = 800, dt = 360;
-function ft({ contractors: e = [], "data-testid": t }) {
+var At = 800, jt = 360;
+function Mt({ contractors: e = [], "data-testid": t }) {
 	let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: f, hitZonesRef: p } = C(r, {
-		width: ut,
-		height: dt
+		width: At,
+		height: jt
 	});
 	return n(() => {
 		let t = r.current;
 		if (!t) return;
-		let n = _(t, ut, dt);
+		let n = _(t, At, jt);
 		o.current = 0;
-		let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), f = dt - 20 - 26, h = f - 6 * (e.length - 1), g = 20, y = e.map((e, t) => {
+		let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), f = jt - 20 - 26, h = f - 6 * (e.length - 1), g = 20, y = e.map((e, t) => {
 			let n = Math.max(24, (e.total ?? 0) / (c || 1) * h), r = {
 				x: 100 - 110 / 2,
 				y: g,
@@ -2018,16 +2204,16 @@ function ft({ contractors: e = [], "data-testid": t }) {
 		}, k, A = () => {
 			o.current++;
 			let t = o.current;
-			n.clearRect(0, 0, ut, dt);
+			n.clearRect(0, 0, At, jt);
 			let r = E(Math.min(t / 80, 1));
 			if (M(i.current, l.current), p.current = [], e.forEach((t, o) => {
 				let c = y[o], l = j(r, o, e.length, E), u = i.current.get(t.id) ?? 0;
 				if (l < .01) return;
 				let d = (t.base ?? 0) / (t.total || 1), f = (t.variation ?? 0) / (t.total || 1), p = c.h * d, m = c.h * f, h = c.y + p / 2, g = c.y + p + m / 2, _ = Math.max(2, (t.base ?? 0) / a * x), v = Math.max(2, (t.variation ?? 0) / s * S), b = w.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * x, 0) + _ / 2, C = D.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * S, 0) + v / 2, T = u * .2 + .18;
-				pt(n, c.x + 110, h, 420 - 110 / 2, b, _ * l, c.color, T), pt(n, c.x + 110, g, 420 - 110 / 2, C, v * l, c.color, T * .75);
+				Nt(n, c.x + 110, h, 420 - 110 / 2, b, _ * l, c.color, T), Nt(n, c.x + 110, g, 420 - 110 / 2, C, v * l, c.color, T * .75);
 			}), r > .3) {
 				let e = Math.min(1, (r - .3) / .7), t = O.y + a / c * f / 2, i = O.y + f - s / c * f / 2;
-				pt(n, 475, w.cy, 720 - 110 / 2, t, x * e, u.blue, .25 * e), pt(n, 475, D.cy, 720 - 110 / 2, i, S * e, u.amber, .22 * e);
+				Nt(n, 475, w.cy, 720 - 110 / 2, t, x * e, u.blue, .25 * e), Nt(n, 475, D.cy, 720 - 110 / 2, i, S * e, u.amber, .22 * e);
 			}
 			if ([
 				"Contractors",
@@ -2039,7 +2225,7 @@ function ft({ contractors: e = [], "data-testid": t }) {
 					420,
 					720
 				][t];
-				n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(u.t3, .5), n.textAlign = "center", n.fillText(e, r, dt - 8);
+				n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(u.t3, .5), n.textAlign = "center", n.fillText(e, r, jt - 8);
 			}), e.forEach((t, a) => {
 				let o = y[a], s = j(r, a, e.length, E), c = i.current.get(t.id) ?? 0;
 				T(p.current, t.id, o.x, o.y, 110, o.h, {
@@ -2063,33 +2249,33 @@ function ft({ contractors: e = [], "data-testid": t }) {
 		"data-testid": t,
 		style: {
 			position: "relative",
-			width: ut,
-			height: dt
+			width: At,
+			height: jt
 		},
 		children: [/* @__PURE__ */ s("canvas", {
 			ref: r,
 			role: "img",
 			"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
 			style: {
-				width: ut,
-				height: dt,
+				width: At,
+				height: jt,
 				display: "block"
 			}
 		}), /* @__PURE__ */ s(S, {
 			...f,
-			parentW: ut,
-			parentH: dt
+			parentW: At,
+			parentH: jt
 		})]
 	});
 }
-function pt(e, t, n, r, i, a, o, s) {
+function Nt(e, t, n, r, i, a, o, s) {
 	let c = (t + r) / 2;
 	e.beginPath(), e.moveTo(t, n - a / 2), e.bezierCurveTo(c, n - a / 2, c, i - a / 2, r, i - a / 2), e.lineTo(r, i + a / 2), e.bezierCurveTo(c, i + a / 2, c, n + a / 2, t, n + a / 2), e.closePath(), e.fillStyle = m(o, s), e.fill();
 }
 //#endregion
 //#region src/components/visualizationRenderer/VisualizationRenderer.tsx
-function mt({ config: e, className: t }) {
-	return e.type === "line" ? /* @__PURE__ */ s(De, {
+function Pt({ config: e, className: t }) {
+	return e.type === "line" ? /* @__PURE__ */ s(Le, {
 		rows: e.rows,
 		className: t
 	}) : e.type === "area" ? /* @__PURE__ */ s(ne, {
@@ -2098,77 +2284,77 @@ function mt({ config: e, className: t }) {
 	}) : e.type === "bar" ? /* @__PURE__ */ s(ie, {
 		rows: e.rows,
 		className: t
-	}) : e.type === "pie" ? /* @__PURE__ */ s(Le, {
+	}) : e.type === "pie" ? /* @__PURE__ */ s(qe, {
 		rows: e.rows,
 		variant: "pie",
 		className: t
-	}) : e.type === "donut" ? /* @__PURE__ */ s(Le, {
+	}) : e.type === "donut" ? /* @__PURE__ */ s(qe, {
 		rows: e.rows,
 		variant: "donut",
 		className: t
-	}) : e.type === "sankey" ? /* @__PURE__ */ s(Je, {
+	}) : e.type === "sankey" ? /* @__PURE__ */ s(it, {
 		rows: e.rows,
 		className: t
-	}) : e.type === "flow" ? /* @__PURE__ */ s(qe, {
+	}) : e.type === "flow" ? /* @__PURE__ */ s(rt, {
 		selectedEntity: e.selectedEntity,
 		className: t
-	}) : e.type === "trend" ? /* @__PURE__ */ s(ot, {
+	}) : e.type === "trend" ? /* @__PURE__ */ s(St, {
 		points: e.points,
 		className: t
-	}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Ae, {
+	}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Be, {
 		rows: e.rows,
 		className: t
-	}) : e.type === "contract-value-orb" ? /* @__PURE__ */ s(be, { data: e.data }) : e.type === "contract-bars" ? /* @__PURE__ */ s(ge, { contractors: e.contractors }) : e.type === "commitment-race" ? /* @__PURE__ */ s(oe, { contractors: e.contractors }) : e.type === "status-arc" ? /* @__PURE__ */ s(it, {
+	}) : e.type === "contract-value-orb" ? /* @__PURE__ */ s(Ae, { data: e.data }) : e.type === "contract-bars" ? /* @__PURE__ */ s(Ce, { contractors: e.contractors }) : e.type === "commitment-race" ? /* @__PURE__ */ s(fe, { contractors: e.contractors }) : e.type === "status-arc" ? /* @__PURE__ */ s(xt, {
 		segments: e.segments,
 		title: e.title
-	}) : e.type === "ew-category" ? /* @__PURE__ */ s(Ee, { categories: e.categories }) : e.type === "contractor-rank" ? /* @__PURE__ */ s(Te, { contractors: e.contractors }) : e.type === "severity-bands" ? /* @__PURE__ */ s(nt, { severities: e.severities }) : e.type === "nce-tree" ? /* @__PURE__ */ s(Ne, {
+	}) : e.type === "ew-category" ? /* @__PURE__ */ s(Ie, { categories: e.categories }) : e.type === "contractor-rank" ? /* @__PURE__ */ s(Fe, { contractors: e.contractors }) : e.type === "severity-bands" ? /* @__PURE__ */ s(yt, { severities: e.severities }) : e.type === "nce-tree" ? /* @__PURE__ */ s(Ue, {
 		total: e.total,
 		byContractor: e.byContractor
-	}) : e.type === "compensation-gauge" ? /* @__PURE__ */ s(le, {
+	}) : e.type === "compensation-gauge" ? /* @__PURE__ */ s(he, {
 		pct: e.pct,
 		confirmed: e.confirmed,
 		total: e.total
-	}) : e.type === "variation-split" ? /* @__PURE__ */ s(lt, { contractors: e.contractors }) : e.type === "quotation-balance" ? /* @__PURE__ */ s(Ze, {
+	}) : e.type === "variation-split" ? /* @__PURE__ */ s(kt, { contractors: e.contractors }) : e.type === "quotation-balance" ? /* @__PURE__ */ s(st, {
 		accepted: e.accepted,
 		submitted: e.submitted
-	}) : e.type === "quotation-trend" ? /* @__PURE__ */ s($e, { trend: e.trend }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(ft, { contractors: e.contractors }) : /* @__PURE__ */ s("div", {
+	}) : e.type === "quotation-trend" ? /* @__PURE__ */ s(lt, { trend: e.trend }) : e.type === "trend-view" ? /* @__PURE__ */ s(gt, { trend: e.trend }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(Mt, { contractors: e.contractors }) : /* @__PURE__ */ s("div", {
 		className: "viz-empty",
 		children: "Visualization unavailable"
 	});
 }
 //#endregion
 //#region src/utils/mounts.tsx
-var ht = [];
-function gt(e) {
+var Ft = [];
+function It(e) {
 	try {
 		return JSON.parse(decodeURIComponent(e));
 	} catch {
 		return null;
 	}
 }
-function _t() {
-	for (; ht.length;) {
-		let e = ht.pop();
+function Lt() {
+	for (; Ft.length;) {
+		let e = Ft.pop();
 		e && e.unmount();
 	}
 }
-function vt() {
-	_t(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
+function Rt() {
+	Lt(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
 		let n = t.dataset.d3Viz;
 		if (!n) return;
-		let r = gt(n);
+		let r = It(n);
 		if (!r) return;
 		let i = e(t);
-		ht.push(i), i.render(/* @__PURE__ */ s(mt, { config: r }));
+		Ft.push(i), i.render(/* @__PURE__ */ s(Pt, { config: r }));
 	});
 }
-function yt(e) {
+function zt(e) {
 	return encodeURIComponent(JSON.stringify(e));
 }
 //#endregion
 //#region src/components/donutChart/DonutChart.tsx
-function bt({ rows: e = [], className: t, colors: n }) {
-	return /* @__PURE__ */ s(Le, {
+function Bt({ rows: e = [], className: t, colors: n }) {
+	return /* @__PURE__ */ s(qe, {
 		rows: e,
 		variant: "donut",
 		className: t,
@@ -2187,7 +2373,7 @@ var X = {
 	red: u.red,
 	amber: u.amber,
 	green: u.green
-}, Z = "'JetBrains Mono', monospace", Q = "'Satoshi Variable', 'DM Sans', sans-serif", xt = {
+}, Z = "'JetBrains Mono', monospace", Q = "'Satoshi Variable', 'DM Sans', sans-serif", Vt = {
 	color: "#F7F7F7",
 	fontFamily: Q,
 	fontSize: 24,
@@ -2200,7 +2386,7 @@ var X = {
 	fontWeight: 400,
 	lineHeight: "20px"
 };
-function St({ chips: e = [] }) {
+function Ht({ chips: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2209,18 +2395,20 @@ function St({ chips: e = [] }) {
 		},
 		children: e.map((e, t) => /* @__PURE__ */ c("div", {
 			style: {
-				flex: 1,
+				width: 260,
+				height: 120,
 				display: "flex",
 				alignItems: "baseline",
 				gap: 8,
 				padding: "8px 12px",
 				background: X.bg,
 				border: `1px solid ${X.border}`,
-				borderRadius: 5
+				borderRadius: 5,
+				boxSizing: "border-box"
 			},
 			children: [/* @__PURE__ */ s("span", {
 				style: {
-					...xt,
+					...Vt,
 					color: e.color ?? X.t1
 				},
 				children: e.value
@@ -2234,7 +2422,7 @@ function St({ chips: e = [] }) {
 		}, t))
 	});
 }
-function Ct({ items: e = [] }) {
+function Ut({ items: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2242,15 +2430,17 @@ function Ct({ items: e = [] }) {
 		},
 		children: e.map((e, t) => /* @__PURE__ */ c("div", {
 			style: {
-				flex: 1,
+				width: 260,
+				height: 120,
 				padding: "12px 16px",
 				border: `1px solid ${X.border}`,
 				background: X.bg,
-				textAlign: "left"
+				textAlign: "left",
+				boxSizing: "border-box"
 			},
 			children: [/* @__PURE__ */ s("div", {
 				style: {
-					...xt,
+					...Vt,
 					color: e.color ?? X.t1
 				},
 				children: e.value
@@ -2264,7 +2454,7 @@ function Ct({ items: e = [] }) {
 		}, t))
 	});
 }
-function wt({ items: e = [] }) {
+function Wt({ items: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2298,7 +2488,7 @@ function wt({ items: e = [] }) {
 				}),
 				/* @__PURE__ */ s("span", {
 					style: {
-						...xt,
+						...Vt,
 						color: e.color ?? X.t1,
 						minWidth: 70,
 						flexShrink: 0
@@ -2316,7 +2506,7 @@ function wt({ items: e = [] }) {
 		}, t))
 	});
 }
-function Tt({ items: e = [] }) {
+function Gt({ items: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2324,14 +2514,16 @@ function Tt({ items: e = [] }) {
 		},
 		children: e.map((e, t) => /* @__PURE__ */ c("div", {
 			style: {
-				flex: 1,
+				width: 260,
+				height: 120,
 				padding: "14px 16px",
 				background: X.bg,
-				border: `1px solid ${e.color ? e.color + "30" : X.border}`
+				border: `1px solid ${e.color ? e.color + "30" : X.border}`,
+				boxSizing: "border-box"
 			},
 			children: [/* @__PURE__ */ s("div", {
 				style: {
-					...xt,
+					...Vt,
 					color: e.color ?? X.t1
 				},
 				children: e.value
@@ -2345,12 +2537,12 @@ function Tt({ items: e = [] }) {
 		}, t))
 	});
 }
-var Et = {
+var Kt = {
 	red: X.red,
 	amber: X.amber,
 	green: X.green
 };
-function Dt({ items: e = [] }) {
+function qt({ items: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2358,17 +2550,15 @@ function Dt({ items: e = [] }) {
 			gap: 5
 		},
 		children: e.map((e, t) => {
-			let n = Et[e.severity];
+			let n = Kt[e.severity];
 			return /* @__PURE__ */ c("div", {
 				style: {
 					display: "flex",
 					alignItems: "flex-start",
 					gap: 10,
 					padding: "10px 14px",
-					background: n + "0C",
-					border: `1px solid ${n}28`,
-					borderLeft: `3px solid ${n}`,
-					borderRadius: 6
+					background: u.sf,
+					border: `1px solid ${X.border}`
 				},
 				children: [/* @__PURE__ */ s("span", { style: {
 					width: 7,
@@ -2385,7 +2575,7 @@ function Dt({ items: e = [] }) {
 		})
 	});
 }
-function Ot({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
+function Jt({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
 	let a = t - e;
 	return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
 		style: {
@@ -2495,9 +2685,9 @@ function Ot({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
 				}, r);
 			})
 		]
-	}), i && i.length > 0 && /* @__PURE__ */ s(St, { chips: i })] });
+	}), i && i.length > 0 && /* @__PURE__ */ s(Ht, { chips: i })] });
 }
-function kt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
+function Yt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
 	let f = r ?? u.blue, p = l ?? u.cyan;
 	return /* @__PURE__ */ c("div", { children: [
 		/* @__PURE__ */ c("div", {
@@ -2591,10 +2781,10 @@ function kt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
 				})
 			})]
 		}),
-		d && d.length > 0 && /* @__PURE__ */ s(St, { chips: d })
+		d && d.length > 0 && /* @__PURE__ */ s(Ht, { chips: d })
 	] });
 }
-function At({ pct: e, label: t, color: n, chips: r }) {
+function Xt({ pct: e, label: t, color: n, chips: r }) {
 	let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
 	return /* @__PURE__ */ c("div", {
 		style: {
@@ -2675,7 +2865,7 @@ function At({ pct: e, label: t, color: n, chips: r }) {
 					},
 					children: [/* @__PURE__ */ s("span", {
 						style: {
-							...xt,
+							...Vt,
 							color: e.color ?? X.t1
 						},
 						children: e.value
@@ -2688,16 +2878,16 @@ function At({ pct: e, label: t, color: n, chips: r }) {
 		})]
 	});
 }
-var jt = {
+var Zt = {
 	green: "#34D39918",
 	amber: "#FBBF2418",
 	red: "#F0606018"
-}, Mt = {
+}, Qt = {
 	green: "#34D399",
 	amber: "#FBBF24",
 	red: "#F06060"
 };
-function Nt({ items: e = [] }) {
+function $t({ items: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2711,9 +2901,7 @@ function Nt({ items: e = [] }) {
 				gap: 10,
 				padding: "8px 12px",
 				background: X.bg,
-				border: `1px solid ${X.border}`,
-				borderLeft: `3px solid ${e.color ?? X.t2}`,
-				borderRadius: 6
+				border: `1px solid ${X.border}`
 			},
 			children: [
 				/* @__PURE__ */ s("span", {
@@ -2763,8 +2951,8 @@ function Nt({ items: e = [] }) {
 					style: {
 						fontSize: 10,
 						fontWeight: 600,
-						color: Mt[e.badgeSeverity],
-						background: jt[e.badgeSeverity],
+						color: Qt[e.badgeSeverity],
+						background: Zt[e.badgeSeverity],
 						padding: "2px 7px",
 						borderRadius: 4,
 						fontFamily: Q,
@@ -2787,12 +2975,12 @@ function Nt({ items: e = [] }) {
 		}, t))
 	});
 }
-var Pt = {
+var en = {
 	red: X.red,
 	amber: X.amber,
 	green: X.green
 };
-function Ft({ items: e = [] }) {
+function tn({ items: e = [] }) {
 	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
@@ -2800,7 +2988,7 @@ function Ft({ items: e = [] }) {
 			gap: 5
 		},
 		children: e.map((e, t) => {
-			let n = Pt[e.severity];
+			let n = en[e.severity];
 			return /* @__PURE__ */ c("div", {
 				style: {
 					display: "flex",
@@ -2854,7 +3042,7 @@ function Ft({ items: e = [] }) {
 		})
 	});
 }
-function It({ columns: e = [], rows: t = [] }) {
+function nn({ columns: e = [], rows: t = [] }) {
 	return /* @__PURE__ */ c("div", {
 		style: {
 			display: "flex",
@@ -2874,7 +3062,7 @@ function It({ columns: e = [], rows: t = [] }) {
 					flex: 1,
 					fontSize: 9,
 					fontWeight: 600,
-					color: X.t4,
+					color: X.t2,
 					fontFamily: Q,
 					textTransform: "uppercase",
 					letterSpacing: .6
@@ -2888,15 +3076,13 @@ function It({ columns: e = [], rows: t = [] }) {
 				gap: 10,
 				padding: "8px 12px",
 				background: X.bg,
-				border: `1px solid ${X.border}`,
-				borderLeft: `3px solid ${e.color ?? X.t4}`,
-				borderRadius: 6
+				border: `1px solid ${X.border}`
 			},
 			children: [/* @__PURE__ */ s("span", {
 				style: {
 					fontSize: 11,
 					fontWeight: 600,
-					color: e.color ?? X.t2,
+					color: X.t2,
 					background: (e.color ?? X.t4) + "1A",
 					padding: "2px 8px",
 					borderRadius: 4,
@@ -2919,10 +3105,9 @@ function It({ columns: e = [], rows: t = [] }) {
 		}, t))]
 	});
 }
-function Lt({ text: e }) {
+function rn({ text: e }) {
 	return /* @__PURE__ */ c("div", {
 		style: {
-			marginTop: 10,
 			padding: "8px 12px",
 			border: `1px solid ${u.bd}`,
 			borderLeft: "4px solid #FFAE43",
@@ -2945,22 +3130,22 @@ function Lt({ text: e }) {
 		})]
 	});
 }
-function Rt({ block: e }) {
+function an({ block: e }) {
 	if (!e) return null;
 	let t = (() => {
 		switch (e.type) {
-			case "stats": return /* @__PURE__ */ s(Ct, { items: e.items });
-			case "ranked": return /* @__PURE__ */ s(wt, { items: e.items });
-			case "chips": return /* @__PURE__ */ s(Tt, { items: e.items });
-			case "badges": return /* @__PURE__ */ s(Dt, { items: e.items });
-			case "dot-strip": return /* @__PURE__ */ s(Ot, {
+			case "stats": return /* @__PURE__ */ s(Ut, { items: e.items });
+			case "ranked": return /* @__PURE__ */ s(Wt, { items: e.items });
+			case "chips": return /* @__PURE__ */ s(Gt, { items: e.items });
+			case "badges": return /* @__PURE__ */ s(qt, { items: e.items });
+			case "dot-strip": return /* @__PURE__ */ s(Jt, {
 				min: e.min,
 				max: e.max,
 				unit: e.unit,
 				dots: e.dots,
 				chips: e.chips
 			});
-			case "proportion": return /* @__PURE__ */ s(kt, {
+			case "proportion": return /* @__PURE__ */ s(Yt, {
 				leftPct: e.leftPct,
 				leftLabel: e.leftLabel,
 				leftValue: e.leftValue,
@@ -2971,22 +3156,29 @@ function Rt({ block: e }) {
 				rightColor: e.rightColor,
 				chips: e.chips
 			});
-			case "ring": return /* @__PURE__ */ s(At, {
+			case "ring": return /* @__PURE__ */ s(Xt, {
 				pct: e.pct,
 				label: e.label,
 				color: e.color,
 				chips: e.chips
 			});
-			case "scorecard-rows": return /* @__PURE__ */ s(Nt, { items: e.items });
-			case "flags-list": return /* @__PURE__ */ s(Ft, { items: e.items });
-			case "comparison-rows": return /* @__PURE__ */ s(It, {
+			case "scorecard-rows": return /* @__PURE__ */ s($t, { items: e.items });
+			case "flags-list": return /* @__PURE__ */ s(tn, { items: e.items });
+			case "comparison-rows": return /* @__PURE__ */ s(nn, {
 				columns: e.columns,
 				rows: e.rows
 			});
 			default: return null;
 		}
 	})();
-	return e.takeaway ? /* @__PURE__ */ c("div", { children: [t, /* @__PURE__ */ s(Lt, { text: e.takeaway })] }) : t;
+	return e.takeaway ? /* @__PURE__ */ c("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 24
+		},
+		children: [t, /* @__PURE__ */ s(rn, { text: e.takeaway })]
+	}) : t;
 }
 //#endregion
-export { ne as AreaChart, ie as BarChart, l as ChartFrame, bt as DonutChart, Rt as KeyHighlights, De as LineChart, Ae as MiniBars, Le as PieChart, qe as ProcessSankey, Je as RankingSankey, ze as SankeySvg, te as SeriesChart, ot as TrendChart, mt as VisualizationRenderer, _t as cleanupVisualizationMounts, vt as hydrateVisualizationMounts, yt as serializeVisualizationConfig };
+export { ne as AreaChart, ie as BarChart, l as ChartFrame, Bt as DonutChart, an as KeyHighlights, Le as LineChart, Be as MiniBars, qe as PieChart, rt as ProcessSankey, it as RankingSankey, Ye as SankeySvg, te as SeriesChart, gt as Trend, St as TrendChart, Pt as VisualizationRenderer, Lt as cleanupVisualizationMounts, Rt as hydrateVisualizationMounts, zt as serializeVisualizationConfig };