@iyulab/modern-app 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,7 +1,14 @@
 # Changelog
 
-## [Unreleased]
-- 
+## 0.2.2 (2025-11-17)
+- added `fallback` config in `AppConfig` type
+- improved route-progress handling in layout component
+
+## 0.2.1 (2025-11-13)
+- Fixed few component and sidebar styles
+- removed `theme` setter property in `app` instance
+- changed `progress` property to function in `app` instance
+- changed name `locales` option to `localization` option in `AppConfig` type
 
 ## 0.2.0 (2025-11-12)
 - Initial library version release

package/dist/app.d.ts

@@ -1,15 +1,14 @@
 import { Router } from '@iyulab/router';
-import { ThemeType } from '@iyulab/components/dist/utilities/theme.js';
 import { AppConfig } from './types/AppConfigs.js';
-import { DialogOptions, NotificationOptions } from './types/AppOptions.js';
+import { NotificationOptions } from './types/AppOptions.js';
 /**
  * 애플리케이션 전역 상태 및 설정 관리 클래스
  */
 declare class App {
     private static _instance;
     private _config?;
+    private _layout?;
     private _router?;
-    private _root?;
     private constructor();
     /** 싱글톤 인스턴스 반환 */
     static get instance(): App;
@@ -17,28 +16,26 @@ declare class App {
     get config(): AppConfig | undefined;
     /** 라우터 인스턴스 반환 */
     get router(): Router | undefined;
-    /** 스타일 테마 반환 */
-    get theme(): ThemeType;
-    /** 스타일 테마 설정 */
-    set theme(value: ThemeType);
-    /** 현재 진행바 설정 */
-    set progress(value: number);
+    /** 스타일 테마 관리 유틸리티 객체 반환 */
+    get theme(): import('@iyulab/components/dist/utilities/theme.js').Theme;
+    /** 다국어 로컬라이저(i18next) 반환 */
+    get localizer(): import('i18next').i18n;
     /** 앱 로드 및 초기화 */
     load(config: AppConfig): Promise<void>;
     /** 앱 언로드 */
     unload(): void;
     /** 페이지 이동 */
     navigate(path: string): void;
+    /** 공지 메시지 */
+    notice(message: string, options?: NotificationOptions): Promise<void>;
+    /** 정보 메시지 */
+    info(message: string, options?: NotificationOptions): Promise<void>;
+    /** 경고 메시지 */
+    warning(message: string, options?: NotificationOptions): Promise<void>;
     /** 성공 메시지 */
     success(message: string, options?: NotificationOptions): Promise<void>;
     /** 에러 메시지 */
     error(message: string, options?: NotificationOptions): Promise<void>;
-    /** 경고 메시지 */
-    warning(message: string, options?: NotificationOptions): Promise<void>;
-    /** 정보 메시지 */
-    info(message: string, options?: NotificationOptions): Promise<void>;
-    /** 확인 대화상자 */
-    confirm(message: string, _options?: DialogOptions): Promise<boolean>;
     /** 레이아웃 생성 */
     private createLayout;
     /** 알림 표시 */

package/dist/app.js

@@ -1,22 +1,22 @@
-import { runInAction as a } from "mobx";
-import u from "i18next";
-import { Router as c } from "@iyulab/router";
+import { runInAction as u } from "mobx";
+import n from "i18next";
+import { Router as l } from "@iyulab/router";
+import { theme as s } from "@iyulab/components/dist/utilities/theme.js";
 import { notifier as d } from "@iyulab/components/dist/utilities/notifier.js";
-import { theme as r } from "@iyulab/components/dist/utilities/theme.js";
-import { screen as n, progress as h } from "./internals/observers.js";
-class i {
+import { screen as r } from "./internals/observables.js";
+class o {
   // private 생성자로 외부에서 인스턴스 생성 방지
   constructor() {
     this.handleWindowResize = (t) => {
-      const e = window.innerWidth, [o, s] = this._config?.layout.breakpoints || [768, 1024];
-      a(() => {
-        e < o ? n.set("small") : e < s ? n.set("medium") : n.set("large");
+      const e = window.innerWidth, [i, a] = this._config?.layout.breakpoints || [768, 1024];
+      u(() => {
+        e < i ? r.set("small") : e < a ? r.set("medium") : r.set("large");
       });
     };
   }
   /** 싱글톤 인스턴스 반환 */
   static get instance() {
-    return i._instance || (i._instance = new i()), i._instance;
+    return o._instance || (o._instance = new o()), o._instance;
   }
   /** 현재 앱 설정 반환 */
   get config() {
@@ -26,86 +26,78 @@ class i {
   get router() {
     return this._router;
   }
-  /** 스타일 테마 반환 */
+  /** 스타일 테마 관리 유틸리티 객체 반환 */
   get theme() {
-    const t = r.get();
-    if (!t)
-      throw new Error("No theme is set, cannot get theme.");
-    return t;
-  }
-  /** 스타일 테마 설정 */
-  set theme(t) {
-    r.set(t);
-  }
-  /** 현재 진행바 설정 */
-  set progress(t) {
-    a(() => {
-      h.set(t);
-    });
+    return s;
+  }
+  /** 다국어 로컬라이저(i18next) 반환 */
+  get localizer() {
+    return n;
   }
   /** 앱 로드 및 초기화 */
   async load(t) {
-    if (this.unload(), this._config = t, r.init(t.theme), t.locales) {
-      for (const e of t.locales.plugins || [])
-        u.use(e);
-      await u.init(t.locales);
+    if (this.unload(), this._config = t, await s.init(t.theme), t.localization) {
+      for (const e of t.localization.plugins || [])
+        n.use(e);
+      await n.init(t.localization);
     }
-    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize")), this._root = await this.createLayout(t.layout), this._router = new c({
-      root: this._root,
+    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize")), this._layout = await this.createLayout(t.layout), this._router = new l({
+      root: this._layout,
       basepath: t.basepath,
-      routes: t.routes
-    }), console.log("✅ App loaded successfully");
+      routes: t.routes,
+      fallback: t.fallback
+    });
   }
   /** 앱 언로드 */
   unload() {
-    window.removeEventListener("resize", this.handleWindowResize), this._root && (this._root.remove(), this._root = void 0), this._router && (this._router.destroy(), this._router = void 0), this._config && (this._config = void 0);
+    window.removeEventListener("resize", this.handleWindowResize), this._layout && (this._layout.remove(), this._layout = void 0), this._router && (this._router.destroy(), this._router = void 0), this._config && (this._config = void 0);
   }
   /** 페이지 이동 */
   navigate(t) {
     this._router?.go(t);
   }
-  /** 성공 메시지 */
-  async success(t, e) {
-    await this.notify("success", t, e);
+  /** 공지 메시지 */
+  async notice(t, e) {
+    await this.notify("notice", t, e);
   }
-  /** 에러 메시지 */
-  async error(t, e) {
-    await this.notify("error", t, e);
+  /** 정보 메시지 */
+  async info(t, e) {
+    await this.notify("info", t, e);
   }
   /** 경고 메시지 */
   async warning(t, e) {
     await this.notify("warning", t, e);
   }
-  /** 정보 메시지 */
-  async info(t, e) {
-    await this.notify("info", t, e);
+  /** 성공 메시지 */
+  async success(t, e) {
+    await this.notify("success", t, e);
   }
-  /** 확인 대화상자 */
-  async confirm(t, e) {
-    return window.confirm(t);
+  /** 에러 메시지 */
+  async error(t, e) {
+    await this.notify("error", t, e);
   }
   /** 레이아웃 생성 */
   async createLayout(t) {
     let e = document.body.querySelector("[data-layout]");
     if (e && document.body.removeChild(e), t.type === "sidebar") {
-      const { SidebarLayout: o } = await import("./layouts/SidebarLayout.js"), s = new o();
-      s.config = t, e = s;
+      const { SidebarLayout: i } = await import("./layouts/SidebarLayout.js"), a = new i();
+      a.config = t, e = a;
     } else
       throw new Error(`Unsupported layout type: ${t.type}`);
     return e.setAttribute("data-layout", "true"), document.body.appendChild(e), "updateComplete" in e && await e.updateComplete, e;
   }
   /** 알림 표시 */
-  async notify(t, e, o) {
+  async notify(t, e, i) {
     await d.toast({
       type: t,
       content: e,
-      label: o?.title,
-      duration: o?.duration || 3e3,
-      position: o?.position || "top-right"
+      label: i?.title,
+      duration: i?.duration || 3e3,
+      position: i?.position || "top-right"
     });
   }
 }
-const _ = i.instance;
+const p = o.instance;
 export {
-  _ as app
+  p as app
 };

package/dist/components/SidebarLink.d.ts

@@ -36,7 +36,5 @@ export declare class SidebarLink extends ExtendedBaseElement<ElementParts> {
     render(): import('lit-html').TemplateResult<1>;
     /** 라우트 변경 이벤트 핸들러 */
     private handleRouteBegin;
-    /** 라우트 변경 이벤트 핸들러 */
-    private handleRouteDone;
 }
 export {};

package/dist/components/SidebarLink.js

@@ -1,37 +1,35 @@
-import { html as l } from "lit";
-import { property as t } from "lit/decorators.js";
-import { Icon as c } from "@iyulab/components/dist/components/Icon/Icon.js";
-import { ExtendedBaseElement as d } from "../internals/ExtendedBaseElement.js";
-import { styles as h } from "./SidebarLink.styles.js";
-var u = Object.defineProperty, n = (r, i, a, f) => {
-  for (var e = void 0, s = r.length - 1, p; s >= 0; s--)
-    (p = r[s]) && (e = p(i, a, e) || e);
-  return e && u(i, a, e), e;
+import { html as c } from "lit";
+import { property as e } from "lit/decorators.js";
+import { Icon as l } from "@iyulab/components/dist/components/Icon/Icon.js";
+import { ExtendedBaseElement as h } from "../internals/ExtendedBaseElement.js";
+import { styles as d } from "./SidebarLink.styles.js";
+var m = Object.defineProperty, n = (o, r, a, u) => {
+  for (var t = void 0, s = o.length - 1, p; s >= 0; s--)
+    (p = o[s]) && (t = p(r, a, t) || t);
+  return t && m(r, a, t), t;
 };
-class o extends d {
+class i extends h {
   constructor() {
-    super(...arguments), this.selected = !1, this.compact = !1, this.handleRouteBegin = (i) => {
-      this.selected = !1;
-    }, this.handleRouteDone = (i) => {
-      this.pattern ||= this.href, this.pattern ? (this.pattern = typeof this.pattern == "string" ? new URLPattern(this.pattern, window.location.origin) : this.pattern, this.selected = this.pattern.test(i.routeInfo.path, window.location.origin)) : this.selected = !1;
+    super(...arguments), this.selected = !1, this.compact = !1, this.handleRouteBegin = (r) => {
+      this.pattern ||= this.href, this.pattern ? (this.pattern = typeof this.pattern == "string" ? new URLPattern(this.pattern, window.location.origin) : this.pattern, this.selected = this.pattern.test(r.context.path, window.location.origin)) : this.selected = !1;
     };
   }
   static {
-    this.styles = [super.styles, h];
+    this.styles = [super.styles, d];
   }
   static {
     this.dependencies = {
-      "u-icon": c
+      "u-icon": l
     };
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone);
+    super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin);
   }
   disconnectedCallback() {
-    window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), super.disconnectedCallback();
+    window.removeEventListener("route-begin", this.handleRouteBegin), super.disconnectedCallback();
   }
   render() {
-    return l`
+    return c`
       <u-link part="base"
         .href=${this.href || "#"}
         ?compact=${this.compact}>
@@ -49,23 +47,23 @@ class o extends d {
   }
 }
 n([
-  t({ type: Boolean, reflect: !0 })
-], o.prototype, "selected");
+  e({ type: Boolean, reflect: !0 })
+], i.prototype, "selected");
 n([
-  t({ type: Boolean })
-], o.prototype, "compact");
+  e({ type: Boolean })
+], i.prototype, "compact");
 n([
-  t({ type: String })
-], o.prototype, "icon");
+  e({ type: String })
+], i.prototype, "icon");
 n([
-  t({ type: String })
-], o.prototype, "label");
+  e({ type: String })
+], i.prototype, "label");
 n([
-  t({ type: String })
-], o.prototype, "href");
+  e({ type: String })
+], i.prototype, "href");
 n([
-  t({ type: String })
-], o.prototype, "pattern");
+  e({ type: String })
+], i.prototype, "pattern");
 export {
-  o as SidebarLink
+  i as SidebarLink
 };

package/dist/components/SidebarLogo.js

@@ -1,19 +1,19 @@
-import { nothing as m, html as n } from "lit";
+import { nothing as m, html as s } from "lit";
 import { property as e } from "lit/decorators.js";
 import { Icon as l } from "@iyulab/components/dist/components/icon/Icon.js";
-import { ExtendedBaseElement as y } from "../internals/ExtendedBaseElement.js";
-import { styles as h } from "./SidebarLogo.styles.js";
-var d = Object.defineProperty, i = (r, s, a, g) => {
+import { ExtendedBaseElement as h } from "../internals/ExtendedBaseElement.js";
+import { styles as y } from "./SidebarLogo.styles.js";
+var d = Object.defineProperty, i = (r, n, a, g) => {
   for (var t = void 0, p = r.length - 1, c; p >= 0; p--)
-    (c = r[p]) && (t = c(s, a, t) || t);
-  return t && d(s, a, t), t;
+    (c = r[p]) && (t = c(n, a, t) || t);
+  return t && d(n, a, t), t;
 };
-class o extends y {
+class o extends h {
   constructor() {
     super(...arguments), this.compact = !1, this.type = "icon";
   }
   static {
-    this.styles = [super.styles, h];
+    this.styles = [super.styles, y];
   }
   static {
     this.dependencies = {
@@ -21,13 +21,14 @@ class o extends y {
     };
   }
   render() {
-    return n`
+    return s`
       <div class="container" part="container">
-        ${this.type === "image" && this.image ? n`
+        ${this.type === "image" && this.image ? s`
           <img part="image"
+            ?compact=${this.compact}
             src=${this.image}
             alt="App Logo"
-          />` : this.type === "icon" && this.icon ? n`
+          />` : this.type === "icon" && this.icon ? s`
           <u-icon part="icon" 
             .remote=${!0}
             .name=${this.icon}

package/dist/components/SidebarLogo.styles.js

@@ -26,11 +26,15 @@ const t = e`
   }
 
   img {
-    width: 100%;
+    width: auto;
     height: 1em;
     object-fit: contain;
     flex-shrink: 0;
   }
+  img[compact] {
+    width: 1em;
+    height: auto;
+  }
 
   u-icon {
     font-size: 1em;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+import { app } from './app';
 export type * from './types/AppConfigs.js';
 export type * from './types/AppOptions.js';
 export type * from './types/AppTypes.js';
 export { app } from './app';
+export default app;

package/dist/index.js

@@ -1,4 +1,5 @@
-import { app as r } from "./app.js";
+import { app as a } from "./app.js";
 export {
-  r as app
+  a as app,
+  a as default
 };

package/dist/internals/observables.d.ts

@@ -0,0 +1,7 @@
+import { IObservableValue } from 'mobx';
+/** 화면 크기 타입 */
+export type ScreenSize = 'small' | 'medium' | 'large';
+/**
+ * 현재 화면 크기 상태
+ */
+export declare const screen: IObservableValue<ScreenSize>;

package/dist/internals/observables.js

@@ -0,0 +1,5 @@
+import { observable as e } from "mobx";
+const r = e.box("large");
+export {
+  r as screen
+};

package/dist/layouts/SidebarLayout.d.ts

@@ -1,19 +1,19 @@
-import { nothing, PropertyValues, TemplateResult } from 'lit';
+import { nothing, PropertyValues } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { IconButton } from '@iyulab/components/dist/components/icon-button/IconButton.js';
+import { ProgressBar } from '@iyulab/components/dist/components/progress-bar/ProgressBar.js';
 import { ExtendedBaseElement } from '../internals/ExtendedBaseElement';
-import { ProgressBar } from '../components/ProgressBar';
-import { UnsafeContent } from '../components/UnsafeContent';
 import { SidebarLogo } from '../components/SidebarLogo';
 import { SidebarSection } from '../components/SidebarSection';
 import { SidebarGroup } from '../components/SidebarGroup';
 import { SidebarLink } from '../components/SidebarLink';
 import { SidebarButton } from '../components/SidebarButton';
 import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
-/** 엘리먼트 타입 매핑 */
+/** 엘리먼트 타입 매핑 (for deveveloper experience) */
 declare global {
     interface HTMLElementTagNameMap {
+        'u-icon-button': IconButton;
         'u-progress-bar': ProgressBar;
-        'u-unsafe-content': UnsafeContent;
         'u-sidebar-logo': SidebarLogo;
         'u-sidebar-section': SidebarSection;
         'u-sidebar-group': SidebarGroup;
@@ -37,7 +37,7 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
     static dependencies: Record<string, typeof BaseElement>;
     /** 반응형 상태 관리를 위한 MobX 반응 해제 함수들 */
     private disposers;
-    progressEl?: ProgressBar;
+    progressBarEl: ProgressBar;
     /** 사이드바 상태 */
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
@@ -45,7 +45,7 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
-    render(): TemplateResult<1> | typeof nothing;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
     /** 사이드바 아이템 렌더링 */
     private renderItem;
     /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
@@ -56,5 +56,11 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
      * 모달 상태에서 사이드바 닫기
      * 백드롭 클릭 or 라우트 변경 시
      */
-    private handleCloseModal;
+    private toggleStateIfModalState;
+    /** 라우트 변경 시작 핸들러 */
+    private handleRouteBegin;
+    /** 라우트 변경 진행 핸들러 */
+    private handleRouteProgress;
+    /** 라우트 변경 완료 핸들러 */
+    private handleRouteDone;
 }

package/dist/layouts/SidebarLayout.js

@@ -1,44 +1,47 @@
 import { nothing as u, html as i } from "lit";
-import { query as h, state as f, property as m, customElement as g } from "lit/decorators.js";
-import { repeat as l } from "lit/directives/repeat.js";
-import { autorun as b } from "mobx";
-import { IconButton as $ } from "@iyulab/components/dist/components/icon-button/IconButton.js";
-import { screen as p, progress as y } from "../internals/observers.js";
-import { ExtendedBaseElement as v } from "../internals/ExtendedBaseElement.js";
-import { ProgressBar as _ } from "../components/ProgressBar.js";
-import { UnsafeContent as S } from "../components/UnsafeContent.js";
-import { SidebarLogo as k } from "../components/SidebarLogo.js";
-import { SidebarSection as C } from "../components/SidebarSection.js";
-import { SidebarGroup as w } from "../components/SidebarGroup.js";
+import { query as h, state as g, property as b, customElement as f } from "lit/decorators.js";
+import { unsafeHTML as m } from "lit/directives/unsafe-html.js";
+import { repeat as n } from "lit/directives/repeat.js";
+import { autorun as $ } from "mobx";
+import { IconButton as v } from "@iyulab/components/dist/components/icon-button/IconButton.js";
+import { ProgressBar as y } from "@iyulab/components/dist/components/progress-bar/ProgressBar.js";
+import { screen as p } from "../internals/observables.js";
+import { ExtendedBaseElement as S } from "../internals/ExtendedBaseElement.js";
+import { SidebarLogo as _ } from "../components/SidebarLogo.js";
+import { SidebarSection as w } from "../components/SidebarSection.js";
+import { SidebarGroup as k } from "../components/SidebarGroup.js";
 import { SidebarLink as E } from "../components/SidebarLink.js";
-import { SidebarButton as O } from "../components/SidebarButton.js";
-import { styles as I } from "./SidebarLayout.styles.js";
-var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, z = Object.getPrototypeOf, B = Reflect.get, n = (e, t, s, a) => {
-  for (var r = a > 1 ? void 0 : a ? P(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+import { SidebarButton as B } from "../components/SidebarButton.js";
+import { styles as L } from "./SidebarLayout.styles.js";
+var R = Object.defineProperty, I = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, C = Reflect.get, l = (e, t, s, a) => {
+  for (var r = a > 1 ? void 0 : a ? I(t, s) : t, d = e.length - 1, c; d >= 0; d--)
     (c = e[d]) && (r = (a ? c(t, s, r) : c(r)) || r);
-  return a && r && M(t, s, r), r;
-}, L = (e, t, s) => B(z(e), s, t);
-let o = class extends v {
+  return a && r && R(t, s, r), r;
+}, O = (e, t, s) => C(P(e), s, t);
+let o = class extends S {
   constructor() {
     super(...arguments), this.disposers = [], this.state = "docked", this.toggleState = () => {
       const e = p.get();
       e === "large" ? this.state = this.state === "docked" ? "slim" : "docked" : e === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : e === "small" ? this.state = this.state === "closed" ? "modal" : "closed" : console.warn("Unknown screen size:", e);
-    }, this.handleCloseModal = () => {
+    }, this.toggleStateIfModalState = () => {
       const e = p.get();
       this.state === "modal" && (e === "medium" ? this.state = "slim" : e === "small" && (this.state = "closed"));
+    }, this.handleRouteBegin = (e) => {
+      this.progressBarEl.value = 0, this.toggleStateIfModalState();
+    }, this.handleRouteProgress = (e) => {
+      this.progressBarEl.value = e.progress;
+    }, this.handleRouteDone = (e) => {
+      this.progressBarEl.value = 100;
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.disposers.push(b(() => {
+    super.connectedCallback(), this.disposers.push($(() => {
       const e = p.get();
       this.updateState(e);
-    })), this.disposers.push(b(() => {
-      const e = y.get();
-      this.progressEl && (this.progressEl.value = e);
-    })), window.addEventListener("route-begin", this.handleCloseModal);
+    })), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress);
   }
   disconnectedCallback() {
-    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.handleCloseModal), super.disconnectedCallback();
+    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), super.disconnectedCallback();
   }
   updated(e) {
     super.updated(e), e.has("config") && (this.styles = this.config?.styles);
@@ -51,12 +54,12 @@ let o = class extends v {
         <div class="sidebar-header" part="sidebar-header">
           <u-sidebar-logo
             .compact="${this.state === "slim"}"
-            .type=${this.config.logo.type}
-            .image="${this.config.logo.image}"
-            .icon="${this.config.logo.icon}"
-            .label="${this.config.logo.label}"
-            .styles="${this.config.logo.styles}"
-            @click="${this.config.logo.onClick}"
+            .type=${this.config.logo?.type || "icon"}
+            .image="${this.config.logo?.image}"
+            .icon="${this.config.logo?.icon}"
+            .label="${this.config.logo?.label}"
+            .styles="${this.config.logo?.styles}"
+            @click="${this.config.logo?.onClick}"
           ></u-sidebar-logo>
           <u-icon-button class="sidebar-toggler" part="sidebar-toggler"
             name=${this.state === "closed" ? "chevron-right" : "layout-sidebar"}
@@ -66,7 +69,7 @@ let o = class extends v {
 
         <!-- Sidebar Navigation Menu -->
         <nav class="sidebar-menu" part="sidebar-menu">
-          ${l(
+          ${n(
       this.config.menu ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
@@ -74,8 +77,9 @@ let o = class extends v {
         </nav>
 
         <!-- Sidebar Footer -->
-        <div class="sidebar-footer" part="sidebar-footer">
-          ${l(
+        <div class="sidebar-footer" part="sidebar-footer"
+          ?hidden="${!this.config.footer || this.config.footer.length === 0}">
+          ${n(
       this.config.footer ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
@@ -93,26 +97,20 @@ let o = class extends v {
       <!-- Backdrop for modal state -->
       <div class="backdrop"
         ?hidden="${this.state !== "modal"}"
-        @click="${this.handleCloseModal}"
+        @click="${this.toggleStateIfModalState}"
       ></div>
     ` : u;
   }
   /** 사이드바 아이템 렌더링 */
   renderItem(e) {
-    return e ? e.type === "group" ? i`
-        <u-sidebar-group
+    return e ? e.type === "content" ? this.state === "slim" ? u : m(e.content) : e.type === "button" ? i`
+        <u-sidebar-button
           ?compact=${this.state === "slim"}
-          ?collapsed="${e.collapsed ?? !1}"
           .icon="${e.icon}"
           .label="${e.label}"
-          .items="${e.items}"
-          .styles="${e.styles}">
-          ${l(
-      e.items,
-      (t, s) => s,
-      (t, s) => this.renderItem(t)
-    )}
-        </u-sidebar-group>
+          .styles="${e.styles}"
+          @click="${e.onClick}"
+        ></u-sidebar-button>
       ` : e.type === "section" ? i`
         <u-sidebar-section
           ?compact=${this.state === "slim"}
@@ -120,25 +118,26 @@ let o = class extends v {
           .subTitle="${e.subTitle}"
           .items="${e.items}"
           .styles="${e.styles}">
-          ${l(
+          ${n(
       e.items,
       (t, s) => s,
       (t, s) => this.renderItem(t)
     )}
         </u-sidebar-section>
-      ` : e.type === "button" ? i`
-        <u-sidebar-button
+      ` : e.type === "group" ? i`
+        <u-sidebar-group
           ?compact=${this.state === "slim"}
+          ?collapsed="${e.collapsed ?? !1}"
           .icon="${e.icon}"
           .label="${e.label}"
-          .styles="${e.styles}"
-          @click="${e.onClick}"
-        ></u-sidebar-button>
-      ` : e.type === "content" ? i`
-        <u-sidebar-content
-          ?compact=${this.state === "slim"}
-          .content="${e.content}"
-        ></u-sidebar-content>
+          .items="${e.items}"
+          .styles="${e.styles}">
+          ${n(
+      e.items,
+      (t, s) => s,
+      (t, s) => this.renderItem(t)
+    )}
+        </u-sidebar-group>
       ` : i`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
@@ -155,28 +154,27 @@ let o = class extends v {
     e === "large" ? this.state = "docked" : e === "medium" ? this.state = "slim" : e === "small" ? this.state = "closed" : console.warn("Unknown screen size:", e);
   }
 };
-o.styles = [L(o, o, "styles"), I];
+o.styles = [O(o, o, "styles"), L];
 o.dependencies = {
-  "u-icon-button": $,
-  "u-progress-bar": _,
-  "u-unsafe-content": S,
-  "u-sidebar-logo": k,
-  "u-sidebar-section": C,
-  "u-sidebar-group": w,
+  "u-icon-button": v,
+  "u-progress-bar": y,
+  "u-sidebar-logo": _,
+  "u-sidebar-section": w,
+  "u-sidebar-group": k,
   "u-sidebar-link": E,
-  "u-sidebar-button": O
+  "u-sidebar-button": B
 };
-n([
+l([
   h("u-progress-bar")
-], o.prototype, "progressEl", 2);
-n([
-  f()
+], o.prototype, "progressBarEl", 2);
+l([
+  g()
 ], o.prototype, "state", 2);
-n([
-  m({ type: Object })
+l([
+  b({ type: Object })
 ], o.prototype, "config", 2);
-o = n([
-  g("app-sidebar-layout")
+o = l([
+  f("app-sidebar-layout")
 ], o);
 export {
   o as SidebarLayout

package/dist/layouts/SidebarLayout.styles.js

@@ -100,6 +100,25 @@ const r = o`
     border-top: 1px solid var(--u-border-color-weak);
   }
 
+  /* Main Content */
+  .main {
+    position: relative;
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    background: var(--u-bg-color);
+  }
+
+  .main u-progress-bar {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    height: 4px;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
   /* Backdrop for modal mode */
   .backdrop {
     content: '';
@@ -111,15 +130,6 @@ const r = o`
     bottom: 0;
     background: var(--u-overlay-bg-color);
   }
-
-  /* Main Content */
-  .main {
-    position: relative;
-    flex: 1;
-    display: block;
-    overflow: hidden;
-    background: var(--u-bg-color);
-  }
 `;
 export {
   r as styles

package/dist/layouts/SidebarLayout.types.d.ts

@@ -4,18 +4,22 @@ import { SidebarLinkConfig } from '../components/SidebarLink';
 import { SidebarSectionConfig } from '../components/SidebarSection';
 import { SidebarGroupConfig } from '../components/SidebarGroup';
 import { SidebarButtonConfig } from '../components/SidebarButton';
-import { UnsafeContentConfig } from '../components/UnsafeContent';
 /** 사이드바 레이아웃 컴포넌트의 요소(part) 타입 */
 export type SidebarParts = 'host' | 'sidebar' | 'sidebar-toggler' | 'sidebar-header' | 'sidebar-menu' | 'sidebar-footer' | 'main' | 'progress';
 /** 사이드바 상태 타입 */
 export type SidebarState = 'docked' | 'modal' | 'slim' | 'closed';
+/** 사이드바 컨텐츠 커스텀 HTML 타입 */
+export interface SidebarContentConfig {
+    type: 'content';
+    content: string;
+}
 /** union: section | group | link | button */
-export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | UnsafeContentConfig);
+export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | SidebarContentConfig);
 /** 사이드바 전체 설정 (루트) */
 export interface SidebarLayoutConfig {
     type: 'sidebar';
     /** 최상단 앱 로고 */
-    logo: SidebarLogoConfig;
+    logo?: SidebarLogoConfig;
     /** 상단/메인 메뉴 항목들 */
     menu?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */

package/dist/types/AppConfigs.d.ts

@@ -1,14 +1,14 @@
 import { InitOptions, Module, Newable, NewableModule } from 'i18next';
-import { RouteConfig } from '@iyulab/router';
+import { RouteConfig, FallbackRouteConfig } from '@iyulab/router';
 import { ThemeInitOptions } from '@iyulab/components/dist/utilities/theme.js';
 import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 /**
  * i18next의 초기화 옵션과 플러그인 배열을 포함한 다국어 설정
  */
-export type LocaleInitOptions = InitOptions & {
+export type LocalizationInitOptions = InitOptions & {
     /**
      * i18next 플러그인 배열
-     * @description i18next.use() 메서드에 전달될 플러그인들의 배열입니다.
+     * @description i18next.use() 메서드에 전달되는 플러그인들의 배열입니다.
      */
     plugins?: (Module | NewableModule<Module> | Newable<Module>)[];
 };
@@ -35,7 +35,11 @@ export interface AppConfig {
     /**
      * 클라이언트 사이드 라우팅을 위한 설정 배열
      */
-    routes: RouteConfig[];
+    routes?: RouteConfig[];
+    /**
+     * 라우팅 실패 시 대체 컨텐츠 설정
+     */
+    fallback?: FallbackRouteConfig;
     /**
      * 애플리케이션의 스타일 테마 설정
      */
@@ -45,7 +49,7 @@ export interface AppConfig {
      * @description i18next의 InitOptions와 플러그인 배열을 포함합니다. i18next를 사용하지 않는 경우 이 설정은 생략할 수 있습니다.
      * @see 설정에 대한 자세한 내용은 {@link https://www.i18next.com/overview/configuration-options} 참조하십시오.
      */
-    locales?: LocaleInitOptions;
+    localization?: LocalizationInitOptions;
     /**
      * 애플리케이션을 구성하기 위한 레이아웃 설정
      * @description 현재는 사이드바 레이아웃만 지원합니다.

package/dist/types/AppTypes.d.ts

@@ -1,5 +1,3 @@
-/** 화면 크기 타입 */
-export type ScreenSize = 'small' | 'medium' | 'large';
 /** 스타일 값 타입 */
 export type StyleValue = Record<string, string> | Partial<CSSStyleDeclaration>;
 /** 스타일 맵 타입 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on react, lit-element",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -29,7 +29,7 @@
       "import": "./dist/index.js"
     },
     "./dist/*": {
-      "types": "./dist/*",
+      "types": "./dist/*.d.ts",
       "import": "./dist/*"
     }
   },
@@ -38,8 +38,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.1.0",
-    "@iyulab/router": "^0.5.0",
+    "@iyulab/components": "^0.1.3",
+    "@iyulab/router": "^0.5.2",
     "lit": "^3.3.1",
     "mobx": "^6.15.0",
     "i18next": "^25.6.2"

package/dist/components/ProgressBar.d.ts

@@ -1,22 +0,0 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-/**
- * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
- * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.
- */
-export declare class ProgressBar extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 불확정 상태 (로딩 애니메이션 표시) */
-    indeterminate: boolean;
-    /** 최소값 (기본값: 0) */
-    minValue: number;
-    /** 최대값 (기본값: 100) */
-    maxValue: number;
-    /** 현재값 */
-    value: number;
-    connectedCallback(): void;
-    protected updated(changedProperties: Map<string, unknown>): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 진행 상태 업데이트 */
-    private updateProgress;
-}

package/dist/components/ProgressBar.js

@@ -1,54 +0,0 @@
-import { html as h } from "lit";
-import { property as i } from "lit/decorators.js";
-import { BaseElement as n } from "@iyulab/components/dist/components/BaseElement.js";
-import { styles as p } from "./ProgressBar.styles.js";
-var v = Object.defineProperty, a = (u, t, s, o) => {
-  for (var e = void 0, l = u.length - 1, m; l >= 0; l--)
-    (m = u[l]) && (e = m(t, s, e) || e);
-  return e && v(t, s, e), e;
-};
-class r extends n {
-  constructor() {
-    super(...arguments), this.indeterminate = !1, this.minValue = 0, this.maxValue = 100, this.value = 0;
-  }
-  static {
-    this.styles = [super.styles, p];
-  }
-  static {
-    this.dependencies = {};
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "progressbar");
-  }
-  updated(t) {
-    super.updated(t), t.has("value") && (this.updateProgress(t.get("value"), this.value), this.setAttribute("aria-valuenow", this.value.toString())), t.has("minValue") && (this.updateProgress(this.value, this.value), this.setAttribute("aria-valuemax", this.maxValue.toString())), t.has("maxValue") && (this.updateProgress(this.value, this.value), this.setAttribute("aria-valuemin", this.minValue.toString())), t.has("indeterminate") && (this.updateProgress(this.value, this.value), this.indeterminate ? (this.removeAttribute("aria-valuenow"), this.setAttribute("aria-busy", "true")) : this.removeAttribute("aria-busy"));
-  }
-  render() {
-    return h`<slot></slot>`;
-  }
-  /** 진행 상태 업데이트 */
-  updateProgress(t, s) {
-    if (this.indeterminate) return;
-    const e = (Math.min(Math.max(s, this.minValue), this.maxValue) - this.minValue) / (this.maxValue - this.minValue);
-    t < s ? (this.style.transform = `scaleX(${e})`, s >= this.maxValue && setTimeout(() => {
-      this.style.opacity = "0";
-    }, 300)) : (this.style.opacity = "0", this.style.transform = "scaleX(0)", setTimeout(() => {
-      this.style.opacity = "1", this.style.transform = `scaleX(${e})`;
-    }, 300));
-  }
-}
-a([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "indeterminate");
-a([
-  i({ type: Number })
-], r.prototype, "minValue");
-a([
-  i({ type: Number })
-], r.prototype, "maxValue");
-a([
-  i({ type: Number })
-], r.prototype, "value");
-export {
-  r as ProgressBar
-};

package/dist/components/ProgressBar.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import('lit').CSSResult;

package/dist/components/ProgressBar.styles.js

@@ -1,31 +0,0 @@
-import { css as t } from "lit";
-const a = t`
-  :host {
-    display: block;
-    position: absolute;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background-color: var(--u-blue-600);
-    transform-origin: left;
-    transition: all 0.3s ease-out;
-    box-shadow: 0 2px 4px var(--u-shadow-weak);
-  }
-  :host([indeterminate]) {
-    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-  }
-
-  @keyframes indeterminate {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-`;
-export {
-  a as styles
-};

package/dist/components/UnsafeContent.d.ts

@@ -1,16 +0,0 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-/** Raw HTML content */
-export interface UnsafeContentConfig {
-    type: 'content';
-    content: string;
-}
-/**
- * 일반 HTML 콘텐츠를 표시하는 사이드바 컴포넌트
- */
-export declare class UnsafeContent extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** HTML 콘텐츠 */
-    content?: string;
-    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
-}

package/dist/components/UnsafeContent.js

@@ -1,26 +0,0 @@
-import { property as i } from "lit/decorators.js";
-import { unsafeHTML as p } from "lit/directives/unsafe-html.js";
-import { BaseElement as f } from "@iyulab/components/dist/components/BaseElement.js";
-import { styles as a } from "./UnsafeContent.styles.js";
-var m = Object.defineProperty, l = (t, s, n, c) => {
-  for (var e = void 0, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (e = o(s, n, e) || e);
-  return e && m(s, n, e), e;
-};
-class d extends f {
-  static {
-    this.styles = [super.styles, a];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    return p(this.content);
-  }
-}
-l([
-  i({ type: String })
-], d.prototype, "content");
-export {
-  d as UnsafeContent
-};

package/dist/components/UnsafeContent.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import('lit').CSSResult;

package/dist/components/UnsafeContent.styles.js

@@ -1,9 +0,0 @@
-import { css as s } from "lit";
-const o = s`
-  :host {
-    display: contents;
-  }
-`;
-export {
-  o as styles
-};

package/dist/internals/observers.d.ts

@@ -1,10 +0,0 @@
-import { IObservableValue } from 'mobx';
-import { ScreenSize } from '../types/AppTypes';
-/**
- * 현재 화면 크기 상태
- */
-export declare const screen: IObservableValue<ScreenSize>;
-/**
- * 로딩 진행 상태 (0 - 100)
- */
-export declare const progress: IObservableValue<number>;

package/dist/internals/observers.js

@@ -1,6 +0,0 @@
-import { observable as o } from "mobx";
-const e = o.box("large"), s = o.box(0);
-export {
-  s as progress,
-  e as screen
-};