@iyulab/modern-app 0.19.0 → 0.19.2

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [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
+
+- **Development-mode warning when the sidebar shell has no sized ancestor.** `u-sidebar-layout`
+  fills its parent with `height: 100%`; when a custom root has no height the shell sits at its own
+  chrome height (about 133px) and the route area is a few lines tall, with no error. It now says so
+  once (`[@iyulab/modern-app]`, development builds only) and points at the fix
+  (`#app { height: 100vh }` — `app.load()` already does this for `document.body`).
+
+### Changed
+
+- **`@iyulab/router` range is now `^0.12.0`** (was `^0.11.0`, which a 0.x caret does not extend
+  to 0.12). Router 0.12.0 adds `RouteConfig.key`, so a route rendered through `app.load()` can now
+  keep its content across query-string-only navigations by declaring `key: ctx => ctx.pathname`.
+  Nothing in this package's own behaviour changes.
+
 ## [0.19.0] - 2026-09-10
 
 ### Changed

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

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

package/dist/layouts/SidebarLayout.js

@@ -16,17 +16,20 @@ 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) {
+g("@iyulab/modern-app");
+var v = 0;
+function y(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 b = 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:${++v}`, 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 +52,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 && y(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
 			if (!n) return;
 			let r = n.clientHeight;
@@ -96,6 +99,10 @@ var v = class extends i {
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.warnIfUnsized();
+	}
+	warnIfUnsized() {}
 	render() {
 		return this.config ? s`
       <!-- Mobile Header -->
@@ -245,6 +252,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)], b.prototype, "state", void 0), r([u({ type: Object }), n("design:type", Object)], b.prototype, "config", void 0), r([u({ type: String }), n("design:type", Object)], b.prototype, "locale", void 0), r([d("u-progress-bar"), n("design:type", _ === void 0 ? Object : _)], b.prototype, "progressBarEl", void 0), r([f(), n("design:type", Object)], b.prototype, "context", void 0), b = r([l("u-sidebar-layout")], b);
 //#endregion
-export { v as SidebarLayout };
+export { b 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.0",
+  "version": "0.19.2",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -60,12 +60,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/router": "^0.11.0",
+    "@iyulab/router": "^0.12.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.27.0",
+    "@iyulab/components": ">=1.40.2",
     "@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;