@ai-gui/plugin-bigscreen 0.34.0

package/dist/mount-BPBXhD2D.cjs

@@ -0,0 +1,298 @@
+"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"));
+
+//#region src/mount.ts
+(0, echarts_core.use)([
+	echarts_charts.BarChart,
+	echarts_charts.LineChart,
+	echarts_charts.PieChart,
+	echarts_charts.ScatterChart,
+	echarts_charts.GaugeChart,
+	echarts_charts.RadarChart,
+	echarts_charts.EffectScatterChart,
+	echarts_charts.LinesChart,
+	echarts_charts.FunnelChart,
+	echarts_charts.HeatmapChart,
+	echarts_components.DatasetComponent,
+	echarts_components.GridComponent,
+	echarts_components.LegendComponent,
+	echarts_components.PolarComponent,
+	echarts_components.RadarComponent,
+	echarts_components.TitleComponent,
+	echarts_components.TooltipComponent,
+	echarts_components.VisualMapComponent,
+	echarts_renderers.CanvasRenderer
+]);
+/** Memoized `echarts-gl` side-effect import, shared across every screen on the page. */
+let glReady = null;
+const loadGl = () => glReady ??= import("echarts-gl");
+const DEFAULT_HEIGHT = {
+	kpi: 0,
+	gauge: 180,
+	rank: 220,
+	chart: 240,
+	chart3d: 280,
+	globe: 300
+};
+const easeOut = (t) => 1 - Math.pow(1 - t, 3);
+function el(tag, attrs = {}, text) {
+	const node = document.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, value);
+	if (text !== void 0) node.textContent = text;
+	return node;
+}
+/** Count a number up from zero, returning the cancel. */
+function countUp(node, panel, animate) {
+	const decimals = panel.decimals ?? 0;
+	const show = (value) => {
+		node.textContent = `${panel.prefix ?? ""}${require_options.formatNumber(value, decimals)}`;
+	};
+	if (!animate || typeof requestAnimationFrame !== "function") {
+		show(panel.value);
+		return () => {};
+	}
+	const duration = 1400;
+	let start;
+	let handle = 0;
+	const tick = (now) => {
+		start ??= now;
+		const t = Math.min(1, (now - start) / duration);
+		show(panel.value * easeOut(t));
+		if (t < 1) handle = requestAnimationFrame(tick);
+	};
+	handle = requestAnimationFrame(tick);
+	return () => cancelAnimationFrame(handle);
+}
+function sparkline(values, c, width, height) {
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const span = max - min || 1;
+	const step = width / (values.length - 1);
+	const points = values.map((v, i) => `${(i * step).toFixed(1)},${(height - 2 - (v - min) / span * (height - 4)).toFixed(1)}`);
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+	svg.setAttribute("width", "100%");
+	svg.setAttribute("height", String(height));
+	svg.setAttribute("preserveAspectRatio", "none");
+	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));
+	const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+	line.setAttribute("points", points.join(" "));
+	line.setAttribute("fill", "none");
+	line.setAttribute("stroke", c.accent);
+	line.setAttribute("stroke-width", "2");
+	line.setAttribute("stroke-linejoin", "round");
+	line.setAttribute("vector-effect", "non-scaling-stroke");
+	svg.append(fill, line);
+	return svg;
+}
+function mountKpi(body, panel, c, animate) {
+	body.classList.add("aigui-bs-kpi");
+	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)}`;
+	row.appendChild(value);
+	if (panel.unit) row.appendChild(el("span", { class: "aigui-bs-kpi-unit" }, panel.unit));
+	body.appendChild(row);
+	const meta = el("div", { class: "aigui-bs-kpi-meta" });
+	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)}%`);
+		delta.style.color = good ? c.good : c.bad;
+		meta.appendChild(delta);
+	}
+	if (panel.label) meta.appendChild(el("span", { class: "aigui-bs-kpi-label" }, panel.label));
+	if (meta.childNodes.length) body.appendChild(meta);
+	if (panel.trend) {
+		const holder = el("div", { class: "aigui-bs-kpi-spark" });
+		holder.appendChild(sparkline(panel.trend, c, 200, 36));
+		body.appendChild(holder);
+	}
+	return countUp(value, panel, animate);
+}
+function mountRank(body, panel, c, animate) {
+	body.classList.add("aigui-bs-rank");
+	const items = [...panel.items].sort((a, b) => b.value - a.value).slice(0, panel.top ?? 8);
+	const max = Math.max(...items.map((item) => item.value), 0) || 1;
+	const bars = [];
+	items.forEach((item, index) => {
+		const row = el("div", { class: "aigui-bs-rank-row" });
+		const rank = el("span", { class: "aigui-bs-rank-n" }, String(index + 1));
+		if (index < 3) rank.style.color = c.accent;
+		const name = el("span", { class: "aigui-bs-rank-name" }, item.name);
+		const track = el("span", { class: "aigui-bs-rank-track" });
+		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)}`;
+		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 ?? ""}`);
+		row.append(rank, name, track, value);
+		body.appendChild(row);
+		bars.push({
+			fill,
+			width
+		});
+	});
+	if (!animate || typeof requestAnimationFrame !== "function") return () => {};
+	const handle = requestAnimationFrame(() => requestAnimationFrame(() => bars.forEach(({ fill, width }) => fill.style.width = width)));
+	return () => cancelAnimationFrame(handle);
+}
+/** Keep a chart the size of its panel. */
+function follow(host, chart) {
+	if (typeof ResizeObserver === "undefined") return () => {};
+	const observer = new ResizeObserver(() => chart.resize());
+	observer.observe(host);
+	return () => observer.disconnect();
+}
+/**
+* Run `fn` once `body` has a size.
+*
+* The reconciler may call mount before the host is in the document, and ECharts initialised on
+* a 0×0 element warns and draws nothing until the first resize. Waiting a frame when the size is
+* not there yet costs nothing visible and keeps the console quiet.
+*/
+function whenSized(body, fn) {
+	if (body.clientWidth > 0 || typeof requestAnimationFrame !== "function") {
+		fn();
+		return () => {};
+	}
+	const handle = requestAnimationFrame(fn);
+	return () => cancelAnimationFrame(handle);
+}
+function mountChart(body, option, theme) {
+	let chart;
+	let unfollow;
+	const cancel = whenSized(body, () => {
+		chart = (0, echarts_core.init)(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
+		chart.setOption(option);
+		unfollow = follow(body, chart);
+	});
+	return () => {
+		cancel();
+		unfollow?.();
+		chart?.dispose();
+	};
+}
+function mountGl(body, build, theme, fallback) {
+	let chart;
+	let unfollow;
+	let cancel;
+	let disposed = false;
+	loadGl().then(() => {
+		if (disposed) return;
+		cancel = whenSized(body, () => {
+			if (disposed) return;
+			chart = (0, echarts_core.init)(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
+			chart.setOption(build());
+			unfollow = follow(body, chart);
+		});
+	}).catch(() => {
+		if (disposed) return;
+		chart?.dispose();
+		chart = void 0;
+		fallback();
+	});
+	return () => {
+		disposed = true;
+		cancel?.();
+		unfollow?.();
+		chart?.dispose();
+	};
+}
+function note(body, text) {
+	body.replaceChildren(el("div", { class: "aigui-bs-note" }, text));
+}
+function mountPanel(panel, definition, c, animate) {
+	const node = el("section", {
+		class: "aigui-bs-panel",
+		"data-aigui-bigscreen-panel": panel.kind
+	});
+	node.style.gridColumn = `span ${Math.min(panel.span ?? 4, definition.columns)}`;
+	node.style.borderColor = require_options.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" });
+		mark.style.background = c.accent;
+		mark.style.boxShadow = `0 0 8px ${c.accent}`;
+		head.prepend(mark);
+		node.appendChild(head);
+	}
+	const body = el("div", { class: "aigui-bs-panel-body" });
+	const height = panel.height ?? DEFAULT_HEIGHT[panel.kind];
+	if (height) body.style.height = `${height}px`;
+	node.appendChild(body);
+	let destroy = () => {};
+	try {
+		switch (panel.kind) {
+			case "kpi":
+				destroy = mountKpi(body, panel, c, animate);
+				break;
+			case "rank":
+				destroy = mountRank(body, panel, c, animate);
+				break;
+			case "gauge":
+				destroy = mountChart(body, require_options.gaugeOption(panel, c, animate), definition.theme);
+				break;
+			case "chart":
+				destroy = mountChart(body, require_options.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."));
+				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."));
+				break;
+		}
+	} catch {
+		note(body, "Panel could not be drawn.");
+	}
+	return {
+		node,
+		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);
+	host.setAttribute("data-aigui-bigscreen", definition.theme);
+	host.style.setProperty("--aigui-bs-accent", c.accent);
+	host.style.setProperty("--aigui-bs-text", c.text);
+	host.style.setProperty("--aigui-bs-muted", c.muted);
+	if (definition.title || definition.subtitle) {
+		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";
+			head.appendChild(title);
+		}
+		if (definition.subtitle) head.appendChild(el("p", { class: "aigui-bs-subtitle" }, definition.subtitle));
+		const rule = el("div", { class: "aigui-bs-rule" });
+		rule.style.background = `linear-gradient(90deg, transparent, ${c.accent}, transparent)`;
+		head.appendChild(rule);
+		host.appendChild(head);
+	}
+	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));
+	for (const { node } of mounted) grid.appendChild(node);
+	return () => {
+		for (const { destroy } of mounted) destroy();
+		host.replaceChildren();
+	};
+}
+
+//#endregion
+exports.mountScreen = mountScreen

package/dist/mount-DVHPS1xP.js

@@ -0,0 +1,297 @@
+import { chart3dOption, chartOption, formatNumber, gaugeOption, globeOption, globeTexture, palette, withAlpha } from "./options-C087Peeh.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";
+import { CanvasRenderer } from "echarts/renderers";
+
+//#region src/mount.ts
+use([
+	BarChart,
+	LineChart,
+	PieChart,
+	ScatterChart,
+	GaugeChart,
+	RadarChart,
+	EffectScatterChart,
+	LinesChart,
+	FunnelChart,
+	HeatmapChart,
+	DatasetComponent,
+	GridComponent,
+	LegendComponent,
+	PolarComponent,
+	RadarComponent,
+	TitleComponent,
+	TooltipComponent,
+	VisualMapComponent,
+	CanvasRenderer
+]);
+/** Memoized `echarts-gl` side-effect import, shared across every screen on the page. */
+let glReady = null;
+const loadGl = () => glReady ??= import("echarts-gl");
+const DEFAULT_HEIGHT = {
+	kpi: 0,
+	gauge: 180,
+	rank: 220,
+	chart: 240,
+	chart3d: 280,
+	globe: 300
+};
+const easeOut = (t) => 1 - Math.pow(1 - t, 3);
+function el(tag, attrs = {}, text) {
+	const node = document.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, value);
+	if (text !== void 0) node.textContent = text;
+	return node;
+}
+/** Count a number up from zero, returning the cancel. */
+function countUp(node, panel, animate) {
+	const decimals = panel.decimals ?? 0;
+	const show = (value) => {
+		node.textContent = `${panel.prefix ?? ""}${formatNumber(value, decimals)}`;
+	};
+	if (!animate || typeof requestAnimationFrame !== "function") {
+		show(panel.value);
+		return () => {};
+	}
+	const duration = 1400;
+	let start;
+	let handle = 0;
+	const tick = (now) => {
+		start ??= now;
+		const t = Math.min(1, (now - start) / duration);
+		show(panel.value * easeOut(t));
+		if (t < 1) handle = requestAnimationFrame(tick);
+	};
+	handle = requestAnimationFrame(tick);
+	return () => cancelAnimationFrame(handle);
+}
+function sparkline(values, c, width, height) {
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const span = max - min || 1;
+	const step = width / (values.length - 1);
+	const points = values.map((v, i) => `${(i * step).toFixed(1)},${(height - 2 - (v - min) / span * (height - 4)).toFixed(1)}`);
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+	svg.setAttribute("width", "100%");
+	svg.setAttribute("height", String(height));
+	svg.setAttribute("preserveAspectRatio", "none");
+	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", withAlpha(c.accent, .18));
+	const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+	line.setAttribute("points", points.join(" "));
+	line.setAttribute("fill", "none");
+	line.setAttribute("stroke", c.accent);
+	line.setAttribute("stroke-width", "2");
+	line.setAttribute("stroke-linejoin", "round");
+	line.setAttribute("vector-effect", "non-scaling-stroke");
+	svg.append(fill, line);
+	return svg;
+}
+function mountKpi(body, panel, c, animate) {
+	body.classList.add("aigui-bs-kpi");
+	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 ${withAlpha(c.accent, .45)}`;
+	row.appendChild(value);
+	if (panel.unit) row.appendChild(el("span", { class: "aigui-bs-kpi-unit" }, panel.unit));
+	body.appendChild(row);
+	const meta = el("div", { class: "aigui-bs-kpi-meta" });
+	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 ? "▲" : "▼"} ${formatNumber(Math.abs(panel.delta) * 100, 1)}%`);
+		delta.style.color = good ? c.good : c.bad;
+		meta.appendChild(delta);
+	}
+	if (panel.label) meta.appendChild(el("span", { class: "aigui-bs-kpi-label" }, panel.label));
+	if (meta.childNodes.length) body.appendChild(meta);
+	if (panel.trend) {
+		const holder = el("div", { class: "aigui-bs-kpi-spark" });
+		holder.appendChild(sparkline(panel.trend, c, 200, 36));
+		body.appendChild(holder);
+	}
+	return countUp(value, panel, animate);
+}
+function mountRank(body, panel, c, animate) {
+	body.classList.add("aigui-bs-rank");
+	const items = [...panel.items].sort((a, b) => b.value - a.value).slice(0, panel.top ?? 8);
+	const max = Math.max(...items.map((item) => item.value), 0) || 1;
+	const bars = [];
+	items.forEach((item, index) => {
+		const row = el("div", { class: "aigui-bs-rank-row" });
+		const rank = el("span", { class: "aigui-bs-rank-n" }, String(index + 1));
+		if (index < 3) rank.style.color = c.accent;
+		const name = el("span", { class: "aigui-bs-rank-name" }, item.name);
+		const track = el("span", { class: "aigui-bs-rank-track" });
+		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, ${withAlpha(colour, .55)}, ${colour})`;
+		fill.style.boxShadow = `0 0 10px ${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" }, `${formatNumber(item.value, Number.isInteger(item.value) ? 0 : 1)}${panel.unit ?? ""}`);
+		row.append(rank, name, track, value);
+		body.appendChild(row);
+		bars.push({
+			fill,
+			width
+		});
+	});
+	if (!animate || typeof requestAnimationFrame !== "function") return () => {};
+	const handle = requestAnimationFrame(() => requestAnimationFrame(() => bars.forEach(({ fill, width }) => fill.style.width = width)));
+	return () => cancelAnimationFrame(handle);
+}
+/** Keep a chart the size of its panel. */
+function follow(host, chart) {
+	if (typeof ResizeObserver === "undefined") return () => {};
+	const observer = new ResizeObserver(() => chart.resize());
+	observer.observe(host);
+	return () => observer.disconnect();
+}
+/**
+* Run `fn` once `body` has a size.
+*
+* The reconciler may call mount before the host is in the document, and ECharts initialised on
+* a 0×0 element warns and draws nothing until the first resize. Waiting a frame when the size is
+* not there yet costs nothing visible and keeps the console quiet.
+*/
+function whenSized(body, fn) {
+	if (body.clientWidth > 0 || typeof requestAnimationFrame !== "function") {
+		fn();
+		return () => {};
+	}
+	const handle = requestAnimationFrame(fn);
+	return () => cancelAnimationFrame(handle);
+}
+function mountChart(body, option, theme) {
+	let chart;
+	let unfollow;
+	const cancel = whenSized(body, () => {
+		chart = init(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
+		chart.setOption(option);
+		unfollow = follow(body, chart);
+	});
+	return () => {
+		cancel();
+		unfollow?.();
+		chart?.dispose();
+	};
+}
+function mountGl(body, build, theme, fallback) {
+	let chart;
+	let unfollow;
+	let cancel;
+	let disposed = false;
+	loadGl().then(() => {
+		if (disposed) return;
+		cancel = whenSized(body, () => {
+			if (disposed) return;
+			chart = init(body, theme === "dark" ? "dark" : void 0, { renderer: "canvas" });
+			chart.setOption(build());
+			unfollow = follow(body, chart);
+		});
+	}).catch(() => {
+		if (disposed) return;
+		chart?.dispose();
+		chart = void 0;
+		fallback();
+	});
+	return () => {
+		disposed = true;
+		cancel?.();
+		unfollow?.();
+		chart?.dispose();
+	};
+}
+function note(body, text) {
+	body.replaceChildren(el("div", { class: "aigui-bs-note" }, text));
+}
+function mountPanel(panel, definition, c, animate) {
+	const node = el("section", {
+		class: "aigui-bs-panel",
+		"data-aigui-bigscreen-panel": panel.kind
+	});
+	node.style.gridColumn = `span ${Math.min(panel.span ?? 4, definition.columns)}`;
+	node.style.borderColor = 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" });
+		mark.style.background = c.accent;
+		mark.style.boxShadow = `0 0 8px ${c.accent}`;
+		head.prepend(mark);
+		node.appendChild(head);
+	}
+	const body = el("div", { class: "aigui-bs-panel-body" });
+	const height = panel.height ?? DEFAULT_HEIGHT[panel.kind];
+	if (height) body.style.height = `${height}px`;
+	node.appendChild(body);
+	let destroy = () => {};
+	try {
+		switch (panel.kind) {
+			case "kpi":
+				destroy = mountKpi(body, panel, c, animate);
+				break;
+			case "rank":
+				destroy = mountRank(body, panel, c, animate);
+				break;
+			case "gauge":
+				destroy = mountChart(body, gaugeOption(panel, c, animate), definition.theme);
+				break;
+			case "chart":
+				destroy = mountChart(body, chartOption(panel, c, animate), definition.theme);
+				break;
+			case "chart3d":
+				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."));
+				break;
+		}
+	} catch {
+		note(body, "Panel could not be drawn.");
+	}
+	return {
+		node,
+		destroy
+	};
+}
+/** Build the whole screen into `host`, returning the teardown the reconciler will call. */
+function mountScreen(host, definition, animate) {
+	const c = 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);
+	host.style.setProperty("--aigui-bs-muted", c.muted);
+	if (definition.title || definition.subtitle) {
+		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 ${withAlpha(c.accent, .35)}` : "none";
+			head.appendChild(title);
+		}
+		if (definition.subtitle) head.appendChild(el("p", { class: "aigui-bs-subtitle" }, definition.subtitle));
+		const rule = el("div", { class: "aigui-bs-rule" });
+		rule.style.background = `linear-gradient(90deg, transparent, ${c.accent}, transparent)`;
+		head.appendChild(rule);
+		host.appendChild(head);
+	}
+	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));
+	for (const { node } of mounted) grid.appendChild(node);
+	return () => {
+		for (const { destroy } of mounted) destroy();
+		host.replaceChildren();
+	};
+}
+
+//#endregion
+export { mountScreen };