@iyulab/data-components 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,130 @@
 # Changelog
 
+## [0.12.0] - 2026-08-04
+
+### Fixed
+
+- 🔴**`u-rich-table` 의 전체선택이 다른 페이지의 선택을 조용히 파괴했다.** 서버 페이징
+  (`totalCount`/`currentPage`/`page-change`)에서 선택 상태는 페이지를 넘어 유지되는데,
+  전체선택 체크박스만 그 사실을 모르고 있었다:
+  - 체크 상태를 **«누적 선택 수 == 이 페이지 행 수»** 로 계산했다 ⇒ 1페이지를 전량 선택하고
+    2페이지로 넘어가면 **아무것도 고르지 않았는데 켜져 보였다.**
+  - 그 상태에서 체크박스를 끄면 선택 집합을 **통째로 비웠다** ⇒ 사용자에게는 *"이 페이지 해제"*
+    로 보이는 조작이 1페이지의 선택을 말없이 지웠다.
+  - 켜는 쪽도 합집합이 아니라 **치환**이었다 ⇒ 2페이지에서 전체선택하면 1페이지 선택분이 사라졌다.
+    `Ctrl`/`Cmd` + `A` 도 같은 경로였다.
+
+  ⇒ 전체선택/해제의 범위를 **현재 페이지**로 확정했다(합집합·차집합). 체크박스의 분자와 분모가
+  모두 현재 페이지 기준이 되어, 다른 페이지의 선택분이 이 페이지의 표시로 새지 않는다.
+
+  ⚠**단일 페이지 사용(`totalCount = 0`)에서는 동작이 종전과 완전히 같다** — 현재 페이지가
+  곧 전체이므로 합집합·차집합이 치환·전역소거와 일치한다.
+
+### Added
+
+- **선택 집합을 읽고 쓸 수 있다** — 종전에는 선택 상태가 `private` 이라 소비앱이 «해제»와
+  «다른 페이지에 있음»을 구분할 방법이 없었고, 그래서 추정할 수밖에 없었다.
+  - **`selectedRowIds`** *(getter)* — 페이지를 가로질러 누적된 **모든** 선택 식별자.
+    `getSelectedRows()` 는 현재 페이지의 행 객체만 주므로(갖고 있지 않은 행을 만들 수 없다)
+    *"여러 페이지에 걸쳐 고른 뒤 일괄 처리"* 에는 이쪽이 필요하다. **스냅샷**이라 돌려받은
+    집합을 고쳐도 내부 상태가 흔들리지 않는다.
+  - **`setSelection(ids)`** — 선택을 통째로 대체한다. 현재 페이지에 없는 식별자도 받는다.
+    ⚠**같은 집합이면 아무 일도 하지 않는다** — `selection-change` 를 받아 앱 상태를 갱신하고
+    다시 이것을 부르는 배선이 자연스러운데, 무조건 발생시키면 그 자리가 무한 루프가 된다.
+  - **`clearSelection()`** — 누적분까지 전부 비운다. 전체선택 체크박스가 «이 페이지» 범위가
+    되면서 전역 소거의 자리가 없어졌고, 일괄 처리 후 앱이 상태를 되돌리는 경로가 여기다.
+- **`selection-change` detail 에 `selectedIds: string[]` 추가** — `selectedRows`(현재 페이지)와
+  나란히 누적 식별자를 싣는다. 두 필드의 길이가 다른 것이 서버 페이징에서는 정상이다.
+- **`select-all` 이벤트** — 사용자가 전체선택 체크박스를 조작했다는 **의도**를 따로 알린다.
+  `selection-change` 만으로는 *"세 행을 골랐다"* 와 *"전체선택을 눌렀다"* 가 구분되지 않는데,
+  서버 페이징에서 후자는 앱이 *"조건에 맞는 N건 전부"* 를 제안할 자리다.
+  ⚠**`scope: 'page' | 'all'` 필드는 두지 않았다** — 이 컴포넌트는 `'all'` 을 낼 수 없다.
+  전역 전체선택은 식별자 목록이 아니라 **조회 조건**이라 컴포넌트가 표현할 수 있는 것이 아니고,
+  값이 하나뿐인 유니온은 라이브러리가 모르는 개념을 아는 척하는 필드가 된다.
+
+### Changed
+
+- **선택 건수 라벨이 두 숫자를 구분해 알린다** — 선택이 페이지를 가로지르면
+  `4 selected (1 on this page)` 처럼 누적과 이 페이지 몫을 함께 낸다. 한 페이지 안에 머무는
+  동안에는 종전대로 `3 selected` 다. 두 숫자가 다르다는 사실 자체가 사용자에게 보여야 한다.
+- **선택 건수·페이지 크기 문구가 로케일 레지스트리로 이주했다**(`selected` ·
+  `selectedAcrossPages` · `rowsPerPage`). `0.11.0` 의 이주가 중첩 템플릿 안의 두 건을
+  남겨 두어, 다른 문구가 전부 영어인 환경에서 이 둘만 한국어로 나왔다.
+
+## [0.11.0] - 2026-08-04
+
+### Fixed
+
+- 🔴**`LICENSE` 파일이 없어 게시본에 MIT 원문이 빠져 있었다.** `package.json` 이
+  `"license": "MIT"` 를 선언하고 `files` 에 `LICENSE` 를 나열했지만 파일 자체가 없었다
+  ⇒ `0.10.0` 까지의 tarball 에 라이선스 원문이 들어 있지 않다. MIT 는 *"위 저작권 고지와
+  이 허가 고지를 모든 사본에 포함시켜야 한다"* 는 조건부 허가이므로, 원문 누락은 그 조건을
+  스스로 이행하지 못한 상태였다. ⚠`npm view … license` 가 `MIT` 를 보여 주는 것은
+  `package.json` 필드를 읽은 것이지 **원문이 배포됐다는 뜻이 아니다.**
+
+### Changed
+
+- **`u-rich-table` 의 `_id` 부재 경고가 영어로 이주했다** — 개발자 대면 진단이므로 로케일
+  레지스트리에 넣지 않는다(사용자가 읽는 문자열이 아니다).
+
+- ⚠**표 문구가 «영어 기본 + 로케일 레지스트리»로 이주했다** — 기본값 7건이 한국어 리터럴이었다
+  (`u-rich-table` 6 · `u-simple-sheet` 1).
+
+  ```ts
+  import { Locale } from '@iyulab/components';
+  import { messages } from '@iyulab/data-components';
+
+  Locale.set('ko');                                  // 검증 메시지와 함께 전환된다
+  messages.register('ja', { empty: 'データなし' });   // 언어를 더하거나 문구를 덮는다
+  ```
+
+  ⚠**한국어 환경은 종전과 같은 문구를 본다**(내장 `ko` · `ko-KR` → `ko`).
+  ⚠**소비자가 준 값은 여전히 이긴다** — `emptyMessage` 등 프로퍼티 계약은 그대로다.
+
+  ★**기본값을 «비우고» 렌더에서 해석한다.** 프로퍼티 초기값에 문자열을 박으면 **생성 시점의
+  로케일에 고정**돼 나중에 `Locale.set()` 을 불러도 이미 만들어진 표는 따라오지 않는다.
+  ⚠**따라서 프로퍼티를 읽으면 기본 상태에서 `''` 가 나온다**(종전에는 한국어 리터럴).
+  화면 문구는 렌더 결과가 계약이다.
+
+  ★검증 메시지(`필수 항목입니다`)는 **`@iyulab/components` 의 키셋**을 쓴다
+  (`Locale.getValue('valueMissing')` · 14로케일). 같은 문장을 두 곳에 두지 않는다.
+
+### Requires
+
+- `@iyulab/components >= 1.23.0` (`Locale.namespace`).
+
+### Added
+
+- **`u-simple-sheet` 의 행 높이·여백·글자 크기를 소비자가 정할 수 있다** — 조절점 6종.
+
+  ```
+  --dc-row-height           24px   셀 height · line-height (둘 다)
+  --dc-cell-padding-block    0px   셀 · 편집 입력의 세로 여백 (행 높이에 가산)
+  --dc-cell-padding-inline   6px   〃 가로 여백
+  --dc-font-size            13px   본문 셀 · 편집 입력 · 드롭다운 항목
+  --dc-header-font-size     12px   열 머리
+  --dc-header-font-weight    600   〃
+  ```
+
+  종전에는 치수가 전부 리터럴이라, 한 화면에 표가 여럿일 때 **시트만 다른 높이로 남아도
+  맞출 방법이 없었다**(공개 API 에 치수 노브 0건 · `part` 0건). 0.10.0 이 연 색 축과 같은
+  자리이고, 색을 맞추고 나서야 높이 차이가 드러난 형태다.
+
+  ⚠**행 높이와 `line-height` 는 한 토큰이 정한다.** 따로 열면 소비자가 한쪽만 바꿔 글자가
+  세로로 어긋난다 — 그 묶임이 이 축의 유일한 제약이다.
+
+  ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다. 그래서
+  `:host` 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다(`:root` 는 닿지 않는다).
+
+  ⚠**기본 렌더는 변하지 않는다.** 선언하지 않으면 종전 값으로 그려진다.
+
+  ⚠**선언값과 읽히는 행 높이는 1.5px 다르다** — `border-collapse` 로 접힌 테두리가 사용값에
+  더해진다(`24px` 선언 → `25.5px` 로 읽힘). 32px 로 맞추려면 `30.5px` 를 선언한다.
+
+  `tests/browser/simple-sheet-density.browser.test.ts` 가 **실제 크로미움 계산값으로** 효력을
+  잰다 — 소스 대조는 «적혀 있음»만 증명하고, 문서 스코프 선언이 섀도의 `:host` 를 이기는지는
+  캐스케이드 문제라 계산값으로만 갈린다.
+
 ## [0.10.0] - 2026-08-03
 
 ### Added

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 iyulab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -190,6 +190,40 @@ u-rich-table { --dc-icon-color: #B0B0B0; }
 ⚠**`0.10.0` 은 조절점만 엽니다 — 기본 렌더는 변하지 않습니다.** 다섯 단이 전부
 `--u-txt-color-weak` 에서 파생되며, 다크 대응도 그 역할 토큰이 이미 갖고 있습니다.
 
+### 시트 밀도·타이포 조절 (`u-simple-sheet` · 0.11.0~)
+
+한 화면에 표가 여럿일 때 **행 높이를 서로 맞추기 위한** 조절점입니다. 색 축(위)과 같은
+이유로 열렸습니다 — 어느 높이가 옳은지는 소비자가 정할 일인데, 종전에는 치수가 전부
+리터럴이라 정할 방법이 없었습니다.
+
+| 토큰 | 기본값 | 무엇을 정하나 |
+|---|---|---|
+| `--dc-row-height` | `24px` | 셀 `height` 와 `line-height` **둘 다** |
+| `--dc-cell-padding-block` | `0px` | 셀·편집 입력의 세로 여백 (행 높이에 **가산**) |
+| `--dc-cell-padding-inline` | `6px` | 〃 가로 여백 |
+| `--dc-font-size` | `13px` | 본문 셀 · 편집 입력 · 드롭다운 항목 |
+| `--dc-header-font-size` | `12px` | 열 머리 |
+| `--dc-header-font-weight` | `600` | 〃 |
+
+```css
+/* ⚠요소 선택자로 겨눕니다 — :root 는 닿지 않습니다(아래 참조) */
+u-simple-sheet {
+  --dc-row-height: 30.5px;   /* 읽히는 행 높이 32px */
+}
+```
+
+⚠**`:root` 로는 닿지 않습니다.** 커스텀 프로퍼티 상속값은 섀도 루트의 `:host` 선언에
+집니다. 색 축과 달리 이 여섯은 `:host` 에 리터럴 기본값을 갖고 있으므로(역할 층에 치수
+축이 없어 파생할 곳이 없습니다) **요소 선택자**(`u-simple-sheet { … }`)로 선언하십시오.
+
+⚠**선언값과 «읽히는» 행 높이는 1.5px 다릅니다.** `border-collapse` 로 접힌 테두리가
+사용값에 더해집니다 — 기본 `24px` 선언이 `25.5px` 로 읽힙니다. 32px 로 맞추려면
+`30.5px` 를 선언하십시오. (같은 이유로 **빈 행은 데이터 행보다 1.5px 낮습니다** —
+`0.11.0` 이전부터 그랬고, 교정하면 기본 렌더가 바뀌므로 이 릴리스에서는 두었습니다.)
+
+⚠**`0.11.0` 도 조절점만 엽니다** — 선언하지 않으면 종전과 같은 값으로 그려집니다.
+이 여섯은 `u-simple-sheet` 전용입니다(`u-data-view`·`u-rich-table` 은 읽지 않습니다).
+
 ### 알려진 제약
 
 - **표면 높이를 뜻하는 토큰이 없습니다** — 배경 역할 토큰은 상호작용 상태 이름

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,6 @@
 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 "./USimpleSheet.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -25,7 +26,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
 		this.rows = 20;
 		this.cols = 10;
 		this.readonly = false;
-		this.noMatchMessage = "일치하는 항목 없음";
+		this.noMatchMessage = "";
 		this._sel = null;
 		this._editing = null;
 		this._editVal = "";
@@ -612,7 +613,7 @@ var USimpleSheet = class USimpleSheet extends UElement {
             </div>
           ` : noMatch && isStrict ? html`
             <div class="cell-dropdown">
-              <div class="dropdown-empty">${this.noMatchMessage}</div>
+              <div class="dropdown-empty">${this.noMatchMessage || messages.text("noMatch")}</div>
             </div>
           ` : ""}
         ` : this._formatValue(value, c, r)}

package/dist/components/simple-sheet/USimpleSheet.styles.js

@@ -18,6 +18,25 @@ var baseStyles = css`
     --dc-header-color:   var(--u-txt-color-weak, #757575);   /* 열 머리 · 행 머리 */
     --dc-empty-color:    var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
     --dc-readonly-color: var(--u-txt-color-weak, #757575);   /* 읽기 전용 셀 */
+
+    /* ── 소비자 조절점 — 밀도·타이포 ──
+       ★색 축(위)과 같은 이유로 열었다. 한 제품 안에 표가 여럿일 때 «어느 높이가 옳은가»는
+       소비자가 정할 일인데, 이 컴포넌트는 치수가 전부 리터럴이라 정할 방법이 없었다.
+       ⚠**행 높이와 line-height 는 한 토큰이 정한다.** 따로 열면 소비자가 한쪽만 바꿔
+       글자가 세로로 어긋난다 — 그 묶임이 이 축의 유일한 제약이다.
+       ⚠**여백 축은 «가산»이다**: 실제 행 높이 = --dc-row-height + 2×--dc-cell-padding-block.
+       기본값이 0 이라 선언하지 않으면 종전과 같다.
+       ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다.
+       그래서 폴백이 아니라 :host 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다
+       (:host 선언은 상속값을 이기므로 :root 로는 닿지 않는다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다. */
+    --dc-row-height:          24px;   /* 셀 height · line-height (묶임) */
+    --dc-cell-padding-block:   0px;   /* 셀 · 편집 입력의 세로 여백 (가산) */
+    --dc-cell-padding-inline:  6px;   /* 〃 가로 여백 */
+    --dc-font-size:           13px;   /* 본문 셀 · 편집 입력 · 드롭다운 항목 */
+    --dc-header-font-size:    12px;   /* 열 머리 */
+    --dc-header-font-weight:   600;   /* 〃 */
+
     display: block;
     width: 100%;
     height: 400px;
@@ -78,8 +97,8 @@ var baseStyles = css`
     background: var(--u-neutral-100, #F5F5F5);
     padding: 4px 8px;
     text-align: center;
-    font-size: 12px;
-    font-weight: 600;
+    font-size: var(--dc-header-font-size);
+    font-weight: var(--dc-header-font-weight);
     color: var(--dc-header-color);
     border-right: 1px solid var(--u-border-color, #E0E0E0);
     border-bottom: 2px solid var(--u-border-color, #E0E0E0);
@@ -160,18 +179,20 @@ var baseStyles = css`
 
   /* Data cells */
   .cell {
-    padding: 0 6px;
+    padding: var(--dc-cell-padding-block) var(--dc-cell-padding-inline);
     border-right: 1px solid var(--u-border-color-weak, #EEEEEE);
     border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
-    font-size: 13px;
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     min-width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: cell;
-    height: 24px;
-    line-height: 24px;
+    /* ⚠height 는 «빈 셀»을 정한다 — 내용이 있는 셀의 높이는 line-height 가 만든다.
+       둘 중 하나만 배선하면 데이터 행과 빈 행의 높이가 갈린다(네거티브 컨트롤이 잡은 자리). */
+    height: var(--dc-row-height);
+    line-height: var(--dc-row-height);
     vertical-align: middle;
     position: relative;
     box-sizing: border-box;
@@ -206,8 +227,9 @@ var baseStyles = css`
     border: none;
     outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -1px;
-    padding: 0 6px;
-    font-size: 13px;
+    /* ⚠셀과 «같은 값»이어야 한다 — 어긋나면 편집 진입 순간 글자가 튄다. */
+    padding: var(--dc-cell-padding-block) var(--dc-cell-padding-inline);
+    font-size: var(--dc-font-size);
     font-family: inherit;
     color: var(--u-txt-color, #212121);
     background: var(--u-bg-color, #FFFFFF);
@@ -235,7 +257,8 @@ var baseStyles = css`
 
   .dropdown-item {
     padding: 4px 8px;
-    font-size: 13px;
+    /* 셀 값의 후보를 보이는 자리다 — 본문 글자 축을 따른다. */
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     cursor: pointer;
     white-space: nowrap;

package/dist/components/u-rich-table/URichTable.d.ts

@@ -40,6 +40,35 @@ export declare class URichTable extends LitElement {
     revertRow(_rowId: string): void;
     setRowError(rowId: string, message: string): void;
     clearRowError(rowId: string): void;
+    /**
+     * 선택된 행의 **식별자 집합** — 페이지를 가로질러 누적된 전부.
+     *
+     * `getSelectedRows()` 는 현재 페이지의 행 객체만 돌려주므로(갖고 있지 않은 행을 만들 수 없다)
+     * *"여러 페이지에 걸쳐 고른 뒤 일괄 처리"* 에는 이쪽이 필요하다.
+     *
+     * ⚠**스냅샷이다.** 내부 집합을 그대로 넘기면 `ReadonlySet` 이 타입 수준 약속일 뿐이라
+     * JS 소비자가 `add` 로 내부 상태를 **갱신 신호 없이** 망가뜨릴 수 있다. 복제 비용은
+     * 선택 크기에 비례하고 무시할 수준이다.
+     */
+    get selectedRowIds(): ReadonlySet<string>;
+    /**
+     * 선택을 **통째로 대체**한다 — 페이지를 가로지르는 누적분까지.
+     *
+     * 앱이 자기 상태를 정본으로 삼는 경우(외부 저장·복원, 필터 변경 시 정리)의 진입점이다.
+     * 현재 페이지에 없는 식별자를 넣어도 된다 — 그 페이지로 이동하면 선택된 것으로 렌더된다.
+     *
+     * ⚠**같은 집합이면 아무 일도 하지 않는다.** 앱이 `selection-change` 를 받아 자기 상태를
+     * 갱신하고 다시 이것을 부르는 것이 자연스러운 배선인데, 무조건 발생시키면 그 자리가
+     * **무한 루프**가 된다.
+     */
+    setSelection(ids: Iterable<string>): void;
+    /**
+     * 선택을 **전부** 비운다 — 페이지를 가로지르는 누적분까지.
+     *
+     * 전체선택 체크박스는 «이 페이지»만 다루므로 전역 소거의 자리가 없다. 일괄 처리를 끝낸 뒤
+     * 앱이 상태를 되돌리는 경로가 여기다. `selection-change` 를 발생시킨다.
+     */
+    clearSelection(): void;
     /**
      * 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
      *
@@ -52,8 +81,24 @@ export declare class URichTable extends LitElement {
     private _rowId;
     private _warnedMissingRowId;
     private _warnMissingRowId;
+    /**
+     * **현재 페이지의** 선택된 행. 서버 페이징에서 다른 페이지의 선택분은 여기 없다 —
+     * 이 컴포넌트가 갖고 있지 않은 행을 돌려줄 수는 없기 때문이다.
+     * 페이지를 가로지르는 선택 집합이 필요하면 {@link selectedRowIds} 를 쓴다.
+     */
     getSelectedRows(): Record<string, unknown>[];
+    /** 이 페이지 행들의 식별자. 전체선택/해제가 «이 페이지» 범위임을 정의하는 값이다. */
+    private _pageRowIds;
+    /** 현재 페이지에서 선택된 행 수 — 전체선택 체크박스의 «분자». */
+    private get _selectedOnPage();
     render(): TemplateResult;
+    /**
+     * ⚠**두 숫자를 섞지 않는다.** 체크박스는 «이 페이지»를 켜고 끄므로 그 상태도 페이지 기준이고,
+     * 라벨의 건수는 페이지를 가로지르는 **누적**이다. 종전에는 분자만 누적이고 분모가 페이지라
+     * 다른 페이지의 선택분이 이 페이지의 체크 상태로 새어 나왔다 — 페이지 1을 전량 선택하고
+     * 넘어가면 페이지 2에서 아무것도 고르지 않았는데 체크박스가 켜져 보였고, 그것을 끄면
+     * 페이지 1의 선택이 조용히 사라졌다.
+     */
     private _renderToolbar;
     private _renderHeader;
     private _renderFilterRow;
@@ -62,6 +107,23 @@ export declare class URichTable extends LitElement {
     private _renderCellContent;
     private _renderNewRow;
     private _renderPagination;
+    /**
+     * 전체선택 체크박스 — 범위는 **현재 페이지**다(합집합/차집합, 치환이 아니다).
+     * 종전에는 켤 때 `new Set(현재 페이지)` 로 **치환**하고 끌 때 `new Set()` 으로 **전역 소거**해서,
+     * 어느 쪽이든 다른 페이지의 선택분이 함께 날아갔다. 전역 소거가 필요하면 {@link clearSelection}.
+     *
+     * ## 왜 `select-all` 을 따로 내보내는가
+     *
+     * `selection-change` 만으로는 *"사용자가 세 행을 골랐다"* 와 *"사용자가 전체선택을 눌렀다"* 가
+     * 구분되지 않는다. 서버 페이징에서 그 구분은 앱에 필요하다 — 전체선택을 누른 순간이
+     * *"이 조건에 맞는 N건 전부"* 를 제안할 자리이기 때문이다.
+     *
+     * ⚠**`scope: 'page' | 'all'` 필드는 두지 않았다.** 이 컴포넌트는 `'all'` 을 **낼 수 없다** —
+     * 다른 페이지의 행을 갖고 있지 않고, 서버 페이징에서 «전역 전체선택»은 id 목록이 아니라
+     * **조회 조건**이라 컴포넌트가 표현할 수 있는 것이 아니다. 값이 하나뿐인 유니온은
+     * *"라이브러리가 모르는 개념을 아는 척하는"* 필드가 된다. ⇒ 컴포넌트는 **의도만** 알리고
+     * 전역 해석은 앱이 한다.
+     */
     private _onSelectAll;
     private _onRowSelect;
     private _lastSelectedIndex;
@@ -83,6 +145,12 @@ export declare class URichTable extends LitElement {
     private _getOptionLabel;
     private _getPageNumbers;
     private _moveToNextEditableCell;
+    /**
+     * ⚠**두 필드가 서로 다른 것을 센다.** `selectedRows` 는 **현재 페이지의 행 객체**이고
+     * `selectedIds` 는 페이지를 가로지르는 **누적 식별자**다. 서버 페이징에서 둘의 길이가
+     * 다른 것이 정상이며, 그 차이를 감출 방법은 없다 — 컴포넌트가 다른 페이지의 행을
+     * 갖고 있지 않기 때문이다.
+     */
     private _fireSelectionChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -90,6 +158,7 @@ export declare class URichTable extends LitElement {
     private _handleCopy;
     private _handlePaste;
     private _moveFocus;
+    /** `Ctrl`/`Cmd` + `A` — 전체선택 체크박스와 같은 범위(현재 페이지 합집합)여야 한다. */
     private _selectAll;
     static define(tagName?: string): void;
 }

package/dist/components/u-rich-table/URichTable.js

@@ -1,9 +1,11 @@
 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 { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/components/u-rich-table/URichTable.ts
 var URichTable = class URichTable extends LitElement {
 	constructor(..._args) {
@@ -14,12 +16,16 @@ var URichTable = class URichTable extends LitElement {
 		this.pageSize = 25;
 		this.currentPage = 1;
 		this.loading = false;
-		this.emptyMessage = "데이터가 없습니다";
-		this.loadingMessage = "로딩 중...";
-		this.filterPlaceholder = "필터...";
-		this.filterAllLabel = "전체";
-		this.addRowLabel = "+ 새 행";
-		this.pageInfoFormatter = (total, start, end) => `전체 ${total.toLocaleString()}건 중 ${start}-${end} 표시`;
+		this.emptyMessage = "";
+		this.loadingMessage = "";
+		this.filterPlaceholder = "";
+		this.filterAllLabel = "";
+		this.addRowLabel = "";
+		this.pageInfoFormatter = (total, start, end) => messages.text("pageInfo", {
+			total: total.toLocaleString(),
+			start,
+			end
+		});
 		this.selectable = false;
 		this.editable = false;
 		this.addable = false;
@@ -96,6 +102,44 @@ var URichTable = class URichTable extends LitElement {
 		this.rowErrors = next;
 	}
 	/**
+	* 선택된 행의 **식별자 집합** — 페이지를 가로질러 누적된 전부.
+	*
+	* `getSelectedRows()` 는 현재 페이지의 행 객체만 돌려주므로(갖고 있지 않은 행을 만들 수 없다)
+	* *"여러 페이지에 걸쳐 고른 뒤 일괄 처리"* 에는 이쪽이 필요하다.
+	*
+	* ⚠**스냅샷이다.** 내부 집합을 그대로 넘기면 `ReadonlySet` 이 타입 수준 약속일 뿐이라
+	* JS 소비자가 `add` 로 내부 상태를 **갱신 신호 없이** 망가뜨릴 수 있다. 복제 비용은
+	* 선택 크기에 비례하고 무시할 수준이다.
+	*/
+	get selectedRowIds() {
+		return new Set(this.selectedIds);
+	}
+	/**
+	* 선택을 **통째로 대체**한다 — 페이지를 가로지르는 누적분까지.
+	*
+	* 앱이 자기 상태를 정본으로 삼는 경우(외부 저장·복원, 필터 변경 시 정리)의 진입점이다.
+	* 현재 페이지에 없는 식별자를 넣어도 된다 — 그 페이지로 이동하면 선택된 것으로 렌더된다.
+	*
+	* ⚠**같은 집합이면 아무 일도 하지 않는다.** 앱이 `selection-change` 를 받아 자기 상태를
+	* 갱신하고 다시 이것을 부르는 것이 자연스러운 배선인데, 무조건 발생시키면 그 자리가
+	* **무한 루프**가 된다.
+	*/
+	setSelection(ids) {
+		const next = new Set(ids);
+		if (next.size === this.selectedIds.size && [...next].every((id) => this.selectedIds.has(id))) return;
+		this.selectedIds = next;
+		this._fireSelectionChange();
+	}
+	/**
+	* 선택을 **전부** 비운다 — 페이지를 가로지르는 누적분까지.
+	*
+	* 전체선택 체크박스는 «이 페이지»만 다루므로 전역 소거의 자리가 없다. 일괄 처리를 끝낸 뒤
+	* 앱이 상태를 되돌리는 경로가 여기다. `selection-change` 를 발생시킨다.
+	*/
+	clearSelection() {
+		this.setSelection([]);
+	}
+	/**
 	* 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
 	*
 	* ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
@@ -113,11 +157,24 @@ var URichTable = class URichTable extends LitElement {
 	_warnMissingRowId() {
 		if (this._warnedMissingRowId) return;
 		this._warnedMissingRowId = true;
-		console.warn("[@iyulab/data-components] u-rich-table: 행에 `_id` 가 없어 **위치**로 식별합니다. 데이터가 재정렬·재페이징되면 선택 상태가 다른 행으로 옮겨갑니다. 각 행에 고유한 `_id` 를 부여하세요.");
+		console.warn("[@iyulab/data-components] u-rich-table: rows have no `_id`, so selection is tracked by **position**. Re-sorting or re-paging the data moves the selection to a different row. Give every row a unique `_id`.");
 	}
+	/**
+	* **현재 페이지의** 선택된 행. 서버 페이징에서 다른 페이지의 선택분은 여기 없다 —
+	* 이 컴포넌트가 갖고 있지 않은 행을 돌려줄 수는 없기 때문이다.
+	* 페이지를 가로지르는 선택 집합이 필요하면 {@link selectedRowIds} 를 쓴다.
+	*/
 	getSelectedRows() {
 		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
 	}
+	/** 이 페이지 행들의 식별자. 전체선택/해제가 «이 페이지» 범위임을 정의하는 값이다. */
+	_pageRowIds() {
+		return this.data.map((row, i) => this._rowId(row, i));
+	}
+	/** 현재 페이지에서 선택된 행 수 — 전체선택 체크박스의 «분자». */
+	get _selectedOnPage() {
+		return this._pageRowIds().reduce((n, id) => n + (this.selectedIds.has(id) ? 1 : 0), 0);
+	}
 	render() {
 		return html`
       ${this._renderToolbar()}
@@ -132,24 +189,36 @@ var URichTable = class URichTable extends LitElement {
       ${this._renderPagination()}
     `;
 	}
+	/**
+	* ⚠**두 숫자를 섞지 않는다.** 체크박스는 «이 페이지»를 켜고 끄므로 그 상태도 페이지 기준이고,
+	* 라벨의 건수는 페이지를 가로지르는 **누적**이다. 종전에는 분자만 누적이고 분모가 페이지라
+	* 다른 페이지의 선택분이 이 페이지의 체크 상태로 새어 나왔다 — 페이지 1을 전량 선택하고
+	* 넘어가면 페이지 2에서 아무것도 고르지 않았는데 체크박스가 켜져 보였고, 그것을 끄면
+	* 페이지 1의 선택이 조용히 사라졌다.
+	*/
 	_renderToolbar() {
-		const selectedCount = this.selectedIds.size;
+		const total = this.selectedIds.size;
+		const onPage = this._selectedOnPage;
+		const crossesPages = total > onPage;
 		return html`
       <div class="toolbar">
         ${this.selectable ? html`
           <div class="selection-info">
             <input type="checkbox"
-              .checked=${selectedCount > 0 && selectedCount === this.data.length}
-              .indeterminate=${selectedCount > 0 && selectedCount < this.data.length}
+              .checked=${this.data.length > 0 && onPage === this.data.length}
+              .indeterminate=${onPage > 0 && onPage < this.data.length}
               @change=${this._onSelectAll} />
-            ${selectedCount > 0 ? html`<span>${selectedCount}건 선택됨</span>` : ""}
+            ${total > 0 ? html`<span>${crossesPages ? messages.text("selectedAcrossPages", {
+			count: total,
+			onPage
+		}) : messages.text("selected", { count: total })}</span>` : ""}
           </div>
-          ${selectedCount > 0 ? html`<slot name="bulk-actions"></slot>` : ""}
+          ${total > 0 ? html`<slot name="bulk-actions"></slot>` : ""}
         ` : ""}
         <div style="flex:1"></div>
         <slot name="toolbar-end"></slot>
         ${this.addable ? html`
-          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel}</button>
+          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel || messages.text("addRow")}</button>
         ` : ""}
       </div>
     `;
@@ -184,10 +253,10 @@ var URichTable = class URichTable extends LitElement {
         ${this.columns.map((col) => html`
           <td>
             ${col.filterable !== false ? col.filterType === "select" && col.options ? html`<select @change=${(e) => this._onFilterChange(col.key, e.target.value)}>
-                    <option value="">${this.filterAllLabel}</option>
+                    <option value="">${this.filterAllLabel || messages.text("filterAll")}</option>
                     ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
                   </select>` : html`<input
-                    placeholder=${this.filterPlaceholder}
+                    placeholder=${this.filterPlaceholder || messages.text("filterPlaceholder")}
                     @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
           </td>
         `)}
@@ -196,8 +265,8 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_renderBody() {
-		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage}</div></td></tr>`;
-		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage}</div></td></tr>`;
+		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage || messages.text("loading")}</div></td></tr>`;
+		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage || messages.text("empty")}</div></td></tr>`;
 		return this.data.map((row, rowIdx) => {
 			const rowId = this._rowId(row, rowIdx);
 			const isSelected = this.selectedIds.has(rowId);
@@ -326,16 +395,45 @@ var URichTable = class URichTable extends LitElement {
 			25,
 			50,
 			100
-		].map((s) => html`<option value=${s} ?selected=${s === this.pageSize}>${s}행</option>`)}
+		].map((s) => html`<option value=${s} ?selected=${s === this.pageSize}>${messages.text("rowsPerPage", { size: s })}</option>`)}
           </select>
         </div>
       </div>
     `;
 	}
+	/**
+	* 전체선택 체크박스 — 범위는 **현재 페이지**다(합집합/차집합, 치환이 아니다).
+	* 종전에는 켤 때 `new Set(현재 페이지)` 로 **치환**하고 끌 때 `new Set()` 으로 **전역 소거**해서,
+	* 어느 쪽이든 다른 페이지의 선택분이 함께 날아갔다. 전역 소거가 필요하면 {@link clearSelection}.
+	*
+	* ## 왜 `select-all` 을 따로 내보내는가
+	*
+	* `selection-change` 만으로는 *"사용자가 세 행을 골랐다"* 와 *"사용자가 전체선택을 눌렀다"* 가
+	* 구분되지 않는다. 서버 페이징에서 그 구분은 앱에 필요하다 — 전체선택을 누른 순간이
+	* *"이 조건에 맞는 N건 전부"* 를 제안할 자리이기 때문이다.
+	*
+	* ⚠**`scope: 'page' | 'all'` 필드는 두지 않았다.** 이 컴포넌트는 `'all'` 을 **낼 수 없다** —
+	* 다른 페이지의 행을 갖고 있지 않고, 서버 페이징에서 «전역 전체선택»은 id 목록이 아니라
+	* **조회 조건**이라 컴포넌트가 표현할 수 있는 것이 아니다. 값이 하나뿐인 유니온은
+	* *"라이브러리가 모르는 개념을 아는 척하는"* 필드가 된다. ⇒ 컴포넌트는 **의도만** 알리고
+	* 전역 해석은 앱이 한다.
+	*/
 	_onSelectAll(e) {
-		if (e.target.checked) this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
-		else this.selectedIds = /* @__PURE__ */ new Set();
+		const checked = e.target.checked;
+		const pageIds = this._pageRowIds();
+		const next = new Set(this.selectedIds);
+		for (const id of pageIds) if (checked) next.add(id);
+		else next.delete(id);
+		this.selectedIds = next;
 		this._fireSelectionChange();
+		this.dispatchEvent(new CustomEvent("select-all", {
+			detail: {
+				checked,
+				pageRowIds: pageIds
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	_onRowSelect(rowId) {
 		const next = new Set(this.selectedIds);
@@ -438,7 +536,7 @@ var URichTable = class URichTable extends LitElement {
 		let newValue = this.editValue;
 		if (col.type === "number") newValue = Number(newValue);
 		if (col.required && !newValue && newValue !== 0) {
-			this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, "필수 항목입니다");
+			this.validationErrors = new Map(this.validationErrors).set(`${rowIndex}-${colIndex}`, Locale.getValue("valueMissing"));
 			return;
 		}
 		if (col.validator) {
@@ -572,9 +670,18 @@ var URichTable = class URichTable extends LitElement {
 		const value = this.data[rowIndex]?.[this.columns[colIndex]?.key];
 		this._onCellDblClick(rowIndex, colIndex, value);
 	}
+	/**
+	* ⚠**두 필드가 서로 다른 것을 센다.** `selectedRows` 는 **현재 페이지의 행 객체**이고
+	* `selectedIds` 는 페이지를 가로지르는 **누적 식별자**다. 서버 페이징에서 둘의 길이가
+	* 다른 것이 정상이며, 그 차이를 감출 방법은 없다 — 컴포넌트가 다른 페이지의 행을
+	* 갖고 있지 않기 때문이다.
+	*/
 	_fireSelectionChange() {
 		this.dispatchEvent(new CustomEvent("selection-change", {
-			detail: { selectedRows: this.getSelectedRows() },
+			detail: {
+				selectedRows: this.getSelectedRows(),
+				selectedIds: [...this.selectedIds]
+			},
 			bubbles: true,
 			composed: true
 		}));
@@ -614,8 +721,11 @@ var URichTable = class URichTable extends LitElement {
 			colIndex: newCol
 		};
 	}
+	/** `Ctrl`/`Cmd` + `A` — 전체선택 체크박스와 같은 범위(현재 페이지 합집합)여야 한다. */
 	_selectAll() {
-		this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
+		const next = new Set(this.selectedIds);
+		for (const id of this._pageRowIds()) next.add(id);
+		this.selectedIds = next;
 		this._fireSelectionChange();
 	}
 	static define(tagName = "u-rich-table") {

package/dist/components/u-rich-table/types.d.ts

@@ -31,8 +31,24 @@ export interface FilterState {
     [field: string]: string;
 }
 export interface RichTableEventMap {
+    /**
+     * ⚠두 필드가 서로 다른 것을 센다 — `selectedRows` 는 **현재 페이지의 행 객체**,
+     * `selectedIds` 는 페이지를 가로지르는 **누적 식별자**다. 서버 페이징에서 길이가 다른 것이 정상이다.
+     */
     'selection-change': CustomEvent<{
         selectedRows: Record<string, unknown>[];
+        selectedIds: string[];
+    }>;
+    /**
+     * 사용자가 **전체선택 체크박스**를 조작했다. `selection-change` 와 함께 발생한다.
+     *
+     * 이 이벤트가 따로 있는 이유는 *"세 행을 골랐다"* 와 *"전체선택을 눌렀다"* 를 가르기 위해서다 —
+     * 서버 페이징에서 후자는 앱이 *"조건에 맞는 전체 N건"* 을 제안할 자리다.
+     * `pageRowIds` 는 이번 조작이 더하거나 뺀 **현재 페이지의** 식별자다.
+     */
+    'select-all': CustomEvent<{
+        checked: boolean;
+        pageRowIds: string[];
     }>;
     'row-create': CustomEvent<{
         row: Record<string, unknown>;

package/dist/react.d.ts

@@ -2,7 +2,6 @@ import { EventName } from '@lit/react';
 import { USimpleSheet } from './components/simple-sheet/USimpleSheet';
 import { UDataView } from './components/data-view/UDataView';
 import { URichTable } from './components/u-rich-table/URichTable';
-import { RichTableEventMap } from './components/u-rich-table/types';
 /** USimpleSheet React 래퍼 — `change` 이벤트는 `onChange`로 노출 */
 export declare const USimpleSheetReact: import('@lit/react').ReactWebComponent<USimpleSheet, {
     onChange: EventName<CustomEvent<{
@@ -13,15 +12,44 @@ export declare const USimpleSheetReact: import('@lit/react').ReactWebComponent<U
 export declare const UDataViewReact: import('@lit/react').ReactWebComponent<UDataView, {}>;
 /** URichTable React 래퍼 — RichTableEventMap의 모든 이벤트를 onXxx로 노출 */
 export declare const URichTableReact: import('@lit/react').ReactWebComponent<URichTable, {
-    onSelectionChange: EventName<RichTableEventMap["selection-change"]>;
-    onRowCreate: EventName<RichTableEventMap["row-create"]>;
-    onRowUpdate: EventName<RichTableEventMap["row-update"]>;
-    onRowDelete: EventName<RichTableEventMap["row-delete"]>;
-    onRowExpand: EventName<RichTableEventMap["row-expand"]>;
-    onSortChange: EventName<RichTableEventMap["sort-change"]>;
-    onFilterChange: EventName<RichTableEventMap["filter-change"]>;
-    onPageChange: EventName<RichTableEventMap["page-change"]>;
-    onPaste: EventName<RichTableEventMap["paste"]>;
+    readonly onSelectionChange: EventName<CustomEvent<{
+        selectedRows: Record<string, unknown>[];
+        selectedIds: string[];
+    }>>;
+    readonly onSelectAll: EventName<CustomEvent<{
+        checked: boolean;
+        pageRowIds: string[];
+    }>>;
+    readonly onRowCreate: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+    }>>;
+    readonly onRowUpdate: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+        field: string;
+        value: unknown;
+        oldValue: unknown;
+    }>>;
+    readonly onRowDelete: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+    }>>;
+    readonly onRowExpand: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+        expanded: boolean;
+    }>>;
+    readonly onSortChange: EventName<CustomEvent<{
+        field: string;
+        direction: "asc" | "desc" | null;
+    }>>;
+    readonly onFilterChange: EventName<CustomEvent<{
+        filters: import('./react').FilterState;
+    }>>;
+    readonly onPageChange: EventName<CustomEvent<{
+        page: number;
+        pageSize: number;
+    }>>;
+    readonly onPaste: EventName<CustomEvent<{
+        rows: Record<string, unknown>[];
+    }>>;
 }>;
 export { USimpleSheet, UDataView, URichTable };
 export type { SheetColumn } from './components/simple-sheet/USimpleSheet';

package/dist/react.js

@@ -34,6 +34,7 @@ var URichTableReact = createComponent({
 	react: React,
 	events: {
 		onSelectionChange: "selection-change",
+		onSelectAll: "select-all",
 		onRowCreate: "row-create",
 		onRowUpdate: "row-update",
 		onRowDelete: "row-delete",

package/dist/utilities/messages.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `@iyulab/data-components` 의 화면 문자열 — **영어 기본 + 로케일 레지스트리**.
+ *
+ * ## 왜 생겼나
+ *
+ * 표 컴포넌트의 기본 문구가 **한국어 리터럴**이었다(실측 7건). 소비자가 `emptyMessage` 등을
+ * 넘겨 덮을 수는 있었지만, **덮지 않으면 한국어가 나온다** — 로케일 표준(영어 기본 +
+ * 레지스트리)을 채택한 리포에서 그것은 미이주다.
+ *
+ * ## 기본값을 «비워» 두고 렌더에서 해석한다
+ *
+ * 프로퍼티 초기값으로 문자열을 박으면 **생성 시점의 로케일에 고정**된다 — `Locale.set()` 을
+ * 나중에 부르면 이미 만들어진 표는 따라오지 않는다. 그래서 기본값은 빈 문자열이고,
+ * 렌더가 `this.x || messages.text(...)` 로 해석한다.
+ *
+ * ⚠**소비자가 덮는 경로는 그대로다** — 값을 주면 그 값이 이긴다.
+ *
+ * ## 검증 메시지는 여기 두지 않는다
+ *
+ * `필수 항목입니다` 는 `@iyulab/components` 의 **검증 메시지 키셋에 이미 있고 14로케일이
+ * 딸려 온다**(`Locale.getValue('valueMissing')`). 같은 문장을 이 표에 복제하면 두 곳이
+ * 갈라진다.
+ */
+export type DataMessageKey = 'empty' | 'loading' | 'filterPlaceholder' | 'filterAll' | 'addRow' | 'pageInfo' | 'noMatch' | 'selected' | 'selectedAcrossPages' | 'rowsPerPage';
+export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<DataMessageKey>;

package/dist/utilities/messages.js

@@ -0,0 +1,29 @@
+import { Locale } from "@iyulab/components/dist/utilities/Locale.js";
+//#region src/utilities/messages.ts
+var messages = Locale.namespace("@iyulab/data-components");
+messages.register("en", {
+	empty: "No data",
+	loading: "Loading…",
+	filterPlaceholder: "Filter…",
+	filterAll: "All",
+	addRow: "+ New row",
+	pageInfo: "Showing {start}-{end} of {total}",
+	noMatch: "No matching item",
+	selected: "{count} selected",
+	selectedAcrossPages: "{count} selected ({onPage} on this page)",
+	rowsPerPage: "{size} rows"
+});
+messages.register("ko", {
+	empty: "데이터가 없습니다",
+	loading: "로딩 중...",
+	filterPlaceholder: "필터...",
+	filterAll: "전체",
+	addRow: "+ 새 행",
+	pageInfo: "전체 {total}건 중 {start}-{end} 표시",
+	noMatch: "일치하는 항목 없음",
+	selected: "{count}건 선택됨",
+	selectedAcrossPages: "{count}건 선택됨 (이 페이지 {onPage}건)",
+	rowsPerPage: "{size}행"
+});
+//#endregion
+export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -51,14 +51,15 @@
   ],
   "scripts": {
     "start": "vite",
-    "build": "eslint && vite build",
+    "build": "npm run typecheck && eslint && vite build",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "eslint src/",
-    "lint:fix": "eslint src/ --fix"
+    "lint:fix": "eslint src/ --fix",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.18.0",
+    "@iyulab/components": "^1.23.0",
     "lit": "^3.3.3"
   },
   "peerDependencies": {