@iyulab/modern-app 0.37.2 → 0.39.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [0.39.0] - 2026-10-06
+
+### Fixed
+
+- **`u-sidebar-layout` marks the current menu on arrival.** It learned the current route only from `route-begin`, so
+  when the layout is rendered by a route (a React shell as a nested route's parent), the first navigation's event
+  had passed before the layout connected: after typing an address or reloading, no link was `selected` and none
+  had `aria-current`, until the user navigated once. It now starts from the current location (`currentRoutePath()`
+  from `@iyulab/router` 0.20).
+- **Sidebar group icons follow `--app-sidebar-icon-size`**, like links. They used a fixed 20px, so a theme setting
+  the token (16px in `@iyulab/house-style`) drew two icon sizes in one rail.
+
+### Added
+
+- **`--app-sidebar-group-active-fg`** — text of a group header whose group holds the active menu. It sits on the
+  panel, but its default is derived from the active *background* (85% + black), which works for a dark active
+  background and leaves a light one (`--hs-brand-soft`) with near-invisible text (about 1.6:1). A theme with a
+  light active background sets this to its ink color. Unset, nothing changes.
+
+### Changed
+
+- Requires `@iyulab/router` `^0.20.0`.
+
+## [0.38.0] - 2026-10-06
+
+### Added
+
+- **`u-info-field` `tone="warning"`** — "needs attention, not wrong" (a deadline coming up, a rate under target
+  but within limits). Paints the value and the trend with `--u-warning-color-strong`, like `positive`/`negative`
+  use the success/danger tokens. It is never inferred from `trend`, so existing fields are unchanged.
+- **`auth.renderUnavailable({ root, error, retry })`** on the boot auth gate — drawn when `me()` throws, that is,
+  when the session could not be checked (server down, offline). The gate no longer has only "signed in" or
+  "show the login screen": `me()` should throw rather than return `null` when it got no answer, and `retry()`
+  checks again. Without `renderUnavailable`, `app.load()` rejects with the error as before.
+
+### Documentation
+
+- The auth gate examples follow the three-state session lookup of `@iyulab/enterprise` 0.25
+  (`fetchMe()` returns `{ status }`): the README example used to pass the lookup straight through, which with
+  0.25 would treat every answer as signed in.
+
 ## [0.37.2] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -182,8 +182,13 @@ const auth = createAuthClient<User, Cred>({ meUrl: '/api/auth/me', loginUrl: '/a
 await app.load({
   layout: { type: 'sidebar', /* ... */ },
   auth: {
-    me: () => auth.fetchMe(),                         // null → 미인증 → renderLogin
+    me: async () => {
+      const s = await auth.fetchMe();
+      if (s.status === 'unknown') throw s.error;      // 모름(서버 다운·오프라인) → renderUnavailable
+      return s.status === 'authenticated' ? s.user : null; // null → 미인증 → renderLogin
+    },
     renderLogin: ({ root, onSuccess }) => renderLoginPage(root, auth, onSuccess),
+    renderUnavailable: ({ root, retry }) => renderOfflinePage(root, retry),
     onAuthenticated: (user) => setPermissions((user as User).Permissions),
   },
   routes: [ /* ... */ ],
@@ -193,6 +198,7 @@ app.user; // 인증된 현재 사용자(미인증/미사용 시 undefined)
 ```
 
 - `me()` 가 값을 반환하면 셸 로드, `null`/`undefined` 면 `renderLogin({ root, onSuccess })`.
+- `me()` 가 **던지면** 세션을 «모름» 으로 보고 로그인 UI 를 그리지 않는다 — `renderUnavailable({ root, error, retry })` 를 그리고, 없으면 `app.load()` 가 그 오류로 실패한다. 서버가 잠깐 503 을 낸 것을 «미인증» 으로 돌려주면 로그인된 사용자가 로그인 화면으로 간다.
 - 로그인 성공 시 `onSuccess()` 를 호출하면 앱이 재로드되어 셸이 나타나고 로그인 UI 는 정리된다.
 - `auth` 미지정 시 완전히 하위호환(게이트 없이 기존대로 로드).
 

package/dist/App.d.ts

@@ -13,7 +13,7 @@ declare class App {
     private _router?;
     private _screen?;
     private _user?;
-    private _loginTeardown?;
+    private _gateTeardown?;
     private constructor();
     /** 싱글톤 인스턴스 반환 */
     static get instance(): App;

package/dist/App.js

@@ -46,18 +46,30 @@ var l = class o {
 			await t.init(a.i18n);
 		}
 		if (a.auth) {
-			let e = await a.auth.me();
-			if (e == null) {
-				let e = a.root || document.body, t = a.auth.renderLogin({
+			let e = a.root || document.body, t = () => {
+				this.load(a);
+			}, n;
+			try {
+				n = await a.auth.me();
+			} catch (n) {
+				if (!a.auth.renderUnavailable) throw n;
+				let r = a.auth.renderUnavailable({
 					root: e,
-					onSuccess: () => {
-						this.load(a);
-					}
+					error: n,
+					retry: t
 				});
-				t && (this._loginTeardown = t);
+				r && (this._gateTeardown = r);
 				return;
 			}
-			this._user = e, await a.auth.onAuthenticated?.(e);
+			if (n == null) {
+				let n = a.auth.renderLogin({
+					root: e,
+					onSuccess: t
+				});
+				n && (this._gateTeardown = n);
+				return;
+			}
+			this._user = n, await a.auth.onAuthenticated?.(n);
 		}
 		let o = a.root || document.body;
 		this._layout = await this.createLayout(o, a.layout), this._screen = new e({
@@ -77,7 +89,7 @@ var l = class o {
 		});
 	}
 	unload() {
-		this._loginTeardown &&= (this._loginTeardown(), void 0), this._user = void 0, this._screen &&= (this._screen.destroy(), void 0), this._layout &&= (this._layout.remove(), void 0), this._router &&= (this._router.destroy(), void 0), this._config &&= void 0;
+		this._gateTeardown &&= (this._gateTeardown(), void 0), this._user = void 0, this._screen &&= (this._screen.destroy(), void 0), this._layout &&= (this._layout.remove(), void 0), this._router &&= (this._router.destroy(), void 0), this._config &&= void 0;
 	}
 	navigate(e) {
 		this._router?.go(e);

package/dist/components/InfoField.d.ts

@@ -3,7 +3,7 @@ type ElementParts = 'host' | 'label' | 'value' | 'unit' | 'trend';
 export type InfoFieldFormat = 'number' | 'currency' | 'date';
 export type InfoFieldSize = 'default' | 'lg';
 export type InfoFieldTrend = 'up' | 'down' | 'flat';
-export type InfoFieldTone = 'positive' | 'negative' | 'neutral';
+export type InfoFieldTone = 'positive' | 'negative' | 'warning' | 'neutral';
 /** 값이 "아직 없음"인가 — `0` 과 `false` 는 **값이다**. */
 export declare function isBlank(v: unknown): boolean;
 /**
@@ -89,8 +89,11 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * direction-to-sentiment mapping (e.g. a falling "open tickets" count is `positive`).
      *
      * Colors the value text itself, independent of `trend` — a static "balance due" figure can be
-     * toned `negative` without a trend arrow. `neutral` has no visual effect on the value text
-     * (it already renders at full strength; only `positive`/`negative` stand out from it).
+     * toned `negative` without a trend arrow. `warning` is for "needs attention, not wrong" (a
+     * deadline coming up, a rate under target but within limits) and is never inferred from `trend`.
+     * `neutral` has no visual effect on the value text (it already renders at full strength; only
+     * `positive`/`negative`/`warning` stand out from it). Colors come from the theme's
+     * `--u-success|danger|warning-color-strong`.
      */
     tone?: InfoFieldTone;
     private get hasSlotted();

package/dist/components/InfoField.styles.js

@@ -73,6 +73,10 @@ var t = e`
     color: var(--u-danger-color-strong, #C62828);
   }
 
+  .value.tone-warning {
+    color: var(--u-warning-color-strong, #8A4A00);
+  }
+
   .trend {
     font-size: var(--u-text-caption-size, 12px);
     margin-top: var(--u-space-3xs, 2px);
@@ -86,6 +90,10 @@ var t = e`
     color: var(--u-danger-color-strong, #C62828);
   }
 
+  .trend.tone-warning {
+    color: var(--u-warning-color-strong, #8A4A00);
+  }
+
   .trend.tone-neutral {
     color: var(--u-txt-color-weak, #616161);
   }

package/dist/components/SidebarGroup.styles.js

@@ -34,8 +34,10 @@ var t = e`
   }
   button[selected] {
     /* 패널 위 텍스트라 강조색을 그대로 쓰면 대비가 부족하다(blue-600 = 3.68:1).
-       활성 배경과 같은 파생식으로 한 단 어둡게 해 AA 를 넘긴다(4.85:1). */
-    color: color-mix(in srgb, var(--group-accent) 85%, black);
+       기본은 활성 배경과 같은 파생식으로 한 단 어둡게 해 AA 를 넘긴다(4.85:1) — 활성 면이 «진한» 색이라는 전제다.
+       연한 활성 면(+ 진한 글자)을 쓰는 테마에서는 그 면을 15% 어둡게 한 색이 패널 위에서 1.6:1 로 묻혔다.
+       그런 테마는 --app-sidebar-group-active-fg 를 «패널 위 강조 글자» 로 정한다. */
+    color: var(--app-sidebar-group-active-fg, color-mix(in srgb, var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2)) 85%, black));
   }
   button:hover {
     color: var(--u-txt-color-hover, #1565C0);
@@ -52,7 +54,8 @@ var t = e`
   .icon {
     flex-shrink: 0;
     color: inherit;
-    font-size: 20px;
+    /* 링크와 같은 토큰 — 한 레일의 아이콘은 한 크기다(위계는 들여쓰기·캐럿·레일이 진다). */
+    font-size: var(--app-sidebar-icon-size, 20px);
   }
 
   /*

package/dist/layouts/SidebarLayout.d.ts

@@ -1,6 +1,5 @@
 import { nothing, PropertyValues } from 'lit';
 import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.js';
-import { RouteContext } from '@iyulab/router';
 import { StyledElement } from '../internals/StyledElement.js';
 import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
 export declare class SidebarLayout extends StyledElement<SidebarParts> {
@@ -38,8 +37,12 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
      *   `NotSupportedError`이고, `connectedCallback`은 재연결마다 다시 돈다.
      */
     private readonly internals;
-    /** 현재 라우터 컨텍스트 */
-    context: RouteContext | null;
+    /**
+     * 현재 라우트 경로(`RouteContext.path` 형식) — 메뉴의 «현재 항목» 판정 원천.
+     * 붙을 때 지금 위치로 시작한다: 셸이 라우트 결과물로 그려지면(React 중첩 라우트의 부모) 첫 `route-begin` 은
+     * 셸이 붙기 **전에** 지나가, 주소창 진입·새로 고침 직후 현재 항목이 하나도 없었다.
+     */
+    private currentPath;
     /**
      * 라우트 컨텐츠의 실제 스크롤 컨테이너(섀도 DOM `[part="main"]`). `scrollTop`을 읽어
      * 위치를 저장하거나, 써서 복원한다 — `part="main"`은 스타일링용 CSS 훅일 뿐 JS 접근

package/dist/layouts/SidebarLayout.js

@@ -11,28 +11,29 @@ import "../components/SidebarLink.js";
 import "../components/SidebarGroup.js";
 import "../components/SidebarButton.js";
 import { styles as c } from "./SidebarLayout.styles.js";
-import { html as l, nothing as u } from "lit";
-import { customElement as d, property as f, query as p, state as m } from "lit/decorators.js";
+import { currentRoutePath as l } from "@iyulab/router";
+import { html as u, nothing as d } from "lit";
+import { customElement as f, property as p, query as m, state as h } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
 import "@iyulab/components/dist/components/button/UButton.js";
-import { unsafeHTML as h } from "lit/directives/unsafe-html.js";
-import { repeat as g } from "lit/directives/repeat.js";
+import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
+import { repeat as _ } from "lit/directives/repeat.js";
 import "@iyulab/components/dist/components/popover/UPopover.js";
 import "@iyulab/components/dist/components/menu/UMenu.js";
 import "@iyulab/components/dist/components/menu-item/UMenuItem.js";
-import { createDevWarner as _ } from "@iyulab/components/dist/utilities/devWarning.js";
-import { isFocusCandidate as v, querySelectorDeep as y } from "@iyulab/components/dist/utilities/elements.js";
-import { OverlayManager as b } from "@iyulab/components/dist/utilities/OverlayManager.js";
-import { UProgressBar as x } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
+import { createDevWarner as v } from "@iyulab/components/dist/utilities/devWarning.js";
+import { isFocusCandidate as y, querySelectorDeep as b } from "@iyulab/components/dist/utilities/elements.js";
+import { OverlayManager as x } from "@iyulab/components/dist/utilities/OverlayManager.js";
+import { UProgressBar as S } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
 //#region src/layouts/SidebarLayout.ts
-var S, C = _("@iyulab/modern-app"), w = 0;
-function T(e) {
+var C, w = v("@iyulab/modern-app"), T = 0;
+function E(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 E = /* @__PURE__ */ new Set([
+var D = /* @__PURE__ */ new Set([
 	"button",
 	"link",
 	"checkbox",
@@ -45,27 +46,27 @@ var E = /* @__PURE__ */ new Set([
 	"tab",
 	"treeitem"
 ]);
-function D(e) {
+function O(e) {
 	let t = e.tagName;
-	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : E.has(e.getAttribute("role") ?? "");
+	return t === "BUTTON" || t === "SUMMARY" || t === "A" && e.hasAttribute("href") ? !0 : D.has(e.getAttribute("role") ?? "");
 }
-function O(e) {
+function k(e) {
 	let t = getComputedStyle(e);
 	return (t.overflowY === "auto" || t.overflowY === "scroll") && e.scrollHeight > e.clientHeight;
 }
-function k(e, t) {
+function A(e, t) {
 	for (let n of e) if (n instanceof HTMLElement) {
-		if (O(n)) return n === t;
+		if (k(n)) return n === t;
 		if (n === t) break;
 	}
 	return !0;
 }
-function A() {
+function j() {
 	let e = document.activeElement;
 	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
 	return e;
 }
-function j(e, t) {
+function M(e, t) {
 	let n = t;
 	for (; n;) {
 		if (n === e) return !0;
@@ -73,18 +74,18 @@ function j(e, t) {
 	}
 	return !1;
 }
-var M = class extends i {
+var N = class extends i {
 	static {
-		S = this;
+		C = this;
 	}
 	constructor(...t) {
-		super(...t), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.context = null, this.unsizedWarnKey = `unsized:${++w}`, 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.handleToggleButtonClick = () => {
+		super(...t), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++T}`, this.isMatchedLink = (e) => this.currentPath === null || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.currentPath, window.location.origin)), this.handleToggleButtonClick = () => {
 			let t = this.screenSize ?? e.screen ?? "large";
 			t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
 		}, this.handleBackdropClick = () => {
 			this.state = "slim";
 		}, this.handleRouteBegin = (e) => {
-			this.progressBarEl.setAttribute("visible", ""), this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.context = e.context;
+			this.progressBarEl.setAttribute("visible", ""), this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.currentPath = e.context.path;
 		}, this.handleRouteProgress = (e) => {
 			this.progressBarEl.value = e.progress;
 		}, this.handleRouteDone = (e) => {
@@ -104,7 +105,7 @@ var M = class extends i {
 		}, this.handleOverlaySlotChange = (e) => {
 			let t = o(e.target);
 			if (t && !this.hasOverlay) {
-				let e = A();
+				let e = j();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
@@ -118,9 +119,9 @@ var M = class extends i {
 		}, this._handleMainKeydown = (e) => {
 			if (e.defaultPrevented) return;
 			let t = e.composedPath()[0];
-			if (t instanceof HTMLElement && T(t) || e.key === " " && t instanceof HTMLElement && D(t)) return;
+			if (t instanceof HTMLElement && E(t) || e.key === " " && t instanceof HTMLElement && O(t)) return;
 			let n = this.shadowRoot?.querySelector(".main");
-			if (!n || !k(e.composedPath(), n)) return;
+			if (!n || !A(e.composedPath(), n)) return;
 			let r = n.clientHeight;
 			switch (e.key) {
 				case " ":
@@ -160,16 +161,16 @@ var M = class extends i {
 		return this.shadowRoot?.querySelector(".main") ?? null;
 	}
 	connectedCallback() {
-		super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("route-error", this.handleRouteError), window.addEventListener("screen-resize", this.handleScreenResize);
+		super.connectedCallback(), this.currentPath = l(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("route-error", this.handleRouteError), window.addEventListener("screen-resize", this.handleScreenResize);
 	}
 	disconnectedCallback() {
-		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("route-error", this.handleRouteError), window.removeEventListener("screen-resize", this.handleScreenResize), b.closeLayer(this), super.disconnectedCallback();
+		window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("route-error", this.handleRouteError), window.removeEventListener("screen-resize", this.handleScreenResize), x.closeLayer(this), super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
 	}
 	updated(e) {
-		super.updated(e), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (b.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (b.closeLayer(this), this.restoreOverlayFocus()));
+		super.updated(e), e.has("hasOverlay") && (this.internals?.states?.[this.hasOverlay ? "add" : "delete"]("overlay"), this.hasOverlay ? (x.openLayer(this, this.handleOverlayEscape), this.focusOverlay()) : e.get("hasOverlay") === !0 && (x.closeLayer(this), this.restoreOverlayFocus()));
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.warnIfUnsized();
@@ -178,11 +179,11 @@ var M = class extends i {
 		process.env.NODE_ENV !== "production" && requestAnimationFrame(() => {
 			if (!this.isConnected) return;
 			let e = this.getBoundingClientRect().height;
-			e >= 200 || C(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).`);
+			e >= 200 || w(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 ? l`
+		return this.config ? u`
       <!-- 반복 영역 건너뛰기(WCAG 2.4.1) — 셸의 첫 Tab. 포커스될 때만 보인다. -->
       <a class="skip-link" part="skip-link" href="#" @click=${this.handleSkipLinkClick}>
         ${a(this.locale || void 0).skipToContent}
@@ -224,13 +225,13 @@ var M = class extends i {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
-          aria-label=${this.config.mainAriaLabel ?? u}>
-          ${g(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          aria-label=${this.config.mainAriaLabel ?? d}>
+          ${_(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${g(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${_(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -241,8 +242,8 @@ var M = class extends i {
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
             <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices"
-              role=${this.config.noticesAriaLabel ? "region" : u}
-              aria-label=${this.config.noticesAriaLabel ?? u}>
+              role=${this.config.noticesAriaLabel ? "region" : d}
+              aria-label=${this.config.noticesAriaLabel ?? d}>
               <slot name="notice" @slotchange=${this.handleNoticeSlotChange}></slot>
             </div>
             <slot></slot>
@@ -263,13 +264,13 @@ var M = class extends i {
       <div class="backdrop" ?hidden="${this.state !== "modal"}"
         @click="${this.handleBackdropClick}"
       ></div>
-    ` : u;
+    ` : d;
 	}
 	renderMenu(e) {
 		let t = this.menuIds.get(e);
-		t || (t = `u-sidebar-menu-${++S.menuSeq}`, this.menuIds.set(e, t));
+		t || (t = `u-sidebar-menu-${++C.menuSeq}`, this.menuIds.set(e, t));
 		let n = t, r = this.state === "mobile" || this.state === "mobile-open" ? "bottom-start" : "right-start";
-		return l`
+		return u`
       <u-sidebar-button
         id=${n}
         haspopup="menu"
@@ -286,9 +287,9 @@ var M = class extends i {
         @hide=${(e) => this.handleMenuHide(e, n)}
         @pick=${(t) => this.handleMenuPick(t, e)}>
         <u-menu>
-          ${g(e.items, (e, t) => t, (e, t) => l`
+          ${_(e.items, (e, t) => t, (e, t) => u`
             <u-menu-item value=${String(t)} ?disabled=${e.disabled === !0}>
-              ${e.icon ? l`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : u}
+              ${e.icon ? u`<u-icon slot="prefix" .lib=${e.lib} .name=${e.icon}></u-icon>` : d}
               ${e.label}
             </u-menu-item>
           `)}
@@ -302,16 +303,16 @@ var M = class extends i {
 	}
 	handleMenuHide(e, t) {
 		this.openMenu === t && (this.openMenu = null);
-		let n = e.currentTarget, r = A();
-		r && j(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
+		let n = e.currentTarget, r = j();
+		r && M(n, r) && this.shadowRoot?.querySelector(`#${t}`)?.focus();
 	}
 	renderItem(e) {
-		if (!e) return u;
+		if (!e) return d;
 		if (e.type === "html") {
 			let t = e.render(this.state);
-			return typeof t == "string" ? h(t) : l`${t}`;
+			return typeof t == "string" ? g(t) : u`${t}`;
 		}
-		if (e.type === "button") return l`
+		if (e.type === "button") return u`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -324,7 +325,7 @@ var M = class extends i {
 		if (e.type === "menu") return this.renderMenu(e);
 		if (e.type === "link") {
 			let t = this.isMatchedLink(e.pattern || e.href);
-			return l`
+			return u`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -340,18 +341,18 @@ var M = class extends i {
         ></u-sidebar-link>
       `;
 		}
-		if (e.type === "section") return l`
+		if (e.type === "section") return u`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
           .mainTitle="${e.title}"
           .subTitle="${e.subTitle}"
           .styles="${e.styles}">
-          ${g(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-section>
       `;
 		if (e.type === "group") {
 			let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
-			return l`
+			return u`
         <u-sidebar-group
           ?compact=${this.state === "slim"}
           ?selected=${t}
@@ -360,11 +361,11 @@ var M = class extends i {
           .lib="${e.lib}"
           .label="${e.label}"
           .styles="${e.styles}">
-          ${g(e.items, (e, t) => t, (e) => this.renderItem(e))}
+          ${_(e.items, (e, t) => t, (e) => this.renderItem(e))}
         </u-sidebar-group>
       `;
 		}
-		return u;
+		return d;
 	}
 	static {
 		this.DEFAULT_ICONS = {
@@ -376,30 +377,30 @@ var M = class extends i {
 		};
 	}
 	icon(e) {
-		return this.config?.icons?.[e] ?? S.DEFAULT_ICONS[e];
+		return this.config?.icons?.[e] ?? C.DEFAULT_ICONS[e];
 	}
 	renderLogo() {
 		let e = this.config?.logo, t = this.config?.title ?? "Home";
-		if (!e || typeof e == "string") return e ? l`
+		if (!e || typeof e == "string") return e ? u`
         <u-link class="logo-link" aria-label=${t}>
           <u-icon class="logo"
             .name="${e}"
             .fallback=${s}
           ></u-icon>
         </u-link>
-      ` : u;
+      ` : d;
 		if (typeof e == "function") {
 			let n = e(this.state);
-			return l`
+			return u`
         <u-link class="logo-link" aria-label=${t}>
           <span class="logo">
-            ${typeof n == "string" ? h(n) : n}
+            ${typeof n == "string" ? g(n) : n}
           </span>
         </u-link>
       `;
 		}
-		return l`
-      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? u : t}>
+		return u`
+      <u-link class="logo-link" .href=${e.href} aria-label=${e.alt ? d : t}>
         <img class="logo"
           src="${e.src}"
           alt="${e.alt ?? ""}"
@@ -413,14 +414,14 @@ var M = class extends i {
 	async focusRoute(e) {
 		let t = this.routeContent();
 		if (await Promise.all(t.map((e) => e.updateComplete)), this.hasOverlay || !e.isConnected) return;
-		let n = A();
-		n && t.some((e) => j(e, n)) || this.focusContentStart(t, e);
+		let n = j();
+		n && t.some((e) => M(e, n)) || this.focusContentStart(t, e);
 	}
 	focusContentStart(e, t) {
-		let n = y(e, "[autofocus]", v);
+		let n = b(e, "[autofocus]", y);
 		n?.focus();
-		let r = A();
-		n && r && j(n, r) || t.focus({ preventScroll: !0 });
+		let r = j();
+		n && r && M(n, r) || t.focus({ preventScroll: !0 });
 	}
 	overlayPanels() {
 		return (this.shadowRoot?.querySelector("slot[name=\"overlay\"]"))?.assignedElements({ flatten: !0 }) ?? [];
@@ -428,19 +429,19 @@ var M = class extends i {
 	async focusOverlay() {
 		let e = this.overlayPanels();
 		if (await Promise.all(e.map((e) => e.updateComplete)), !this.hasOverlay) return;
-		let t = A();
-		t && e.some((e) => j(e, t)) || (y(e, "[autofocus]", v) ?? y(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", v) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
+		let t = j();
+		t && e.some((e) => M(e, t)) || (b(e, "[autofocus]", y) ?? b(e, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", y) ?? this.shadowRoot?.querySelector(".overlay-close"))?.focus();
 	}
 	restoreOverlayFocus() {
 		let e = this.overlayTrigger;
 		this.overlayTrigger = null;
-		let t = A();
+		let t = j();
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
-r([f({
+r([p({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], M.prototype, "state", void 0), r([f({ type: Object }), n("design:type", Object)], M.prototype, "config", void 0), r([f({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), r([f({ type: String }), n("design:type", Object)], M.prototype, "locale", void 0), r([p("u-progress-bar"), n("design:type", x === void 0 ? Object : x)], M.prototype, "progressBarEl", void 0), r([m(), n("design:type", Object)], M.prototype, "hasOverlay", void 0), r([m(), n("design:type", Object)], M.prototype, "openMenu", void 0), r([m(), n("design:type", Object)], M.prototype, "hasNotice", void 0), r([m(), n("design:type", Object)], M.prototype, "context", void 0), M = S = r([d("u-sidebar-layout")], M);
+}), n("design:type", Object)], N.prototype, "state", void 0), r([p({ type: Object }), n("design:type", Object)], N.prototype, "config", void 0), r([p({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], N.prototype, "counts", void 0), r([p({ type: String }), n("design:type", Object)], N.prototype, "locale", void 0), r([m("u-progress-bar"), n("design:type", S === void 0 ? Object : S)], N.prototype, "progressBarEl", void 0), r([h(), n("design:type", Object)], N.prototype, "hasOverlay", void 0), r([h(), n("design:type", Object)], N.prototype, "openMenu", void 0), r([h(), n("design:type", Object)], N.prototype, "hasNotice", void 0), r([h(), n("design:type", Object)], N.prototype, "currentPath", void 0), N = C = r([f("u-sidebar-layout")], N);
 //#endregion
-export { M as SidebarLayout };
+export { N as SidebarLayout };

package/dist/types/AppConfigs.d.ts

@@ -102,15 +102,21 @@ export interface AppConfig {
     i18n?: I18nInitOptions;
     /**
      * 부팅 인증 게이트(선택). 지정하면 앱 셸을 만들기 전에 `me()` 로 세션을 판정하여
-     * 인증 시 셸 로드, 미인증 시 `renderLogin` 으로 로그인 UI 를 띄운다.
+     * 인증 시 셸 로드, 미인증 시 `renderLogin` 으로 로그인 UI 를 띄운다. `me()` 가 던지면(세션 모름)
+     * `renderUnavailable` 을 그린다.
      * @see AuthGateConfig
      * @example
      * ```typescript
      * app.load({
      *   layout: { type: 'sidebar', ... },
      *   auth: {
-     *     me: () => authClient.fetchMe(),                 // null → 미인증
+     *     me: async () => {                               // @iyulab/enterprise createAuthClient
+     *       const s = await authClient.fetchMe();
+     *       if (s.status === 'unknown') throw s.error;    // 모름 — 로그인이 아니라 renderUnavailable
+     *       return s.status === 'authenticated' ? s.user : null; // null → 미인증
+     *     },
      *     renderLogin: ({ root, onSuccess }) => renderLoginPage(root, onSuccess),
+     *     renderUnavailable: ({ root, retry }) => renderOfflinePage(root, retry),
      *     onAuthenticated: (user) => setPermissions((user as User).Permissions),
      *   },
      *   routes: [ ... ],

package/dist/types/AuthConfig.d.ts

@@ -4,7 +4,9 @@
  * `app.load({ auth })` 에 넘기면, 앱 셸(레이아웃·라우터)을 만들기 전에 세션을 판정한다:
  * `me()` 가 값을 반환하면 인증된 것으로 보고 셸을 로드하고, `null`/`undefined` 면
  * 미인증으로 보고 `renderLogin` 으로 로그인 UI 를 띄운다. 로그인 성공 시 `onSuccess()` 를
- * 호출하면 앱이 (재)로드되어 셸이 나타난다.
+ * 호출하면 앱이 (재)로드되어 셸이 나타난다. `me()` 가 **던지면** 세션을 «모름»(서버 다운·오프라인)
+ * 으로 보고 로그인 UI 를 그리지 않는다 — `renderUnavailable` 이 있으면 그것을, 없으면 `load` 가 그
+ * 오류로 실패한다.
  *
  * 프레임워크는 인증의 **오케스트레이션**(판정 → 분기 → 재로드)만 소유한다. 세션 조회/로그인
  * 자체(HTTP)와 사용자·권한 형태, 세션-중 401 처리는 앱/`@iyulab/enterprise` 가 소유한다.
@@ -15,9 +17,19 @@ export interface AuthGateContext {
     /** 로그인 성공 시 호출한다. 앱이 (재)로드되어 셸을 띄운다(이때 `me()` 는 사용자를 반환해야 한다). */
     onSuccess: () => void;
 }
+/** `renderUnavailable` 이 받는 맥락 — 세션을 확인하지 못했을 때. */
+export interface AuthGateUnavailableContext {
+    /** 안내 UI 를 그릴 루트 요소(= `app.load` 의 `root`, 기본 `document.body`). */
+    root: Element;
+    /** `me()` 가 던진 값. */
+    error: unknown;
+    /** 다시 확인한다 — 앱이 (재)로드되어 `me()` 를 다시 부른다(재시도 버튼·`online` 이벤트에서). */
+    retry: () => void;
+}
 export interface AuthGateConfig {
     /**
-     * 현재 세션 조회. 값을 반환하면 인증, `null`/`undefined` 면 미인증으로 본다.
+     * 현재 세션 조회. 값을 반환하면 인증, `null`/`undefined` 면 미인증으로 본다. **세션을 확인하지
+     * 못했으면 던진다**(서버 다운·오프라인) — 그것을 `null` 로 돌려주면 로그인된 사용자가 로그인 화면으로 간다.
      * 동기/비동기 모두 허용한다.
      */
     me: () => Promise<unknown | null | undefined> | unknown | null | undefined;
@@ -26,6 +38,11 @@ export interface AuthGateConfig {
      * 정리 함수를 반환하면 앱 로드/`unload` 시 호출되어 로그인 UI 를 제거한다.
      */
     renderLogin: (context: AuthGateContext) => (() => void) | void;
+    /**
+     * `me()` 가 던졌을 때(세션 모름) `context.root` 에 안내 UI 를 그린다(선택). `context.retry()` 로 다시
+     * 확인한다. 정리 함수를 반환하면 앱 로드/`unload` 시 호출된다. 없으면 `load` 가 `me()` 의 오류로 실패한다.
+     */
+    renderUnavailable?: (context: AuthGateUnavailableContext) => (() => void) | void;
     /**
      * 인증 성공 후, 앱 셸을 만들기 직전에 호출된다(선택).
      * 사용자별 라우트/메뉴 필터 등 셸 구성 전 처리를 여기서 한다.

package/package.json

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

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

@@ -228,7 +228,11 @@ The framework owns only the orchestration (check → branch → reload) — sess
 
 ```typescript
 interface AuthGateConfig {
-  /** Resolve the current session. Return a value for authenticated, `null`/`undefined` for not. */
+  /**
+   * Resolve the current session. Return a value for authenticated, `null`/`undefined` for not.
+   * **Throw when the session could not be checked** (server down, offline) — returning `null`
+   * there would send a signed-in user to the login screen.
+   */
   me: () => Promise<unknown | null | undefined> | unknown | null | undefined;
 
   /**
@@ -237,6 +241,14 @@ interface AuthGateConfig {
    */
   renderLogin: (context: AuthGateContext) => (() => void) | void;
 
+  /**
+   * Renders a "can't reach the server" view into `context.root` when `me()` throws. Call
+   * `context.retry()` to check again (a retry button, the `online` event). Return a cleanup
+   * function to have it called on app load/`unload`. Without it, `app.load()` rejects with
+   * `me()`'s error.
+   */
+  renderUnavailable?: (context: AuthGateUnavailableContext) => (() => void) | void;
+
   /** Called once authenticated, right before the app shell is built. */
   onAuthenticated?: (user: unknown) => void | Promise<void>;
 }
@@ -247,6 +259,15 @@ interface AuthGateContext {
   /** Call on successful login — the app (re)loads and the shell appears. */
   onSuccess: () => void;
 }
+
+interface AuthGateUnavailableContext {
+  /** Root element to render into (same as `AppConfig.root`, default `document.body`). */
+  root: Element;
+  /** What `me()` threw. */
+  error: unknown;
+  /** Check again — the app (re)loads and calls `me()` again. */
+  retry: () => void;
+}
 ```
 
 ---

package/skills/modern-app/references/components/info-field.md

@@ -40,7 +40,7 @@ and those are different states of the business. So the component owns the rule.
 | `size` | `'default'\|'lg'` | `'default'` | ✓ | `'lg'` renders the value at the `title` type-scale step — for dashboard KPI tiles composed inside `u-info-section` |
 | `trend` | `'up'\|'down'\|'flat'` | — | | Trend direction; renders a trend indicator when set, alongside `trendLabel`; pair with trendLabel for an accessible name — trend alone conveys direction by color only |
 | `trendLabel` | `string` | — | | Trend copy, e.g. `"+12% vs last month"` — wording is the consumer's responsibility |
-| `tone` | `'positive'\|'negative'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference. Colors the value text itself, independent of `trend` — a static figure (e.g. a balance due) can be toned `negative` with no trend arrow |
+| `tone` | `'positive'\|'negative'\|'warning'\|'neutral'` | — | | Explicit tone override; resolves from `trend` when unset (`up→positive`, `down→negative`, `flat`/unset→`neutral`) but always wins over inference. Colors the value text itself, independent of `trend` — a static figure (e.g. a balance due) can be toned `negative` with no trend arrow. `warning` means "needs attention, not wrong" (a deadline coming up, a rate under target but within limits) and is never inferred |
 
 ⚠ `numeric` no longer right-aligns (it did before 0.25.0). A field is a label/value pair that owns
 one grid cell, with no neighbouring figures to line up, so right-aligning only pushed the value
@@ -73,8 +73,8 @@ stay level:
   blank="No downtime recorded for the failures"></u-info-field>
 ```
 
-`tone` colors a blank value too, so a reason that needs attention takes `tone="negative"`. Set it
-conditionally (`tone=${mttr == null ? 'negative' : undefined}`) — otherwise the value is toned
+`tone` colors a blank value too, so a reason that needs attention takes `tone="warning"`. Set it
+conditionally (`tone=${mttr == null ? 'warning' : undefined}`) — otherwise the value is toned
 as well once it exists.
 
 ## CSS Parts
@@ -99,3 +99,4 @@ as well once it exists.
 | `--u-text-label-size` | Unit size |
 | `--u-success-color-strong` | `tone="positive"` color (value and trend) |
 | `--u-danger-color-strong` | `tone="negative"` color (value and trend) |
+| `--u-warning-color-strong` | `tone="warning"` color (value and trend) |