@iyulab/modern-app 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [0.26.0] - 2026-09-23
+
+### Changed
+
+- 🔴 **Built-in strings follow `Locale` of `@iyulab/components` — the language is chosen once, with
+  `Locale.set()`.** This package kept a registry of its own (`registerLocale`/`setDefaultLocale`)
+  while the primitives and `@iyulab/flex-table` follow `Locale`, so an app that set the language
+  once got the shell's `Toggle sidebar`/`Toggle menu`/`Close` labels, the back link and empty-state
+  copy in English in the middle of a translated screen — silently. The strings now live in a
+  `Locale.namespace('modern-app')`, and resolve through the same chain as the primitives (so
+  `lang="zh"` reaches a `zh-CN` table). An element's own `locale` attribute still overrides the
+  active language for that element.
+
+### Added
+
+- **`modernAppLocale`** — the namespace handle, for translations:
+  `modernAppLocale.register('ko', { back: '뒤로' })`, the same shape as `flexTableLocale.register`.
+  `wizardStepAnnouncement` is a template there (`'{total}단계 중 {index}단계: {label}'`).
+  **`ModernAppMessageKey`** is its key type.
+
+### Deprecated
+
+- **`registerLocale` and `setDefaultLocale`.** Both keep working: `registerLocale` forwards to
+  the namespace (a function-valued `wizardStepAnnouncement` still works), and a `setDefaultLocale()`
+  call still takes precedence over `Locale` until it is called with `undefined` — an app that
+  calls both with the same language sees no change and can drop `setDefaultLocale` at its leisure.
+
+⚠ **Requires `@iyulab/components` 1.45.0** (for `LocaleNamespace.textIn`, which resolves an
+element's own `locale`).
+
 ## [0.25.0] - 2026-09-23
 
 ### Added

package/README.md

@@ -118,6 +118,30 @@ import { translate } from '@iyulab/modern-app';
 html`<p>${translate('common::greeting')}</p>`;
 ```
 
+### Built-in strings
+
+The package's own strings — the page header's back link, empty-state copy, the shell's toggle and
+close labels, the wizard's buttons and step announcement — are English by default and live in the
+`modern-app` namespace of `@iyulab/components`' `Locale`. Register translations there and pick the
+language once, with `Locale.set()`; the primitives and `@iyulab/flex-table` follow the same call:
+
+```typescript
+import { Locale } from '@iyulab/components';
+import { modernAppLocale } from '@iyulab/modern-app';
+
+modernAppLocale.register('ko', {
+  back: '뒤로',
+  toggleSidebar: '사이드바 접기/펼치기',
+  wizardStepAnnouncement: '{total}단계 중 {index}단계: {label}',
+});
+Locale.set('ko');
+```
+
+A partial table is enough — untranslated keys fall back to English. An element's own `locale`
+attribute overrides the active language for that element. `registerLocale`/`setDefaultLocale` still
+work but are deprecated: a `setDefaultLocale()` call takes precedence over `Locale` until it is
+called with `undefined`.
+
 ### 부팅 인증 게이트 (`auth`)
 
 셸을 만들기 전에 세션을 판정한다. 소비앱이 `app.load()` 앞단에 손으로 짜던 "me 조회 → 미인증이면 로그인, 인증이면 앱 로드" 게이트를 표준화한다. 세션 조회/로그인 HTTP 는 `@iyulab/enterprise` 의 `createAuthClient` 가, 세션-중 401 은 `createODataService` 의 `onUnauthorized` 가 담당한다(프레임워크는 오케스트레이션만 소유).

package/dist/components/EmptyState.d.ts

@@ -19,7 +19,7 @@ type ElementParts = 'host' | 'icon' | 'title' | 'description' | 'actions';
  * ```
  *
  * ⚠**기본 문구는 영어다** — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
- * 한국어는 `registerLocale('ko', …)` 로 소비자가 등록하고, 화면별로 덮으려면
+ * 한국어는 `modernAppLocale.register('ko', …)` 로 소비자가 등록하고(언어는 `Locale.set()`), 화면별로 덮으려면
  * `title`·`description` 을 준다.
  *
  * ★이 줄은 «한국어다»라고 적혀 있었고 **같은 파일의 `locale` 프로퍼티 주석이 «영어다»라고
@@ -35,9 +35,9 @@ export declare class EmptyState extends StyledElement<ElementParts> {
     /** 보조 설명. 비우면 variant 기본 문구. */
     description: string;
     /**
-     * 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 **영어**.
+     * 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일.
      * ⚠기본 문구는 영어다 — 이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다.
-     * 한국어는 `registerLocale('ko', …)` 로 소비자가 등록한다.
+     * 한국어는 `modernAppLocale.register('ko', …)` 로 소비자가 등록한다.
      */
     locale: string;
     /** 액션 슬롯 배정 상태 — CSS `:has()` 로는 알 수 없다(`internals/slotted.ts` 참조). */

package/dist/components/MasterDetailLayout.d.ts

@@ -47,7 +47,7 @@ export declare class MasterDetailLayout extends StyledElement<ElementParts> {
      */
     overlayBreakpoint: number;
     /**
-     * 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 영어.
+     * 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일.
      * 닫기 버튼의 접근성 라벨에만 쓰인다.
      */
     locale: string;

package/dist/components/PageHeader.d.ts

@@ -33,10 +33,10 @@ export declare class PageHeader extends StyledElement<ElementParts> {
     /**
      * 뒤로가기 링크 문구. 비우면 locale 레지스트리 값, 그것도 없으면 **영어**(`Back`).
      * ⚠이 패키지는 범용 층이라 특정 언어를 기본값으로 가질 수 없다 —
-     * 한국어는 `registerLocale('ko', { back: '뒤로' })` 로 소비자가 등록한다.
+     * 한국어는 `modernAppLocale.register('ko', { back: '뒤로' })` 로 소비자가 등록한다.
      */
     backLabel: string;
-    /** 언어 태그. 비우면 `setDefaultLocale()` 값, 그것도 없으면 영어. */
+    /** 언어 태그 — 이 요소만 문서와 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일. */
     locale: string;
     /**
      * 슬롯 배정 상태. ★CSS 로는 알 수 없다 — `<slot>` 자신이 자식이라 `:has(*)` 가

package/dist/index.d.ts

@@ -15,8 +15,8 @@ export { MasterDetailLayout } from './components/MasterDetailLayout.js';
 export { Wizard } from './components/Wizard.js';
 export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';
 export { translate } from './translate.js';
-export { registerLocale, setDefaultLocale, getLocaleStrings, getDefaultLocale, } from './internals/locale.js';
-export type { ModernAppLocaleStrings } from './internals/locale.js';
+export { modernAppLocale, registerLocale, setDefaultLocale, 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';
 export { app };

package/dist/index.js

@@ -1,17 +1,17 @@
 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, registerLocale as a, setDefaultLocale as o } from "./internals/locale.js";
-import { PageHeader as s } from "./components/PageHeader.js";
-import { GroupBox as c } from "./components/GroupBox.js";
-import { InfoSection as l } from "./components/InfoSection.js";
-import { InfoField as u, isBlank as d } from "./components/InfoField.js";
-import { EmptyState as f } from "./components/EmptyState.js";
-import { ActionBar as p } from "./components/ActionBar.js";
-import { MasterDetailLayout as m } from "./components/MasterDetailLayout.js";
-import { Wizard as h } from "./components/Wizard.js";
-import { translate as g } from "./translate.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 { ActionBar as m } from "./components/ActionBar.js";
+import { MasterDetailLayout as h } from "./components/MasterDetailLayout.js";
+import { Wizard as g } from "./components/Wizard.js";
+import { translate as _ } from "./translate.js";
 //#region src/index.ts
-var _ = t;
+var v = t;
 //#endregion
-export { p as ActionBar, f as EmptyState, c as GroupBox, u as InfoField, l as InfoSection, m as MasterDetailLayout, s as PageHeader, e as ScreenObserver, h as Wizard, t as app, _ as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, d as isBlank, a as registerLocale, o as setDefaultLocale, g as translate };
+export { m as ActionBar, p as EmptyState, l as GroupBox, d as InfoField, u as InfoSection, h as MasterDetailLayout, c as PageHeader, e as ScreenObserver, g as Wizard, t as app, v as default, n as filterSidebarItems, r as getDefaultLocale, i as getLocaleStrings, f as isBlank, a as modernAppLocale, o as registerLocale, s as setDefaultLocale, _ as translate };

package/dist/internals/locale.d.ts

@@ -1,22 +1,3 @@
-/**
- * Lightweight locale registry for modern-app chrome strings.
- *
- * Scope: library-internal chrome strings only (empty-state copy, back label).
- * NOT a general i18n framework — the app's own content is the app's business.
- *
- * ★**English is the built-in default.** This package sits in the *generic* layer
- * (see the three-layer split: `components` = neutral primitives, `modern-app` =
- * what a modern app usually provides, `enterprise` = iyulab house style).
- * A generic layer that ships Korean defaults excludes every non-Korean consumer —
- * the same objection this repo raised against baking a house aesthetic into
- * `components`. Language excludes harder than aesthetics: an odd-looking default
- * is awkward, an unreadable one is unusable.
- *
- * Mirrors the registry already established in `u-widgets` — one pattern, not two.
- *
- *   registerLocale('ko', { back: '뒤로', noDataTitle: '아직 등록된 항목이 없습니다' });
- *   setDefaultLocale('ko');
- */
 export interface ModernAppLocaleStrings {
     /** Back button label in the page header. */
     back: string;
@@ -39,18 +20,26 @@ export interface ModernAppLocaleStrings {
     wizardStepAnnouncement: (index: number, total: number, label: string) => string;
 }
 /**
- * Register a locale. Partial overrides are merged with the English defaults,
- * so a consumer can translate one string without restating the rest.
+ * Keys of the `modern-app` namespace. All strings — `wizardStepAnnouncement` is a template with
+ * `{index}`, `{total}` and `{label}` placeholders (`'Step {index} of {total}: {label}'`).
+ */
+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;
-/** Set the locale used when a component does not specify one. */
+/**
+ * @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 strings for a language tag.
- *
- * Order: exact match (`ko-KR`) → base language (`ko`) → English.
- * ⚠The base-language step matters: consumers register `ko` but browsers report
- * `ko-KR`, and without it every registration would silently miss.
+ * Resolve every chrome string for a language tag (empty → `setDefaultLocale` → active `Locale`).
  */
 export declare function getLocaleStrings(lang?: string): ModernAppLocaleStrings;
 /** The English defaults — for tests and reference. */

package/dist/internals/locale.js

@@ -1,5 +1,6 @@
+import { Locale as e } from "@iyulab/components/dist/utilities/Locale.js";
 //#region src/internals/locale.ts
-var e = {
+var t = {
 	back: "Back",
 	noDataTitle: "Nothing here yet",
 	noDataDescription: "",
@@ -10,26 +11,53 @@ var e = {
 	toggleSidebar: "Toggle sidebar",
 	wizardBack: "Back",
 	wizardNext: "Next",
-	wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`
-}, t = /* @__PURE__ */ new Map(), n;
-function r(n, r) {
-	t.set(n.toLowerCase(), {
-		...e,
-		...r
-	});
+	wizardStepAnnouncement: "Step {index} of {total}: {label}"
+}, n = e.namespace("modern-app");
+n.register("en", t);
+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 i(e) {
-	n = e;
+function s(e) {
+	r = e;
 }
-function a(r) {
-	let i = (r ?? n)?.toLowerCase();
-	if (!i) return e;
-	if (t.has(i)) return t.get(i);
-	let a = i.split("-")[0];
-	return a !== i && t.has(a) ? t.get(a) : e;
+function c(e, t, i) {
+	let a = n.textIn(e || r, t, i);
+	return a === t ? "" : a;
 }
-function o() {
-	return { ...e };
+function l(e) {
+	let t = (t) => c(e, t);
+	return {
+		back: t("back"),
+		noDataTitle: t("noDataTitle"),
+		noDataDescription: t("noDataDescription"),
+		noResultsTitle: t("noResultsTitle"),
+		noResultsDescription: t("noResultsDescription"),
+		detailClose: t("detailClose"),
+		toggleMobileMenu: t("toggleMobileMenu"),
+		toggleSidebar: t("toggleSidebar"),
+		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;
+		}
+	};
+}
+function u() {
+	return {
+		...t,
+		wizardStepAnnouncement: (e, t, n) => `Step ${e} of ${t}: ${n}`
+	};
 }
 //#endregion
-export { o as getDefaultLocale, a as getLocaleStrings, r as registerLocale, i as setDefaultLocale };
+export { u as getDefaultLocale, l as getLocaleStrings, n as modernAppLocale, o as registerLocale, s as setDefaultLocale };

package/dist/layouts/SidebarLayout.d.ts

@@ -9,7 +9,7 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
     config?: SidebarLayoutConfig;
-    /** 크롬 문자열(토글 버튼 접근성 라벨 등) 로케일 — `registerLocale`로 등록한 언어 태그 */
+    /** 크롬 문자열(토글 버튼 접근성 라벨 등) 로케일 — 이 요소만 다른 언어로 쓸 때. 비우면 `Locale` 의 활성 로케일 */
     locale: string;
     progressBarEl: UProgressBar;
     /** overlay 슬롯 배정 상태 — CSS `:has()`로는 알 수 없다(`internals/slotted.ts` 참조). */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -64,7 +64,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.43.0",
+    "@iyulab/components": ">=1.45.0",
     "@lit/react": ">=1.0.8",
     "react": ">=18.0.0"
   },

package/skills/modern-app/SKILL.md

@@ -141,6 +141,30 @@ html`<p>${translate('namespace::greeting')}</p>`;
 // layout: { main: [{ type: 'link', label: translate('nav::home'), href: '/' }] }
 ```
 
+### Built-in strings (`modernAppLocale`)
+
+The package's own strings — the page header's back link, empty-state copy, the shell's toggle and
+close labels, the wizard's buttons and step announcement — are English by default and live in the
+`modern-app` namespace of `@iyulab/components`' `Locale`. Register translations there and pick the
+language once, with `Locale.set()`; the primitives and `@iyulab/flex-table` follow the same call:
+
+```typescript
+import { Locale } from '@iyulab/components';
+import { modernAppLocale } from '@iyulab/modern-app';
+
+modernAppLocale.register('ko', {
+  back: '뒤로',
+  toggleSidebar: '사이드바 접기/펼치기',
+  wizardStepAnnouncement: '{total}단계 중 {index}단계: {label}',
+});
+Locale.set('ko');
+```
+
+A partial table is enough — untranslated keys fall back to English. An element's own `locale`
+attribute overrides the active language for that element. `registerLocale`/`setDefaultLocale` still
+work but are deprecated: a `setDefaultLocale()` call takes precedence over `Locale` until it is
+called with `undefined`.
+
 ---
 
 ## Sidebar Layout

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

@@ -54,5 +54,6 @@ for both and a user with a filter still applied reads it as *"my data disappeare
 | `--u-space-lg` | Actions row top spacing |
 | `--u-space-sm` | Gap between actions |
 
-⚠ Default wording is **English** — register others with `registerLocale('ko', …)`, or pass
-`title`/`description` per screen.
+⚠ Default wording is **English** — register others with `modernAppLocale.register('ko', …)` and
+choose the language with `Locale.set()` of `@iyulab/components`, or pass `title`/`description` per
+screen.

package/skills/modern-app/references/components/info-field.md

@@ -73,6 +73,10 @@ 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
+as well once it exists.
+
 ## CSS Parts
 
 | Part | Description |

package/skills/modern-app/references/components/page-header.md

@@ -59,4 +59,5 @@ screens nobody opens.
 | `--u-space-3xs` | Back-arrow-to-label spacing |
 
 ⚠ Built-in strings default to **English** — this package is a generic layer and cannot pick a
-language. Register others with `registerLocale('ko', { back: '뒤로' })`.
+language. Register others with `modernAppLocale.register('ko', { back: '뒤로' })` and choose the
+language with `Locale.set()` of `@iyulab/components`.