@ai-gui/plugin-bigscreen 0.39.1 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ai-gui/plugin-bigscreen
 
+## 0.40.0
+
+### Minor Changes
+
+- cb85d4a: `fit` — size a screen to the element it was mounted in.
+
+  A screen has always sized itself for a wall: a panel body takes the pixel height the fence names,
+  or its kind's default, and the screen ends up as tall as the sum of them. That is right for the
+  surface it was built for, a display with nothing else on it, and wrong for the one it grew into —
+  a panel embedded in a page, inside a card a few hundred pixels tall. There the panel drew at full
+  size and covered whatever was beneath it, because nothing in the screen ever consulted the box it
+  was put in. A host could not fix it from outside either: the height is set inline, and an inline
+  height beats any stylesheet the host can write.
+
+  With `fit: true` the host's element is the authority. The screen becomes a column that fills it,
+  the grid takes what the heading leaves, and a panel body flexes into its row instead of taking a
+  fixed height — the fence's own `height` is ignored, because a number in the document cannot know
+  the box. Default false, so every existing wall is unchanged.
+
+  Meant for a host that gives the screen a bounded box, and usually for one panel: a wall of twelve
+  squeezed into a card gives each of them a twelfth of a card.
+
+### Patch Changes
+
+- @ai-gui/core@0.40.0
+
 ## 0.39.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -901,6 +901,10 @@ const bigscreenCss = [
 	".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-fit{display:flex;flex-direction:column;min-height:0;height:100%}",
+	".aigui-bs-fit .aigui-bs-grid{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}",
+	".aigui-bs-fit .aigui-bs-panel{min-height:0;overflow:hidden}",
+	".aigui-bs-fit .aigui-bs-panel-body{min-height:0}",
 	".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}",
@@ -961,10 +965,10 @@ function bigscreen(options = {}) {
 				let destroy;
 				let disposed = false;
 				Promise.resolve().then(function() {
-					return require("./mount-BXSCLn67.cjs");
+					return require("./mount-DcJpc0Yi.cjs");
 				}).then(({ mountScreen }) => {
 					if (disposed) return;
-					destroy = mountScreen(el, definition, options.animate !== false, options.globe, options.events);
+					destroy = mountScreen(el, definition, options.animate !== false, options.globe, options.events, options.fit === true);
 				}).catch(() => {
 					const error = document.createElement("div");
 					error.setAttribute("data-aigui-bigscreen-error", "");

package/dist/index.d.cts

@@ -268,6 +268,26 @@ interface BigscreenOptions {
   globe?: GlobeSkin;
   /** What a click on a timeline item or a graph node does. */
   events?: BigscreenEvents;
+  /**
+   * Fit the screen to the element it is mounted in, instead of drawing every panel at its own
+   * height.
+   *
+   * A screen is sized for a wall by default: each panel body takes the pixel height the fence
+   * names, or the default for its kind — a globe is 560 — and the screen ends up as tall as the
+   * sum of them. That is right for the surface it was built for, a display with nothing else on
+   * it, and wrong for the one it grew into: a panel embedded in a page, inside a card a few
+   * hundred pixels tall. There the panel drew at full size and covered whatever was beneath it,
+   * because nothing in the screen ever consults the box it was put in.
+   *
+   * With `fit`, the host's element is the authority. The screen becomes a column that fills it,
+   * the grid takes the space the heading leaves, and a panel body flexes into its row rather than
+   * taking a fixed height. The fence's own `height` is ignored — a number in the document cannot
+   * know the box, which is the whole point.
+   *
+   * Meant for a host that gives the screen a bounded box, and usually for one panel: a wall of
+   * twelve squeezed into a card gives each of them a twelfth of a card. Default false.
+   */
+  fit?: boolean;
 }
 interface BigscreenError {
   code: "invalid-json" | "invalid-definition" | "too-large";

package/dist/index.d.ts

@@ -268,6 +268,26 @@ interface BigscreenOptions {
   globe?: GlobeSkin;
   /** What a click on a timeline item or a graph node does. */
   events?: BigscreenEvents;
+  /**
+   * Fit the screen to the element it is mounted in, instead of drawing every panel at its own
+   * height.
+   *
+   * A screen is sized for a wall by default: each panel body takes the pixel height the fence
+   * names, or the default for its kind — a globe is 560 — and the screen ends up as tall as the
+   * sum of them. That is right for the surface it was built for, a display with nothing else on
+   * it, and wrong for the one it grew into: a panel embedded in a page, inside a card a few
+   * hundred pixels tall. There the panel drew at full size and covered whatever was beneath it,
+   * because nothing in the screen ever consults the box it was put in.
+   *
+   * With `fit`, the host's element is the authority. The screen becomes a column that fills it,
+   * the grid takes the space the heading leaves, and a panel body flexes into its row rather than
+   * taking a fixed height. The fence's own `height` is ignored — a number in the document cannot
+   * know the box, which is the whole point.
+   *
+   * Meant for a host that gives the screen a bounded box, and usually for one panel: a wall of
+   * twelve squeezed into a card gives each of them a twelfth of a card. Default false.
+   */
+  fit?: boolean;
 }
 interface BigscreenError {
   code: "invalid-json" | "invalid-definition" | "too-large";

package/dist/index.js

@@ -900,6 +900,10 @@ const bigscreenCss = [
 	".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-fit{display:flex;flex-direction:column;min-height:0;height:100%}",
+	".aigui-bs-fit .aigui-bs-grid{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}",
+	".aigui-bs-fit .aigui-bs-panel{min-height:0;overflow:hidden}",
+	".aigui-bs-fit .aigui-bs-panel-body{min-height:0}",
 	".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}",
@@ -959,9 +963,9 @@ function bigscreen(options = {}) {
 			mount: (el) => {
 				let destroy;
 				let disposed = false;
-				import("./mount-ChcoxgHd.js").then(({ mountScreen }) => {
+				import("./mount-VIgmcKTf.js").then(({ mountScreen }) => {
 					if (disposed) return;
-					destroy = mountScreen(el, definition, options.animate !== false, options.globe, options.events);
+					destroy = mountScreen(el, definition, options.animate !== false, options.globe, options.events, options.fit === true);
 				}).catch(() => {
 					const error = document.createElement("div");
 					error.setAttribute("data-aigui-bigscreen-error", "");

package/dist/{mount-BXSCLn67.cjs → mount-DcJpc0Yi.cjs}

@@ -322,7 +322,7 @@ 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) {
+function mountPanel(panel, definition, c, animate, earth, events, fit) {
 	const node = el("section", {
 		class: "aigui-bs-panel",
 		"data-aigui-bigscreen-panel": panel.kind
@@ -340,8 +340,10 @@ function mountPanel(panel, definition, c, animate, earth, events) {
 		node.appendChild(head);
 	}
 	const body = el("div", { class: "aigui-bs-panel-body" });
-	const height = panel.height ?? bodyHeight(panel);
-	if (height) body.style.height = `${height}px`;
+	if (!fit) {
+		const height = panel.height ?? bodyHeight(panel);
+		if (height) body.style.height = `${height}px`;
+	}
 	node.appendChild(body);
 	let destroy = () => {};
 	try {
@@ -403,9 +405,10 @@ function mountPanel(panel, definition, c, animate, earth, events) {
 * 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) {
+function mountScreen(host, definition, animate, earth, events, fit = false) {
 	const c = require_positions.palette(definition);
 	host.setAttribute("data-aigui-bigscreen", definition.theme);
+	host.classList.toggle("aigui-bs-fit", fit);
 	host.style.setProperty("--aigui-bs-accent", c.accent);
 	host.style.setProperty("--aigui-bs-text", c.text);
 	host.style.setProperty("--aigui-bs-muted", c.muted);
@@ -425,7 +428,7 @@ function mountScreen(host, definition, animate, earth, events) {
 	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, earth, events));
+	const mounted = definition.panels.map((panel) => mountPanel(panel, definition, c, animate, earth, events, fit));
 	for (const { node } of mounted) grid.appendChild(node);
 	return () => {
 		for (const { destroy } of mounted) destroy();

package/dist/{mount-ChcoxgHd.js → mount-VIgmcKTf.js}

@@ -321,7 +321,7 @@ 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) {
+function mountPanel(panel, definition, c, animate, earth, events, fit) {
 	const node = el("section", {
 		class: "aigui-bs-panel",
 		"data-aigui-bigscreen-panel": panel.kind
@@ -339,8 +339,10 @@ function mountPanel(panel, definition, c, animate, earth, events) {
 		node.appendChild(head);
 	}
 	const body = el("div", { class: "aigui-bs-panel-body" });
-	const height = panel.height ?? bodyHeight(panel);
-	if (height) body.style.height = `${height}px`;
+	if (!fit) {
+		const height = panel.height ?? bodyHeight(panel);
+		if (height) body.style.height = `${height}px`;
+	}
 	node.appendChild(body);
 	let destroy = () => {};
 	try {
@@ -402,9 +404,10 @@ function mountPanel(panel, definition, c, animate, earth, events) {
 * 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) {
+function mountScreen(host, definition, animate, earth, events, fit = false) {
 	const c = palette(definition);
 	host.setAttribute("data-aigui-bigscreen", definition.theme);
+	host.classList.toggle("aigui-bs-fit", fit);
 	host.style.setProperty("--aigui-bs-accent", c.accent);
 	host.style.setProperty("--aigui-bs-text", c.text);
 	host.style.setProperty("--aigui-bs-muted", c.muted);
@@ -424,7 +427,7 @@ function mountScreen(host, definition, animate, earth, events) {
 	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, earth, events));
+	const mounted = definition.panels.map((panel) => mountPanel(panel, definition, c, animate, earth, events, fit));
 	for (const { node } of mounted) grid.appendChild(node);
 	return () => {
 		for (const { destroy } of mounted) destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-bigscreen",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "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.39.1"
+    "@ai-gui/core": "0.40.0"
   },
   "peerDependencies": {
     "echarts-gl": "^2.0.9"