@iyulab/chat-components 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.15.0] - 2026-09-30
+
+### Changed
+
+- **`u-chart-block` no longer changes Chart.js global defaults.** Its theme colors (text, ticks,
+  grid, tooltip) used to be written to `Chart.defaults`, which also recolored any other Chart.js chart
+  on the page. They are now options of that chart instance, merged under the `options` you pass —
+  your values win, down to a single key.
+- **`u-chart-block` uses the design-token chart palette.** Datasets that set no `backgroundColor` or
+  `borderColor` take `--u-chart-color-1..N` (one color per slice for `pie`, `doughnut`, and
+  `polarArea`), matching dashboards and `@iyulab/u-widgets`. Colors you set are kept, and the `data`
+  object you pass is not modified. Without the token sheet, Chart.js defaults apply as before.
+- **Peer ranges promise only tested majors:** `chart.js` is `^4.5.1` (was `>=4.5.1`), `@lit/react`
+  `^1.0.8` (was `>=1.0.8`), and `react` `^18.0.0 || ^19.0.0` (was `>=18.0.0`).
+
 ## [0.14.1] - 2026-09-30
 
 ### Fixed

package/dist/components-extra/UChartBlock.d.ts

@@ -26,8 +26,11 @@ export declare class UChartBlock extends UElement {
     private createChart;
     /** 기존 차트 인스턴스 제거 */
     private destroyChart;
-    /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
-    private applyTheme;
+    /**
+     * 현재 테마의 CSS 변수를 읽는다. ⚠`Chart.defaults` 를 바꾸지 않는다 — 전역이라 같은 페이지에서
+     * 소비자가 직접 만든 chart.js 차트의 색까지 바꿨다. 값은 이 인스턴스의 옵션으로만 들어간다.
+     */
+    private readTheme;
     private handleDownloadPNG;
     private handleDownloadJSON;
     private handleFullscreen;

package/dist/components-extra/UChartBlock.js

@@ -85,15 +85,15 @@ var UChartBlock = class UChartBlock extends UElement {
 			return;
 		}
 		try {
-			this.applyTheme();
+			const theme = this.readTheme();
 			this.chartjs = new Chart(ctx, {
 				type: this.type,
-				data: this.data,
-				options: {
+				data: paintDatasets(this.type, this.data, theme),
+				options: mergeOptions(themeOptions(this.type, this.data, this.options, theme), {
 					responsive: true,
 					maintainAspectRatio: true,
 					...this.options
-				}
+				})
 			});
 		} catch (e) {
 			this.error = e instanceof Error ? e.message : String(e);
@@ -106,22 +106,26 @@ var UChartBlock = class UChartBlock extends UElement {
 			this.chartjs = null;
 		}
 	}
-	/** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
-	applyTheme() {
-		const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
-		const textColor = css("--u-txt-color");
-		const weakColor = css("--u-txt-color-weak");
-		const borderColor = css("--u-border-color");
-		const bgColor = css("--u-bg-color");
-		Chart.defaults.color = textColor;
-		Chart.defaults.borderColor = borderColor;
-		Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
-		Chart.defaults.plugins.tooltip.titleColor = textColor;
-		Chart.defaults.plugins.tooltip.bodyColor = weakColor;
-		Chart.defaults.plugins.tooltip.borderColor = borderColor;
-		Chart.defaults.plugins.tooltip.borderWidth = 1;
-		Chart.defaults.scale.ticks.color = weakColor;
-		Chart.defaults.scale.grid.color = borderColor;
+	/**
+	* 현재 테마의 CSS 변수를 읽는다. ⚠`Chart.defaults` 를 바꾸지 않는다 — 전역이라 같은 페이지에서
+	* 소비자가 직접 만든 chart.js 차트의 색까지 바꿨다. 값은 이 인스턴스의 옵션으로만 들어간다.
+	*/
+	readTheme() {
+		const style = getComputedStyle(this);
+		const css = (v) => style.getPropertyValue(v).trim();
+		const palette = [];
+		for (let i = 1; i <= PALETTE_MAX; i++) {
+			const c = css(`--u-chart-color-${i}`);
+			if (!c) break;
+			palette.push(c);
+		}
+		return {
+			text: css("--u-txt-color"),
+			weak: css("--u-txt-color-weak"),
+			border: css("--u-border-color"),
+			background: css("--u-bg-color"),
+			palette
+		};
 	}
 	handleDownloadPNG() {
 		if (!this.chartjs) return;
@@ -155,5 +159,100 @@ __decorate([query("canvas"), __decorateMetadata("design:type", typeof HTMLCanvas
 __decorate([query(".viewport"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], UChartBlock.prototype, "viewport", void 0);
 __decorate([state(), __decorateMetadata("design:type", Object)], UChartBlock.prototype, "error", void 0);
 UChartBlock = __decorate([customElement("u-chart-block")], UChartBlock);
+/** 읽어 볼 팔레트 토큰의 상한 — 시트는 여덟을 선언한다. 비어 있는 첫 번호에서 멈춘다. */
+var PALETTE_MAX = 12;
+function isPlain(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/** `base` 위에 `over` 를 깊게 덮는다 — 소비자가 준 값이 항상 이긴다. 입력은 바꾸지 않는다. */
+function mergeOptions(base, over) {
+	const out = { ...base };
+	for (const [k, v] of Object.entries(over)) out[k] = isPlain(v) && isPlain(out[k]) ? mergeOptions(out[k], v) : v;
+	return out;
+}
+var CARTESIAN = /* @__PURE__ */ new Set([
+	"bar",
+	"line",
+	"scatter",
+	"bubble"
+]);
+var RADIAL = /* @__PURE__ */ new Set(["radar", "polarArea"]);
+var PER_POINT = /* @__PURE__ */ new Set([
+	"pie",
+	"doughnut",
+	"polarArea"
+]);
+/**
+* 테마 색을 담은 인스턴스 옵션. 축은 «이 차트에 실제로 생길 축» 에만 준다 — 원형 차트에 `x`/`y`
+* 설정을 주면 축이 생길 수 있어서다. 축 id 는 차트 종류의 기본 축 · 소비자가 선언한 축 · 데이터셋이
+* 가리키는 축의 합집합이다.
+*/
+function themeOptions(type, data, options, t) {
+	const tooltip = {
+		backgroundColor: t.background,
+		titleColor: t.text,
+		bodyColor: t.weak,
+		borderColor: t.border,
+		borderWidth: 1
+	};
+	const ids = new Set(Object.keys(options?.scales ?? {}));
+	if (CARTESIAN.has(type)) {
+		ids.add("x");
+		ids.add("y");
+	}
+	if (RADIAL.has(type)) ids.add("r");
+	for (const ds of data.datasets ?? []) {
+		const d = ds;
+		for (const key of [
+			"xAxisID",
+			"yAxisID",
+			"rAxisID"
+		]) if (typeof d[key] === "string") ids.add(d[key]);
+	}
+	const scales = {};
+	for (const id of ids) scales[id] = {
+		ticks: { color: t.weak },
+		grid: { color: t.border },
+		...RADIAL.has(type) && id === "r" ? {
+			angleLines: { color: t.border },
+			pointLabels: { color: t.text }
+		} : {}
+	};
+	return {
+		color: t.text,
+		borderColor: t.border,
+		plugins: {
+			tooltip,
+			legend: { labels: { color: t.text } }
+		},
+		...ids.size ? { scales } : {}
+	};
+}
+/**
+* 색을 지정하지 않은 데이터셋에 팔레트를 입힌다. 소비자가 준 `backgroundColor`/`borderColor` 는
+* 건드리지 않고, 입력 객체도 바꾸지 않는다(사본을 돌려준다). 원형 차트는 조각마다 한 색이다.
+*/
+function paintDatasets(type, data, t) {
+	const p = t.palette;
+	if (!p.length || !data.datasets) return data;
+	const datasets = data.datasets.map((ds, i) => {
+		const d = { ...ds };
+		const has = (k) => d[k] !== void 0;
+		if (PER_POINT.has(type)) {
+			const n = Array.isArray(d.data) ? d.data.length : 0;
+			if (!has("backgroundColor")) d.backgroundColor = Array.from({ length: n }, (_, j) => p[j % p.length]);
+			if (!has("borderColor") && t.background) d.borderColor = t.background;
+		} else {
+			const c = p[i % p.length];
+			if (!has("borderColor")) d.borderColor = c;
+			if (!has("backgroundColor")) d.backgroundColor = c;
+		}
+		return d;
+	});
+	return {
+		...data,
+		datasets
+	};
+}
 //#endregion
 export { UChartBlock };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -70,9 +70,9 @@
   },
   "peerDependencies": {
     "@iyulab/components": ">=1.51.0",
-    "@lit/react": ">=1.0.8",
-    "chart.js": ">=4.5.1",
-    "react": ">=18.0.0"
+    "@lit/react": "^1.0.8",
+    "chart.js": "^4.5.1",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {

package/skills/iyulab-chat-components/references/components/chart-block.md

@@ -65,6 +65,23 @@ of it was clipped by the block's `overflow: hidden` with no scrollbar left to re
 
 There is no size property or custom property for this — the host is the lever.
 
+## Colors and theme
+
+Text, tick, grid, and tooltip colors come from the design tokens (`--u-txt-color`,
+`--u-txt-color-weak`, `--u-border-color`, `--u-bg-color`), and dataset colors from the chart palette
+`--u-chart-color-1..N` — the same palette dashboards and `@iyulab/u-widgets` use. Both apply to **this
+chart only**: `Chart.defaults` is not modified, so other Chart.js charts on the page keep their own
+look.
+
+Anything you pass wins: a dataset's own `backgroundColor`/`borderColor` is kept, and `options` are
+merged over the theme (`options.scales.x.ticks.color` overrides just that value). Without the token
+sheet the palette is empty and Chart.js defaults apply.
+
+```css
+/* Recolour the palette for one area */
+.report u-chart-block { --u-chart-color-1: #0b6e4f; }
+```
+
 ## Properties
 
 | Property | Type | Default | Description |
@@ -80,6 +97,7 @@ There is no size property or custom property for this — the host is the lever.
 | Download | Export chart as PNG or raw JSON data |
 | Full screen | Toggle the chart viewport into full-screen mode |
 | Theme sync | Watches `document.documentElement[theme]` and re-renders on change |
+| Palette | Datasets without `backgroundColor`/`borderColor` take `--u-chart-color-1..N` from the design-token sheet (per slice for `pie`/`doughnut`/`polarArea`) |
 
 ## Requires