@iyulab/modern-app 0.20.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.20.1] - 2026-09-17
+
+### Fixed
+
+- **`u-master-detail-layout` no longer adds a trailing blank page when a single pane is printed.**
+  The layout is a flex row with scrolling panes, and both keep the bottom margin of a pane's last
+  block inside the layout, so the layout grew by that margin; content ending just short of a page
+  boundary then spilled onto a page holding only the margin. When a single pane is showing
+  (overlay mode, or no detail) the layout now prints as block flow, which lets the margin collapse
+  past it and be truncated at the page break. Side-by-side printing is unchanged: two columns are
+  flex items and each keeps its own margin.
+
+### Added
+
+- `u-master-detail-layout` exposes a `:state(detail)` custom state while its `detail` slot has
+  content.
+
+### Changed
+
+- Requires `@iyulab/router` `^0.15.1`, which prints the route outlet as a block box. The shell's
+  guarantee that a screen's trailing margin collapses out of the page in print depends on it.
+
 ## [0.20.0] - 2026-09-16
 
 ### Added

package/dist/components/MasterDetailLayout.d.ts

@@ -32,6 +32,9 @@ type ElementParts = 'host' | 'master' | 'divider' | 'detail' | 'detail-close';
  *   `PageHeader`/`GroupBox`/`ActionBar` 의 고정 중단점 관행을 벗어나려는 것이 아니다.
  *
  * 오버라이드: `part`(host·master·divider·detail·detail-close) + slot 치환.
+ *
+ * detail 슬롯이 채워져 있는 동안 `:state(detail)` 커스텀 상태를 노출한다
+ * (`ElementInternals.states`) — 속성으로 반사하지 않는다(`u-select:state(open)` 과 같은 관례).
  */
 export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
@@ -50,6 +53,13 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     locale: string;
     /** detail 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */
     private hasDetail;
+    /**
+     * `:state(detail)` 을 싣는 자리. 인쇄 규칙이 «한 판만 보이는가» 를 호스트에서 갈라야 해서
+     * 생겼다(styles 의 인쇄 절 참조).
+     * ⚠생성자에서 한 번만 붙인다 — `attachInternals()` 는 같은 인스턴스에 두 번 부르면
+     *   `NotSupportedError` 이고, `connectedCallback` 은 재연결마다 다시 돈다.
+     */
+    private readonly internals;
     private resizeObserver?;
     connectedCallback(): void;
     /**

package/dist/components/MasterDetailLayout.js

@@ -11,7 +11,7 @@ import "@iyulab/components/dist/components/icon/UIcon.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.handleDetailClose = () => {
+		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
 			this.hasDetail = i(e.target);
@@ -32,7 +32,7 @@ var u = class extends n {
 		super.disconnectedCallback(), this.resizeObserver?.disconnect();
 	}
 	updated(e) {
-		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("hasDetail") && this.internals?.states?.[this.hasDetail ? "add" : "delete"]("detail"), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
 	}
 	render() {
 		return o`

package/dist/components/MasterDetailLayout.styles.js

@@ -74,8 +74,33 @@ var t = e`
    * 되돌려 전부 인쇄한다 — 덮여 있던 master 는 찍지 않는다. detail 이 비어 있으면 master 가
    * 화면 그대로 인쇄된다(covered 는 detail 이 채워졌을 때만 붙는다).
    * 나란히 배치 모드는 바꾸지 않는다 — 두 판이 부모 높이를 따라 풀린다.
+   *
+   * 🔴**한 판만 보일 때는 flex 뼈대를 걷는다**(오버레이 모드 · detail 없음). flex 호스트와
+   *   overflow: auto 판은 둘 다 독립 서식 문맥이라, 화면 마지막 블록의 아래 여백이 레이아웃
+   *   «안» 에 갇혀 그만큼 높이가 는다 — 내용 끝이 쪽 경계에서 그 여백 이내에 있으면 여백만 담긴
+   *   빈 꼬리 쪽이 찍힌다(router 아웃렛의 인쇄 수정과 같은 기전). 한 판뿐이면 flex 가 인쇄에서
+   *   할 일이 없으므로 블록 흐름으로 돌려 여백이 문서 끝까지 접히게 한다(쪽 경계에서 잘린다).
+   * ⚠**나란히 배치(detail 있음 · 오버레이 아님)는 원리적으로 가둔다** — 두 열은 flex 항목이고
+   *   flex 항목은 항상 독립 서식 문맥이다. 화면에 보인 두 열을 그대로 찍는 것이 계약이다.
+   * ⚠:state() 를 모르는 엔진에서는 그 선택자만 무효가 되도록 **규칙을 나눴다** — 선택자 목록에
+   *   섞으면 목록 전체가 버려져 오버레이 규칙까지 사라진다.
    */
   @media print {
+    :host([overlay]) {
+      display: block;
+      height: auto;
+    }
+    :host(:not(:state(detail))) {
+      display: block;
+      height: auto;
+    }
+    :host([overlay]) .master,
+    :host([overlay]) .detail {
+      overflow: visible;
+    }
+    :host(:not(:state(detail))) .master {
+      overflow: visible;
+    }
     .detail-close,
     :host([overlay]) .detail-close,
     :host([overlay]) .master.covered {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -59,7 +59,7 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json"
   },
   "dependencies": {
-    "@iyulab/router": "^0.15.0",
+    "@iyulab/router": "^0.15.1",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },

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

@@ -59,6 +59,14 @@ In overlay mode, a filled detail prints in full, in flow, instead of the covered
 close button is not printed; with the detail empty, the master prints. The overlay state is the
 one measured on screen when printing starts.
 
+When a single pane is showing (overlay mode, or no detail), the layout prints as ordinary block
+flow rather than a flex row with scrolling panes. Both of those create an independent formatting
+context, which would keep the bottom margin of the pane's last block inside the layout and make
+the layout that much taller — enough, when content ends just short of a page boundary, to print
+a trailing page holding nothing but the margin. In block flow the margin collapses past the layout
+and is truncated at the page break. Side by side, the two panes are flex items and each keeps its
+own margin; that is inherent to printing two columns.
+
 ## Slots
 
 | Name | Description |
@@ -80,6 +88,16 @@ one measured on screen when printing starts.
 |-------|--------|------------|--------------|
 | `detail-close` | — | No | Overlay-mode close button clicked. Clear the `detail` slot's content in response — the component does not do this for you |
 
+## Custom States
+
+| State | Description |
+|-------|-------------|
+| `:state(detail)` | Present while the `detail` slot has content |
+
+```css
+u-master-detail-layout:state(detail)::part(master) { border-inline-end: 0; }
+```
+
 ## CSS Parts
 
 | Part | Description |