@iyulab/modern-app 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,14 +1,18 @@
-# Changelog
-
-## 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)
+# 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,16 +1,16 @@
-import { runInAction as u } from "mobx";
+import { runInAction as l } 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 { screen as r } from "./internals/observables.js";
+import { Router as d } from "@iyulab/router";
+import { theme as u } from "@iyulab/components/dist/utilities/theme.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];
-      u(() => {
-        e < i ? r.set("small") : e < a ? r.set("medium") : r.set("large");
+      l(() => {
+        e < i ? s.set("small") : e < a ? s.set("medium") : s.set("large");
       });
     };
   }
@@ -28,7 +28,7 @@ class o {
   }
   /** 스타일 테마 관리 유틸리티 객체 반환 */
   get theme() {
-    return s;
+    return u;
   }
   /** 다국어 로컬라이저(i18next) 반환 */
   get localizer() {
@@ -36,12 +36,14 @@ class o {
   }
   /** 앱 로드 및 초기화 */
   async load(t) {
-    if (this.unload(), this._config = t, await s.init(t.theme), t.localization) {
-      for (const e of t.localization.plugins || [])
-        n.use(e);
+    if (this.unload(), this._config = t, await u.init(t.theme), t.localization) {
+      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._layout = await this.createLayout(t.layout), this._router = new l({
+    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,
@@ -76,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 d.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 p = o.instance;
+const _ = o.instance;
 export {
-  p 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,12 +1,12 @@
 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 m = Object.defineProperty, n = (o, r, a, u) => {
+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 && m(r, a, t), t;
+  return t && f(r, a, t), t;
 };
 class i extends h {
   constructor() {
@@ -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/layouts/SidebarLayout.d.ts

@@ -1,7 +1,7 @@
 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 { 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 { SidebarLogo } from '../components/SidebarLogo';
 import { SidebarSection } from '../components/SidebarSection';
@@ -12,8 +12,8 @@ import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout
 /** 엘리먼트 타입 매핑 (for deveveloper experience) */
 declare global {
     interface HTMLElementTagNameMap {
-        'u-icon-button': IconButton;
-        'u-progress-bar': ProgressBar;
+        'u-icon-button': UIconButton;
+        'u-progress-bar': UProgressBar;
         '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;
-    progressBarEl: ProgressBar;
+    progressBarEl: UProgressBar;
     /** 사이드바 상태 */
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */

package/dist/layouts/SidebarLayout.js

@@ -1,11 +1,11 @@
-import { nothing as u, html as i } from "lit";
+import { nothing as p, html as i } from "lit";
 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 { 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 w } from "../components/SidebarSection.js";
@@ -21,10 +21,10 @@ var R = Object.defineProperty, I = Object.getOwnPropertyDescriptor, P = Object.g
 let o = class extends S {
   constructor() {
     super(...arguments), this.disposers = [], this.state = "docked", this.toggleState = () => {
-      const e = p.get();
+      const e = u.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.toggleStateIfModalState = () => {
-      const e = p.get();
+      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();
@@ -36,7 +36,7 @@ let o = class extends S {
   }
   connectedCallback() {
     super.connectedCallback(), this.disposers.push($(() => {
-      const e = p.get();
+      const e = u.get();
       this.updateState(e);
     })), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress);
   }
@@ -62,6 +62,7 @@ let o = class extends S {
             @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>
@@ -99,11 +100,15 @@ let o = class extends S {
         ?hidden="${this.state !== "modal"}"
         @click="${this.toggleStateIfModalState}"
       ></div>
-    ` : u;
+    ` : p;
   }
   /** 사이드바 아이템 렌더링 */
   renderItem(e) {
-    return e ? e.type === "content" ? this.state === "slim" ? u : m(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}"
@@ -147,7 +152,7 @@ let o = class extends S {
           .pattern="${e.pattern}"
           .styles="${e.styles}"
         ></u-sidebar-link>
-      ` : u;
+      `;
   }
   /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
   updateState(e) {
@@ -174,7 +179,7 @@ l([
   b({ type: Object })
 ], o.prototype, "config", 2);
 o = l([
-  f("app-sidebar-layout")
+  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 */

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

@@ -8,13 +8,13 @@ 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';

package/dist/types/AppConfigs.d.ts

@@ -40,6 +40,16 @@ export interface AppConfig {
      * 라우팅 실패 시 대체 컨텐츠 설정
      */
     fallback?: FallbackRouteConfig;
+    /**
+     * 애플리케이션이 렌더링될 루트 HTML 요소
+     * @description 지정하지 않을 경우 document.body가 사용됩니다.
+     */
+    root?: Element;
+    /**
+     * 애플리케이션을 구성하기 위한 레이아웃 설정
+     * @description 현재는 사이드바 레이아웃만 지원합니다.
+     */
+    layout: LayoutConfig;
     /**
      * 애플리케이션의 스타일 테마 설정
      */
@@ -50,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.2",
+  "version": "0.2.3",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -38,16 +38,16 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.1.3",
-    "@iyulab/router": "^0.5.2",
+    "@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,50 +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 _layout?;
-    private _router?;
-    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) 반환 */
-    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>;
-    /** 레이아웃 생성 */
-    private createLayout;
-    /** 알림 표시 */
-    private notify;
-    /** 화면 크기 변경 핸들러 */
-    private handleWindowResize;
-}
-/**
- * 전역 어플리케이션 설정 및 관리 인스턴스
- */
-export declare const app: App;
-export {};