@iyulab/editor-components 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # Changelog
 
+## [0.4.0] - 2026-09-10
+
+### Changed
+
+- **The rich text editor's colour swatches and link tooltip actions are now large enough to hit**
+  (WCAG 2.2 SC 2.5.8, 24×24 CSS px). Quill draws them at 16×16 (swatches) and 19px tall (*Edit* and
+  *Remove* in the link tooltip); the component now overrides both — swatches are 24×24, which makes
+  the colour palette wider (206px), and the tooltip actions are laid out as blocks so their 26px
+  line height is their real height. What you see is the editor this package ships, so its targets
+  follow this package's rules even where a dependency drew them.
+
+- **Fallback literals for `--u-txt-color-weak` follow `@iyulab/components` 1.40.0.** They are
+  only used when that stylesheet is not loaded; with it, nothing changes here.
+
+- **`monaco-editor` moved from `dependencies` to `peerDependencies`, narrowed to `^0.55.1`.**
+  Install it alongside this package:
+
+  ```
+  npm install monaco-editor@^0.55.1
+  ```
+
+  Two reasons, and the second one was a live break.
+
+  **The declared range crossed a breaking change in monaco's own `exports` map.** Up to 0.55.1
+  that map was the identity `"./*": "./*"`, so a subpath resolved to the file it names. 0.56.0
+  rewrites every subpath to `./esm/vs/<name>.js`, which sends
+  `monaco-editor/min/vs/editor/editor.main.css?inline` to a `.js` file that does not exist and
+  leaves no reachable path to the stylesheet at all — the `esm/` tree contains no `.css`. This
+  package needs the stylesheet as *text*, because the editor renders into a shadow root. The old
+  range `^0.55.1 || ^0.56.0` admitted both, and a fresh install picks the highest match, so any
+  consumer installing today got 0.56.0 and a build that could not resolve the import. Nothing in
+  this package's own build caught it: monaco is external, so the imports are passed through to
+  the consumer's bundler untouched.
+
+  **An editor engine has to be a single copy.** Monaco owns global state — its language and
+  theme registries — so two copies in one application do not compose. Declaring it as a peer
+  lets the consumer own the version, and makes a conflicting one an install-time error instead
+  of a silent second copy. `@iyulab/components` in this package, and `@iyulab/flex-table` and
+  `@iyulab/enterprise` in the same repo, already follow that convention.
+
+  Support for 0.56 and later is not abandoned — it needs a different way to obtain the
+  stylesheet text, which is tracked separately.
+
+- **`@iyulab/components` moved from `dependencies` to `peerDependencies` (`>=1.15.0`).** Same
+  reasoning as above and the same convention as the sibling packages: the component library
+  registers custom elements and owns module-level singletons (theme, toasts, overlay
+  stacking), so a second copy in one application does not compose — the copy that wins the
+  element registry is undefined, and the singletons split in two. Consumers already installing
+  `@iyulab/components` are unaffected; the declaration now says out loud that this package uses
+  the one they installed rather than fetching its own.
+
+### Fixed
+
+- **The text editor's editing area no longer slides out of the component when the toolbar
+  wraps.** The editing area was sized as `height` minus a fixed 42px for the toolbar, but the
+  default toolbar wraps onto two or more rows in narrower editors (88px at 480px wide), which
+  pushed the bottom of the editing area — and its scrollbar — outside the component, where it
+  was cut off. The toolbar and the editing area now share `height` by layout: the editing area
+  is whatever the toolbar leaves, at any width.
+
+- **The text editor's dropdowns and link tooltip are no longer cut off at the component's
+  edge.** The component clipped everything outside its box, so in a short editor the link
+  tooltip (open, Edit, Remove) and the lower rows of the color pickers could be neither seen
+  nor clicked. They now extend past the component like any popup. The rounded corners are kept
+  by the header — or the toolbar when `headless` — rounding its own top corners.
+
+- **The code editor now uses its full height.** The editing area was sized as the component's
+  height minus a fixed 32px for the header, but the header is 24px tall, so 8px along the bottom
+  was never used. The header and the editing area now divide the height by layout, so the editing
+  area is whatever the header leaves — at any header size. The component's overall size is
+  unchanged; only the editor inside it grows.
+
+## [0.3.3] - 2026-08-25
+
+### Added
+
+- Agent-skill reference docs for both components (`skills/iyulab-editor-components/`) —
+  properties, slots, events, and methods for `u-code-editor`/`u-text-editor`.
+
+### Fixed
+
+- 🔴**`monaco-editor` bundles a vulnerable `dompurify` (`3.4.8`) with no pin protecting it.**
+  Four moderate/low DOMPurify advisories (GHSA-c2j3-45gr-mqc4, GHSA-cmwh-pvxp-8882,
+  GHSA-vxr8-fq34-vvx9, GHSA-55q2-fjhq-7xh7) affect `<=3.4.12`; a fresh install of this package
+  resolved the vulnerable version with nothing to stop it. Added `overrides: { dompurify:
+  "^3.4.13" }` — `dompurify` is a transitive dependency here (bundled via `monaco-editor`), not
+  a direct one, so this pins cleanly without touching `dependencies`. Verified with a clean
+  install: `npm audit` no longer reports any dompurify advisory, typecheck/lint/test/build all
+  pass. (`quill`'s own advisory, GHSA-v3m3-f69x-jf25, has no upstream fix yet and is unrelated
+  to this pin — still open, tracked separately.)
+
 ## [0.3.2] - 2026-08-18
 
 ### Changed

package/README.md

@@ -50,6 +50,12 @@ Monaco Editor 기반 코드 에디터 컴포넌트입니다.
 | `fontSize` | `number` | `14` | 폰트 크기(px) |
 | `value` | `string` | `""` | 에디터 내용 |
 
+**크기:** **호스트 상자가 크기를 정합니다** — `:host` 가 `width: 100%; height: 100%` 이고 편집 영역은 머리글을 뺀 나머지입니다(Monaco 가 `automaticLayout` 으로 따라옵니다). `height` 프로퍼티는 없으니 요소나 부모에 CSS 로 높이를 주세요.
+
+⚠**부모에 자기 높이가 없으면 `height: 100%` 가 무효가 되어 편집 영역이 몇 px 로 붕괴합니다** — 오류도 콘솔 경고도 없이 머리글과 빈 띠만 남습니다. 부모에 높이를 주거나 요소에 직접 주세요. `headless` 면 머리글이 없어 편집 영역이 호스트 상자 전체입니다.
+
+⚠`u-text-editor` 는 반대입니다 — 거기서는 `height` 프로퍼티가 편집 영역을 정하고 호스트 CSS `height` 는 그것을 바꾸지 않습니다. 한쪽에서 되던 레이아웃이 다른 쪽에 그대로 옮겨지지 않습니다.
+
 ### `u-text-editor` (UTextEditor)
 
 Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
@@ -74,9 +80,15 @@ Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
 | `readOnly` | `boolean` | `false` | 읽기 전용 모드 |
 | `placeholder` | `string` | `"Start writing..."` | 플레이스홀더 텍스트 |
 | `value` | `string` | `""` | 에디터 HTML 내용 |
-| `height` | `number` | `300` | 에디터 높이(px) |
+| `height` | `number` | `300` | **편집 영역** 높이(px) — 아래 「크기」 참조 |
 | `toolbar` | `string[][]` | 기본 툴바 | 커스텀 툴바 설정 |
 
+**크기:** `height` 는 **편집 영역**의 높이(px)이고, 호스트 상자는 거기에 헤더가 더해진 크기입니다(`height="300"` → 약 349px = 헤더 48 + 300 + 테두리 · `headless` 면 헤더 없음).
+
+🔴**호스트에 CSS `height` 를 줘도 편집 영역은 바뀌지 않습니다.** 호스트 상자만 바뀌므로, 작게 주면 편집 영역이 상자 밖으로 넘치고(일부러 자르지 않습니다 — Quill 의 떠 있는 UI 인 선택기 목록·링크 툴팁이 상자를 벗어날 수 있어야 합니다) 크게 주거나 `height: 100%` 로 주면 아래에 빈 공간이 남습니다. 부모 높이를 채우려면 CSS 가 아니라 `height` 프로퍼티로 넘기세요.
+
+⚠`u-code-editor` 는 반대입니다 — `height` 프로퍼티가 없고 호스트 상자를 채웁니다(`height: 100%`). 한쪽에서 되던 레이아웃이 다른 쪽에 그대로 옮겨지지 않습니다.
+
 **Methods:**
 
 - `getHTML()` / `getText()` / `getDelta()`: HTML / 플레인 텍스트 / Quill Delta 형식으로 내용 반환
@@ -97,6 +109,7 @@ Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
 ## 개발
 
 ```bash
-npm test         # Vite 개발 서버 (컴포넌트 프리뷰)
-npm run build    # 프로덕션 빌드 (eslint + vite)
+npm run preview  # Vite 개발 서버 (컴포넌트 프리뷰)
+npm test         # 테스트 (vitest — 브라우저 프로젝트, Chromium)
+npm run build    # 프로덕션 빌드 (typecheck + eslint + vite)
 ```

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.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.144.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.149.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.js

@@ -1,7 +1,7 @@
 import "./UCodeEditor.worker.js";
 import { styles } from "./UCodeEditor.styles.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.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";

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

@@ -1,20 +1,23 @@
 import { css } from "lit";
 //#region src/components/code-editor/UCodeEditor.styles.ts
 var styles = css`
+  /* 크기는 «호스트 상자» 가 정한다 — monaco 는 automaticLayout 으로 컨테이너를 따라온다.
+     ⚠부모가 auto 높이면 height:100% 가 무효라 편집 영역이 0 이 된다(계약으로 문서에 적었다).
+     머리글 높이를 숫자로 가정하지 않는다 — 세로 flex 가 «머리글을 뺀 나머지» 를 편집 영역에 준다.
+     종전에는 --header-height: 32px 를 빼는 계산이었는데 실제 머리글은 24px 라 8px 을 못 쓰고 있었다
+     (형제 u-text-editor 에서 같은 부류의 «툴바 높이를 숫자로 가정» 을 걷어낸 것과 같은 이유). */
   :host {
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    --header-height: 32px;
-  }
-  :host([headless]) {
-    --header-height: 0px;
   }
 
   .header {
     position: relative;
+    flex: none;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -38,9 +41,10 @@ var styles = css`
   }
 
   .editor {
-    position: absolute;
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
     width: 100%;
-    height: calc(100% - var(--header-height));
     overflow: hidden;
 
     main {

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

@@ -21,7 +21,16 @@ export declare class UTextEditor extends UElement {
     placeholder: string;
     /** The current HTML content of the rich text editor. @default "" */
     value: string;
-    /** The height of the editor in pixels. @default 300 */
+    /**
+     * 편집 영역의 높이(px). 호스트 상자는 여기에 머리글이 더해진 크기다(`headless` 면 머리글 없음).
+     *
+     * 🔴**호스트에 CSS `height` 를 줘도 편집 영역은 바뀌지 않는다** — 호스트 상자만 바뀌어서, 작으면
+     * 편집 영역이 상자 밖으로 넘치고(자르지 않는다 — 시트 머리의 `:host` 주석) 크면 아래가 빈다.
+     * 부모를 채우려면 CSS 가 아니라 이 프로퍼티로 넘긴다. 계약은
+     * `tests/browser/text-editor-layout.browser.test.ts` 가 고정한다.
+     *
+     * @default 300
+     */
     height: number;
     /** Custom toolbar configuration. If not provided, uses default toolbar. */
     toolbar?: string[][];
@@ -34,7 +43,6 @@ export declare class UTextEditor extends UElement {
      *  text-change(→ change 이벤트)로 위장되지 않도록 하기 위함. */
     private setQuillContents;
     render(): import('lit-html').TemplateResult<1>;
-    private updateEditorHeight;
     /**
      * Get the current content as HTML
      */

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

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { styles } from "./UTextEditor.styles.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -90,7 +90,6 @@ var UTextEditor = class UTextEditor extends UElement {
 				composed: true
 			}));
 		});
-		this.updateEditorHeight();
 	}
 	async updated(changedProperties) {
 		super.updated(changedProperties);
@@ -99,7 +98,6 @@ var UTextEditor = class UTextEditor extends UElement {
 			if (changedProperties.has("value") && this.value !== this.quill.root.innerHTML) this.setQuillContents(this.value);
 			if (changedProperties.has("readOnly")) this.quill.enable(!this.readOnly);
 			if (changedProperties.has("placeholder")) this.quill.root.dataset.placeholder = this.placeholder;
-			if (changedProperties.has("height")) this.updateEditorHeight();
 		}
 	}
 	/** HTML을 Quill Delta로 변환해 silent source로 주입한다 — 프로그램적 콘텐츠 세팅이
@@ -121,12 +119,6 @@ var UTextEditor = class UTextEditor extends UElement {
       </div>
     `;
 	}
-	updateEditorHeight() {
-		if (this.quill) {
-			const editorElement = this.shadowRoot?.querySelector(".ql-editor");
-			if (editorElement) editorElement.style.height = `${this.height - 42}px`;
-		}
-	}
 	/**
 	* Get the current content as HTML
 	*/

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

@@ -22,12 +22,14 @@ import { css } from "lit";
 * 색 선언 수 25 → 9.
 */
 var styles = css`
+  /* 호스트는 자르지 않는다 — Quill 의 떠 있는 UI(선택기 목록 · 링크 툴팁)는 편집기 상자 밖으로 나갈 수 있어야 한다.
+     종전 overflow: hidden 은 짧은 편집기에서 그것들을 잘라 누를 수 없게 만들었다. 둥근 모서리는 배경을 칠하는
+     머리글(과 머리글이 없을 때의 툴바)이 자기 위 모서리를 둥글게 해서 지킨다. */
   :host {
     display: block;
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-md, 4px);
     background: var(--u-panel-bg-color, #FFFFFF);
-    overflow: hidden;
   }
 
   .header {
@@ -38,6 +40,11 @@ var styles = css`
     background: var(--u-bg-color-hover, #F5F5F5);
     min-height: 48px;
     gap: 12px;
+    border-radius: calc(var(--u-radius-md, 4px) - 1px) calc(var(--u-radius-md, 4px) - 1px) 0 0;
+  }
+
+  :host([headless]) .ql-toolbar {
+    border-radius: calc(var(--u-radius-md, 4px) - 1px) calc(var(--u-radius-md, 4px) - 1px) 0 0;
   }
 
   .title {
@@ -51,6 +58,8 @@ var styles = css`
 
   .editor {
     position: relative;
+    /* 이 값은 «호스트 CSS 높이를 따르는 것» 이 아니라 렌더의 인라인 style 이 항상 덮는 폴백이다 —
+       높이의 주인은 height 프로퍼티이고, 그 JSDoc 이 계약을 적는다. (주석에도 백틱을 쓰지 않는다 — css 템플릿이 그 자리에서 끝난다.) */
     height: 300px;
   }
 
@@ -58,6 +67,33 @@ var styles = css`
     height: 100%;
   }
 
+  /* 편집 영역은 «높이에서 툴바를 뺀 나머지» 다 — 툴바 높이를 숫자로 가정하지 않는다(좁으면 툴바가 여러 줄로 접힌다).
+     종전에는 편집 영역을 height - 42px 로 줘, 툴바가 접히면 편집 영역이 상자 밖으로 밀려나 아래가 잘렸다.
+     ⚠Quill 은 넘겨받은 요소(.quill-container)를 .ql-container 로 만들고, 툴바를 그 «앞 형제» 로 .editor 안에 넣는다 —
+     그래서 세로 배치의 주인은 .editor 다. */
+  .editor {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor > .ql-toolbar {
+    flex: none;
+  }
+
+  .editor > .ql-container {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ql-container > .ql-editor {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+  }
+
   .ql-editor {
     font-family: var(--u-font-base);
     font-size: 24px;
@@ -80,12 +116,28 @@ var styles = css`
     color: var(--u-txt-color, #212121);
   }
 
+  /* 🔴Quill 이 그리는 타깃의 치수 — 우리가 덮어쓴다(사람 결정 HD-58 ⒜). 소비자가 보는 것은 우리 컴포넌트이고,
+     WCAG 2.2 SC 2.5.8 은 «누가 그렸는가» 를 묻지 않는다.
+     ⑴ 색 견본 16×16(붙어 있어 간격 예외도 서지 않는다) → 24×24 · 한 줄 일곱 칸이라 목록 폭도 함께(7×(24+4)+10).
+     ⑵ 링크 툴팁의 Edit·Remove 는 줄 높이가 26 인데 인라인이라 실제 높이가 19 였다 → inline-block 으로 26. */
+  .ql-snow .ql-color-picker .ql-picker-item {
+    width: 24px;
+    height: 24px;
+  }
+  .ql-snow .ql-color-picker .ql-picker-options {
+    width: 206px;
+  }
+  .ql-snow .ql-tooltip a.ql-action,
+  .ql-snow .ql-tooltip a.ql-remove {
+    display: inline-block;
+  }
+
   .ql-toolbar .ql-stroke {
-    stroke: var(--u-txt-color-weak, #757575);
+    stroke: var(--u-txt-color-weak, #616161);
   }
 
   .ql-toolbar .ql-fill {
-    fill: var(--u-txt-color-weak, #757575);
+    fill: var(--u-txt-color-weak, #616161);
   }
 
   /* 강조는 역할 토큰 경유 — 소비자가 브랜드를 바꾸면 함께 따라온다. */

package/dist/react/UCodeEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor';
+import { UCodeEditor as UCodeEditorElement } from '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
 
 export declare const UCodeEditor: React.ForwardRefExoticComponent<
   Omit<Partial<UCodeEditorElement>, keyof React.HTMLAttributes<UCodeEditorElement>>

package/dist/react/UCodeEditor.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor.js';
+import { UCodeEditor as UCodeEditorElement } from '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
 
 export const UCodeEditor = createComponent({
   react: React,

package/dist/react/UTextEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor';
+import { UTextEditor as UTextEditorElement } from '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
 
 export declare const UTextEditor: React.ForwardRefExoticComponent<
   Omit<Partial<UTextEditorElement>, keyof React.HTMLAttributes<UTextEditorElement>>

package/dist/react/UTextEditor.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor.js';
+import { UTextEditor as UTextEditorElement } from '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
 
 export const UTextEditor = createComponent({
   react: React,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -18,6 +18,7 @@
   },
   "files": [
     "dist",
+    "skills",
     "LICENSE",
     "README.md",
     "CHANGELOG.md",
@@ -45,6 +46,7 @@
     }
   },
   "scripts": {
+    "preversion": "node -e \"if(require('fs').existsSync('../../scripts/preversion-check.mjs'))require('child_process').execFileSync('node',['../../scripts/preversion-check.mjs'],{stdio:'inherit'})\"",
     "preview": "vite",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -54,14 +56,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.15.0",
     "lit": "^3.3.3",
-    "monaco-editor": "^0.55.1 || ^0.56.0",
     "quill": "^2.0.3"
   },
   "peerDependencies": {
+    "@iyulab/components": ">=1.15.0",
     "@lit/react": ">=1.0.8",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "monaco-editor": "^0.55.1"
   },
   "peerDependenciesMeta": {
     "@lit/react": {
@@ -72,16 +74,19 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
     "@vitest/browser-playwright": "^4.1.10",
-    "eslint": "^9.39.4",
+    "eslint": "^10.1.0",
     "glob": "^13.0.6",
     "globals": "^17.7.0",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "typescript-eslint": "^8.64.0",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10"
+  },
+  "overrides": {
+    "dompurify": "^3.4.13"
   }
 }

package/skills/iyulab-editor-components/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: iyulab-editor-components
+description: Editor web components — a Monaco-based code editor and a Quill-based rich text editor. Both auto-sync with the surrounding document theme (code editor) or the shared @iyulab/components design tokens (text editor). Use when working with @iyulab/editor-components package.
+license: MIT
+metadata:
+  author: iyulab
+  version: "0.3.3"
+---
+
+# @iyulab/editor-components
+
+Editor web components built on [Lit](https://lit.dev/). Custom elements (`u-*` tags) that work in any framework or vanilla HTML.
+
+## Quick Start
+
+```bash
+npm install @iyulab/editor-components
+```
+
+Import all components at once:
+
+```ts
+import '@iyulab/editor-components';
+```
+
+Import individual components (tree-shakable):
+
+```ts
+import '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
+import '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
+```
+
+---
+
+## Components
+
+- [`u-code-editor`](./references/components/code-editor.md) — Monaco-based code editor. Language-aware syntax highlighting, automatic light/dark theme sync
+- [`u-text-editor`](./references/components/text-editor.md) — Quill-based rich text editor. HTML/plain-text/Delta content access, customizable toolbar
+
+---
+
+## Events
+
+| Event | Source | Detail | Description |
+|-------|--------|--------|--------------|
+| `change` | `u-code-editor` | none (plain `Event`) | User edit in the Monaco editor |
+| `change` | `u-text-editor` | `{ html, text, delta }` | User edit in the Quill editor |

package/skills/iyulab-editor-components/references/components/code-editor.md

@@ -0,0 +1,70 @@
+# u-code-editor
+
+```ts
+import '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
+```
+
+**Tag:** `u-code-editor`
+
+Monaco Editor wrapped as a custom element. Syntax highlighting, per-language configuration, and automatic light/dark sync with the document theme (`Theme.resolved()` from `@iyulab/components`).
+
+```html
+<u-code-editor language="typescript" .value=${"const x: number = 42;"}></u-code-editor>
+
+<!-- Without header -->
+<u-code-editor language="json" headless .value=${JSON.stringify({key: 'value'}, null, 2)}></u-code-editor>
+```
+
+---
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `headless` | `boolean` | `false` | ✓ | Hides the header (label + `header-actions` slot) |
+| `label` | `string` | `'Editor'` | — | Header title text |
+| `theme` | `'light' \| 'dark'` | `'light'` | — | Editor color theme. Synced automatically from `Theme.resolved()` on connect and on every `data-theme`/`theme` attribute mutation on `document.documentElement` — the declared default is overwritten before first render, and setting it directly is overwritten by the next sync |
+| `readOnly` | `boolean` | `false` | — | Prevents user input |
+| `language` | `string` | `'json'` | — | Monaco language id (`"javascript"`, `"typescript"`, …) |
+| `fontSize` | `number` | `14` | — | Editor font size in pixels |
+| `value` | `string` | `''` | — | Current text content |
+
+## Sizing
+
+**The host box owns the size.** `:host` is `width: 100%; height: 100%`, and the editing area is
+whatever the header leaves — Monaco re-layouts into it (`automaticLayout`). There is no `height`
+property: size the element, or give its parent a height.
+
+```html
+<!-- ✓ the parent has a height, so the editor fills it -->
+<div style="height: 400px"><u-code-editor></u-code-editor></div>
+
+<!-- ✓ or size the element itself -->
+<u-code-editor style="height: 400px"></u-code-editor>
+```
+
+⚠ **In a parent that has no height of its own, `height: 100%` resolves to nothing and the editing
+area collapses to a few pixels** — you get the header and an empty strip, with no error and nothing
+in the console. Give the parent a height, or set one on the element.
+
+`headless` removes the header, so the editing area is then the whole host box.
+
+⚠ `u-text-editor` is the opposite: there, a `height` property sizes the editing area and a CSS
+`height` on the host does *not* change it. A layout that works for one does not transfer to the
+other unchanged.
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header-actions` | Content placed at the end of the header (e.g. extra toolbar buttons) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|--------------|
+| `change` | none (plain `Event`) | Fired on user edits (`Monaco.onDidChangeModelContent`). Not fired for programmatic `value` assignment while Monaco already holds that value. Read the new content from `value` |
+
+## CSS Custom Properties
+
+None. Layout is plain flexbox — the header keeps its own height and the editing area takes the rest — so there is no layout variable to override (see [Sizing](#sizing) for how the element is sized), and colours come from Monaco's own theme (`vs-light`/`vs-dark`) rather than this library's `--u-*` design tokens.

package/skills/iyulab-editor-components/references/components/text-editor.md

@@ -0,0 +1,86 @@
+# u-text-editor
+
+```ts
+import '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
+```
+
+**Tag:** `u-text-editor`
+
+Rich text editor built on [Quill](https://quilljs.com/). Reads and writes HTML, plain text, or Quill Delta.
+
+```html
+<u-text-editor placeholder="Start writing..." .value=${"<p>Hello</p>"}></u-text-editor>
+
+<!-- Without header, custom toolbar -->
+<u-text-editor headless .toolbar=${[['bold', 'italic'], ['link']]}></u-text-editor>
+```
+
+---
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `headless` | `boolean` | `false` | ✓ | Hides the header (label + `header-actions` slot) |
+| `label` | `string` | `'Rich Text Editor'` | — | Header title text |
+| `readOnly` | `boolean` | `false` | — | Prevents user input |
+| `placeholder` | `string` | `'Start writing...'` | — | Placeholder shown when empty |
+| `value` | `string` | `''` | — | Current content as HTML |
+| `height` | `number` | `300` | — | Height of the **editing area** in pixels — see [Sizing](#sizing) |
+| `toolbar` | `string[][]` | `undefined` | — | Custom toolbar configuration. When left unset, falls back at runtime to Quill's default 14-group toolbar (not a declared property default) |
+
+## Sizing
+
+`height` sets the **editing area**. The host box is that plus the header, so `height="300"` renders
+an element about 349px tall (48px header + 300px + border); `headless` removes the header.
+
+**A CSS `height` on the host does not resize the editing area** — it resizes only the host box. Set
+it smaller and the editing area overflows past the box, and is deliberately *not* clipped, because
+Quill's floating UI (picker lists, the link tooltip) has to be able to leave it. Set it larger — or
+use `height: 100%` — and empty space is left below. So express a parent-filling layout through the
+property, not CSS:
+
+```html
+<!-- ✗ the host box becomes 150px; the editing area stays 300px and overflows it -->
+<u-text-editor style="height: 150px" height="300"></u-text-editor>
+
+<!-- ✓ -->
+<u-text-editor .height=${containerHeight - 48}></u-text-editor>
+```
+
+⚠ `u-code-editor` is the opposite: it has no `height` property and fills the host box
+(`height: 100%`). A layout that works for one does not transfer to the other unchanged.
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|--------------|
+| `getHTML()` | `string` | Current content as HTML |
+| `getText()` | `string` | Current content as plain text |
+| `getDelta()` | `QuillDelta \| null` | Current content as a Quill Delta |
+| `setHTML(html)` | `void` | Set content from HTML (same as setting `.value`) |
+| `setDelta(delta)` | `void` | Set content from a Quill Delta |
+| `clear()` | `void` | Clear all content |
+| `focus()` | `void` | Focus the editor |
+
+`setHTML`/`setDelta`/`clear` are programmatic — like the `value` property path, they do not fire `change`.
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header-actions` | Content placed at the end of the header (e.g. extra toolbar buttons) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|--------------|
+| `change` | `{ html: string, text: string, delta: QuillDelta }` | Fired only for user edits (Quill `source === 'user'`) — composed so it crosses the shadow boundary |
+
+## CSS Custom Properties
+
+`UTextEditor` doesn't declare any custom properties of its own — its styles read the shared
+`@iyulab/components` design tokens directly (`--u-border-color`, `--u-panel-bg-color`,
+`--u-txt-color`, `--u-txt-color-weak`, `--u-bg-color-hover`, `--u-radius-md`, `--u-primary-color`,
+`--u-font-base`), so it re-themes automatically with the rest of the library and has nothing
+component-specific to override.