@iyulab/data-components 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## [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/dist/_virtual/{_@oxc-project_runtime@0.142.0 → _@oxc-project_runtime@0.143.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.143.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.143.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.143.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.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.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.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.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/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.143.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.143.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,7 +16,16 @@ 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;
+    /* ── 세로 레이아웃 ──
+       🔴**높이 제약은 데이터 그리드의 기본 사용 형태다** — 「조회 조건 + 결과 목록」이 한 화면에
+       들어가야 하고, 결과가 몇 건이든 조건 영역과 페이지 이동은 항상 같은 자리에 있어야 한다.
+       종전에는 «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;
     color: var(--u-txt-color, #212121);
@@ -25,7 +34,15 @@ var richTableStyles = css`
     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 +96,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 {
@@ -222,6 +249,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.14.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`) |