@loadmap/react 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2070 @@
+import { compare, headroom, reach } from "@loadmap/core";
+import { fitLinear } from "@loadmap/core/calibrate";
+import { compact, compact as compact$1, fmt, fmt as fmt$1, monthOf, multiple, multiple as multiple$1, multiples, pct, pct as pct$1, secs, secs as secs$1 } from "@loadmap/core/format";
+import { anchor, cluster, defineView, edge, labelsAt, layout, legPath, localElk, node, pointAt, pool, structureKey } from "@loadmap/layout";
+import { memo, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createSim } from "@loadmap/sim";
+export * from "@loadmap/core";
+// src/scenarios.tsx
+/** Scenario identity colours, in declaration order; a fifth and later scenario is drawn muted. */
+const SERIES = [
+	"var(--lm-s1)",
+	"var(--lm-s2)",
+	"var(--lm-s3)",
+	"var(--lm-s4)"
+];
+/** The colour of a scenario by label; values of the reader's own are drawn in the text colour. */
+function scenarioColor(model, label) {
+	if (label == null) return "var(--lm-fg)";
+	const i = model.scenarios.findIndex((s) => s.label === label);
+	return SERIES[i] ?? "var(--lm-muted)";
+}
+const lineName = (l) => l.label ?? "These values";
+/** A month for a table cell or an axis: "Mar 2031"; "now" for a crossing already reached. */
+function when(model, x) {
+	const d = model.dateAt(x);
+	return d ? monthOf(d, true) : x != null && x <= 1 && model.growth ? "now" : "";
+}
+/** The months of both edges: "Sep 2029–Feb 2030", or one month when they agree. */
+function whenRange(model, r) {
+	if (!r) return "";
+	const [lo, hi] = [when(model, r.low), when(model, r.high)];
+	return !hi || lo === hi ? lo : `${lo}–${hi}`;
+}
+/** The comparison at the shown load: crossings do not depend on it, the verdicts do. */
+function useComparison(lm) {
+	return useMemo(() => compare(lm.model, lm.values.load), [lm.model, lm.values.load]);
+}
+/** One button per scenario: a reader switches designs without touching the controls. The load stays. */
+function Scenarios({ lm }) {
+	const { model } = lm;
+	if (!model.scenarios.length) return null;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "lm-scenarios",
+		children: [
+			/* @__PURE__ */ jsx("legend", { children: "Scenario" }),
+			model.scenarios.map((s) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-pressed": lm.scenario?.label === s.label,
+				onClick: () => lm.setScenario(s.label),
+				children: [/* @__PURE__ */ jsx("i", { style: { background: scenarioColor(model, s.label) } }), s.label]
+			}, s.label)),
+			!lm.scenario && /* @__PURE__ */ jsx("span", {
+				className: "lm-own",
+				children: "your own values"
+			})
+		]
+	});
+}
+/** "+107 %" against the baseline; "same" within a rounding; nothing where either never runs out. */
+function change(x) {
+	if (x == null || !Number.isFinite(x) || x === 0) return "";
+	if (Math.abs(x - 1) < .005) return "same";
+	return `${x > 1 ? "+" : "−"}${pct$1(Math.abs(x - 1))}`;
+}
+/** The scenarios side by side: which buys more headroom, where each first runs out, and per component. */
+function Compare({ lm, title = "Scenarios compared" }) {
+	const { model } = lm;
+	const c = useComparison(lm);
+	if (c.rows.length < 2) return null;
+	const target = `${pct$1(model.thresholds.target)} target`;
+	const at = (r) => /* @__PURE__ */ jsxs(Fragment, { children: [r ? multiples(r, model.searchMax, true) : multiple$1(null), whenRange(model, r) && /* @__PURE__ */ jsx("small", { children: whenRange(model, r) })] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm-card lm-compare",
+		children: [
+			/* @__PURE__ */ jsx("h3", { children: title }),
+			/* @__PURE__ */ jsx("p", {
+				className: "lm-compare-text",
+				children: c.text
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lm-table-wrap",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "lm-table",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Scenario"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "First limit"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: target
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Runs out"
+						})
+					] }) }), /* @__PURE__ */ jsx("tbody", { children: c.rows.map((r) => /* @__PURE__ */ jsxs("tr", {
+						"data-scenario": r.label,
+						"aria-current": lm.scenario?.label === r.label || void 0,
+						children: [
+							/* @__PURE__ */ jsxs("th", {
+								scope: "row",
+								children: [/* @__PURE__ */ jsx("i", { style: { background: scenarioColor(model, r.label) } }), r.label]
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "lm-text",
+								children: r.firstLimit?.name ?? "—"
+							}),
+							/* @__PURE__ */ jsx("td", {
+								"data-multiple": r.target ?? "",
+								"data-high": r.targetRange?.high ?? "",
+								children: at(r.targetRange)
+							}),
+							/* @__PURE__ */ jsx("td", {
+								"data-multiple": r.full ?? "",
+								"data-high": r.fullRange?.high ?? "",
+								children: at(r.fullRange)
+							})
+						]
+					}, r.label)) })]
+				})
+			}),
+			/* @__PURE__ */ jsxs("h3", { children: [target, ", by component"] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "lm-table-wrap",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "lm-table",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "Component"
+					}), c.rows.map((r) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: r.label
+					}, r.label))] }) }), /* @__PURE__ */ jsx("tbody", { children: model.componentIds.map((id, k) => /* @__PURE__ */ jsxs("tr", {
+						"data-component": id,
+						children: [/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: c.rows[0].components[k].name
+						}), c.rows.map((r, i) => {
+							const x = r.components[k];
+							return /* @__PURE__ */ jsxs("td", {
+								"data-multiple": x.target ?? "",
+								children: [x.targetRange == null ? "off" : multiples(x.targetRange, model.searchMax, true), i > 0 && change(x.change) && /* @__PURE__ */ jsx("small", { children: change(x.change) })]
+							}, r.label);
+						})]
+					}, id)) })]
+				})
+			})
+		]
+	});
+}
+/** The width of an element in CSS pixels, kept current: the chart draws at its own size so text stays legible. */
+function useWidth(fallback) {
+	const ref = useRef(null);
+	const [w, setW] = useState(fallback);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const ro = new ResizeObserver(([e]) => {
+			const x = Math.round(e?.contentRect.width ?? el.clientWidth);
+			if (x > 0) setW(x);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	return [ref, w];
+}
+/** 1, 2, 5, 10, 20, 50, … inside [from, to]; decades only when there is little room. */
+function ticks(from, to, roomy) {
+	const out = [];
+	for (let d = Math.floor(Math.log10(from)); d <= Math.ceil(Math.log10(to)); d++) for (const k of roomy ? [
+		1,
+		2,
+		5
+	] : [1]) {
+		const v = k * 10 ** d;
+		if (v >= from * .999 && v <= to * 1.001) out.push(Number(v.toPrecision(6)));
+	}
+	return out;
+}
+/**
+* Utilization over the load multiple. Each scenario's line is its highest utilization, so it crosses the target and
+* 100 % exactly where its first limit does; the dots are those crossings, taken from the limits, not from the line.
+* With a ± on a capacity, a band shows the line at every capacity's low and high bound, and a bracket on the target
+* and 100 % lines spans where the band crosses them. The shown scenario's components are the thin lines under it.
+* Hover or arrow keys read every line at one load.
+*/
+function HeadroomChart({ lm, title = "Headroom" }) {
+	const { model, values } = lm;
+	const rest = JSON.stringify({
+		...values,
+		load: null
+	});
+	const h = useMemo(() => headroom(model, {
+		...values,
+		load: model.load.default
+	}), [model, rest]);
+	const [wrap, width] = useWidth(640);
+	const [hover, setHover] = useState(null);
+	const clip = useId().replace(/:/g, "");
+	const dated = !!model.growth;
+	const m = {
+		l: 44,
+		r: 14,
+		t: 14,
+		b: dated ? 40 : 26
+	};
+	const W = width;
+	const H = Math.round(Math.min(300, Math.max(200, W * .45)));
+	const pw = W - m.l - m.r;
+	const ph = H - m.t - m.b;
+	const top = Math.max(1.5, model.thresholds.full * 1.5);
+	const lx = (x) => m.l + pw * Math.log(x / h.from) / Math.log(h.to / h.from);
+	const ly = (u) => m.t + ph * (1 - Math.min(u, top * 1.05) / top);
+	const path = (s) => {
+		let d = "";
+		let pen = false;
+		for (const [x, u] of s) {
+			if (u == null) {
+				pen = false;
+				continue;
+			}
+			d += `${pen ? "L" : "M"}${lx(x).toFixed(1)} ${ly(u).toFixed(1)}`;
+			pen = true;
+		}
+		return d;
+	};
+	const xs = h.lines[0]?.envelope.map(([x]) => x) ?? [];
+	const selected = h.lines.find((l) => l.selected);
+	const roomy = W >= 480;
+	const tickList = ticks(h.from, h.to, roomy);
+	const labelled = (x) => roomy || Number.isInteger(Math.log10(x));
+	const near = (px) => {
+		let best = 0;
+		for (let i = 1; i < xs.length; i++) if (Math.abs(lx(xs[i]) - px) < Math.abs(lx(xs[best]) - px)) best = i;
+		return best;
+	};
+	const onMove = (e) => {
+		const r = e.currentTarget.ownerSVGElement.getBoundingClientRect();
+		setHover(near(e.clientX - r.left));
+	};
+	const onKey = (e) => {
+		const i = hover ?? near(lx(Math.min(h.to, Math.max(h.from, values.load))));
+		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			setHover(Math.max(0, Math.min(xs.length - 1, i + (e.key === "ArrowRight" ? 1 : -1))));
+		} else if (e.key === "Escape") setHover(null);
+	};
+	const area = (b) => {
+		const both = b.upper.flatMap(([x, u], i) => {
+			const v = b.lower[i][1];
+			return u == null || v == null ? [] : [[
+				x,
+				u,
+				v
+			]];
+		});
+		if (both.length < 2) return "";
+		const up = both.map(([x, u]) => `${lx(x).toFixed(1)} ${ly(u).toFixed(1)}`);
+		const down = both.map(([x, , v]) => `${lx(x).toFixed(1)} ${ly(v).toFixed(1)}`).reverse();
+		return `M${up.join("L")}L${down.join("L")}Z`;
+	};
+	const reaches = (r, x) => r && l0(r) ? multiples(r, model.searchMax) : multiple$1(x, model.searchMax);
+	const l0 = (r) => multiple$1(r.low, model.searchMax) !== multiple$1(r.high, model.searchMax);
+	const summary = h.lines.map((l) => `${lineName(l)} reaches the ${pct$1(model.thresholds.target)} target at ${reaches(l.targetRange, l.target)} and ${pct$1(model.thresholds.full)} at ${reaches(l.fullRange, l.full)}`).join("; ");
+	const loadX = lx(Math.min(h.to, Math.max(h.from, values.load)));
+	const hx = hover == null ? null : xs[hover];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm-card lm-headroom",
+		children: [
+			/* @__PURE__ */ jsx("h3", { children: title }),
+			h.lines.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: "lm-legend",
+				children: [h.lines.map((l) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("b", {
+					className: "lm-key",
+					style: { background: scenarioColor(model, l.label) }
+				}), lineName(l)] }, lineName(l))), selected && /* @__PURE__ */ jsxs("span", { children: ["thin lines: each component of ", lineName(selected)] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lm-chart",
+				ref: wrap,
+				role: "slider",
+				"aria-label": `Utilization over the load multiple. ${summary}.`,
+				"aria-valuemin": h.from,
+				"aria-valuemax": h.to,
+				"aria-valuenow": hx ?? values.load,
+				"aria-valuetext": hx == null ? `${fmt$1(values.load)}×` : `${fmt$1(hx)}×: ${h.lines.map((l) => `${lineName(l)} ${l.envelope[hover][1] == null ? "off" : pct$1(l.envelope[hover][1])}`).join(", ")}`,
+				tabIndex: 0,
+				onKeyDown: onKey,
+				onBlur: () => setHover(null),
+				children: [/* @__PURE__ */ jsxs("svg", {
+					width: W,
+					height: H,
+					viewBox: `0 0 ${W} ${H}`,
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+							id: clip,
+							children: /* @__PURE__ */ jsx("rect", {
+								x: m.l,
+								y: m.t - 4,
+								width: pw,
+								height: ph + 4
+							})
+						}) }),
+						[
+							0,
+							model.thresholds.target,
+							model.thresholds.full
+						].map((u) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+							x1: m.l,
+							x2: W - m.r,
+							y1: ly(u),
+							y2: ly(u),
+							stroke: "var(--lm-line)"
+						}), /* @__PURE__ */ jsx("text", {
+							x: m.l - 6,
+							y: ly(u) + 4,
+							textAnchor: "end",
+							className: "lm-axis",
+							children: pct$1(u)
+						})] }, u)),
+						/* @__PURE__ */ jsx("text", {
+							x: W - m.r,
+							y: ly(model.thresholds.target) - 5,
+							textAnchor: "end",
+							className: "lm-axis",
+							children: "target"
+						}),
+						tickList.map((x) => /* @__PURE__ */ jsxs("g", {
+							className: "lm-axis",
+							children: [/* @__PURE__ */ jsx("line", {
+								x1: lx(x),
+								x2: lx(x),
+								y1: m.t + ph,
+								y2: m.t + ph + 4,
+								stroke: "var(--lm-line)"
+							}), labelled(x) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("text", {
+								x: lx(x),
+								y: m.t + ph + 16,
+								textAnchor: "middle",
+								children: [fmt$1(x), "×"]
+							}), dated && x > 1 && /* @__PURE__ */ jsx("text", {
+								x: lx(x),
+								y: m.t + ph + 30,
+								textAnchor: "middle",
+								children: when(model, x)
+							})] })]
+						}, x)),
+						/* @__PURE__ */ jsxs("g", {
+							clipPath: `url(#${clip})`,
+							children: [
+								[...h.lines].sort((a, b) => Number(a.selected) - Number(b.selected)).map((l) => l.band ? /* @__PURE__ */ jsx("path", {
+									"data-band": lineName(l),
+									d: area(l.band),
+									fill: scenarioColor(model, l.label),
+									fillOpacity: l.selected ? .2 : .08
+								}, lineName(l)) : null),
+								selected?.components.map((c) => /* @__PURE__ */ jsx("path", {
+									d: path(c.points),
+									fill: "none",
+									stroke: "var(--lm-muted)",
+									strokeOpacity: ".55",
+									strokeWidth: "1"
+								}, c.id)),
+								[...h.lines].sort((a, b) => Number(a.selected) - Number(b.selected)).map((l) => /* @__PURE__ */ jsx("path", {
+									"data-line": lineName(l),
+									d: path(l.envelope),
+									fill: "none",
+									stroke: scenarioColor(model, l.label),
+									strokeWidth: "2",
+									strokeLinejoin: "round",
+									strokeLinecap: "round"
+								}, lineName(l)))
+							]
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: loadX,
+							x2: loadX,
+							y1: m.t,
+							y2: m.t + ph,
+							stroke: "var(--lm-fg)",
+							strokeOpacity: ".45"
+						}),
+						/* @__PURE__ */ jsxs("text", {
+							x: loadX + 4,
+							y: m.t + 10,
+							className: "lm-axis",
+							children: [
+								"shown: ",
+								fmt$1(values.load),
+								"×"
+							]
+						}),
+						h.lines.flatMap((l) => [[
+							"target",
+							l.targetRange,
+							model.thresholds.target
+						], [
+							"full",
+							l.fullRange,
+							model.thresholds.full
+						]].map(([kind, r, u]) => {
+							if (!l.band || !r || !Number.isFinite(r.low) || r.low > h.to) return null;
+							const [x1, x2] = [lx(Math.max(h.from, r.low)), lx(Math.min(h.to, r.high))];
+							const y = ly(u);
+							return /* @__PURE__ */ jsxs("g", {
+								"data-range": kind,
+								"data-scenario": lineName(l),
+								"data-low": r.low,
+								"data-high": r.high,
+								stroke: scenarioColor(model, l.label),
+								strokeWidth: l.selected ? 3 : 2,
+								strokeOpacity: l.selected ? 1 : .6,
+								children: [
+									/* @__PURE__ */ jsx("line", {
+										x1,
+										x2,
+										y1: y,
+										y2: y
+									}),
+									/* @__PURE__ */ jsx("line", {
+										x1,
+										x2: x1,
+										y1: y - 5,
+										y2: y + 5
+									}),
+									Number.isFinite(r.high) && r.high <= h.to && /* @__PURE__ */ jsx("line", {
+										x1: x2,
+										x2,
+										y1: y - 5,
+										y2: y + 5
+									})
+								]
+							}, `${lineName(l)}/${kind}/range`);
+						})),
+						h.lines.flatMap((l) => [[
+							"target",
+							l.target,
+							l.targetRange,
+							model.thresholds.target
+						], [
+							"full",
+							l.full,
+							l.fullRange,
+							model.thresholds.full
+						]].map(([kind, x, r, u]) => x != null && Number.isFinite(x) && x >= h.from && x <= h.to ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+							"data-crossing": kind,
+							"data-scenario": lineName(l),
+							"data-multiple": x,
+							cx: lx(x),
+							cy: ly(u),
+							r: "4",
+							fill: scenarioColor(model, l.label),
+							stroke: "var(--lm-surface)",
+							strokeWidth: "2"
+						}), l.selected && /* @__PURE__ */ jsx("text", {
+							x: lx(r && l0(r) ? Math.max(h.from, r.low) : x) - 6,
+							y: ly(u) - 8,
+							textAnchor: "end",
+							className: "lm-mark",
+							children: r && l0(r) ? multiples(r, model.searchMax, true) : multiple$1(x, model.searchMax)
+						})] }, `${lineName(l)}/${kind}`) : null)),
+						hx != null && /* @__PURE__ */ jsx("line", {
+							x1: lx(hx),
+							x2: lx(hx),
+							y1: m.t,
+							y2: m.t + ph,
+							stroke: "var(--lm-fg)",
+							strokeOpacity: ".8"
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: m.l,
+							y: m.t,
+							width: pw,
+							height: ph,
+							fill: "transparent",
+							onPointerMove: onMove,
+							onPointerDown: onMove,
+							onPointerLeave: () => setHover(null)
+						})
+					]
+				}), hover != null && hx != null && /* @__PURE__ */ jsxs("div", {
+					className: "lm-tip",
+					role: "status",
+					style: {
+						left: Math.min(lx(hx) + 10, W - 200),
+						top: m.t
+					},
+					children: [
+						/* @__PURE__ */ jsxs("b", { children: [
+							fmt$1(hx),
+							"×",
+							when(model, hx) && ` · ${when(model, hx)}`
+						] }),
+						h.lines.map((l) => /* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx("b", {
+								className: "lm-key",
+								style: { background: scenarioColor(model, l.label) }
+							}),
+							/* @__PURE__ */ jsx("strong", { children: l.envelope[hover][1] == null ? "off" : pct$1(l.envelope[hover][1]) }),
+							" ",
+							lineName(l)
+						] }, lineName(l))),
+						selected?.components.map((c) => /* @__PURE__ */ jsxs("span", {
+							className: "lm-sub",
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: c.points[hover][1] == null ? "off" : pct$1(c.points[hover][1]) }),
+								" ",
+								c.name
+							]
+						}, c.id))
+					]
+				})]
+			})
+		]
+	});
+}
+// src/Diagram.tsx
+const STATE_STROKE = {
+	off: "var(--lm-line)",
+	ok: "var(--lm-ok)",
+	warn: "var(--lm-warn)",
+	over: "var(--lm-drop)"
+};
+const tokenColor = (c) => [
+	"accent",
+	"alt",
+	"ok",
+	"warn",
+	"drop",
+	"muted"
+].includes(c) ? `var(--lm-${c})` : c;
+/** The architecture: SVG for the structure, a canvas on top for the dots. Expands to full screen. */
+function Diagram({ lm, legend = true }) {
+	const { scene, engine, reducedMotion } = lm;
+	const svgRef = useRef(null);
+	const canvasRef = useRef(null);
+	const wrapRef = useRef(null);
+	const boardRef = useRef(null);
+	const [full, setFull] = useState(false);
+	const [tip, setTip] = useState(null);
+	const detailId = useId();
+	useEffect(() => {
+		if (scene) engine.setScene(scene);
+		engine.bind(svgRef.current, canvasRef.current);
+		if (lm.root) engine.readColors(lm.root);
+	}, [
+		engine,
+		scene,
+		reducedMotion,
+		lm.root
+	]);
+	useEffect(() => {
+		engine.drawnValues = JSON.stringify(lm.values);
+		engine.drawnFocus = lm.focus;
+	});
+	useEffect(() => {
+		const board = boardRef.current;
+		if (!board) return;
+		const ro = new ResizeObserver(() => engine.resize());
+		ro.observe(board);
+		return () => ro.disconnect();
+	}, [engine]);
+	useEffect(() => {
+		let raf = 0;
+		let last = 0;
+		const frame = (ts) => {
+			const dt = last ? Math.min(.05, (ts - last) / 1e3) : 0;
+			last = ts;
+			if (!engine.paused && engine.scene) {
+				engine.step(dt, { particles: !reducedMotion });
+				engine.draw({ particles: !reducedMotion });
+			}
+			raf = requestAnimationFrame(frame);
+		};
+		raf = requestAnimationFrame(frame);
+		return () => cancelAnimationFrame(raf);
+	}, [engine, reducedMotion]);
+	useEffect(() => {
+		const f = () => setFull(document.fullscreenElement === wrapRef.current);
+		document.addEventListener("fullscreenchange", f);
+		return () => document.removeEventListener("fullscreenchange", f);
+	}, []);
+	const toggle = () => {
+		if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
+		else wrapRef.current?.requestFullscreen?.().catch(() => {});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm-wrap",
+		ref: wrapRef,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "lm-bar",
+				children: [legend ? /* @__PURE__ */ jsx(Legend, { lm }) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lm-btn",
+					onClick: toggle,
+					"aria-pressed": full,
+					children: full ? "✕ Close" : "⤢ Full screen"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lm-board",
+				ref: boardRef,
+				style: scene ? { aspectRatio: `${scene.width} / ${scene.height}` } : { minHeight: 240 },
+				children: [scene && /* @__PURE__ */ jsx(Structure, {
+					lm,
+					scene,
+					svgRef,
+					rates: reducedMotion,
+					setTip
+				}), /* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					hidden: reducedMotion
+				})]
+			}),
+			scene && tip && /* @__PURE__ */ jsx(Detail, {
+				lm,
+				scene,
+				id: tip.id,
+				board: boardRef.current,
+				detailId
+			})
+		]
+	});
+}
+function Legend({ lm }) {
+	const flows = lm.view.def.flows;
+	const grey = Object.values(lm.ev.overload).some((o) => o.merge) || Object.values(lm.ev.stages).some((s) => s.kind === "fanout");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm-legend",
+		children: [
+			Object.entries(flows).map(([f, v]) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { style: { background: tokenColor(v.color) } }), v.label ?? f] }, f)),
+			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { style: { background: "var(--lm-ok)" } }), "done"] }),
+			/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { style: { background: "var(--lm-drop)" } }), "dropped or rejected"] }),
+			grey && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { style: { background: "var(--lm-muted)" } }), "superseded or unread"] }),
+			/* @__PURE__ */ jsx("span", { children: lm.reducedMotion ? "line width: rate" : `one dot ≈ ${lm.engine.sim.dotScale.toLocaleString("en-US")} a second · ${lm.engine.sim.speed}× speed` })
+		]
+	});
+}
+/** The component a box stands for: its stages' component, or its own. */
+function componentOf(lm, n) {
+	return n.stages.map((s) => lm.ev.stages[s]?.component).find(Boolean) ?? n.component ?? void 0;
+}
+/** The SVG. It does not read the detail's state, so a hover re-renders the detail, not every box and edge. */
+const Structure = memo(function Structure({ lm, scene, svgRef, rates, setTip }) {
+	const marker = useId().replace(/:/g, "");
+	const { labels, ev } = lm;
+	const stateOf = (n) => {
+		const c = componentOf(lm, n);
+		return c ? ev.components[c]?.state ?? null : null;
+	};
+	const handlers = (n) => {
+		const cid = componentOf(lm, n);
+		const c = cid ? ev.components[cid] : void 0;
+		if (!c) return {};
+		const title = labels.nodes[n.id]?.title;
+		return {
+			tabIndex: 0,
+			role: "button",
+			className: "lm-node",
+			"aria-label": `${title && title !== c.name ? `${title}, ` : ""}${c.name}: ${c.util == null ? "switched off" : pct$1(c.util)}`,
+			onPointerEnter: (e) => e.pointerType === "mouse" && setTip((t) => t?.pinned ? t : {
+				id: n.id,
+				pinned: false
+			}),
+			onPointerLeave: (e) => e.pointerType === "mouse" && setTip((t) => t?.pinned ? t : null),
+			onFocus: () => setTip((t) => t?.pinned ? t : {
+				id: n.id,
+				pinned: false
+			}),
+			onBlur: () => setTip((t) => t?.pinned ? t : null),
+			onClick: () => setTip((t) => t?.pinned && t.id === n.id ? null : {
+				id: n.id,
+				pinned: true
+			}),
+			onKeyDown: (e) => {
+				if (e.key === "Escape") setTip(null);
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					setTip((t) => t?.pinned && t.id === n.id ? null : {
+						id: n.id,
+						pinned: true
+					});
+				}
+			}
+		};
+	};
+	const summary = scene.nodes.map((n) => labels.nodes[n.id]?.title).join(", ");
+	return /* @__PURE__ */ jsxs("svg", {
+		ref: svgRef,
+		viewBox: `0 0 ${scene.width} ${scene.height}`,
+		role: "group",
+		"aria-label": `Diagram: ${summary}`,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+				id: marker,
+				viewBox: "0 0 10 10",
+				refX: "9",
+				refY: "5",
+				markerWidth: "7",
+				markerHeight: "7",
+				orient: "auto-start-reverse",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M0 0 L10 5 L0 10 z",
+					fill: "var(--lm-muted)"
+				})
+			}) }),
+			rates && /* @__PURE__ */ jsx(RateStrokes, {
+				lm,
+				scene
+			}),
+			scene.edges.map((e) => /* @__PURE__ */ jsx(Edge, {
+				e,
+				text: labels.edges[e.id],
+				marker
+			}, e.id)),
+			scene.nodes.map((n) => /* @__PURE__ */ jsx(Node, {
+				n,
+				state: stateOf(n),
+				title: labels.nodes[n.id]?.title,
+				sub: labels.nodes[n.id]?.sub,
+				lm,
+				focused: !!lm.focus && componentOf(lm, n) === lm.focus,
+				handlers: handlers(n)
+			}, n.id))
+		]
+	});
+});
+const pathOf = (pts) => pts.map(([x, y], i) => `${i ? "L" : "M"}${x} ${y}`).join(" ");
+function Edge({ e, text, marker }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+		d: pathOf(e.points),
+		fill: "none",
+		stroke: "var(--lm-muted)",
+		strokeOpacity: ".7",
+		markerEnd: `url(#${marker})`
+	}), e.label && text && /* @__PURE__ */ jsx("text", {
+		x: e.label.x + e.label.w / 2,
+		y: e.label.y + e.label.h / 2 + 4,
+		textAnchor: "middle",
+		fontSize: "11",
+		fill: "var(--lm-muted)",
+		children: text
+	})] });
+}
+/** With reduced motion, each flow is a static stroke along its edges, its width scaled by its rate. */
+function RateStrokes({ lm, scene }) {
+	const { ev } = lm;
+	const flows = lm.view.def.flows;
+	const max = Math.max(1e-9, ...Object.values(ev.flows));
+	const out = [];
+	for (const f of Object.keys(flows)) {
+		const seq = [scene.flowFrom[f], ...(ev.routes[f] ?? []).map((s) => scene.stageNode[s])].filter((n, i, a) => n && n !== a[i - 1]);
+		const rate = ev.flows[f] ?? 0;
+		const legs = seq.slice(1).map((to, i) => [
+			seq[i],
+			to,
+			rate
+		]);
+		const last = (ev.routes[f] ?? []).at(-1);
+		const st = last ? ev.stages[last] : void 0;
+		if (st?.kind === "fanout") for (const b of st.to[f] ?? []) legs.push([
+			scene.stageNode[last],
+			scene.stageNode[b.stage],
+			rate * b.share
+		]);
+		for (const [from, to, r] of legs) {
+			const e = scene.edges.find((x) => x.from === from && x.to === to);
+			if (e) out.push(/* @__PURE__ */ jsx("path", {
+				d: pathOf(e.points),
+				fill: "none",
+				stroke: tokenColor(flows[f].color),
+				strokeOpacity: ".45",
+				strokeWidth: 1.5 + 6 * Math.min(r, max) / max
+			}, `${f}:${e.id}`));
+		}
+	}
+	return /* @__PURE__ */ jsx("g", { children: out });
+}
+function Txt({ s, children, anchor = "middle", fill = "currentColor" }) {
+	return /* @__PURE__ */ jsx("text", {
+		x: s.x,
+		y: s.y,
+		fontSize: s.size,
+		fontWeight: s.weight,
+		textAnchor: anchor,
+		fill,
+		children
+	});
+}
+function Node({ n, state, title, sub, lm, focused, handlers }) {
+	const stroke = state ? STATE_STROKE[state] : "var(--lm-line)";
+	const flows = lm.view.def.flows;
+	const e = 6;
+	return /* @__PURE__ */ jsxs("g", {
+		style: { color: "var(--lm-fg)" },
+		"data-node": n.id,
+		"data-focus": focused || void 0,
+		...handlers,
+		children: [
+			n.shape === "cylinder" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: `M${n.x} ${n.y + e} A${n.w / 2} ${e} 0 0 1 ${n.x + n.w} ${n.y + e} V${n.y + n.h - e} A${n.w / 2} ${e} 0 0 1 ${n.x} ${n.y + n.h - e} Z`,
+				fill: "var(--lm-surface)",
+				stroke,
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ jsx("path", {
+				d: `M${n.x} ${n.y + e} A${n.w / 2} ${e} 0 0 0 ${n.x + n.w} ${n.y + e}`,
+				fill: "none",
+				stroke,
+				strokeWidth: "1.5"
+			})] }) : /* @__PURE__ */ jsx("rect", {
+				x: n.x,
+				y: n.y,
+				width: n.w,
+				height: n.h,
+				rx: "6",
+				fill: "var(--lm-surface)",
+				stroke,
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx(Txt, {
+				s: n.title,
+				children: title
+			}),
+			n.sub && sub && /* @__PURE__ */ jsx(Txt, {
+				s: n.sub,
+				fill: "var(--lm-muted)",
+				children: sub
+			}),
+			n.members.map((m) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: m.x,
+				y: m.y,
+				width: m.w,
+				height: m.h,
+				rx: "4",
+				fill: "none",
+				stroke: "var(--lm-line)"
+			}), /* @__PURE__ */ jsx(Txt, {
+				s: m.spot,
+				anchor: "start",
+				fill: "var(--lm-muted)",
+				children: m.label
+			})] }, m.label)),
+			n.groups.map((g) => /* @__PURE__ */ jsx(Txt, {
+				s: g.spot,
+				anchor: "start",
+				fill: tokenColor(flows[g.flow]?.color ?? "muted"),
+				children: g.text
+			}, `${g.flow}@${g.spot.x},${g.spot.y}`)),
+			n.cells.map((c) => /* @__PURE__ */ jsx("rect", {
+				x: c.x,
+				y: c.y,
+				width: c.w,
+				height: c.h,
+				rx: "1.5",
+				fill: "var(--lm-lane)",
+				stroke: tokenColor(flows[c.flow]?.color ?? "muted"),
+				strokeOpacity: ".6"
+			}, `${c.stage}/${c.flow}/${c.index}`)),
+			n.slots.map((s) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: s.x,
+				y: s.y,
+				width: s.w,
+				height: s.h,
+				rx: "2",
+				fill: "var(--lm-surface)",
+				stroke: "currentColor",
+				strokeOpacity: ".45"
+			}), /* @__PURE__ */ jsx("rect", {
+				"data-slot": s.index,
+				"data-stage": n.stages[0],
+				"data-y": s.y,
+				"data-s": s.w,
+				x: s.x + 1,
+				y: s.y + s.h - 1,
+				width: s.w - 2,
+				height: 0,
+				rx: "1",
+				fill: "var(--lm-accent)"
+			})] }, s.index)),
+			focused && /* @__PURE__ */ jsx("rect", {
+				className: "lm-focus",
+				x: n.x - 5,
+				y: n.y - 5,
+				width: n.w + 10,
+				height: n.h + 10,
+				rx: "9",
+				fill: "none",
+				stroke: "var(--lm-accent)",
+				strokeWidth: "2",
+				strokeDasharray: "5 4"
+			})
+		]
+	});
+}
+/**
+* A box's component in words, over the board: utilization, demand against capacity and where it came from, where it
+* reaches the target and 100 % (with dates, given growth), and its target in each scenario. HTML, so exports leave it out.
+*/
+function Detail({ lm, scene, id, board, detailId }) {
+	const { model, ev } = lm;
+	const n = scene.nodes.find((x) => x.id === id);
+	const cid = n && componentOf(lm, n);
+	const comparison = useComparison(lm);
+	const rows = model.scenarios.length > 1 ? comparison.rows : [];
+	useEffect(() => {
+		const el = board?.querySelector(`[data-node="${CSS.escape(id)}"]`);
+		el?.setAttribute("aria-describedby", detailId);
+		return () => el?.removeAttribute("aria-describedby");
+	}, [
+		board,
+		id,
+		detailId
+	]);
+	const c = cid ? ev.components[cid] : void 0;
+	if (!n || !c || !board) return null;
+	const k = board.clientWidth / scene.width;
+	const below = n.y + n.h / 2 < scene.height / 2;
+	const place = {
+		top: board.offsetTop + (below ? (n.y + n.h) * k + 6 : n.y * k - 6),
+		transform: below ? void 0 : "translateY(-100%)"
+	};
+	const at = (r, x) => r ? reach(r, model.searchMax, model.dateAt) : multiple$1(x, model.searchMax);
+	const num = (x) => Math.abs(x) >= 1e3 ? compact$1(x) : fmt$1(x);
+	const cap = c.capacity;
+	return /* @__PURE__ */ jsxs("div", {
+		id: detailId,
+		className: "lm-tip lm-detail",
+		role: "tooltip",
+		style: {
+			...place,
+			left: `clamp(0px, ${board.offsetLeft + n.x * k}px, calc(100% - 17rem))`
+		},
+		children: [
+			/* @__PURE__ */ jsxs("b", { children: [c.name, c === ev.firstLimit && /* @__PURE__ */ jsx("span", {
+				className: "lm-tag",
+				"data-kind": "first",
+				children: "first limit"
+			})] }),
+			c.util == null || !cap ? /* @__PURE__ */ jsx("span", { children: "switched off" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("strong", { children: pct$1(c.util) }),
+					" · ",
+					num(c.demand ?? 0),
+					" of ",
+					fmt$1(cap.value),
+					" ",
+					cap.unit,
+					cap.within ? ` ±${pct$1(cap.within)}` : ""
+				] }),
+				/* @__PURE__ */ jsxs("span", {
+					className: "lm-sub",
+					children: [
+						"capacity",
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "lm-prov",
+							"data-kind": cap.provenance,
+							children: cap.provenance
+						}),
+						cap.source ? `, ${cap.source}` : ""
+					]
+				}),
+				/* @__PURE__ */ jsxs("span", { children: [
+					pct$1(model.thresholds.target),
+					" at ",
+					at(c.targetRange, c.target)
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					pct$1(model.thresholds.full),
+					" at ",
+					at(c.fullRange, c.full)
+				] }),
+				c.over && /* @__PURE__ */ jsxs("span", {
+					className: "lm-sub",
+					children: [
+						"Past ",
+						pct$1(model.thresholds.full),
+						": ",
+						c.over,
+						"."
+					]
+				})
+			] }),
+			rows.length > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "lm-sub",
+				children: [
+					pct$1(model.thresholds.target),
+					" by scenario:",
+					" ",
+					rows.map((r, i) => {
+						const x = r.components.find((y) => y.id === cid);
+						return /* @__PURE__ */ jsxs("span", {
+							className: "lm-nowrap",
+							children: [
+								i > 0 && " · ",
+								/* @__PURE__ */ jsx("b", {
+									className: "lm-key",
+									style: { background: scenarioColor(model, r.label) }
+								}),
+								r.label,
+								" ",
+								x?.targetRange == null ? "off" : multiples(x.targetRange, model.searchMax, true)
+							]
+						}, r.label);
+					})
+				]
+			})
+		]
+	});
+}
+// src/panels.tsx
+/** The model's one-sentence answer for the current values, and which capacity to measure when it is unsure. */
+function Verdict({ lm }) {
+	const { measure } = lm.ev;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+		className: "lm-verdict",
+		"data-tier": lm.ev.verdict.tier,
+		"aria-live": "polite",
+		children: lm.ev.verdict.text
+	}), measure && /* @__PURE__ */ jsx("p", {
+		className: "lm-measure",
+		"data-component": measure.component,
+		children: measure.text
+	})] });
+}
+/** "±30 %" for a capacity with a range. */
+const plusMinus = (c) => c?.within ? `±${pct$1(c.within)}` : "";
+/** Each component's utilization in the order they reach the target, with where they cross it and 100 %. */
+function Limits({ lm, title = "Where it runs out, in order" }) {
+	const { ev, model } = lm;
+	const top = Math.max(1.5, model.thresholds.full * 1.5);
+	const at = (u) => `${u / top * 100}%`;
+	const span = (r, x) => r ? multiples(r, model.searchMax, true) : multiple$1(x, model.searchMax);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("h3", { children: title }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "lm-scale",
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							left: 0,
+							transform: "none"
+						},
+						children: "0"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: { left: at(model.thresholds.target) },
+						children: [pct$1(model.thresholds.target), " target"]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { left: at(model.thresholds.full) },
+						children: pct$1(model.thresholds.full)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							left: "100%",
+							transform: "translateX(-100%)"
+						},
+						children: pct$1(top)
+					})
+				] }),
+				/* @__PURE__ */ jsx("span", {})
+			]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "lm-limits",
+			children: ev.ranked.map((c) => /* @__PURE__ */ jsxs("div", {
+				className: "lm-lim",
+				"data-component": c.id,
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("b", { children: [
+						c.name,
+						c === ev.firstLimit && /* @__PURE__ */ jsx("span", {
+							className: "lm-tag",
+							"data-kind": "first",
+							children: "first limit"
+						}),
+						c.capacity?.provenance === "estimated" ? /* @__PURE__ */ jsxs("span", {
+							className: "lm-tag",
+							"data-kind": "estimated",
+							children: ["estimate", c.capacity.within ? ` ${plusMinus(c.capacity)}` : ""]
+						}) : !!c.capacity?.within && /* @__PURE__ */ jsx("span", {
+							className: "lm-tag",
+							"data-kind": "range",
+							children: plusMinus(c.capacity)
+						})
+					] }), /* @__PURE__ */ jsx("span", {
+						className: "lm-sub",
+						children: c.describe ?? (c.capacity ? `${fmt$1(c.capacity.value)} ${c.capacity.unit}` : "switched off")
+					})] }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "lm-track",
+						role: "img",
+						"aria-label": `${c.name} at ${c.util == null ? "off" : pct$1(c.util)}`,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "lm-fill",
+								"data-state": c.state,
+								style: { width: `${Math.min(100, (c.util ?? 0) / top * 100)}%` }
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "lm-tick",
+								style: { left: at(model.thresholds.target) }
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "lm-tick",
+								style: { left: at(model.thresholds.full) }
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "lm-val",
+						children: [c.util == null ? "—" : `${pct$1(c.util)} · ${num(c.demand ?? 0)} ${c.capacity?.unit ?? ""}`, /* @__PURE__ */ jsx("small", { children: c.util == null ? "switched off" : `${pct$1(model.thresholds.target)} at ${span(c.targetRange, c.target)} · full at ${span(c.fullRange, c.full)}` })]
+					})
+				]
+			}, c.id))
+		})
+	] });
+}
+/** Live numbers from the sim: lag and drops per queue, busy workers, rejected requests. */
+function Meters({ lm }) {
+	const [, tick] = useState(0);
+	useEffect(() => {
+		const t = setInterval(() => tick((x) => x + 1), 250);
+		return () => clearInterval(t);
+	}, []);
+	const { ev, engine, model } = lm;
+	const sim = engine.sim;
+	const flowLabel = (f) => model.def.flows[f]?.label ?? f;
+	const items = [];
+	for (const s of Object.values(ev.stages)) {
+		if (s.kind === "queue") for (const f of model.flowIds.filter((x) => ev.routes[x]?.includes(s.id))) {
+			const q = sim.queue(s.id, f);
+			const rules = ev.overload[f] ?? {};
+			items.push({
+				key: `${s.id}/${f}/lag`,
+				value: secs$1(q.lag),
+				label: `${flowLabel(f)} lag in ${s.label}`,
+				state: q.lag > 60 ? "over" : q.lag > 5 ? "warn" : "ok"
+			});
+			if (rules.merge) items.push({
+				key: `${s.id}/${f}/merge`,
+				value: compact$1(q.merged),
+				label: `${flowLabel(f)} superseded /s (${rules.merge.reason ?? "newest kept"})`,
+				state: q.merged > .5 ? "warn" : "ok"
+			});
+			if (rules.drop) items.push({
+				key: `${s.id}/${f}/drop`,
+				value: compact$1(q.dropped),
+				label: `${flowLabel(f)} dropped /s (${rules.drop.reason ?? "too old"})`,
+				state: q.dropped > .5 ? "over" : "ok"
+			});
+		}
+		if (s.kind === "workers") {
+			const b = sim.busy(s.id);
+			items.push({
+				key: `${s.id}/busy`,
+				value: pct$1(b),
+				label: `${s.label} busy`,
+				state: b > .95 ? "over" : b > .5 ? "warn" : "ok"
+			});
+		}
+		if (s.kind === "pass" && sim.shed(s.id) > 0) items.push({
+			key: `${s.id}/shed`,
+			value: pct$1(sim.shed(s.id)),
+			label: `rejected at ${s.label}`,
+			state: "over"
+		});
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h3", { children: "Live" }), /* @__PURE__ */ jsx("div", {
+		className: "lm-meters",
+		children: items.map((m) => /* @__PURE__ */ jsxs("div", {
+			className: "lm-meter",
+			"data-state": m.state,
+			children: [/* @__PURE__ */ jsx("b", { children: m.value }), /* @__PURE__ */ jsx("span", { children: m.label })]
+		}, m.key))
+	})] });
+}
+/** The load slider, the presets and every parameter, greyed out where it does not apply. */
+function Controls({ lm }) {
+	const { model, values, setValues, ev } = lm;
+	const v = values;
+	const load = model.load;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm-card lm-controls",
+		children: [
+			/* @__PURE__ */ jsx("h3", { children: "Load" }),
+			/* @__PURE__ */ jsxs("label", {
+				className: "lm-range",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					load.label,
+					" ",
+					/* @__PURE__ */ jsxs("output", { children: [fmt$1(v.load), "×"] })
+				] }), /* @__PURE__ */ jsx("input", {
+					type: "range",
+					min: load.min,
+					max: load.max,
+					step: load.step,
+					value: v.load,
+					onChange: (e) => setValues({ load: Number(e.target.value) })
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lm-presets",
+				children: ev.presets.map((p) => {
+					const on = Object.entries(p.values).every(([k, x]) => v[k] === x);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": on,
+						onClick: () => setValues(p.values),
+						children: p.label
+					}, p.label);
+				})
+			}),
+			model.params.length > 1 && /* @__PURE__ */ jsx("h3", { children: "Design" }),
+			model.params.map(({ id, def }) => {
+				if (def.kind === "load") return null;
+				const enabled = model.isEnabled(id, v);
+				const tag = def.tag && /* @__PURE__ */ jsx("span", {
+					className: "lm-tag",
+					"data-kind": "estimated",
+					children: def.tag
+				});
+				if (def.kind === "switch") return /* @__PURE__ */ jsxs("label", {
+					className: `lm-switch${enabled ? "" : " lm-off"}`,
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: Boolean(v[id]),
+							disabled: !enabled,
+							onChange: (e) => setValues({ [id]: e.target.checked })
+						}),
+						/* @__PURE__ */ jsxs("span", { children: [def.label, tag] }),
+						def.hint && /* @__PURE__ */ jsx("small", { children: def.hint })
+					]
+				}, id);
+				if (def.kind === "select") return /* @__PURE__ */ jsxs("label", {
+					className: `lm-select${enabled ? "" : " lm-off"}`,
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: [def.label, tag] }),
+						/* @__PURE__ */ jsx("select", {
+							value: String(v[id]),
+							disabled: !enabled,
+							onChange: (e) => {
+								const opt = def.options.find((o) => String(o) === e.target.value);
+								setValues({ [id]: opt });
+							},
+							children: def.options.map((o) => /* @__PURE__ */ jsx("option", {
+								value: String(o),
+								children: def.format ? def.format(o) : String(o)
+							}, String(o)))
+						}),
+						def.hint && /* @__PURE__ */ jsx("small", { children: def.hint })
+					]
+				}, id);
+				return /* @__PURE__ */ jsxs("label", {
+					className: `lm-range${enabled ? "" : " lm-off"}`,
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: [
+							def.label,
+							tag,
+							" ",
+							/* @__PURE__ */ jsx("output", { children: def.format ? def.format(v[id]) : fmt$1(v[id]) })
+						] }),
+						/* @__PURE__ */ jsx("input", {
+							type: "range",
+							min: def.min,
+							max: def.max,
+							step: def.step,
+							value: v[id],
+							disabled: !enabled,
+							onChange: (e) => setValues({ [id]: Number(e.target.value) })
+						}),
+						def.hint && /* @__PURE__ */ jsx("small", { children: def.hint })
+					]
+				}, id);
+			})
+		]
+	});
+}
+/** What the model assumes: every capacity with its provenance, every fit, and anything the page adds. */
+function Assumptions({ lm, extra = [] }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm-card",
+		children: [/* @__PURE__ */ jsx("h3", { children: "What this assumes" }), /* @__PURE__ */ jsxs("ul", {
+			className: "lm-facts",
+			children: [extra.map((x, i) => /* @__PURE__ */ jsx("li", { children: x }, i)), lm.ev.assumptions.map((a) => /* @__PURE__ */ jsx("li", { children: describe(a) }, a.kind === "capacity" ? `c:${a.component}` : `f:${a.name}`))]
+		})]
+	});
+}
+function describe(a) {
+	if (a.kind === "capacity") {
+		const c = a.capacity;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("b", { children: [a.name, ":"] }),
+			" ",
+			fmt$1(c.value),
+			" ",
+			c.unit,
+			c.within ? ` ${plusMinus(c)}` : "",
+			",",
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "lm-prov",
+				"data-kind": c.provenance,
+				children: c.provenance
+			}),
+			c.source ? ` (${c.source})` : "",
+			"."
+		] });
+	}
+	const f = a.fit;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("b", { children: [a.name, ":"] }),
+		" ",
+		f.y,
+		" = ",
+		sig(f.a),
+		" + ",
+		sig(f.b),
+		" × ",
+		f.x,
+		", r² ",
+		f.r2.toFixed(3),
+		" over ",
+		f.n,
+		" points,",
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "lm-prov",
+			"data-kind": "measured",
+			children: "measured"
+		}),
+		f.source ? ` (${f.source})` : "",
+		"."
+	] });
+}
+/** Exact below 1,000 (3.9 cores), compact above (12k req/s). */
+const num = (x) => Math.abs(x) >= 1e3 ? compact$1(x) : fmt$1(x);
+const sig = (x) => Number(x.toPrecision(3)).toString();
+// src/story.tsx
+/**
+* The model's story, a step at a time: the step's text, where it is, back and next. ← and → move through it while
+* the bar has the keyboard focus (the sliders keep their own arrows).
+*/
+function Story({ lm }) {
+	const bar = useRef(null);
+	const { story } = lm.model;
+	if (!story.length) return null;
+	const i = lm.step;
+	const step = i == null ? null : story[i];
+	const last = story.length - 1;
+	const go = (to) => {
+		const next = Math.max(0, Math.min(last, to));
+		if (next !== i) lm.setStep(next);
+	};
+	const keys = (e) => {
+		if (e.key === "ArrowRight") go(i == null ? 0 : i + 1);
+		else if (e.key === "ArrowLeft" && i != null) go(i - 1);
+		else return;
+		e.preventDefault();
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "lm-story",
+		onKeyDown: keys,
+		ref: bar,
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ jsx("legend", { children: "Story" }),
+			/* @__PURE__ */ jsx("p", {
+				"aria-live": "polite",
+				children: step ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("b", { children: [
+						i + 1,
+						" of ",
+						story.length
+					] }),
+					" ",
+					step.text,
+					lm.stepChanged && /* @__PURE__ */ jsx("em", { children: " You changed the values since." })
+				] }) : `A walk through this model in ${story.length} steps.`
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "lm-story-nav",
+				children: [
+					i != null && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => go(i - 1),
+						"aria-disabled": i === 0,
+						children: "Back"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => go(i == null ? 0 : i + 1),
+						"aria-disabled": i === last,
+						children: i == null ? "Start" : "Next"
+					}),
+					i != null && lm.stepChanged && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							lm.setStep(i);
+							bar.current?.focus();
+						},
+						children: "Show again"
+					}),
+					i != null && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => lm.setStep(null),
+						"aria-label": "Leave the story",
+						children: "Done"
+					})
+				]
+			})
+		]
+	});
+}
+// src/styles.ts
+const LIGHT = `
+  --lm-bg: #eef2f5; --lm-surface: #ffffff; --lm-fg: #17212b; --lm-muted: #5d6d7c; --lm-line: #c6d0da;
+  --lm-accent: #0b6b8f; --lm-accent-soft: #d6e9f0; --lm-alt: #7a4f9a; --lm-alt-soft: #efe5f6;
+  --lm-ok: #2a7f5a; --lm-warn: #b86e00; --lm-drop: #b7392e; --lm-lane: #e3e9ee;
+  --lm-s1: #2a78d6; --lm-s2: #eb6834; --lm-s3: #6250d6; --lm-s4: #eda100; color-scheme: light;`;
+const DARK = `
+  --lm-bg: #0d141b; --lm-surface: #151e27; --lm-fg: #e4ebf1; --lm-muted: #93a3b3; --lm-line: #2a3744;
+  --lm-accent: #5fb7d6; --lm-accent-soft: #163442; --lm-alt: #c39be0; --lm-alt-soft: #2b2236;
+  --lm-ok: #5fc08f; --lm-warn: #e2a24a; --lm-drop: #e26a5c; --lm-lane: #1b2631;
+  --lm-s1: #3987e5; --lm-s2: #d95926; --lm-s3: #9085e9; --lm-s4: #c98500; color-scheme: dark;`;
+/** Theme tokens and the layout of every piece. Scoped to `.lm`; override any `--lm-*` token to restyle. */
+const LOADMAP_CSS = `
+.lm { ${LIGHT}
+  --lm-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --lm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font: 14px/1.45 var(--lm-font); color: var(--lm-fg); background: var(--lm-bg);
+  display: grid; gap: 14px; padding: 16px; min-width: 0; box-sizing: border-box; }
+@media (prefers-color-scheme: dark) { .lm:not([data-theme="light"]) { ${DARK} } }
+.lm[data-theme="dark"] { ${DARK} }
+.lm *, .lm *::before, .lm *::after { box-sizing: border-box; }
+.lm h2 { font-size: 1.3rem; font-weight: 600; margin: 0; text-wrap: balance; }
+.lm h3 { font: 600 .74rem var(--lm-font); text-transform: uppercase; letter-spacing: .08em; color: var(--lm-muted); margin: 0; }
+.lm button:focus-visible, .lm input:focus-visible, .lm select:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 2px; }
+.lm-card { background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 8px; padding: 14px 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
+
+.lm-wrap { display: grid; gap: 8px; min-width: 0; position: relative; }
+.lm-wrap:fullscreen { background: var(--lm-bg); padding: 16px; align-content: center; overflow: auto; }
+.lm-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
+.lm-btn { font: 500 .8rem var(--lm-font); color: var(--lm-fg); background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
+.lm-board { position: relative; background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 8px; overflow: hidden; margin: 0 auto; width: 100%; }
+.lm-wrap:fullscreen .lm-board { width: auto; max-width: 100%; max-height: calc(100vh - 90px); }
+.lm-board svg { display: block; width: 100%; height: auto; font-family: var(--lm-font); }
+.lm-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.lm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--lm-muted); }
+.lm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; }
+
+.lm-verdict { margin: 0; padding: 10px 14px; border-left: 4px solid var(--lm-ok); background: var(--lm-accent-soft); border-radius: 0 6px 6px 0; }
+.lm-verdict[data-tier="warn"] { border-color: var(--lm-warn); }
+.lm-verdict[data-tier="over"] { border-color: var(--lm-drop); }
+.lm-measure { margin: 6px 0 0; padding: 0 14px; font-size: .86rem; color: var(--lm-muted); }
+
+.lm-strip { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 14px; align-items: start; }
+@container (max-width: 860px) { .lm-strip { grid-template-columns: minmax(0, 1fr); } }
+.lm { container-type: inline-size; }
+
+.lm-meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
+.lm-meter { padding: 8px 10px; border-radius: 6px; background: var(--lm-bg); min-width: 0; }
+.lm-meter b { display: block; font: 500 1.15rem var(--lm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lm-meter span { font-size: .74rem; color: var(--lm-muted); }
+.lm-meter[data-state="warn"] b { color: var(--lm-warn); } .lm-meter[data-state="over"] b { color: var(--lm-drop); }
+
+.lm-limits { display: grid; gap: 10px; }
+.lm-lim, .lm-scale { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 10rem; gap: 4px 14px; align-items: center; }
+@container (max-width: 640px) { .lm-lim, .lm-scale { grid-template-columns: minmax(0, 1fr); } .lm-scale > :first-child, .lm-scale > :last-child { display: none; } }
+.lm-lim b { display: block; font-weight: 600; font-size: .88rem; }
+.lm-lim .lm-sub { display: block; font-size: .74rem; color: var(--lm-muted); }
+.lm-tag { font: 600 .64rem var(--lm-font); text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
+.lm-tag[data-kind="first"] { color: var(--lm-surface); background: var(--lm-drop); }
+.lm-tag[data-kind="estimated"] { color: var(--lm-warn); border: 1px solid currentColor; }
+.lm-tag[data-kind="range"] { color: var(--lm-muted); border: 1px solid currentColor; }
+.lm-track { position: relative; height: 16px; background: var(--lm-bg); border-radius: 3px; overflow: hidden; }
+.lm-fill { position: absolute; inset: 0 auto 0 0; background: var(--lm-ok); transition: width .25s ease; }
+.lm-fill[data-state="warn"] { background: var(--lm-warn); } .lm-fill[data-state="over"] { background: var(--lm-drop); }
+.lm-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lm-fg); opacity: .55; }
+.lm-val { font: 500 .8rem var(--lm-mono); font-variant-numeric: tabular-nums; }
+.lm-val small { display: block; font: 400 .72rem var(--lm-font); color: var(--lm-muted); }
+.lm-scale { font: 400 .7rem var(--lm-mono); color: var(--lm-muted); }
+.lm-scale div { position: relative; height: 12px; }
+.lm-scale div span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
+
+.lm-controls label.lm-range { display: grid; gap: 4px; font-size: .84rem; }
+.lm-controls label.lm-range > span { display: flex; justify-content: space-between; gap: 8px; }
+.lm-controls output { font-family: var(--lm-mono); font-variant-numeric: tabular-nums; }
+.lm-controls input[type=range] { width: 100%; accent-color: var(--lm-accent); }
+.lm-presets { display: flex; flex-wrap: wrap; gap: 6px; }
+.lm-presets button { font: 500 .76rem var(--lm-font); background: var(--lm-accent-soft); color: var(--lm-fg); border: 1px solid transparent; border-radius: 5px; padding: 5px 10px; cursor: pointer; }
+.lm-presets button[aria-pressed="true"] { border-color: var(--lm-accent); }
+.lm-switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: start; font-size: .84rem; cursor: pointer; }
+.lm-switch input { margin: 3px 0 0; accent-color: var(--lm-accent); }
+.lm-switch small, .lm-select small { grid-column: 2; color: var(--lm-muted); font-size: .74rem; line-height: 1.3; }
+.lm-select { display: grid; gap: 4px; font-size: .84rem; }
+.lm-select select { width: 100%; min-width: 0; font: 400 .84rem var(--lm-font); color: var(--lm-fg); background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 5px; padding: 5px 8px; }
+.lm-off { opacity: .45; cursor: default; }
+
+.lm-facts { margin: 0; padding-left: 1.1em; font-size: .88rem; columns: 2; column-gap: 28px; }
+@container (max-width: 860px) { .lm-facts { columns: 1; } }
+.lm-facts li { margin-bottom: 8px; break-inside: avoid; }
+.lm-prov { font: 600 .66rem var(--lm-font); text-transform: uppercase; letter-spacing: .06em; }
+.lm-prov[data-kind="measured"] { color: var(--lm-ok); } .lm-prov[data-kind="estimated"] { color: var(--lm-warn); }
+
+/* scenario identity colours (s1–s4) are checked for colour-blind separation on both surfaces; text never wears them */
+.lm-scenarios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
+.lm-scenarios legend { float: left; font: 600 .74rem var(--lm-font); text-transform: uppercase; letter-spacing: .08em; color: var(--lm-muted); margin-right: 6px; padding: 0; }
+.lm-scenarios button { font: 500 .84rem var(--lm-font); color: var(--lm-fg); background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
+.lm-scenarios button[aria-pressed="true"] { border-color: var(--lm-fg); box-shadow: inset 0 0 0 1px var(--lm-fg); }
+.lm-scenarios i, .lm-table i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
+.lm-story { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; min-width: 0; padding: 8px 12px; border: 1px solid var(--lm-line); border-left: 3px solid var(--lm-accent); border-radius: 6px; background: var(--lm-surface); }
+.lm-story legend { float: left; font: 600 .74rem var(--lm-font); text-transform: uppercase; letter-spacing: .08em; color: var(--lm-muted); padding: 0; }
+.lm-story p { flex: 1 1 240px; margin: 0; font: 400 .9rem/1.4 var(--lm-font); color: var(--lm-fg); }
+.lm-story b { font-weight: 600; color: var(--lm-muted); margin-right: 4px; white-space: nowrap; }
+.lm-story-nav { display: flex; gap: 6px; }
+.lm-story em { color: var(--lm-muted); }
+.lm-story button { font: 500 .84rem var(--lm-font); color: var(--lm-fg); background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
+.lm-story button[aria-disabled="true"] { opacity: .45; cursor: default; }
+.lm-own { font-size: .78rem; color: var(--lm-muted); }
+.lm-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; vertical-align: 3px; margin-right: 6px; }
+
+.lm-compare-text { margin: 0; }
+.lm-table-wrap { overflow-x: auto; }
+.lm-table { border-collapse: collapse; width: 100%; font-size: .84rem; }
+.lm-table th, .lm-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--lm-line); vertical-align: top; }
+.lm-table thead th { font: 600 .7rem var(--lm-font); text-transform: uppercase; letter-spacing: .06em; color: var(--lm-muted); }
+.lm-table tbody th { font-weight: 600; white-space: nowrap; }
+.lm-table td { font-family: var(--lm-mono); font-variant-numeric: tabular-nums; }
+.lm-table td.lm-text { font-family: var(--lm-font); }
+.lm-table td small { display: block; font: 400 .72rem var(--lm-font); color: var(--lm-muted); }
+.lm-table tr[aria-current] th { text-decoration: underline; text-underline-offset: 3px; }
+
+.lm-chart { position: relative; min-width: 0; }
+.lm-chart svg { display: block; overflow: visible; }
+.lm-chart:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 2px; }
+.lm-axis, .lm-axis text { font: 400 11px var(--lm-mono); fill: var(--lm-muted); }
+.lm-mark { font: 600 11px var(--lm-mono); fill: var(--lm-fg); }
+.lm-tip { position: absolute; z-index: 2; display: grid; gap: 2px; width: max-content; max-width: 17rem; padding: 8px 10px; font-size: .78rem; background: var(--lm-surface); color: var(--lm-fg); border: 1px solid var(--lm-line); border-radius: 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .14); pointer-events: none; }
+.lm-tip strong { font: 600 .82rem var(--lm-mono); font-variant-numeric: tabular-nums; }
+.lm-tip .lm-sub { color: var(--lm-muted); }
+.lm-nowrap { white-space: nowrap; }
+.lm-node { cursor: pointer; outline: none; }
+.lm-node:focus-visible > :first-child { stroke-width: 3; }
+
+@media (prefers-reduced-motion: reduce) { .lm-fill { transition: none; } }
+`;
+/** Adds the stylesheet once per document. */
+function injectStyles(doc = document) {
+	if (doc.getElementById("loadmap-css")) return;
+	const el = doc.createElement("style");
+	el.id = "loadmap-css";
+	el.textContent = LOADMAP_CSS;
+	doc.head.appendChild(el);
+}
+// src/elk.ts
+let shared = null;
+/**
+* One ELK worker for every loadmap on the page, started on the first layout. When the worker cannot start or load
+* (no Worker, a CSP without worker-src, a dev server that pre-bundled this package away from the worker file), every
+* layout runs on the main thread instead: slower to start, the same result.
+*/
+function pageElk() {
+	shared ??= workerElk(() => new Worker(new URL("./elk.worker.js", import.meta.url), {
+		type: "module",
+		name: "loadmap-elk"
+	}));
+	return shared;
+}
+/** ELK in the worker `make` starts, falling back to the main thread. */
+function workerElk(make) {
+	let worker = null;
+	let broken = typeof Worker === "undefined";
+	let next = 0;
+	const pending = /* @__PURE__ */ new Map();
+	const fallBack = () => {
+		broken = true;
+		worker?.terminate();
+		worker = null;
+		for (const [id, p] of pending) {
+			pending.delete(id);
+			localElk().then((elk) => elk.layout(p.graph)).then(p.resolve, p.reject);
+		}
+	};
+	const start = () => {
+		if (worker || broken) return worker;
+		try {
+			worker = make();
+		} catch {
+			fallBack();
+			return null;
+		}
+		worker.onmessage = ({ data }) => {
+			const p = pending.get(data.id);
+			if (!p) return;
+			pending.delete(data.id);
+			if (data.error != null) p.reject(new Error(data.error));
+			else p.resolve(data.graph);
+		};
+		worker.onerror = (e) => {
+			e.preventDefault();
+			fallBack();
+		};
+		return worker;
+	};
+	return { layout(graph) {
+		const w = start();
+		if (!w) return localElk().then((elk) => elk.layout(graph));
+		return new Promise((resolve, reject) => {
+			const id = next++;
+			pending.set(id, {
+				graph,
+				resolve,
+				reject
+			});
+			w.postMessage({
+				id,
+				graph
+			});
+		});
+	} };
+}
+// src/engine.ts
+const TOKENS = [
+	"accent",
+	"alt",
+	"ok",
+	"warn",
+	"drop",
+	"muted",
+	"fg",
+	"surface",
+	"line"
+];
+/**
+* Everything that moves, without React: the sim, the dots on the canvas and the worker fills in the SVG. React
+* renders the structure once per scene; the engine updates the moving parts every frame, and export drives it frame
+* by frame instead of the animation loop.
+*/
+var Engine = class {
+	model;
+	view;
+	sim;
+	ev;
+	scene = null;
+	/** The structure key the current values want; `scene.key` catches up once the layout is done. */
+	wantKey = "";
+	/** The values React last drew labels and colours for; a frame is complete once they match `ev.values`. */
+	drawnValues = "";
+	/** The component a story step points at, and the one the diagram last outlined: export waits for them to match. */
+	wantFocus = null;
+	/** The story step shown, set as soon as one is chosen: a recorder holding an old handle still reads it. */
+	storyStep = null;
+	drawnFocus = null;
+	paused = false;
+	colors = {};
+	svg = null;
+	canvas = null;
+	#o;
+	#slots = [];
+	#paths = /* @__PURE__ */ new Map();
+	constructor(model, view, ev, o = {}) {
+		this.model = model;
+		this.view = view;
+		this.ev = ev;
+		this.#o = o;
+		this.sim = createSim(model, ev, o);
+	}
+	setEvaluation(ev) {
+		if (ev === this.ev) return;
+		const same = JSON.stringify(ev.values) === JSON.stringify(this.ev.values);
+		this.ev = ev;
+		if (!same) this.sim.update(ev);
+	}
+	setScene(scene) {
+		if (scene === this.scene) return;
+		this.scene = scene;
+		this.#paths.clear();
+	}
+	/** Starts the sim over from empty queues, with this seed (default: the original one). */
+	reset(seed) {
+		this.sim = createSim(this.model, this.ev, {
+			...this.#o,
+			seed: seed ?? this.#o.seed
+		});
+		this.#paths.clear();
+	}
+	bind(svg, canvas) {
+		this.svg = svg;
+		this.canvas = canvas;
+		this.#slots = [];
+		if (!svg) return;
+		for (const el of svg.querySelectorAll("rect[data-slot]")) this.#slots.push({
+			el,
+			stage: el.dataset.stage,
+			index: Number(el.dataset.slot),
+			y: Number(el.dataset.y),
+			s: Number(el.dataset.s)
+		});
+		this.resize();
+	}
+	/** Reads the theme tokens from the element that carries them. Call again when the theme changes. */
+	readColors(root) {
+		const cs = getComputedStyle(root);
+		for (const t of TOKENS) this.colors[t] = cs.getPropertyValue(`--lm-${t}`).trim();
+	}
+	flowColor(flow) {
+		const c = this.view.def.flows[flow]?.color ?? "accent";
+		return this.colors[c] || c;
+	}
+	outcomeColor(outcome) {
+		if (outcome === "dropped" || outcome === "rejected") return this.colors.drop || "#b7392e";
+		if (outcome === "superseded" || outcome === "unread") return this.colors.muted || "#5d6d7c";
+		return this.colors.ok || "#2a7f5a";
+	}
+	resize() {
+		const c = this.canvas;
+		if (!c || !this.scene) return;
+		const r = c.getBoundingClientRect();
+		if (!r.width) return;
+		const dpr = Math.min(2, globalThis.devicePixelRatio || 1);
+		c.width = Math.round(r.width * dpr);
+		c.height = Math.round(r.height * dpr);
+	}
+	step(dtReal, o = {}) {
+		this.sim.step(dtReal, o);
+	}
+	/** Draws the dots on the overlay canvas and the worker fills in the SVG. */
+	draw(o = {}) {
+		this.drawFills();
+		const c = this.canvas;
+		const ctx = c?.getContext("2d");
+		if (!c || !ctx || !this.scene) return;
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.clearRect(0, 0, c.width, c.height);
+		if (o.particles === false) return;
+		this.paintParticles(ctx, c.width / this.scene.width);
+	}
+	drawFills() {
+		for (const sl of this.#slots) {
+			const b = this.sim.slotBusy(sl.stage, sl.index);
+			const h = b < .02 ? 0 : (sl.s - 2) * b;
+			sl.el.setAttribute("y", (sl.y + sl.s - 1 - h).toFixed(2));
+			sl.el.setAttribute("height", h.toFixed(2));
+		}
+	}
+	/** Every dot as it is drawn now, in scene units: for the canvas, and for an SVG export. */
+	dots() {
+		const scene = this.scene;
+		if (!scene) return [];
+		const out = [];
+		const live = /* @__PURE__ */ new Set();
+		for (const d of this.sim.particles) {
+			live.add(d.id);
+			const [x, y] = this.#position(scene, d);
+			const inCell = d.to.cell != null && d.phase !== "move";
+			out.push({
+				x,
+				y: y - (d.phase === "fade" && d.outcome !== "delivered" ? d.t / d.dur * 8 : 0),
+				r: inCell ? 3 : 3.4,
+				color: d.phase === "fade" ? this.outcomeColor(d.outcome) : this.flowColor(d.flow),
+				alpha: d.phase === "fade" ? Math.max(0, 1 - d.t / d.dur) : 1
+			});
+		}
+		for (const id of this.#paths.keys()) if (!live.has(id)) this.#paths.delete(id);
+		return out;
+	}
+	/** Paints the dots onto any 2D context, scene units × `scale`: the overlay, or an export frame. */
+	paintParticles(ctx, scale) {
+		if (!this.scene) return;
+		ctx.save();
+		ctx.transform(scale, 0, 0, scale, 0, 0);
+		for (const d of this.dots()) {
+			ctx.globalAlpha = d.alpha;
+			ctx.fillStyle = d.color;
+			ctx.beginPath();
+			ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
+			ctx.fill();
+		}
+		ctx.restore();
+	}
+	#position(scene, d) {
+		if (d.phase !== "move") return anchor(scene, d.to, d.flow);
+		const key = `${d.leg}|${d.from.stage}|${d.from.cell}|${d.to.stage}|${d.to.cell}`;
+		let p = this.#paths.get(d.id);
+		if (!p || p.key !== key) {
+			p = {
+				key,
+				points: legPath(scene, d.from, d.to, d.flow)
+			};
+			this.#paths.set(d.id, p);
+		}
+		return pointAt(p.points, d.t / d.dur);
+	}
+};
+// src/useLoadmap.ts
+/** The state behind a loadmap: values, the model's evaluation, the layout and the engine. */
+function useLoadmap(model, view, o = {}) {
+	const init = () => ({
+		...model.defaults(),
+		...o.initial
+	});
+	const [state, setState] = useState(() => ({
+		model,
+		values: init()
+	}));
+	let values = state.values;
+	if (state.model !== model) {
+		values = init();
+		setState({
+			model,
+			values
+		});
+	}
+	const evaluated = useRef(null);
+	const ev = useMemo(() => evaluated.current?.values === values ? evaluated.current.ev : model.evaluate(values), [model, values]);
+	const engineRef = useRef(null);
+	if (!engineRef.current || engineRef.current.model !== model || engineRef.current.view !== view) engineRef.current = new Engine(model, view, ev, o);
+	const engine = engineRef.current;
+	const [root, setRoot] = useState(null);
+	const wide = o.direction ?? "RIGHT";
+	const [direction, setDirection] = useState(wide);
+	const [measure, setMeasure] = useState(null);
+	const [laid, setLaid] = useState(null);
+	const scene = laid?.view === view ? laid.scene : null;
+	const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const narrowBelow = o.narrowBelow ?? 640;
+	useEffect(() => engine.setEvaluation(ev), [engine, ev]);
+	useEffect(() => {
+		if (!root) return;
+		setMeasure(() => canvasMeasure(getComputedStyle(root).fontFamily));
+		const ro = new ResizeObserver(([e]) => {
+			const w = e?.contentRect.width ?? root.clientWidth;
+			setDirection(w > 0 && w < narrowBelow ? "DOWN" : wide);
+		});
+		ro.observe(root);
+		return () => ro.disconnect();
+	}, [
+		root,
+		narrowBelow,
+		wide
+	]);
+	const key = useMemo(() => measure ? structureKey(view, ev, {
+		direction,
+		measure
+	}) : "", [
+		view,
+		ev,
+		direction,
+		measure
+	]);
+	engine.wantKey = key;
+	const elk = o.elk;
+	useEffect(() => {
+		if (!measure || !key) return;
+		let live = true;
+		layout(view, engine.ev, {
+			direction,
+			measure,
+			elk: elk ?? pageElk()
+		}).then((s) => {
+			if (live) setLaid({
+				view,
+				scene: s
+			});
+		}, (err) => console.error("loadmap: layout failed", err));
+		return () => {
+			live = false;
+		};
+	}, [
+		key,
+		view,
+		engine,
+		direction,
+		measure,
+		elk
+	]);
+	const labels = useMemo(() => labelsAt(view, ev), [view, ev]);
+	const valuesRef = useRef(values);
+	valuesRef.current = values;
+	const setValues = useCallback((v) => {
+		const next = {
+			...valuesRef.current,
+			...v
+		};
+		valuesRef.current = next;
+		const nextEv = model.evaluate(next);
+		evaluated.current = {
+			values: next,
+			ev: nextEv
+		};
+		engine.setEvaluation(nextEv);
+		setState({
+			model,
+			values: next
+		});
+	}, [engine, model]);
+	const scenario = useMemo(() => model.scenarioOf(values), [model, values]);
+	const setScenario = useCallback((label) => {
+		const s = model.scenarios.find((x) => x.label === label);
+		if (s) setValues(s.values);
+	}, [model, setValues]);
+	const [stepState, setStepState] = useState({
+		model,
+		i: null
+	});
+	const step = stepState.model === model && stepState.i != null && stepState.i < model.story.length ? stepState.i : null;
+	const setStep = useCallback((i) => {
+		const st = i == null ? void 0 : model.story[i];
+		if (st) setValues(st.values);
+		engine.wantFocus = st?.focus ?? null;
+		engine.storyStep = st ? i : null;
+		setStepState({
+			model,
+			i: st ? i : null
+		});
+	}, [
+		model,
+		setValues,
+		engine
+	]);
+	const shown = step == null ? void 0 : model.story[step];
+	const stepChanged = !!shown && Object.entries(shown.values).some(([k, v]) => values[k] !== v);
+	const focus = shown && !stepChanged ? shown.focus ?? null : null;
+	engine.wantFocus = focus;
+	engine.storyStep = step;
+	return {
+		model,
+		view,
+		values,
+		setValues,
+		scenario,
+		setScenario,
+		step,
+		stepChanged,
+		setStep,
+		focus,
+		ev,
+		scene,
+		labels,
+		direction,
+		reducedMotion,
+		engine,
+		rootRef: setRoot,
+		root
+	};
+}
+function useMediaQuery(q) {
+	const [on, setOn] = useState(() => typeof matchMedia === "function" && matchMedia(q).matches);
+	useEffect(() => {
+		if (typeof matchMedia !== "function") return;
+		const m = matchMedia(q);
+		const f = () => setOn(m.matches);
+		f();
+		m.addEventListener("change", f);
+		return () => m.removeEventListener("change", f);
+	}, [q]);
+	return on;
+}
+function canvasMeasure(fontFamily) {
+	const ctx = document.createElement("canvas").getContext("2d");
+	if (!ctx) return (t, size) => t.length * size * .6;
+	return (text, size, weight = 400) => {
+		ctx.font = `${weight} ${size}px ${fontFamily}`;
+		return Math.ceil(ctx.measureText(text).width);
+	};
+}
+// src/Loadmap.tsx
+/** The root element: theme tokens, styles, and the size the layout direction follows. */
+function LoadmapRoot({ lm, theme = "auto", children }) {
+	useEffect(() => injectStyles(), []);
+	useEffect(() => {
+		if (!lm.root) return;
+		lm.engine.readColors(lm.root);
+		const m = matchMedia("(prefers-color-scheme: dark)");
+		const f = () => lm.root && lm.engine.readColors(lm.root);
+		m.addEventListener("change", f);
+		return () => m.removeEventListener("change", f);
+	}, [
+		lm.root,
+		lm.engine,
+		theme
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "lm",
+		"data-theme": theme === "auto" ? void 0 : theme,
+		ref: lm.rootRef,
+		children
+	});
+}
+/** The whole page piece: scenarios, diagram, verdict, headroom, live meters, limits, controls and assumptions. */
+function Loadmap({ model, view, theme, title, assumptions, headroom = true, compare = true, ref, ...o }) {
+	const lm = useLoadmap(model, view, o);
+	useImperativeHandle(ref, () => handleOf(lm), [lm]);
+	const side = compare && model.scenarios.length > 1;
+	return /* @__PURE__ */ jsxs(LoadmapRoot, {
+		lm,
+		theme,
+		children: [
+			title !== false && /* @__PURE__ */ jsx("h2", { children: title ?? model.title }),
+			/* @__PURE__ */ jsx(Scenarios, { lm }),
+			/* @__PURE__ */ jsx(Story, { lm }),
+			/* @__PURE__ */ jsx(Diagram, { lm }),
+			/* @__PURE__ */ jsx(Verdict, { lm }),
+			(headroom || side) && /* @__PURE__ */ jsxs("div", {
+				className: headroom && side ? "lm-strip" : void 0,
+				children: [headroom && /* @__PURE__ */ jsx(HeadroomChart, { lm }), side && /* @__PURE__ */ jsx(Compare, { lm })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lm-strip",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "lm-card",
+					children: [/* @__PURE__ */ jsx(Meters, { lm }), /* @__PURE__ */ jsx(Limits, { lm })]
+				}), /* @__PURE__ */ jsx(Controls, { lm })]
+			}),
+			/* @__PURE__ */ jsx(Assumptions, {
+				lm,
+				extra: assumptions
+			})
+		]
+	});
+}
+function handleOf(lm) {
+	const { engine } = lm;
+	return {
+		engine,
+		async ready(timeoutMs = 1e4) {
+			const t0 = performance.now();
+			const drawn = () => engine.scene && engine.scene.key === engine.wantKey && engine.svg && engine.drawnValues === JSON.stringify(engine.ev.values) && engine.drawnFocus === engine.wantFocus;
+			while (!drawn()) {
+				if (performance.now() - t0 > timeoutMs) throw new Error("loadmap: layout not ready");
+				await new Promise((r) => requestAnimationFrame(r));
+			}
+		},
+		pause: () => {
+			engine.paused = true;
+		},
+		resume: () => {
+			engine.paused = false;
+		},
+		values: () => engine.ev.values,
+		setValues: (v) => lm.setValues(v),
+		setStoryStep: (i) => lm.setStep(i),
+		storyStep: () => engine.storyStep,
+		reset: (seed) => engine.reset(seed),
+		step: (dt) => {
+			engine.step(dt, { particles: true });
+			engine.draw({ particles: true });
+		},
+		board: () => engine.svg && engine.canvas && engine.scene ? {
+			svg: engine.svg,
+			canvas: engine.canvas,
+			scene: engine.scene
+		} : null
+	};
+}
+export { Assumptions, Compare, Controls, Diagram, HeadroomChart, LOADMAP_CSS, Limits, Loadmap, LoadmapRoot, Meters, Scenarios, Story, Verdict, cluster, compact, defineView, edge, fitLinear, fmt, handleOf, injectStyles, multiple, node, pct, pool, scenarioColor, secs, useComparison, useLoadmap };