@iyulab/modern-app 0.37.1 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # 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
+
+- **`TimelineItem` has a React wrapper** — `@iyulab/modern-app/react/TimelineItem.js` (and the barrel).
+  The entry lived in the same module as `u-timeline`, and the wrappers are generated one element per
+  module, so only `Timeline` was wrapped. `u-timeline-item` now has its own module; importing
+  `Timeline` still registers both.
+- `u-timeline` exposes a `list` part (the column the entries stack in), and the reference page's
+  parts table lists what the elements actually expose.
+
 ## [0.37.1] - 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/Timeline.d.ts

@@ -1,8 +1,5 @@
 import { StyledElement } from '../internals/StyledElement.js';
-type TimelineParts = 'host';
-type TimelineItemParts = 'host' | 'rail' | 'marker' | 'line' | 'content' | 'header' | 'heading' | 'time' | 'body';
-/** The role colours `u-tag`/`u-badge` use — the marker's colour. */
-export type TimelineItemColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+type TimelineParts = 'host' | 'list';
 /**
  * A status or activity history — "what happened, and when" on a detail screen (order, ticket,
  * approval). An ordered list of {@link TimelineItem}s, each a marker on a rail, a heading, a time
@@ -25,39 +22,9 @@ export declare class Timeline extends StyledElement<TimelineParts> {
     connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
 }
-/**
- * One entry of a {@link Timeline}.
- *
- * - `heading` names the event ("Shipped"); the `heading` slot takes richer content.
- * - `datetime` is an ISO date or date-time. It is rendered as `<time datetime>` and formatted for the
- *   active locale (`Locale`) — a date alone as a date, a date-time with its time. The `time` slot
- *   replaces the text (a relative "2 hours ago", say); `datetime` still annotates it.
- * - `color` tints the marker. ⚠Colour is never the only carrier — say the status in `heading` too
- *   (WCAG 1.4.1). `icon` (and `lib`) draws inside the marker.
- */
-export declare class TimelineItem extends StyledElement<TimelineItemParts> {
-    static styles: import('lit').CSSResultGroup[];
-    /** What happened. */
-    heading: string;
-    /** When — ISO `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm[:ss]`. */
-    datetime: string;
-    /** Marker colour. Default `neutral`. */
-    color: TimelineItemColor;
-    /** Icon drawn inside the marker. */
-    icon?: string;
-    /** Icon library for `icon`. */
-    lib?: string;
-    /** Body slot assignment — CSS `:has()` cannot see slotted content (`internals/slotted.ts`). */
-    private hasBody;
-    connectedCallback(): void;
-    /** Locale text for `datetime` — the raw value when it is not a date the formatter can read. */
-    private get timeText();
-    render(): import('lit-html').TemplateResult<1>;
-}
 declare global {
     interface HTMLElementTagNameMap {
         'u-timeline': Timeline;
-        'u-timeline-item': TimelineItem;
     }
 }
 export {};

package/dist/components/Timeline.js

@@ -1,68 +1,21 @@
-import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
-import t from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
-import { StyledElement as n } from "../internals/StyledElement.js";
-import { slotHasContent as r } from "../internals/slotted.js";
-import { itemStyles as i, styles as a } from "./Timeline.styles.js";
-import { html as o, nothing as s } from "lit";
-import { customElement as c, property as l, state as u } from "lit/decorators.js";
-import { formatDate as d } from "@iyulab/components/dist/utilities/format.js";
-import "@iyulab/components/dist/components/icon/UIcon.js";
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { StyledElement as t } from "../internals/StyledElement.js";
+import "./TimelineItem.js";
+import { styles as n } from "./Timeline.styles.js";
+import { html as r } from "lit";
+import { customElement as i } from "lit/decorators.js";
 //#region src/components/Timeline.ts
-var f = class extends n {
+var a = class extends t {
 	static {
-		this.styles = [super.styles, a];
+		this.styles = [super.styles, n];
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list");
 	}
 	render() {
-		return o`<slot></slot>`;
+		return r`<div class="list" part="list"><slot></slot></div>`;
 	}
 };
-f = t([c("u-timeline")], f);
-var p = class extends n {
-	constructor(...e) {
-		super(...e), this.heading = "", this.datetime = "", this.color = "neutral", this.hasBody = !1;
-	}
-	static {
-		this.styles = [super.styles, i];
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
-	}
-	get timeText() {
-		let e = this.datetime.trim();
-		if (!e) return "";
-		if (!e.includes("T")) return d(e, { dateStyle: "medium" });
-		let t = new Date(e);
-		return Number.isNaN(t.getTime()) ? e : d(t, {
-			dateStyle: "medium",
-			timeStyle: "short"
-		});
-	}
-	render() {
-		return o`
-      <div class="rail" part="rail" aria-hidden="true">
-        <span class="marker ${this.icon ? "with-icon" : ""}" part="marker">
-          ${this.icon ? o`<u-icon .lib=${this.lib} .name=${this.icon}></u-icon>` : s}
-        </span>
-        <span class="line" part="line"></span>
-      </div>
-      <div class="content" part="content">
-        <div class="header" part="header">
-          <span class="heading" part="heading"><slot name="heading">${this.heading}</slot></span>
-          ${this.datetime ? o`<time class="time" part="time" datetime=${this.datetime}><slot name="time">${this.timeText}</slot></time>` : o`<span class="time" part="time"><slot name="time"></slot></span>`}
-        </div>
-        <div class="body ${this.hasBody ? "" : "empty"}" part="body">
-          <slot @slotchange=${(e) => this.hasBody = r(e.target)}></slot>
-        </div>
-      </div>
-    `;
-	}
-};
-t([l({ type: String }), e("design:type", Object)], p.prototype, "heading", void 0), t([l({ type: String }), e("design:type", Object)], p.prototype, "datetime", void 0), t([l({
-	type: String,
-	reflect: !0
-}), e("design:type", Object)], p.prototype, "color", void 0), t([l({ type: String }), e("design:type", String)], p.prototype, "icon", void 0), t([l({ type: String }), e("design:type", String)], p.prototype, "lib", void 0), t([u(), e("design:type", Object)], p.prototype, "hasBody", void 0), p = t([c("u-timeline-item")], p);
+a = e([i("u-timeline")], a);
 //#endregion
-export { f as Timeline, p as TimelineItem };
+export { a as Timeline };

package/dist/components/Timeline.styles.d.ts

@@ -1,2 +1 @@
 export declare const styles: import('lit').CSSResult;
-export declare const itemStyles: import('lit').CSSResult;

package/dist/components/Timeline.styles.js

@@ -4,123 +4,11 @@ var t = e`
   :host {
     display: block;
   }
-`, n = e`
-  :host {
-    display: grid;
-    grid-template-columns: var(--app-timeline-rail-width, 24px) minmax(0, 1fr);
-    column-gap: var(--u-space-md, 12px);
-  }
 
-  /* The rail: a marker, then a line down to the next entry's marker. */
-  .rail {
+  .list {
     display: flex;
     flex-direction: column;
-    align-items: center;
-  }
-
-  .marker {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: var(--app-timeline-marker-size, 12px);
-    height: var(--app-timeline-marker-size, 12px);
-    /* Centred on the heading's first line (label size × leading). */
-    margin-top: calc((var(--u-text-label-size, 13px) * var(--u-text-label-leading, 1.5) - var(--app-timeline-marker-size, 12px)) / 2);
-    border-radius: 50%;
-    /* Fill and the colour on it come as a pair (the components contract — warning carries dark text,
-       not white). The edge is the strong step: a yellow fill alone is about 1.4:1 against the page. */
-    background-color: var(--_marker, var(--u-border-color-strong, #BDBDBD));
-    color: var(--_on-marker, var(--u-txt-color, #212121));
-    border: 1px solid var(--_edge, var(--u-border-color-strong, #BDBDBD));
-  }
-  .marker.with-icon {
-    width: var(--app-timeline-rail-width, 24px);
-    height: var(--app-timeline-rail-width, 24px);
-    margin-top: calc((var(--u-text-label-size, 13px) * var(--u-text-label-leading, 1.5) - var(--app-timeline-rail-width, 24px)) / 2);
-    font-size: var(--u-text-caption-size, 12px);
-  }
-
-  :host([color="primary"]) {
-    --_marker: var(--u-primary-color, #1976D2);
-    --_on-marker: var(--u-primary-txt-color, #FFFFFF);
-    --_edge: var(--u-primary-color-strong, #1565C0);
-  }
-  :host([color="info"]) {
-    --_marker: var(--u-info-color, #1976D2);
-    --_on-marker: var(--u-info-txt-color, #FFFFFF);
-    --_edge: var(--u-info-color-strong, #1565C0);
-  }
-  :host([color="success"]) {
-    --_marker: var(--u-success-color, #2E7D32);
-    --_on-marker: var(--u-success-txt-color, #FFFFFF);
-    --_edge: var(--u-success-color-strong, #1B5E20);
-  }
-  :host([color="warning"]) {
-    --_marker: var(--u-warning-color, #FDD835);
-    --_on-marker: var(--u-warning-txt-color, #000000);
-    --_edge: var(--u-warning-color-strong, #8A4A00);
-  }
-  :host([color="danger"]) {
-    --_marker: var(--u-danger-color, #D32F2F);
-    --_on-marker: var(--u-danger-txt-color, #FFFFFF);
-    --_edge: var(--u-danger-color-strong, #C62828);
-  }
-
-  .line {
-    flex: 1 1 auto;
-    min-height: var(--u-space-md, 12px);
-    margin-top: var(--u-space-2xs, 4px);
-    /* The rail is what reads as a timeline — the weak border step (about 1.25:1 on a card) vanished. */
-    border-left: 1px solid var(--u-border-color-strong, #BDBDBD);
-  }
-  /* The last entry has no next marker to reach. */
-  :host(:last-child) .line {
-    display: none;
-  }
-
-  .content {
-    min-width: 0;
-    padding-bottom: var(--u-space-lg, 16px);
-  }
-  :host(:last-child) .content {
-    padding-bottom: 0;
-  }
-
-  .header {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    column-gap: var(--u-space-sm, 8px);
-  }
-
-  .heading {
-    font-size: var(--u-text-label-size, 13px);
-    line-height: var(--u-text-label-leading, 1.5);
-    font-weight: var(--u-text-label-weight, 600);
-    color: var(--u-txt-color, #212121);
-    overflow-wrap: anywhere;
-  }
-
-  .time {
-    font-size: var(--u-text-caption-size, 12px);
-    color: var(--u-txt-color-weak, #616161);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  .body {
-    margin-top: var(--u-space-2xs, 4px);
-    font-size: var(--u-text-body-size, 14px);
-    line-height: var(--u-text-body-leading, 1.6);
-    color: var(--u-txt-color-weak, #616161);
-    overflow-wrap: anywhere;
-  }
-  /* No body content — no gap under the header. */
-  .body.empty {
-    display: none;
   }
 `;
 //#endregion
-export { n as itemStyles, t as styles };
+export { t as styles };

package/dist/components/TimelineItem.d.ts

@@ -0,0 +1,39 @@
+import { StyledElement } from '../internals/StyledElement.js';
+type TimelineItemParts = 'host' | 'rail' | 'marker' | 'line' | 'content' | 'header' | 'heading' | 'time' | 'body';
+/** The role colours `u-tag`/`u-badge` use — the marker's colour. */
+export type TimelineItemColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * One entry of a `u-timeline`.
+ *
+ * - `heading` names the event ("Shipped"); the `heading` slot takes richer content.
+ * - `datetime` is an ISO date or date-time. It is rendered as `<time datetime>` and formatted for the
+ *   active locale (`Locale`) — a date alone as a date, a date-time with its time. The `time` slot
+ *   replaces the text (a relative "2 hours ago", say); `datetime` still annotates it.
+ * - `color` tints the marker. ⚠Colour is never the only carrier — say the status in `heading` too
+ *   (WCAG 1.4.1). `icon` (and `lib`) draws inside the marker.
+ */
+export declare class TimelineItem extends StyledElement<TimelineItemParts> {
+    static styles: import('lit').CSSResultGroup[];
+    /** What happened. */
+    heading: string;
+    /** When — ISO `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm[:ss]`. */
+    datetime: string;
+    /** Marker colour. Default `neutral`. */
+    color: TimelineItemColor;
+    /** Icon drawn inside the marker. */
+    icon?: string;
+    /** Icon library for `icon`. */
+    lib?: string;
+    /** Body slot assignment — CSS `:has()` cannot see slotted content (`internals/slotted.ts`). */
+    private hasBody;
+    connectedCallback(): void;
+    /** Locale text for `datetime` — the raw value when it is not a date the formatter can read. */
+    private get timeText();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-timeline-item': TimelineItem;
+    }
+}
+export {};

package/dist/components/TimelineItem.js

@@ -0,0 +1,56 @@
+import e from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.152.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 "./TimelineItem.styles.js";
+import { html as a, nothing as o } from "lit";
+import { customElement as s, property as c, state as l } from "lit/decorators.js";
+import { formatDate as u } from "@iyulab/components/dist/utilities/format.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+//#region src/components/TimelineItem.ts
+var d = class extends n {
+	constructor(...e) {
+		super(...e), this.heading = "", this.datetime = "", this.color = "neutral", this.hasBody = !1;
+	}
+	static {
+		this.styles = [super.styles, i];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
+	}
+	get timeText() {
+		let e = this.datetime.trim();
+		if (!e) return "";
+		if (!e.includes("T")) return u(e, { dateStyle: "medium" });
+		let t = new Date(e);
+		return Number.isNaN(t.getTime()) ? e : u(t, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		});
+	}
+	render() {
+		return a`
+      <div class="rail" part="rail" aria-hidden="true">
+        <span class="marker ${this.icon ? "with-icon" : ""}" part="marker">
+          ${this.icon ? a`<u-icon .lib=${this.lib} .name=${this.icon}></u-icon>` : o}
+        </span>
+        <span class="line" part="line"></span>
+      </div>
+      <div class="content" part="content">
+        <div class="header" part="header">
+          <span class="heading" part="heading"><slot name="heading">${this.heading}</slot></span>
+          ${this.datetime ? a`<time class="time" part="time" datetime=${this.datetime}><slot name="time">${this.timeText}</slot></time>` : a`<span class="time" part="time"><slot name="time"></slot></span>`}
+        </div>
+        <div class="body ${this.hasBody ? "" : "empty"}" part="body">
+          <slot @slotchange=${(e) => this.hasBody = r(e.target)}></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+t([c({ type: String }), e("design:type", Object)], d.prototype, "heading", void 0), t([c({ type: String }), e("design:type", Object)], d.prototype, "datetime", void 0), t([c({
+	type: String,
+	reflect: !0
+}), e("design:type", Object)], d.prototype, "color", void 0), t([c({ type: String }), e("design:type", String)], d.prototype, "icon", void 0), t([c({ type: String }), e("design:type", String)], d.prototype, "lib", void 0), t([l(), e("design:type", Object)], d.prototype, "hasBody", void 0), d = t([s("u-timeline-item")], d);
+//#endregion
+export { d as TimelineItem };

package/dist/components/TimelineItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/TimelineItem.styles.js

@@ -0,0 +1,122 @@
+import { css as e } from "lit";
+//#region src/components/TimelineItem.styles.ts
+var t = e`
+  :host {
+    display: grid;
+    grid-template-columns: var(--app-timeline-rail-width, 24px) minmax(0, 1fr);
+    column-gap: var(--u-space-md, 12px);
+  }
+
+  /* The rail: a marker, then a line down to the next entry's marker. */
+  .rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .marker {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--app-timeline-marker-size, 12px);
+    height: var(--app-timeline-marker-size, 12px);
+    /* Centred on the heading's first line (label size × leading). */
+    margin-top: calc((var(--u-text-label-size, 13px) * var(--u-text-label-leading, 1.5) - var(--app-timeline-marker-size, 12px)) / 2);
+    border-radius: 50%;
+    /* Fill and the colour on it come as a pair (the components contract — warning carries dark text,
+       not white). The edge is the strong step: a yellow fill alone is about 1.4:1 against the page. */
+    background-color: var(--_marker, var(--u-border-color-strong, #BDBDBD));
+    color: var(--_on-marker, var(--u-txt-color, #212121));
+    border: 1px solid var(--_edge, var(--u-border-color-strong, #BDBDBD));
+  }
+  .marker.with-icon {
+    width: var(--app-timeline-rail-width, 24px);
+    height: var(--app-timeline-rail-width, 24px);
+    margin-top: calc((var(--u-text-label-size, 13px) * var(--u-text-label-leading, 1.5) - var(--app-timeline-rail-width, 24px)) / 2);
+    font-size: var(--u-text-caption-size, 12px);
+  }
+
+  :host([color="primary"]) {
+    --_marker: var(--u-primary-color, #1976D2);
+    --_on-marker: var(--u-primary-txt-color, #FFFFFF);
+    --_edge: var(--u-primary-color-strong, #1565C0);
+  }
+  :host([color="info"]) {
+    --_marker: var(--u-info-color, #1976D2);
+    --_on-marker: var(--u-info-txt-color, #FFFFFF);
+    --_edge: var(--u-info-color-strong, #1565C0);
+  }
+  :host([color="success"]) {
+    --_marker: var(--u-success-color, #2E7D32);
+    --_on-marker: var(--u-success-txt-color, #FFFFFF);
+    --_edge: var(--u-success-color-strong, #1B5E20);
+  }
+  :host([color="warning"]) {
+    --_marker: var(--u-warning-color, #FDD835);
+    --_on-marker: var(--u-warning-txt-color, #000000);
+    --_edge: var(--u-warning-color-strong, #8A4A00);
+  }
+  :host([color="danger"]) {
+    --_marker: var(--u-danger-color, #D32F2F);
+    --_on-marker: var(--u-danger-txt-color, #FFFFFF);
+    --_edge: var(--u-danger-color-strong, #C62828);
+  }
+
+  .line {
+    flex: 1 1 auto;
+    min-height: var(--u-space-md, 12px);
+    margin-top: var(--u-space-2xs, 4px);
+    /* The rail is what reads as a timeline — the weak border step (about 1.25:1 on a card) vanished. */
+    border-left: 1px solid var(--u-border-color-strong, #BDBDBD);
+  }
+  /* The last entry has no next marker to reach. */
+  :host(:last-child) .line {
+    display: none;
+  }
+
+  .content {
+    min-width: 0;
+    padding-bottom: var(--u-space-lg, 16px);
+  }
+  :host(:last-child) .content {
+    padding-bottom: 0;
+  }
+
+  .header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--u-space-sm, 8px);
+  }
+
+  .heading {
+    font-size: var(--u-text-label-size, 13px);
+    line-height: var(--u-text-label-leading, 1.5);
+    font-weight: var(--u-text-label-weight, 600);
+    color: var(--u-txt-color, #212121);
+    overflow-wrap: anywhere;
+  }
+
+  .time {
+    font-size: var(--u-text-caption-size, 12px);
+    color: var(--u-txt-color-weak, #616161);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .body {
+    margin-top: var(--u-space-2xs, 4px);
+    font-size: var(--u-text-body-size, 14px);
+    line-height: var(--u-text-body-leading, 1.6);
+    color: var(--u-txt-color-weak, #616161);
+    overflow-wrap: anywhere;
+  }
+  /* No body content — no gap under the header. */
+  .body.empty {
+    display: none;
+  }
+`;
+//#endregion
+export { t as styles };

package/dist/index.d.ts

@@ -11,8 +11,9 @@ export { GroupBox } from './components/GroupBox.js';
 export { InfoSection } from './components/InfoSection.js';
 export { InfoField, isBlank } from './components/InfoField.js';
 export { EmptyState } from './components/EmptyState.js';
-export { Timeline, TimelineItem } from './components/Timeline.js';
-export type { TimelineItemColor } from './components/Timeline.js';
+export { Timeline } from './components/Timeline.js';
+export { TimelineItem } from './components/TimelineItem.js';
+export type { TimelineItemColor } from './components/TimelineItem.js';
 export { ActionBar } from './components/ActionBar.js';
 export { MasterDetailLayout } from './components/MasterDetailLayout.js';
 export type { MasterDetailLayoutEventMap } from './components/MasterDetailLayout.js';

package/dist/index.js

@@ -7,7 +7,8 @@ import { GroupBox as l } from "./components/GroupBox.js";
 import { InfoSection as u } from "./components/InfoSection.js";
 import { InfoField as d, isBlank as f } from "./components/InfoField.js";
 import { EmptyState as p } from "./components/EmptyState.js";
-import { Timeline as m, TimelineItem as h } from "./components/Timeline.js";
+import { TimelineItem as m } from "./components/TimelineItem.js";
+import { Timeline as h } from "./components/Timeline.js";
 import { ActionBar as g } from "./components/ActionBar.js";
 import { MasterDetailLayout as _ } from "./components/MasterDetailLayout.js";
 import { Wizard as v } from "./components/Wizard.js";
@@ -15,4 +16,4 @@ import { translate as y } from "./translate.js";
 //#region src/index.ts
 var b = t;
 //#endregion
-export { g as ActionBar, p as EmptyState, l as GroupBox, d as InfoField, u as InfoSection, _ as MasterDetailLayout, c as PageHeader, e as ScreenObserver, m as Timeline, h as TimelineItem, v as Wizard, t as app, b as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, f as isBlank, a as modernAppLocale, o as registerLocale, s as setDefaultLocale, y as translate };
+export { g as ActionBar, p as EmptyState, l as GroupBox, d as InfoField, u as InfoSection, _ as MasterDetailLayout, c as PageHeader, e as ScreenObserver, h as Timeline, m as TimelineItem, v as Wizard, t as app, b as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, f as isBlank, a as modernAppLocale, o as registerLocale, s as setDefaultLocale, y as translate };

package/dist/react/TimelineItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TimelineItem as TimelineItemElement } from '@iyulab/modern-app/dist/components/TimelineItem.js';
+
+type TimelineItemOwnProps = Omit<TimelineItemElement, keyof HTMLElement>;
+
+export declare const TimelineItem: React.ForwardRefExoticComponent<
+  Partial<Omit<TimelineItemElement, Exclude<keyof React.HTMLAttributes<TimelineItemElement>, keyof TimelineItemOwnProps>>>
+    & Omit<React.HTMLAttributes<TimelineItemElement>, keyof TimelineItemOwnProps | never>
+    & React.RefAttributes<TimelineItemElement>
+    & {
+  }
+>;
+
+export type TimelineItemProps = React.ComponentProps<typeof TimelineItem>;

package/dist/react/TimelineItem.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { TimelineItem as TimelineItemElement } from '@iyulab/modern-app/dist/components/TimelineItem.js';
+
+export const TimelineItem = createComponent({
+  react: React,
+  tagName: 'u-timeline-item',
+  elementClass: TimelineItemElement,
+  events: {},
+});

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@iyulab/modern-app/dist/react.js';
+export { TimelineItem, TimelineItemProps } from './TimelineItem';
 export { Timeline, TimelineProps } from './Timeline';
 export { SidebarButton, SidebarButtonProps } from './SidebarButton';
 export { PageHeader, PageHeaderProps } from './PageHeader';

package/dist/react/index.js

@@ -1,4 +1,5 @@
 export * from '@iyulab/modern-app/dist/react.js';
+export { TimelineItem } from './TimelineItem.js';
 export { Timeline } from './Timeline.js';
 export { SidebarButton } from './SidebarButton.js';
 export { PageHeader } from './PageHeader.js';

package/dist/react.d.ts

@@ -3,7 +3,7 @@ import { EventName } from '@lit/react';
 import { SidebarLayout as SidebarLayoutElement, SidebarLayoutEventMap } from './layouts/SidebarLayout.js';
 import { Wizard as WizardElement, WizardEventMap } from './components/Wizard.js';
 import { GroupBoxLevel } from './components/GroupBox.js';
-import { TimelineItemColor } from './components/Timeline.js';
+import { TimelineItemColor } from './components/TimelineItem.js';
 import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone } from './components/InfoField.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';

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.1",
+  "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) |

package/skills/modern-app/references/components/timeline.md

@@ -42,10 +42,11 @@ a list and each entry a list item, so assistive technology announces the count.
 
 ## CSS Parts
 
-| Element | Parts |
-|---------|-------|
-| `u-timeline` | `host` |
-| `u-timeline-item` | `host` · `rail` · `marker` · `line` · `content` · `header` · `heading` · `time` · `body` |
+| Part | Description |
+|------|-------------|
+| `list` | `u-timeline`: the column the entries stack in |
+| `rail` · `marker` · `line` | Entry: the rail column, its marker, and the line down to the next entry |
+| `content` · `header` · `heading` · `time` · `body` | Entry: the text column — header row (heading and time) and body |
 
 ## CSS Custom Properties