@iyulab/modern-app 0.39.0 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.40.0] - 2026-10-07
+
+### Changed
+
+- **With `i18n` configured, i18next's language drives the whole app** — at load and on every `changeLanguage()` it is
+  handed to `@iyulab/components`' `Locale` (shell, primitives and component chrome follow, re-rendering on screen) and
+  to `<html lang>` (WCAG 3.1.1). Before, `changeLanguage('ko')` changed the app's own text while button names, empty
+  states and validation messages stayed in the old language, and a first load could show two languages when i18next's
+  `lng` differed from `<html lang>` or the browser's. Without `i18n` nothing changes — `Locale.set()` chooses.
+- **Requires `@iyulab/components` 2.8.0** (peer `>=2.8.0`) — the version whose components re-render on a locale switch.
+
 ## [0.39.0] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -148,7 +148,9 @@ html`<p>${translate('common::greeting')}</p>`;
 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 — live in the `modern-app` namespace of
 `@iyulab/components`' `Locale`. English and Korean are built in, English being the default; pick the
-language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` follow the same call.
+language once, with `Locale.set()` — the primitives and `@iyulab/flex-table` follow the same call. With
+`i18n` configured you do not call it: i18next's language (at load and on every `changeLanguage()`) is
+handed to `Locale` and to `<html lang>`.
 Register other languages, or your own wording, in the same namespace:
 
 ```typescript

package/dist/App.d.ts

@@ -14,6 +14,8 @@ declare class App {
     private _screen?;
     private _user?;
     private _gateTeardown?;
+    /** i18next 언어 → components `Locale` 동기화 해제(`unload`). */
+    private _languageSync?;
     private constructor();
     /** 싱글톤 인스턴스 반환 */
     static get instance(): App;
@@ -32,6 +34,13 @@ declare class App {
     /** 앱 로드 및 초기화 */
     load(config: AppConfig): Promise<void>;
     /** 앱 언로드 */
+    /**
+     * i18next 를 설정한 앱에서는 **i18next 가 언어의 정본**이다 — 그 언어를 셸·컴포넌트 chrome(`@iyulab/components` 의
+     * `Locale`, 이 패키지의 `modernAppLocale` 이 그것을 따른다)과 문서 `<html lang>`(WCAG 3.1.1, 낭독기 발음)에 잇는다.
+     * 종전에는 둘이 따로였다: `i18next.changeLanguage('ko')` 가 앱 문장만 바꾸고 버튼 이름·빈 상태·검증 메시지는 옛 언어로,
+     * 첫 로드에서도 i18next `lng` 와 `<html lang>`/브라우저 언어가 다르면 한 화면에 두 언어가 섰다.
+     */
+    private syncLanguage;
     unload(): void;
     /** 페이지 이동 */
     navigate(path: string): void;

package/dist/App.js

@@ -4,23 +4,24 @@ 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";
 //#region src/App.ts
-var o = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", s;
-function c() {
-	if (!s) {
+var s = "\n:where(body) { margin: 0; }\n@media screen {\n  :where(body) { width: 100vw; height: 100vh; }\n}\n", c;
+function l() {
+	if (!c) {
 		if ("adoptedStyleSheets" in document && typeof CSSStyleSheet < "u" && typeof CSSStyleSheet.prototype.replaceSync == "function") {
 			let e = new CSSStyleSheet();
-			e.replaceSync(o), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], s = e;
+			e.replaceSync(s), document.adoptedStyleSheets = [...document.adoptedStyleSheets, e], c = e;
 		} else {
 			let e = document.createElement("style");
-			e.textContent = o, document.head.prepend(e), s = e;
+			e.textContent = s, document.head.prepend(e), c = e;
 		}
 	}
 }
-var l = class o {
+var u = class s {
 	constructor() {}
 	static get instance() {
-		return o._instance ||= new o(), o._instance;
+		return s._instance ||= new s(), s._instance;
 	}
 	get config() {
 		return this._config;
@@ -43,7 +44,7 @@ var l = class o {
 	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);
+			await t.init(a.i18n), this.syncLanguage();
 		}
 		if (a.auth) {
 			let e = a.root || document.body, t = () => {
@@ -88,8 +89,16 @@ var l = class o {
 			useIntercept: a.useIntercept
 		});
 	}
+	syncLanguage() {
+		let e = (e) => {
+			e && e !== "cimode" && (o.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);
+	}
 	unload() {
-		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;
+		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;
 	}
 	navigate(e) {
 		this._router?.go(e);
@@ -116,7 +125,7 @@ var l = class o {
 		await a.error(e, { ...t });
 	}
 	async createLayout(e, t) {
-		e === document.body && c();
+		e === document.body && l();
 		let n;
 		if (t.type === "sidebar") {
 			let { SidebarLayout: e } = await import("./layouts/SidebarLayout.js"), r = new e();
@@ -126,4 +135,4 @@ var l = class o {
 	}
 }.instance;
 //#endregion
-export { l as app };
+export { u as app };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -65,7 +65,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=2.0.0",
+    "@iyulab/components": ">=2.8.0",
     "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0"
   },
@@ -78,7 +78,7 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": ">=2.0.0",
+    "@iyulab/components": ">=2.8.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",