@iyulab/modern-app 0.47.1 → 0.49.0

package/dist/components/SidebarGroup.styles.js

@@ -2,7 +2,7 @@ import { css as e } from "lit";
 //#region src/components/SidebarGroup.styles.ts
 var t = e`
   :host {
-    /* SidebarLink 과 같은 원천 — 그룹 강조는 활성 링크와 같은 색 계열이어야 한다 */
+    
     --group-accent: var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2));
 
     display: flex;
@@ -19,7 +19,7 @@ var t = e`
     justify-content: space-between;
     gap: 12px;
     padding: 8px 12px;
-    /* 호스트 하한(--u-target-size, 미설정 = 0) — 상자는 border-box(기반 스타일)라 여백을 포함한다. */
+    
     min-height: var(--u-target-size, 0px);
     background-color: transparent;
     border: none;
@@ -33,10 +33,10 @@ var t = e`
     padding: 8px;
   }
   button[selected] {
-    /* 패널 위 텍스트라 강조색을 그대로 쓰면 대비가 부족하다(blue-600 = 3.68:1).
-       기본은 활성 배경과 같은 파생식으로 한 단 어둡게 해 AA 를 넘긴다(4.85:1) — 활성 면이 «진한» 색이라는 전제다.
-       연한 활성 면(+ 진한 글자)을 쓰는 테마에서는 그 면을 15% 어둡게 한 색이 패널 위에서 1.6:1 로 묻혔다.
-       그런 테마는 --app-sidebar-group-active-fg 를 «패널 위 강조 글자» 로 정한다. */
+    
+
+
+
     color: var(--app-sidebar-group-active-fg, color-mix(in srgb, var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2)) 85%, black));
   }
   button:hover {
@@ -54,15 +54,15 @@ var t = e`
   .icon {
     flex-shrink: 0;
     color: inherit;
-    /* 링크와 같은 토큰 — 한 레일의 아이콘은 한 크기다(위계는 들여쓰기·캐럿·레일이 진다). */
+    
     font-size: var(--app-sidebar-icon-size, 20px);
   }
 
-  /*
-   * ★그룹도 자식 링크와 같은 label 단이다. 종전에는 굵기로 위계를 냈지만(600 vs 500),
-   *   자식은 이미 **32px 들여쓰기 + 2px 레일 + 캐럿**으로 갈린다 — 굵기 한 단을 위계에
-   *   더 쓰면 스케일 밖의 다섯 번째 값이 생긴다. 위계는 배치가 지고 단은 용도가 진다.
-   */
+  
+
+
+
+
   .label {
     flex: 1;
     font-size: var(--u-text-label-size, 13px);
@@ -99,10 +99,10 @@ var t = e`
     opacity: 0;
   }
 
-  /*
-   * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
-   * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
-   */
+  
+
+
+
   [part~='label'][compact] {
     position: absolute;
     width: 1px;

package/dist/components/SidebarLink.styles.js

@@ -2,10 +2,10 @@ import { css as e } from "lit";
 //#region src/components/SidebarLink.styles.ts
 var t = e`
   :host {
-    /* 활성 배경의 단일 원천. 소비자는 셸 계약 토큰(--app-sidebar-active-bg) 또는
-       역할 토큰(--u-primary-color) 어느 쪽을 덮어도 hover 파생까지 함께 따라온다.
-       팔레트(--u-blue-600)를 직접 읽으면 브랜드를 바꾸려는 소비자가 "진짜 파랑"이
-       필요한 배지·차트까지 함께 오염시키는 길밖에 없다. */
+    
+
+
+
     --link-active-bg: var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2));
 
     display: block;
@@ -38,7 +38,7 @@ var t = e`
     justify-content: flex-start;
     gap: var(--app-sidebar-item-gap, 12px);
     padding: var(--app-sidebar-item-padding, 8px 12px);
-    /* 호스트 하한(--u-target-size, 미설정 = 0). */
+    
     box-sizing: border-box;
     min-height: var(--u-target-size, 0px);
   }
@@ -53,14 +53,14 @@ var t = e`
     color: var(--link-icon-color, inherit);
     font-size: var(--app-sidebar-icon-size, 20px);
   }
-  /* Selected always wins over any consumer-supplied --link-icon-color — a
-   * high-contrast icon on the active background matters more than a brand tint. */
+  
+
   :host([selected]) u-icon {
     color: var(--app-sidebar-active-icon-color, var(--app-sidebar-active-fg, var(--u-txt-color-inverse, #FFFFFF)));
   }
 
-  /* 활성 표시 막대 — 시작 변(좌→우 언어에서 왼쪽). 기본 색은 활성 면과 같아 보이지 않는다(기본 외형 불변).
-     밝은 활성 면처럼 면 색만으로 현재 위치를 말하지 않는 셸이 위치를 한 번 더 표시하는 자리다. */
+  
+
   :host([selected]) .container::before {
     content: '';
     position: absolute;
@@ -71,11 +71,11 @@ var t = e`
     background: var(--app-sidebar-active-indicator-color, var(--app-sidebar-active-bg, var(--u-primary-color, #1976D2)));
   }
 
-  /*
-   * ★내비 항목은 «대상의 짧은 이름» = label 단이다(용도 배정).
-   * ⚠행 높이는 바뀌지 않는다: 13 x 1.5 = 19.5px < 아이콘 20px 이라 행을 잡는 것은
-   *   여전히 아이콘이다. 접힌 사이드바(아이콘만)와 펼친 사이드바의 행 높이가 같아야 한다.
-   */
+  
+
+
+
+
   span {
     flex: 1;
     font-size: var(--u-text-label-size, 13px);
@@ -86,11 +86,11 @@ var t = e`
     text-overflow: ellipsis;
   }
 
-  /*
-   * 접힌 상태의 라벨 - 시각적으로만 숨긴다. 접근성 트리에는 남아 항목의 이름이 된다
-   * (hidden 은 트리에서도 빼서 이름 없는 항목을 만들었다). 절대배치라 flex 배치와 gap 에 끼지 않는다.
-   */
-  /* 새 창 알림 — 화면에는 없고 링크의 접근성 이름에만 붙는다(KWCAG 7.2.1). */
+  
+
+
+
+  
   .new-tab-hint,
   [part~='label'][compact] {
     position: absolute;
@@ -104,8 +104,8 @@ var t = e`
     border: 0;
   }
 
-  /* 건수 — 라벨 끝, 숫자는 표 숫자처럼 자릿수가 흔들리지 않게. 접힌 사이드바에서는 라벨처럼
-     시각적으로만 숨긴다(접근 가능한 이름에는 남는다). */
+  
+
   .count {
     flex: none;
     margin-inline-start: auto;

package/dist/components/SidebarSection.styles.js

@@ -14,14 +14,14 @@ var t = e`
     padding: 8px 12px 4px;
   }
 
-  /* 섹션 제목·부제는 본문보다 약한 두 단이다 — 제목 = 보조 글자(--u-txt-color-weak),
-     부제 = 3단 글자(--u-txt-color-weaker, components 2.0). 종전에는 역할 층에 AA 를 넘는
-     3단이 없어 팔레트(neutral-700/600)를 직접 읽었고, 그래서 테마가 이 두 줄에 닿지 않았다. */
-  /*
-   * ★크기·굵기·자간은 스케일의 단으로 옮겼다(용도 배정).
-   * ⚠ overline 에 대문자 변환을 붙이지 않는다 — 이 줄에 ellipsis 가 있어 잘림이 늘고,
-   *   섹션 이름은 소비자가 쓴 글자다(CJK 에는 효과도 없다).
-   */
+  
+
+
+  
+
+
+
+
   .title {
     color: var(--u-txt-color-weak, #616161);
     font-size: var(--u-text-overline-size, 11px);

package/dist/components/TimelineItem.styles.js

@@ -7,7 +7,7 @@ var t = e`
     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;
@@ -22,11 +22,11 @@ var t = e`
     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));
@@ -68,10 +68,10 @@ var t = e`
     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;
   }
@@ -113,7 +113,7 @@ var t = e`
     color: var(--u-txt-color-weak, #616161);
     overflow-wrap: anywhere;
   }
-  /* No body content — no gap under the header. */
+  
   .body.empty {
     display: none;
   }

package/dist/components/Wizard.styles.js

@@ -3,8 +3,8 @@ import { css as e } from "lit";
 var t = e`
   :host {
     display: flex;
-    /* 위치 지정 — 안의 숨김 문구(절대 위치 · 1px)의 포함 블록이 이 요소가 된다. 없으면 포함 블록이 문서 전체라 호스트의
-       overflow 감싸개를 건너뛰고 그 정적 위치에서 문서를 늘렸다(위치 지정되지 않은 스크롤 상자 안에서). */
+    
+
     position: relative;
     flex-direction: row;
     gap: var(--u-space-xl, 20px);
@@ -42,7 +42,7 @@ var t = e`
     background: none;
     border: none;
     padding: var(--u-space-2xs, 4px) 0;
-    /* 호스트 하한(--u-target-size, 미설정 = 0). */
+    
     min-height: var(--u-target-size, 0px);
     font: inherit;
     color: var(--u-txt-color-weak, #616161);
@@ -53,9 +53,9 @@ var t = e`
     color: var(--u-txt-color-disabled, #BDBDBD);
     cursor: not-allowed;
   }
-  /* 도달은 못 하지만(linear 모드에서 아직 안 지나온 스텝) disabled 는 아니다 —
-     소비자가 미리 그 존재는 보여주고 싶을 수 있어 시각적으로 흐리되 마우스 커서는
-     "막혔다"가 아니라 "여기는 아직"으로 남긴다. */
+  
+
+
   .step[aria-disabled="true"]:not([disabled]) {
     cursor: default;
     opacity: 0.6;
@@ -100,9 +100,9 @@ var t = e`
     gap: var(--u-space-sm, 8px);
   }
 
-  /* live region — 화면엔 안 보이지만 스크린리더는 읽는다. 폭/높이는 디자인 토큰이 아니라
-     "존재는 하되 렌더 크기는 0에 가까워야" 하는 구조값이라 var() 로 감싼다(리터럴 스캔
-     예외 — 시트 자체와 무관한 값이라 시트에 실을 이유가 없다). */
+  
+
+
   .announcement {
     position: absolute;
     overflow: hidden;

package/dist/{internals/default-fallback.d.ts → defaultFallback.d.ts}

@@ -1,5 +1,5 @@
 import { FallbackRouteConfig, RouteError } from '@iyulab/router';
-import { EmptyStateVariant } from '../components/EmptyState.js';
+import { EmptyStateVariant } from './components/EmptyState.js';
 /**
  * `app.load()` 에 `fallback` 을 주지 않은 앱의 라우팅 실패 화면 — 앱 프레임워크의 빈 상태 어휘로 그린다.
  *
@@ -15,4 +15,19 @@ import { EmptyStateVariant } from '../components/EmptyState.js';
  * - 소비자가 `fallback` 을 주면 그것이 그대로 이긴다(이 모듈은 쓰이지 않는다).
  */
 export declare function variantOf(error: Pick<RouteError, 'code'>): EmptyStateVariant;
+/**
+ * 라우팅 실패 화면 — `app.load()` 가 `fallback` 없이 쓰는 바로 그것.
+ *
+ * ★**왜 공개하는가**(#977): 실패를 이 패키지의 말과 모양으로 그리는 정책은 이 패키지 것인데, 종전에는 `App` 경로만
+ *   받았다. `Router` 를 직접 구성하는 앱(셸을 자기 라우트 트리의 부모로 그리는 경우 등)은 매핑을 베껴야 했고, 베낀
+ *   쪽은 판이 고친 것(0.47.1 의 탭 제목)을 받지 못했다. 이 값을 넘기면 판이 바뀔 때 같이 바뀐다.
+ *
+ * 상태가 없다 — 로캘은 그릴 때 읽는다. 일부만 바꾸려면 감싼다: `{ ...defaultFallback, render: (ctx) => … }`.
+ *
+ * @example
+ * ```ts
+ * import { defaultFallback } from '@iyulab/modern-app';
+ * new Router({ root, routes, fallback: defaultFallback });
+ * ```
+ */
 export declare const defaultFallback: FallbackRouteConfig;

package/dist/{internals/default-fallback.js → defaultFallback.js}

@@ -1,6 +1,6 @@
-import { getLocaleStrings as e } from "./locale.js";
-import { EmptyState as t } from "../components/EmptyState.js";
-//#region src/internals/default-fallback.ts
+import { getLocaleStrings as e } from "./internals/locale.js";
+import { EmptyState as t } from "./components/EmptyState.js";
+//#region src/defaultFallback.ts
 function n(e) {
 	switch (String(e.code)) {
 		case "403": return "no-access";

package/dist/index.d.ts

@@ -5,6 +5,7 @@ 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 { defaultFallback } from './defaultFallback.js';
 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';
@@ -22,7 +23,7 @@ export type { MasterDetailLayoutEventMap } from './components/MasterDetailLayout
 export { Wizard } from './components/Wizard.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail, WizardEventMap } from './components/Wizard.js';
 export { translate } from './translate.js';
-export { modernAppLocale, registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
+export { modernAppLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
 export type { ModernAppLocaleStrings, ModernAppMessageKey } from './internals/locale.js';
 export { ScreenObserver } from './internals/ScreenObserver.js';
 export type { ScreenSize, ScreenObserverConfig, ScreenResizeEvent } from './internals/ScreenObserver.js';

package/dist/index.js

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

package/dist/internals/locale.d.ts

@@ -46,19 +46,7 @@ export type ModernAppMessageKey = keyof ModernAppLocaleStrings;
 /** The `modern-app` chrome-string namespace. Register translations here; pick the language with `Locale.set()`. */
 export declare const modernAppLocale: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<keyof ModernAppLocaleStrings>;
 /**
- * @deprecated Register with `modernAppLocale.register(lang, strings)` and choose the language with
- * `Locale.set()`. This forwards to the namespace; a function-valued `wizardStepAnnouncement` keeps
- * working (the namespace form is a `{index}`/`{total}`/`{label}` template).
- */
-export declare function registerLocale(lang: string, strings: Partial<ModernAppLocaleStrings>): void;
-/**
- * @deprecated Choose the language with `Locale.set()` of `@iyulab/components` — this package now
- * follows it. When called, this still takes precedence over `Locale` for elements without their
- * own `locale`; `setDefaultLocale(undefined)` hands the choice back to `Locale`.
- */
-export declare function setDefaultLocale(lang: string | undefined): void;
-/**
- * Resolve every chrome string for a language tag (empty → `setDefaultLocale` → active `Locale`).
+ * Resolve every chrome string for a language tag (empty → the active `Locale`).
  */
 export declare function getLocaleStrings(lang?: string): ModernAppLocaleStrings;
 /** The English defaults — for tests and reference. */

package/dist/internals/locale.js

@@ -46,24 +46,12 @@ n.register("en", t), n.register("ko", {
 	wizardNext: "다음",
 	wizardStepAnnouncement: "{total}단계 중 {index}단계: {label}"
 });
-var r, i = /* @__PURE__ */ new Map(), a = "\0modern-app:announcer:";
-function o(e, t) {
-	let { wizardStepAnnouncement: r, ...o } = t, s = { ...o };
-	if (r) {
-		let t = e.toLowerCase();
-		i.set(t, r), s.wizardStepAnnouncement = a + t;
-	}
-	n.register(e, s);
+function r(e, t, r) {
+	let i = n.textIn(e || void 0, t, r);
+	return i === t ? "" : i;
 }
-function s(e) {
-	r = e;
-}
-function c(e, t, i) {
-	let a = n.textIn(e || r, t, i);
-	return a === t ? "" : a;
-}
-function l(e) {
-	let t = (t) => c(e, t);
+function i(e) {
+	let t = (t) => r(e, t);
 	return {
 		back: t("back"),
 		noDataTitle: t("noDataTitle"),
@@ -85,21 +73,18 @@ function l(e) {
 		pageLoading: t("pageLoading"),
 		wizardBack: t("wizardBack"),
 		wizardNext: t("wizardNext"),
-		wizardStepAnnouncement: (t, n, r) => {
-			let o = c(e, "wizardStepAnnouncement", {
-				index: t,
-				total: n,
-				label: r
-			});
-			return o.startsWith(a) ? i.get(o.slice(22))(t, n, r) : o;
-		}
+		wizardStepAnnouncement: (t, n, i) => r(e, "wizardStepAnnouncement", {
+			index: t,
+			total: n,
+			label: i
+		})
 	};
 }
-function u() {
+function a() {
 	return {
 		...t,
 		wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`
 	};
 }
 //#endregion
-export { u as getDefaultLocale, l as getLocaleStrings, n as modernAppLocale, o as registerLocale, s as setDefaultLocale };
+export { a as getDefaultLocale, i as getLocaleStrings, n as modernAppLocale };