@ai-gui/plugin-bigscreen 0.36.3 → 0.37.0

package/package.json

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

package/dist/options-BpHnWRpI.cjs

@@ -1,499 +0,0 @@
-"use strict";
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-
-//#region src/palette.ts
-/**
-* Two palettes, one per theme.
-*
-* The dark one is the data-wall look — deep navy, cyan accent, a little glow; the light one is
-* the same screen on a white page. The accent can be overridden per screen, and the series
-* colours start from it so a screen reads as one thing rather than a collage.
-*/
-function palette(definition) {
-	const accent = definition.accent ?? (definition.theme === "dark" ? "#22d3ee" : "#0369a1");
-	return definition.theme === "dark" ? {
-		accent,
-		text: "#e2e8f0",
-		muted: "#94a3b8",
-		good: "#34d399",
-		bad: "#fb7185",
-		warn: "#fbbf24",
-		track: "rgba(148,163,184,0.18)",
-		series: [
-			accent,
-			"#a78bfa",
-			"#34d399",
-			"#fbbf24",
-			"#fb7185",
-			"#60a5fa",
-			"#f472b6",
-			"#2dd4bf"
-		],
-		gridLine: "rgba(148,163,184,0.16)"
-	} : {
-		accent,
-		text: "#1e293b",
-		muted: "#64748b",
-		good: "#059669",
-		bad: "#e11d48",
-		warn: "#d97706",
-		track: "rgba(100,116,139,0.16)",
-		series: [
-			accent,
-			"#7c3aed",
-			"#059669",
-			"#d97706",
-			"#e11d48",
-			"#2563eb",
-			"#db2777",
-			"#0d9488"
-		],
-		gridLine: "rgba(100,116,139,0.2)"
-	};
-}
-/** `#rrggbb` with an alpha, for glows and fills. */
-function withAlpha(hex, alpha) {
-	const h = hex.replace("#", "");
-	const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
-	const n = Number.parseInt(full, 16);
-	return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
-}
-
-//#endregion
-//#region src/options.ts
-/**
-* ECharts options built from panels.
-*
-* Pure functions of the panel and the palette, so they can be tested without a canvas and so
-* the same panel draws the same chart on every screen.
-*/
-const FONT = "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Noto Sans CJK SC', sans-serif";
-/** Format a number for a label: thousands grouped, up to `decimals` places. */
-function formatNumber(value, decimals = 0) {
-	return value.toLocaleString("en-US", {
-		minimumFractionDigits: decimals,
-		maximumFractionDigits: decimals
-	});
-}
-/** The colour a gauge shows at `fraction` of its range. */
-function gaugeColour(fraction, thresholds, c) {
-	if (!thresholds) return c.accent;
-	if (fraction >= thresholds[1]) return c.bad;
-	if (fraction >= thresholds[0]) return c.warn;
-	return c.good;
-}
-function gaugeOption(panel, c, animate) {
-	const max = panel.max ?? 100;
-	const fraction = Math.max(0, Math.min(1, panel.value / max));
-	const colour = gaugeColour(fraction, panel.thresholds, c);
-	const ring = panel.style === "ring";
-	return {
-		animation: animate,
-		animationDuration: 1400,
-		animationEasing: "cubicOut",
-		series: [{
-			type: "gauge",
-			startAngle: ring ? 90 : 210,
-			endAngle: ring ? -270 : -30,
-			min: 0,
-			max,
-			radius: "92%",
-			center: ["50%", ring ? "50%" : "58%"],
-			progress: {
-				show: true,
-				width: ring ? 14 : 16,
-				roundCap: true,
-				itemStyle: {
-					color: colour,
-					shadowBlur: 12,
-					shadowColor: withAlpha(colour, .5)
-				}
-			},
-			pointer: {
-				show: !ring,
-				length: "60%",
-				width: 4,
-				itemStyle: { color: colour }
-			},
-			axisLine: { lineStyle: {
-				width: ring ? 14 : 16,
-				color: [[1, c.track]]
-			} },
-			axisTick: { show: false },
-			splitLine: {
-				show: !ring,
-				length: 8,
-				lineStyle: {
-					color: c.muted,
-					width: 1
-				}
-			},
-			axisLabel: {
-				show: !ring,
-				color: c.muted,
-				fontSize: 10,
-				distance: 18,
-				fontFamily: FONT
-			},
-			anchor: {
-				show: !ring,
-				size: 10,
-				itemStyle: { color: colour }
-			},
-			title: { show: false },
-			detail: {
-				valueAnimation: animate,
-				offsetCenter: [0, ring ? 0 : "28%"],
-				fontSize: ring ? 28 : 24,
-				fontWeight: 700,
-				fontFamily: FONT,
-				color: c.text,
-				formatter: (value) => `${formatNumber(value, Number.isInteger(panel.value) ? 0 : 1)}${panel.unit ?? ""}`
-			},
-			data: [{ value: panel.value }]
-		}]
-	};
-}
-/**
-* The screen's palette laid over whatever the model wrote.
-*
-* The model's option wins on anything it sets; this only fills in the colours, the font, the
-* transparent background and the entrance animation a screen wants, so a plain `bar` series
-* still looks like it belongs.
-*/
-function chartOption(panel, c, animate) {
-	const axisStyle = {
-		axisLine: { lineStyle: { color: c.gridLine } },
-		axisLabel: {
-			color: c.muted,
-			fontFamily: FONT
-		},
-		splitLine: { lineStyle: { color: c.gridLine } }
-	};
-	const withAxisDefaults = (axis) => {
-		if (Array.isArray(axis)) return axis.map((a) => ({
-			...axisStyle,
-			...a
-		}));
-		if (axis && typeof axis === "object") return {
-			...axisStyle,
-			...axis
-		};
-		return axis;
-	};
-	const option = panel.option;
-	return {
-		backgroundColor: "transparent",
-		color: c.series,
-		textStyle: {
-			color: c.text,
-			fontFamily: FONT
-		},
-		animation: animate,
-		animationDuration: 1200,
-		animationEasing: "cubicOut",
-		grid: {
-			left: 40,
-			right: 16,
-			top: 28,
-			bottom: 28,
-			containLabel: true
-		},
-		legend: { textStyle: { color: c.muted } },
-		tooltip: { trigger: "axis" },
-		...option,
-		...option.xAxis !== void 0 ? { xAxis: withAxisDefaults(option.xAxis) } : {},
-		...option.yAxis !== void 0 ? { yAxis: withAxisDefaults(option.yAxis) } : {}
-	};
-}
-function chart3dOption(panel, c, animate) {
-	const values = panel.data.map((p) => p[2]);
-	const max = Math.max(...values);
-	const min = Math.min(...values);
-	const axis = (categories, name) => ({
-		type: categories ? "category" : "value",
-		data: categories,
-		name: "",
-		axisLine: { lineStyle: { color: c.gridLine } },
-		axisLabel: {
-			color: c.muted,
-			fontFamily: FONT
-		},
-		splitLine: { lineStyle: { color: c.gridLine } },
-		axisPointer: { show: false },
-		nameTextStyle: { color: c.muted },
-		id: name
-	});
-	const series = {
-		type: panel.type,
-		data: panel.data,
-		shading: "lambert",
-		emphasis: { itemStyle: { color: c.text } }
-	};
-	if (panel.type === "bar3D") series.bevelSize = .2;
-	if (panel.type === "scatter3D") series.symbolSize = 9;
-	if (panel.type === "line3D") series.lineStyle = {
-		width: 3,
-		color: c.accent
-	};
-	if (panel.type === "surface") series.wireframe = {
-		show: true,
-		lineStyle: { color: withAlpha(c.accent, .35) }
-	};
-	return {
-		backgroundColor: "transparent",
-		textStyle: { fontFamily: FONT },
-		tooltip: {},
-		visualMap: {
-			show: false,
-			min,
-			max,
-			dimension: 2,
-			inRange: { color: [
-				withAlpha(c.accent, .55),
-				c.accent,
-				c.series[1]
-			] }
-		},
-		xAxis3D: axis(panel.xAxis, "x"),
-		yAxis3D: axis(panel.yAxis, "y"),
-		zAxis3D: {
-			type: "value",
-			name: "",
-			axisLine: { lineStyle: { color: c.gridLine } },
-			axisLabel: {
-				color: c.muted,
-				fontFamily: FONT
-			},
-			splitLine: { lineStyle: { color: c.gridLine } }
-		},
-		grid3D: {
-			boxWidth: 100,
-			boxDepth: 80,
-			boxHeight: 60,
-			axisPointer: { show: false },
-			light: {
-				main: {
-					intensity: 1.3,
-					shadow: false,
-					alpha: 40,
-					beta: 30
-				},
-				ambient: { intensity: .5 }
-			},
-			viewControl: {
-				autoRotate: animate && panel.rotate !== false,
-				autoRotateSpeed: 8,
-				distance: 190,
-				alpha: 24,
-				beta: 35,
-				projection: "perspective"
-			},
-			environment: "none"
-		},
-		series: [series]
-	};
-}
-/**
-* A globe without a satellite photograph.
-*
-* ECharts' globe wants a texture, and the usual one is an image fetched from somewhere — which a
-* page must not do on a model's say-so. So the texture is painted here: a deep sphere with a
-* graticule, which is what a data wall's globe looks like anyway. Arcs get a moving trail.
-*/
-function globeTexture(c, theme) {
-	if (typeof document === "undefined") return void 0;
-	const canvas = document.createElement("canvas");
-	canvas.width = 1024;
-	canvas.height = 512;
-	const ctx = canvas.getContext("2d");
-	if (!ctx) return void 0;
-	ctx.fillStyle = theme === "dark" ? "#0b1a33" : "#dbe7f5";
-	ctx.fillRect(0, 0, canvas.width, canvas.height);
-	ctx.strokeStyle = withAlpha(c.accent, theme === "dark" ? .28 : .35);
-	ctx.lineWidth = 1.2;
-	for (let lng = 0; lng < 360; lng += 15) {
-		const x = lng / 360 * canvas.width;
-		ctx.beginPath();
-		ctx.moveTo(x, 0);
-		ctx.lineTo(x, canvas.height);
-		ctx.stroke();
-	}
-	for (let lat = 15; lat < 180; lat += 15) {
-		const y = lat / 180 * canvas.height;
-		ctx.beginPath();
-		ctx.moveTo(0, y);
-		ctx.lineTo(canvas.width, y);
-		ctx.stroke();
-	}
-	ctx.strokeStyle = withAlpha(c.accent, .6);
-	ctx.lineWidth = 2;
-	ctx.beginPath();
-	ctx.moveTo(0, canvas.height / 2);
-	ctx.lineTo(canvas.width, canvas.height / 2);
-	ctx.stroke();
-	return canvas.toDataURL("image/png");
-}
-function globeOption(panel, c, animate, texture) {
-	const arcs = (panel.arcs ?? []).map((arc) => ({
-		coords: [arc.from, arc.to],
-		name: arc.label
-	}));
-	const points = (panel.points ?? []).map((point) => ({
-		name: point.label,
-		value: [
-			point.coord[0],
-			point.coord[1],
-			0,
-			point.value ?? 1
-		]
-	}));
-	const maxValue = Math.max(1, ...points.map((p) => p.value[3]));
-	return {
-		backgroundColor: "transparent",
-		globe: {
-			baseTexture: texture,
-			shading: "color",
-			environment: "none",
-			globeRadius: 78,
-			atmosphere: {
-				show: true,
-				color: c.accent,
-				glowPower: 5,
-				innerGlowPower: 2,
-				offset: 4
-			},
-			light: {
-				ambient: { intensity: 1 },
-				main: { intensity: .2 }
-			},
-			viewControl: {
-				autoRotate: animate && panel.rotate !== false,
-				autoRotateSpeed: 3,
-				distance: 150,
-				targetCoord: arcs[0]?.coords[0] ?? points[0]?.value.slice(0, 2)
-			}
-		},
-		series: [{
-			type: "lines3D",
-			coordinateSystem: "globe",
-			blendMode: "lighter",
-			lineStyle: {
-				width: 2.5,
-				color: c.series[1],
-				opacity: .9
-			},
-			effect: {
-				show: animate,
-				period: 3,
-				trailWidth: 4,
-				trailLength: .3,
-				trailOpacity: 1,
-				trailColor: "#ffffff"
-			},
-			data: arcs
-		}, {
-			type: "scatter3D",
-			coordinateSystem: "globe",
-			symbolSize: (value) => 6 + 10 * Math.sqrt((value[3] ?? 1) / maxValue),
-			itemStyle: {
-				color: c.series[1],
-				opacity: .9
-			},
-			label: {
-				show: true,
-				formatter: "{b}",
-				color: c.text,
-				fontSize: 11,
-				fontFamily: FONT,
-				backgroundColor: "transparent",
-				distance: 6
-			},
-			data: points
-		}]
-	};
-}
-
-//#endregion
-Object.defineProperty(exports, '__toESM', {
-  enumerable: true,
-  get: function () {
-    return __toESM;
-  }
-});
-Object.defineProperty(exports, 'chart3dOption', {
-  enumerable: true,
-  get: function () {
-    return chart3dOption;
-  }
-});
-Object.defineProperty(exports, 'chartOption', {
-  enumerable: true,
-  get: function () {
-    return chartOption;
-  }
-});
-Object.defineProperty(exports, 'formatNumber', {
-  enumerable: true,
-  get: function () {
-    return formatNumber;
-  }
-});
-Object.defineProperty(exports, 'gaugeColour', {
-  enumerable: true,
-  get: function () {
-    return gaugeColour;
-  }
-});
-Object.defineProperty(exports, 'gaugeOption', {
-  enumerable: true,
-  get: function () {
-    return gaugeOption;
-  }
-});
-Object.defineProperty(exports, 'globeOption', {
-  enumerable: true,
-  get: function () {
-    return globeOption;
-  }
-});
-Object.defineProperty(exports, 'globeTexture', {
-  enumerable: true,
-  get: function () {
-    return globeTexture;
-  }
-});
-Object.defineProperty(exports, 'palette', {
-  enumerable: true,
-  get: function () {
-    return palette;
-  }
-});
-Object.defineProperty(exports, 'withAlpha', {
-  enumerable: true,
-  get: function () {
-    return withAlpha;
-  }
-});