@iyulab/modern-app 0.37.2 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [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/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.38.0",
   "keywords": [
     "iyulab",
     "web-framework",

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) |