@iyulab/modern-app 0.19.5 → 0.19.6

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.19.6] - 2026-09-15
+
+### Fixed
+
+- **Printing an `app.load()` screen printed the sidebar and cut the page off after one sheet.** The
+  shell is a viewport-height box whose `main` area scrolls, and `app.load()` pinned `document.body`
+  to `100vh` with inline styles — on paper the sidebar took a third of the width and anything below
+  the first page's height was lost. `u-sidebar-layout` now has print rules: the sidebar, mobile
+  header, modal backdrop and progress bar are hidden, the host is no longer a fixed-height box, and
+  `main` stops scrolling and drops its screen padding (page margins come from `@page`), so content
+  flows across pages. A part can be brought back on paper with
+  `@media print { u-sidebar-layout::part(sidebar) { display: flex; } }`.
+- **A narrow `u-master-detail-layout` printed its overlay detail cut off at the master's height**,
+  with the close button on the page. In overlay mode the detail is an absolutely positioned box
+  over the master; on print it now returns to the flow and prints in full, instead of the covered
+  master and without the close button. An empty detail still prints the master.
+- **`document.body` sizing from `app.load()` could only be overridden with `!important`.** It is now
+  a document stylesheet instead of inline styles — `margin: 0` always, `width: 100vw; height: 100vh`
+  on screen only — at zero specificity, so any `body { … }` rule of your own takes precedence. The
+  sheet is adopted (`document.adoptedStyleSheets`), so it is not blocked by a CSP that disallows
+  inline styles.
+
 ## [0.19.5] - 2026-09-15
 
 ### Fixed

package/dist/App.js

@@ -4,7 +4,20 @@ import { Router as n } from "@iyulab/router";
 import { setDefaultBaseUrl as r } from "@iyulab/components/dist/utilities/icons.js";
 import { Theme as i } from "@iyulab/components/dist/utilities/Theme.js";
 import { Toast as a } from "@iyulab/components/dist/utilities/Toast.js";
-var o = class o {
+//#region src/App.ts
+var o = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", s;
+function c() {
+	if (!s) {
+		if ("adoptedStyleSheets" in document && typeof CSSStyleSheet < "u" && typeof CSSStyleSheet.prototype.replaceSync == "function") {
+			let e = new CSSStyleSheet();
+			e.replaceSync(o), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], s = e;
+		} else {
+			let e = document.createElement("style");
+			e.textContent = o, document.head.prepend(e), s = e;
+		}
+	}
+}
+var l = class o {
 	constructor() {}
 	static get instance() {
 		return o._instance ||= new o(), o._instance;
@@ -84,7 +97,7 @@ var o = class o {
 		await a.error(e, { ...t });
 	}
 	async createLayout(e, t) {
-		e === document.body && (document.body.style.margin = "0", document.body.style.width = "100vw", document.body.style.height = "100vh");
+		e === document.body && c();
 		let n;
 		if (t.type === "sidebar") {
 			let { SidebarLayout: e } = await import("./layouts/SidebarLayout.js"), r = new e();
@@ -94,4 +107,4 @@ var o = class o {
 	}
 }.instance;
 //#endregion
-export { o as app };
+export { l as app };

package/dist/components/MasterDetailLayout.js

@@ -36,7 +36,7 @@ var u = class extends n {
 	}
 	render() {
 		return o`
-      <div class="master" part="master"><slot></slot></div>
+      <div class="master ${this.hasDetail ? "covered" : ""}" part="master"><slot></slot></div>
       <div class="divider ${this.hasDetail ? "" : "empty"}" part="divider"></div>
       <div class="detail ${this.hasDetail ? "" : "empty"}" part="detail">
         <u-button class="detail-close" part="detail-close" variant="ghost"

package/dist/components/MasterDetailLayout.styles.js

@@ -67,6 +67,25 @@ var t = e`
   :host([overlay]) .detail-close {
     display: inline-flex;
   }
+
+  /*
+   * 인쇄 — 오버레이 모드의 detail 은 host 전체를 덮는 절대배치 상자라, 높이가 master 내용에
+   * 묶이고(그 밖은 잘린다) 닫기 버튼까지 종이에 찍힌다. 화면에 보이는 것(detail)을 흐름에
+   * 되돌려 전부 인쇄한다 — 덮여 있던 master 는 찍지 않는다. detail 이 비어 있으면 master 가
+   * 화면 그대로 인쇄된다(covered 는 detail 이 채워졌을 때만 붙는다).
+   * 나란히 배치 모드는 바꾸지 않는다 — 두 판이 부모 높이를 따라 풀린다.
+   */
+  @media print {
+    .detail-close,
+    :host([overlay]) .detail-close,
+    :host([overlay]) .master.covered {
+      display: none;
+    }
+    :host([overlay]) .detail {
+      position: static;
+      box-shadow: none;
+    }
+  }
 `;
 //#endregion
 export { t as styles };

package/dist/layouts/SidebarLayout.styles.js

@@ -221,6 +221,32 @@ var t = e`
     bottom: 0;
     background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.5));
   }
+
+  /*
+   * 인쇄 — 화면의 «뷰포트를 채우는 고정 상자 + 스크롤하는 본문» 모델을 풀어 준다.
+   * 그대로 두면 사이드바가 종이에 찍히고, 본문이 스크롤 컨테이너라 첫 쪽 높이 밖이 잘린다.
+   * ★!important 를 쓰지 않는다 — 섀도 안의 important 선언은 바깥 ::part 의 important 보다 이겨
+   *   소비자가 인쇄물에 크롬을 되살릴 길(::part(sidebar) 재정의)을 막는다. 대가로 config.styles 의
+   *   인라인 스타일은 이 규칙보다 앞선다(그 자리에 높이·overflow 를 적는 소비자는 드물다).
+   * ⚠본문 패딩도 푼다 — 종이의 여백은 @page 가 준다. 화면 여백이 그 위에 겹치면 폭을 잃는다.
+   */
+  @media print {
+    :host {
+      display: block;
+      height: auto;
+      overflow: visible;
+    }
+    .sidebar,
+    .mobile-header,
+    .backdrop,
+    .main u-progress-bar {
+      display: none;
+    }
+    .main {
+      padding: 0;
+      overflow: visible;
+    }
+  }
 `;
 //#endregion
 export { t as styles };

package/package.json

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

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

@@ -51,6 +51,14 @@ constrained.
 .page { height: 100%; }   /* or any constrained height on the parent */
 ```
 
+## Printing
+
+On print media the panes follow what was on screen. Side by side, both panes print and grow
+with their content once the page shell releases its height (`u-sidebar-layout` does on print).
+In overlay mode, a filled detail prints in full, in flow, instead of the covered master, and the
+close button is not printed; with the detail empty, the master prints. The overlay state is the
+one measured on screen when printing starts.
+
 ## Slots
 
 | Name | Description |

package/skills/modern-app/references/layout.md

@@ -265,17 +265,39 @@ Parts available for `styles` overrides on the root layout:
 
 `<u-sidebar-layout>` is a shell: `:host` is `height: 100%` with `overflow: hidden`, so **its
 height comes from the parent** — it never sizes itself. `app.load()` covers the default case: when
-`root` is `document.body` it sets `margin: 0; width: 100vw; height: 100vh` on the body for you.
+`root` is `document.body` it gives the body `margin: 0`, and on screen `width: 100vw; height: 100vh`.
+These come from a document stylesheet at zero specificity, not inline styles — any `body { … }`
+rule of your own wins.
 
 ⚠ **A custom `root` receives no styling.** Hand it a container with no height of its own and
 `height: 100%` has nothing to resolve against: the shell renders at whatever its own chrome
 resolves to (measured: about 133px) instead of filling the screen — with no error and nothing in
-the console. Give that container a height:
+the console. Give that container a height — for screen only, so printing is not cut at one page:
 
 ```css
-#app { height: 100vh; }   /* or 100%, inside an already-constrained ancestor */
+@media screen {
+  #app { height: 100vh; }   /* or 100%, inside an already-constrained ancestor */
+}
 ```
 
+## Printing
+
+On print media the shell drops its app chrome and lets the content flow across pages: the
+`sidebar`, `mobile-header`, modal backdrop and `progress` bar are hidden, the host is no longer a
+fixed-height box, and `main` stops being a scroll container and loses its screen padding (page
+margins come from `@page`). Nothing to configure.
+
+To keep a piece of chrome on paper, restore it through its part:
+
+```css
+@media print {
+  u-sidebar-layout::part(sidebar) { display: flex; }
+}
+```
+
+⚠ Heights or `overflow` set through `layout.styles` are inline styles and still apply when
+printing — scope such values to the screen in your own CSS instead.
+
 ## Responsive behaviour
 
 | Screen width | Sidebar state |