@iyulab/modern-app 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,7 +1,10 @@
 # Changelog
 
-## [Unreleased]
-- 
+## 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,7 +1,6 @@
 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';
 /**
  * 애플리케이션 전역 상태 및 설정 관리 클래스
  */
@@ -17,28 +16,30 @@ 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.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>;
-    /** 경고 메시지 */
-    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 { 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 { runInAction as r } 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 { theme as u } from "@iyulab/components/dist/utilities/theme.js";
+import { screen as s, progress as d } 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];
+      r(() => {
+        e < i ? s.set("small") : e < a ? s.set("medium") : s.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,31 +26,22 @@ 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 u;
+  }
+  /** 현재 언어 코드 반환 (i18next.language) */
+  get language() {
+    return n.language;
   }
   /** 앱 로드 및 초기화 */
   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 u.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({
+    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize")), this._root = await this.createLayout(t.layout), this._router = new l({
       root: this._root,
       basepath: t.basepath,
       routes: t.routes
@@ -64,48 +55,58 @@ class i {
   navigate(t) {
     this._router?.go(t);
   }
-  /** 성공 메시지 */
-  async success(t, e) {
-    await this.notify("success", t, e);
+  /** 언어 설정 변경(i18next.changeLanguage 호출) */
+  async setLanguage(t) {
+    await n.changeLanguage(t);
   }
-  /** 에러 메시지 */
-  async error(t, e) {
-    await this.notify("error", t, e);
+  /** 레이아웃 진행바 설정 */
+  progress(t) {
+    r(() => {
+      d.set(t);
+    });
   }
-  /** 경고 메시지 */
-  async warning(t, e) {
-    await this.notify("warning", t, e);
+  /** 공지 메시지 */
+  async notice(t, e) {
+    await this.notify("notice", t, e);
   }
   /** 정보 메시지 */
   async info(t, e) {
     await this.notify("info", t, e);
   }
-  /** 확인 대화상자 */
-  async confirm(t, e) {
-    return window.confirm(t);
+  /** 경고 메시지 */
+  async warning(t, e) {
+    await this.notify("warning", t, e);
+  }
+  /** 성공 메시지 */
+  async success(t, e) {
+    await this.notify("success", t, e);
+  }
+  /** 에러 메시지 */
+  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) {
-    await d.toast({
+  async notify(t, e, i) {
+    await c.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 g = o.instance;
 export {
-  _ as app
+  g 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 u = Object.defineProperty, n = (o, r, a, f) => {
+  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;
 };
-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.routeInfo.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/{observers.d.ts → observables.d.ts}

@@ -1,5 +1,6 @@
 import { IObservableValue } from 'mobx';
-import { ScreenSize } from '../types/AppTypes';
+/** 화면 크기 타입 */
+export type ScreenSize = 'small' | 'medium' | 'large';
 /**
  * 현재 화면 크기 상태
  */

package/dist/layouts/SidebarLayout.d.ts

@@ -1,8 +1,7 @@
-import { nothing, PropertyValues, TemplateResult } from 'lit';
+import { nothing, PropertyValues } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.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';
@@ -13,7 +12,6 @@ import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout
 declare global {
     interface HTMLElementTagNameMap {
         'u-progress-bar': ProgressBar;
-        'u-unsafe-content': UnsafeContent;
         'u-sidebar-logo': SidebarLogo;
         'u-sidebar-section': SidebarSection;
         'u-sidebar-group': SidebarGroup;
@@ -45,7 +43,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 +54,5 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
      * 모달 상태에서 사이드바 닫기
      * 백드롭 클릭 or 라우트 변경 시
      */
-    private handleCloseModal;
+    private toggleStateIfModalState;
 }

package/dist/layouts/SidebarLayout.js

@@ -1,44 +1,44 @@
-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 { 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 b } from "mobx";
+import { autorun as g } 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 { screen as u, progress as y } from "../internals/observables.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 { ProgressBar as S } from "../components/ProgressBar.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 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 { 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--)
     (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);
+}, j = (e, t, s) => B(P(e), s, t);
 let o = class extends v {
   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.handleCloseModal = () => {
-      const e = p.get();
+    }, this.toggleStateIfModalState = () => {
+      const e = u.get();
       this.state === "modal" && (e === "medium" ? this.state = "slim" : e === "small" && (this.state = "closed"));
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.disposers.push(b(() => {
-      const e = p.get();
+    super.connectedCallback(), this.disposers.push(g(() => {
+      const e = u.get();
       this.updateState(e);
-    })), this.disposers.push(b(() => {
+    })), this.disposers.push(g(() => {
       const e = y.get();
       this.progressEl && (this.progressEl.value = e);
-    })), window.addEventListener("route-begin", this.handleCloseModal);
+    })), window.addEventListener("route-begin", this.toggleStateIfModalState);
   }
   disconnectedCallback() {
-    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.handleCloseModal), super.disconnectedCallback();
+    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.toggleStateIfModalState), super.disconnectedCallback();
   }
   updated(e) {
     super.updated(e), e.has("config") && (this.styles = this.config?.styles);
@@ -74,7 +74,8 @@ let o = class extends v {
         </nav>
 
         <!-- Sidebar Footer -->
-        <div class="sidebar-footer" part="sidebar-footer">
+        <div class="sidebar-footer" part="sidebar-footer"
+          ?hidden="${!this.config.footer || this.config.footer.length === 0}">
           ${l(
       this.config.footer ?? [],
       (e, t) => t,
@@ -93,26 +94,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;
+    ` : p;
   }
   /** 사이드바 아이템 렌더링 */
   renderItem(e) {
-    return e ? e.type === "group" ? i`
-        <u-sidebar-group
+    return e ? e.type === "content" ? this.state === "slim" ? p : O(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"}
@@ -126,19 +121,20 @@ let o = class extends v {
       (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}">
+          ${l(
+      e.items,
+      (t, s) => s,
+      (t, s) => this.renderItem(t)
+    )}
+        </u-sidebar-group>
       ` : i`
         <u-sidebar-link
           ?compact=${this.state === "slim"}
@@ -148,35 +144,34 @@ let o = class extends v {
           .pattern="${e.pattern}"
           .styles="${e.styles}"
         ></u-sidebar-link>
-      ` : u;
+      ` : 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 = [L(o, o, "styles"), I];
+o.styles = [j(o, o, "styles"), C];
 o.dependencies = {
   "u-icon-button": $,
-  "u-progress-bar": _,
-  "u-unsafe-content": S,
-  "u-sidebar-logo": k,
-  "u-sidebar-section": C,
+  "u-progress-bar": S,
+  "u-sidebar-logo": _,
+  "u-sidebar-section": k,
   "u-sidebar-group": w,
-  "u-sidebar-link": E,
-  "u-sidebar-button": O
+  "u-sidebar-link": I,
+  "u-sidebar-button": E
 };
 n([
-  h("u-progress-bar")
+  f("u-progress-bar")
 ], o.prototype, "progressEl", 2);
 n([
-  f()
+  b()
 ], o.prototype, "state", 2);
 n([
-  m({ type: Object })
+  h({ type: Object })
 ], o.prototype, "config", 2);
 o = n([
-  g("app-sidebar-layout")
+  m("app-sidebar-layout")
 ], o);
 export {
   o as SidebarLayout

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

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

package/dist/types/AppConfigs.d.ts

@@ -5,7 +5,7 @@ import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 /**
  * i18next의 초기화 옵션과 플러그인 배열을 포함한 다국어 설정
  */
-export type LocaleInitOptions = InitOptions & {
+export type LocalizationInitOptions = InitOptions & {
     /**
      * i18next 플러그인 배열
      * @description i18next.use() 메서드에 전달될 플러그인들의 배열입니다.
@@ -45,7 +45,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.1",
   "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.2",
+    "@iyulab/router": "^0.5.1",
     "lit": "^3.3.1",
     "mobx": "^6.15.0",
     "i18next": "^25.6.2"

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