@iyulab/modern-app 0.19.1 → 0.19.3

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [0.19.3] - 2026-09-13
+
+### Fixed
+
+- **The "shell has no sized ancestor" dev-mode warning was a complete no-op** — its own guard used
+  `import.meta.env.DEV`, which Vite resolves statically at this package's own build time, so the
+  published dist always shipped with the check baked to `false` and the warning removed entirely
+  by dead-code elimination. Replaced with `process.env.NODE_ENV !== 'production'`. The
+  `@iyulab/components` peer floor moves to `>=1.40.3`, which fixes the identical defect in the
+  shared `createDevWarner` helper this warning calls into — installing 0.19.3 without that
+  components fix would still produce no warning.
+
+## [0.19.2] - 2026-09-13
+
+### Changed
+
+- **The development-mode "shell has no sized ancestor" warning now goes through
+  `@iyulab/components`' shared `createDevWarner`** instead of an inline copy — same message, same
+  `[@iyulab/modern-app]` prefix, once per layout, compiled out of production builds. The
+  `@iyulab/components` peer floor moves to `>=1.40.2`, the version that exports the helper.
+- **Docs: `RouteConfig` snippets now show `key` instead of the removed `force`** (`docs/routing.md`,
+  `docs/configuration.md`, the skill's `api.md`) — they were still describing the option
+  `@iyulab/router` deprecated in 0.12.0 and removed in 0.13.0, and did not yet mention its
+  replacement.
+
 ## [0.19.1] - 2026-09-13
 
 ### Added

package/dist/components/SidebarLink.styles.js

@@ -56,7 +56,7 @@ var t = e`
   }
 
   /*
-   * ★내비 항목은 «대상의 짧은 이름» = label 단이다(용도 배정 — DL-157-4).
+   * ★내비 항목은 «대상의 짧은 이름» = label 단이다(용도 배정).
    * ⚠행 높이는 바뀌지 않는다: 13 x 1.5 = 19.5px < 아이콘 20px 이라 행을 잡는 것은
    *   여전히 아이콘이다. 접힌 사이드바(아이콘만)와 펼친 사이드바의 행 높이가 같아야 한다.
    */

package/dist/components/SidebarSection.styles.js

@@ -20,7 +20,7 @@ var t = e`
      WCAG AA(4.5:1)에 미달한다. 현행 두 값은 6.19:1 · 4.61:1 로 통과한다.
      ⇒ 역할 층에 AA 를 넘는 보조 텍스트 단이 생기면 그때 옮긴다. */
   /*
-   * ★크기·굵기·자간은 스케일의 단으로 옮겼다(용도 배정 — DL-157-4). 위 주석은 **색**에
+   * ★크기·굵기·자간은 스케일의 단으로 옮겼다(용도 배정). 위 주석은 **색**에
    *   대한 것이고 그대로 유효하다: 두 색은 여전히 팔레트를 직접 읽는다.
    * ⚠ overline 에 대문자 변환을 붙이지 않는다 — 이 줄에 ellipsis 가 있어 잘림이 늘고,
    *   섹션 이름은 소비자가 쓴 글자다(CJK 에는 효과도 없다).

package/dist/layouts/SidebarLayout.d.ts

@@ -26,11 +26,13 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     protected willUpdate(changedProperties: PropertyValues): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     /**
-     * 개발 모드 사용 안내(HD-61 ⒝): 이 셸은 `:host { height: 100% }` 로 부모를 채우는데, 부모(커스텀
+     * 개발 모드 사용 안내: 이 셸은 `:host { height: 100% }` 로 부모를 채우는데, 부모(커스텀
      * root)에 높이가 없으면 걸릴 곳이 없어 자기 크롬 높이(실측 약 133px)로 앉는다 — 오류도 경고도 없이
      * 라우트 콘텐츠 영역이 몇 줄짜리 띠가 된다. 첫 배치 뒤 한 번 재서 알린다.
      * 임계값은 규칙이라 손으로 쓴다 — 앱 셸이 200px 보다 낮은 것이 의도인 경우는 없다.
+     * 경고 자체는 components 의 공유 규약(네임스페이스 · DEV 한정 · 키당 한 번)을 쓴다.
      */
+    private readonly unsizedWarnKey;
     private warnIfUnsized;
     render(): typeof nothing | import('lit-html').TemplateResult<1>;
     /** 사이드바 아이템 렌더링 */

package/dist/layouts/SidebarLayout.js

@@ -16,17 +16,19 @@ import "@iyulab/components/dist/components/icon/UIcon.js";
 import { unsafeHTML as p } from "lit/directives/unsafe-html.js";
 import { repeat as m } from "lit/directives/repeat.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
-import { UProgressBar as g } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import { createDevWarner as g } from "@iyulab/components/dist/utilities/devWarning.js";
+import { UProgressBar as _ } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-function _(e) {
+var v = g("@iyulab/modern-app"), y = 0;
+function b(e) {
 	let t = e.tagName;
 	if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
 	let n = e.getAttribute("role");
 	return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
 }
-var v = class extends i {
+var x = class extends i {
 	constructor(...t) {
-		super(...t), this.state = "default", this.locale = "", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = (t) => () => {
+		super(...t), this.state = "default", this.locale = "", this.context = null, this.unsizedWarnKey = `unsized:${++y}`, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = (t) => () => {
 			e.navigate(t ?? "");
 		}, this.handleToggleButtonClick = () => {
 			let t = e.screen ?? "large";
@@ -49,7 +51,7 @@ var v = class extends i {
 			}, 300);
 		}, this._handleMainKeydown = (e) => {
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && _(t)) return;
+			if (t instanceof HTMLElement && b(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
 			if (!n) return;
 			let r = n.clientHeight;
@@ -99,7 +101,13 @@ var v = class extends i {
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
 	}
-	warnIfUnsized() {}
+	warnIfUnsized() {
+		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
+			if (!this.isConnected) return;
+			let e = this.getBoundingClientRect().height;
+			e >= 200 || v(this.unsizedWarnKey, `u-sidebar-layout is only ${Math.round(e)}px tall — its height: 100% found no sized ancestor, so the shell sits at its own chrome height and the route area has almost no room. Give the root element a height (e.g. #app { height: 100vh } — app.load() does this for document.body).`);
+		});
+	}
 	render() {
 		return this.config ? s`
       <!-- Mobile Header -->
@@ -249,6 +257,6 @@ var v = class extends i {
 r([u({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], v.prototype, "state", void 0), r([u({ type: Object }), n("design:type", Object)], v.prototype, "config", void 0), r([u({ type: String }), n("design:type", Object)], v.prototype, "locale", void 0), r([d("u-progress-bar"), n("design:type", g === void 0 ? Object : g)], v.prototype, "progressBarEl", void 0), r([f(), n("design:type", Object)], v.prototype, "context", void 0), v = r([l("u-sidebar-layout")], v);
+}), n("design:type", Object)], x.prototype, "state", void 0), r([u({ type: Object }), n("design:type", Object)], x.prototype, "config", void 0), r([u({ type: String }), n("design:type", Object)], x.prototype, "locale", void 0), r([d("u-progress-bar"), n("design:type", _ === void 0 ? Object : _)], x.prototype, "progressBarEl", void 0), r([f(), n("design:type", Object)], x.prototype, "context", void 0), x = r([l("u-sidebar-layout")], x);
 //#endregion
-export { v as SidebarLayout };
+export { x as SidebarLayout };

package/dist/layouts/SidebarLayout.styles.js

@@ -30,7 +30,7 @@ var t = e`
   }
 
   /*
-   * ★단 배정은 «관측값 근사»가 아니라 «용도»로 한다(DL-157-4) — 이 자리는 앱의 제목이다.
+   * ★단 배정은 «관측값 근사»가 아니라 «용도»로 한다 — 이 자리는 앱의 제목이다.
    *   종전 18px 은 스케일에 없는 값이었고, 같은 판정을 이미 u-dialog·u-drawer 제목에
    *   내린 적이 있다(L2-3, 18px → subtitle).
    * ⚠줄 박스는 바뀌지 않는다: 16 x 1.5 = 24px = 종전 line-height. 헤더 높이 불변.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -65,7 +65,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.27.0",
+    "@iyulab/components": ">=1.40.3",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },

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

@@ -105,8 +105,8 @@ interface RouteConfig {
   /** Sets `document.title` when the route activates. */
   title?: string;
 
-  /** Force a re-render even if the path did not change. */
-  force?: boolean;
+  /** When to remount — content is kept while `key(ctx)` is unchanged. Default `ctx => ctx.href` (leaf) / constant (has `children`). */
+  key?: (ctx: RouteContext) => string;
 
   /** Case-insensitive path matching. Defaults to `false`. */
   ignoreCase?: boolean;