@iyulab/modern-app 0.55.0 → 0.55.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.55.1] - 2026-10-17
+
+### Fixed
+
+- `u-master-detail-layout`: in a container with no height of its own (the page scrolls a long list), the detail pane
+  sticks to the top of the scroll container instead of stretching to the list's height with the record at its top —
+  a row picked far down the list showed its detail above the visible area. The pane is capped at the visible height of
+  that container and scrolls inside past it. In overlay mode the covering pane is placed over the visible part of the
+  list the same way (it covered the whole list from its top). With a height from the parent the panes look as before.
+  A `top` set through `::part(detail)` moves the pane below a sticky bar.
+- React: the `u-master-detail-layout` JSX attribute map includes `detail-size`.
+
+- Skill reference `u-master-detail-layout`: the `detailSize` row of the properties table is no longer split by the `|` in its type.
+
 ## [0.55.0] - 2026-10-16
 
 ### Added

package/dist/components/MasterDetailLayout.d.ts

@@ -67,6 +67,9 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
      */
     private readonly internals;
     private resizeObserver?;
+    /** 상세 칸이 붙는 스크롤 영역 — 없으면(문서가 스크롤한다) 뷰포트. */
+    private scroller;
+    private detailFrame;
     connectedCallback(): void;
     /**
      * 오버레이 판정 한 곳. **두 입력이 있고 둘 다 바뀔 수 있다** — 자기 폭과
@@ -83,6 +86,13 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
      */
     private applyOverlay;
     disconnectedCallback(): void;
+    /**
+     * 상세 칸의 높이 상한 — min(그릇 높이, 스크롤 영역 높이 − 칸의 top). 칸은 스크롤 영역 위에
+     * 붙으므로(sticky) 그 영역의 보이는 높이가 칸이 보일 수 있는 전부다. 그릇 높이가 그보다 낮으면
+     * 그릇 안에 머문다.
+     * 다음 프레임에 쓴다 — 크기 관찰 콜백 안에서 크기를 바꾸면 관찰 루프 경고가 난다.
+     */
+    private scheduleDetailMax;
     protected updated(changed: PropertyValues): void;
     /**
      * 오버레이 모드의 닫기 버튼이 눌렸을 때. detail 내용을 지우는 것은 소비자 몫이라

package/dist/components/MasterDetailLayout.js

@@ -11,7 +11,14 @@ import "@iyulab/components/dist/components/button/UButton.js";
 //#region src/components/MasterDetailLayout.ts
 var u = class extends n {
 	constructor(...e) {
-		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.hasPlaceholder = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
+		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.hasPlaceholder = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.scroller = null, this.detailFrame = 0, this.scheduleDetailMax = () => {
+			cancelAnimationFrame(this.detailFrame), this.detailFrame = requestAnimationFrame(() => {
+				let e = this.shadowRoot?.querySelector(".detail");
+				if (!e || !this.isConnected) return;
+				let t = this.scroller ? this.scroller.clientHeight : document.documentElement.clientHeight, n = parseFloat(getComputedStyle(e).top) || 0, r = Math.max(0, Math.min(this.getBoundingClientRect().height, t - n));
+				this.style.setProperty("--_detail-max", `${r}px`);
+			});
+		}, this.handleDetailClose = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
 			this.hasDetail = r(e.target);
@@ -24,17 +31,18 @@ var u = class extends n {
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.resizeObserver = new ResizeObserver((e) => {
-			this.applyOverlay(e[0]?.contentRect.width ?? 0);
-		}), this.resizeObserver.observe(this);
+			for (let t of e) t.target === this && this.applyOverlay(t.contentRect.width);
+			this.scheduleDetailMax();
+		}), this.resizeObserver.observe(this), this.scroller = d(this), this.scroller ? this.resizeObserver.observe(this.scroller) : window.addEventListener("resize", this.scheduleDetailMax);
 	}
 	applyOverlay(e) {
 		e !== 0 && this.toggleAttribute("overlay", e < this.overlayBreakpoint);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.resizeObserver?.disconnect();
+		super.disconnectedCallback(), this.resizeObserver?.disconnect(), window.removeEventListener("resize", this.scheduleDetailMax), cancelAnimationFrame(this.detailFrame), this.scroller = null;
 	}
 	updated(e) {
-		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("detailSize") && (this.detailSize ? this.style.setProperty("--_detail-size", this.detailSize) : this.style.removeProperty("--_detail-size")), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("detailSize") && (this.detailSize ? this.style.setProperty("--_detail-size", this.detailSize) : this.style.removeProperty("--_detail-size")), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), (e.has("hasDetail") || e.has("hasPlaceholder")) && this.scheduleDetailMax(), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
 	}
 	render() {
 		let e = this.hasDetail ? "" : this.hasPlaceholder ? "placeholder" : "empty";
@@ -65,5 +73,13 @@ t([c({
 	type: Number,
 	attribute: "overlay-breakpoint"
 }), e("design:type", Object)], u.prototype, "overlayBreakpoint", void 0), t([c({ type: String }), e("design:type", Object)], u.prototype, "locale", void 0), t([l(), e("design:type", Object)], u.prototype, "hasDetail", void 0), t([l(), e("design:type", Object)], u.prototype, "hasPlaceholder", void 0), u = t([s("u-master-detail-layout")], u);
+function d(e) {
+	let t = e;
+	for (;;) {
+		let e = t;
+		if (t = e instanceof Element && e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode, !(t instanceof Element) || t === document.documentElement || t === document.body) return null;
+		if (/(auto|scroll|hidden|overlay)/.test(getComputedStyle(t).overflowY)) return t;
+	}
+}
 //#endregion
 export { u as MasterDetailLayout };

package/dist/components/MasterDetailLayout.styles.js

@@ -51,10 +51,27 @@ var t = e`
     display: none;
   }
 
+  
+
+
+
+
+
+
+
+
+
+
+
   .detail {
     flex: 1 1 auto;
     min-width: 0;
-    position: relative;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    min-height: min(100%, var(--_detail-max, 100%));
+    max-height: var(--_detail-max, none);
+    box-sizing: border-box;
     overflow: auto;
   }
   .detail.empty {
@@ -63,9 +80,14 @@ var t = e`
 
   
 
+
+
   :host([overlay]) .detail {
-    position: absolute;
-    inset: 0;
+    flex: 0 0 100%;
+    margin-left: -100%;
+    height: var(--_detail-max, 100%);
+    min-height: 0;
+    max-height: none;
     z-index: 1;
     background-color: var(--u-panel-bg-color, #FFFFFF);
     box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
@@ -124,9 +146,17 @@ var t = e`
       display: none;
     }
     :host([overlay]) .detail {
-      position: static;
+      margin-left: 0;
+      height: auto;
       box-shadow: none;
     }
+    
+    .detail {
+      position: static;
+      align-self: stretch;
+      min-height: 0;
+      max-height: none;
+    }
   }
 `;
 //#endregion

package/dist/react.d.ts

@@ -107,6 +107,7 @@ declare module 'react' {
             };
             'u-master-detail-layout': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
                 'master-size'?: string;
+                'detail-size'?: string;
                 'overlay-breakpoint'?: number | string;
                 locale?: string;
             };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.55.0",
+  "version": "0.55.1",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/references/components/master-detail-layout.md

@@ -69,6 +69,20 @@ constrained.
 .page { height: 100%; }   /* or any constrained height on the parent */
 ```
 
+A long list usually does the opposite on purpose — the page scrolls, and the layout is as tall as
+the list. The detail pane is built for that too: it sticks to the top of the scroll container it
+sits in, so a record picked far down the list is shown beside it, in view. Its height is capped at
+what that container shows (a longer record scrolls inside the pane), and below it there is nothing
+but the list. In overlay mode the covering pane takes the visible height of that container the
+same way, rather than the whole list's height.
+
+With a height from the parent the pane fills it, as before. If a sticky bar sits at the top of the
+scroll container, move the pane below it:
+
+```css
+u-master-detail-layout::part(detail) { top: 3rem; }  /* the cap leaves room for the offset */
+```
+
 ## Printing
 
 On print media the panes follow what was on screen. Side by side, both panes print and grow
@@ -98,7 +112,7 @@ own margin; that is inherent to printing two columns.
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `masterSize` | `string` | `'22rem'` | | Fixed width of the master pane, a CSS length (`master-size`) |
-| `detailSize` | `string | undefined` | `undefined` | ✓ | Fixed width of the detail pane (`detail-size`) — the master then fills the rest and `masterSize` is not used |
+| `detailSize` | `string \| undefined` | `undefined` | ✓ | Fixed width of the detail pane (`detail-size`) — the master then fills the rest and `masterSize` is not used |
 | `overlayBreakpoint` | `number` | `760` | | Below this self width in px, detail becomes a full overlay (`overlay-breakpoint`) |
 | `locale` | `string` | `''` | | Language tag for the close button's accessible label |