@iyulab/chat-components 0.11.9 → 0.12.1

package/dist/utilities/markedKatex.d.ts

@@ -0,0 +1,10 @@
+import { KatexOptions } from 'katex';
+import { MarkedExtension } from 'marked';
+/** `marked` 확장이 받는 옵션 — `displayMode` 는 구분자가 정하므로 소비자가 줄 수 없다. */
+export type MarkedKatexOptions = Omit<KatexOptions, "displayMode">;
+/**
+ * `marked.use()` 에 넘길 수식 확장을 만든다.
+ *
+ * @param options KaTeX 렌더 옵션(`displayMode` 제외 — 구분자가 정한다).
+ */
+export declare function markedKatex(options?: MarkedKatexOptions): MarkedExtension;

package/dist/utilities/markedKatex.js

@@ -0,0 +1,106 @@
+import katex from "../node_modules/katex/dist/katex.js";
+//#region src/utilities/markedKatex.ts
+/**
+* `marked` 에 TeX 수식 렌더를 붙이는 확장.
+*
+* 알고리즘(구분자 규칙과 토크나이저 구성)은 `marked-katex-extension`(MIT, © 2021 @markedjs)에서
+* 왔고, 타입·옵션 표면은 이 패키지의 필요에 맞춰 다시 썼다.
+*
+* ## 두 가지 «모드»가 있고, 서로 다른 축이다
+*
+* - **`displayMode`** — KaTeX 에게 *"큰 조판으로 그려라"* 라고 말하는 것(`$$…$$`).
+* - **블록 배치** — 수식이 문단 «밖»에 서는 것. `$$` 가 **자기 줄에 혼자** 있을 때만 일어난다.
+*
+* ⚠**둘은 함께 가지 않는다**: 한 줄 안의 `$$x$$` 는 `displayMode` 이면서 문단 «안»에 남는다.
+* 두 축을 하나로 합치면 기존 문서의 조판이 바뀐다.
+*
+* ## 구분자 규칙
+*
+* - 인라인 `$…$` / `$$…$$` — 여는 구분자 뒤에 `$` 가 바로 오지 않아야 하고(빈 수식 방지),
+*   내용은 **줄을 넘지 못하며**, 닫는 구분자 뒤에는 공백·구두점·문장 끝이 와야 한다.
+* - 블록 `$$\n…\n$$` — 여는·닫는 `$$` 가 각각 자기 줄에 있을 때.
+*
+* 🔴**«수식이 아닌 것을 수식으로 만들지 않는 것»이 이 규칙의 목적이다.** 가장 흔한 오탐
+* 경로는 통화 표기 둘(`from $5 to $10`)이고, 그것을 막는 것이 ⑴내용에서 개행을 배제하고
+* ⑵닫는 구분자 뒤 문맥을 요구하는 두 조건이다. 규칙을 느슨하게 하면 본문이 통째로 한
+* 수식으로 삼켜진다.
+*/
+/** 여는 구분자 뒤에 `$` 가 오지 않고, 내용이 줄을 넘지 않으며, 닫는 뒤가 공백·구두점·끝. */
+var INLINE_RULE = /^(\${1,2})(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n$]))\1(?=[\s?!.,:？！。，：]|$)/;
+/** `$$` 가 각각 자기 줄에 있는 형태. */
+var BLOCK_RULE = /^(\${1,2})\n((?:\\[^]|[^\\])+?)\n\1(?:\n|$)/;
+function render(options, token, newlineAfter) {
+	const html = katex.renderToString(token.text, {
+		...options,
+		displayMode: token.displayMode
+	});
+	return newlineAfter ? `${html}\n` : html;
+}
+function inlineKatex(options) {
+	return {
+		name: "inlineKatex",
+		level: "inline",
+		/**
+		* `marked` 가 «인라인 텍스트를 어디서 끊을지» 고르는 힌트.
+		*
+		* ⚠**이것은 규칙이 아니라 힌트다** — 여기서 걸러도 토크나이저는 그 뒤 위치에서 다시
+		* 호출되므로, 여는 `$` 앞에 공백이 없는 `a$x$` 도 결국 파싱된다. 문서의 조판을 바꾸지
+		* 않으려면 이 성질을 그대로 두어야 한다.
+		*/
+		start(src) {
+			let indexSrc = src;
+			let consumed = 0;
+			while (indexSrc) {
+				const index = indexSrc.indexOf("$");
+				if (index === -1) return;
+				if ((index === 0 || indexSrc.charAt(index - 1) === " ") && INLINE_RULE.test(indexSrc.substring(index))) return consumed + index;
+				const skipped = indexSrc.substring(index + 1);
+				const trimmed = skipped.replace(/^\$+/, "");
+				consumed += index + 1 + (skipped.length - trimmed.length);
+				indexSrc = trimmed;
+			}
+		},
+		tokenizer(src) {
+			const match = src.match(INLINE_RULE);
+			if (!match) return void 0;
+			return {
+				type: "inlineKatex",
+				raw: match[0],
+				text: match[2].trim(),
+				displayMode: match[1].length === 2
+			};
+		},
+		renderer(token) {
+			return render(options, token, false);
+		}
+	};
+}
+function blockKatex(options) {
+	return {
+		name: "blockKatex",
+		level: "block",
+		tokenizer(src) {
+			const match = src.match(BLOCK_RULE);
+			if (!match) return void 0;
+			return {
+				type: "blockKatex",
+				raw: match[0],
+				text: match[2].trim(),
+				displayMode: match[1].length === 2
+			};
+		},
+		renderer(token) {
+			return render(options, token, true);
+		}
+	};
+}
+/**
+* `marked.use()` 에 넘길 수식 확장을 만든다.
+*
+* @param options KaTeX 렌더 옵션(`displayMode` 제외 — 구분자가 정한다).
+*/
+function markedKatex(options = {}) {
+	return { extensions: [inlineKatex(options), blockKatex(options)] };
+}
+//#endregion
+export { markedKatex };

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';
+export type ChatMessageKey = 'canvasUnavailable' | 'previousReference' | 'nextReference' | 'closePreview' | 'closeLightbox' | 'previousImage' | 'nextImage' | 'sendMessage' | 'stopGenerating' | 'fullScreen' | 'remove' | 'pngDownload' | 'jsonDownload' | 'search' | 'rowCount' | 'excelDownload' | 'csvDownload' | 'openImage' | 'previewFile';
 export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<ChatMessageKey>;

package/dist/utilities/messages.js

@@ -18,7 +18,9 @@ messages.register("en", {
 	search: "Search...",
 	rowCount: "{shown} / {total} Rows",
 	excelDownload: "Excel Download",
-	csvDownload: "CSV Download"
+	csvDownload: "CSV Download",
+	openImage: "Open image {index}",
+	previewFile: "Preview {name}"
 });
 messages.register("ko", {
 	canvasUnavailable: "Canvas 2D context를 가져올 수 없습니다.",
@@ -37,7 +39,9 @@ messages.register("ko", {
 	search: "검색...",
 	rowCount: "{shown} / {total} 행",
 	excelDownload: "Excel 다운로드",
-	csvDownload: "CSV 다운로드"
+	csvDownload: "CSV 다운로드",
+	openImage: "이미지 {index} 열기",
+	previewFile: "{name} 미리보기"
 });
 //#endregion
 export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.11.9",
+  "version": "0.12.1",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -61,14 +61,13 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.23.0",
     "highlight.js": "^11.11.1",
-    "katex": "^0.17.0",
+    "katex": "^0.18.7",
     "lit": "^3.3.3",
-    "marked": "^18.0.6",
-    "marked-katex-extension": "5.1.10"
+    "marked": "^18.0.6"
   },
   "peerDependencies": {
+    "@iyulab/components": ">=1.23.0",
     "@lit/react": ">=1.0.8",
     "chart.js": ">=4.5.1",
     "react": ">=18.0.0"
@@ -85,19 +84,19 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "^5.0.0",
     "chart.js": "^4.5.1",
-    "eslint": "^9.39.4",
+    "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
     "glob": "^13.0.6",
     "globals": "^17.7.0",
-    "openai": "^6.47.0",
-    "typescript": "^5.9.3",
+    "openai": "^7.15.0",
+    "typescript": "^6.0.2",
     "typescript-eslint": "^8.64.0",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   }
 }

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

@@ -48,6 +48,23 @@ LLM output example (`block-json` code fence, rendered via `u-element-block`):
 
 ---
 
+## Sizing
+
+Content-sized by default: the toolbar plus the chart area. Measured at 600px wide with a small
+bar chart, that is ~368px.
+
+**A `max-height` (or `height`) on the host wins.** The toolbar keeps its height and the chart area
+takes the rest, so nothing is clipped away:
+
+```css
+u-chart-block { max-height: 200px; }
+```
+
+Before this was fixed, the chart area kept its own height regardless — against a 120px host, 248px
+of it was clipped by the block's `overflow: hidden` with no scrollbar left to reach it.
+
+There is no size property or custom property for this — the host is the lever.
+
 ## Properties
 
 | Property | Type | Default | Description |

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

@@ -23,6 +23,18 @@ Syntax-highlighted code block powered by Highlight.js. Shows a language label an
 
 ---
 
+## Sizing
+
+**There is no vertical cap.** Long code grows to its content rather than folding — measured: 200
+lines render about 4,100px tall, with no vertical scrollbar of its own. Only long *lines* scroll,
+horizontally, inside the code area.
+
+That is deliberate, and it differs from [`u-table-block`](table-block.md), which caps at 480px:
+folded code cannot be read, and the conversation the block sits in already scrolls.
+
+Fenced code inside [`u-marked-block`](marked-block.md) renders as a nested `u-code-block`, so it
+follows this same contract.
+
 ## Properties
 
 | Property | Type | Default | Reflect | Description |

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

@@ -38,6 +38,16 @@ LLM output example (`block-json` code fence):
 
 ---
 
+## Sizing
+
+Height comes from width: each slide is `4 / 3`, so the block is as tall as its column is wide.
+Measured at 600px wide, that is ~222px.
+
+⚠**A `max-height` on the host does *not* shrink the images, and that is deliberate.** Squeezing them
+vertically would break the aspect ratio and distort the picture, so the block overflows **visibly**
+instead — it never clips, and nothing becomes unreachable. To make it shorter, give it a narrower
+column rather than a shorter host.
+
 ## Properties
 
 | Property | Type | Default | Description |

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

@@ -41,6 +41,21 @@ LLM output example (`block-json` code fence, rendered via `u-element-block`):
 
 ---
 
+## Sizing
+
+The map is **300px tall when nothing constrains it** — that is a default, not a fixed height.
+
+**A `max-height` (or `height`) on the host wins**, and the map frame shrinks to fit it:
+
+```css
+u-map-block { max-height: 200px; }
+```
+
+Before this was fixed, the frame stayed at 300px regardless — against a 120px host, 180px of the map
+was clipped by the block's `overflow: hidden` with no scrollbar left to reach it.
+
+There is no size property or custom property for this — the host is the lever.
+
 ## Properties
 
 | Property | Type | Default | Description |

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

@@ -35,6 +35,14 @@ Tracks a `streaming` state internally (resets a 1500ms idle timer on every `valu
 
 ---
 
+## Sizing
+
+The block grows with its content — there is no cap, and the conversation around it does the
+scrolling.
+
+**Fenced code becomes a nested [`u-code-block`](code-block.md)**, not a plain `<pre>`, so fenced
+code follows that component's contract (no vertical cap; long lines scroll horizontally).
+
 ## Properties
 
 | Property | Type | Default | Description |

package/skills/iyulab-chat-components/references/components/message.md

@@ -36,6 +36,14 @@ Chat message wrapper component. Arranges content blocks via slots, shows a loadi
 
 ---
 
+## Sizing
+
+Content-sized: the bubble is as tall as what you put in it.
+
+⚠**A `max-height` on the host does *not* fold the content, and that is deliberate.** A message that
+hides part of itself cannot be read, and the conversation stream around it already scrolls. The
+block overflows **visibly** rather than clipping. Constrain the stream, not the message.
+
 ## Slots
 
 | Name | Description |

package/skills/iyulab-chat-components/references/components/prompt.md

@@ -47,6 +47,17 @@ prompt.submit();
 
 ---
 
+## Sizing
+
+The prompt does not grow with its value. `minRows`/`maxRows` bound the inner `u-text-block`, and the
+text scrolls **inside** that box — so the component stays short no matter how long the value is.
+Measured at 600px wide with a 40-line value and `maxRows: 40`, the whole block is 72px tall.
+
+⚠**Its behaviour under a host `max-height` is therefore untested.** A 200px or 120px constraint never
+engages, because the natural height is already below both. That is not the same as "it behaves
+correctly under a constraint" — it means the question has not been answered. Use `minRows`/`maxRows`
+to size this component.
+
 ## Slots
 
 | Name | Description |

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

@@ -37,6 +37,21 @@ Extends `UDataElement`, so data can also be injected via a `<script type="applic
 
 ---
 
+## Sizing
+
+The table area caps at **480px** and scrolls inside that cap; below it the block is content-sized.
+Measured at 600px wide: 40 rows give a 480px table area with ~1,000px to scroll, 2 rows give ~108px
+and no scrollbar. That default keeps a long table from swallowing the conversation.
+
+**A `max-height` (or `height`) on the host wins.** The table area shrinks to fit it and still
+scrolls, so no rows become unreachable:
+
+```css
+u-table-block { max-height: 200px; }
+```
+
+There is no size property or custom property for this — the host is the lever.
+
 ## Properties
 
 | Property | Type | Default | Description |

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

@@ -38,6 +38,16 @@ LLM output example (`block-json` code fence, rendered via `u-element-block`):
 
 ---
 
+## Sizing
+
+Height comes from width through `ratio` (`16:9` by default), capped at `max-width: 800px`. Measured
+at 600px wide, a 16:9 video is ~342px tall. This holds for both branches — the embed iframe
+(YouTube/Vimeo) and the native `<video>` element.
+
+⚠**A `max-height` on the host does *not* shrink the video, and that is deliberate** — the same
+reason as the image block: vertical squeezing would break the aspect ratio. The block overflows
+**visibly** rather than clipping. Use `ratio`, or a narrower column, to change its height.
+
 ## Properties
 
 | Property | Type | Default | Description |