@iyulab/chat-components 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## [0.11.0] - 2026-08-04
+
+### Changed
+
+- **로딩 자리표시자를 `u-skeleton[lines]` 로 회수했다** (표 블록 · 엘리먼트 블록).
+  폭만 다른 막대 **9줄을 손으로 반복**하던 자리이며, 렌더 결과는 같다(마지막 줄이 짧아지는
+  것은 종전 마크업도 그렇게 적고 있었다). `@iyulab/components >= 1.23.0` 이 필요하다.
+
+- ⚠**차트 오류 문구가 «영어 기본 + 로케일 레지스트리»로 이주했다.** `Canvas 2D context` 실패
+  안내가 한국어 리터럴이었다 — 화면에 그대로 뜨는 문자열이다.
+
+  ```ts
+  import { Locale } from '@iyulab/components';
+  import { messages } from '@iyulab/chat-components';
+
+  Locale.set('ko');                      // 한국어 환경은 종전 문구를 본다
+  messages.register('ja', { canvasUnavailable: '…' });
+  ```
+
+  ⚠**한 키뿐인데 레지스트리를 둔 이유**: 영어 리터럴만으로는 한국어 앱이 그 문구를 되돌릴
+  방법이 없다. 표준은 *"영어 기본 **+ 레지스트리**"* 다.
+
+### Requires
+
+- `@iyulab/components >= 1.23.0` (`Locale.namespace`) — 의존 하한을 올렸다.
+
+## [0.10.0] - 2026-08-03
+
+### Fixed
+
+- ★**Firefox·Safari 에서 다크 코드블록·다크 마크다운이 적용된 적이 없던 문제.**
+
+  두 컴포넌트의 다크 팔레트(구문 강조 15색 · 마크다운 11색)가
+  `:host-context([theme="dark"])` **단독**으로 선언돼 있었다. 그 선택자는 크로미움
+  전용이라, 나머지 두 엔진에서는 어두운 코드블록 위에 **라이트용 색이 그대로** 남았다.
+
+  ```
+  u-code-block     구문 강조 15색
+  u-marked-block   본문·테두리·강조 11색
+  ```
+
+  섀도 루트 안에서 문서 루트의 테마를 읽는 수단 중 **상속되는 것은 `color-scheme`** 이고,
+  `light-dark()` 가 그 값을 따른다. 테마 시트가 `:root[theme="dark"] { color-scheme: dark }`
+  를 이미 선언하므로 별도 배선이 필요 없다.
+
+  ⚠**소비자 조치**: 테마 시트를 로드하지 않고 `theme` 속성만 세우고 있다면 다크가
+  적용되지 않는다 — 문서 루트에 `color-scheme: dark` 를 함께 선언할 것.
+  `@supports` 가드가 있어 `light-dark()` 미지원 브라우저는 **라이트로 떨어진다**
+  (종전 Firefox·Safari 와 같은 결과 — 회귀가 아니다).
+
+- **참조 카드 헤더의 포커스 링이 팔레트에 없는 색이었다** — `rgba(100, 150, 250, .6)`
+  를 굽고 있었다. 다른 컴포넌트의 포커스 링과 색이 달랐고 브랜드를 따라오지 않았다.
+  역할 토큰(`--u-primary-color-strong`)을 읽도록 고쳤다 — 디자인 시스템의 전역 포커스 링과
+  같은 값이다.
+
+### Added
+
+- **섀도 안 테마 해석 회귀 테스트** — 실제 크로미움에서 `color-scheme` 을 뒤집어
+  구문색·본문색이 따라오는지 확인한다. 커스텀 프로퍼티를 직접 읽지 않고 **그것을 소비하는
+  선언의 계산색**을 재는데, `getComputedStyle().getPropertyValue()` 는 해석된 색이 아니라
+  `light-dark(...)` 문자열 그대로를 돌려주기 때문이다.
+
 ## [0.9.1] - 2026-08-02
 
 ### Fixed

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

@@ -18,22 +18,40 @@ var styles = css`
     --hljs-deletion-color: #b31d28;
     --hljs-deletion-bg-color: #ffeef0;
   }
-  :host-context([theme="dark"]) {
-    --hljs-text-color: #c9d1d9;
-    --hljs-background-color: #0d1117;
-    --hljs-keyword-color: #ff7b72;
-    --hljs-entity-color: #d2a8ff;
-    --hljs-constant-color: #79c0ff;
-    --hljs-string-color: #a5d6ff;
-    --hljs-variable-color: #ffa657;
-    --hljs-comment-color: #8b949e;
-    --hljs-entity-tag-color: #7ee787;
-    --hljs-markup-heading-color: #1f6feb;
-    --hljs-markup-list-color: #f2cc60;
-    --hljs-addition-color: #aff5b4;
-    --hljs-addition-bg-color: #033a16;
-    --hljs-deletion-color: #ffdcd7;
-    --hljs-deletion-bg-color: #67060c;
+  /* ★다크 팔레트는 light-dark() 로 싣는다 — 종전에는 :host-context([theme="dark"]) 였고,
+     그 선택자는 **Firefox·Safari 에서 미지원**이라 두 브라우저에서 다크 구문 강조가 적용된
+     적이 없다(라이트용 색이 어두운 코드블록 위에 그대로 남았다).
+
+     왜 light-dark() 인가: 테마 표시(theme 속성)는 문서 루트에 있고 이 팔레트는 섀도 루트
+     안에 있다. 그 경계를 넘는 수단 중 상속되는 것은 color-scheme 뿐이고, 토큰 시트가
+     :root[theme="dark"] { color-scheme: dark } 로 이미 선언한다 — 상속 프로퍼티라
+     섀도 안까지 닿는다.
+
+     ⚠**:host 에 color-scheme 을 선언하지 말 것.** 선언하면 루트에서 상속받은 값을 덮어
+     OS 선호를 따르게 되어, 앱이 라이트인데 OS 가 다크면 코드블록만 어두워진다.
+
+     ⚠**이 방식을 --u-* 디자인 토큰으로 확대하지 말 것.** getComputedStyle 로 읽는 소비자
+     (같은 패키지의 UChartBlock 이 Chart.js 기본값을 그렇게 세팅한다)에게는 해석된 색이
+     아니라 light-dark(...) **문자열 그대로** 돌아온다. 여기 팔레트는 CSS 안에서만 쓰이므로
+     안전하다. */
+  @supports (color: light-dark(#000, #fff)) {
+    :host {
+      --hljs-text-color: light-dark(#24292e, #c9d1d9);
+      --hljs-background-color: light-dark(#ffffff, #0d1117);
+      --hljs-keyword-color: light-dark(#d73a49, #ff7b72);
+      --hljs-entity-color: light-dark(#6f42c1, #d2a8ff);
+      --hljs-constant-color: light-dark(#005cc5, #79c0ff);
+      --hljs-string-color: light-dark(#032f62, #a5d6ff);
+      --hljs-variable-color: light-dark(#e36209, #ffa657);
+      --hljs-comment-color: light-dark(#6a737d, #8b949e);
+      --hljs-entity-tag-color: light-dark(#22863a, #7ee787);
+      --hljs-markup-heading-color: light-dark(#005cc5, #1f6feb);
+      --hljs-markup-list-color: light-dark(#735c0f, #f2cc60);
+      --hljs-addition-color: light-dark(#22863a, #aff5b4);
+      --hljs-addition-bg-color: light-dark(#f0fff4, #033a16);
+      --hljs-deletion-color: light-dark(#b31d28, #ffdcd7);
+      --hljs-deletion-bg-color: light-dark(#ffeef0, #67060c);
+    }
   }
 
   :host {

package/dist/components/blocks/UElementBlock.js

@@ -39,11 +39,7 @@ var UElementBlock = class UElementBlock extends UDataElement {
             <u-skeleton effect="shimmer" width="40%"  height="0.75em" shape="rounded"></u-skeleton>
           </div>
           <div class="sk-doc">
-            <u-skeleton effect="shimmer" width="40%"  height="0.75em" shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="80%"  height="0.75em" shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="60%" height="0.8em"  shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="100%" height="0.8em"  shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="80%"  height="0.8em"  shape="rounded"></u-skeleton>
+            <u-skeleton effect="shimmer" lines="5" height="0.8em" shape="rounded"></u-skeleton>
           </div>
         </div>`;
 		if (this.element != null) return this.element;

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

@@ -25,18 +25,23 @@ var styles = css`
     --borderColor-muted: #d1d9e0b3;
     --borderColor-neutral-muted: #d1d9e0b3;
   }
-  :host-context([theme="dark"]) {
-    --focus-outlineColor: #1f6feb;
-    --fgColor-default: #f0f6fc;
-    --fgColor-muted: #9198a1;
-    --fgColor-accent: #4493f8;
-    --bgColor-default: #0d1117;
-    --bgColor-muted: #151b23;
-    --bgColor-neutral-muted: #656c7633;
-    --bgColor-attention-muted: #bb800926;
-    --borderColor-default: #3d444d;
-    --borderColor-muted: #3d444db3;
-    --borderColor-neutral-muted: #3d444db3;
+  /* ★다크 팔레트는 light-dark() 로 — 근거는 UCodeBlock.styles.ts 의 같은 자리 주석 참조.
+     :host-context() 가 Firefox·Safari 미지원이라 두 브라우저에서 마크다운 본문의 다크가
+     적용된 적이 없다. */
+  @supports (color: light-dark(#000, #fff)) {
+    :host {
+      --focus-outlineColor: light-dark(#0969da, #1f6feb);
+      --fgColor-default: light-dark(#1f2328, #f0f6fc);
+      --fgColor-muted: light-dark(#59636e, #9198a1);
+      --fgColor-accent: light-dark(#0969da, #4493f8);
+      --bgColor-default: light-dark(#ffffff, #0d1117);
+      --bgColor-muted: light-dark(#f6f8fa, #151b23);
+      --bgColor-neutral-muted: light-dark(#818b981f, #656c7633);
+      --bgColor-attention-muted: light-dark(#fff8c5, #bb800926);
+      --borderColor-default: light-dark(#d1d9e0, #3d444d);
+      --borderColor-muted: light-dark(#d1d9e0b3, #3d444db3);
+      --borderColor-neutral-muted: light-dark(#d1d9e0b3, #3d444db3);
+    }
   }
 
   :host {

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

@@ -23,7 +23,7 @@ var styles = css`
     color: var(--u-txt-color-hover);
   }
   .header:focus-visible {
-    outline: 2px solid rgba(100, 150, 250, 0.6);
+    outline: 2px solid var(--u-primary-color-strong, #1565C0);
     outline-offset: 2px;
   }
 

package/dist/components/blocks/UTableBlock.js

@@ -83,10 +83,7 @@ var UTableBlock = class UTableBlock extends UDataElement {
             ${this.loading ? html`
                 <tr>
                   <td colspan=${this.headers.length || 1}>
-                    <u-skeleton width="80%" height="1.2em"></u-skeleton>
-                    <u-skeleton width="60%" height="1.2em"></u-skeleton>
-                    <u-skeleton width="70%" height="1.2em"></u-skeleton>
-                    <u-skeleton width="50%" height="1.2em"></u-skeleton>
+                    <u-skeleton lines="4" height="1.2em"></u-skeleton>
                   </td>
                 </tr>
               ` : repeat(rows, (_, i) => i, (row) => html`

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

@@ -51,7 +51,6 @@ var styles = css`
     visibility: hidden;
     position: relative;
     display: block;
-    color: red;
 
     /* 동일 스타일 크기 싱크 */
     margin: 0;

package/dist/components-extra/UChartBlock.js

@@ -1,6 +1,7 @@
 import "../utilities/icons.js";
 import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import { messages } from "../utilities/messages.js";
 import { styles } from "./UChartBlock.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
@@ -77,7 +78,7 @@ var UChartBlock = class UChartBlock extends UElement {
 		this.error = null;
 		const ctx = this.canvas.getContext("2d");
 		if (!ctx) {
-			this.error = "Canvas 2D context를 가져올 수 없습니다.";
+			this.error = messages.text("canvasUnavailable");
 			return;
 		}
 		try {

package/dist/utilities/messages.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `@iyulab/chat-components` 의 화면 문자열 — **영어 기본 + 로케일 레지스트리**.
+ *
+ * ⚠**지금 한 키뿐이다.** 그래도 리터럴을 영어로 바꾸는 대신 레지스트리를 두는 이유는,
+ * 이 리포가 채택한 표준이 *"영어 기본 **+ 레지스트리**"* 이기 때문이다 — 영어 리터럴만으로는
+ * 한국어 앱이 그 문구를 되돌릴 방법이 없다. 다음 문자열은 여기로 온다.
+ */
+export type ChatMessageKey = 'canvasUnavailable';
+export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<"canvasUnavailable">;

package/dist/utilities/messages.js

@@ -0,0 +1,7 @@
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
+//#region src/utilities/messages.ts
+var messages = Locale.namespace("@iyulab/chat-components");
+messages.register("en", { canvasUnavailable: "Canvas 2D context is unavailable." });
+messages.register("ko", { canvasUnavailable: "Canvas 2D context를 가져올 수 없습니다." });
+//#endregion
+export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -45,7 +45,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.8.0",
+    "@iyulab/components": "^1.23.0",
     "highlight.js": "^11.11.1",
     "katex": "^0.17.0",
     "lit": "^3.3.3",