@iyulab/modern-app 0.18.19 → 0.19.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## [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
+
+- **Fallback literals for `--u-txt-color-weak` follow `@iyulab/components` 1.40.0.** They are
+  only used when that stylesheet is not loaded; with it, nothing changes here.
+
+### Fixed
+
+- **`u-master-detail-layout` ignored a change to `overlayBreakpoint` until the element
+  happened to resize.** The overlay decision has two inputs — the component's own width
+  and the breakpoint — but it was only ever evaluated inside the `ResizeObserver`
+  callback, so setting the prop at runtime left the `overlay` attribute on its previous
+  verdict. Setting it once before first render always worked, which is why the gap went
+  unnoticed. It is now re-evaluated whenever either input changes.
+
+### Changed
+
+- **`@iyulab/components` moved from `dependencies` to `peerDependencies`.** It owns
+  process-global state — the custom element registry and module-level singletons — so a
+  duplicate copy in the install tree splits that state with no error: the notification layer
+  stops seeing overlays that a different copy registered, which is exactly the failure the
+  1.39.0 toast fix addresses. Consumers already installing `@iyulab/components` are unaffected;
+  the declaration now says that this package uses the copy they installed.
+
 ## [0.18.19] - 2026-09-04
 
 ### Added

package/dist/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateMetadata.js
 function e(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }

package/dist/components/ActionBar.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./ActionBar.styles.js";

package/dist/components/EmptyState.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/EmptyState.styles.js

@@ -7,7 +7,7 @@ var t = e`
     align-items: center;
     text-align: center;
     padding: var(--u-space-4xl, 40px) var(--u-space-xl, 20px);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
 
   .icon {

package/dist/components/GroupBox.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { slotHasContent as r } from "../internals/slotted.js";
 import { styles as i } from "./GroupBox.styles.js";

package/dist/components/InfoField.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";

package/dist/components/InfoField.styles.js

@@ -10,7 +10,7 @@ var t = e`
     font-size: var(--u-text-caption-size, 12px);
     font-weight: var(--u-text-caption-weight, 400);
     line-height: var(--u-text-caption-leading, 1.5);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     margin-bottom: var(--u-space-3xs, 2px);
   }
 
@@ -37,7 +37,7 @@ var t = e`
      ⚠더 흐리게 만들고 싶은 유혹이 있는데, 이 자리가 안 읽히면 사용자는 빈 칸인지
      로딩 중인지 구별하지 못한다. */
   .value.blank {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     font-weight: var(--u-text-body-weight, 400);
   }
 
@@ -71,7 +71,7 @@ var t = e`
   }
 
   .trend.tone-neutral {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
 `;
 //#endregion

package/dist/components/InfoSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoSection.styles.js";
 import { html as i } from "lit";

package/dist/components/MasterDetailLayout.d.ts

@@ -52,6 +52,20 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
     private hasDetail;
     private resizeObserver?;
     connectedCallback(): void;
+    /**
+     * 오버레이 판정 한 곳. **두 입력이 있고 둘 다 바뀔 수 있다** — 자기 폭과
+     * `overlayBreakpoint`.
+     *
+     * 🔴**종전에는 이 판정이 ResizeObserver 콜백 «안에만» 있었다.** 그래서 `overlayBreakpoint`
+     * 를 런타임에 바꿔도 **폭이 함께 바뀌지 않으면 아무 일도 일어나지 않았다** — prop 은
+     * 새 값을 갖고 있는데 `overlay` 속성은 옛 판정 그대로다. 값에 반응하는 prop 으로
+     * 선언·문서화해 놓고 실제로는 리사이즈에만 반응한 셈이라, 이 리포가 「선언 ≠ 동작」이라
+     * 부르는 부류다.
+     *
+     * @param width 0 이면 아직 레이아웃되지 않은 과도 상태일 수 있다(예: 조상이 `display:none`)
+     *   — 그 순간의 값으로 오버레이를 강제하지 않는다.
+     */
+    private applyOverlay;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/components/MasterDetailLayout.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";
@@ -22,15 +22,17 @@ var u = class extends n {
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.resizeObserver = new ResizeObserver((e) => {
-			let t = e[0]?.contentRect.width ?? 0;
-			t !== 0 && this.toggleAttribute("overlay", t < this.overlayBreakpoint);
+			this.applyOverlay(e[0]?.contentRect.width ?? 0);
 		}), this.resizeObserver.observe(this);
 	}
+	applyOverlay(e) {
+		e !== 0 && this.toggleAttribute("overlay", e < this.overlayBreakpoint);
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.resizeObserver?.disconnect();
 	}
 	updated(e) {
-		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize);
+		super.updated(e), e.has("masterSize") && this.style.setProperty("--_master-size", this.masterSize), e.has("overlayBreakpoint") && this.applyOverlay(this.getBoundingClientRect().width);
 	}
 	render() {
 		return o`

package/dist/components/PageHeader.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { slotHasContent as i } from "../internals/slotted.js";

package/dist/components/PageHeader.styles.js

@@ -37,7 +37,7 @@ var t = e`
     font-size: var(--u-text-caption-size, 12px);
     font-weight: var(--u-text-caption-weight, 400);
     line-height: var(--u-text-caption-leading, 1.5);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
 
   .back {

package/dist/components/SidebarButton.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarButton.styles.js";

package/dist/components/SidebarGroup.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { SidebarLink as i } from "./SidebarLink.js";

package/dist/components/SidebarLink.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { DEFAULT_NAV_ICON as r } from "../internals/nav-icon.js";
 import { styles as i } from "./SidebarLink.styles.js";

package/dist/components/SidebarSection.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./SidebarSection.styles.js";
 import { html as i } from "lit";

package/dist/components/Wizard.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as n } from "../internals/StyledElement.js";
 import { getLocaleStrings as r } from "../internals/locale.js";
 import { styles as i } from "./Wizard.styles.js";

package/dist/components/Wizard.styles.js

@@ -40,7 +40,7 @@ var t = e`
     border: none;
     padding: var(--u-space-2xs, 4px) 0;
     font: inherit;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     cursor: pointer;
     text-align: left;
   }

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import e from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import e from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { property as n } from "lit/decorators.js";
 import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
 //#region src/internals/StyledElement.ts

package/dist/layouts/SidebarLayout.d.ts

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

package/dist/layouts/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { app as e } from "../App.js";
 import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import r from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { StyledElement as i } from "../internals/StyledElement.js";
 import { getLocaleStrings as a } from "../internals/locale.js";
 import "../components/SidebarSection.js";
@@ -96,6 +96,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 -->

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.18.19",
+  "version": "0.19.1",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -60,12 +60,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.27.0",
-    "@iyulab/router": "^0.11.0",
+    "@iyulab/router": "^0.12.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
+    "@iyulab/components": ">=1.27.0",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },
@@ -86,7 +86,7 @@
     "happy-dom": "^20.10.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10"

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

@@ -269,5 +269,5 @@ interface AuthGateContext {
 | `router` | `Router \| undefined` | Underlying `@iyulab/router` instance |
 | `screen` | `ScreenSize \| undefined` | Current responsive screen size |
 | `user` | `unknown` | Authenticated user when the `auth` boot gate is used; `undefined` if unauthenticated or unused |
-| `theme` | `Theme` (static) | Theme utility (`get`, `set`, `isInitialized`) |
+| `theme` | `Theme` (static) | Theme utility — `get()`, `set()`, `resolved()`, `accent()`, `isInitialized`. Branch on `resolved()` (always `'light'` or `'dark'`), not `get()`, which can be `'system'` |
 | `i18n` | `i18next` | Raw i18next instance |

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

@@ -35,6 +35,22 @@ each pane. CSS container-query conditions cannot read a runtime custom property,
 configurable breakpoint means measuring the host's own width in JavaScript and reflecting an
 `overlay` attribute — same self-width philosophy, different mechanism, for a fixed reason.
 
+## Sizing
+
+This is a shell, not a sized box: `:host` is `height: 100%`, so **the parent decides its height**.
+Inside a page shell that is already constrained (an `app.load()` layout, a grid or flex row with a
+height) there is nothing to do.
+
+Put it in a container with no height of its own and `height: 100%` has nothing to resolve against,
+so the panes fall back to their content's height rather than the available space. That renders
+fine — it simply is not the full-height split pane you asked for, and the independent per-pane
+scrolling (`overflow: auto` on `master` and `detail`) only means something once the height is
+constrained.
+
+```css
+.page { height: 100%; }   /* or any constrained height on the parent */
+```
+
 ## Slots
 
 | Name | Description |

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

@@ -228,13 +228,19 @@ for `for="#id"` anchoring to resolve (see the `id` note above).
 }
 ```
 
-⚠**Pick `placement` based on `state`, not a fixed value.** On `mobile`/`mobile-open`, the sidebar
-itself widens to occupy nearly the full screen — a sideways placement (`right-start`, the natural
-choice for a desktop flyout) then has no room on either side, and `flip()` correctly declines to
-flip when the opposite side has none either. The popover renders off-screen and is invisible. A
-vertical placement (`bottom-start`) has room regardless of sidebar width and works at every state.
-Confirmed empirically in `tests/browser/sidebar-popover-submenu.browser.test.ts` — this is not a
-`strategy="absolute"` vs `"fixed"` distinction, switching strategy does not change the outcome.
+**A fixed `placement` is safe as of `@iyulab/components@1.37.1`.** On `mobile`/`mobile-open`
+the sidebar widens to occupy nearly the full screen, so a sideways placement (`right-start`,
+the natural desktop flyout) has room on neither side. `flip()` now falls back **across the**
+**axis** in exactly that case, landing the popover vertically instead of off-screen.
+
+⚠ Against an older `components` it did render off-screen and invisible — `flip()` only ever
+considered the opposite side on the same axis, found no room there either, and gave up. If you
+pin below `1.37.1`, keep choosing `placement` from `state` as the snippet above does.
+
+Choosing from `state` is still reasonable when you want to *decide* the direction rather than
+let `flip()` pick it. Either way this is not a `strategy="absolute"` vs `"fixed"` distinction —
+switching strategy changes nothing. Both behaviours are pinned in
+`tests/browser/sidebar-popover-submenu.browser.test.ts`.
 
 ---
 
@@ -255,6 +261,21 @@ Parts available for `styles` overrides on the root layout:
 
 ---
 
+## Sizing
+
+`<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.
+
+⚠ **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:
+
+```css
+#app { height: 100vh; }   /* or 100%, inside an already-constrained ancestor */
+```
+
 ## Responsive behaviour
 
 | Screen width | Sidebar state |