@ai-gui/plugin-bigscreen 0.36.3 → 0.37.0

package/dist/{mount-DPyPP9Ha.cjs → mount-BTQc08Gl.cjs}

@@ -1,9 +1,9 @@
 "use strict";
-const require_options = require('./options-BpHnWRpI.cjs');
-const echarts_charts = require_options.__toESM(require("echarts/charts"));
-const echarts_components = require_options.__toESM(require("echarts/components"));
-const echarts_core = require_options.__toESM(require("echarts/core"));
-const echarts_renderers = require_options.__toESM(require("echarts/renderers"));
+const require_positions = require('./positions-BWG0m0U9.cjs');
+const echarts_charts = require_positions.__toESM(require("echarts/charts"));
+const echarts_components = require_positions.__toESM(require("echarts/components"));
+const echarts_core = require_positions.__toESM(require("echarts/core"));
+const echarts_renderers = require_positions.__toESM(require("echarts/renderers"));
 
 //#region src/mount.ts
 (0, echarts_core.use)([
@@ -36,7 +36,9 @@ const DEFAULT_HEIGHT = {
 	rank: 220,
 	chart: 240,
 	chart3d: 280,
-	globe: 300
+	globe: 300,
+	timeline: 320,
+	graph3d: 320
 };
 const easeOut = (t) => 1 - Math.pow(1 - t, 3);
 function el(tag, attrs = {}, text) {
@@ -49,7 +51,7 @@ function el(tag, attrs = {}, text) {
 function countUp(node, panel, animate) {
 	const decimals = panel.decimals ?? 0;
 	const show = (value) => {
-		node.textContent = `${panel.prefix ?? ""}${require_options.formatNumber(value, decimals)}`;
+		node.textContent = `${panel.prefix ?? ""}${require_positions.formatNumber(value, decimals)}`;
 	};
 	if (!animate || typeof requestAnimationFrame !== "function") {
 		show(panel.value);
@@ -81,7 +83,7 @@ function sparkline(values, c, width, height) {
 	svg.setAttribute("aria-hidden", "true");
 	const fill = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
 	fill.setAttribute("points", `0,${height} ${points.join(" ")} ${width},${height}`);
-	fill.setAttribute("fill", require_options.withAlpha(c.accent, .18));
+	fill.setAttribute("fill", require_positions.withAlpha(c.accent, .18));
 	const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
 	line.setAttribute("points", points.join(" "));
 	line.setAttribute("fill", "none");
@@ -97,7 +99,7 @@ function mountKpi(body, panel, c, animate) {
 	const row = el("div", { class: "aigui-bs-kpi-row" });
 	const value = el("span", { class: "aigui-bs-kpi-value" });
 	value.style.color = c.accent;
-	value.style.textShadow = `0 0 18px ${require_options.withAlpha(c.accent, .45)}`;
+	value.style.textShadow = `0 0 18px ${require_positions.withAlpha(c.accent, .45)}`;
 	row.appendChild(value);
 	if (panel.unit) row.appendChild(el("span", { class: "aigui-bs-kpi-unit" }, panel.unit));
 	body.appendChild(row);
@@ -105,7 +107,7 @@ function mountKpi(body, panel, c, animate) {
 	if (panel.delta !== void 0) {
 		const up = panel.delta >= 0;
 		const good = (panel.upIsGood ?? true) === up;
-		const delta = el("span", { class: "aigui-bs-kpi-delta" }, `${up ? "▲" : "▼"} ${require_options.formatNumber(Math.abs(panel.delta) * 100, 1)}%`);
+		const delta = el("span", { class: "aigui-bs-kpi-delta" }, `${up ? "▲" : "▼"} ${require_positions.formatNumber(Math.abs(panel.delta) * 100, 1)}%`);
 		delta.style.color = good ? c.good : c.bad;
 		meta.appendChild(delta);
 	}
@@ -132,12 +134,12 @@ function mountRank(body, panel, c, animate) {
 		track.style.background = c.track;
 		const fill = el("span", { class: "aigui-bs-rank-fill" });
 		const colour = index === 0 ? c.accent : c.series[index % (c.series.length - 1) + 1];
-		fill.style.background = `linear-gradient(90deg, ${require_options.withAlpha(colour, .55)}, ${colour})`;
-		fill.style.boxShadow = `0 0 10px ${require_options.withAlpha(colour, .5)}`;
+		fill.style.background = `linear-gradient(90deg, ${require_positions.withAlpha(colour, .55)}, ${colour})`;
+		fill.style.boxShadow = `0 0 10px ${require_positions.withAlpha(colour, .5)}`;
 		const width = `${Math.max(2, Math.max(item.value, 0) / max * 100)}%`;
 		fill.style.width = animate ? "0%" : width;
 		track.appendChild(fill);
-		const value = el("span", { class: "aigui-bs-rank-value" }, `${require_options.formatNumber(item.value, Number.isInteger(item.value) ? 0 : 1)}${panel.unit ?? ""}`);
+		const value = el("span", { class: "aigui-bs-rank-value" }, `${require_positions.formatNumber(item.value, Number.isInteger(item.value) ? 0 : 1)}${panel.unit ?? ""}`);
 		row.append(rank, name, track, value);
 		body.appendChild(row);
 		bars.push({
@@ -171,12 +173,13 @@ function whenSized(body, fn) {
 	const handle = requestAnimationFrame(fn);
 	return () => cancelAnimationFrame(handle);
 }
-function mountChart(body, option, theme) {
+function mountChart(body, option, theme, ready) {
 	let chart;
 	let unfollow;
 	const cancel = whenSized(body, () => {
 		chart = (0, echarts_core.init)(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
 		chart.setOption(option);
+		ready?.(chart);
 		unfollow = follow(body, chart);
 	});
 	return () => {
@@ -185,10 +188,17 @@ function mountChart(body, option, theme) {
 		chart?.dispose();
 	};
 }
-function mountGl(body, build, theme, fallback) {
+/**
+* A chart that needs WebGL, with an optional loop running against it.
+*
+* `ready` may hand back a teardown of its own — the settling loop does — and it is run before the
+* chart is disposed, because a frame that lands on a disposed chart throws.
+*/
+function mountGl(body, build, theme, fallback, ready) {
 	let chart;
 	let unfollow;
 	let cancel;
+	let stop;
 	let disposed = false;
 	loadGl().then(() => {
 		if (disposed) return;
@@ -196,6 +206,7 @@ function mountGl(body, build, theme, fallback) {
 			if (disposed) return;
 			chart = (0, echarts_core.init)(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
 			chart.setOption(build());
+			stop = ready?.(chart) ?? void 0;
 			unfollow = follow(body, chart);
 		});
 	}).catch(() => {
@@ -207,6 +218,7 @@ function mountGl(body, build, theme, fallback) {
 	return () => {
 		disposed = true;
 		cancel?.();
+		stop?.();
 		unfollow?.();
 		chart?.dispose();
 	};
@@ -214,7 +226,103 @@ function mountGl(body, build, theme, fallback) {
 function note(body, text) {
 	body.replaceChildren(el("div", { class: "aigui-bs-note" }, text));
 }
-function mountPanel(panel, definition, c, animate) {
+/**
+* What a click on a claim does.
+*
+* The host wins. A page that passed `onItemClick` has its own idea of what a claim is — a drawer,
+* a route, a second panel — and must not also get a tab it never asked for. With no handler the
+* claim's own `url` opens in a new tab with the opener cut off; the parser has already refused
+* anything that is not `http` or `https`, because this argument reaches `window.open`.
+*/
+function openTimelineItem(item, events) {
+	if (events?.onItemClick) {
+		events.onItemClick(item);
+		return;
+	}
+	if (item.url && typeof window !== "undefined") window.open(item.url, "_blank", "noopener,noreferrer");
+}
+function bindTimeline(chart, events) {
+	chart.on("click", (params) => {
+		const item = params.data?.item;
+		if (item) openTimelineItem(item, events);
+	});
+}
+function bindGraph(chart, events) {
+	chart.on("click", (params) => {
+		const event = params;
+		if (event.dataType === "edge") return;
+		const node = event.data?.node;
+		if (node) events?.onNodeClick?.(node);
+	});
+}
+/**
+* Step the layout in front of the reader, and stop.
+*
+* A knowledge graph pulling itself apart is the panel telling you what it found: the clusters
+* arrive one after another and you watch which entities go with which. So the layout is stepped a
+* few steps per frame rather than run to convergence behind a promise, and only the two series'
+* data is pushed each time — merged, not replaced, so the camera and the lights survive the
+* update and the graph does not jump back to its opening pose sixty times a second.
+*
+* When it has settled the loop ends for good and the positions are remembered, which is what lets
+* the next render of the same fence resume rather than reshuffle. The camera keeps turning after:
+* that is echarts-gl's own animation, not this one.
+*/
+function settleGraph(chart, panel, c, layout, key) {
+	const ids = panel.nodes.map((node) => node.id);
+	const remember = () => require_positions.rememberPositions(key, ids, layout.positions());
+	if (layout.done || typeof requestAnimationFrame !== "function") {
+		remember();
+		return () => {};
+	}
+	const chunk = require_positions.layoutChunk(panel.nodes.length);
+	const tick = () => {
+		layout.step(chunk);
+		const data = require_positions.graphOrbitData(panel, c, layout.positions());
+		chart.setOption({ series: [{ data: data.edges }, { data: data.nodes }] }, {
+			notMerge: false,
+			lazyUpdate: false
+		});
+		if (layout.done) {
+			remember();
+			return;
+		}
+		handle = requestAnimationFrame(tick);
+	};
+	let handle = requestAnimationFrame(tick);
+	return () => cancelAnimationFrame(handle);
+}
+/**
+* The key to a graph's colours, in HTML over the canvas.
+*
+* HTML rather than an ECharts legend: the graph is a WebGL series with no categories for a legend
+* component to read, and a corner of text a reader can select beats a row of chart furniture. It
+* is `pointer-events:none` so it never eats a click meant for the graph behind it, and an untyped
+* graph gets nothing at all rather than an empty box.
+*
+* It hangs off the panel rather than off the chart's own element, because ECharts empties the
+* element it is initialised on — a legend appended there is gone the moment the graph appears,
+* which is exactly what happened the first time this was drawn.
+*/
+function graphLegendNode(panel, c) {
+	const entries = require_positions.graphLegend(panel, c);
+	if (!entries.length) return void 0;
+	const box = el("div", { class: "aigui-bs-graph-legend" });
+	for (const entry of entries) {
+		const row = el("div", { class: "aigui-bs-graph-legend-row" });
+		const swatch = el("i", { class: `aigui-bs-graph-legend-${entry.shape === "node" ? "dot" : "line"}` });
+		swatch.style.background = entry.colour;
+		row.append(swatch, document.createTextNode(entry.label));
+		box.appendChild(row);
+	}
+	return box;
+}
+/** The body height a panel gets when it did not ask for one. */
+function bodyHeight(panel) {
+	if (panel.kind === "timeline") return require_positions.timelineHeight(panel.lanes.length);
+	return DEFAULT_HEIGHT[panel.kind];
+}
+function mountPanel(panel, definition, c, animate, earth, events) {
 	const node = el("section", {
 		class: "aigui-bs-panel",
 		"data-aigui-bigscreen-panel": panel.kind
@@ -222,7 +330,7 @@ function mountPanel(panel, definition, c, animate) {
 	const span = Math.min(panel.span ?? 4, definition.columns);
 	node.style.gridColumn = `span ${span}`;
 	if (span * 2 > definition.columns) node.setAttribute("data-aigui-bigscreen-wide", "");
-	node.style.borderColor = require_options.withAlpha(c.accent, definition.theme === "dark" ? .22 : .18);
+	node.style.borderColor = require_positions.withAlpha(c.accent, definition.theme === "dark" ? .22 : .18);
 	if (panel.title) {
 		const head = el("header", { class: "aigui-bs-panel-title" }, panel.title);
 		const mark = el("i", { class: "aigui-bs-panel-mark" });
@@ -232,7 +340,7 @@ function mountPanel(panel, definition, c, animate) {
 		node.appendChild(head);
 	}
 	const body = el("div", { class: "aigui-bs-panel-body" });
-	const height = panel.height ?? DEFAULT_HEIGHT[panel.kind];
+	const height = panel.height ?? bodyHeight(panel);
 	if (height) body.style.height = `${height}px`;
 	node.appendChild(body);
 	let destroy = () => {};
@@ -245,17 +353,40 @@ function mountPanel(panel, definition, c, animate) {
 				destroy = mountRank(body, panel, c, animate);
 				break;
 			case "gauge":
-				destroy = mountChart(body, require_options.gaugeOption(panel, c, animate), definition.theme);
+				destroy = mountChart(body, require_positions.gaugeOption(panel, c, animate), definition.theme);
 				break;
 			case "chart":
-				destroy = mountChart(body, require_options.chartOption(panel, c, animate), definition.theme);
+				destroy = mountChart(body, require_positions.chartOption(panel, c, animate), definition.theme);
 				break;
 			case "chart3d":
-				destroy = mountGl(body, () => require_options.chart3dOption(panel, c, animate), definition.theme, () => note(body, "3D panels need echarts-gl and WebGL."));
+				destroy = mountGl(body, () => require_positions.chart3dOption(panel, c, animate), definition.theme, () => note(body, "3D panels need echarts-gl and WebGL."));
 				break;
 			case "globe":
-				destroy = mountGl(body, () => require_options.globeOption(panel, c, animate, require_options.globeTexture(c, definition.theme)), definition.theme, () => note(body, "Globe panels need echarts-gl and WebGL."));
+				destroy = mountGl(body, () => require_positions.globeOption(panel, c, animate, require_positions.earthTexture(c, definition.theme, earth), earth), definition.theme, () => note(body, "Globe panels need echarts-gl and WebGL."));
+				break;
+			case "timeline":
+				destroy = mountChart(body, require_positions.timelineOption(panel, c, animate), definition.theme, (chart) => bindTimeline(chart, events));
 				break;
+			case "graph3d": {
+				const legend = graphLegendNode(panel, c);
+				if (legend) node.appendChild(legend);
+				const missing = () => {
+					legend?.remove();
+					note(body, "Knowledge graph panels need echarts-gl and WebGL.");
+				};
+				if (panel.mode === "flat") {
+					destroy = mountGl(body, () => require_positions.graph3dOption(panel, c, animate), definition.theme, missing, (chart) => bindGraph(chart, events));
+					break;
+				}
+				const key = require_positions.graphKey(panel);
+				const layout = require_positions.createLayout(panel.nodes, panel.edges, require_positions.recallPositions(key));
+				if (!animate) layout.step(layout.steps);
+				destroy = mountGl(body, () => require_positions.graphOrbitOption(panel, c, animate, layout.positions()), definition.theme, missing, (chart) => {
+					bindGraph(chart, events);
+					return settleGraph(chart, panel, c, layout, key);
+				});
+				break;
+			}
 		}
 	} catch {
 		note(body, "Panel could not be drawn.");
@@ -265,9 +396,15 @@ function mountPanel(panel, definition, c, animate) {
 		destroy
 	};
 }
-/** Build the whole screen into `host`, returning the teardown the reconciler will call. */
-function mountScreen(host, definition, animate) {
-	const c = require_options.palette(definition);
+/**
+* Build the whole screen into `host`, returning the teardown the reconciler will call.
+*
+* `earth` is the host's globe configuration, passed through untouched: what the planet looks like
+* is the page's decision, not the fence's. `events` is the same bargain for clicks: what a claim
+* or an entity does when it is clicked is the page's decision too.
+*/
+function mountScreen(host, definition, animate, earth, events) {
+	const c = require_positions.palette(definition);
 	host.setAttribute("data-aigui-bigscreen", definition.theme);
 	host.style.setProperty("--aigui-bs-accent", c.accent);
 	host.style.setProperty("--aigui-bs-text", c.text);
@@ -276,7 +413,7 @@ function mountScreen(host, definition, animate) {
 		const head = el("header", { class: "aigui-bs-head" });
 		if (definition.title) {
 			const title = el("h2", { class: "aigui-bs-title" }, definition.title);
-			title.style.textShadow = definition.theme === "dark" ? `0 0 24px ${require_options.withAlpha(c.accent, .35)}` : "none";
+			title.style.textShadow = definition.theme === "dark" ? `0 0 24px ${require_positions.withAlpha(c.accent, .35)}` : "none";
 			head.appendChild(title);
 		}
 		if (definition.subtitle) head.appendChild(el("p", { class: "aigui-bs-subtitle" }, definition.subtitle));
@@ -288,7 +425,7 @@ function mountScreen(host, definition, animate) {
 	const grid = el("div", { class: "aigui-bs-grid" });
 	grid.style.gridTemplateColumns = `repeat(${definition.columns}, minmax(0, 1fr))`;
 	host.appendChild(grid);
-	const mounted = definition.panels.map((panel) => mountPanel(panel, definition, c, animate));
+	const mounted = definition.panels.map((panel) => mountPanel(panel, definition, c, animate, earth, events));
 	for (const { node } of mounted) grid.appendChild(node);
 	return () => {
 		for (const { destroy } of mounted) destroy();

package/dist/{mount-CbzNLMoI.js → mount-jK0A6BBY.js}

@@ -1,4 +1,4 @@
-import { chart3dOption, chartOption, formatNumber, gaugeOption, globeOption, globeTexture, palette, withAlpha } from "./options-C087Peeh.js";
+import { chart3dOption, chartOption, createLayout, earthTexture, formatNumber, gaugeOption, globeOption, graph3dOption, graphKey, graphLegend, graphOrbitData, graphOrbitOption, layoutChunk, palette, recallPositions, rememberPositions, timelineHeight, timelineOption, withAlpha } from "./positions-BArCP-1k.js";
 import { BarChart, EffectScatterChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, LinesChart, PieChart, RadarChart, ScatterChart } from "echarts/charts";
 import { DatasetComponent, GridComponent, LegendComponent, PolarComponent, RadarComponent, TitleComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import { init, use } from "echarts/core";
@@ -35,7 +35,9 @@ const DEFAULT_HEIGHT = {
 	rank: 220,
 	chart: 240,
 	chart3d: 280,
-	globe: 300
+	globe: 300,
+	timeline: 320,
+	graph3d: 320
 };
 const easeOut = (t) => 1 - Math.pow(1 - t, 3);
 function el(tag, attrs = {}, text) {
@@ -170,12 +172,13 @@ function whenSized(body, fn) {
 	const handle = requestAnimationFrame(fn);
 	return () => cancelAnimationFrame(handle);
 }
-function mountChart(body, option, theme) {
+function mountChart(body, option, theme, ready) {
 	let chart;
 	let unfollow;
 	const cancel = whenSized(body, () => {
 		chart = init(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
 		chart.setOption(option);
+		ready?.(chart);
 		unfollow = follow(body, chart);
 	});
 	return () => {
@@ -184,10 +187,17 @@ function mountChart(body, option, theme) {
 		chart?.dispose();
 	};
 }
-function mountGl(body, build, theme, fallback) {
+/**
+* A chart that needs WebGL, with an optional loop running against it.
+*
+* `ready` may hand back a teardown of its own — the settling loop does — and it is run before the
+* chart is disposed, because a frame that lands on a disposed chart throws.
+*/
+function mountGl(body, build, theme, fallback, ready) {
 	let chart;
 	let unfollow;
 	let cancel;
+	let stop;
 	let disposed = false;
 	loadGl().then(() => {
 		if (disposed) return;
@@ -195,6 +205,7 @@ function mountGl(body, build, theme, fallback) {
 			if (disposed) return;
 			chart = init(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
 			chart.setOption(build());
+			stop = ready?.(chart) ?? void 0;
 			unfollow = follow(body, chart);
 		});
 	}).catch(() => {
@@ -206,6 +217,7 @@ function mountGl(body, build, theme, fallback) {
 	return () => {
 		disposed = true;
 		cancel?.();
+		stop?.();
 		unfollow?.();
 		chart?.dispose();
 	};
@@ -213,7 +225,103 @@ function mountGl(body, build, theme, fallback) {
 function note(body, text) {
 	body.replaceChildren(el("div", { class: "aigui-bs-note" }, text));
 }
-function mountPanel(panel, definition, c, animate) {
+/**
+* What a click on a claim does.
+*
+* The host wins. A page that passed `onItemClick` has its own idea of what a claim is — a drawer,
+* a route, a second panel — and must not also get a tab it never asked for. With no handler the
+* claim's own `url` opens in a new tab with the opener cut off; the parser has already refused
+* anything that is not `http` or `https`, because this argument reaches `window.open`.
+*/
+function openTimelineItem(item, events) {
+	if (events?.onItemClick) {
+		events.onItemClick(item);
+		return;
+	}
+	if (item.url && typeof window !== "undefined") window.open(item.url, "_blank", "noopener,noreferrer");
+}
+function bindTimeline(chart, events) {
+	chart.on("click", (params) => {
+		const item = params.data?.item;
+		if (item) openTimelineItem(item, events);
+	});
+}
+function bindGraph(chart, events) {
+	chart.on("click", (params) => {
+		const event = params;
+		if (event.dataType === "edge") return;
+		const node = event.data?.node;
+		if (node) events?.onNodeClick?.(node);
+	});
+}
+/**
+* Step the layout in front of the reader, and stop.
+*
+* A knowledge graph pulling itself apart is the panel telling you what it found: the clusters
+* arrive one after another and you watch which entities go with which. So the layout is stepped a
+* few steps per frame rather than run to convergence behind a promise, and only the two series'
+* data is pushed each time — merged, not replaced, so the camera and the lights survive the
+* update and the graph does not jump back to its opening pose sixty times a second.
+*
+* When it has settled the loop ends for good and the positions are remembered, which is what lets
+* the next render of the same fence resume rather than reshuffle. The camera keeps turning after:
+* that is echarts-gl's own animation, not this one.
+*/
+function settleGraph(chart, panel, c, layout, key) {
+	const ids = panel.nodes.map((node) => node.id);
+	const remember = () => rememberPositions(key, ids, layout.positions());
+	if (layout.done || typeof requestAnimationFrame !== "function") {
+		remember();
+		return () => {};
+	}
+	const chunk = layoutChunk(panel.nodes.length);
+	const tick = () => {
+		layout.step(chunk);
+		const data = graphOrbitData(panel, c, layout.positions());
+		chart.setOption({ series: [{ data: data.edges }, { data: data.nodes }] }, {
+			notMerge: false,
+			lazyUpdate: false
+		});
+		if (layout.done) {
+			remember();
+			return;
+		}
+		handle = requestAnimationFrame(tick);
+	};
+	let handle = requestAnimationFrame(tick);
+	return () => cancelAnimationFrame(handle);
+}
+/**
+* The key to a graph's colours, in HTML over the canvas.
+*
+* HTML rather than an ECharts legend: the graph is a WebGL series with no categories for a legend
+* component to read, and a corner of text a reader can select beats a row of chart furniture. It
+* is `pointer-events:none` so it never eats a click meant for the graph behind it, and an untyped
+* graph gets nothing at all rather than an empty box.
+*
+* It hangs off the panel rather than off the chart's own element, because ECharts empties the
+* element it is initialised on — a legend appended there is gone the moment the graph appears,
+* which is exactly what happened the first time this was drawn.
+*/
+function graphLegendNode(panel, c) {
+	const entries = graphLegend(panel, c);
+	if (!entries.length) return void 0;
+	const box = el("div", { class: "aigui-bs-graph-legend" });
+	for (const entry of entries) {
+		const row = el("div", { class: "aigui-bs-graph-legend-row" });
+		const swatch = el("i", { class: `aigui-bs-graph-legend-${entry.shape === "node" ? "dot" : "line"}` });
+		swatch.style.background = entry.colour;
+		row.append(swatch, document.createTextNode(entry.label));
+		box.appendChild(row);
+	}
+	return box;
+}
+/** The body height a panel gets when it did not ask for one. */
+function bodyHeight(panel) {
+	if (panel.kind === "timeline") return timelineHeight(panel.lanes.length);
+	return DEFAULT_HEIGHT[panel.kind];
+}
+function mountPanel(panel, definition, c, animate, earth, events) {
 	const node = el("section", {
 		class: "aigui-bs-panel",
 		"data-aigui-bigscreen-panel": panel.kind
@@ -231,7 +339,7 @@ function mountPanel(panel, definition, c, animate) {
 		node.appendChild(head);
 	}
 	const body = el("div", { class: "aigui-bs-panel-body" });
-	const height = panel.height ?? DEFAULT_HEIGHT[panel.kind];
+	const height = panel.height ?? bodyHeight(panel);
 	if (height) body.style.height = `${height}px`;
 	node.appendChild(body);
 	let destroy = () => {};
@@ -253,8 +361,31 @@ function mountPanel(panel, definition, c, animate) {
 				destroy = mountGl(body, () => chart3dOption(panel, c, animate), definition.theme, () => note(body, "3D panels need echarts-gl and WebGL."));
 				break;
 			case "globe":
-				destroy = mountGl(body, () => globeOption(panel, c, animate, globeTexture(c, definition.theme)), definition.theme, () => note(body, "Globe panels need echarts-gl and WebGL."));
+				destroy = mountGl(body, () => globeOption(panel, c, animate, earthTexture(c, definition.theme, earth), earth), definition.theme, () => note(body, "Globe panels need echarts-gl and WebGL."));
+				break;
+			case "timeline":
+				destroy = mountChart(body, timelineOption(panel, c, animate), definition.theme, (chart) => bindTimeline(chart, events));
 				break;
+			case "graph3d": {
+				const legend = graphLegendNode(panel, c);
+				if (legend) node.appendChild(legend);
+				const missing = () => {
+					legend?.remove();
+					note(body, "Knowledge graph panels need echarts-gl and WebGL.");
+				};
+				if (panel.mode === "flat") {
+					destroy = mountGl(body, () => graph3dOption(panel, c, animate), definition.theme, missing, (chart) => bindGraph(chart, events));
+					break;
+				}
+				const key = graphKey(panel);
+				const layout = createLayout(panel.nodes, panel.edges, recallPositions(key));
+				if (!animate) layout.step(layout.steps);
+				destroy = mountGl(body, () => graphOrbitOption(panel, c, animate, layout.positions()), definition.theme, missing, (chart) => {
+					bindGraph(chart, events);
+					return settleGraph(chart, panel, c, layout, key);
+				});
+				break;
+			}
 		}
 	} catch {
 		note(body, "Panel could not be drawn.");
@@ -264,8 +395,14 @@ function mountPanel(panel, definition, c, animate) {
 		destroy
 	};
 }
-/** Build the whole screen into `host`, returning the teardown the reconciler will call. */
-function mountScreen(host, definition, animate) {
+/**
+* Build the whole screen into `host`, returning the teardown the reconciler will call.
+*
+* `earth` is the host's globe configuration, passed through untouched: what the planet looks like
+* is the page's decision, not the fence's. `events` is the same bargain for clicks: what a claim
+* or an entity does when it is clicked is the page's decision too.
+*/
+function mountScreen(host, definition, animate, earth, events) {
 	const c = palette(definition);
 	host.setAttribute("data-aigui-bigscreen", definition.theme);
 	host.style.setProperty("--aigui-bs-accent", c.accent);
@@ -287,7 +424,7 @@ function mountScreen(host, definition, animate) {
 	const grid = el("div", { class: "aigui-bs-grid" });
 	grid.style.gridTemplateColumns = `repeat(${definition.columns}, minmax(0, 1fr))`;
 	host.appendChild(grid);
-	const mounted = definition.panels.map((panel) => mountPanel(panel, definition, c, animate));
+	const mounted = definition.panels.map((panel) => mountPanel(panel, definition, c, animate, earth, events));
 	for (const { node } of mounted) grid.appendChild(node);
 	return () => {
 		for (const { destroy } of mounted) destroy();