@iyulab/data-components 0.13.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## [0.16.0] - 2026-08-16
+
+### Added
+
+- **`u-rich-table` gained a `--dc-font-size` custom property**, defaulting to
+  `var(--u-density, 13px)` — the same LOB density switch `@iyulab/components`,
+  `@iyulab/flex-table`, and `u-simple-sheet` already read. Setting `--u-density` on an
+  ancestor now scales the table's header and body cell text (and the cell edit input, which
+  intentionally shares the same token so entering edit mode never changes the font size)
+  along with the rest of the UI. This component's other text (toolbar, pagination, filter
+  row, badges, sort indicator, validation messages) keeps its own fixed sizes — it forms a
+  four-step visual hierarchy (13/12/11/10px) that a single density switch would flatten, so
+  only the primary content axis (header/body/edit) follows it. Unset, rendering is
+  byte-identical to before. An explicit `u-rich-table { --dc-font-size: … }` override still
+  wins over the switch.
+
+## [0.15.0] - 2026-08-16
+
+### Added
+
+- **`u-simple-sheet`'s body font size now reads `var(--u-density, 13px)`.** `@iyulab/components`
+  (`u-button`/`u-form`/`u-button-group`) and `@iyulab/flex-table` (`--ft-font-size`) already read
+  this switch; setting `--u-density` on an ancestor now scales the sheet's body text along with
+  them, instead of leaving it as the one stack that doesn't follow. Unset, rendering is
+  byte-identical to before (same 13px default). The element-selector override
+  (`u-simple-sheet { --dc-font-size: … }`) still wins over the switch, matching every other
+  token on this component. `--dc-header-font-size` is unaffected — the header and body font
+  sizes remain independent, as before.
+
+## [0.14.0] - 2026-08-07
+
+### Added
+
+- **`u-rich-table` gained a `row-activate` event** — the most common grid interaction, "click a
+  row to see its detail," had no way to reach the app. `selection-change` is checkbox-only and
+  conflating it with "the row being viewed" breaks multi-select screens; `row-expand` announces
+  that a detail row opened but gives the app no slot to render into. Clicking a cell now always
+  fires `row-activate` (`editable` columns included — a single click never enters edit mode, only
+  `dblclick` does), and so does `Enter` on a focused cell in a non-`editable` column (an
+  `editable` column's `Enter` still starts editing, unchanged). `detail: { row, id, via: 'click' |
+  'keyboard' }`. Purely additive — no existing behavior changes.
+
+### Fixed
+
+- 🔴**`u-rich-table`: giving the host a height made the pagination unreachable.** The component
+  declared no vertical layout, so under a height constraint the content overflowed at its natural
+  size while `:host` clipped with `overflow: hidden` — and because the pagination is the last child,
+  it was the first thing to disappear. It stayed in the DOM; it was simply neither visible nor
+  scrollable to. *The table rendered, but page 2 could not be reached.*
+
+  That left consumers with two options, both of which cost something the grid is for: constrain the
+  height and lose paging, or leave it unconstrained and let 50 rows become a 2,000px document whose
+  header scrolls away.
+
+  The host is now a column flex container: the toolbar and pagination hold their positions and only
+  the row area scrolls. The header row is `sticky`, so column names stay put while rows scroll —
+  the boundary line under it is drawn with an inset `box-shadow` rather than `border-bottom`,
+  because under `border-collapse: collapse` cell borders belong to the table and do not follow a
+  stuck header.
+
+  **Unconstrained use is unchanged**: with no height, `flex: 1 1 auto` follows content height and
+  `overflow: auto` adds no scrollbar. Verified in a real browser at both sizes.
+
+- 🔴**`sideEffects` omitted this package's own entry barrel, so bundlers dropped every element
+  registration.** The barrel that `exports["."]` resolves to exists solely to register the custom
+  elements, but it was not in the `sideEffects` allowlist. A consumer writing
+  `import '@iyulab/data-components'` — the form this package's own documentation recommends — had the module
+  elided entirely in a production build. The failure is silent: the build succeeds with no warning,
+  the tags remain in the DOM, and an unregistered custom element renders nothing.
+
+  Registration modules were already listed correctly. That was not enough: a dropped barrel means
+  they are never reached.
+
+  The `./react` subpath entry had the same gap. This also explains a second symptom:
+  `querySelector` still returns an element for an unregistered tag, so consumer code calling a
+  component method on it fails with `is not a function` rather than returning null.
+
+  Both the source-resolved and published-artifact forms of every affected entry point are now
+  declared, so workspace consumers and installed consumers get the same guarantee.
+
 ## [0.13.0] - 2026-08-05
 
 ### Added

package/README.md

@@ -218,10 +218,16 @@ u-rich-table { --dc-icon-color: #B0B0B0; }
 | `--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-font-size` | `13px`(`var(--u-density, 13px)`) | 본문 셀 · 편집 입력 · 드롭다운 항목 |
+| `--dc-header-font-size` | `12px` | 열 머리 — `--u-density` 와 무관(본문과 독립) |
 | `--dc-header-font-weight` | `600` | 〃 |
 
+⚠**`--dc-font-size` 만 예외입니다 — `@iyulab/components`/`@iyulab/flex-table` 의 밀도
+스위치(`--u-density`)를 폴백 원본으로 갖습니다**(0.15.0~). 조상에 `--u-density` 를 걸면
+본문 글자가 컨트롤·표와 함께 움직입니다. 이 요소에 `--dc-font-size` 를 직접 선언하면
+그 값이 여전히 이깁니다 — 다른 다섯 토큰과 같은 규칙입니다. 머리행은 이 스위치의
+영향을 받지 않습니다.
+
 ```css
 /* ⚠요소 선택자로 겨눕니다 — :root 는 닿지 않습니다(아래 참조) */
 u-simple-sheet {
@@ -230,8 +236,9 @@ u-simple-sheet {
 ```
 
 ⚠**`:root` 로는 닿지 않습니다.** 커스텀 프로퍼티 상속값은 섀도 루트의 `:host` 선언에
-집니다. 색 축과 달리 이 여섯은 `:host` 에 리터럴 기본값을 갖고 있으므로(역할 층에 치수
-축이 없어 파생할 곳이 없습니다) **요소 선택자**(`u-simple-sheet { … }`)로 선언하십시오.
+집니다. 색 축과 달리 이 여섯은(`--dc-font-size` 도 포함 — 역할 토큰이 아니라 `--u-density`
+스위치를 참조할 뿐, 역할 층에서 파생하는 것은 아닙니다) `:host` 에 기본값을 갖고 있으므로
+**요소 선택자**(`u-simple-sheet { … }`)로 선언하십시오.
 
 ⚠**선언값과 «읽히는» 행 높이는 1.5px 다릅니다.** `border-collapse` 로 접힌 테두리가
 사용값에 더해집니다 — 기본 `24px` 선언이 `25.5px` 로 읽힙니다. 32px 로 맞추려면
@@ -239,7 +246,34 @@ u-simple-sheet {
 `0.11.0` 이전부터 그랬고, 교정하면 기본 렌더가 바뀌므로 이 릴리스에서는 두었습니다.)
 
 ⚠**`0.11.0` 도 조절점만 엽니다** — 선언하지 않으면 종전과 같은 값으로 그려집니다.
-이 여섯은 `u-simple-sheet` 전용입니다(`u-data-view`·`u-rich-table` 은 읽지 않습니다).
+`--dc-row-height`·`--dc-cell-padding-block`·`--dc-cell-padding-inline`·
+`--dc-header-font-size`·`--dc-header-font-weight` 다섯은 `u-simple-sheet` 전용입니다
+(`u-data-view`·`u-rich-table` 은 읽지 않습니다). `--dc-font-size` 만 예외입니다 — 바로
+아래 `u-rich-table` 절 참조.
+
+### 그리드 밀도 조절 (`u-rich-table` · 0.16.0~)
+
+시트 밀도 축(위)과 같은 이유로, `u-rich-table` 도 `--dc-font-size` 를 갖습니다 —
+`--u-density` 를 폴백 원본으로 삼는 것도 `u-simple-sheet` 와 동일합니다.
+
+| 토큰 | 기본값 | 무엇을 정하나 |
+|---|---|---|
+| `--dc-font-size` | `13px`(`var(--u-density, 13px)`) | 열 머리 · 본문 셀 · 편집 입력 |
+
+⚠**이 컴포넌트는 시각 위계가 넉 단(13/12/11/10px)이고, 이 하나만 밀도를 따릅니다.**
+툴바·페이지네이션·필터 행·배지·정렬 표시자·검증 오류 메시지는 의도적으로 남습니다 —
+전부를 한 스위치에 묶으면 그 위계가 무너집니다. 편집 입력은 본문 셀과 **같은 토큰**을
+공유합니다 — 따로 두면 편집 진입 순간 글자가 튑니다.
+
+```css
+/* 조상에 걸면 헤더·본문·편집 입력이 함께 움직입니다 */
+.app-shell { --u-density: 15px; }
+
+/* 이 그리드만 다르게 */
+u-rich-table { --dc-font-size: 15px; }
+```
+
+⚠**미설정 시 렌더는 종전(`13px`)과 바이트 단위로 동일합니다.**
 
 ### 알려진 제약
 

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

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.144.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/data-view/UDataView.js

@@ -1,6 +1,6 @@
 import { styles } from "./UDataView.styles.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 __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 { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";

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

@@ -1,5 +1,5 @@
-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 __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 { messages } from "../../utilities/messages.js";
 import { styles } from "./USimpleSheet.styles.js";
 import { html } from "lit";
@@ -56,8 +56,10 @@ var USimpleSheet = class USimpleSheet extends UElement {
 			if (e.ctrlKey || e.metaKey) {
 				if (e.key === "z" || e.key === "Z") {
 					e.preventDefault();
-					if (!this.readonly) if (e.shiftKey) this._redo();
-					else this._undo();
+					if (!this.readonly) {
+						if (e.shiftKey) this._redo();
+						else this._undo();
+					}
 					return;
 				}
 				if (e.key === "y" || e.key === "Y") {
@@ -109,9 +111,10 @@ var USimpleSheet = class USimpleSheet extends UElement {
 			}
 			if (e.key === "Tab") {
 				e.preventDefault();
-				if (e.shiftKey) if (anchor.col === 0 && anchor.row > 0) this._select(anchor.row - 1, this._colCount - 1);
-				else this._select(anchor.row, Math.max(0, anchor.col - 1));
-				else if (anchor.col === this._colCount - 1) {
+				if (e.shiftKey) {
+					if (anchor.col === 0 && anchor.row > 0) this._select(anchor.row - 1, this._colCount - 1);
+					else this._select(anchor.row, Math.max(0, anchor.col - 1));
+				} else if (anchor.col === this._colCount - 1) {
 					if (anchor.row < this._rowCount - 1) this._select(anchor.row + 1, 0);
 				} else this._select(anchor.row, anchor.col + 1);
 				return;
@@ -220,11 +223,13 @@ var USimpleSheet = class USimpleSheet extends UElement {
 				e.preventDefault();
 				const pos = this._editing;
 				this._commitEdit();
-				if (e.shiftKey) if (pos.col === 0 && pos.row > 0) this._select(pos.row - 1, this._colCount - 1);
-				else this._select(pos.row, Math.max(0, pos.col - 1));
-				else if (pos.col === this._colCount - 1) if (pos.row < this._rowCount - 1) this._select(pos.row + 1, 0);
-				else this._select(pos.row, pos.col);
-				else this._select(pos.row, pos.col + 1);
+				if (e.shiftKey) {
+					if (pos.col === 0 && pos.row > 0) this._select(pos.row - 1, this._colCount - 1);
+					else this._select(pos.row, Math.max(0, pos.col - 1));
+				} else if (pos.col === this._colCount - 1) {
+					if (pos.row < this._rowCount - 1) this._select(pos.row + 1, 0);
+					else this._select(pos.row, pos.col);
+				} else this._select(pos.row, pos.col + 1);
 				return;
 			}
 			if (e.key === "ArrowUp") {

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

@@ -29,12 +29,19 @@ var baseStyles = css`
        ⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다.
        그래서 폴백이 아니라 :host 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다
        (:host 선언은 상속값을 이기므로 :root 로는 닿지 않는다).
-       ⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다. */
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다.
+       ★**단 하나의 예외 — --dc-font-size 는 --u-density 를 폴백 원본으로 갖는다.**
+       components(UButton/UForm/UButtonGroup)와 flex-table(--ft-font-size)이
+       이미 같은 형태로 이 스위치를 읽는다 — 컨트롤과 표가 «한 벌»로 움직이려면 이
+       스택도 같은 원천을 봐야 한다. **--dc-header-font-size 는 여기 포함되지 않는다** —
+       본문과 머리행이 서로 독립이라는 이 컴포넌트의 기존 계약(아래 회귀 테스트가
+       고정)을 이 변경이 깨지 않는다. --u-density 미설정 시 렌더는 종전과 바이트
+       단위로 동일하다(기본값이 같은 13px). */
     --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-font-size:           var(--u-density, 13px);   /* 본문 셀 · 편집 입력 · 드롭다운 항목 */
+    --dc-header-font-size:    12px;   /* 열 머리 — --u-density 와 무관(독립 계약 유지) */
     --dc-header-font-weight:   600;   /* 〃 */
 
     display: block;

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

@@ -131,6 +131,12 @@ export declare class URichTable extends LitElement {
     private _onSortClick;
     private _onFilterChange;
     private _onCellClick;
+    /**
+     * 「선택」(체크박스)과 별개로 「보고 있는 행」을 앱에 알린다. 셀 단일 클릭은
+     * `editable` 열에서도 편집에 들어가지 않으므로(dblclick만 진입) 항상 안전하게 낼 수 있다.
+     * 키보드 경로(Enter)는 `editable` 열에서 이미 편집 진입 신호이므로 그 경우는 내지 않는다.
+     */
+    private _fireRowActivate;
     private _onCellDblClick;
     private _onEditKeyDown;
     private _onCellEditConfirm;

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

@@ -1,5 +1,5 @@
-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 __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 { messages } from "../../utilities/messages.js";
 import { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
@@ -73,7 +73,7 @@ var URichTable = class URichTable extends LitElement {
 					if (col?.editable) {
 						const value = this.data[this.focusedCell.rowIndex]?.[col.key];
 						this._onCellDblClick(this.focusedCell.rowIndex, this.focusedCell.colIndex, value);
-					}
+					} else this._fireRowActivate(this.focusedCell.rowIndex, "keyboard");
 				}
 				if (e.key === " " && this.selectable) {
 					e.preventDefault();
@@ -178,14 +178,16 @@ var URichTable = class URichTable extends LitElement {
 	render() {
 		return html`
       ${this._renderToolbar()}
-      <table>
-        ${this._renderHeader()}
-        <tbody>
-          ${this.filterable ? this._renderFilterRow() : ""}
-          ${this._renderBody()}
-          ${this.addable ? this._renderNewRow() : ""}
-        </tbody>
-      </table>
+      <div class="table-wrap">
+        <table>
+          ${this._renderHeader()}
+          <tbody>
+            ${this.filterable ? this._renderFilterRow() : ""}
+            ${this._renderBody()}
+            ${this.addable ? this._renderNewRow() : ""}
+          </tbody>
+        </table>
+      </div>
       ${this._renderPagination()}
     `;
 	}
@@ -452,12 +454,13 @@ var URichTable = class URichTable extends LitElement {
 		this._fireSelectionChange();
 	}
 	_onSortClick(field) {
-		if (this.sort?.field === field) if (this.sort.direction === "asc") this.sort = {
-			field,
-			direction: "desc"
-		};
-		else this.sort = null;
-		else this.sort = {
+		if (this.sort?.field === field) {
+			if (this.sort.direction === "asc") this.sort = {
+				field,
+				direction: "desc"
+			};
+			else this.sort = null;
+		} else this.sort = {
 			field,
 			direction: "asc"
 		};
@@ -494,6 +497,25 @@ var URichTable = class URichTable extends LitElement {
 			colIndex: colIdx
 		};
 		this._lastSelectedIndex = rowIdx;
+		this._fireRowActivate(rowIdx, "click");
+	}
+	/**
+	* 「선택」(체크박스)과 별개로 「보고 있는 행」을 앱에 알린다. 셀 단일 클릭은
+	* `editable` 열에서도 편집에 들어가지 않으므로(dblclick만 진입) 항상 안전하게 낼 수 있다.
+	* 키보드 경로(Enter)는 `editable` 열에서 이미 편집 진입 신호이므로 그 경우는 내지 않는다.
+	*/
+	_fireRowActivate(rowIdx, via) {
+		const row = this.data[rowIdx];
+		if (!row) return;
+		this.dispatchEvent(new CustomEvent("row-activate", {
+			detail: {
+				row,
+				id: this._rowId(row, rowIdx),
+				via
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	_onCellDblClick(rowIdx, colIdx, value) {
 		this.editingCell = {

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

@@ -16,16 +16,47 @@ var richTableStyles = css`
     --dc-muted-color: var(--u-txt-color-weak, #757575);   /* 보조 텍스트 · 라벨 */
     --dc-icon-color:  var(--u-txt-color-weak, #757575);   /* 정렬 표시 · 확장 · 행 메뉴 */
     --dc-empty-color: var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
-    display: block;
+    /* ── 소비자 조절점 — 본문 타이포 ──
+       ★USimpleSheet와 같은 이름 --dc-font-size 를 그대로 쓴다 — 이 패키지의 표 컴포넌트가
+       공유하는 관용(위 색 축과 같은 이유: --dc-muted-color 도 세 컴포넌트가 공유한다).
+       components/flex-table/USimpleSheet 이 이미 읽는 --u-density 밀도 스위치를 폴백
+       원본으로 가져, 컨트롤·표·시트·이 그리드가 한 벌로 움직인다.
+       ⚠**모든 font-size 선언이 아니라 이 하나만 연다.** 이 컴포넌트는 시각 위계가
+       13(본문)·12(툴바/보조)·11(필터/페이지네이션)·10(장식적 표시자)px 넉 단으로
+       이미 갈려 있다 — 전부를 하나의 스위치로 묶으면 위계가 무너진다. 여기서 여는 것은
+       **헤더·본문 셀**(:host 상속 경로) + **편집 입력**뿐이다. 편집 입력은 반드시 이
+       토큰을 같이 읽어야 한다 — 따로 두면 편집 진입 순간 글자 크기가 튄다(USimpleSheet
+       가 "본문 셀 · 편집 입력 · 드롭다운 항목"을 한 토큰으로 묶은 것과 같은 이유).
+       나머지 열한 곳(툴바·페이지네이션·필터행·배지·정렬 표시자·검증 오류)은 의도적으로
+       남겨 둔다 — 장식·보조 텍스트라 D-17 이 아이콘/배지 크기를 뺀 것과 같은 경계다. */
+    --dc-font-size: var(--u-density, 13px);
+    /* ── 세로 레이아웃 ──
+       🔴**높이 제약은 데이터 그리드의 기본 사용 형태다** — 「조회 조건 + 결과 목록」이 한 화면에
+       들어가야 하고, 결과가 몇 건이든 조건 영역과 페이지 이동은 항상 같은 자리에 있어야 한다.
+       종전에는 «display: block» 이라 호스트에 높이를 주면 내용이 자연 높이로 넘쳤고,
+       «overflow: hidden» 때문에 **넘친 부분에 도달할 방법이 없었다.** 페이지네이션이 마지막
+       자식이므로 **가장 먼저 사라진다** ⇒ *표는 그려지는데 2페이지로 갈 수 없었다.*
+       ⚠**높이를 주지 않는 사용은 그대로다** — «flex: 1 1 auto» 는 제약이 없으면 내용 높이를
+       따르고 «overflow: auto» 는 넘치지 않으면 스크롤바를 만들지 않는다. */
+    display: flex;
+    flex-direction: column;
     font-family: system-ui, -apple-system, sans-serif;
-    font-size: 13px;
+    font-size: var(--dc-font-size);
     color: var(--u-txt-color, #212121);
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 8px;
     overflow: hidden;
   }
 
+  /* 행 영역만 스크롤한다 — 툴바와 페이지네이션은 자리를 지킨다. */
+  .table-wrap {
+    flex: 1 1 auto;
+    overflow: auto;
+    min-height: 0;   /* ⚠flex 아이템의 기본 min-height:auto 는 «줄어들지 않음»이라 이것이 없으면 넘친다 */
+  }
+
   .toolbar {
+    flex: 0 0 auto;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -79,9 +110,19 @@ var richTableStyles = css`
     background: var(--u-bg-color-raised, #FAFAFA);
     font-weight: 600;
     text-align: left;
-    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     user-select: none;
-    position: relative;
+
+    /* ⚠**아래 경계선을 «border-bottom» 으로 그리지 않는다.** «border-collapse: collapse» 에서
+       셀 테두리는 테이블이 소유하므로 **헤더만 sticky 로 띄우면 함께 따라오지 않는다** —
+       스크롤하는 순간 구분선이 사라지고 행이 헤더 밑으로 비쳐 지나간다. «box-shadow» 는
+       요소가 그리므로 sticky 를 따라온다. */
+    box-shadow: inset 0 -2px 0 var(--u-border-color, #E0E0E0);
+
+    /* 행 영역이 스크롤되는 동안 열 이름은 남는다 — 「어느 열이 무엇인지」가 이 컴포넌트의
+       스크롤 모델에서 잃으면 안 되는 것이다. */
+    position: sticky;
+    top: 0;
+    z-index: 1;
   }
 
   thead th.sortable {
@@ -149,7 +190,8 @@ var richTableStyles = css`
     padding: 4px 6px;
     border: 1px solid var(--u-primary-color, #1976D2);
     border-radius: 3px;
-    font-size: 13px;
+    /* --dc-font-size 를 본문 셀과 공유한다 — 따로 두면 편집 진입 순간 글자가 튄다. */
+    font-size: var(--dc-font-size);
     outline: none;
   }
 
@@ -222,6 +264,7 @@ var richTableStyles = css`
   }
 
   .pagination {
+    flex: 0 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;

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

@@ -66,6 +66,16 @@ export interface RichTableEventMap {
         row: Record<string, unknown>;
         expanded: boolean;
     }>;
+    /**
+     * 사용자가 행을 "열었다" — 셀 클릭 또는 포커스된 행에서의 `Enter`. `selectable` 과 무관하다:
+     * 선택은 "무엇을 처리할까", 활성화는 "무엇을 볼까"이다. `editable` 열에서 `Enter` 는 이미
+     * 셀 편집 진입 신호이므로 그 경우는 내지 않는다(`via: 'keyboard'` 는 비-editable 열에서만 발생).
+     */
+    'row-activate': CustomEvent<{
+        row: Record<string, unknown>;
+        id: string;
+        via: 'click' | 'keyboard';
+    }>;
     'sort-change': CustomEvent<{
         field: string;
         direction: 'asc' | 'desc' | null;

package/dist/react.d.ts

@@ -36,6 +36,11 @@ export declare const URichTableReact: import('@lit/react').ReactWebComponent<URi
         row: Record<string, unknown>;
         expanded: boolean;
     }>>;
+    readonly onRowActivate: EventName<CustomEvent<{
+        row: Record<string, unknown>;
+        id: string;
+        via: "click" | "keyboard";
+    }>>;
     readonly onSortChange: EventName<CustomEvent<{
         field: string;
         direction: "asc" | "desc" | null;

package/dist/react.js

@@ -39,6 +39,7 @@ var URichTableReact = createComponent({
 		onRowUpdate: "row-update",
 		onRowDelete: "row-delete",
 		onRowExpand: "row-expand",
+		onRowActivate: "row-activate",
 		onSortChange: "sort-change",
 		onFilterChange: "filter-change",
 		onPageChange: "page-change",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.13.0",
+  "version": "0.16.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -42,16 +42,20 @@
     "./u-rich-table": "./dist/components/u-rich-table/URichTable.js"
   },
   "sideEffects": [
-    "./src/utilities/shadowDomProtection.ts",
+    "./dist/components/data-view/UDataView.js",
     "./src/components/data-view/UDataView.ts",
+    "./dist/components/simple-sheet/USimpleSheet.js",
     "./src/components/simple-sheet/USimpleSheet.ts",
+    "./dist/components/u-rich-table/URichTable.js",
     "./src/components/u-rich-table/URichTable.ts",
+    "./dist/index.js",
+    "./src/index.ts",
+    "./dist/init.js",
     "./src/init.ts",
+    "./dist/react.js",
+    "./src/react.ts",
     "./dist/utilities/shadowDomProtection.js",
-    "./dist/components/data-view/UDataView.js",
-    "./dist/components/simple-sheet/USimpleSheet.js",
-    "./dist/components/u-rich-table/URichTable.js",
-    "./dist/init.js"
+    "./src/utilities/shadowDomProtection.ts"
   ],
   "scripts": {
     "start": "vite",

package/skills/iyulab-data-components/references/components/rich-table.md

@@ -57,6 +57,24 @@ table.addEventListener('filter-change', e => load({ filters: e.detail.filters })
 `totalCount` is what the pager counts — not `data.length`. Setting `data` alone
 produces a table that believes it holds every matching record.
 
+## Sizing: give the host a height
+
+The component manages its own vertical layout. Constrain the host and the row
+area is what scrolls — the toolbar and the pager keep their positions, and the
+header row stays visible while rows move under it:
+
+```css
+u-rich-table { height: calc(100vh - 280px); }
+```
+
+That is the shape a query screen wants: filters above, the pager always in the
+same place, and column names readable no matter how far down you are.
+
+Leave the height off and the table grows to its content instead — no inner
+scrollbar, the page scrolls. Both are supported; pick per screen. What you
+should **not** do is wrap it in your own `overflow: auto` container, which puts
+the header and toolbar back inside the scrolling region.
+
 ## Selection across pages
 
 Two facts are deliberately separate, because in server paging they differ:
@@ -158,6 +176,7 @@ type SelectionChange = RichTableEventMap['selection-change'];
 | `row-create` | `{ row }` | The add-row control produced a row |
 | `row-delete` | `{ row }` | A row was deleted |
 | `row-expand` | `{ row, expanded }` | A detail row was opened or closed |
+| `row-activate` | `{ row, id, via }` | A row was clicked, or `Enter` was pressed on a focused non-editable cell (`via` is `'click'` or `'keyboard'`). Independent of `selectable` — selection is "what to act on", activation is "what to view" |
 | `paste` | `{ rows }` | TSV was pasted into the grid |
 
 ## ColumnDef
@@ -193,7 +212,7 @@ type SelectionChange = RichTableEventMap['selection-change'];
 | Keys | Action |
 |---|---|
 | Arrow keys | Move the focused cell |
-| `Enter` | Start editing the focused cell / commit and move down |
+| `Enter` | Editable cell: start editing / commit and move down. Non-editable cell: emit `row-activate` |
 | `Escape` | Cancel editing |
 | `Tab` | Commit and move to the next cell |
 | `Space` | Toggle selection of the focused row (when `selectable`) |