@iyulab/chat-components 0.17.4 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [0.18.0] - 2026-10-07
+
+### Changed (breaking)
+
+- **`u-table-block` cell `text` is plain text.** It was rendered as HTML, so a string meant as text — a name, a
+  server value — injected markup, and search, sort and the CSV/XLS downloads read the tags too (a bold `9` sorted
+  after `10`; searching `strong` matched every bold cell; downloads carried `<strong>`). A formatted cell now gives
+  its markup in the new optional `html` field, used only for display. `u-marked-block` fills both, so markdown
+  tables look the same. **Migration:** if you passed markup in `text`, move it to `html` and put the plain text in
+  `text`.
+
+### Fixed
+
+- **Search highlighting no longer cuts markup.** It inserted `<mark>` into the cell's HTML string, splitting tags and
+  entities (searching `amp` broke `&amp;`). Matches are now painted with the CSS Custom Highlight API over the
+  rendered text; the DOM is unchanged.
+
+## [0.17.5] - 2026-10-07
+
+### Fixed
+
+- **Deep imports register what they render.** `u-prompt` renders its input as `<u-text-block>` and `u-table-block`
+  its search box as `<u-input>`, but each imported the class for a type only, so the build dropped both imports:
+  importing either component by its own module path left the prompt without an input and the table without a
+  search box. The package entry hid it (it registers every component).
+- **`u-table-block`'s search box has a name** (new locale key `searchLabel` — en *Search rows*, ko *행 검색*); it had
+  only its placeholder, which disappears as you type.
+
 ## [0.17.4] - 2026-10-07
 
 ### Fixed

package/dist/components/blocks/UCodeBlock.js

@@ -40,7 +40,7 @@ var UCodeBlock = class UCodeBlock extends UElement {
           .value=${value}
         ></u-copy-button>
       </div>
-
+      <!-- html-sink: highlight.js output — it escapes the source text and adds only its own span markup -->
       <pre class="hljs">${unsafeHTML(hljs.highlight(value, { language: lang }).value)}</pre>
 
       <div hidden aria-hidden="true">

package/dist/components/blocks/UMarkedBlock.js

@@ -102,15 +102,16 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 	* 반드시 `this.parser.defaults`(우리 렌더러가 병합된 설정)를 함께 넘긴다.
 	*/
 	renderTable(token) {
-		const cellHtml = (cell) => this.placeholder.restore(cell.tokens ? Parser.parseInline(cell.tokens, this.parser.defaults) : cell.text);
-		const headers = token.header.map((h) => ({
-			text: cellHtml(h),
-			align: h.align
-		}));
-		const rows = token.rows.map((row) => row.map((cell) => ({
-			text: cellHtml(cell),
-			align: cell.align
-		})));
+		const cell = (c) => {
+			const markup = this.placeholder.restore(c.tokens ? Parser.parseInline(c.tokens, this.parser.defaults) : c.text);
+			return {
+				text: new DOMParser().parseFromString(markup, "text/html").body.textContent ?? "",
+				html: markup,
+				align: c.align
+			};
+		};
+		const headers = token.header.map(cell);
+		const rows = token.rows.map((row) => row.map(cell));
 		return UTableBlock.buildHTML({
 			headers,
 			rows

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

@@ -1,16 +1,20 @@
 import { UDataElement } from '../UDataElement.js';
 /**
- * 테이블 셀 데이터 타입
+ * 테이블 셀 데이터 타입.
  *
- * ⚠`text`는 렌더링 시 `unsafeHTML()`로 그대로 주입되는 **신뢰된 HTML 마크업**입니다
- * (일반 텍스트가 아닙니다) — `UMarkedBlock`이 마크다운 인라인 렌더러(자체 XSS 방어
- * 포함: 원시 HTML escape, `javascript:`/`data:` 링크 차단)를 거쳐 채우는 것을
- * 전제로 합니다. 이 컴포넌트를 직접 구동하는 소비자가 정화되지 않은 외부 문자열을
- * `text`에 넣으면 XSS로 이어질 수 있습니다 — 반드시 사전에 sanitize할 것.
+ * `text` 는 **글자**다 — 그대로 보이고, 검색·정렬·CSV/XLS 내려받기가 이것을 쓴다. 서식이 있는 셀(마크다운의
+ * 굵게·코드·링크)은 `html` 에 마크업을 따로 싣는다 — 그러면 화면은 `html` 을, 검색·정렬·내려받기는 여전히 `text` 를 쓴다.
+ * 종전에는 `text` 하나가 마크업이라 이름과 달리 글자를 HTML 로 그렸고(넣은 문자열에 따라 마크업 주입),
+ * 검색·정렬·내려받기가 태그까지 읽었다.
  */
 export interface TableCell {
-    /** 셀에 표시할 (이미 안전 처리된) HTML 마크업 */
+    /** 셀의 글자 — 표시(`html` 이 없을 때) · 검색 · 정렬 · 내려받기 */
     text: string;
+    /**
+     * 셀을 서식과 함께 그릴 **신뢰된** HTML 마크업 — 화면에만 쓰인다. `UMarkedBlock` 이 자기 마크다운 렌더러
+     * (원시 HTML 은 글자로, 위험한 링크 프로토콜 차단)의 출력으로 채운다. 외부 문자열을 그대로 넣지 말 것.
+     */
+    html?: string;
     /** 셀 내용의 정렬 방식. 기본값은 "left" */
     align: "left" | "center" | "right" | null;
 }
@@ -37,12 +41,20 @@ export declare class UTableBlock extends UDataElement {
     private search;
     private searchCache?;
     private searchTimer;
+    /** 이 표가 공유 하이라이트에 더한 범위 — 다시 그릴 때·떼어질 때 걷는다. */
+    private searchRanges;
+    protected updated(): void;
+    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
+    /** 셀 내용 — 서식 마크업(`html`)이 있으면 그것을, 없으면 글자(`text`)를 그린다. */
+    private cellContent;
     /**
-     * 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
-     * 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+     * 검색어 하이라이트 — 본문 셀의 글자 노드에서 찾은 자리를 공유 하이라이트에 범위로 더한다(CSS Custom Highlight API).
+     * DOM 을 바꾸지 않는다: 종전처럼 마크업 문자열에 `<mark>` 를 끼우면 태그·엔티티 안의 글자까지 잘렸다
+     * (`&amp;` 에서 «amp» 를 찾으면 엔티티가 깨졌다).
      */
-    private renderHighlightedText;
+    private paintSearch;
+    private clearSearchRanges;
     /**
      * 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.
      */

package/dist/components/blocks/UTableBlock.js

@@ -11,7 +11,24 @@ import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/skeleton/USkeleton.js";
 import "@iyulab/components/dist/components/button/UButton.js";
 import { repeat } from "lit/directives/repeat.js";
+import "@iyulab/components/dist/components/input/UInput.js";
 //#region src/components/blocks/UTableBlock.ts
+/** 검색어 하이라이트의 등록 이름 — 스타일의 `::highlight(u-table-block-search)` 와 같다. */
+var SEARCH_HIGHLIGHT = "u-table-block-search";
+/**
+* 모든 표가 나눠 쓰는 하이라이트 하나(등록은 문서 전역이다). 지원하지 않는 브라우저에서는 없다 — 그때는
+* 검색이 행을 거르기만 하고 글자를 칠하지 않는다.
+*/
+function searchHighlight() {
+	const registry = typeof CSS !== "undefined" ? CSS.highlights : void 0;
+	if (!registry || typeof Highlight === "undefined") return void 0;
+	let highlight = registry.get(SEARCH_HIGHLIGHT);
+	if (!highlight) {
+		highlight = new Highlight();
+		registry.set(SEARCH_HIGHLIGHT, highlight);
+	}
+	return highlight;
+}
 var UTableBlock = class UTableBlock extends UDataElement {
 	constructor(..._args) {
 		super(..._args);
@@ -24,10 +41,18 @@ var UTableBlock = class UTableBlock extends UDataElement {
 		};
 		this.search = "";
 		this.searchTimer = null;
+		this.searchRanges = [];
 	}
 	static {
 		this.styles = [super.styles, styles];
 	}
+	updated() {
+		this.paintSearch();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.clearSearchRanges();
+	}
 	render() {
 		const rows = this.getFilteredSortedRows();
 		return html`
@@ -37,6 +62,7 @@ var UTableBlock = class UTableBlock extends UDataElement {
             class="toolbar-search"
             type="search"
             placeholder=${messages.text("search")}
+            aria-label=${messages.text("searchLabel")}
             .value=${this.search}
             @input=${this.handleSearchInput}
           >
@@ -75,7 +101,7 @@ var UTableBlock = class UTableBlock extends UDataElement {
                     <!-- 정렬은 머리 칸 전체를 채우는 버튼이다 — 클릭만 받는 th 는 키보드로 닿지 않았다. -->
                     <button type="button" class="sort-button" part="sort-button"
                       @click=${() => this.handleSortColumn(i)}>
-                      ${unsafeHTML(h.text)}
+                      ${this.cellContent(h)}
                       <u-icon
                         class="sort-icon"
                         lib="internal-chat"
@@ -98,7 +124,7 @@ var UTableBlock = class UTableBlock extends UDataElement {
                 <tr>
                   ${repeat(row, (_, j) => j, (cell) => html`
                     <td align=${cell.align ?? "left"}>
-                      ${unsafeHTML(this.renderHighlightedText(cell.text))}
+                      ${this.cellContent(cell)}
                     </td>
                   `)}
                 </tr>
@@ -108,18 +134,38 @@ var UTableBlock = class UTableBlock extends UDataElement {
       </div>
     `;
 	}
+	/** 셀 내용 — 서식 마크업(`html`)이 있으면 그것을, 없으면 글자(`text`)를 그린다. */
+	cellContent(cell) {
+		return cell.html != null ? unsafeHTML(cell.html) : cell.text;
+	}
 	/**
-	* 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
-	* 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+	* 검색어 하이라이트 — 본문 셀의 글자 노드에서 찾은 자리를 공유 하이라이트에 범위로 더한다(CSS Custom Highlight API).
+	* DOM 을 바꾸지 않는다: 종전처럼 마크업 문자열에 `<mark>` 를 끼우면 태그·엔티티 안의 글자까지 잘렸다
+	* (`&amp;` 에서 «amp» 를 찾으면 엔티티가 깨졌다).
 	*/
-	renderHighlightedText(text) {
-		const q = this.search.trim();
-		if (!q) return text;
-		const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-		const re = new RegExp(`(${escaped})`, "gi");
-		const parts = String(text).split(re);
-		if (parts.length === 1) return text;
-		return parts.map((p, idx) => idx % 2 === 1 ? `<mark>${p}</mark>` : p).join("");
+	paintSearch() {
+		this.clearSearchRanges();
+		const highlight = searchHighlight();
+		const q = this.search.trim().toLowerCase();
+		const body = this.shadowRoot?.querySelector("tbody");
+		if (!highlight || !q || !body) return;
+		const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+		for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+			const text = node.data.toLowerCase();
+			if (text.length !== node.data.length) continue;
+			for (let at = text.indexOf(q); at >= 0; at = text.indexOf(q, at + q.length)) {
+				const range = new Range();
+				range.setStart(node, at);
+				range.setEnd(node, at + q.length);
+				highlight.add(range);
+				this.searchRanges.push(range);
+			}
+		}
+	}
+	clearSearchRanges() {
+		const highlight = searchHighlight();
+		if (highlight) for (const range of this.searchRanges) highlight.delete(range);
+		this.searchRanges = [];
 	}
 	/**
 	* 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.

package/dist/components/blocks/UTableBlock.styles.js

@@ -14,6 +14,12 @@ var styles = css`
     overflow: hidden;
   }
 
+  /* 검색어 하이라이트(UTableBlock 의 공유 Highlight) — 종전 <mark> 와 같은 시스템 색. */
+  ::highlight(u-table-block-search) {
+    background-color: Mark;
+    color: MarkText;
+  }
+
   .toolbar {
     flex: none;
     display: flex;

package/dist/components/prompt/UPrompt.js

@@ -3,6 +3,7 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { messages } from "../../utilities/messages.js";
 import "../blocks/UFileBlock.js";
+import "../blocks/UTextBlock.js";
 import { styles } from "./UPrompt.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/utilities/messages.d.ts

@@ -5,5 +5,5 @@
  * 이 리포가 채택한 표준이 *"영어 기본 **+ 레지스트리**"* 이기 때문이다 — 영어 리터럴만으로는
  * 한국어 앱이 그 문구를 되돌릴 방법이 없다. 다음 문자열은 여기로 온다.
  */
-export type ChatMessageKey = 'canvasUnavailable' | 'previousReference' | 'nextReference' | 'closePreview' | 'closeLightbox' | 'previousImage' | 'nextImage' | 'sendMessage' | 'stopGenerating' | 'fullScreen' | 'remove' | 'pngDownload' | 'jsonDownload' | 'search' | 'rowCount' | 'excelDownload' | 'csvDownload' | 'openImage' | 'previewFile' | 'imageBlocked' | 'imageBlockedNamed' | 'opensInNewTab' | 'textBlock' | 'references';
+export type ChatMessageKey = 'canvasUnavailable' | 'previousReference' | 'nextReference' | 'closePreview' | 'closeLightbox' | 'previousImage' | 'nextImage' | 'sendMessage' | 'stopGenerating' | 'fullScreen' | 'remove' | 'pngDownload' | 'jsonDownload' | 'search' | 'searchLabel' | 'rowCount' | 'excelDownload' | 'csvDownload' | 'openImage' | 'previewFile' | 'imageBlocked' | 'imageBlockedNamed' | 'opensInNewTab' | 'textBlock' | 'references';
 export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<ChatMessageKey>;

package/dist/utilities/messages.js

@@ -16,6 +16,7 @@ messages.register("en", {
 	pngDownload: "PNG Download",
 	jsonDownload: "JSON Download",
 	search: "Search...",
+	searchLabel: "Search rows",
 	textBlock: "Text",
 	references: "References",
 	rowCount: "{shown} / {total} Rows",
@@ -42,6 +43,7 @@ messages.register("ko", {
 	pngDownload: "PNG 다운로드",
 	jsonDownload: "JSON 다운로드",
 	search: "검색...",
+	searchLabel: "행 검색",
 	textBlock: "텍스트",
 	references: "참조",
 	rowCount: "{shown} / {total} 행",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.17.4",
+  "version": "0.18.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [

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

@@ -56,7 +56,7 @@ There is no size property or custom property for this — the host is the lever.
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `headers` | `TableCell[]` | `[]` | Header cells, each with `text` and `align` |
+| `headers` | `TableCell[]` | `[]` | Header cells, each with `text`, optional `html` and `align` |
 | `rows` | `TableCell[][]` | `[]` | Row data; each row is an array of `TableCell` |
 
 ## CSS Parts
@@ -70,15 +70,21 @@ There is no size property or custom property for this — the host is the lever.
 ```ts
 interface TableCell {
   text: string;
+  html?: string;
   align: 'left' | 'center' | 'right' | null;
 }
 ```
 
+`text` is plain text: it is shown as written (markup in it appears as characters), and search, sort and the
+CSV/XLS downloads use it. For a formatted cell, also give `html` — trusted markup that only the screen uses; search,
+sort and downloads still read `text`. `u-marked-block` fills both from its markdown renderer. Never put an untrusted
+string in `html`.
+
 ## Features
 
 | Feature | Description |
 |---------|-------------|
 | Column sort | Click a header to sort asc/desc |
-| Search filter | Search bar filters rows (debounced) |
+| Search filter | Search bar filters rows by `text` (debounced) and highlights the matches without changing the cell markup (CSS Custom Highlight API; no highlight where the browser lacks it) |
 | CSV download | Downloads current filtered/sorted data as CSV |
 | XLS download | Downloads as Excel file |