@ai-gui/plugin-bigscreen 0.36.0 → 0.36.2

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @ai-gui/plugin-bigscreen
 
+## 0.36.2
+
+### Patch Changes
+
+- c57eae2: A data wall now folds on its own width, not the window's.
+
+  The wall laid out twelve columns and fell back to one at `@media
+(max-width: 640px)` — a query about the _viewport_. Put the same wall in a
+  330px side panel of a 1900px window and the query never fires: four KPI cards
+  share three hundred pixels and the numbers wrap one character per line.
+
+  The wall is now a container (`container-type: inline-size`) and the fallbacks
+  are `@container` queries, so what decides the layout is the only thing that was
+  ever relevant — how wide the wall is. That also covers the case the old query
+  was written for, since a full-width wall in a small window has a small
+  container.
+
+  Two steps rather than one. At 900px it folds to two columns; at 520px to one.
+  And a panel the model gave more than half the grid to keeps both columns in the
+  two-column state — a chart is wide because it needs to be, and collapsing it to
+  the width of a KPI card is how a readable chart becomes a smear.
+
+  - @ai-gui/core@0.36.2
+
+## 0.36.1
+
+### Patch Changes
+
+- 6183537: A refused block now says why, and bigscreen says how long its strings may be.
+
+  Two faults, found by asking a real agent for a real dashboard — a portfolio
+  wall — and getting a grey bar.
+
+  **The wall was refused for a caption.** `parseKpi` allows a `label` of 40
+  characters and the prompt spec listed the field with no hint of that, or of
+  what the field is for. Asked for holdings, the model wrote
+
+      "持仓 14股 | 成本 $699.19 | 现价 $703.41 | 盈亏 +$59.07 (+0.60%)"
+
+  — 54 characters, and lost the whole screen. It did it again on the next
+  generation, so this is not luck; it is a limit that was enforced and never
+  stated. The spec now gives every length (unit 16, prefix 8, label and rank
+  names 40, panel title 80, screen title 80, subtitle 120), says what `label` is
+  for, and says the part that makes lengths matter: overrunning one throws the
+  whole block away rather than trimming the string.
+
+  The parser's messages carry the numbers too. "must be a short string" is true
+  and useless — it tells neither a model rewriting its block nor a person reading
+  the message whether they are two characters over or twenty. It now reads
+  `panels[0].label must be at most 40 characters (got 54)`.
+
+  **And the reason was invisible.** Seven plugins shipped
+
+      [data-aigui-<name>-error] { …; opacity: .8; background: currentColor }
+
+  which paints the box in the very colour its text is written in. The message
+  reached the DOM and the `aria-label`, and on screen it was an unexplained slab —
+  indistinguishable from a renderer that had broken. It is now a tint of the host's
+  own colour with the text readable over it, in the shape `@ai-gui/plugin-dashboard`
+  already used. Wrapped in `:where()` so a host restyling it wins without a
+  specificity fight, since plugin CSS is injected at runtime and takes every tie.
+
+  - @ai-gui/core@0.36.1
+
 ## 0.36.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -82,6 +82,16 @@ const bad = (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;
+/**
+* Why a string was rejected, with the number in it.
+*
+* "must be a short string" is true and useless: it does not say how short, so
+* neither a model rewriting its own block nor a person reading the message can
+* tell whether they are two characters over or twenty. Observed in the wild —
+* a KPI caption of 54 characters against a limit of 40, twice in a row, from a
+* model that had never been told there was a limit.
+*/
+const tooLong = (at, max, value) => typeof value === "string" ? `${at} must be at most ${max} characters (got ${value.length})` : `${at} must be a string of at most ${max} characters`;
 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`);
@@ -90,11 +100,11 @@ function parseKpi(raw, at) {
 		value: raw.value
 	};
 	if (raw.unit !== void 0) {
-		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		if (!text(raw.unit, 16)) return bad(tooLong(`${at}.unit`, 16, raw.unit));
 		panel.unit = raw.unit;
 	}
 	if (raw.prefix !== void 0) {
-		if (!text(raw.prefix, 8)) return bad(`${at}.prefix must be a short string`);
+		if (!text(raw.prefix, 8)) return bad(tooLong(`${at}.prefix`, 8, raw.prefix));
 		panel.prefix = raw.prefix;
 	}
 	if (raw.decimals !== void 0) {
@@ -114,7 +124,7 @@ function parseKpi(raw, at) {
 		panel.trend = raw.trend;
 	}
 	if (raw.label !== void 0) {
-		if (!text(raw.label, 40)) return bad(`${at}.label must be a short string`);
+		if (!text(raw.label, 40)) return bad(tooLong(`${at}.label`, 40, raw.label));
 		panel.label = raw.label;
 	}
 	return {
@@ -133,7 +143,7 @@ function parseGauge(raw, at) {
 		panel.max = raw.max;
 	}
 	if (raw.unit !== void 0) {
-		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		if (!text(raw.unit, 16)) return bad(tooLong(`${at}.unit`, 16, raw.unit));
 		panel.unit = raw.unit;
 	}
 	if (raw.style !== void 0) {
@@ -166,7 +176,7 @@ function parseRank(raw, at) {
 		items
 	};
 	if (raw.unit !== void 0) {
-		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		if (!text(raw.unit, 16)) return bad(tooLong(`${at}.unit`, 16, raw.unit));
 		panel.unit = raw.unit;
 	}
 	if (raw.top !== void 0) {
@@ -222,7 +232,7 @@ function parseGlobe(raw, at) {
 				to: arc.to
 			};
 			if (arc.label !== void 0) {
-				if (!text(arc.label, 40)) return bad(`${at}.arcs[${index}].label must be a short string`);
+				if (!text(arc.label, 40)) return bad(tooLong(`${at}.arcs[${index}].label`, 40, arc.label));
 				entry.label = arc.label;
 			}
 			panel.arcs.push(entry);
@@ -235,7 +245,7 @@ function parseGlobe(raw, at) {
 			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`);
+				if (!text(point.label, 40)) return bad(tooLong(`${at}.points[${index}].label`, 40, point.label));
 				entry.label = point.label;
 			}
 			if (point.value !== void 0) {
@@ -293,7 +303,7 @@ function parsePanel(raw, index, columns) {
 	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`);
+		if (!text(raw.title, 80)) return bad(tooLong(`${at}.title`, 80, raw.title));
 		panel.title = raw.title;
 	}
 	if (raw.span !== void 0) {
@@ -340,11 +350,11 @@ function parseBigscreen(source, options = {}) {
 		panels: []
 	};
 	if (raw.title !== void 0) {
-		if (!text(raw.title, 80)) return bad("title must be a short string");
+		if (!text(raw.title, 80)) return bad(tooLong("title", 80, raw.title));
 		definition.title = raw.title;
 	}
 	if (raw.subtitle !== void 0) {
-		if (!text(raw.subtitle, 120)) return bad("subtitle must be a short string");
+		if (!text(raw.subtitle, 120)) return bad(tooLong("subtitle", 120, raw.subtitle));
 		definition.subtitle = raw.subtitle;
 	}
 	if (raw.theme !== void 0) {
@@ -391,17 +401,19 @@ function bigscreenPromptSpec(locale) {
 }
 const ZH = `数据大屏（围栏代码块）：\`\`\`bigscreen 开头，块内是一个 JSON 对象。当用户要一个"大屏 / 看板 / dashboard / 总览"，或者要把一组指标、排行、趋势、地域分布放在一起漂亮地展示时，输出一个 bigscreen 块。它会画成深色发光的数据墙：数字滚动增长、仪表盘扫过、排行条生长、图表逐步绘出、3D 图和地球缓慢旋转。文字说明照常写在块外。
 
+字数超了整个块就作废——一个太长的 label 会让整面墙消失，而不是那一句被截断。所有文字字段都短：unit 最多 16、prefix 最多 8、label 和排行项名字最多 40、面板 title 最多 80。它们是标签，不是句子。
+
 只用对话里已有的数字。没有的数据就不要放这个面板，或者在块外说明缺什么。绝对不要编造一个看起来合理的数字来填空——大屏上的数字看起来像证据。
 
 顶层字段：
-- title、subtitle：大屏标题、副标题
+- title、subtitle：大屏标题（最多 80 字符）、副标题（最多 120 字符）
 - 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
+每个面板：kind（必填）、title（最多 80 字符）、span（占几列，默认 4）、height（像素）。按 kind 填：
+- "kpi"：value（必填）、unit、prefix（如 "¥"）、decimals、delta（变化率，小数：0.12 就是 +12%）、upIsGood（默认 true）、trend（一列数，画成迷你折线）、label（数字下面的一行小字，**最多 40 字符**——写"较上月""同比"这种一眼看完的说明；明细放不下，要写明细就再开一个面板或者写在块外）
 - "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，颜色、字体、动画由大屏统一
@@ -432,11 +444,13 @@ const ZH = `数据大屏（围栏代码块）：\`\`\`bigscreen 开头，块内
 这一版画不了的（遇到就退回普通图表或文字）：实时刷新、可交互筛选、表格、地图着色（省份热力图）、视频。需要宿主提供真实数据的 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.
 
+Overrunning a length throws the whole block away — one label two characters too long loses the entire wall, rather than being trimmed. Every text field is short: unit at most 16, prefix 8, label and rank item names 40, panel title 80. They are labels, not sentences.
+
 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).
+Top level: title (at most 80 characters), subtitle (at most 120), 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).
+Each panel: kind (required), title (at most 80 characters), 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 — one short line under the number, **at most 40 characters**, for a caption like "vs last month"; detail does not fit there, so put it in its own panel or outside the block); "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.
 
@@ -466,7 +480,7 @@ const PROMPT = {
 //#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]{--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;container-type:inline-size}",
 	"[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)}",
@@ -497,8 +511,9 @@ const bigscreenCss = [
 	".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}}"
+	":where([data-aigui-bigscreen-error]){padding:0.5rem 0.75rem;border-radius:0.5rem;font-size:0.875rem;background:color-mix(in srgb,currentColor 8%,transparent);border:1px solid color-mix(in srgb,currentColor 25%,transparent)}",
+	"@container (max-width:900px){.aigui-bs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.aigui-bs-panel{grid-column:span 1!important}.aigui-bs-panel[data-aigui-bigscreen-wide]{grid-column:span 2!important}}",
+	"@container (max-width:520px){.aigui-bs-grid{grid-template-columns:1fr!important}.aigui-bs-panel,.aigui-bs-panel[data-aigui-bigscreen-wide]{grid-column:span 1!important}}"
 ].join("");
 function failed(message) {
 	const text$1 = escapeHtml(message);
@@ -536,7 +551,7 @@ function bigscreen(options = {}) {
 				let destroy;
 				let disposed = false;
 				Promise.resolve().then(function() {
-					return require("./mount-BPBXhD2D.cjs");
+					return require("./mount-DPyPP9Ha.cjs");
 				}).then(({ mountScreen }) => {
 					if (disposed) return;
 					destroy = mountScreen(el, definition, options.animate !== false);

package/dist/index.js

@@ -81,6 +81,16 @@ const bad = (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;
+/**
+* Why a string was rejected, with the number in it.
+*
+* "must be a short string" is true and useless: it does not say how short, so
+* neither a model rewriting its own block nor a person reading the message can
+* tell whether they are two characters over or twenty. Observed in the wild —
+* a KPI caption of 54 characters against a limit of 40, twice in a row, from a
+* model that had never been told there was a limit.
+*/
+const tooLong = (at, max, value) => typeof value === "string" ? `${at} must be at most ${max} characters (got ${value.length})` : `${at} must be a string of at most ${max} characters`;
 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`);
@@ -89,11 +99,11 @@ function parseKpi(raw, at) {
 		value: raw.value
 	};
 	if (raw.unit !== void 0) {
-		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		if (!text(raw.unit, 16)) return bad(tooLong(`${at}.unit`, 16, raw.unit));
 		panel.unit = raw.unit;
 	}
 	if (raw.prefix !== void 0) {
-		if (!text(raw.prefix, 8)) return bad(`${at}.prefix must be a short string`);
+		if (!text(raw.prefix, 8)) return bad(tooLong(`${at}.prefix`, 8, raw.prefix));
 		panel.prefix = raw.prefix;
 	}
 	if (raw.decimals !== void 0) {
@@ -113,7 +123,7 @@ function parseKpi(raw, at) {
 		panel.trend = raw.trend;
 	}
 	if (raw.label !== void 0) {
-		if (!text(raw.label, 40)) return bad(`${at}.label must be a short string`);
+		if (!text(raw.label, 40)) return bad(tooLong(`${at}.label`, 40, raw.label));
 		panel.label = raw.label;
 	}
 	return {
@@ -132,7 +142,7 @@ function parseGauge(raw, at) {
 		panel.max = raw.max;
 	}
 	if (raw.unit !== void 0) {
-		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		if (!text(raw.unit, 16)) return bad(tooLong(`${at}.unit`, 16, raw.unit));
 		panel.unit = raw.unit;
 	}
 	if (raw.style !== void 0) {
@@ -165,7 +175,7 @@ function parseRank(raw, at) {
 		items
 	};
 	if (raw.unit !== void 0) {
-		if (!text(raw.unit, 16)) return bad(`${at}.unit must be a short string`);
+		if (!text(raw.unit, 16)) return bad(tooLong(`${at}.unit`, 16, raw.unit));
 		panel.unit = raw.unit;
 	}
 	if (raw.top !== void 0) {
@@ -221,7 +231,7 @@ function parseGlobe(raw, at) {
 				to: arc.to
 			};
 			if (arc.label !== void 0) {
-				if (!text(arc.label, 40)) return bad(`${at}.arcs[${index}].label must be a short string`);
+				if (!text(arc.label, 40)) return bad(tooLong(`${at}.arcs[${index}].label`, 40, arc.label));
 				entry.label = arc.label;
 			}
 			panel.arcs.push(entry);
@@ -234,7 +244,7 @@ function parseGlobe(raw, at) {
 			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`);
+				if (!text(point.label, 40)) return bad(tooLong(`${at}.points[${index}].label`, 40, point.label));
 				entry.label = point.label;
 			}
 			if (point.value !== void 0) {
@@ -292,7 +302,7 @@ function parsePanel(raw, index, columns) {
 	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`);
+		if (!text(raw.title, 80)) return bad(tooLong(`${at}.title`, 80, raw.title));
 		panel.title = raw.title;
 	}
 	if (raw.span !== void 0) {
@@ -339,11 +349,11 @@ function parseBigscreen(source, options = {}) {
 		panels: []
 	};
 	if (raw.title !== void 0) {
-		if (!text(raw.title, 80)) return bad("title must be a short string");
+		if (!text(raw.title, 80)) return bad(tooLong("title", 80, raw.title));
 		definition.title = raw.title;
 	}
 	if (raw.subtitle !== void 0) {
-		if (!text(raw.subtitle, 120)) return bad("subtitle must be a short string");
+		if (!text(raw.subtitle, 120)) return bad(tooLong("subtitle", 120, raw.subtitle));
 		definition.subtitle = raw.subtitle;
 	}
 	if (raw.theme !== void 0) {
@@ -390,17 +400,19 @@ function bigscreenPromptSpec(locale) {
 }
 const ZH = `数据大屏（围栏代码块）：\`\`\`bigscreen 开头，块内是一个 JSON 对象。当用户要一个"大屏 / 看板 / dashboard / 总览"，或者要把一组指标、排行、趋势、地域分布放在一起漂亮地展示时，输出一个 bigscreen 块。它会画成深色发光的数据墙：数字滚动增长、仪表盘扫过、排行条生长、图表逐步绘出、3D 图和地球缓慢旋转。文字说明照常写在块外。
 
+字数超了整个块就作废——一个太长的 label 会让整面墙消失，而不是那一句被截断。所有文字字段都短：unit 最多 16、prefix 最多 8、label 和排行项名字最多 40、面板 title 最多 80。它们是标签，不是句子。
+
 只用对话里已有的数字。没有的数据就不要放这个面板，或者在块外说明缺什么。绝对不要编造一个看起来合理的数字来填空——大屏上的数字看起来像证据。
 
 顶层字段：
-- title、subtitle：大屏标题、副标题
+- title、subtitle：大屏标题（最多 80 字符）、副标题（最多 120 字符）
 - 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
+每个面板：kind（必填）、title（最多 80 字符）、span（占几列，默认 4）、height（像素）。按 kind 填：
+- "kpi"：value（必填）、unit、prefix（如 "¥"）、decimals、delta（变化率，小数：0.12 就是 +12%）、upIsGood（默认 true）、trend（一列数，画成迷你折线）、label（数字下面的一行小字，**最多 40 字符**——写"较上月""同比"这种一眼看完的说明；明细放不下，要写明细就再开一个面板或者写在块外）
 - "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，颜色、字体、动画由大屏统一
@@ -431,11 +443,13 @@ const ZH = `数据大屏（围栏代码块）：\`\`\`bigscreen 开头，块内
 这一版画不了的（遇到就退回普通图表或文字）：实时刷新、可交互筛选、表格、地图着色（省份热力图）、视频。需要宿主提供真实数据的 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.
 
+Overrunning a length throws the whole block away — one label two characters too long loses the entire wall, rather than being trimmed. Every text field is short: unit at most 16, prefix 8, label and rank item names 40, panel title 80. They are labels, not sentences.
+
 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).
+Top level: title (at most 80 characters), subtitle (at most 120), 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).
+Each panel: kind (required), title (at most 80 characters), 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 — one short line under the number, **at most 40 characters**, for a caption like "vs last month"; detail does not fit there, so put it in its own panel or outside the block); "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.
 
@@ -465,7 +479,7 @@ const PROMPT = {
 //#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]{--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;container-type:inline-size}",
 	"[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)}",
@@ -496,8 +510,9 @@ const bigscreenCss = [
 	".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}}"
+	":where([data-aigui-bigscreen-error]){padding:0.5rem 0.75rem;border-radius:0.5rem;font-size:0.875rem;background:color-mix(in srgb,currentColor 8%,transparent);border:1px solid color-mix(in srgb,currentColor 25%,transparent)}",
+	"@container (max-width:900px){.aigui-bs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.aigui-bs-panel{grid-column:span 1!important}.aigui-bs-panel[data-aigui-bigscreen-wide]{grid-column:span 2!important}}",
+	"@container (max-width:520px){.aigui-bs-grid{grid-template-columns:1fr!important}.aigui-bs-panel,.aigui-bs-panel[data-aigui-bigscreen-wide]{grid-column:span 1!important}}"
 ].join("");
 function failed(message) {
 	const text$1 = escapeHtml(message);
@@ -534,7 +549,7 @@ function bigscreen(options = {}) {
 			mount: (el) => {
 				let destroy;
 				let disposed = false;
-				import("./mount-DVHPS1xP.js").then(({ mountScreen }) => {
+				import("./mount-CbzNLMoI.js").then(({ mountScreen }) => {
 					if (disposed) return;
 					destroy = mountScreen(el, definition, options.animate !== false);
 				}).catch(() => {

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

@@ -218,7 +218,9 @@ function mountPanel(panel, definition, c, animate) {
 		class: "aigui-bs-panel",
 		"data-aigui-bigscreen-panel": panel.kind
 	});
-	node.style.gridColumn = `span ${Math.min(panel.span ?? 4, definition.columns)}`;
+	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 = withAlpha(c.accent, definition.theme === "dark" ? .22 : .18);
 	if (panel.title) {
 		const head = el("header", { class: "aigui-bs-panel-title" }, panel.title);

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

@@ -219,7 +219,9 @@ function mountPanel(panel, definition, c, animate) {
 		class: "aigui-bs-panel",
 		"data-aigui-bigscreen-panel": panel.kind
 	});
-	node.style.gridColumn = `span ${Math.min(panel.span ?? 4, definition.columns)}`;
+	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);
 	if (panel.title) {
 		const head = el("header", { class: "aigui-bs-panel-title" }, panel.title);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-bigscreen",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "description": "Animated data walls for AIGUI — counting KPIs, sweeping gauges, growing ranks, self-drawing charts, turning 3D bars and globes, on a grid the model lays out.",
   "keywords": [
     "llm",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "echarts": "^5.5.1",
-    "@ai-gui/core": "0.36.0"
+    "@ai-gui/core": "0.36.2"
   },
   "peerDependencies": {
     "echarts-gl": "^2.0.9"