@ai-gui/plugin-bigscreen 0.34.0

package/dist/index.js

@@ -0,0 +1,574 @@
+import { chart3dOption, chartOption, formatNumber, gaugeColour, gaugeOption, globeOption, palette, withAlpha } from "./options-C087Peeh.js";
+import { translate } from "@ai-gui/core";
+
+//#region src/parse.ts
+const SCREEN_FIELDS = new Set([
+	"title",
+	"subtitle",
+	"theme",
+	"accent",
+	"columns",
+	"panels"
+]);
+const COMMON = [
+	"kind",
+	"title",
+	"span",
+	"height"
+];
+const FIELDS = {
+	kpi: [
+		"value",
+		"unit",
+		"prefix",
+		"decimals",
+		"delta",
+		"upIsGood",
+		"trend",
+		"label"
+	],
+	gauge: [
+		"value",
+		"max",
+		"unit",
+		"style",
+		"thresholds"
+	],
+	rank: [
+		"items",
+		"unit",
+		"top"
+	],
+	chart: ["option"],
+	chart3d: [
+		"type",
+		"data",
+		"xAxis",
+		"yAxis",
+		"rotate"
+	],
+	globe: [
+		"arcs",
+		"points",
+		"rotate"
+	]
+};
+const KINDS = new Set([
+	"kpi",
+	"gauge",
+	"rank",
+	"chart",
+	"chart3d",
+	"globe"
+]);
+const CHART3D_TYPES = new Set([
+	"bar3D",
+	"scatter3D",
+	"surface",
+	"line3D"
+]);
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const MAX_POINTS = 5e3;
+const MAX_ITEMS = 50;
+const MAX_ARCS = 300;
+const bad = (message) => ({
+	ok: false,
+	error: {
+		code: "invalid-definition",
+		message
+	}
+});
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const finite = (value) => typeof value === "number" && Number.isFinite(value);
+const text = (value, max = 120) => typeof value === "string" && value.length <= max;
+const lngLat = (value) => Array.isArray(value) && value.length === 2 && value.every(finite) && Math.abs(value[0]) <= 180 && Math.abs(value[1]) <= 90;
+function parseKpi(raw, at) {
+	if (!finite(raw.value)) return bad(`${at}.value must be a number`);
+	const panel = {
+		kind: "kpi",
+		value: raw.value
+	};
+	if (raw.unit !== void 0) {
+		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		panel.unit = raw.unit;
+	}
+	if (raw.prefix !== void 0) {
+		if (!text(raw.prefix, 8)) return bad(`${at}.prefix must be a short string`);
+		panel.prefix = raw.prefix;
+	}
+	if (raw.decimals !== void 0) {
+		if (!Number.isInteger(raw.decimals) || raw.decimals < 0 || raw.decimals > 6) return bad(`${at}.decimals must be a whole number from 0 to 6`);
+		panel.decimals = raw.decimals;
+	}
+	if (raw.delta !== void 0) {
+		if (!finite(raw.delta)) return bad(`${at}.delta must be a number (a fraction: 0.12 is +12%)`);
+		panel.delta = raw.delta;
+	}
+	if (raw.upIsGood !== void 0) {
+		if (typeof raw.upIsGood !== "boolean") return bad(`${at}.upIsGood must be true or false`);
+		panel.upIsGood = raw.upIsGood;
+	}
+	if (raw.trend !== void 0) {
+		if (!Array.isArray(raw.trend) || raw.trend.length < 2 || raw.trend.length > 200 || !raw.trend.every(finite)) return bad(`${at}.trend must be 2 to 200 numbers`);
+		panel.trend = raw.trend;
+	}
+	if (raw.label !== void 0) {
+		if (!text(raw.label, 40)) return bad(`${at}.label must be a short string`);
+		panel.label = raw.label;
+	}
+	return {
+		ok: true,
+		value: panel
+	};
+}
+function parseGauge(raw, at) {
+	if (!finite(raw.value)) return bad(`${at}.value must be a number`);
+	const panel = {
+		kind: "gauge",
+		value: raw.value
+	};
+	if (raw.max !== void 0) {
+		if (!finite(raw.max) || raw.max <= 0) return bad(`${at}.max must be a positive number`);
+		panel.max = raw.max;
+	}
+	if (raw.unit !== void 0) {
+		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		panel.unit = raw.unit;
+	}
+	if (raw.style !== void 0) {
+		if (raw.style !== "dial" && raw.style !== "ring") return bad(`${at}.style must be dial or ring`);
+		panel.style = raw.style;
+	}
+	if (raw.thresholds !== void 0) {
+		const t = raw.thresholds;
+		if (!Array.isArray(t) || t.length !== 2 || !t.every(finite) || !(t[0] >= 0 && t[0] <= t[1] && t[1] <= 1)) return bad(`${at}.thresholds must be two fractions in order, e.g. [0.6, 0.85]`);
+		panel.thresholds = [t[0], t[1]];
+	}
+	return {
+		ok: true,
+		value: panel
+	};
+}
+function parseRank(raw, at) {
+	if (!Array.isArray(raw.items) || raw.items.length === 0 || raw.items.length > MAX_ITEMS) return bad(`${at}.items must be 1 to ${MAX_ITEMS} entries`);
+	const items = [];
+	for (const [index, item] of raw.items.entries()) {
+		if (!isRecord(item) || !text(item.name, 40) || !finite(item.value)) return bad(`${at}.items[${index}] must be {name, value}`);
+		for (const key of Object.keys(item)) if (key !== "name" && key !== "value") return bad(`${at}.items[${index}].${key} is not a field of a rank item`);
+		items.push({
+			name: item.name,
+			value: item.value
+		});
+	}
+	const panel = {
+		kind: "rank",
+		items
+	};
+	if (raw.unit !== void 0) {
+		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		panel.unit = raw.unit;
+	}
+	if (raw.top !== void 0) {
+		if (!Number.isInteger(raw.top) || raw.top < 1 || raw.top > MAX_ITEMS) return bad(`${at}.top must be a whole number from 1 to ${MAX_ITEMS}`);
+		panel.top = raw.top;
+	}
+	return {
+		ok: true,
+		value: panel
+	};
+}
+function parseChart3d(raw, at) {
+	if (typeof raw.type !== "string" || !CHART3D_TYPES.has(raw.type)) return bad(`${at}.type must be one of ${[...CHART3D_TYPES].join(", ")}`);
+	if (!Array.isArray(raw.data) || raw.data.length === 0 || raw.data.length > MAX_POINTS) return bad(`${at}.data must be 1 to ${MAX_POINTS} points`);
+	const data = [];
+	for (const [index, point] of raw.data.entries()) {
+		if (!Array.isArray(point) || point.length !== 3 || !point.every(finite)) return bad(`${at}.data[${index}] must be [x, y, z]`);
+		data.push([
+			point[0],
+			point[1],
+			point[2]
+		]);
+	}
+	const panel = {
+		kind: "chart3d",
+		type: raw.type,
+		data
+	};
+	for (const axis of ["xAxis", "yAxis"]) {
+		const categories = raw[axis];
+		if (categories === void 0) continue;
+		if (!Array.isArray(categories) || categories.length === 0 || categories.length > 200 || !categories.every((c) => text(c, 40))) return bad(`${at}.${axis} must be a list of category names`);
+		panel[axis] = categories;
+	}
+	if (raw.rotate !== void 0) {
+		if (typeof raw.rotate !== "boolean") return bad(`${at}.rotate must be true or false`);
+		panel.rotate = raw.rotate;
+	}
+	return {
+		ok: true,
+		value: panel
+	};
+}
+function parseGlobe(raw, at) {
+	const panel = { kind: "globe" };
+	if (raw.arcs !== void 0) {
+		if (!Array.isArray(raw.arcs) || raw.arcs.length > MAX_ARCS) return bad(`${at}.arcs must be up to ${MAX_ARCS} entries`);
+		panel.arcs = [];
+		for (const [index, arc] of raw.arcs.entries()) {
+			if (!isRecord(arc) || !lngLat(arc.from) || !lngLat(arc.to)) return bad(`${at}.arcs[${index}] must be {from: [lng, lat], to: [lng, lat]}`);
+			const entry = {
+				from: arc.from,
+				to: arc.to
+			};
+			if (arc.label !== void 0) {
+				if (!text(arc.label, 40)) return bad(`${at}.arcs[${index}].label must be a short string`);
+				entry.label = arc.label;
+			}
+			panel.arcs.push(entry);
+		}
+	}
+	if (raw.points !== void 0) {
+		if (!Array.isArray(raw.points) || raw.points.length > MAX_ARCS) return bad(`${at}.points must be up to ${MAX_ARCS} entries`);
+		panel.points = [];
+		for (const [index, point] of raw.points.entries()) {
+			if (!isRecord(point) || !lngLat(point.coord)) return bad(`${at}.points[${index}] must be {coord: [lng, lat]}`);
+			const entry = { coord: point.coord };
+			if (point.label !== void 0) {
+				if (!text(point.label, 40)) return bad(`${at}.points[${index}].label must be a short string`);
+				entry.label = point.label;
+			}
+			if (point.value !== void 0) {
+				if (!finite(point.value) || point.value < 0) return bad(`${at}.points[${index}].value must be zero or a positive number`);
+				entry.value = point.value;
+			}
+			panel.points.push(entry);
+		}
+	}
+	if (!panel.arcs?.length && !panel.points?.length) return bad(`${at} needs arcs or points`);
+	if (raw.rotate !== void 0) {
+		if (typeof raw.rotate !== "boolean") return bad(`${at}.rotate must be true or false`);
+		panel.rotate = raw.rotate;
+	}
+	return {
+		ok: true,
+		value: panel
+	};
+}
+function parsePanel(raw, index, columns) {
+	const at = `panels[${index}]`;
+	if (!isRecord(raw)) return bad(`${at} must be an object`);
+	if (typeof raw.kind !== "string" || !KINDS.has(raw.kind)) return bad(`${at}.kind must be one of ${[...KINDS].join(", ")}`);
+	const kind = raw.kind;
+	const allowed = new Set([...COMMON, ...FIELDS[kind]]);
+	for (const key of Object.keys(raw)) if (!allowed.has(key)) return bad(`${at}.${key} is not a field of a ${kind} panel`);
+	let parsed;
+	switch (kind) {
+		case "kpi":
+			parsed = parseKpi(raw, at);
+			break;
+		case "gauge":
+			parsed = parseGauge(raw, at);
+			break;
+		case "rank":
+			parsed = parseRank(raw, at);
+			break;
+		case "chart":
+			if (!isRecord(raw.option)) return bad(`${at}.option must be an ECharts option object`);
+			parsed = {
+				ok: true,
+				value: {
+					kind: "chart",
+					option: raw.option
+				}
+			};
+			break;
+		case "chart3d":
+			parsed = parseChart3d(raw, at);
+			break;
+		case "globe":
+			parsed = parseGlobe(raw, at);
+			break;
+	}
+	if (!parsed.ok) return parsed;
+	const panel = parsed.value;
+	if (raw.title !== void 0) {
+		if (!text(raw.title, 80)) return bad(`${at}.title must be a short string`);
+		panel.title = raw.title;
+	}
+	if (raw.span !== void 0) {
+		if (!Number.isInteger(raw.span) || raw.span < 1 || raw.span > columns) return bad(`${at}.span must be a whole number from 1 to ${columns}`);
+		panel.span = raw.span;
+	}
+	if (raw.height !== void 0) {
+		if (!finite(raw.height) || raw.height < 80 || raw.height > 900) return bad(`${at}.height must be from 80 to 900 pixels`);
+		panel.height = raw.height;
+	}
+	return {
+		ok: true,
+		value: panel
+	};
+}
+/** Validate one `bigscreen` fence, or explain why it cannot be shown. */
+function parseBigscreen(source, options = {}) {
+	const maxPanels = options.maxPanels ?? 24;
+	const maxSourceBytes = options.maxSourceBytes ?? 64 * 1024;
+	if (new TextEncoder().encode(source).byteLength > maxSourceBytes) return {
+		ok: false,
+		error: {
+			code: "too-large",
+			message: "Screen definition is too large."
+		}
+	};
+	let raw;
+	try {
+		raw = JSON.parse(source);
+	} catch {
+		return {
+			ok: false,
+			error: {
+				code: "invalid-json",
+				message: "Screen definition is not valid JSON."
+			}
+		};
+	}
+	if (!isRecord(raw)) return bad("A screen definition must be a JSON object");
+	for (const key of Object.keys(raw)) if (!SCREEN_FIELDS.has(key)) return bad(`${key} is not a field of a screen definition`);
+	const definition = {
+		theme: options.theme ?? "dark",
+		columns: 12,
+		panels: []
+	};
+	if (raw.title !== void 0) {
+		if (!text(raw.title, 80)) return bad("title must be a short string");
+		definition.title = raw.title;
+	}
+	if (raw.subtitle !== void 0) {
+		if (!text(raw.subtitle, 120)) return bad("subtitle must be a short string");
+		definition.subtitle = raw.subtitle;
+	}
+	if (raw.theme !== void 0) {
+		if (raw.theme !== "dark" && raw.theme !== "light") return bad("theme must be dark or light");
+		definition.theme = raw.theme;
+	}
+	if (raw.accent !== void 0) {
+		if (typeof raw.accent !== "string" || !HEX.test(raw.accent)) return bad("accent must be a hex colour like #22d3ee");
+		definition.accent = raw.accent;
+	}
+	if (raw.columns !== void 0) {
+		if (!Number.isInteger(raw.columns) || raw.columns < 1 || raw.columns > 24) return bad("columns must be a whole number from 1 to 24");
+		definition.columns = raw.columns;
+	}
+	if (!Array.isArray(raw.panels) || raw.panels.length === 0) return bad("panels must be a non-empty array");
+	if (raw.panels.length > maxPanels) return bad(`panels has more than ${maxPanels} entries`);
+	for (const [index, entry] of raw.panels.entries()) {
+		const panel = parsePanel(entry, index, definition.columns);
+		if (!panel.ok) return panel;
+		definition.panels.push(panel.value);
+	}
+	return {
+		ok: true,
+		value: definition
+	};
+}
+
+//#endregion
+//#region src/prompt.ts
+/**
+* The model-facing rules for a data wall.
+*
+* The rule that must survive editing is "只用对话里已有的数字": a screen full of counting
+* numbers looks like evidence, and a model that fills gaps with plausible figures produces a
+* convincing lie. The examples show every panel kind once, because that is what a model copies,
+* and the numbers in them are obviously placeholders.
+*
+* You rarely want this directly: `buildSystemPrompt({ registry, plugins, locale })` from
+* `@ai-gui/core` collects the card specs and every enabled plugin's spec in one call, in the
+* product's language. Reach for this only to inspect or override one plugin's rules.
+*/
+function bigscreenPromptSpec(locale) {
+	return translate(PROMPT, locale, "spec");
+}
+const ZH = `数据大屏（围栏代码块）：\`\`\`bigscreen 开头，块内是一个 JSON 对象。当用户要一个"大屏 / 看板 / dashboard / 总览"，或者要把一组指标、排行、趋势、地域分布放在一起漂亮地展示时，输出一个 bigscreen 块。它会画成深色发光的数据墙：数字滚动增长、仪表盘扫过、排行条生长、图表逐步绘出、3D 图和地球缓慢旋转。文字说明照常写在块外。
+
+只用对话里已有的数字。没有的数据就不要放这个面板，或者在块外说明缺什么。绝对不要编造一个看起来合理的数字来填空——大屏上的数字看起来像证据。
+
+顶层字段：
+- title、subtitle：大屏标题、副标题
+- theme："dark"（默认）| "light"
+- accent：主色，十六进制，如 "#22d3ee"
+- columns：网格列数，默认 12
+- panels（必填）：面板数组，最多 24 个
+
+每个面板：kind（必填）、title、span（占几列，默认 4）、height（像素）。按 kind 填：
+- "kpi"：value（必填）、unit、prefix（如 "¥"）、decimals、delta（变化率，小数：0.12 就是 +12%）、upIsGood（默认 true）、trend（一列数，画成迷你折线）、label
+- "gauge"：value（必填）、max（默认 100）、unit、style "dial"（默认）| "ring"、thresholds [0.6, 0.85]（告警线：超过第一个变黄，超过第二个变红——只给"越高越危险"的指标用，如 CPU 占用、库存水位；完成率这类越高越好的不要给）
+- "rank"：items（必填，[{"name","value"}]）、unit、top（默认 8）
+- "chart"：option（必填）——完整的 ECharts option，颜色、字体、动画由大屏统一
+- "chart3d"：type "bar3D" | "scatter3D" | "surface" | "line3D"、data（[[x, y, z], ...]）、xAxis / yAxis（类目名列表，给了的话 x、y 就是下标）、rotate（默认 true）
+- "globe"：arcs（[{"from": [经度, 纬度], "to": [经度, 纬度], "label"}]）、points（[{"coord": [经度, 纬度], "label", "value"}]）、rotate（默认 true）。至少给一个。适合洲际、跨国的流向；同一个省内的线路在地球上只有几个像素，那种用普通图表
+
+布局建议：第一行放 3–4 个 kpi（各 span 3），然后大图 span 8 配一个 rank 或 gauge span 4，3D 和地球 span 6。
+
+例子——销售大屏：
+
+\`\`\`bigscreen
+{
+  "title": "华东区销售大屏",
+  "subtitle": "2026 年 8 月",
+  "panels": [
+    { "kind": "kpi", "title": "本月营收", "value": 12843000, "prefix": "¥", "delta": 0.124, "trend": [8.1, 8.6, 9.2, 9.0, 10.4, 11.9, 12.8], "span": 3 },
+    { "kind": "kpi", "title": "订单数", "value": 48210, "unit": "单", "delta": 0.051, "span": 3 },
+    { "kind": "kpi", "title": "客单价", "value": 266.4, "prefix": "¥", "decimals": 1, "delta": -0.018, "span": 3 },
+    { "kind": "gauge", "title": "目标完成率", "value": 82, "unit": "%", "span": 3 },
+    { "kind": "chart", "title": "月度趋势", "span": 8, "option": { "xAxis": { "type": "category", "data": ["3月", "4月", "5月", "6月", "7月", "8月"] }, "yAxis": { "type": "value" }, "series": [{ "type": "line", "smooth": true, "areaStyle": {}, "data": [820, 932, 901, 934, 1290, 1330] }] } },
+    { "kind": "rank", "title": "门店排行", "span": 4, "unit": "万", "items": [{ "name": "上海", "value": 320 }, { "name": "杭州", "value": 245 }, { "name": "南京", "value": 198 }, { "name": "苏州", "value": 176 }, { "name": "宁波", "value": 121 }] },
+    { "kind": "chart3d", "title": "品类 × 月份", "span": 6, "type": "bar3D", "xAxis": ["6月", "7月", "8月"], "yAxis": ["家电", "服饰", "食品"], "data": [[0, 0, 120], [1, 0, 150], [2, 0, 180], [0, 1, 90], [1, 1, 110], [2, 1, 140], [0, 2, 60], [1, 2, 75], [2, 2, 95]] },
+    { "kind": "globe", "title": "出口流向", "span": 6, "arcs": [{ "from": [121.47, 31.23], "to": [8.68, 50.11], "label": "上海→法兰克福" }, { "from": [121.47, 31.23], "to": [-74.01, 40.71], "label": "上海→纽约" }, { "from": [121.47, 31.23], "to": [151.21, -33.87], "label": "上海→悉尼" }], "points": [{ "coord": [121.47, 31.23], "label": "上海", "value": 320 }, { "coord": [-74.01, 40.71], "label": "纽约", "value": 120 }] }
+  ]
+}
+\`\`\`
+
+这一版画不了的（遇到就退回普通图表或文字）：实时刷新、可交互筛选、表格、地图着色（省份热力图）、视频。需要宿主提供真实数据的 BI 看板用 dashboard 块，不用这个。`;
+const EN = `Data walls (fenced): \`\`\`bigscreen with a JSON object inside. Emit one when the user asks for a dashboard, an overview, a "big screen", or wants a set of metrics, rankings, trends and places shown together and shown well. It draws a dark, glowing wall: numbers count up, gauges sweep, rank bars grow, charts draw themselves, 3D charts and globes turn slowly. Keep the explanation itself outside the block.
+
+Use only numbers the conversation already contains. Leave out a panel whose data you do not have, or say outside the block what is missing. Never invent a plausible figure to fill a gap — a number on a wall looks like evidence.
+
+Top level: title, subtitle, theme ("dark" default or "light"), accent (hex), columns (default 12), panels (required, at most 24).
+
+Each panel: kind (required), title, span (columns, default 4), height (px). By kind: "kpi" (value, unit, prefix, decimals, delta as a fraction, upIsGood, trend as a short number list, label); "gauge" (value, max default 100, unit, style "dial" or "ring", thresholds [0.6, 0.85] as alarm levels — amber past the first, red past the second — only for metrics where higher is worse, never for a completion rate); "rank" (items as {name, value}, unit, top default 8); "chart" (option: a full ECharts option — colours, fonts and animation come from the wall); "chart3d" (type "bar3D" | "scatter3D" | "surface" | "line3D", data as [x, y, z] points, optional xAxis and yAxis category lists, rotate); "globe" (arcs as {from: [lng, lat], to: [lng, lat], label}, points as {coord: [lng, lat], label, value}, rotate; at least one of arcs or points; for intercontinental flows — a route within one region is a few pixels on a globe, so use an ordinary chart for those).
+
+Layout: a first row of three or four kpi panels at span 3, then a wide chart at span 8 beside a rank or gauge at span 4, and 3D or globe panels at span 6.
+
+Example:
+
+\`\`\`bigscreen
+{
+  "title": "East region sales",
+  "subtitle": "August 2026",
+  "panels": [
+    { "kind": "kpi", "title": "Revenue", "value": 12843000, "prefix": "$", "delta": 0.124, "trend": [8.1, 8.6, 9.2, 9.0, 10.4, 11.9, 12.8], "span": 4 },
+    { "kind": "gauge", "title": "Target", "value": 82, "unit": "%", "span": 4 },
+    { "kind": "rank", "title": "Stores", "span": 4, "items": [{ "name": "Shanghai", "value": 320 }, { "name": "Hangzhou", "value": 245 }, { "name": "Nanjing", "value": 198 }] },
+    { "kind": "chart", "title": "Trend", "span": 6, "option": { "xAxis": { "type": "category", "data": ["Mar", "Apr", "May", "Jun", "Jul", "Aug"] }, "yAxis": { "type": "value" }, "series": [{ "type": "line", "smooth": true, "areaStyle": {}, "data": [820, 932, 901, 934, 1290, 1330] }] } },
+    { "kind": "chart3d", "title": "Category × month", "span": 6, "type": "bar3D", "xAxis": ["Jun", "Jul", "Aug"], "yAxis": ["Appliances", "Apparel", "Food"], "data": [[0, 0, 120], [1, 0, 150], [2, 0, 180], [0, 1, 90], [1, 1, 110], [2, 1, 140], [0, 2, 60], [1, 2, 75], [2, 2, 95]] }
+  ]
+}
+\`\`\`
+
+Not supported — fall back to ordinary charts or prose: live refresh, interactive filters, tables, choropleth maps, video. A BI board whose numbers must come from the host's own queries is a dashboard block, not this.`;
+const PROMPT = {
+	en: { spec: EN },
+	"zh-CN": { spec: ZH }
+};
+
+//#endregion
+//#region src/index.ts
+const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const bigscreenCss = [
+	"[data-aigui-bigscreen]{--aigui-bs-accent:#22d3ee;--aigui-bs-text:#e2e8f0;--aigui-bs-muted:#94a3b8;box-sizing:border-box;margin-block:1rem;padding:1.1rem 1.2rem 1.3rem;border-radius:14px;color:var(--aigui-bs-text);font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'PingFang SC','Noto Sans CJK SC',sans-serif;font-variant-numeric:tabular-nums}",
+	"[data-aigui-bigscreen] *{box-sizing:border-box}",
+	"[data-aigui-bigscreen='dark']{background:radial-gradient(120% 90% at 50% 0%,#0f1f3d 0%,#0a1428 45%,#050b18 100%);box-shadow:inset 0 0 0 1px rgba(56,189,248,.12),0 20px 60px rgba(0,0,0,.45)}",
+	"[data-aigui-bigscreen='light']{background:linear-gradient(180deg,#f8fafc,#eef2f7);box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}",
+	".aigui-bs-head{text-align:center;margin-bottom:1rem}",
+	".aigui-bs-title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:.06em}",
+	".aigui-bs-subtitle{margin:.25rem 0 0;font-size:.85rem;color:var(--aigui-bs-muted);letter-spacing:.12em}",
+	".aigui-bs-rule{height:1px;margin:.8rem auto 0;width:70%}",
+	".aigui-bs-grid{display:grid;gap:.9rem}",
+	".aigui-bs-panel{display:flex;flex-direction:column;min-width:0;border:1px solid;border-radius:10px;padding:.7rem .85rem .85rem;backdrop-filter:blur(6px)}",
+	"[data-aigui-bigscreen='dark'] .aigui-bs-panel{background:linear-gradient(180deg,rgba(17,27,50,.82),rgba(10,18,36,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.35)}",
+	"[data-aigui-bigscreen='light'] .aigui-bs-panel{background:rgba(255,255,255,.9);box-shadow:0 6px 20px rgba(15,23,42,.06)}",
+	".aigui-bs-panel-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--aigui-bs-muted)}",
+	".aigui-bs-panel-mark{display:inline-block;width:4px;height:14px;border-radius:2px}",
+	".aigui-bs-panel-body{position:relative;flex:1 1 auto;width:100%;min-width:0;container-type:inline-size}",
+	".aigui-bs-kpi{display:flex;flex-direction:column;gap:.35rem;justify-content:center;height:100%}",
+	".aigui-bs-kpi-row{display:flex;align-items:baseline;gap:.35rem;min-width:0}",
+	".aigui-bs-kpi-value{font-size:2rem;font-size:clamp(1.2rem,13cqi,2.6rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;white-space:nowrap}",
+	".aigui-bs-kpi-unit{font-size:.95rem;color:var(--aigui-bs-muted)}",
+	".aigui-bs-kpi-meta{display:flex;gap:.7rem;font-size:.8rem;color:var(--aigui-bs-muted)}",
+	".aigui-bs-kpi-delta{font-weight:600}",
+	".aigui-bs-kpi-spark{margin-top:.2rem;opacity:.9}",
+	".aigui-bs-rank{display:flex;flex-direction:column;gap:.45rem;overflow:hidden}",
+	".aigui-bs-rank-row{display:grid;grid-template-columns:1.4rem minmax(3rem,auto) 1fr auto;align-items:center;gap:.5rem;font-size:.85rem}",
+	".aigui-bs-rank-n{font-weight:700;color:var(--aigui-bs-muted);text-align:center}",
+	".aigui-bs-rank-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
+	".aigui-bs-rank-track{display:block;height:8px;border-radius:4px;overflow:hidden}",
+	".aigui-bs-rank-fill{display:block;height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(.22,1,.36,1)}",
+	".aigui-bs-rank-value{color:var(--aigui-bs-muted);font-variant-numeric:tabular-nums}",
+	".aigui-bs-note{display:flex;align-items:center;justify-content:center;height:100%;min-height:4rem;font-size:.85rem;color:var(--aigui-bs-muted)}",
+	"[data-aigui-bigscreen-loading]{min-height:8rem;border-radius:14px;background:currentColor;opacity:.06}",
+	"[data-aigui-bigscreen-error]{padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;opacity:.8;background:currentColor}",
+	"@media (max-width:640px){.aigui-bs-grid{grid-template-columns:1fr!important}.aigui-bs-panel{grid-column:span 1!important}}"
+].join("");
+function failed(message) {
+	const text$1 = escapeHtml(message);
+	return {
+		kind: "html",
+		html: `<div data-aigui-bigscreen-error role="img" aria-label="${text$1}">${text$1}</div>`,
+		trusted: true
+	};
+}
+/**
+* A data wall: KPIs that count up, gauges that sweep, ranks that grow, charts that draw
+* themselves, and 3D bars and globes that turn — laid out on a grid the model chooses.
+*
+* The screen is presentation, not evidence. Where the numbers must be the host's — a BI board
+* over real queries — `@ai-gui/plugin-dashboard` is the block, and it refuses to let the model
+* write a row. This one lets the model lay out the numbers it was given, which is what a
+* summary, a demo or a briefing needs, and the prompt spec tells it never to invent them.
+*/
+function bigscreen(options = {}) {
+	const render = (node, context) => {
+		if (node.complete === false) return {
+			kind: "html",
+			html: "<div data-aigui-bigscreen-loading aria-label=\"Loading screen\"></div>"
+		};
+		const theme = options.theme ?? (context?.theme === "light" ? "light" : context?.theme === "dark" ? "dark" : void 0);
+		const parsed = parseBigscreen(node.content ?? "", {
+			...options,
+			theme
+		});
+		if (!parsed.ok) return failed(parsed.error.message);
+		const definition = parsed.value;
+		return {
+			kind: "mount",
+			mount: (el) => {
+				let destroy;
+				let disposed = false;
+				import("./mount-DVHPS1xP.js").then(({ mountScreen }) => {
+					if (disposed) return;
+					destroy = mountScreen(el, definition, options.animate !== false);
+				}).catch(() => {
+					const error = document.createElement("div");
+					error.setAttribute("data-aigui-bigscreen-error", "");
+					error.setAttribute("role", "img");
+					error.setAttribute("aria-label", "Screen could not be drawn.");
+					error.textContent = "Screen could not be drawn.";
+					el.replaceChildren(error);
+				});
+				return () => {
+					disposed = true;
+					destroy?.();
+				};
+			}
+		};
+	};
+	return {
+		name: "bigscreen",
+		css: bigscreenCss,
+		nodeRenderers: { bigscreen: render },
+		isBlockComplete: (_type, raw) => {
+			const text$1 = raw.trim();
+			if (!text$1.startsWith("{") || !text$1.endsWith("}")) return false;
+			try {
+				JSON.parse(text$1);
+				return true;
+			} catch {
+				return false;
+			}
+		},
+		promptSpec: (locale) => bigscreenPromptSpec(locale)
+	};
+}
+
+//#endregion
+export { bigscreen, bigscreenCss, bigscreenPromptSpec, chart3dOption, chartOption, formatNumber, gaugeColour, gaugeOption, globeOption, palette, parseBigscreen, withAlpha };