@iyulab/chat-components 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [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/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.14.1",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [

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