@iyulab/modern-app 0.45.0 → 0.46.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.46.0] - 2026-10-08
+
+### Added
+
+- **`u-empty-state variant="no-access"`** — a screen this user may not see (a route `enter` guard returned
+  `false`). It is the fourth fact next to `no-data`, `no-results` and `error`, with its own next step (asking for
+  access) and its own default wording (English and Korean built in, `noAccessTitle`/`noAccessDescription` in
+  `modernAppLocale`). Unlike `error` it is not announced as an alert — a 403 is not an outage.
+- **The router's error classes and route types are exported from this package** — `RouteError`,
+  `AccessDeniedError`, `NotFoundError`, `ContentLoadError`, `ContentRenderError`, `OutletMissingError` and the
+  `RouteConfig`/`RouteContext`/`FallbackRouteConfig` types. A `fallback.render(ctx)` can tell a blocked screen from a
+  missing one (`ctx.error instanceof AccessDeniedError`) without declaring `@iyulab/router` itself.
+- `EmptyStateVariant` type.
+
+### Fixed
+
+- The React `IntrinsicElements` entry for `<u-empty-state>` (from `@iyulab/modern-app/react`) accepted only
+  `no-data` and `no-results`, so `variant="error"` did not type-check in JSX. It now uses the element's own type.
+
 ## [0.45.0] - 2026-10-08
 
 ### Changed (breaking)

package/dist/components/EmptyState.d.ts

@@ -1,5 +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';
 /**
  * 빈 상태 — 목록·검색 결과가 비었을 때.
  *
@@ -19,6 +21,9 @@ type ElementParts = 'host' | 'icon' | 'message' | 'title' | 'description' | 'act
  * <u-empty-state variant="error" .description=${error.message}>
  *   <u-button slot="actions" @click=${retry}>Try again</u-button>
  * </u-empty-state>
+ *
+ * <!-- 라우트 가드가 막았다(403) — 장애가 아니라 권한의 사실이다. -->
+ * <u-empty-state variant="no-access"></u-empty-state>
  * ```
  *
  * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
@@ -32,10 +37,12 @@ type ElementParts = 'host' | 'icon' | 'message' | 'title' | 'description' | 'act
 export declare class EmptyState extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
     /**
-     * `no-data` = 아직 없음 / `no-results` = 조건에 맞는 것이 없음 / `error` = 불러오지 못함.
-     * 셋은 다음 행동이 다르다(만들기 · 조건 바꾸기 · 다시 시도) — `error` 의 제목은 보조기기에 알린다(`role="alert"`).
+     * `no-data` = 아직 없음 / `no-results` = 조건에 맞는 것이 없음 / `error` = 불러오지 못함 /
+     * `no-access` = 있지만 이 사용자에게 보여 줄 수 없음(라우트 가드의 거부 · 403).
+     * 넷은 다음 행동이 다르다(만들기 · 조건 바꾸기 · 다시 시도 · 권한 요청) — `error` 의 제목은 보조기기에 알린다(`role="alert"`).
+     * `no-access` 는 알리지 않는다 — 장애가 아니라 화면의 내용이고, 라우트 완료 때 본문으로 가는 포커스가 그것을 읽게 한다.
      */
-    variant: 'no-data' | 'no-results' | 'error';
+    variant: EmptyStateVariant;
     /** 제목. 비우면 variant 기본 문구. */
     title: string;
     /** 보조 설명. 비우면 variant 기본 문구. */

package/dist/components/EmptyState.js

@@ -16,19 +16,28 @@ var d = class extends n {
 	}
 	get defaults() {
 		let e = r(this.locale || void 0);
-		return this.variant === "error" ? {
-			icon: "⚠️",
-			title: e.errorTitle,
-			description: e.errorDescription
-		} : this.variant === "no-results" ? {
-			icon: "🔍",
-			title: e.noResultsTitle,
-			description: e.noResultsDescription
-		} : {
-			icon: "📄",
-			title: e.noDataTitle,
-			description: e.noDataDescription
-		};
+		switch (this.variant) {
+			case "error": return {
+				icon: "⚠️",
+				title: e.errorTitle,
+				description: e.errorDescription
+			};
+			case "no-access": return {
+				icon: "🔒",
+				title: e.noAccessTitle,
+				description: e.noAccessDescription
+			};
+			case "no-results": return {
+				icon: "🔍",
+				title: e.noResultsTitle,
+				description: e.noResultsDescription
+			};
+			default: return {
+				icon: "📄",
+				title: e.noDataTitle,
+				description: e.noDataDescription
+			};
+		}
 	}
 	render() {
 		let e = this.defaults, t = this.description || e.description;
@@ -53,6 +62,6 @@ var d = class extends n {
 t([l({
 	type: String,
 	reflect: !0
-}), e("design:type", String)], d.prototype, "variant", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "description", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-empty-state")], d);
+}), e("design:type", Object)], d.prototype, "variant", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "title", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "description", void 0), t([l({ type: String }), e("design:type", Object)], d.prototype, "locale", void 0), t([u(), e("design:type", Object)], d.prototype, "hasActions", void 0), d = t([c("u-empty-state")], d);
 //#endregion
 export { d as EmptyState };

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export type * from './types/AppConfigs';
 export type * from './types/AppOptions';
 export type * from './types/AuthConfig';
 export type { SidebarPermissionGuard } from './layouts/SidebarPermission';
+export type { RouteConfig, RouteContext, FallbackRouteConfig } from '@iyulab/router';
+export { RouteError, NotFoundError, AccessDeniedError, ContentLoadError, ContentRenderError, OutletMissingError, } from '@iyulab/router';
 export type { SidebarIconsConfig, SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarMenuConfig, SidebarMenuItemConfig, SidebarHtmlConfig, SidebarState, } from './layouts/SidebarLayout.types';
 export type { SidebarLayoutEventMap } from './layouts/SidebarLayout.js';
 export { filterSidebarItems } from './layouts/filterSidebarItems.js';

package/dist/index.js

@@ -13,7 +13,8 @@ import { ActionBar as g } from "./components/ActionBar.js";
 import { MasterDetailLayout as _ } from "./components/MasterDetailLayout.js";
 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 b = t;
+var E = 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, 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 };
+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 };

package/dist/internals/locale.d.ts

@@ -10,6 +10,9 @@ export interface ModernAppLocaleStrings {
     /** Empty state — the list could not be loaded (`variant="error"`). */
     errorTitle: string;
     errorDescription: string;
+    /** Empty state — the screen exists but this user may not see it (`variant="no-access"` — a route guard said no). */
+    noAccessTitle: string;
+    noAccessDescription: 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

@@ -8,6 +8,8 @@ var t = {
 	noResultsDescription: "Try changing your search terms or filters.",
 	errorTitle: "Couldn’t load this list",
 	errorDescription: "Something went wrong while loading. Try again.",
+	noAccessTitle: "You don’t have access",
+	noAccessDescription: "Ask an administrator for access if you need it.",
 	detailClose: "Close",
 	toggleMobileMenu: "Toggle menu",
 	toggleSidebar: "Toggle sidebar",
@@ -26,6 +28,8 @@ n.register("en", t), n.register("ko", {
 	noResultsDescription: "검색어나 필터를 바꿔 보세요.",
 	errorTitle: "목록을 불러오지 못했습니다",
 	errorDescription: "불러오는 중 문제가 생겼습니다. 다시 시도해 주세요.",
+	noAccessTitle: "접근 권한이 없습니다",
+	noAccessDescription: "필요하면 관리자에게 권한을 요청하세요.",
 	detailClose: "닫기",
 	toggleMobileMenu: "메뉴 열고 닫기",
 	toggleSidebar: "사이드바 열고 닫기",
@@ -62,6 +66,8 @@ function l(e) {
 		noResultsDescription: t("noResultsDescription"),
 		errorTitle: t("errorTitle"),
 		errorDescription: t("errorDescription"),
+		noAccessTitle: t("noAccessTitle"),
+		noAccessDescription: t("noAccessDescription"),
 		detailClose: t("detailClose"),
 		toggleMobileMenu: t("toggleMobileMenu"),
 		toggleSidebar: t("toggleSidebar"),

package/dist/react.d.ts

@@ -3,6 +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 { EmptyStateVariant } from './components/EmptyState.js';
 import { TimelineItemColor } from './components/TimelineItem.js';
 import { InfoFieldFormat, InfoFieldSize, InfoFieldTrend, InfoFieldTone } from './components/InfoField.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
@@ -37,7 +38,8 @@ declare module 'react' {
                 sticky?: boolean;
             };
             'u-empty-state': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-                variant?: 'no-data' | 'no-results';
+                /** 요소의 유니온을 그대로 쓴다 — 손으로 옮긴 유니온이 `'error'` 를 빠뜨린 채 남아 있었다. */
+                variant?: EmptyStateVariant;
                 title?: string;
                 description?: string;
                 locale?: string;

package/package.json

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

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

@@ -190,8 +190,11 @@ interface FallbackRouteConfig {
 }
 ```
 
-`RouteError` is importable from `@iyulab/router` (`code`/`original`/`timestamp` alongside the
-inherited `message`) — always populated when the fallback fires.
+`RouteError` (`code`/`original`/`timestamp` alongside the inherited `message`) is always populated
+when the fallback fires. It and its subclasses (`AccessDeniedError` — an `enter` guard returned `false`,
+code 403 · `NotFoundError` · `ContentLoadError` · `ContentRenderError` · `OutletMissingError`) are
+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">`.
 
 ---
 

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

@@ -8,6 +8,8 @@ Shown when a list or a search comes back with nothing.
 *nothing has been created yet* and the next action is **create**. The second means *nothing
 matches these conditions* and the next action is **change the filter**. Show the same wording
 for both and a user with a filter still applied reads it as *"my data disappeared"*.
+The same holds for a screen this user may not see: it is neither empty nor broken, and its next
+action is **asking for access**.
 
 ```html
 <u-empty-state variant="no-data" title="No orders yet">
@@ -20,6 +22,9 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 <u-empty-state variant="error" description="Request failed (503)">
   <u-button slot="actions">Try again</u-button>
 </u-empty-state>
+
+<!-- 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>
 ```
 
 ## Slots
@@ -33,7 +38,7 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `variant` | `'no-data'\|'no-results'\|'error'` | `'no-data'` | ✓ | Which fact is being shown; changes the default wording. `error` (could not load) announces its title |
+| `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 |
 | `title` | `string` | `''` | | Override the default title |
 | `description` | `string` | `''` | | Override the default description |
 | `locale` | `string` | `''` | | Locale tag override for built-in strings |
@@ -63,3 +68,23 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 ⚠ Default wording is **English**, with Korean built in — choose the language with `Locale.set()` of
 `@iyulab/components`, register others with `modernAppLocale.register(lang, …)`, or pass
 `title`/`description` per screen.
+
+## Blocked 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:
+
+```typescript
+import { app, AccessDeniedError } from '@iyulab/modern-app';
+import { html } from 'lit';
+
+await app.load({
+  // …
+  fallback: {
+    render: (ctx) => ctx.error instanceof AccessDeniedError
+      ? html`<u-empty-state variant="no-access"></u-empty-state>`
+      : html`<u-empty-state variant="error" .description=${ctx.error.message}></u-empty-state>`,
+  },
+});
+```