@iyulab/modern-app 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,10 +1,18 @@
-# Changelog
-
-## 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)
+# Changelog
+
+## 0.2.3 (2025-12-19)
+- added `root` option in `AppConfig` type to set application root element
+- update `@iyulab/components` to v0.1.10
+
+## 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/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Iyulab, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2025 Iyulab, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,35 +1,158 @@
-# Modern App
-
-A modern web application framework by iyulab, built on React and Lit Element.
-
-For complete examples and documentation, visit our demo site: [https://modern-app.iyulab.com](https://modern-app.iyulab.com)
-
-## Installation
-
-```bash
-npm install @iyulab/modern-app
-```
-
-## Quick Start
-
-```javascript
-import { app } from '@iyulab/modern-app';
-
-// Load your app configuration
-await app.load({
-  layout: {
-    type: 'sidebar',
-    // layout configuration
-  },
-  routes: [
-    // your routes
-  ],
-  locales: {
-    // locale configuration
-  }
-});
-```
-
-## License
-
-MIT
+# Modern App
+
+A modern web application framework by iyulab, built on React and Lit Element.
+
+For complete examples and documentation, visit our demo site: [https://modern-app.iyulab.com](https://modern-app.iyulab.com)
+
+## Installation
+
+```bash
+npm install @iyulab/modern-app
+```
+
+## Quick Start
+
+```typescript
+import { app } from '@iyulab/modern-app';
+
+await app.load({
+  basepath: '/',
+  layout: {
+    type: 'sidebar',
+    // ...layout configuration
+  },
+  routes: [
+    { index: true, render: () => html`<home-page></home-page>` },
+    { path: 'about', render: () => html`<about-page></about-page>` },
+  ],
+});
+```
+
+## API Reference
+
+### Navigation
+
+```typescript
+// Navigate to a path
+app.navigate('/path');
+
+// Access router instance
+app.router?.go('/path');
+app.router?.basepath;   // Get base path
+app.router?.routes;     // Get registered routes
+app.router?.context;    // Get current route context
+```
+
+### Theme Management
+
+```typescript
+// Get current theme
+app.theme.get();  // Returns: 'system' | 'light' | 'dark' | undefined
+
+// Set theme
+app.theme.set('dark');   // 'system' | 'light' | 'dark'
+
+// Check initialization status
+app.theme.isInitialized;
+```
+
+### Notifications
+
+```typescript
+// Display notifications (returns Promise<void>)
+await app.notice('Notice message');
+await app.info('Info message');
+await app.success('Success message');
+await app.warning('Warning message');
+await app.error('Error message');
+
+// With options
+await app.success('Saved!', {
+  title: 'Success',
+  duration: 5000,  // milliseconds (default: 3000)
+  position: 'top-right'  // 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+});
+```
+
+### Localization
+
+```typescript
+// Access i18next instance
+app.localizer;  // i18next instance
+
+// Usage with lit-i18n
+import { translate } from 'lit-i18n';
+html`<p>${translate('namespace::key')}</p>`;
+```
+
+## Configuration
+
+### AppConfig
+
+```typescript
+interface AppConfig {
+  root?: Element;              // Root element (default: document.body)
+  basepath?: string;           // Base path for routing (default: '/')
+  routes: RouteConfig[];       // Route definitions
+  fallback?: FallbackConfig;   // Error fallback route
+  theme?: ThemeInitOptions;    // Theme configuration
+  localization?: i18next.InitOptions;  // i18next options
+  layout: LayoutConfig;        // Layout configuration
+}
+```
+
+### Theme Options
+
+```typescript
+interface ThemeInitOptions {
+  default?: 'system' | 'light' | 'dark';  // Default theme
+  debug?: boolean;                         // Enable debug logging
+  store?: false | {                        // Persist theme preference
+    type: 'cookie' | 'localStorage' | 'sessionStorage';
+    prefix?: string;
+  };
+  useBuiltIn?: boolean;  // Use built-in styles (default: true)
+}
+```
+
+### Layout Configuration (Sidebar)
+
+```typescript
+interface SidebarLayoutConfig {
+  type: 'sidebar';
+  breakpoints?: [number, number];  // [small, medium] (default: [768, 1024])
+  logo?: {
+    type: 'icon' | 'image';
+    icon?: string;
+    src?: string;
+    label?: string;
+    onClick?: () => void;
+  };
+  menu?: MenuItem[];     // Navigation menu items
+  footer?: FooterItem[]; // Footer buttons/items
+}
+```
+
+### Route Configuration
+
+```typescript
+interface RouteConfig {
+  index?: boolean;           // Index route
+  path?: string;             // Route path (supports :param patterns)
+  title?: string;            // Document title
+  force?: boolean;           // Force re-render
+  render: (context: RouteContext) => RenderResult | Promise<RenderResult>;
+}
+
+interface RouteContext {
+  href: string;              // Full URL
+  pathname: string;          // Path portion
+  basepath: string;          // Base path
+  params: Record<string, string>;  // URL parameters
+  progress: (value: number) => void;  // Progress callback (0-100)
+}
+```
+
+## License
+
+MIT

package/dist/{app.js → App.js}

@@ -1,15 +1,15 @@
-import { runInAction as r } from "mobx";
+import { runInAction as l } from "mobx";
 import n from "i18next";
-import { Router as l } from "@iyulab/router";
-import { notifier as c } from "@iyulab/components/dist/utilities/notifier.js";
+import { Router as d } from "@iyulab/router";
 import { theme as u } from "@iyulab/components/dist/utilities/theme.js";
-import { screen as s, progress as d } from "./internals/observables.js";
+import { notifier as h } from "@iyulab/components/dist/utilities/notifier.js";
+import { screen as s } from "./internals/observables.js";
 class o {
   // private 생성자로 외부에서 인스턴스 생성 방지
   constructor() {
     this.handleWindowResize = (t) => {
       const e = window.innerWidth, [i, a] = this._config?.layout.breakpoints || [768, 1024];
-      r(() => {
+      l(() => {
         e < i ? s.set("small") : e < a ? s.set("medium") : s.set("large");
       });
     };
@@ -30,41 +30,34 @@ class o {
   get theme() {
     return u;
   }
-  /** 현재 언어 코드 반환 (i18next.language) */
-  get language() {
-    return n.language;
+  /** 다국어 로컬라이저(i18next) 반환 */
+  get localizer() {
+    return n;
   }
   /** 앱 로드 및 초기화 */
   async load(t) {
     if (this.unload(), this._config = t, await u.init(t.theme), t.localization) {
-      for (const e of t.localization.plugins || [])
-        n.use(e);
+      for (const i of t.localization.plugins || [])
+        n.use(i);
       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 l({
-      root: this._root,
+    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize"));
+    const e = t.root || document.body;
+    this._layout = await this.createLayout(e, t.layout), this._router = new d({
+      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);
   }
-  /** 언어 설정 변경(i18next.changeLanguage 호출) */
-  async setLanguage(t) {
-    await n.changeLanguage(t);
-  }
-  /** 레이아웃 진행바 설정 */
-  progress(t) {
-    r(() => {
-      d.set(t);
-    });
-  }
   /** 공지 메시지 */
   async notice(t, e) {
     await this.notify("notice", t, e);
@@ -85,28 +78,29 @@ class o {
   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: 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, i) {
-    await c.toast({
+    await h.toast({
       type: t,
       content: e,
-      label: i?.title,
+      heading: i?.title,
       duration: i?.duration || 3e3,
       position: i?.position || "top-right"
     });
   }
+  /** 레이아웃 생성 */
+  async createLayout(t, e) {
+    t === document.body && (document.body.style.margin = "0", document.body.style.width = "100vw", document.body.style.height = "100vh");
+    let i = t.querySelector("[data-layout]");
+    if (i && t.removeChild(i), e.type === "sidebar") {
+      const { SidebarLayout: a } = await import("./layouts/SidebarLayout.js"), r = new a();
+      r.config = e, i = r;
+    } else
+      throw new Error(`Unsupported layout type: ${e.type}`);
+    return i.setAttribute("data-layout", "true"), t.appendChild(i), "updateComplete" in i && await i.updateComplete, i;
+  }
 }
-const g = o.instance;
+const _ = o.instance;
 export {
-  g as app
+  _ as app
 };

package/dist/components/SidebarButton.js

@@ -1,19 +1,19 @@
 import { html as c } from "lit";
 import { property as o } from "lit/decorators.js";
-import { Icon as l } from "@iyulab/components/dist/components/Icon/Icon.js";
+import { UIcon as l } from "@iyulab/components/dist/components/Icon/UIcon.component.js";
 import { ExtendedBaseElement as m } from "../internals/ExtendedBaseElement.js";
-import { styles as u } from "./SidebarButton.styles.js";
-var d = Object.defineProperty, n = (e, p, s, f) => {
+import { styles as d } from "./SidebarButton.styles.js";
+var u = Object.defineProperty, n = (e, p, s, f) => {
   for (var t = void 0, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (t = a(p, s, t) || t);
-  return t && d(p, s, t), t;
+  return t && u(p, s, t), t;
 };
 class i extends m {
   constructor() {
     super(...arguments), this.compact = !1;
   }
   static {
-    this.styles = [super.styles, u];
+    this.styles = [super.styles, d];
   }
   static {
     this.dependencies = {
@@ -25,7 +25,6 @@ class i extends m {
       <button part="base">
         <u-icon part="icon"
           ?hidden=${!this.icon}
-          ?remote=${!0}
           .name=${this.icon}
         ></u-icon>
         <span part="label"

package/dist/components/SidebarButton.styles.js

@@ -5,7 +5,7 @@ const r = o`
     width: 100%;
     padding: 8px 12px;
     font-size: 14px;
-    color: var(--u-text-color);
+    color: var(--u-txt-color);
     background: transparent;
     border: none;
     border-radius: 8px;
@@ -21,7 +21,7 @@ const r = o`
     gap: 0;
   }
   :host(:hover) {
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
     background-color: var(--u-bg-color-hover);
   }
   :host(:active) {
@@ -38,7 +38,7 @@ const r = o`
     gap: 12px;
   }
   button:focus-visible {
-    outline: 2px solid var(--u-input-border-focus);
+    outline: 2px solid #6666ff;
     outline-offset: 2px;
   }
   

package/dist/components/SidebarGroup.js

@@ -1,7 +1,7 @@
 import { html as c } from "lit";
 import { property as o } from "lit/decorators.js";
-import { Icon as d } from "@iyulab/components/dist/components/Icon/Icon.js";
-import { app as m } from "../app.js";
+import { UIcon as d } from "@iyulab/components/dist/components/Icon/UIcon.component.js";
+import { app as m } from "../App.js";
 import { ExtendedBaseElement as u } from "../internals/ExtendedBaseElement.js";
 import { SidebarLink as h } from "./SidebarLink.js";
 import { styles as f } from "./SidebarGroup.styles.js";
@@ -35,13 +35,13 @@ class s extends u {
           @click=${this.handleButtonClick}>
           <u-icon class="icon" part="icon"
             ?hidden=${!this.icon}
-            ?remote=${!0}
             .name=${this.icon}
           ></u-icon>
           <span class="label" part="label">
             ${this.label}
           </span>
           <u-icon class="toggler" part="toggler"
+            lib="internal"
             name="chevron-down"
           ></u-icon>
         </button>

package/dist/components/SidebarGroup.styles.js

@@ -40,7 +40,7 @@ const e = o`
     gap: 12px;
     width: 100%;
     padding: 8px 12px;
-    color: var(--u-text-color);
+    color: var(--u-txt-color);
     font-family: inherit;
     background: transparent;
     border: none;
@@ -50,7 +50,7 @@ const e = o`
   }
   button:hover {
     background-color: var(--u-bg-color-hover);
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
   }
 
   .icon {

package/dist/components/SidebarLink.js

@@ -1,17 +1,17 @@
 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 { UIcon as l } from "@iyulab/components/dist/components/Icon/UIcon.component.js";
 import { ExtendedBaseElement as h } from "../internals/ExtendedBaseElement.js";
 import { styles as d } from "./SidebarLink.styles.js";
-var u = Object.defineProperty, n = (o, r, a, f) => {
+var f = Object.defineProperty, n = (o, r, a, m) => {
   for (var t = void 0, s = o.length - 1, p; s >= 0; s--)
     (p = o[s]) && (t = p(r, a, t) || t);
-  return t && u(r, a, t), t;
+  return t && f(r, a, t), t;
 };
 class i extends h {
   constructor() {
     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.routeInfo.path, window.location.origin)) : this.selected = !1;
+      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 {
@@ -35,7 +35,6 @@ class i extends h {
         ?compact=${this.compact}>
         <u-icon part="icon"
           ?hidden=${!this.icon}
-          ?remote=${!0}
           .name=${this.icon}
         ></u-icon>
         <span part="label"

package/dist/components/SidebarLink.styles.js

@@ -1,26 +1,26 @@
 import { css as o } from "lit";
-const r = o`
+const e = o`
   :host {
     display: block;
     border-radius: 8px;
-    color: var(--u-text-color);
+    color: var(--u-txt-color);
     text-decoration: none;
     transition: all 0.2s ease;
     cursor: pointer;
   }
   :host(:hover) {
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
     background-color: var(--u-bg-color-hover);
   }
   :host([selected]) {
-    color: var(--u-text-color-inverse);
+    color: var(--u-txt-color-inverse);
     background-color: var(--u-blue-600);
-    box-shadow: 0 1px 3px var(--u-shadow-weak);
+    box-shadow: 0 1px 3px var(--u-shadow-color-weak);
   }
   :host([selected]:hover) {
-    color: var(--u-text-color-inverse);
+    color: var(--u-txt-color-inverse);
     background-color: var(--u-blue-700);
-    box-shadow: 0 2px 6px var(--u-shadow-normal);
+    box-shadow: 0 2px 6px var(--u-shadow-color-normal);
   }
   
   u-link {
@@ -54,5 +54,5 @@ const r = o`
   }
 `;
 export {
-  r as styles
+  e as styles
 };

package/dist/components/SidebarLogo.js

@@ -1,6 +1,6 @@
 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 { UIcon as l } from "@iyulab/components/dist/components/icon/UIcon.component.js";
 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) => {
@@ -29,8 +29,7 @@ class o extends h {
             src=${this.image}
             alt="App Logo"
           />` : this.type === "icon" && this.icon ? s`
-          <u-icon part="icon" 
-            .remote=${!0}
+          <u-icon part="icon"
             .name=${this.icon}
           ></u-icon>` : m}
         <span part="label"

package/dist/components/SidebarLogo.styles.js

@@ -1,19 +1,19 @@
-import { css as e } from "lit";
-const t = e`
+import { css as o } from "lit";
+const e = o`
   :host {
     display: block;
     min-width: 0;
     font-size: 32px;
-    color: var(--u-text-color);
+    color: var(--u-txt-color);
     user-select: none;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   :host(:hover) {
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
   }
   :host(:active) {
-    color: var(--u-text-color-active);
+    color: var(--u-txt-color-active);
   }
 
   .container {
@@ -53,5 +53,5 @@ const t = e`
   }
 `;
 export {
-  t as styles
+  e as styles
 };

package/dist/components/SidebarSection.styles.js

@@ -21,7 +21,7 @@ const o = e`
   .title {
     font-size: 12px;
     font-weight: 700;
-    color: var(--u-soft-text-color);
+    color: var(--u-txt-color-weak);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin: 0;
@@ -29,7 +29,7 @@ const o = e`
   
   .subtitle {
     font-size: 11px;
-    color: var(--u-text-color-disabled);
+    color: var(--u-txt-color-disabled);
     margin: 0;
   }
 

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/internals/observables.d.ts

@@ -5,7 +5,3 @@ export type ScreenSize = 'small' | 'medium' | 'large';
  * 현재 화면 크기 상태
  */
 export declare const screen: IObservableValue<ScreenSize>;
-/**
- * 로딩 진행 상태 (0 - 100)
- */
-export declare const progress: IObservableValue<number>;

package/dist/internals/observables.js

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

package/dist/layouts/SidebarLayout.d.ts

@@ -1,17 +1,19 @@
 import { nothing, PropertyValues } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UIconButton } from '@iyulab/components/dist/components/icon-button/UIconButton.component.js';
+import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.component.js';
 import { ExtendedBaseElement } from '../internals/ExtendedBaseElement';
-import { ProgressBar } from '../components/ProgressBar';
 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-progress-bar': ProgressBar;
+        'u-icon-button': UIconButton;
+        'u-progress-bar': UProgressBar;
         'u-sidebar-logo': SidebarLogo;
         'u-sidebar-section': SidebarSection;
         'u-sidebar-group': SidebarGroup;
@@ -35,7 +37,7 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
     static dependencies: Record<string, typeof BaseElement>;
     /** 반응형 상태 관리를 위한 MobX 반응 해제 함수들 */
     private disposers;
-    progressEl?: ProgressBar;
+    progressBarEl: UProgressBar;
     /** 사이드바 상태 */
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
@@ -55,4 +57,10 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
      * 백드롭 클릭 or 라우트 변경 시
      */
     private toggleStateIfModalState;
+    /** 라우트 변경 시작 핸들러 */
+    private handleRouteBegin;
+    /** 라우트 변경 진행 핸들러 */
+    private handleRouteProgress;
+    /** 라우트 변경 완료 핸들러 */
+    private handleRouteDone;
 }

package/dist/layouts/SidebarLayout.js

@@ -1,24 +1,24 @@
 import { nothing as p, html as i } from "lit";
-import { query as f, state as b, property as h, customElement as m } from "lit/decorators.js";
-import { repeat as l } from "lit/directives/repeat.js";
-import { autorun as g } from "mobx";
-import { IconButton as $ } from "@iyulab/components/dist/components/icon-button/IconButton.js";
-import { screen as u, progress as y } from "../internals/observables.js";
-import { ExtendedBaseElement as v } from "../internals/ExtendedBaseElement.js";
-import { ProgressBar as S } from "../components/ProgressBar.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 { UIconButton as v } from "@iyulab/components/dist/components/icon-button/UIconButton.component.js";
+import { UProgressBar as y } from "@iyulab/components/dist/components/progress-bar/UProgressBar.component.js";
+import { screen as u } from "../internals/observables.js";
+import { ExtendedBaseElement as S } from "../internals/ExtendedBaseElement.js";
 import { SidebarLogo as _ } from "../components/SidebarLogo.js";
-import { SidebarSection as k } from "../components/SidebarSection.js";
-import { SidebarGroup as w } from "../components/SidebarGroup.js";
-import { SidebarLink as I } from "../components/SidebarLink.js";
-import { SidebarButton as E } from "../components/SidebarButton.js";
-import { styles as C } from "./SidebarLayout.styles.js";
-import { unsafeHTML as O } from "lit/directives/unsafe-html.js";
-var M = Object.defineProperty, L = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, B = Reflect.get, n = (e, t, s, a) => {
-  for (var r = a > 1 ? void 0 : a ? L(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+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 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;
-}, j = (e, t, s) => B(P(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 = u.get();
@@ -26,19 +26,22 @@ let o = class extends v {
     }, this.toggleStateIfModalState = () => {
       const e = u.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(g(() => {
+    super.connectedCallback(), this.disposers.push($(() => {
       const e = u.get();
       this.updateState(e);
-    })), this.disposers.push(g(() => {
-      const e = y.get();
-      this.progressEl && (this.progressEl.value = e);
-    })), window.addEventListener("route-begin", this.toggleStateIfModalState);
+    })), 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.toggleStateIfModalState), 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,14 +54,15 @@ 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"
+            lib="internal"
             name=${this.state === "closed" ? "chevron-right" : "layout-sidebar"}
             @click="${this.toggleState}"
           ></u-icon-button>
@@ -66,7 +70,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)
@@ -76,7 +80,7 @@ let o = class extends v {
         <!-- Sidebar Footer -->
         <div class="sidebar-footer" part="sidebar-footer"
           ?hidden="${!this.config.footer || this.config.footer.length === 0}">
-          ${l(
+          ${n(
       this.config.footer ?? [],
       (e, t) => t,
       (e, t) => this.renderItem(e)
@@ -100,7 +104,11 @@ let o = class extends v {
   }
   /** 사이드바 아이템 렌더링 */
   renderItem(e) {
-    return e ? e.type === "content" ? this.state === "slim" ? p : O(e.content) : e.type === "button" ? i`
+    if (!e) return p;
+    if (e.type === "innerHtml") {
+      const t = e.render(this.state);
+      return typeof t == "string" ? m(t) : i`${t}`;
+    } else return e.type === "button" ? i`
         <u-sidebar-button
           ?compact=${this.state === "slim"}
           .icon="${e.icon}"
@@ -115,7 +123,7 @@ 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)
@@ -129,7 +137,7 @@ let o = class extends v {
           .label="${e.label}"
           .items="${e.items}"
           .styles="${e.styles}">
-          ${l(
+          ${n(
       e.items,
       (t, s) => s,
       (t, s) => this.renderItem(t)
@@ -144,34 +152,34 @@ let o = class extends v {
           .pattern="${e.pattern}"
           .styles="${e.styles}"
         ></u-sidebar-link>
-      ` : p;
+      `;
   }
   /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
   updateState(e) {
     e === "large" ? this.state = "docked" : e === "medium" ? this.state = "slim" : e === "small" ? this.state = "closed" : console.warn("Unknown screen size:", e);
   }
 };
-o.styles = [j(o, o, "styles"), C];
+o.styles = [O(o, o, "styles"), L];
 o.dependencies = {
-  "u-icon-button": $,
-  "u-progress-bar": S,
+  "u-icon-button": v,
+  "u-progress-bar": y,
   "u-sidebar-logo": _,
-  "u-sidebar-section": k,
-  "u-sidebar-group": w,
-  "u-sidebar-link": I,
-  "u-sidebar-button": E
+  "u-sidebar-section": w,
+  "u-sidebar-group": k,
+  "u-sidebar-link": E,
+  "u-sidebar-button": B
 };
-n([
-  f("u-progress-bar")
-], o.prototype, "progressEl", 2);
-n([
-  b()
+l([
+  h("u-progress-bar")
+], o.prototype, "progressBarEl", 2);
+l([
+  g()
 ], o.prototype, "state", 2);
-n([
-  h({ type: Object })
+l([
+  b({ type: Object })
 ], o.prototype, "config", 2);
-o = n([
-  m("app-sidebar-layout")
+o = l([
+  f("u-sidebar-layout")
 ], o);
 export {
   o as SidebarLayout

package/dist/layouts/SidebarLayout.styles.js

@@ -4,8 +4,8 @@ const r = o`
     position: relative;
     display: flex;
     flex-direction: row;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
   }
 
@@ -21,7 +21,7 @@ const r = o`
     height: 100vh;
     background: var(--u-panel-bg-color);
     border-right: 1px solid var(--u-border-color);
-    box-shadow: 0 2px 8px var(--u-shadow-weak);
+    box-shadow: 0 2px 8px var(--u-shadow-color-weak);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   /* Sidebar states */
@@ -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

@@ -8,18 +8,18 @@ import { SidebarButtonConfig } from '../components/SidebarButton';
 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;
+/** 사이드바 안에 HTML 또는 엘리먼트를 직접 렌더링하는 설정 */
+export interface SidebarInnerHtmlConfig {
+    type: 'innerHtml';
+    render: (state: SidebarState) => HTMLElement | string;
 }
 /** union: section | group | link | button */
-export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | SidebarContentConfig);
+export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | SidebarInnerHtmlConfig);
 /** 사이드바 전체 설정 (루트) */
 export interface SidebarLayoutConfig {
     type: 'sidebar';
     /** 최상단 앱 로고 */
-    logo: SidebarLogoConfig;
+    logo?: SidebarLogoConfig;
     /** 상단/메인 메뉴 항목들 */
     menu?: SidebarItem[];
     /** 하단(footer)에 고정해서 렌더할 항목들 */

package/dist/types/AppConfigs.d.ts

@@ -1,5 +1,5 @@
 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';
 /**
@@ -8,7 +8,7 @@ import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 export type LocalizationInitOptions = InitOptions & {
     /**
      * i18next 플러그인 배열
-     * @description i18next.use() 메서드에 전달될 플러그인들의 배열입니다.
+     * @description i18next.use() 메서드에 전달되는 플러그인들의 배열입니다.
      */
     plugins?: (Module | NewableModule<Module> | Newable<Module>)[];
 };
@@ -35,7 +35,21 @@ export interface AppConfig {
     /**
      * 클라이언트 사이드 라우팅을 위한 설정 배열
      */
-    routes: RouteConfig[];
+    routes?: RouteConfig[];
+    /**
+     * 라우팅 실패 시 대체 컨텐츠 설정
+     */
+    fallback?: FallbackRouteConfig;
+    /**
+     * 애플리케이션이 렌더링될 루트 HTML 요소
+     * @description 지정하지 않을 경우 document.body가 사용됩니다.
+     */
+    root?: Element;
+    /**
+     * 애플리케이션을 구성하기 위한 레이아웃 설정
+     * @description 현재는 사이드바 레이아웃만 지원합니다.
+     */
+    layout: LayoutConfig;
     /**
      * 애플리케이션의 스타일 테마 설정
      */
@@ -46,9 +60,4 @@ export interface AppConfig {
      * @see 설정에 대한 자세한 내용은 {@link https://www.i18next.com/overview/configuration-options} 참조하십시오.
      */
     localization?: LocalizationInitOptions;
-    /**
-     * 애플리케이션을 구성하기 위한 레이아웃 설정
-     * @description 현재는 사이드바 레이아웃만 지원합니다.
-     */
-    layout: LayoutConfig;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on react, lit-element",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -38,16 +38,16 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.1.2",
-    "@iyulab/router": "^0.5.1",
+    "@iyulab/components": "^0.1.10",
+    "@iyulab/router": "^0.5.3",
     "lit": "^3.3.1",
     "mobx": "^6.15.0",
-    "i18next": "^25.6.2"
+    "i18next": "^25.7.3"
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.3",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2",
+    "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}

package/dist/app.d.ts

@@ -1,54 +0,0 @@
-import { Router } from '@iyulab/router';
-import { AppConfig } from './types/AppConfigs.js';
-import { NotificationOptions } from './types/AppOptions.js';
-/**
- * 애플리케이션 전역 상태 및 설정 관리 클래스
- */
-declare class App {
-    private static _instance;
-    private _config?;
-    private _router?;
-    private _root?;
-    private constructor();
-    /** 싱글톤 인스턴스 반환 */
-    static get instance(): App;
-    /** 현재 앱 설정 반환 */
-    get config(): AppConfig | undefined;
-    /** 라우터 인스턴스 반환 */
-    get router(): Router | undefined;
-    /** 스타일 테마 관리 유틸리티 객체 반환 */
-    get theme(): import('@iyulab/components/dist/utilities/theme.js').Theme;
-    /** 현재 언어 코드 반환 (i18next.language) */
-    get language(): string;
-    /** 앱 로드 및 초기화 */
-    load(config: AppConfig): Promise<void>;
-    /** 앱 언로드 */
-    unload(): void;
-    /** 페이지 이동 */
-    navigate(path: string): void;
-    /** 언어 설정 변경(i18next.changeLanguage 호출) */
-    setLanguage(lang: string): Promise<void>;
-    /** 레이아웃 진행바 설정 */
-    progress(value: number): 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>;
-    /** 레이아웃 생성 */
-    private createLayout;
-    /** 알림 표시 */
-    private notify;
-    /** 화면 크기 변경 핸들러 */
-    private handleWindowResize;
-}
-/**
- * 전역 어플리케이션 설정 및 관리 인스턴스
- */
-export declare const app: App;
-export {};

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
-};