@iyulab/modern-app 0.46.0 → 0.47.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.47.0] - 2026-10-08
+
+### Changed
+
+- **An app with no `fallback` draws a failed route as `<u-empty-state>`**, inside the shell: a route `enter` guard's
+  refusal (403) as `no-access`, an address with no route (404) as the new `not-found`, and any other failure (the
+  route could not be loaded or rendered) as `error`, titled "Couldn’t open this page" with the error message as its
+  description. Before, the router's own error page (a large status code) was drawn — outside this package's look, and
+  a refusal looked like an outage. A `fallback` you pass is used as before and replaces the default entirely.
+
+### Added
+
+- **`u-empty-state variant="not-found"`** — nothing at this address; the next step is checking the address or going
+  back. Not announced as an alert. Default wording in English and Korean (`notFoundTitle`/`notFoundDescription` in
+  `modernAppLocale`), and `routeErrorTitle` for the default fallback's error screen.
+
+### Documentation
+
+- The empty-state reference's blocked-routes example passes a complete app config (the published 0.46.0 skill
+  document left out the required `layout`).
+
 ## [0.46.0] - 2026-10-08
 
 ### Added

package/README.md

@@ -38,13 +38,14 @@ await app.load({
     { path: 'users',     render: () => html`<users-page></users-page>` },
     { path: 'users/:id', render: (ctx) => html`<user-detail .userId=${ctx.params.id}></user-detail>` },
   ],
-  fallback: {
-    render: (ctx) => html`<error-page .error=${ctx.error}></error-page>`,
-  },
   theme: { default: 'system' },
 });
 ```
 
+A route that fails is drawn inside the shell as an empty state: a guard's refusal (403) as
+`<u-empty-state variant="no-access">`, an unknown address (404) as `variant="not-found"`, anything else as
+`variant="error"` with the error message. Pass `fallback: { render: (ctx) => … }` to draw your own instead.
+
 ### Icons
 
 A menu item's `icon` is a name resolved by `<u-icon>` from `@iyulab/components`:

package/dist/App.js

@@ -1,27 +1,28 @@
 import { ScreenObserver as e } from "./internals/ScreenObserver.js";
-import t from "i18next";
-import { Router as n } from "@iyulab/router";
-import { setDefaultBaseUrl as r } from "@iyulab/components/dist/utilities/icons.js";
-import { Theme as i } from "@iyulab/components/dist/utilities/Theme.js";
-import { Toast as a } from "@iyulab/components/dist/utilities/Toast.js";
-import { Locale as o } from "@iyulab/components/dist/utilities/Locale.js";
+import { defaultFallback as t } from "./internals/default-fallback.js";
+import n from "i18next";
+import { Router as r } from "@iyulab/router";
+import { setDefaultBaseUrl as i } from "@iyulab/components/dist/utilities/icons.js";
+import { Theme as a } from "@iyulab/components/dist/utilities/Theme.js";
+import { Toast as o } from "@iyulab/components/dist/utilities/Toast.js";
+import { Locale as s } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/App.ts
-var s = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", c;
-function l() {
-	if (!c) {
+var c = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", l;
+function u() {
+	if (!l) {
 		if ("adoptedStyleSheets" in document && typeof CSSStyleSheet < "u" && typeof CSSStyleSheet.prototype.replaceSync == "function") {
 			let e = new CSSStyleSheet();
-			e.replaceSync(s), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], c = e;
+			e.replaceSync(c), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], l = e;
 		} else {
 			let e = document.createElement("style");
-			e.textContent = s, document.head.prepend(e), c = e;
+			e.textContent = c, document.head.prepend(e), l = e;
 		}
 	}
 }
-var u = class s {
+var d = class c {
 	constructor() {}
 	static get instance() {
-		return s._instance ||= new s(), s._instance;
+		return c._instance ||= new c(), c._instance;
 	}
 	get config() {
 		return this._config;
@@ -36,22 +37,22 @@ var u = class s {
 		return this._user;
 	}
 	get theme() {
-		return i;
+		return a;
 	}
 	get i18n() {
-		return t;
+		return n;
 	}
-	async load(a) {
-		if (this.unload(), this._config = a, await i.init(a.theme), a.iconBasepath && r(a.iconBasepath), a.i18n) {
-			for (let e of a.i18n.plugins || []) t.use(e);
-			await t.init(a.i18n), this.syncLanguage();
+	async load(o) {
+		if (this.unload(), this._config = o, await a.init(o.theme), o.iconBasepath && i(o.iconBasepath), o.i18n) {
+			for (let e of o.i18n.plugins || []) n.use(e);
+			await n.init(o.i18n), this.syncLanguage();
 		}
-		if (a.auth) {
-			let e = a.root || document.body, t = () => {
-				this.load(a);
+		if (o.auth) {
+			let e = o.root || document.body, t = () => {
+				this.load(o);
 			}, n;
 			try {
-				n = await a.auth.me();
+				n = await o.auth.me();
 			} catch (e) {
 				n = {
 					status: "unknown",
@@ -59,8 +60,8 @@ var u = class s {
 				};
 			}
 			if (n?.status === "unknown") {
-				if (!a.auth.renderUnavailable) throw n.error;
-				let r = a.auth.renderUnavailable({
+				if (!o.auth.renderUnavailable) throw n.error;
+				let r = o.auth.renderUnavailable({
 					root: e,
 					error: n.error,
 					retry: t
@@ -69,7 +70,7 @@ var u = class s {
 				return;
 			}
 			if (n?.status === "anonymous") {
-				let n = a.auth.renderLogin({
+				let n = o.auth.renderLogin({
 					root: e,
 					onSuccess: t
 				});
@@ -77,32 +78,32 @@ var u = class s {
 				return;
 			}
 			if (n?.status !== "authenticated") throw TypeError("auth.me() must return { status: 'authenticated', user } | { status: 'anonymous' } | { status: 'unknown', error }");
-			this._user = n.user, await a.auth.onAuthenticated?.(n.user);
+			this._user = n.user, await o.auth.onAuthenticated?.(n.user);
 		}
-		let o = a.root || document.body;
-		this._layout = await this.createLayout(o, a.layout), this._screen = new e({
-			element: o,
-			breakpoints: a.layout.breakpoints || [768, 1024]
+		let s = o.root || document.body;
+		this._layout = await this.createLayout(s, o.layout), this._screen = new e({
+			element: s,
+			breakpoints: o.layout.breakpoints || [768, 1024]
 		});
-		let s = document.createElement("u-outlet");
-		this._layout.appendChild(s), this._router = new n({
+		let c = document.createElement("u-outlet");
+		this._layout.appendChild(c), this._router = new r({
 			root: this._layout,
-			basepath: a.basepath,
-			mode: a.routerMode,
-			routes: a.routes,
-			fallback: a.fallback,
-			enter: a.enter,
-			initialLoad: a.initialLoad,
-			useIntercept: a.useIntercept
+			basepath: o.basepath,
+			mode: o.routerMode,
+			routes: o.routes,
+			fallback: o.fallback ?? t,
+			enter: o.enter,
+			initialLoad: o.initialLoad,
+			useIntercept: o.useIntercept
 		});
 	}
 	syncLanguage() {
 		let e = (e) => {
-			e && e !== "cimode" && (o.set(e), typeof document < "u" && (document.documentElement.lang = e));
+			e && e !== "cimode" && (s.set(e), typeof document < "u" && (document.documentElement.lang = e));
 		};
-		e(t.resolvedLanguage ?? t.language);
-		let n = (n) => e(t.resolvedLanguage ?? n);
-		t.on("languageChanged", n), this._languageSync = () => t.off("languageChanged", n);
+		e(n.resolvedLanguage ?? n.language);
+		let t = (t) => e(n.resolvedLanguage ?? t);
+		n.on("languageChanged", t), this._languageSync = () => n.off("languageChanged", t);
 	}
 	unload() {
 		this._languageSync?.(), this._languageSync = 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;
@@ -117,22 +118,22 @@ var u = class s {
 		t === void 0 ? delete r[e] : r[e] = t, n.counts = r;
 	}
 	async notice(e, t) {
-		await a.notice(e, { ...t });
+		await o.notice(e, { ...t });
 	}
 	async info(e, t) {
-		await a.info(e, { ...t });
+		await o.info(e, { ...t });
 	}
 	async warning(e, t) {
-		await a.warning(e, { ...t });
+		await o.warning(e, { ...t });
 	}
 	async success(e, t) {
-		await a.success(e, { ...t });
+		await o.success(e, { ...t });
 	}
 	async error(e, t) {
-		await a.error(e, { ...t });
+		await o.error(e, { ...t });
 	}
 	async createLayout(e, t) {
-		e === document.body && l();
+		e === document.body && u();
 		let n;
 		if (t.type === "sidebar") {
 			let { SidebarLayout: e } = await import("./layouts/SidebarLayout.js"), r = new e();
@@ -142,4 +143,4 @@ var u = class s {
 	}
 }.instance;
 //#endregion
-export { u as app };
+export { d as app };

package/dist/components/EmptyState.d.ts

@@ -1,7 +1,7 @@
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'icon' | 'message' | 'title' | 'description' | 'actions';
 /** 빈 상태가 전하는 사실 — 다음 행동이 갈린다(`EmptyState.variant` 참조). */
-export type EmptyStateVariant = 'no-data' | 'no-results' | 'error' | 'no-access';
+export type EmptyStateVariant = 'no-data' | 'no-results' | 'error' | 'no-access' | 'not-found';
 /**
  * 빈 상태 — 목록·검색 결과가 비었을 때.
  *
@@ -24,8 +24,14 @@ export type EmptyStateVariant = 'no-data' | 'no-results' | 'error' | 'no-access'
  *
  * <!-- 라우트 가드가 막았다(403) — 장애가 아니라 권한의 사실이다. -->
  * <u-empty-state variant="no-access"></u-empty-state>
+ *
+ * <!-- 주소가 아무것도 가리키지 않는다(404) — 다음 행동은 주소 확인 · 돌아가기. -->
+ * <u-empty-state variant="not-found"></u-empty-state>
  * ```
  *
+ * `app.load()` 에 `fallback` 을 주지 않으면 라우팅 실패가 이 요소로 그려진다 — 403 `no-access` · 404 `not-found` ·
+ * 그 밖 `error`(오류 메시지가 설명).
+ *
  * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
  * 한국어 표는 내장돼 있고(언어는 `Locale.set()`), 다른 언어는 `modernAppLocale.register(lang, …)` 로 소비자가 등록한다. 화면별로 덮으려면
  * `title`·`description` 을 준다.
@@ -38,9 +44,10 @@ export declare class EmptyState extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
     /**
      * `no-data` = 아직 없음 / `no-results` = 조건에 맞는 것이 없음 / `error` = 불러오지 못함 /
-     * `no-access` = 있지만 이 사용자에게 보여 줄 수 없음(라우트 가드의 거부 · 403).
-     * 넷은 다음 행동이 다르다(만들기 · 조건 바꾸기 · 다시 시도 · 권한 요청) — `error` 의 제목은 보조기기에 알린다(`role="alert"`).
-     * `no-access` 는 알리지 않는다 — 장애가 아니라 화면의 내용이고, 라우트 완료 때 본문으로 가는 포커스가 그것을 읽게 한다.
+     * `no-access` = 있지만 이 사용자에게 보여 줄 수 없음(라우트 가드의 거부 · 403) /
+     * `not-found` = 주소가 가리키는 화면이 없음(404).
+     * 다섯은 다음 행동이 다르다(만들기 · 조건 바꾸기 · 다시 시도 · 권한 요청 · 주소 확인) — `error` 의 제목은 보조기기에 알린다(`role="alert"`).
+     * `no-access`·`not-found` 는 알리지 않는다 — 장애가 아니라 화면의 내용이고, 라우트 완료 때 본문으로 가는 포커스가 그것을 읽게 한다.
      */
     variant: EmptyStateVariant;
     /** 제목. 비우면 variant 기본 문구. */

package/dist/components/EmptyState.js

@@ -1,8 +1,8 @@
 import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
 import t from "../_virtual/_@oxc-project_runtime@0.153.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";
+import { slotHasContent as r } from "../internals/slotted.js";
+import { getLocaleStrings as i } from "../internals/locale.js";
 import { styles as a } from "./EmptyState.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";
@@ -15,7 +15,7 @@ var d = class extends n {
 		this.styles = [super.styles, a];
 	}
 	get defaults() {
-		let e = r(this.locale || void 0);
+		let e = i(this.locale || void 0);
 		switch (this.variant) {
 			case "error": return {
 				icon: "⚠️",
@@ -27,6 +27,11 @@ var d = class extends n {
 				title: e.noAccessTitle,
 				description: e.noAccessDescription
 			};
+			case "not-found": return {
+				icon: "🧭",
+				title: e.notFoundTitle,
+				description: e.notFoundDescription
+			};
 			case "no-results": return {
 				icon: "🔍",
 				title: e.noResultsTitle,
@@ -53,7 +58,7 @@ var d = class extends n {
       </div>
       <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
         <slot name="actions"
-          @slotchange=${(e) => this.hasActions = i(e.target)}
+          @slotchange=${(e) => this.hasActions = r(e.target)}
         ></slot>
       </div>
     `;

package/dist/components/MasterDetailLayout.js

@@ -1,8 +1,8 @@
 import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
 import t from "../_virtual/_@oxc-project_runtime@0.153.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";
+import { slotHasContent as r } from "../internals/slotted.js";
+import { getLocaleStrings as i } from "../internals/locale.js";
 import { styles as a } from "./MasterDetailLayout.styles.js";
 import { html as o } from "lit";
 import { customElement as s, property as c, state as l } from "lit/decorators.js";
@@ -14,7 +14,7 @@ var u = class extends n {
 		super(...e), this.masterSize = "22rem", this.overlayBreakpoint = 760, this.locale = "", this.hasDetail = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.handleDetailClose = () => {
 			this.fire("detail-close", { cancelable: !1 });
 		}, this.handleDetailSlotChange = (e) => {
-			this.hasDetail = i(e.target);
+			this.hasDetail = r(e.target);
 		};
 	}
 	static {
@@ -40,7 +40,7 @@ var u = class extends n {
       <div class="divider ${this.hasDetail ? "" : "empty"}" part="divider"></div>
       <div class="detail ${this.hasDetail ? "" : "empty"}" part="detail">
         <u-button class="detail-close" part="detail-close" appearance="plain"
-          aria-label=${r(this.locale || void 0).detailClose}
+          aria-label=${i(this.locale || void 0).detailClose}
           @click=${this.handleDetailClose}
         >
           <u-icon lib="internal" name="x"></u-icon>

package/dist/components/PageHeader.js

@@ -1,8 +1,8 @@
 import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
 import t from "../_virtual/_@oxc-project_runtime@0.153.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";
+import { slotHasContent as r } from "../internals/slotted.js";
+import { getLocaleStrings as i } from "../internals/locale.js";
 import { styles as a } from "./PageHeader.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";
@@ -16,18 +16,18 @@ var d = class extends n {
 	}
 	render() {
 		return o`
-      ${this.back ? o`<a class="back" part="back" href=${this.back}>${this.backLabel || r(this.locale || void 0).back}</a>` : s}
+      ${this.back ? o`<a class="back" part="back" href=${this.back}>${this.backLabel || i(this.locale || void 0).back}</a>` : s}
       <div class="heading" part="heading">
         <div class="eyebrow ${this.eyebrow || this.hasEyebrow ? "" : "empty"}" part="eyebrow">
           <slot name="eyebrow"
-            @slotchange=${(e) => this.hasEyebrow = i(e.target)}
+            @slotchange=${(e) => this.hasEyebrow = r(e.target)}
           >${this.eyebrow ?? s}</slot>
         </div>
         <div class="title-row">
           <h1 class="title" part="title">${this.title}</h1>
           <span class="status ${this.hasStatus ? "" : "empty"}" part="status">
             <slot name="status"
-              @slotchange=${(e) => this.hasStatus = i(e.target)}
+              @slotchange=${(e) => this.hasStatus = r(e.target)}
             ></slot>
           </span>
         </div>
@@ -35,7 +35,7 @@ var d = class extends n {
       </div>
       <div class="actions ${this.hasActions ? "" : "empty"}" part="actions">
         <slot name="actions"
-          @slotchange=${(e) => this.hasActions = i(e.target)}
+          @slotchange=${(e) => this.hasActions = r(e.target)}
         ></slot>
       </div>
     `;

package/dist/index.js

@@ -1,12 +1,12 @@
 import { ScreenObserver as e } from "./internals/ScreenObserver.js";
-import { app as t } from "./App.js";
-import { filterSidebarItems as n } from "./layouts/filterSidebarItems.js";
-import { getDefaultLocale as r, getLocaleStrings as i, modernAppLocale as a, registerLocale as o, setDefaultLocale as s } from "./internals/locale.js";
-import { PageHeader as c } from "./components/PageHeader.js";
-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 { getDefaultLocale as t, getLocaleStrings as n, modernAppLocale as r, registerLocale as i, setDefaultLocale as a } from "./internals/locale.js";
+import { EmptyState as o } from "./components/EmptyState.js";
+import { app as s } from "./App.js";
+import { filterSidebarItems as c } from "./layouts/filterSidebarItems.js";
+import { PageHeader as l } from "./components/PageHeader.js";
+import { GroupBox as u } from "./components/GroupBox.js";
+import { InfoSection as d } from "./components/InfoSection.js";
+import { InfoField as f, isBlank as p } from "./components/InfoField.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";
@@ -15,6 +15,6 @@ import { Wizard as v } from "./components/Wizard.js";
 import { translate as y } from "./translate.js";
 import { AccessDeniedError as b, ContentLoadError as x, ContentRenderError as S, NotFoundError as C, OutletMissingError as w, RouteError as T } from "@iyulab/router";
 //#region src/index.ts
-var E = t;
+var E = s;
 //#endregion
-export { b as AccessDeniedError, g as ActionBar, x as ContentLoadError, S as ContentRenderError, p as EmptyState, l as GroupBox, d as InfoField, u as InfoSection, _ as MasterDetailLayout, C as NotFoundError, w as OutletMissingError, c as PageHeader, T as RouteError, e as ScreenObserver, h as Timeline, m as TimelineItem, v as Wizard, t as app, E 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 { b as AccessDeniedError, g as ActionBar, x as ContentLoadError, S as ContentRenderError, o as EmptyState, u as GroupBox, f as InfoField, d as InfoSection, _ as MasterDetailLayout, C as NotFoundError, w as OutletMissingError, l as PageHeader, T as RouteError, e as ScreenObserver, h as Timeline, m as TimelineItem, v as Wizard, s as app, E as default, c as filterSidebarItems, t as getDefaultLocale, n as getLocaleStrings, p as isBlank, r as modernAppLocale, i as registerLocale, a as setDefaultLocale, y as translate };

package/dist/internals/default-fallback.d.ts

@@ -0,0 +1,16 @@
+import { FallbackRouteConfig, RouteError } from '@iyulab/router';
+import { EmptyStateVariant } from '../components/EmptyState.js';
+/**
+ * `app.load()` 에 `fallback` 을 주지 않은 앱의 라우팅 실패 화면 — 앱 프레임워크의 빈 상태 어휘로 그린다.
+ *
+ * 종전에는 router 의 `UErrorPage`(큰 상태 코드 화면)가 그려졌다. 셸·빈 상태 어휘를 가진 프레임워크에서 오류만
+ * 남의 외형이었고, 권한 거부(403)도 «장애» 처럼 보였다.
+ *
+ * - 403 → `no-access`(라우트 가드의 거부) · 404 → `not-found` · 그 밖 → `error`(오류 메시지가 설명).
+ * - 판정은 클래스가 아니라 **코드**로 한다 — `AccessDeniedError`·`NotFoundError` 가 403·404 를 싣고, 라우트가 던진
+ *   `{ status: 404 }` 류도 router 가 같은 코드의 `RouteError` 로 감싼다. 진단 코드(`OUTLET_MISSING` 등)는 화면에
+ *   코드로 내지 않고 메시지를 설명으로 쓴다.
+ * - 소비자가 `fallback` 을 주면 그것이 그대로 이긴다(이 모듈은 쓰이지 않는다).
+ */
+export declare function variantOf(error: Pick<RouteError, 'code'>): EmptyStateVariant;
+export declare const defaultFallback: FallbackRouteConfig;

package/dist/internals/default-fallback.js

@@ -0,0 +1,16 @@
+import { getLocaleStrings as e } from "./locale.js";
+import { EmptyState as t } from "../components/EmptyState.js";
+//#region src/internals/default-fallback.ts
+function n(e) {
+	switch (String(e.code)) {
+		case "403": return "no-access";
+		case "404": return "not-found";
+		default: return "error";
+	}
+}
+var r = { render: (r) => {
+	let i = new t();
+	return i.variant = n(r.error), i.variant === "error" && (i.title = e().routeErrorTitle, i.description = r.error.message), i;
+} };
+//#endregion
+export { r as defaultFallback, n as variantOf };

package/dist/internals/locale.d.ts

@@ -13,6 +13,12 @@ export interface ModernAppLocaleStrings {
     /** Empty state — the screen exists but this user may not see it (`variant="no-access"` — a route guard said no). */
     noAccessTitle: string;
     noAccessDescription: string;
+    /** Empty state — the address points at nothing (`variant="not-found"` — the router found no route, a 404). */
+    notFoundTitle: string;
+    notFoundDescription: string;
+    /** Default route fallback — the title when a route failed for another reason (load or render failure). The
+     *  `error` variant's own default title speaks of a list. */
+    routeErrorTitle: string;
     /** Accessible label for an overlay-mode close button (master-detail layout, sidebar layout overlay). */
     detailClose: string;
     /** Sidebar layout — accessible label for the mobile-header menu toggle button. */

package/dist/internals/locale.js

@@ -10,6 +10,9 @@ var t = {
 	errorDescription: "Something went wrong while loading. Try again.",
 	noAccessTitle: "You don’t have access",
 	noAccessDescription: "Ask an administrator for access if you need it.",
+	notFoundTitle: "Page not found",
+	notFoundDescription: "Check the address, or go back to the previous screen.",
+	routeErrorTitle: "Couldn’t open this page",
 	detailClose: "Close",
 	toggleMobileMenu: "Toggle menu",
 	toggleSidebar: "Toggle sidebar",
@@ -30,6 +33,9 @@ n.register("en", t), n.register("ko", {
 	errorDescription: "불러오는 중 문제가 생겼습니다. 다시 시도해 주세요.",
 	noAccessTitle: "접근 권한이 없습니다",
 	noAccessDescription: "필요하면 관리자에게 권한을 요청하세요.",
+	notFoundTitle: "페이지를 찾을 수 없습니다",
+	notFoundDescription: "주소를 확인하거나 이전 화면으로 돌아가 주세요.",
+	routeErrorTitle: "화면을 열지 못했습니다",
 	detailClose: "닫기",
 	toggleMobileMenu: "메뉴 열고 닫기",
 	toggleSidebar: "사이드바 열고 닫기",
@@ -68,6 +74,9 @@ function l(e) {
 		errorDescription: t("errorDescription"),
 		noAccessTitle: t("noAccessTitle"),
 		noAccessDescription: t("noAccessDescription"),
+		notFoundTitle: t("notFoundTitle"),
+		notFoundDescription: t("notFoundDescription"),
+		routeErrorTitle: t("routeErrorTitle"),
 		detailClose: t("detailClose"),
 		toggleMobileMenu: t("toggleMobileMenu"),
 		toggleSidebar: t("toggleSidebar"),

package/dist/layouts/SidebarLayout.js

@@ -1,10 +1,10 @@
-import { app as e } from "../App.js";
-import { filterSidebarItems as t } from "./filterSidebarItems.js";
-import n from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
-import r from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
-import { StyledElement as i } from "../internals/StyledElement.js";
-import { getLocaleStrings as a } from "../internals/locale.js";
-import { slotHasContent as o } from "../internals/slotted.js";
+import e from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.js";
+import t from "../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.js";
+import { StyledElement as n } from "../internals/StyledElement.js";
+import { slotHasContent as r } from "../internals/slotted.js";
+import { getLocaleStrings as i } from "../internals/locale.js";
+import { app as a } from "../App.js";
+import { filterSidebarItems as o } from "./filterSidebarItems.js";
 import "../components/SidebarSection.js";
 import { DEFAULT_NAV_ICON as s } from "../internals/nav-icon.js";
 import "../components/SidebarLink.js";
@@ -74,14 +74,14 @@ function j(e, t) {
 	}
 	return !1;
 }
-var M = class extends i {
+var M = class extends n {
 	static {
 		S = 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.routeLoading = !1, this.mainTabStop = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++w}`, 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);
+	constructor(...e) {
+		super(...e), this.state = "default", this.counts = {}, this.locale = "", this.hasOverlay = !1, this.openMenu = null, this.menuIds = /* @__PURE__ */ new WeakMap(), this.hasNotice = !1, this.routeLoading = !1, this.mainTabStop = !1, this.overlayTrigger = null, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : void 0, this.currentPath = null, this.unsizedWarnKey = `unsized:${++w}`, 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 e = this.screenSize ?? a.screen ?? "large";
+			e === "large" ? this.state = this.state === "default" ? "slim" : "default" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", e);
 		}, this.handleBackdropClick = () => {
 			this.state = "slim";
 		}, this.handleRouteBegin = (e) => {
@@ -110,14 +110,14 @@ var M = class extends i {
 				this.routeLoading = !1, this.progressBarEl.status = "default";
 			}, 300);
 		}, this.handleOverlaySlotChange = (e) => {
-			let t = o(e.target);
+			let t = r(e.target);
 			if (t && !this.hasOverlay) {
 				let e = A();
 				this.overlayTrigger = e && e !== document.body ? e : null;
 			}
 			this.hasOverlay = t;
 		}, this.handleNoticeSlotChange = (e) => {
-			this.hasNotice = o(e.target), this.handleMainSlotChange();
+			this.hasNotice = r(e.target), this.handleMainSlotChange();
 		}, this.handleOverlayEscape = (e) => {
 			let t = this.shadowRoot?.querySelector(".overlay");
 			return !this.hasOverlay || !t || !e.composedPath().includes(t) ? !1 : (this.handleOverlayClose(), !0);
@@ -193,7 +193,7 @@ var M = class extends i {
 		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}
+        ${i(this.locale || void 0).skipToContent}
       </a>
 
       <!-- Mobile Header -->
@@ -203,7 +203,7 @@ var M = class extends i {
           ${this.config.title}
         </span>
         <u-button class="toggler" appearance="plain"
-          aria-label=${a(this.locale || void 0).toggleMobileMenu}
+          aria-label=${i(this.locale || void 0).toggleMobileMenu}
           @click=${this.handleToggleButtonClick}>
           <u-icon
             lib=${this.icon("lib")}
@@ -221,7 +221,7 @@ var M = class extends i {
             ${this.config.title}
           </span>
           <u-button class="toggler" appearance="plain"
-            aria-label=${a(this.locale || void 0).toggleSidebar}
+            aria-label=${i(this.locale || void 0).toggleSidebar}
             @click=${this.handleToggleButtonClick}>
             <u-icon
               lib=${this.icon("lib")}
@@ -233,12 +233,12 @@ var M = class extends i {
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-main" part="sidebar-main" scrollable
           aria-label=${this.config.mainAriaLabel ?? d}>
-          ${_(t(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${_(o(this.config.main ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </nav>
 
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer">
-          ${_(t(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
+          ${_(o(this.config.footer ?? [], this.config.hasPermission), (e, t) => t, (e) => this.renderItem(e))}
         </div>
       </aside>
 
@@ -247,7 +247,7 @@ var M = class extends i {
         <main class="main" part="main" scrollable tabindex=${this.mainTabStop ? "0" : "-1"} @keydown=${this._handleMainKeydown}>
           <u-progress-bar part="progress" class=${this.routeLoading ? "loading" : ""}
             aria-hidden=${this.routeLoading ? d : "true"}
-            aria-label=${a(this.locale || void 0).pageLoading}></u-progress-bar>
+            aria-label=${i(this.locale || void 0).pageLoading}></u-progress-bar>
 
           <div class="main-content" part="main-content" ?inert=${this.hasOverlay}>
             <div class="notices ${this.hasNotice ? "" : "empty"}" part="notices"
@@ -261,7 +261,7 @@ var M = class extends i {
 
         <div class="overlay ${this.hasOverlay ? "" : "empty"}" part="overlay">
           <u-button class="overlay-close" part="overlay-close" appearance="plain"
-            aria-label=${a(this.locale || void 0).detailClose}
+            aria-label=${i(this.locale || void 0).detailClose}
             @click=${this.handleOverlayClose}>
             <u-icon lib=${this.icon("lib")} name=${this.icon("overlayClose")}></u-icon>
           </u-button>
@@ -470,9 +470,9 @@ var M = class extends i {
 		t && t !== document.body || (e?.isConnected ? e.focus() : this.mainElement?.focus({ preventScroll: !0 }));
 	}
 };
-r([p({
+t([p({
 	type: String,
 	reflect: !0
-}), n("design:type", Object)], M.prototype, "state", void 0), r([p({ type: Object }), n("design:type", Object)], M.prototype, "config", void 0), r([p({ type: Object }), n("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), r([p({ type: String }), n("design:type", Object)], M.prototype, "locale", void 0), r([m("u-progress-bar"), n("design:type", Object)], M.prototype, "progressBarEl", void 0), r([h(), n("design:type", Object)], M.prototype, "hasOverlay", void 0), r([h(), n("design:type", Object)], M.prototype, "openMenu", void 0), r([h(), n("design:type", Object)], M.prototype, "hasNotice", void 0), r([h(), n("design:type", Object)], M.prototype, "routeLoading", void 0), r([h(), n("design:type", Object)], M.prototype, "mainTabStop", void 0), r([h(), n("design:type", Object)], M.prototype, "currentPath", void 0), M = S = r([f("u-sidebar-layout")], M);
+}), e("design:type", Object)], M.prototype, "state", void 0), t([p({ type: Object }), e("design:type", Object)], M.prototype, "config", void 0), t([p({ type: Object }), e("design:type", typeof Record > "u" ? Object : Record)], M.prototype, "counts", void 0), t([p({ type: String }), e("design:type", Object)], M.prototype, "locale", void 0), t([m("u-progress-bar"), e("design:type", Object)], M.prototype, "progressBarEl", void 0), t([h(), e("design:type", Object)], M.prototype, "hasOverlay", void 0), t([h(), e("design:type", Object)], M.prototype, "openMenu", void 0), t([h(), e("design:type", Object)], M.prototype, "hasNotice", void 0), t([h(), e("design:type", Object)], M.prototype, "routeLoading", void 0), t([h(), e("design:type", Object)], M.prototype, "mainTabStop", void 0), t([h(), e("design:type", Object)], M.prototype, "currentPath", void 0), M = S = t([f("u-sidebar-layout")], M);
 //#endregion
 export { M as SidebarLayout };

package/dist/types/AppConfigs.d.ts

@@ -51,6 +51,8 @@ export interface AppConfig {
     routes?: RouteConfig[];
     /**
      * 라우팅 실패 시 대체 컨텐츠 설정
+     * - 주지 않으면 `<u-empty-state>` 로 그린다 — 403(가드 거부) `no-access` · 404 `not-found` ·
+     *   그 밖 `error`(오류 메시지가 설명). 주면 이것이 그대로 쓰인다.
      */
     fallback?: FallbackRouteConfig;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "keywords": [
     "iyulab",
     "web-framework",

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

@@ -196,6 +196,9 @@ code 403 · `NotFoundError` · `ContentLoadError` · `ContentRenderError` · `Ou
 exported from `@iyulab/modern-app` — tell a blocked screen from a missing one with
 `ctx.error instanceof AccessDeniedError` and render it as `<u-empty-state variant="no-access">`.
 
+Without a `fallback`, `app.load()` draws `<u-empty-state>` itself: 403 → `no-access` · 404 → `not-found` ·
+anything else → `error` (title "Couldn’t open this page", the error message as description).
+
 ---
 
 ## `I18nInitOptions`

package/skills/modern-app/references/components/empty-state.md

@@ -25,6 +25,9 @@ action is **asking for access**.
 
 <!-- A route guard said no (403) — not an outage, so it is not announced as an alert. -->
 <u-empty-state variant="no-access"></u-empty-state>
+
+<!-- The address points at nothing (404) — the next step is checking the address or going back. -->
+<u-empty-state variant="not-found"></u-empty-state>
 ```
 
 ## Slots
@@ -38,7 +41,7 @@ action is **asking for access**.
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `variant` | `'no-data'\|'no-results'\|'error'\|'no-access'` | `'no-data'` | ✓ | Which fact is being shown; changes the default wording. `error` (could not load) announces its title; `no-access` (this user may not see it) does not |
+| `variant` | `'no-data'\|'no-results'\|'error'\|'no-access'\|'not-found'` | `'no-data'` | ✓ | Which fact is being shown; changes the default wording. `error` (could not load) announces its title; `no-access` (this user may not see it) and `not-found` (nothing at this address) do not |
 | `title` | `string` | `''` | | Override the default title |
 | `description` | `string` | `''` | | Override the default description |
 | `locale` | `string` | `''` | | Locale tag override for built-in strings |
@@ -69,18 +72,40 @@ action is **asking for access**.
 `@iyulab/components`, register others with `modernAppLocale.register(lang, …)`, or pass
 `title`/`description` per screen.
 
-## Blocked routes
+## Blocked and missing routes
 
-A route `enter` guard that returns `false` raises `AccessDeniedError` (code 403) into the app
-`fallback`. The error classes are exported from `@iyulab/modern-app`, so the fallback can tell a
-blocked screen from a missing one without depending on the router directly:
+**An app that gives `app.load()` no `fallback` gets this element by default**: a route `enter` guard
+that returns `false` (`AccessDeniedError`, code 403) shows `no-access`, an address with no route
+(`NotFoundError`, 404) shows `not-found`, and any other failure (the route could not be loaded or
+rendered) shows `error` with the page-level title "Couldn’t open this page" and the error message as
+its description. The screen is drawn inside the shell, so the sidebar stays.
+
+```typescript
+import { app } from '@iyulab/modern-app';
+import { html } from 'lit';
+
+const canAudit = () => false;   // your permission check
+
+await app.load({
+  layout: { type: 'sidebar' },
+  routes: [{ path: '/audit', enter: canAudit, render: () => html`<audit-screen></audit-screen>` }],
+  // no fallback — /audit shows <u-empty-state variant="no-access">
+});
+```
+
+Give a `fallback` to draw something else — it replaces the default entirely. The error classes are
+exported from `@iyulab/modern-app`, so it can tell a blocked screen from a missing one without
+depending on the router directly:
 
 ```typescript
 import { app, AccessDeniedError } from '@iyulab/modern-app';
 import { html } from 'lit';
 
+const canAudit = () => false;   // your permission check
+
 await app.load({
-  // …
+  layout: { type: 'sidebar' },
+  routes: [{ path: '/audit', enter: canAudit, render: () => html`<audit-screen></audit-screen>` }],
   fallback: {
     render: (ctx) => ctx.error instanceof AccessDeniedError
       ? html`<u-empty-state variant="no-access"></u-empty-state>`