@ai-gui/plugin-bigscreen 0.36.3 → 0.37.1

package/dist/positions-CN8aP4-S.js

@@ -0,0 +1,1621 @@
+//#region src/palette.ts
+/**
+* Two palettes, one per theme.
+*
+* The dark one is the data-wall look — deep navy, cyan accent, a little glow; the light one is
+* the same screen on a white page. The accent can be overridden per screen, and the series
+* colours start from it so a screen reads as one thing rather than a collage.
+*/
+function palette(definition) {
+	const accent = definition.accent ?? (definition.theme === "dark" ? "#22d3ee" : "#0369a1");
+	return definition.theme === "dark" ? {
+		accent,
+		text: "#e2e8f0",
+		muted: "#94a3b8",
+		good: "#34d399",
+		bad: "#fb7185",
+		warn: "#fbbf24",
+		track: "rgba(148,163,184,0.18)",
+		series: [
+			accent,
+			"#a78bfa",
+			"#34d399",
+			"#fbbf24",
+			"#fb7185",
+			"#60a5fa",
+			"#f472b6",
+			"#2dd4bf"
+		],
+		gridLine: "rgba(148,163,184,0.16)"
+	} : {
+		accent,
+		text: "#1e293b",
+		muted: "#64748b",
+		good: "#059669",
+		bad: "#e11d48",
+		warn: "#d97706",
+		track: "rgba(100,116,139,0.16)",
+		series: [
+			accent,
+			"#7c3aed",
+			"#059669",
+			"#d97706",
+			"#e11d48",
+			"#2563eb",
+			"#db2777",
+			"#0d9488"
+		],
+		gridLine: "rgba(100,116,139,0.2)"
+	};
+}
+/** `#rrggbb` with an alpha, for glows and fills. */
+function withAlpha(hex, alpha) {
+	const h = hex.replace("#", "");
+	const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+	const n = Number.parseInt(full, 16);
+	return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
+}
+
+//#endregion
+//#region src/options.ts
+/**
+* ECharts options built from panels.
+*
+* Pure functions of the panel and the palette, so they can be tested without a canvas and so
+* the same panel draws the same chart on every screen.
+*/
+/** The one font every panel writes in, exported so the panels in their own files share it. */
+const FONT = "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Noto Sans CJK SC', sans-serif";
+/** Format a number for a label: thousands grouped, up to `decimals` places. */
+function formatNumber(value, decimals = 0) {
+	return value.toLocaleString("en-US", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	});
+}
+/** The colour a gauge shows at `fraction` of its range. */
+function gaugeColour(fraction, thresholds, c) {
+	if (!thresholds) return c.accent;
+	if (fraction >= thresholds[1]) return c.bad;
+	if (fraction >= thresholds[0]) return c.warn;
+	return c.good;
+}
+function gaugeOption(panel, c, animate) {
+	const max = panel.max ?? 100;
+	const fraction = Math.max(0, Math.min(1, panel.value / max));
+	const colour = gaugeColour(fraction, panel.thresholds, c);
+	const ring = panel.style === "ring";
+	return {
+		animation: animate,
+		animationDuration: 1400,
+		animationEasing: "cubicOut",
+		series: [{
+			type: "gauge",
+			startAngle: ring ? 90 : 210,
+			endAngle: ring ? -270 : -30,
+			min: 0,
+			max,
+			radius: "92%",
+			center: ["50%", ring ? "50%" : "58%"],
+			progress: {
+				show: true,
+				width: ring ? 14 : 16,
+				roundCap: true,
+				itemStyle: {
+					color: colour,
+					shadowBlur: 12,
+					shadowColor: withAlpha(colour, .5)
+				}
+			},
+			pointer: {
+				show: !ring,
+				length: "60%",
+				width: 4,
+				itemStyle: { color: colour }
+			},
+			axisLine: { lineStyle: {
+				width: ring ? 14 : 16,
+				color: [[1, c.track]]
+			} },
+			axisTick: { show: false },
+			splitLine: {
+				show: !ring,
+				length: 8,
+				lineStyle: {
+					color: c.muted,
+					width: 1
+				}
+			},
+			axisLabel: {
+				show: !ring,
+				color: c.muted,
+				fontSize: 10,
+				distance: 18,
+				fontFamily: FONT
+			},
+			anchor: {
+				show: !ring,
+				size: 10,
+				itemStyle: { color: colour }
+			},
+			title: { show: false },
+			detail: {
+				valueAnimation: animate,
+				offsetCenter: [0, ring ? 0 : "28%"],
+				fontSize: ring ? 28 : 24,
+				fontWeight: 700,
+				fontFamily: FONT,
+				color: c.text,
+				formatter: (value) => `${formatNumber(value, Number.isInteger(panel.value) ? 0 : 1)}${panel.unit ?? ""}`
+			},
+			data: [{ value: panel.value }]
+		}]
+	};
+}
+/**
+* The screen's palette laid over whatever the model wrote.
+*
+* The model's option wins on anything it sets; this only fills in the colours, the font, the
+* transparent background and the entrance animation a screen wants, so a plain `bar` series
+* still looks like it belongs.
+*/
+function chartOption(panel, c, animate) {
+	const axisStyle = {
+		axisLine: { lineStyle: { color: c.gridLine } },
+		axisLabel: {
+			color: c.muted,
+			fontFamily: FONT
+		},
+		splitLine: { lineStyle: { color: c.gridLine } }
+	};
+	const withAxisDefaults = (axis) => {
+		if (Array.isArray(axis)) return axis.map((a) => ({
+			...axisStyle,
+			...a
+		}));
+		if (axis && typeof axis === "object") return {
+			...axisStyle,
+			...axis
+		};
+		return axis;
+	};
+	const option = panel.option;
+	return {
+		backgroundColor: "transparent",
+		color: c.series,
+		textStyle: {
+			color: c.text,
+			fontFamily: FONT
+		},
+		animation: animate,
+		animationDuration: 1200,
+		animationEasing: "cubicOut",
+		grid: {
+			left: 40,
+			right: 16,
+			top: 28,
+			bottom: 28,
+			containLabel: true
+		},
+		legend: { textStyle: { color: c.muted } },
+		tooltip: { trigger: "axis" },
+		...option,
+		...option.xAxis !== void 0 ? { xAxis: withAxisDefaults(option.xAxis) } : {},
+		...option.yAxis !== void 0 ? { yAxis: withAxisDefaults(option.yAxis) } : {}
+	};
+}
+function chart3dOption(panel, c, animate) {
+	const values = panel.data.map((p) => p[2]);
+	const max = Math.max(...values);
+	const min = Math.min(...values);
+	const axis = (categories, name) => ({
+		type: categories ? "category" : "value",
+		data: categories,
+		name: "",
+		axisLine: { lineStyle: { color: c.gridLine } },
+		axisLabel: {
+			color: c.muted,
+			fontFamily: FONT
+		},
+		splitLine: { lineStyle: { color: c.gridLine } },
+		axisPointer: { show: false },
+		nameTextStyle: { color: c.muted },
+		id: name
+	});
+	const series = {
+		type: panel.type,
+		data: panel.data,
+		shading: "lambert",
+		emphasis: { itemStyle: { color: c.text } }
+	};
+	if (panel.type === "bar3D") series.bevelSize = .2;
+	if (panel.type === "scatter3D") series.symbolSize = 9;
+	if (panel.type === "line3D") series.lineStyle = {
+		width: 3,
+		color: c.accent
+	};
+	if (panel.type === "surface") series.wireframe = {
+		show: true,
+		lineStyle: { color: withAlpha(c.accent, .35) }
+	};
+	return {
+		backgroundColor: "transparent",
+		textStyle: { fontFamily: FONT },
+		tooltip: {},
+		visualMap: {
+			show: false,
+			min,
+			max,
+			dimension: 2,
+			inRange: { color: [
+				withAlpha(c.accent, .55),
+				c.accent,
+				c.series[1]
+			] }
+		},
+		xAxis3D: axis(panel.xAxis, "x"),
+		yAxis3D: axis(panel.yAxis, "y"),
+		zAxis3D: {
+			type: "value",
+			name: "",
+			axisLine: { lineStyle: { color: c.gridLine } },
+			axisLabel: {
+				color: c.muted,
+				fontFamily: FONT
+			},
+			splitLine: { lineStyle: { color: c.gridLine } }
+		},
+		grid3D: {
+			boxWidth: 100,
+			boxDepth: 80,
+			boxHeight: 60,
+			axisPointer: { show: false },
+			light: {
+				main: {
+					intensity: 1.3,
+					shadow: false,
+					alpha: 40,
+					beta: 30
+				},
+				ambient: { intensity: .5 }
+			},
+			viewControl: {
+				autoRotate: animate && panel.rotate !== false,
+				autoRotateSpeed: 8,
+				distance: 190,
+				alpha: 24,
+				beta: 35,
+				projection: "perspective"
+			},
+			environment: "none"
+		},
+		series: [series]
+	};
+}
+/**
+* A globe without a satellite photograph.
+*
+* ECharts' globe wants a texture, and the usual one is an image fetched from somewhere — which a
+* page must not do on a model's say-so. So the texture is painted here: a deep sphere with a
+* graticule, which is what a data wall's globe looks like anyway. A host that wants a real earth
+* says so in `BigscreenOptions.globe` and `earth.ts` takes over; this stays the fallback.
+*/
+function globeTexture(c, theme) {
+	if (typeof document === "undefined") return void 0;
+	const canvas = document.createElement("canvas");
+	canvas.width = 1024;
+	canvas.height = 512;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return void 0;
+	ctx.fillStyle = theme === "dark" ? "#0b1a33" : "#dbe7f5";
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	ctx.strokeStyle = withAlpha(c.accent, theme === "dark" ? .28 : .35);
+	ctx.lineWidth = 1.2;
+	for (let lng = 0; lng < 360; lng += 15) {
+		const x = lng / 360 * canvas.width;
+		ctx.beginPath();
+		ctx.moveTo(x, 0);
+		ctx.lineTo(x, canvas.height);
+		ctx.stroke();
+	}
+	for (let lat = 15; lat < 180; lat += 15) {
+		const y = lat / 180 * canvas.height;
+		ctx.beginPath();
+		ctx.moveTo(0, y);
+		ctx.lineTo(canvas.width, y);
+		ctx.stroke();
+	}
+	ctx.strokeStyle = withAlpha(c.accent, .6);
+	ctx.lineWidth = 2;
+	ctx.beginPath();
+	ctx.moveTo(0, canvas.height / 2);
+	ctx.lineTo(canvas.width, canvas.height / 2);
+	ctx.stroke();
+	return canvas.toDataURL("image/png");
+}
+/** How many of a globe's points carry a written label; the rest are on the tooltip. */
+const GLOBE_LABELS = 8;
+/**
+* The sphere itself, with and without a host-supplied earth.
+*
+* Without one, everything below the `skin` branch is the globe this plugin has always drawn: a
+* flat-lit ball with a graticule on it, every point labelled. A wire grid needs no sun — there is
+* nothing on it a shadow would tell you about — and `shading: "color"` with the light turned down
+* is what keeps it evenly readable while it turns.
+*
+* With one, the ball is a planet: lambert (or the host's choice) so the terminator falls where the
+* sun actually is, an atmosphere at the rim, and labels only on the points worth reading from
+* across a room. `postEffect` stays off — bloom and depth of field on one of six panels is a
+* frame budget spent on the wrong thing.
+*/
+function globeOption(panel, c, animate, texture, skin) {
+	const arcs = (panel.arcs ?? []).map((arc) => ({
+		coords: [arc.from, arc.to],
+		name: arc.label
+	}));
+	const points = (panel.points ?? []).map((point) => ({
+		name: point.label,
+		value: [
+			point.coord[0],
+			point.coord[1],
+			0,
+			point.value ?? 1
+		]
+	}));
+	const maxValue = Math.max(1, ...points.map((p) => p.value[3]));
+	const shading = skin ? skin.shading ?? "lambert" : "color";
+	const globe = {
+		baseTexture: texture,
+		shading,
+		environment: "none",
+		globeRadius: 78,
+		atmosphere: {
+			show: skin ? skin.atmosphere !== false : true,
+			color: c.accent,
+			glowPower: 5,
+			innerGlowPower: 2,
+			offset: 4
+		},
+		light: skin ? {
+			ambient: { intensity: skin.light?.ambient ?? .5 },
+			main: {
+				intensity: skin.light?.intensity ?? 1.1,
+				shadow: false,
+				time: skin.light?.time ?? new Date()
+			}
+		} : {
+			ambient: { intensity: 1 },
+			main: { intensity: .2 }
+		},
+		viewControl: {
+			autoRotate: animate && panel.rotate !== false,
+			autoRotateSpeed: 3,
+			distance: 150,
+			targetCoord: arcs[0]?.coords[0] ?? points[0]?.value.slice(0, 2)
+		}
+	};
+	if (skin) {
+		globe.postEffect = { enable: false };
+		if (skin.heightTexture) globe.heightTexture = skin.heightTexture;
+		if (shading === "realistic") globe.realisticMaterial = {
+			roughness: .85,
+			metalness: 0
+		};
+	}
+	const named = new Set([...points].sort((a, b) => b.value[3] - a.value[3]).slice(0, GLOBE_LABELS).map((p) => p.name));
+	return {
+		backgroundColor: "transparent",
+		...skin ? { tooltip: {
+			trigger: "item",
+			confine: true,
+			formatter: "{b}"
+		} } : {},
+		globe,
+		series: [{
+			type: "lines3D",
+			coordinateSystem: "globe",
+			blendMode: "lighter",
+			lineStyle: {
+				width: 2.5,
+				color: c.series[1],
+				opacity: .9
+			},
+			effect: {
+				show: animate,
+				period: 3,
+				trailWidth: 4,
+				trailLength: .3,
+				trailOpacity: 1,
+				trailColor: "#ffffff"
+			},
+			data: arcs
+		}, {
+			type: "scatter3D",
+			coordinateSystem: "globe",
+			symbolSize: (value) => 6 + 10 * Math.sqrt((value[3] ?? 1) / maxValue),
+			itemStyle: {
+				color: c.series[1],
+				opacity: .9
+			},
+			label: {
+				show: true,
+				formatter: skin ? (params) => params.name && named.has(params.name) ? params.name : "" : "{b}",
+				color: c.text,
+				fontSize: 11,
+				fontFamily: FONT,
+				backgroundColor: "transparent",
+				distance: 6
+			},
+			data: points
+		}]
+	};
+}
+
+//#endregion
+//#region src/earth.ts
+/**
+* The planet a globe panel is drawn on.
+*
+* echarts-gl's globe samples one equirectangular image: 2:1, longitude -180..180 left to right,
+* latitude 90..-90 top to bottom. A host that has a satellite photograph hands it over as
+* `baseTexture` and this file does nothing; a host that has only country outlines hands over
+* GeoJSON and this file paints them, because a page must not fetch a map on a model's say-so and
+* because the same outlines have to come out in two palettes.
+*
+* The canvas is 2048x1024 rather than the graticule's 1024x512: a border is one pixel wide, and
+* at half this width the coastline of anywhere smaller than France stops being a shape.
+*/
+const WIDTH = 2048;
+const HEIGHT = 1024;
+function earthColours(c, theme, skin) {
+	const dark = theme === "dark";
+	return {
+		ocean: skin?.ocean ?? (dark ? "#0b1a33" : "#dbe7f5"),
+		land: skin?.land ?? (dark ? "#334155" : "#f8fafc"),
+		border: skin?.border ?? withAlpha(c.accent, dark ? .55 : .75)
+	};
+}
+/** The rings of a geometry, as a list of polygons; anything that is not a polygon is skipped. */
+function polygonsOf(geometry) {
+	if (!geometry || !Array.isArray(geometry.coordinates)) return [];
+	if (geometry.type === "Polygon") return [geometry.coordinates];
+	if (geometry.type === "MultiPolygon") return geometry.coordinates;
+	return [];
+}
+/**
+* One ring, in canvas pixels, shifted by whole worlds.
+*
+* Longitude is unwrapped as it goes: a step of more than half the world is the antimeridian, not
+* a country, and drawing it literally paints a bar all the way across the Pacific — which is how
+* Russia and Fiji ruin an otherwise correct map. Carrying an offset instead keeps the ring
+* continuous past ±180, and the caller draws it three times, one world left and one right, so the
+* part that has left the canvas comes back on the other side.
+*/
+function traceRing(ctx, ring, shift) {
+	if (ring.length < 2) return;
+	let offset = 0;
+	let previous = ring[0][0];
+	ring.forEach((point, index) => {
+		const lon = point[0];
+		const step = lon - previous;
+		if (step > 180) offset -= 360;
+		else if (step < -180) offset += 360;
+		previous = lon;
+		const x = (lon + offset + 180) / 360 * WIDTH + shift;
+		const y = (90 - point[1]) / 180 * HEIGHT;
+		if (index === 0) ctx.moveTo(x, y);
+		else ctx.lineTo(x, y);
+	});
+	ctx.closePath();
+}
+/**
+* Rasterise a world onto a 2:1 canvas and hand it over as a data URL.
+*
+* A data URL rather than the canvas element: that is the path echarts-gl treats as an image to
+* decode, and it involves no request. A canvas element handed to `baseTexture` is a white ball.
+*
+* Rings are filled even-odd so that a country drawn as an outer ring plus holes — Lesotho inside
+* South Africa, the lakes inside Canada — comes out with the holes in it whichever way round the
+* source wound them.
+*/
+function countriesTexture(countries, colours) {
+	if (typeof document === "undefined") return void 0;
+	const canvas = document.createElement("canvas");
+	canvas.width = WIDTH;
+	canvas.height = HEIGHT;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return void 0;
+	ctx.fillStyle = colours.ocean;
+	ctx.fillRect(0, 0, WIDTH, HEIGHT);
+	ctx.fillStyle = colours.land;
+	ctx.strokeStyle = colours.border;
+	ctx.lineWidth = 1;
+	ctx.lineJoin = "round";
+	for (const feature of countries.features ?? []) for (const polygon of polygonsOf(feature?.geometry)) for (const shift of [
+		-WIDTH,
+		0,
+		WIDTH
+	]) {
+		ctx.beginPath();
+		for (const ring of polygon) traceRing(ctx, ring, shift);
+		ctx.fill("evenodd");
+		ctx.stroke();
+	}
+	return canvas.toDataURL("image/png");
+}
+/**
+* The texture a globe panel wears, by the host's precedence.
+*
+* `baseTexture` wins because a host that has a photograph has already decided; `countries` is
+* next because outlines a host bundled are still the host's map; and with neither there is the
+* graticule, which is what this plugin has always drawn and what every consumer that never heard
+* of a `globe` option keeps getting.
+*/
+function earthTexture(c, theme, skin) {
+	if (skin?.baseTexture) return skin.baseTexture;
+	if (skin?.countries) return countriesTexture(skin.countries, earthColours(c, theme, skin)) ?? globeTexture(c, theme);
+	return globeTexture(c, theme);
+}
+
+//#endregion
+//#region src/timeline.ts
+/**
+* A timeline of claims, one lane per source.
+*
+* The panel exists for the line nobody else draws: two outlets said things that cannot both be
+* true, and the red segment between their two points is the whole point of the picture. So the
+* lanes stay in the order they were given (a reader compares row against row, and a chart that
+* reorders them silently answers a different question), time runs across, and every claim is one
+* point that can be clicked back to the page it came from.
+*
+* Pure: the option is a function of the panel and the palette, so it can be tested without a
+* canvas and so the same claims draw the same picture on every screen.
+*/
+/** How many claims carry a written label; the rest are on the tooltip. */
+const TIMELINE_LABELS = 12;
+/** The default point, in pixels, for a claim with no `value`. */
+const DEFAULT_SYMBOL = 12;
+const HOUR = 60 * 60 * 1e3;
+/** How far into the window a claim has to be before its label is written on the other side. */
+const LABEL_FLIPS_AT = .62;
+const escapeHtml$1 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/**
+* The window drawn, in epoch milliseconds.
+*
+* The panel's own `from` and `to` win where they are given. Otherwise it is the claims' own range
+* with 5% on each side, because a point exactly on the axis reads as clipped rather than as first.
+* A single claim has no range to take a fraction of, so it gets an hour either way — enough for
+* the point to sit somewhere rather than in the middle of nothing.
+*/
+function timelineWindow(panel) {
+	const times = panel.items.map((item) => Date.parse(item.at));
+	const low = panel.from === void 0 ? void 0 : Date.parse(panel.from);
+	const high = panel.to === void 0 ? void 0 : Date.parse(panel.to);
+	if (low !== void 0 && high !== void 0) return [low, high];
+	const min = Math.min(...times);
+	const max = Math.max(...times);
+	const pad = (max - min) * .05 || HOUR;
+	return [low ?? min - pad, high ?? max + pad];
+}
+/**
+* Which claims have room for a label, as indexes into `panel.items`.
+*
+* A label is drawn beside its point, on its own lane, so what decides whether it can be read is
+* the empty time on either side of it within that lane — not how important the claim is and not
+* what order it was written in. Twelve labels on a wall panel is about where a reader stops
+* reading them anyway, and the rest are one hover away.
+*/
+function spacedItems(panel, max = TIMELINE_LABELS) {
+	const byLane = new Map();
+	panel.items.forEach((item, index) => {
+		const lane = byLane.get(item.lane) ?? [];
+		lane.push({
+			index,
+			at: Date.parse(item.at)
+		});
+		byLane.set(item.lane, lane);
+	});
+	const room = new Map();
+	for (const lane of byLane.values()) {
+		const sorted = [...lane].sort((a, b) => a.at - b.at);
+		sorted.forEach((entry, i) => {
+			const before = i > 0 ? entry.at - sorted[i - 1].at : Number.POSITIVE_INFINITY;
+			const after = i < sorted.length - 1 ? sorted[i + 1].at - entry.at : Number.POSITIVE_INFINITY;
+			room.set(entry.index, Math.min(before, after));
+		});
+	}
+	return new Set([...room.entries()].sort((a, b) => b[1] - a[1] || a[0] - b[0]).slice(0, max).map(([index]) => index));
+}
+/**
+* How tall a timeline of this many lanes has to be.
+*
+* 320 is the default panel, and it holds a handful of lanes comfortably. Past that the lanes get
+* a floor of 28 pixels each: below that the points of two neighbouring outlets touch, and a
+* contradiction drawn between them stops being a line between two rows.
+*/
+function timelineHeight(lanes) {
+	return Math.min(900, Math.max(320, 60 + lanes * 28));
+}
+/** How a link of each kind is drawn. `follows` is what an untyped link gets. */
+const LINK_KINDS = {
+	contradicts: {
+		danger: true,
+		dotted: false,
+		arrow: false,
+		width: 2,
+		opacity: .95
+	},
+	follows: {
+		danger: false,
+		dotted: false,
+		arrow: true,
+		width: 1.4,
+		opacity: .6
+	},
+	same: {
+		danger: false,
+		dotted: true,
+		arrow: false,
+		width: 1.4,
+		opacity: .6
+	}
+};
+/** When a claim was made, written the way a wall is read: minutes, UTC, no locale surprises. */
+function when(at) {
+	return `${new Date(at).toISOString().slice(0, 16).replace("T", " ")} UTC`;
+}
+function timelineOption(panel, c, animate) {
+	const [from, to] = timelineWindow(panel);
+	const laneName = new Map(panel.lanes.map((lane) => [lane.id, lane.name]));
+	const labelled = spacedItems(panel);
+	const maxValue = Math.max(0, ...panel.items.map((item) => item.value ?? 0));
+	const symbolSize = (value) => {
+		const raw = typeof value[2] === "number" ? value[2] : 0;
+		return raw > 0 && maxValue > 0 ? 8 + 12 * Math.sqrt(raw / maxValue) : DEFAULT_SYMBOL;
+	};
+	const series = panel.lanes.map((lane, laneIndex) => {
+		const colour = lane.color ?? c.series[laneIndex % c.series.length];
+		const data = panel.items.map((item, index) => ({
+			item,
+			index
+		})).filter(({ item }) => item.lane === lane.id).map(({ item, index }) => {
+			const at = Date.parse(item.at);
+			return {
+				name: item.label,
+				value: [
+					at,
+					lane.name,
+					item.value ?? 0
+				],
+				item,
+				label: {
+					show: labelled.has(index),
+					position: (at - from) / (to - from) > LABEL_FLIPS_AT ? "left" : "right"
+				}
+			};
+		});
+		return {
+			name: lane.name,
+			type: "scatter",
+			symbolSize,
+			itemStyle: {
+				color: colour,
+				borderColor: withAlpha(colour, .35),
+				borderWidth: 4
+			},
+			label: {
+				show: false,
+				position: "right",
+				distance: 8,
+				color: c.text,
+				fontSize: 11,
+				fontFamily: FONT,
+				formatter: "{b}"
+			},
+			emphasis: {
+				scale: 1.35,
+				label: { show: true }
+			},
+			animationDelay: (index) => index * 30,
+			data
+		};
+	});
+	const byId = new Map(panel.items.filter((item) => item.id !== void 0).map((item) => [item.id, item]));
+	const coord = (id) => {
+		const item = byId.get(id);
+		const name = item && laneName.get(item.lane);
+		return item && name !== void 0 ? [Date.parse(item.at), name] : void 0;
+	};
+	const links = (panel.links ?? []).flatMap((link) => {
+		const a = coord(link.from);
+		const b = coord(link.to);
+		if (!a || !b) return [];
+		const kind = link.kind ?? "follows";
+		const style = LINK_KINDS[kind];
+		return [{
+			coords: [a, b],
+			name: kind,
+			symbol: style.arrow ? ["none", "arrow"] : ["none", "none"],
+			symbolSize: 7,
+			lineStyle: {
+				color: style.danger ? c.bad : c.muted,
+				width: style.width,
+				type: style.dotted ? "dotted" : "solid",
+				opacity: style.opacity,
+				curveness: .15
+			}
+		}];
+	});
+	if (links.length) series.push({
+		name: "links",
+		type: "lines",
+		coordinateSystem: "cartesian2d",
+		z: 1,
+		polyline: false,
+		animationDuration: 1400,
+		data: links
+	});
+	const axisLine = { lineStyle: { color: c.gridLine } };
+	return {
+		backgroundColor: "transparent",
+		textStyle: {
+			color: c.text,
+			fontFamily: FONT
+		},
+		animation: animate,
+		animationDuration: 1200,
+		animationEasing: "cubicOut",
+		grid: {
+			left: 8,
+			right: 28,
+			top: 18,
+			bottom: 24,
+			containLabel: true
+		},
+		tooltip: {
+			trigger: "item",
+			confine: true,
+			formatter: (params) => {
+				const data = params.data;
+				const item = data?.item;
+				if (!item) return escapeHtml$1(String(params.seriesName ?? ""));
+				const rows = [`<span style="opacity:.7">${escapeHtml$1(params.seriesName ?? "")} · ${when(Date.parse(item.at))}</span>`, `<b>${escapeHtml$1(item.label)}</b>`];
+				if (item.detail) rows.push(`<span style="opacity:.85">${escapeHtml$1(item.detail)}</span>`);
+				return rows.join("<br/>");
+			}
+		},
+		xAxis: {
+			type: "time",
+			min: from,
+			max: to,
+			axisLine,
+			axisTick: { show: false },
+			axisLabel: {
+				color: c.muted,
+				fontFamily: FONT,
+				fontSize: 10,
+				hideOverlap: true
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					color: c.gridLine,
+					type: "dashed"
+				}
+			}
+		},
+		yAxis: {
+			type: "category",
+			data: panel.lanes.map((lane) => lane.name),
+			inverse: true,
+			axisLine,
+			axisTick: { show: false },
+			axisLabel: {
+				color: c.text,
+				fontFamily: FONT,
+				fontSize: 11
+			},
+			splitLine: {
+				show: true,
+				lineStyle: { color: c.gridLine }
+			},
+			splitArea: {
+				show: true,
+				areaStyle: { color: [withAlpha(c.muted, .06), "transparent"] }
+			}
+		},
+		series
+	};
+}
+
+//#endregion
+//#region src/layout3d.ts
+/**
+* A spring–electrical layout in three dimensions.
+*
+* Fruchterman–Reingold's forces, one dimension further: every pair of entities pushes apart with
+* `k²/d`, every edge pulls its ends together with `d²/k`, a weak spring holds the whole thing to
+* the origin, and a falling temperature caps how far a node may move in one step so the graph
+* cools into a shape instead of oscillating around one.
+*
+* Written here rather than taken from a dependency for two reasons. The panel needs positions in
+* three dimensions and echarts-gl's own layouts are two-dimensional; and the layout has to be
+* *steppable* — a few steps per animation frame — so the reader watches the graph pull itself
+* apart rather than being handed a settled picture. A library that runs to convergence behind a
+* promise cannot do that.
+*
+* Deterministic on purpose: the starting positions are a hash of the node ids on a sphere, so the
+* same knowledge graph draws the same picture twice running, and a screenshot test means
+* something. Nothing here calls `Math.random`.
+*
+* Complexity is O(n²) per step, which is why `layoutSteps` spends fewer steps on a bigger graph.
+*/
+/** The distance an edge settles at: the unit everything else here is measured in. */
+const LAYOUT_SPRING = 1;
+/**
+* The pull to the origin, per unit of distance from it.
+*
+* Without it a knowledge graph with two unconnected components is unbounded: nothing attracts
+* them to each other, the repulsion between them is never opposed, and one of them leaves the
+* panel and keeps going.
+*/
+const LAYOUT_GRAVITY = .08;
+/** How far a node may move in the first step, as a fraction of the graph's own radius. */
+const HEAT = .12;
+/** Below this the repulsion between two nodes in the same place would be infinite. */
+const MIN_DISTANCE = .001;
+const FNV_OFFSET = 2166136261;
+const FNV_PRIME = 16777619;
+/**
+* FNV-1a.
+*
+* The one hash in this package: the same function that decides a type's colour decides where a
+* node starts, so both are a function of the name and of nothing else.
+*/
+function hash(value) {
+	let h = FNV_OFFSET;
+	for (let i = 0; i < value.length; i++) {
+		h ^= value.charCodeAt(i);
+		h = Math.imul(h, FNV_PRIME);
+	}
+	return h >>> 0;
+}
+/**
+* How many steps a graph of `n` entities is given.
+*
+* Each step is O(n²), so the count falls as the graph grows: three hundred steps at fifty
+* entities (a small graph settles properly and still inside a second), a hundred and twenty at
+* five hundred, forty at two thousand — the panel's own limit, where a single step already costs
+* a frame. Interpolated on a log scale between those three measured points, and flat outside
+* them, so there is no size at which the number jumps.
+*/
+const STEP_ANCHORS = [
+	[50, 300],
+	[500, 120],
+	[2e3, 40]
+];
+function layoutSteps(n) {
+	const size = Math.max(1, n);
+	if (size <= STEP_ANCHORS[0][0]) return STEP_ANCHORS[0][1];
+	for (let i = 1; i < STEP_ANCHORS.length; i++) {
+		const [lowN, lowSteps] = STEP_ANCHORS[i - 1];
+		const [highN, highSteps] = STEP_ANCHORS[i];
+		if (size > highN) continue;
+		const t = (Math.log(size) - Math.log(lowN)) / (Math.log(highN) - Math.log(lowN));
+		return Math.round(lowSteps + (highSteps - lowSteps) * t);
+	}
+	return STEP_ANCHORS[STEP_ANCHORS.length - 1][1];
+}
+/**
+* How many steps are spent per animation frame while the graph settles in front of the reader.
+*
+* Small enough to leave the frame time for drawing, and large enough that a six-entity graph —
+* which is given three hundred steps — is finished in well under a second rather than in five.
+* At a few hundred entities a single step already costs most of a frame, so it drops to one and
+* the graph settles at whatever pace the machine can manage.
+*/
+function layoutChunk(n) {
+	return Math.max(1, Math.min(8, Math.round(600 / Math.max(1, n))));
+}
+/**
+* The radius a graph of `n` entities settles inside, which is also where it is started.
+*
+* A cube root, not a square root. Inside a ball of charge the repulsion at radius `r` comes only
+* from what is enclosed — `n(r/R)³` of it, over `r²` — so balancing it against a gravity of `g·r`
+* gives `R = k·∛(n/g)`. Guessing `sqrt` instead put a two-thousand-entity graph's starting sphere
+* five times too wide, and the first half of its forty steps went on collapsing rather than on
+* laying anything out.
+*/
+function layoutRadius(n) {
+	return LAYOUT_SPRING * Math.cbrt(Math.max(1, n) / LAYOUT_GRAVITY);
+}
+/**
+* Where every node starts, as `[x, y, z]` per node in the order the ids were given.
+*
+* A node the caller remembers keeps exactly the position it had, which is what stops a graph that
+* gained three entities from reshuffling the twenty that were already there. Everything else is
+* placed on a sphere by the hash of its id — a Fibonacci-like spiral from two independent hashes,
+* so ids that are one character apart do not end up next to each other — scaled to the cloud the
+* remembered nodes already occupy, or to the graph's own settling radius when there is nothing to
+* remember.
+*/
+function seedPositions(ids, seed) {
+	const out = new Float32Array(ids.length * 3);
+	let remembered = 0;
+	let rememberedRadius = 0;
+	for (const id of ids) {
+		const previous = seed?.get(id);
+		if (!previous) continue;
+		remembered++;
+		rememberedRadius += Math.hypot(previous[0], previous[1], previous[2]);
+	}
+	const radius = remembered > 0 ? Math.max(rememberedRadius / remembered, MIN_DISTANCE) : layoutRadius(ids.length);
+	for (const [index, id] of ids.entries()) {
+		const previous = seed?.get(id);
+		if (previous) {
+			out[index * 3] = previous[0];
+			out[index * 3 + 1] = previous[1];
+			out[index * 3 + 2] = previous[2];
+			continue;
+		}
+		const h = hash(id);
+		const z = h % 2048 / 2048 * 2 - 1;
+		const theta = hash(`${id}`) % 4096 * (Math.PI * 2 / 4096);
+		const ring = Math.sqrt(Math.max(0, 1 - z * z));
+		out[index * 3] = radius * ring * Math.cos(theta);
+		out[index * 3 + 1] = radius * ring * Math.sin(theta);
+		out[index * 3 + 2] = radius * z;
+	}
+	return out;
+}
+/**
+* A layout over `nodes` and `edges`, ready to be stepped.
+*
+* `seed` is the positions the same graph settled into last time, by node id; the ids it does not
+* mention are placed by their hash. An edge naming a node that is not there is skipped rather
+* than refused — the parser has already rejected those, and a layout is not the place to raise.
+*/
+function createLayout(nodes, edges, seed) {
+	const ids = nodes.map((node) => node.id);
+	const index = new Map(ids.map((id, i) => [id, i]));
+	const position = seedPositions(ids, seed);
+	const displacement = new Float64Array(position.length);
+	const count = nodes.length;
+	const steps = layoutSteps(count);
+	const links = [];
+	for (const edge of edges) {
+		const from = index.get(edge.from);
+		const to = index.get(edge.to);
+		if (from === void 0 || to === void 0 || from === to) continue;
+		links.push(from, to);
+	}
+	const k = LAYOUT_SPRING;
+	const kSquared = k * k;
+	const heat = layoutRadius(count) * HEAT;
+	let taken = 0;
+	const one = () => {
+		displacement.fill(0);
+		for (let i = 0; i < count; i++) {
+			const xi = position[i * 3];
+			const yi = position[i * 3 + 1];
+			const zi = position[i * 3 + 2];
+			for (let j = i + 1; j < count; j++) {
+				const dx = xi - position[j * 3];
+				const dy = yi - position[j * 3 + 1];
+				const dz = zi - position[j * 3 + 2];
+				const squared = Math.max(dx * dx + dy * dy + dz * dz, MIN_DISTANCE * MIN_DISTANCE);
+				const force = kSquared / squared;
+				displacement[i * 3] += dx * force;
+				displacement[i * 3 + 1] += dy * force;
+				displacement[i * 3 + 2] += dz * force;
+				displacement[j * 3] -= dx * force;
+				displacement[j * 3 + 1] -= dy * force;
+				displacement[j * 3 + 2] -= dz * force;
+			}
+		}
+		for (let e = 0; e < links.length; e += 2) {
+			const a = links[e];
+			const b = links[e + 1];
+			const dx = position[a * 3] - position[b * 3];
+			const dy = position[a * 3 + 1] - position[b * 3 + 1];
+			const dz = position[a * 3 + 2] - position[b * 3 + 2];
+			const distance = Math.max(Math.hypot(dx, dy, dz), MIN_DISTANCE);
+			const force = distance / k;
+			displacement[a * 3] -= dx * force;
+			displacement[a * 3 + 1] -= dy * force;
+			displacement[a * 3 + 2] -= dz * force;
+			displacement[b * 3] += dx * force;
+			displacement[b * 3 + 1] += dy * force;
+			displacement[b * 3 + 2] += dz * force;
+		}
+		const temperature = Math.max(heat * (1 - taken / steps), heat * .01);
+		for (let i = 0; i < count; i++) {
+			const dx = displacement[i * 3] - position[i * 3] * LAYOUT_GRAVITY;
+			const dy = displacement[i * 3 + 1] - position[i * 3 + 1] * LAYOUT_GRAVITY;
+			const dz = displacement[i * 3 + 2] - position[i * 3 + 2] * LAYOUT_GRAVITY;
+			const length = Math.hypot(dx, dy, dz);
+			if (length < MIN_DISTANCE) continue;
+			const scale = Math.min(length, temperature) / length;
+			position[i * 3] += dx * scale;
+			position[i * 3 + 1] += dy * scale;
+			position[i * 3 + 2] += dz * scale;
+		}
+		taken++;
+	};
+	return {
+		step(request = 1) {
+			for (let i = 0; i < request && taken < steps; i++) one();
+		},
+		positions: () => position,
+		get done() {
+			return taken >= steps;
+		},
+		steps,
+		get taken() {
+			return taken;
+		}
+	};
+}
+
+//#endregion
+//#region src/graph3d.ts
+/**
+* The vocabulary every knowledge graph panel is drawn in, and the flat mode's own option.
+*
+* A type's colour, a node's degree, the legend in the corner and the tooltip are the same in both
+* modes and live here. `orbit.ts` — the default — turns the entities into a model in space;
+* `graph3dOption` below is `flat`, echarts-gl's `graphGL`: force-atlas2 on the GPU, drawn on a
+* plane with an orthographic camera. It draws more nodes at once than the model does, which is
+* the reason it is still here.
+*
+* Pure: the option is a function of the panel and the palette.
+*/
+/** How many entities carry a written label. The rest are one hover away. */
+const GRAPH_LABELS = 20;
+/**
+* How the layout is run.
+*
+* `steps` is iterations per frame and `maxSteps` is where the layout stops. Settling takes
+* `maxSteps / steps` frames — 125 of them, a shade over two seconds at sixty frames a second,
+* which is long enough to watch a graph of five hundred entities pull itself apart and short
+* enough that nobody waits for it. When nothing is meant to move, the same thousand iterations
+* are spent four frames deep and the reader gets the settled graph instead of the settling.
+*
+* (echarts-gl 2.x bounds the layout with `maxSteps`; there is no convergence threshold to set.)
+*/
+const GRAPH_SETTLE_STEPS = 8;
+const GRAPH_INSTANT_STEPS = 250;
+const GRAPH_MAX_STEPS = 1e3;
+/** How many types the corner legend lists before it would start covering the graph. */
+const GRAPH_LEGEND_ROWS = 12;
+/** How many of the palette's series colours a type may be hashed onto. */
+const GRAPH_COLOURS = 7;
+/**
+* Where the graph starts, and where it is pulled to.
+*
+* echarts-gl scatters the first positions at random inside the panel and fits the camera to them
+* once — `_updateCamera` refits only when the graph has left the frame entirely — so a random
+* start is why a settled graph sits wherever its first throw of the dice happened to land. Seeding
+* the nodes on a ring instead fixes the frame, and makes the same entities draw the same picture
+* twice running.
+*
+* The frame it fits is not centred on that ring: it pads the left by a fifth of the padded width,
+* which leaves the ring's own centre 0.16 of a radius right of the middle. So the layout's
+* `gravityCenter` is moved the same distance the other way, and the settled graph comes out in
+* the middle of the panel.
+*/
+const SEED_RADIUS = 45;
+const SEED_OFFSET = .16;
+/**
+* The colour of a type.
+*
+* Hashed rather than handed out in order of appearance, because two graph panels on one wall must
+* colour `outlet` the same way, and the order the types happen to appear in is different in each
+* of them. A hash means two types can land on the same colour, which is what the legend in the
+* corner is for; a panel that cares says so in `types`.
+*
+* Only the first seven series colours are in the ring. The eighth is a second cyan a shade off
+* the accent, and two types a reader cannot tell apart is worse than two types sharing a colour
+* the legend admits to sharing.
+*
+* A node with no type gets the muted colour: it is not a category, so it does not get one of the
+* colours the categories are being told apart by.
+*/
+function typeColour(type, c, overrides) {
+	if (type === void 0) return c.muted;
+	const ring = c.series.slice(0, GRAPH_COLOURS);
+	return overrides?.[type] ?? ring[hash(type) % ring.length];
+}
+/** How many edges touch each node. Both ends count, so a self-edge counts twice. */
+function degrees(panel) {
+	const count = new Map(panel.nodes.map((node) => [node.id, 0]));
+	for (const edge of panel.edges) for (const id of [edge.from, edge.to]) {
+		const current = count.get(id);
+		if (current !== void 0) count.set(id, current + 1);
+	}
+	return count;
+}
+/**
+* The key drawn in the panel's corner: every type that appears, once, in its own colour.
+*
+* Nodes first, then edges, each in the order it first appears — which is the order the model
+* wrote them in, and therefore the order it was thinking in. An untyped graph gets no legend at
+* all rather than an empty box.
+*/
+function graphLegend(panel, c) {
+	const entries = [];
+	const seen = new Set();
+	const add = (shape, type) => {
+		if (type === void 0) return;
+		const key = `${shape}:${type}`;
+		if (seen.has(key)) return;
+		seen.add(key);
+		entries.push({
+			label: type,
+			colour: typeColour(type, c, panel.types),
+			shape
+		});
+	};
+	for (const node of panel.nodes) add("node", node.type);
+	for (const edge of panel.edges) add("edge", edge.type);
+	return entries.slice(0, GRAPH_LEGEND_ROWS);
+}
+const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/**
+* What an entity or an edge says on hover, in both modes.
+*
+* Escaped by hand: ECharts renders a formatter's return as HTML and every name here was written
+* by a model. An edge is told apart by `dataType` in the flat series and by carrying its own
+* `coords` in the orbit one, which is the only thing the two series disagree about.
+*/
+function graphTooltip(params) {
+	const data = params.data ?? {};
+	if (params.dataType === "edge" || data.coords !== void 0) return escapeHtml(data.edgeType ?? "linked to");
+	const rows = [`<b>${escapeHtml(data.name ?? "")}</b>`];
+	if (data.nodeType) rows.push(`<span style="opacity:.7">${escapeHtml(data.nodeType)}</span>`);
+	rows.push(`<span style="opacity:.7">${data.degree ?? 0} connections</span>`);
+	return rows.join("<br/>");
+}
+/**
+* The `flat` mode: `graphGL`, laid out by force-atlas2 on the GPU.
+*
+* Unchanged since it was written, byte for byte, and pinned by a test that says so — a panel that
+* asked for this mode asked for exactly this picture. The 3D model is `graphOrbitOption`, which
+* takes positions rather than computing them, because it is stepped in front of the reader.
+*/
+function graph3dOption(panel, c, animate) {
+	const degree = degrees(panel);
+	const weight = (node) => node.value ?? degree.get(node.id) ?? 0;
+	const maxWeight = Math.max(1, ...panel.nodes.map(weight));
+	const named = new Set([...panel.nodes].sort((a, b) => (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)).slice(0, GRAPH_LABELS).map((node) => node.id));
+	if (panel.focus !== void 0) named.add(panel.focus);
+	const radius = SEED_RADIUS * Math.sqrt(panel.nodes.length) + 60;
+	const nodes = panel.nodes.map((node, index) => {
+		const focused = node.id === panel.focus;
+		const symbolSize = (focused ? 6 : 0) + 6 + 16 * Math.sqrt(weight(node) / maxWeight);
+		const angle = index / panel.nodes.length * Math.PI * 2;
+		return {
+			id: node.id,
+			name: node.name,
+			x: radius * Math.cos(angle),
+			y: radius * Math.sin(angle),
+			nodeType: node.type,
+			degree: degree.get(node.id) ?? 0,
+			node,
+			symbolSize,
+			itemStyle: {
+				color: focused ? c.accent : typeColour(node.type, c, panel.types),
+				opacity: .95
+			},
+			label: focused ? {
+				show: true,
+				fontSize: 13,
+				fontWeight: "bold",
+				color: c.accent
+			} : { show: named.has(node.id) }
+		};
+	});
+	const edges = panel.edges.map((edge) => ({
+		source: edge.from,
+		target: edge.to,
+		edgeType: edge.type,
+		lineStyle: {
+			color: typeColour(edge.type, c, panel.types),
+			opacity: .55,
+			width: 1.5
+		}
+	}));
+	const settling = animate && panel.rotate !== false;
+	return {
+		backgroundColor: "transparent",
+		textStyle: {
+			color: c.text,
+			fontFamily: FONT
+		},
+		tooltip: {
+			trigger: "item",
+			confine: true,
+			formatter: graphTooltip
+		},
+		series: [{
+			type: "graphGL",
+			layout: "forceAtlas2",
+			forceAtlas2: {
+				GPU: true,
+				steps: settling ? GRAPH_SETTLE_STEPS : GRAPH_INSTANT_STEPS,
+				maxSteps: GRAPH_MAX_STEPS,
+				gravity: .6,
+				scaling: 5,
+				gravityCenter: [-SEED_OFFSET * radius, 0],
+				edgeWeightInfluence: 0,
+				repulsionByDegree: true,
+				preventOverlap: true
+			},
+			roam: true,
+			focusNodeAdjacency: true,
+			zoom: 1,
+			label: {
+				show: false,
+				position: "right",
+				distance: 4,
+				color: c.text,
+				fontSize: 11,
+				fontFamily: FONT,
+				formatter: "{b}"
+			},
+			emphasis: { label: { show: true } },
+			lineStyle: {
+				color: c.gridLine,
+				width: 1,
+				opacity: .35
+			},
+			nodes,
+			edges
+		}]
+	};
+}
+
+//#endregion
+//#region src/orbit.ts
+/**
+* The knowledge graph as a model you look at, rather than a picture you look down on.
+*
+* `layout3d.ts` puts the entities in space; this puts a camera in there with them. A `grid3D`
+* holds the coordinate system, a `scatter3D` draws the entities and a `line3D` draws the edges,
+* and the box the three of them share is deliberately invisible: a knowledge graph has no axes
+* to read, and the only thing an axis would add is furniture.
+*
+* Pure: the option is a function of the panel, the palette and the positions. The positions come
+* from outside because the layout is stepped — the mount loop hands the same builder a slightly
+* different set of coordinates every frame while the graph settles.
+*/
+/**
+* The half-width of the space the graph is drawn in, in the box's own units.
+*
+* Everything about the camera — the distance it sits at, how big a node reads at that distance —
+* is a constant, so the graph has to be scaled to it rather than the other way round. The layout
+* works in units of its own spring length and a graph of two thousand is naturally four times
+* wider than a graph of six; `orbitScale` divides that difference out, and this is what is left.
+*/
+const ORBIT_EXTENT = 50;
+/** The cube the coordinate system is drawn in. Equal on all three sides, or the shape is a lie. */
+const ORBIT_BOX = 140;
+/** How solid an edge is drawn. */
+const EDGE_OPACITY = .6;
+/**
+* The camera: how far out it sits, how fast it goes round, and the field of view it does it with.
+*
+* The distance is not a matter of taste. The graph is fitted to the box, so its furthest entity
+* sits half a box from the middle — and as the camera turns, that entity comes round to the near
+* side, where the perspective divide is over a distance of `ORBIT_DISTANCE - ORBIT_BOX / 2`
+* rather than `ORBIT_DISTANCE`. A camera framed for the middle therefore crops the graph twice a
+* revolution, which is exactly what it did at 180: an entity and its edge walked off the bottom
+* of the panel and back. So the distance is set from the near face, with room left over for the
+* labels, which stick out further than the entities they belong to.
+*
+* echarts-gl's grid3D camera has a vertical field of view of 50 degrees and is not configurable
+* through `viewControl`, so it is written down here rather than passed.
+*/
+const ORBIT_FOV = 50;
+const ORBIT_DISTANCE = 260;
+const ORBIT_SPEED = 6;
+/**
+* The graph's own bounding box, as the transform that puts it in the middle of the panel.
+*
+* Its box, not its bounding sphere, and its centre, not the origin. A settled graph is rarely a
+* ball: the eight-entity example comes out about 72 units wide, 26 tall and 40 deep, centred six
+* units left of where it started. Scaling that by its largest radius left it filling a fifth of
+* the panel and sitting off to one side — correct, and unreadable. Fitting the longest of the
+* three spans instead fills the frame in whichever direction the graph is actually long, and
+* because every other span is shorter by definition, nothing lands outside the box.
+*/
+function orbitFrame(positions) {
+	if (positions.length < 3) return {
+		centre: [
+			0,
+			0,
+			0
+		],
+		scale: 1
+	};
+	const low = [
+		Infinity,
+		Infinity,
+		Infinity
+	];
+	const high = [
+		-Infinity,
+		-Infinity,
+		-Infinity
+	];
+	for (let i = 0; i < positions.length; i += 3) for (let axis = 0; axis < 3; axis++) {
+		low[axis] = Math.min(low[axis], positions[i + axis]);
+		high[axis] = Math.max(high[axis], positions[i + axis]);
+	}
+	const centre = [
+		(low[0] + high[0]) / 2,
+		(low[1] + high[1]) / 2,
+		(low[2] + high[2]) / 2
+	];
+	const half = Math.max((high[0] - low[0]) / 2, (high[1] - low[1]) / 2, (high[2] - low[2]) / 2);
+	return {
+		centre,
+		scale: half > 0 ? ORBIT_EXTENT / half : 1
+	};
+}
+/** How many vertices one edge contributes to that polyline. */
+const EDGE_VERTICES = 4;
+/**
+* The two series' data, from the panel and wherever the layout has got to.
+*
+* Built as one thing because the edges have to agree with the nodes: an edge is drawn between two
+* points, not between two ids, so a frame that moved the nodes and left the edges behind would
+* detach every line from both its ends.
+*/
+function graphOrbitData(panel, c, positions) {
+	const degree = degrees(panel);
+	const weight = (node) => node.value ?? degree.get(node.id) ?? 0;
+	const maxWeight = Math.max(1, ...panel.nodes.map(weight));
+	const named = new Set([...panel.nodes].sort((a, b) => (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)).slice(0, GRAPH_LABELS).map((node) => node.id));
+	if (panel.focus !== void 0) named.add(panel.focus);
+	const { centre, scale } = orbitFrame(positions);
+	const at = (index) => [
+		(positions[index * 3] - centre[0]) * scale,
+		(positions[index * 3 + 1] - centre[1]) * scale,
+		(positions[index * 3 + 2] - centre[2]) * scale
+	];
+	const place = new Map();
+	const nodes = panel.nodes.map((node, index) => {
+		const focused = node.id === panel.focus;
+		const [x, y, z] = at(index);
+		place.set(node.id, [
+			x,
+			y,
+			z
+		]);
+		return {
+			id: node.id,
+			name: node.name,
+			value: [
+				x,
+				y,
+				z,
+				(focused ? 6 : 0) + 6 + 16 * Math.sqrt(weight(node) / maxWeight)
+			],
+			itemStyle: {
+				color: focused ? c.accent : typeColour(node.type, c, panel.types),
+				opacity: .95
+			},
+			labelled: named.has(node.id),
+			nodeType: node.type,
+			degree: degree.get(node.id) ?? 0,
+			node
+		};
+	});
+	const origin = [
+		0,
+		0,
+		0
+	];
+	const edges = [];
+	for (const edge of panel.edges) {
+		const from = place.get(edge.from) ?? origin;
+		const to = place.get(edge.to) ?? origin;
+		const color = typeColour(edge.type, c, panel.types);
+		for (const [value, opacity] of [
+			[from, 0],
+			[from, EDGE_OPACITY],
+			[to, EDGE_OPACITY],
+			[to, 0]
+		]) edges.push({
+			value,
+			lineStyle: {
+				color,
+				opacity
+			}
+		});
+	}
+	return {
+		nodes,
+		edges
+	};
+}
+/**
+* An axis that exists to hold coordinates and to show nothing.
+*
+* Note what is *not* here: `axisLine: { show: false }`. echarts-gl records the axis line's two
+* endpoints only while it is drawing that line, and the camera-change handler then reads them to
+* decide which way the labels face — so an axis with its line switched off throws
+* `Cannot read properties of null` out of `_updateAxisLabelAlign` on every frame the camera
+* moves, which on an auto-rotating panel is all of them. The box is hidden with `grid3D.show`
+* instead, which takes the whole thing — faces, axes, labels — out of the scene and skips that
+* handler entirely.
+*/
+function hiddenAxis() {
+	return {
+		type: "value",
+		name: "",
+		min: -ORBIT_EXTENT,
+		max: ORBIT_EXTENT,
+		axisPointer: { show: false }
+	};
+}
+/**
+* The whole scene.
+*
+* `animate` is the host's word and `panel.rotate` is the fence's; either one saying no stops the
+* camera. ECharts' own animation is off throughout — on each series as well as at the root,
+* because echarts-gl's vertex animation asks the *series* whether it may animate and does not
+* fall back to the screen's answer. While the graph settles this option's data is replaced every
+* frame, and an animated transition would spend that frame interpolating towards positions the
+* next frame has already superseded.
+*/
+function graphOrbitOption(panel, c, animate, positions) {
+	const data = graphOrbitData(panel, c, positions);
+	const name = (params) => params.data?.name ?? "";
+	return {
+		backgroundColor: "transparent",
+		textStyle: {
+			color: c.text,
+			fontFamily: FONT
+		},
+		animation: false,
+		tooltip: {
+			trigger: "item",
+			confine: true,
+			formatter: graphTooltip
+		},
+		xAxis3D: hiddenAxis(),
+		yAxis3D: hiddenAxis(),
+		zAxis3D: hiddenAxis(),
+		grid3D: {
+			show: false,
+			boxWidth: ORBIT_BOX,
+			boxHeight: ORBIT_BOX,
+			boxDepth: ORBIT_BOX,
+			environment: "none",
+			axisPointer: { show: false },
+			light: {
+				main: {
+					intensity: 1.2,
+					shadow: false,
+					alpha: 30,
+					beta: 40
+				},
+				ambient: { intensity: .6 }
+			},
+			viewControl: {
+				projection: "perspective",
+				autoRotate: animate && panel.rotate !== false,
+				autoRotateSpeed: ORBIT_SPEED,
+				autoRotateAfterStill: 4,
+				distance: ORBIT_DISTANCE,
+				alpha: 18,
+				beta: 25,
+				damping: .85
+			}
+		},
+		series: [{
+			type: "line3D",
+			coordinateSystem: "cartesian3D",
+			animation: false,
+			lineStyle: { width: 1.6 },
+			silent: true,
+			data: data.edges
+		}, {
+			type: "scatter3D",
+			coordinateSystem: "cartesian3D",
+			animation: false,
+			symbolSize: (value) => value[3],
+			itemStyle: { opacity: .95 },
+			label: {
+				show: true,
+				formatter: (params) => params.data?.labelled ? params.data.name ?? "" : "",
+				color: c.text,
+				fontSize: 11,
+				fontFamily: FONT,
+				distance: 4,
+				backgroundColor: "transparent"
+			},
+			emphasis: {
+				label: {
+					show: true,
+					formatter: name
+				},
+				itemStyle: { opacity: 1 }
+			},
+			data: data.nodes
+		}]
+	};
+}
+
+//#endregion
+//#region src/positions.ts
+/**
+* Where each graph settled last time it was drawn.
+*
+* A streamed answer re-renders the same fence as the model writes it: a graph of twenty entities
+* becomes the same graph of twenty-three, and the reconciler tears the panel down and mounts a
+* new one. Without a memory the new layout starts from the hash again, every node lands somewhere
+* else, and the reader — who was reading it — watches the picture they had just understood
+* dissolve because three names arrived.
+*
+* So the positions are kept by node id, under a key that deliberately does *not* depend on the
+* node set: the ids that are still there resume exactly where they were, and only the new ones
+* have to find a place. It is module-level state, which is what makes it survive the remount; it
+* is bounded so a long conversation full of graphs cannot grow it without limit, and it is
+* forgettable so tests do not leak into each other.
+*/
+/** How many graphs are remembered at once. Beyond this the least recently used one is dropped. */
+const REMEMBERED_GRAPHS = 8;
+/** Insertion order is the recency order: `Map` iterates oldest first, which is the whole trick. */
+const settled = new Map();
+/**
+* What identifies a graph across a re-render.
+*
+* The title, because that is the one thing a model rewriting its own fence keeps stable while the
+* entities underneath it change. A panel with no title falls back to its first entity, which is
+* the next most stable thing there is — a graph usually keeps the entity it was drawn around.
+* The prefix keeps a panel titled `kyiv` from colliding with an untitled one whose first node is
+* `kyiv`.
+*/
+function graphKey(panel) {
+	return panel.title !== void 0 ? `title:${panel.title}` : `node:${panel.nodes[0]?.id ?? ""}`;
+}
+/** The positions this graph settled into last time, by node id, or nothing. */
+function recallPositions(key) {
+	const found = settled.get(key);
+	if (!found) return void 0;
+	settled.delete(key);
+	settled.set(key, found);
+	return found;
+}
+/**
+* Remember where a graph settled.
+*
+* The positions are copied out of the buffer rather than kept by reference: `Layout.positions()`
+* hands back the live array, and a layout that is still running would otherwise have this
+* remember whatever it became several frames later.
+*/
+function rememberPositions(key, ids, positions) {
+	const map = new Map();
+	for (const [index, id] of ids.entries()) map.set(id, [
+		positions[index * 3],
+		positions[index * 3 + 1],
+		positions[index * 3 + 2]
+	]);
+	settled.delete(key);
+	settled.set(key, map);
+	while (settled.size > REMEMBERED_GRAPHS) {
+		const oldest = settled.keys().next();
+		if (oldest.done) break;
+		settled.delete(oldest.value);
+	}
+}
+/** Drop every remembered graph. For tests, and for a host tearing a page down. */
+function forgetPositions() {
+	settled.clear();
+}
+
+//#endregion
+export { EDGE_VERTICES, GRAPH_LABELS, GRAPH_LEGEND_ROWS, GRAPH_MAX_STEPS, GRAPH_SETTLE_STEPS, LAYOUT_GRAVITY, LAYOUT_SPRING, ORBIT_BOX, ORBIT_DISTANCE, ORBIT_EXTENT, ORBIT_FOV, REMEMBERED_GRAPHS, TIMELINE_LABELS, chart3dOption, chartOption, countriesTexture, createLayout, degrees, earthColours, earthTexture, forgetPositions, formatNumber, gaugeColour, gaugeOption, globeOption, globeTexture, graph3dOption, graphKey, graphLegend, graphOrbitData, graphOrbitOption, graphTooltip, hash, layoutChunk, layoutRadius, layoutSteps, orbitFrame, palette, recallPositions, rememberPositions, seedPositions, spacedItems, timelineHeight, timelineOption, timelineWindow, typeColour, withAlpha };