@ai-gui/plugin-bigscreen 0.36.1 → 0.36.3

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @ai-gui/plugin-bigscreen
 
+## 0.36.3
+
+### Patch Changes
+
+- @ai-gui/core@0.36.3
+
+## 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

package/dist/index.cjs

@@ -480,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)}",
@@ -512,7 +512,8 @@ const bigscreenCss = [
 	".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}",
 	":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)}",
-	"@media (max-width:640px){.aigui-bs-grid{grid-template-columns:1fr!important}.aigui-bs-panel{grid-column:span 1!important}}"
+	"@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);
@@ -550,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

@@ -479,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)}",
@@ -511,7 +511,8 @@ const bigscreenCss = [
 	".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}",
 	":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)}",
-	"@media (max-width:640px){.aigui-bs-grid{grid-template-columns:1fr!important}.aigui-bs-panel{grid-column:span 1!important}}"
+	"@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);
@@ -548,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.1",
+  "version": "0.36.3",
   "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.1"
+    "@ai-gui/core": "0.36.3"
   },
   "peerDependencies": {
     "echarts-gl": "^2.0.9"