@iyulab/chat-components 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # 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
+
+- **A citation whose index falls inside a link URL, an image, or inline code no longer breaks it.**
+  The citation markup was restored into the `href` attribute (the link pointed at a truncated URL
+  followed by markup) or into the `<code>` text. It is now placed right after the link, image, or code.
+- **A citation that points past the text received so far is held until that text arrives.** During
+  streaming it used to be drawn at the end of the partial text and then jump to its place.
+- A citation with a negative or non-integer index is ignored. A negative index used to be counted
+  from the end of the text and inserted mid-word.
+
 ## [0.14.0] - 2026-09-30
 
 ### Security

package/dist/components/blocks/UMarkedBlock.d.ts

@@ -69,6 +69,8 @@ export declare class UMarkedBlock extends UElement {
      * 요청 자체가 반출 경로이므로 대체 텍스트만 그린다.
      */
     private renderImage;
+    /** 인라인 코드 안에 떨어진 인용은 코드 뒤로 옮긴다 — 코드는 글자 그대로여야 한다. */
+    private renderCodespan;
     /**
      * 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
      * 마크다운 문자열의 해당 위치에 플레이스홀더 센티널을 삽입합니다.

package/dist/components/blocks/UMarkedBlock.js

@@ -11,7 +11,7 @@ import { URefCard } from "../references/URefCard.js";
 import "../references/URefCardGroup.js";
 import { UTableBlock } from "./UTableBlock.js";
 import { resolveImageSource } from "../../utilities/imageSources.js";
-import { HtmlPlaceholder, stripRefPlaceholders } from "../../utilities/HtmlPlaceholder.js";
+import { HtmlPlaceholder, extractRefPlaceholders, stripRefPlaceholders } from "../../utilities/HtmlPlaceholder.js";
 import { styles } from "./UMarkedBlock.styles.js";
 import { nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -32,7 +32,8 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 				table: (token) => this.renderTable(token),
 				html: (token) => this.renderHtml(token),
 				link: (token) => this.renderLink(token),
-				image: (token) => this.renderImage(token)
+				image: (token) => this.renderImage(token),
+				codespan: (token) => this.renderCodespan(token)
 			}
 		}).use(markedKatex({ output: "mathml" }));
 		this.placeholder = new HtmlPlaceholder();
@@ -130,10 +131,12 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 	*/
 	renderLink(token) {
 		const text = token.tokens ? Parser.parseInline(token.tokens, this.parser.defaults) : token.text;
-		let out = `<a href="${escapeHtmlHref(token.href)}"`;
-		if (token.title) out += ` title="${escapeHtmlAttr(token.title)}"`;
+		const [href, inHref] = extractRefPlaceholders(token.href);
+		const [title, inTitle] = extractRefPlaceholders(token.title ?? "");
+		let out = `<a href="${escapeHtmlHref(href)}"`;
+		if (title) out += ` title="${escapeHtmlAttr(title)}"`;
 		out += `>${text}</a>`;
-		return out;
+		return out + inHref + inTitle;
 	}
 	/**
 	* 마크다운 이미지의 src도 `renderLink`와 동일하게 protocol을 검사하고, 이미지 출처 정책
@@ -141,22 +144,31 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 	* 요청 자체가 반출 경로이므로 대체 텍스트만 그린다.
 	*/
 	renderImage(token) {
-		const src = resolveImageSource(token.href);
+		const [href, inHref] = extractRefPlaceholders(token.href);
+		const [alt, inAlt] = extractRefPlaceholders(token.text);
+		const [title, inTitle] = extractRefPlaceholders(token.title ?? "");
+		const refs = inHref + inAlt + inTitle;
+		const src = resolveImageSource(href);
 		if (src === null) {
-			const label = token.text ? messages.text("imageBlockedNamed", { name: token.text }) : messages.text("imageBlocked");
-			return `<span class="image-blocked" part="image-blocked">${escapeHtmlText(label)}</span>`;
+			const label = alt ? messages.text("imageBlockedNamed", { name: alt }) : messages.text("imageBlocked");
+			return `<span class="image-blocked" part="image-blocked">${escapeHtmlText(label)}</span>` + refs;
 		}
-		let out = `<img src="${escapeHtmlAttr(src)}" alt="${escapeHtmlAttr(token.text)}"`;
-		if (token.title) out += ` title="${escapeHtmlAttr(token.title)}"`;
+		let out = `<img src="${escapeHtmlAttr(src)}" alt="${escapeHtmlAttr(alt)}"`;
+		if (title) out += ` title="${escapeHtmlAttr(title)}"`;
 		out += `>`;
-		return out;
+		return out + refs;
+	}
+	/** 인라인 코드 안에 떨어진 인용은 코드 뒤로 옮긴다 — 코드는 글자 그대로여야 한다. */
+	renderCodespan(token) {
+		const [text, refs] = extractRefPlaceholders(token.text);
+		return `<code>${escapeHtmlText(text)}</code>${refs}`;
 	}
 	/**
 	* 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
 	* 마크다운 문자열의 해당 위치에 플레이스홀더 센티널을 삽입합니다.
 	*/
 	insertRefs(value, refs) {
-		const sorted = [...refs].sort((a, b) => b.endIndex - a.endIndex);
+		const sorted = refs.filter((r) => Number.isInteger(r.endIndex) && r.endIndex >= 0 && r.endIndex <= value.length).sort((a, b) => b.endIndex - a.endIndex);
 		for (const ref of sorted) {
 			const sources = ref.sources ?? [];
 			const label = escapeHtmlText(ref.label ?? `[${refs.indexOf(ref) + 1}]`);

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/dist/utilities/HtmlPlaceholder.d.ts

@@ -11,6 +11,14 @@
  * 종전처럼 한쪽만 바뀌어 어긋난다.
  */
 export declare function stripRefPlaceholders(value: string): string;
+/**
+ * 문자열에서 ref 플레이스홀더 센티널을 떼어 낸다 — `[센티널 없는 문자열, 떼어 낸 센티널들]`.
+ *
+ * 링크 주소·이미지 속성·인라인 코드처럼 **태그가 들어갈 수 없는 자리**에 인용이 떨어졌을 때 쓴다.
+ * 그 자리에 남기면 `restore()` 가 속성 값이나 `<code>` 안에 HTML 을 넣는다(링크가 깨지고 코드에
+ * 인용 태그가 섞인다). 지우면 인용을 잃으므로, 호출부가 떼어 낸 것을 그 구문 **바로 뒤**에 둔다.
+ */
+export declare function extractRefPlaceholders(value: string): [string, string];
 export declare class HtmlPlaceholder {
     private map;
     private idx;

package/dist/utilities/HtmlPlaceholder.js

@@ -50,6 +50,18 @@ var sentinelPattern = () => /\u{E000}\d+\u{E001}/gu;
 function stripRefPlaceholders(value) {
 	return value.replace(sentinelPattern(), "");
 }
+/**
+* 문자열에서 ref 플레이스홀더 센티널을 떼어 낸다 — `[센티널 없는 문자열, 떼어 낸 센티널들]`.
+*
+* 링크 주소·이미지 속성·인라인 코드처럼 **태그가 들어갈 수 없는 자리**에 인용이 떨어졌을 때 쓴다.
+* 그 자리에 남기면 `restore()` 가 속성 값이나 `<code>` 안에 HTML 을 넣는다(링크가 깨지고 코드에
+* 인용 태그가 섞인다). 지우면 인용을 잃으므로, 호출부가 떼어 낸 것을 그 구문 **바로 뒤**에 둔다.
+*/
+function extractRefPlaceholders(value) {
+	const keys = value.match(sentinelPattern());
+	if (!keys) return [value, ""];
+	return [value.replace(sentinelPattern(), ""), keys.join("")];
+}
 var HtmlPlaceholder = class {
 	constructor() {
 		this.map = {};
@@ -78,4 +90,4 @@ var HtmlPlaceholder = class {
 	}
 };
 //#endregion
-export { HtmlPlaceholder, stripRefPlaceholders };
+export { HtmlPlaceholder, extractRefPlaceholders, stripRefPlaceholders };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.14.0",
+  "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
 

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

@@ -79,6 +79,11 @@ Markdown images (table cells included) follow the page-wide image origin policy
 
 ## ReferenceCitation Type
 
+A citation is drawn at `endIndex` in the markdown source. While a response streams, a citation whose
+`endIndex` is past the text received so far is held until that text arrives; a negative or non-integer
+index is ignored. If `endIndex` falls inside a link URL, an image, or inline code, the citation is drawn
+right after that element; inside a fenced code block it is dropped.
+
 ```ts
 interface ReferenceCitation {
   startIndex: number;    // Start character index in the markdown text