@iyulab/editor-components 0.1.1 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [0.2.1] - 2026-08-02
+
+### Fixed
+
+- **`--u-txt-color-weak` 폴백 리터럴을 시트 값에 맞췄다** (`#9E9E9E` → `#757575`, 2곳).
+  업스트림이 이 토큰의 라이트 매핑을 WCAG AA 미달(2.68)에서 neutral-600(4.61)으로
+  고쳤다. 폴백은 **토큰 시트가 없을 때만** 쓰이므로 시트를 로드하는 환경에서는 변화가
+  없지만, 어긋난 채로 두면 시트 유무에 따라 색이 갈린다.
+
+## [0.2.0] - 2026-08-01
+
+### Added
+
+- **툴바 강조색이 브랜드를 따라온다** — 종전에는 `--u-blue-600` 에 하드와이어돼 있어
+  소비자가 브랜드를 다른 색으로 잡아도 편집기 툴바만 파랑으로 남았다. 이제 역할 토큰
+  (`--u-primary-color`)을 읽으므로 재브랜딩이 한 줄로 끝난다.
+
+### Fixed
+
+- ★**코드 편집기가 시스템 테마에서 항상 밝은 테마로 렌더되던 문제 수정** —
+  테마 판정에 `Theme.get()`(사용자 **선호**)을 써서 기본값 `'system'` 이 `'dark'` 와 같지
+  않다는 이유로 밝은 테마를 골랐다. **OS 가 다크여도 마찬가지였고, 이 설정이 기본이다.**
+  `Theme.resolved()`(실효 테마)로 고쳤다.
+- **시스템 테마에서 OS 테마를 바꿔도 코드 편집기가 반응하지 않던 문제 수정** — 감시
+  대상이 `data-theme` 뿐이었다. system 선호에서는 그 값이 `"system"` 그대로이고 실효
+  테마는 `theme` 속성에만 반영되므로 관찰자가 발화하지 않았다.
+
+### Changed
+
+- **텍스트 편집기의 색 선언이 팔레트에서 시맨틱 토큰으로 바뀌었다**(25 → 9).
+  기계적으로 뒤집히는 팔레트 단 대신 테마별로 조율된 단을 쓴다.
+- ⚠**`u-text-editor` 의 `theme` 프로퍼티가 제거됐다.** 지정해도 동작한 적이 없다 —
+  값이 연결 시점에 덮어써졌고, 그 값이 구동하던 CSS 규칙은 속성이 반영되지 않아
+  **한 번도 매치되지 않았다**. 편집기는 종전과 같이 문서 테마를 따라간다(그 동작은
+  팔레트 반전이 담당하고 있었고, 이제 시맨틱 토큰이 담당한다).
+- **`@iyulab/components` 최소 버전이 `^1.14.0`** — `Theme.resolved()` 를 쓴다.
+
 ## [0.1.1] - 2026-07-19
 
 ### Added

package/README.md

@@ -71,7 +71,6 @@ Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
 |----------|------|---------|------|
 | `headless` | `boolean` | `false` | 헤더(라벨 영역) 숨김 |
 | `label` | `string` | `"Rich Text Editor"` | 헤더 라벨 텍스트 |
-| `theme` | `"light" \| "dark" \| "system"` | 시스템 테마 추적 | 에디터 테마 |
 | `readOnly` | `boolean` | `false` | 읽기 전용 모드 |
 | `placeholder` | `string` | `"Start writing..."` | 플레이스홀더 텍스트 |
 | `value` | `string` | `""` | 에디터 HTML 내용 |

package/dist/_virtual/{_@oxc-project_runtime@0.139.0 → _@oxc-project_runtime@0.142.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/_virtual/{_@oxc-project_runtime@0.139.0 → _@oxc-project_runtime@0.142.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }

package/dist/components/code-editor/UCodeEditor.d.ts

@@ -11,7 +11,7 @@ export declare class UCodeEditor extends UElement {
     headless: boolean;
     /** The label text displayed in the header of the code editor. @default "Editor" */
     label: string;
-    /** The visual theme of the code editor. Can be "light" or "dark". @default "light" */
+    /** 편집기 테마. 문서 테마를 따라 자동으로 동기화된다(직접 지정해도 덮어쓰인다). */
     theme: "light" | "dark";
     /** Whether the editor should be in read-only mode, preventing user input. @default false */
     readOnly: boolean;

package/dist/components/code-editor/UCodeEditor.js

@@ -1,7 +1,7 @@
 import "./UCodeEditor.worker.js";
 import { styles } from "./UCodeEditor.styles.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.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 { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -23,7 +23,7 @@ var UCodeEditor = class UCodeEditor extends UElement {
 		this.container = createRef();
 		this.syncingValue = false;
 		this.observer = new MutationObserver(() => {
-			const theme = Theme.get() === "dark" ? "dark" : "light";
+			const theme = Theme.resolved();
 			if (this.theme !== theme) this.theme = theme;
 		});
 	}
@@ -36,10 +36,10 @@ var UCodeEditor = class UCodeEditor extends UElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.theme = Theme.get() === "dark" ? "dark" : "light";
+		this.theme = Theme.resolved();
 		this.observer.observe(document.documentElement, {
 			attributes: true,
-			attributeFilter: ["data-theme"]
+			attributeFilter: ["data-theme", "theme"]
 		});
 	}
 	disconnectedCallback() {

package/dist/components/text-editor/UTextEditor.d.ts

@@ -15,8 +15,6 @@ export declare class UTextEditor extends UElement {
     headless: boolean;
     /** The label text displayed in the header of the rich text editor. @default "Rich Text Editor" */
     label: string;
-    /** The visual theme of the editor. Can be "light" or "dark". @default "light" */
-    theme?: "light" | "dark" | "system";
     /** Whether the editor should be in read-only mode, preventing user input. @default false */
     readOnly: boolean;
     /** The placeholder text shown when the editor is empty. @default "Start writing..." */
@@ -29,8 +27,6 @@ export declare class UTextEditor extends UElement {
     toolbar?: string[][];
     private container;
     private quill;
-    private observer;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected updated(changedProperties: PropertyValues): Promise<void>;

package/dist/components/text-editor/UTextEditor.js

@@ -1,10 +1,9 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.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 { styles } from "./UTextEditor.styles.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { Theme } from "@iyulab/components/dist/utilities/Theme.js";
 import { UElement } from "@iyulab/components/dist/components/UElement.js";
 import Quill from "quill";
 import quillStyles from "quill/dist/quill.snow.css?inline";
@@ -14,17 +13,12 @@ var UTextEditor = class UTextEditor extends UElement {
 		super(..._args);
 		this.headless = false;
 		this.label = "Rich Text Editor";
-		this.theme = "light";
 		this.readOnly = false;
 		this.placeholder = "Start writing...";
 		this.value = "";
 		this.height = 300;
 		this.container = createRef();
 		this.quill = null;
-		this.observer = new MutationObserver(() => {
-			const theme = Theme.get();
-			if (this.theme !== theme) this.theme = theme;
-		});
 	}
 	static {
 		this.styles = [
@@ -33,17 +27,8 @@ var UTextEditor = class UTextEditor extends UElement {
 			styles
 		];
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.theme = Theme.get();
-		this.observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["data-theme"]
-		});
-	}
 	disconnectedCallback() {
 		if (this.quill) this.quill = null;
-		this.observer.disconnect();
 		super.disconnectedCallback();
 	}
 	async firstUpdated(changedProperties) {
@@ -195,7 +180,6 @@ __decorate([property({
 	reflect: true
 }), __decorateMetadata("design:type", Boolean)], UTextEditor.prototype, "headless", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "label", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "theme", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UTextEditor.prototype, "readOnly", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "placeholder", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "value", void 0);

package/dist/components/text-editor/UTextEditor.styles.d.ts

@@ -1 +1,22 @@
+/**
+ * 색은 전부 **역할 토큰**으로 읽는다.
+ *
+ * 종전에는 팔레트(`--u-neutral-*`)를 읽고 다크 테마를 `:host([theme="dark"])` 블록
+ * 8쌍으로 따로 구현했다. ★**그 블록들은 한 번도 매치되지 않는 죽은 코드였다** — 세 겹으로:
+ *
+ * ⑴ `theme` 프로퍼티가 `reflect` 되지 않아 **속성이 생기지 않았다**(작성자가 마크업에
+ *    직접 적은 경우에만 매치됐다).
+ * ⑵ 그마저도 `connectedCallback` 이 프로퍼티를 덮어써 소비자 지정이 무시됐다.
+ * ⑶ `Theme.get()` 은 선호를 돌려주므로 기본값 `'system'` 에서 `theme="system"` 이 됐다.
+ *
+ * ⚠**매치되지 않은 것이 다행이었다.** 그 블록들은 팔레트가 테마에 따라 뒤집히지
+ * **않는다**고 가정하고 쓰였다 — 다크 배경으로 `--u-neutral-900` 을 지정하는데, 그 토큰은
+ * 다크 시트에서 **#D4D4D4(밝은 회색)** 다. 매치됐다면 다크 모드가 깨졌을 것이다.
+ * 기반 규칙(`--u-neutral-0` 등)은 팔레트 반전 덕에 이미 테마를 따라가고 있었다.
+ *
+ * ⇒ 이 변경으로 실제로 달라지는 것은 **⒜ 강조색이 `--u-primary-color` 를 따라와
+ * 재브랜딩이 가능해진 것**(종전에는 `--u-blue-600` 하드와이어)과 **⒝ 기계적으로 뒤집힌
+ * 팔레트 단 대신 테마별로 조율된 시맨틱 단을 쓰는 것**이다. 죽은 코드 제거는 부수 효과다.
+ * 색 선언 수 25 → 9.
+ */
 export declare const styles: import('lit').CSSResult;

package/dist/components/text-editor/UTextEditor.styles.js

@@ -1,41 +1,48 @@
 import { css } from "lit";
 //#region src/components/text-editor/UTextEditor.styles.ts
+/**
+* 색은 전부 **역할 토큰**으로 읽는다.
+*
+* 종전에는 팔레트(`--u-neutral-*`)를 읽고 다크 테마를 `:host([theme="dark"])` 블록
+* 8쌍으로 따로 구현했다. ★**그 블록들은 한 번도 매치되지 않는 죽은 코드였다** — 세 겹으로:
+*
+* ⑴ `theme` 프로퍼티가 `reflect` 되지 않아 **속성이 생기지 않았다**(작성자가 마크업에
+*    직접 적은 경우에만 매치됐다).
+* ⑵ 그마저도 `connectedCallback` 이 프로퍼티를 덮어써 소비자 지정이 무시됐다.
+* ⑶ `Theme.get()` 은 선호를 돌려주므로 기본값 `'system'` 에서 `theme="system"` 이 됐다.
+*
+* ⚠**매치되지 않은 것이 다행이었다.** 그 블록들은 팔레트가 테마에 따라 뒤집히지
+* **않는다**고 가정하고 쓰였다 — 다크 배경으로 `--u-neutral-900` 을 지정하는데, 그 토큰은
+* 다크 시트에서 **#D4D4D4(밝은 회색)** 다. 매치됐다면 다크 모드가 깨졌을 것이다.
+* 기반 규칙(`--u-neutral-0` 등)은 팔레트 반전 덕에 이미 테마를 따라가고 있었다.
+*
+* ⇒ 이 변경으로 실제로 달라지는 것은 **⒜ 강조색이 `--u-primary-color` 를 따라와
+* 재브랜딩이 가능해진 것**(종전에는 `--u-blue-600` 하드와이어)과 **⒝ 기계적으로 뒤집힌
+* 팔레트 단 대신 테마별로 조율된 시맨틱 단을 쓰는 것**이다. 죽은 코드 제거는 부수 효과다.
+* 색 선언 수 25 → 9.
+*/
 var styles = css`
   :host {
     display: block;
-    border: 1px solid var(--u-neutral-300);
-    border-radius: 4px;
-    background: var(--u-neutral-0);
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    border-radius: var(--u-radius-md, 4px);
+    background: var(--u-panel-bg-color, #FFFFFF);
     overflow: hidden;
   }
 
-  :host([theme="dark"]) {
-    border-color: var(--u-neutral-700);
-    background: var(--u-neutral-900);
-  }
-
   .header {
     display: flex;
     align-items: center;
     padding: 12px 20px;
-    border-bottom: 1px solid var(--u-neutral-200);
-    background: var(--u-neutral-50);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
+    background: var(--u-bg-color-hover, #F5F5F5);
     min-height: 48px;
     gap: 12px;
   }
 
-  :host([theme="dark"]) .header {
-    border-bottom-color: var(--u-neutral-700);
-    background: var(--u-neutral-800);
-  }
-
   .title {
     font-weight: 600;
-    color: var(--u-neutral-700);
-  }
-
-  :host([theme="dark"]) .title {
-    color: var(--u-neutral-300);
+    color: var(--u-txt-color, #212121);
   }
 
   .flex {
@@ -59,13 +66,8 @@ var styles = css`
 
   .ql-toolbar {
     border: none !important;
-    border-bottom: 1px solid var(--u-neutral-200) !important;
-    background: var(--u-neutral-50);
-  }
-
-  :host([theme="dark"]) .ql-toolbar {
-    border-bottom-color: var(--u-neutral-700) !important;
-    background: var(--u-neutral-800);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE) !important;
+    background: var(--u-bg-color-hover, #F5F5F5);
   }
 
   .ql-container {
@@ -75,44 +77,26 @@ var styles = css`
 
   .ql-editor {
     padding: 20px;
-    color: var(--u-neutral-700);
-  }
-
-  :host([theme="dark"]) .ql-editor {
-    color: var(--u-neutral-300);
-    background: var(--u-neutral-900);
+    color: var(--u-txt-color, #212121);
   }
 
   .ql-toolbar .ql-stroke {
-    stroke: var(--u-neutral-600);
+    stroke: var(--u-txt-color-weak, #757575);
   }
 
   .ql-toolbar .ql-fill {
-    fill: var(--u-neutral-600);
-  }
-
-  :host([theme="dark"]) .ql-toolbar .ql-stroke {
-    stroke: var(--u-neutral-400);
-  }
-
-  :host([theme="dark"]) .ql-toolbar .ql-fill {
-    fill: var(--u-neutral-400);
-  }
-
-  .ql-toolbar button:hover .ql-stroke {
-    stroke: var(--u-blue-600);
-  }
-
-  .ql-toolbar button:hover .ql-fill {
-    fill: var(--u-blue-600);
+    fill: var(--u-txt-color-weak, #757575);
   }
 
+  /* 강조는 역할 토큰 경유 — 소비자가 브랜드를 바꾸면 함께 따라온다. */
+  .ql-toolbar button:hover .ql-stroke,
   .ql-toolbar button.ql-active .ql-stroke {
-    stroke: var(--u-blue-600);
+    stroke: var(--u-primary-color, #1E88E5);
   }
 
+  .ql-toolbar button:hover .ql-fill,
   .ql-toolbar button.ql-active .ql-fill {
-    fill: var(--u-blue-600);
+    fill: var(--u-primary-color, #1E88E5);
   }
 `;
 //#endregion

package/dist/react/UCodeEditor.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor';
 
 export declare const UCodeEditor: React.ForwardRefExoticComponent<
-  Partial<UCodeEditorElement> & React.HTMLAttributes<UCodeEditorElement> & {
+  Omit<Partial<UCodeEditorElement>, keyof React.HTMLAttributes<UCodeEditorElement>>
+    & Omit<React.HTMLAttributes<UCodeEditorElement>, 'onChange'>
+    & React.RefAttributes<UCodeEditorElement>
+    & {
   onChange?: (event: CustomEvent) => void;
   }
 >;

package/dist/react/UTextEditor.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor';
 
 export declare const UTextEditor: React.ForwardRefExoticComponent<
-  Partial<UTextEditorElement> & React.HTMLAttributes<UTextEditorElement> & {
+  Omit<Partial<UTextEditorElement>, keyof React.HTMLAttributes<UTextEditorElement>>
+    & Omit<React.HTMLAttributes<UTextEditorElement>, 'onChange'>
+    & React.RefAttributes<UTextEditorElement>
+    & {
   onChange?: (event: CustomEvent) => void;
   }
 >;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "keywords": [
     "iyulab",
     "web-components",
@@ -44,7 +44,7 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.5.1",
+    "@iyulab/components": "^1.15.0",
     "lit": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "quill": "^2.0.3"