@iyulab/modern-app 0.2.5 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 0.3.1 (2026-03-05)
+
+### Breaking Changes
+- **Slot 기반 Outlet 구조**: `SidebarLayout` 내부의 `<u-outlet>`을 `<slot>`으로 변경하고, `App`에서 Light DOM에 `<u-outlet>`을 추가하는 방식으로 전환. 이를 통해 React 라우팅 시 외부 CSS가 정상적으로 적용됨
+
+### Changes
+- **BaseElement → UElement 마이그레이션**: 모든 컴포넌트의 기반 클래스를 `BaseElement`에서 `UElement`로 변경
+- **SidebarLinkConfig**: `type` 속성을 optional에서 required로 변경
+- **import 경로 수정**: `Theme.js`, `Notifier.js` 등 대소문자 교정
+
+### Dependencies
+- `@iyulab/components` ^0.2.0 → ^0.4.0
+- `@iyulab/router` ^0.6.2 → ^0.7.2
+- `i18next` ^25.8.0 → ^25.8.13
+- `@types/node` ^25.0.9 → ^25.3.2
+
+### Fixes
+- `SidebarButton.styles.ts`에서 중복된 `color` 속성 제거
+- `repeat` 디렉티브의 미사용 콜백 파라미터 정리
+
+## 0.3.0 (2026-01-21)
+
+### Breaking Changes
+- **Configuration Updates**:
+  - Renamed `localization` to `i18n`
+  - Renamed `layout.menu` to `layout.main` 
+  - Changed `logo` type to string (icon name)
+  - Added `title` property for app title
+  - Added `iconBasepath` option
+- **Mobile layout support**: New mobile states (`mobile`, `mobile-open`) with dedicated mobile header
+
+### Removals
+- Removed `SidebarLogo` component: Logo is now rendered using `u-icon` component
+- Removed `observables.ts`: Replaced MobX observables with native `ScreenObserver` class
+- Removed `AppTypes.ts`: Type definitions moved to their respective modules
+
+### Improvements
+- Improved responsive behavior with screen size observer
+- Added route context tracking and active link highlighting
+- Improved color scheme and typography
+- Enhanced transition animations
+- Cleaner layout spacing and gaps
+- Improved event handling for route changes and screen resizing
+- Enhanced pattern matching for active link detection
+
 ## 0.2.5 (2026-01-06)
 - Updated `@iyulab/components` to v0.1.11
 

package/README.md

@@ -10,6 +10,24 @@ For complete examples and documentation, visit our demo site: [https://modern-ap
 npm install @iyulab/modern-app
 ```
 
+## Architecture
+
+`@iyulab/modern-app` is a **client-side SPA framework** built on Lit Element. It is designed for:
+
+✅ **Suitable for:**
+- Single Page Applications (SPA)
+- Admin dashboards and internal tools
+- Progressive Web Apps (PWA)
+- Projects where SEO is not a primary concern
+
+❌ **Not suitable for:**
+- Server-Side Rendering (SSR) frameworks (Next.js, Nuxt, SvelteKit, etc.)
+- Static Site Generation (SSG)
+- SEO-critical public-facing pages
+- Projects requiring initial HTML content for search engines
+
+This is by design — Lit components render on the client side. If you need SSR capabilities, consider using Lit's experimental SSR support separately or choose a framework designed for SSR from the start.
+
 ## Quick Start
 
 ```typescript

package/dist/App.d.ts

@@ -1,6 +1,8 @@
 import { Router } from '@iyulab/router';
-import { AppConfig } from './types/AppConfigs.js';
-import { NotificationOptions } from './types/AppOptions.js';
+import { Theme } from '@iyulab/components/dist/utilities/Theme.js';
+import { ScreenSize } from './internals/ScreenObserver';
+import { AppConfig } from './types/AppConfigs';
+import { NotificationOptions } from './types/AppOptions';
 /**
  * 애플리케이션 전역 상태 및 설정 관리 클래스
  */
@@ -9,6 +11,7 @@ declare class App {
     private _config?;
     private _layout?;
     private _router?;
+    private _screen?;
     private constructor();
     /** 싱글톤 인스턴스 반환 */
     static get instance(): App;
@@ -16,10 +19,12 @@ declare class App {
     get config(): AppConfig | undefined;
     /** 라우터 인스턴스 반환 */
     get router(): Router | undefined;
+    /** 화면 크기 반환 */
+    get screen(): ScreenSize | undefined;
     /** 스타일 테마 관리 유틸리티 객체 반환 */
-    get theme(): import('@iyulab/components/dist/utilities/theme.js').Theme;
+    get theme(): typeof Theme;
     /** 다국어 로컬라이저(i18next) 반환 */
-    get localizer(): import('i18next').i18n;
+    get i18n(): import('i18next').i18n;
     /** 앱 로드 및 초기화 */
     load(config: AppConfig): Promise<void>;
     /** 앱 언로드 */
@@ -40,8 +45,6 @@ declare class App {
     private notify;
     /** 레이아웃 생성 */
     private createLayout;
-    /** 화면 크기 변경 핸들러 */
-    private handleWindowResize;
 }
 /**
  * 전역 어플리케이션 설정 및 관리 인스턴스

package/dist/App.js

@@ -1,18 +1,12 @@
-import { runInAction as l } from "mobx";
-import n from "i18next";
-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";
+import r from "i18next";
+import { Router as u } from "@iyulab/router";
+import { setDefaultBaseUrl as h } from "@iyulab/components/dist/utilities/IconRegistry.js";
+import { Theme as n } from "@iyulab/components/dist/utilities/Theme.js";
+import { Notifier as c } from "@iyulab/components/dist/utilities/Notifier.js";
+import { ScreenObserver as y } from "./internals/ScreenObserver.js";
 class o {
   // private 생성자로 외부에서 인스턴스 생성 방지
   constructor() {
-    this.handleWindowResize = (t) => {
-      const e = window.innerWidth, [i, a] = this._config?.layout.breakpoints || [768, 1024];
-      l(() => {
-        e < i ? s.set("small") : e < a ? s.set("medium") : s.set("large");
-      });
-    };
   }
   /** 싱글톤 인스턴스 반환 */
   static get instance() {
@@ -26,24 +20,32 @@ class o {
   get router() {
     return this._router;
   }
+  /** 화면 크기 반환 */
+  get screen() {
+    return this._screen?.get();
+  }
   /** 스타일 테마 관리 유틸리티 객체 반환 */
   get theme() {
-    return u;
+    return n;
   }
   /** 다국어 로컬라이저(i18next) 반환 */
-  get localizer() {
-    return n;
+  get i18n() {
+    return r;
   }
   /** 앱 로드 및 초기화 */
   async load(t) {
-    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);
+    if (this.unload(), this._config = t, await n.init(t.theme), t.iconBasepath && h(t.iconBasepath), t.i18n) {
+      for (const a of t.i18n.plugins || [])
+        r.use(a);
+      await r.init(t.i18n);
     }
-    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({
+    this._layout = await this.createLayout(e, t.layout), this._screen = new y({
+      element: e,
+      breakpoints: t.layout.breakpoints || [768, 1024]
+    });
+    const i = document.createElement("u-outlet");
+    this._layout.appendChild(i), this._router = new u({
       root: this._layout,
       basepath: t.basepath,
       routes: t.routes,
@@ -52,7 +54,7 @@ class o {
   }
   /** 앱 언로드 */
   unload() {
-    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);
+    this._screen && (this._screen.destroy(), this._screen = void 0), 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) {
@@ -80,7 +82,7 @@ class o {
   }
   /** 알림 표시 */
   async notify(t, e, i) {
-    await h.toast({
+    await c.toast({
       type: t,
       content: e,
       heading: i?.title,
@@ -91,13 +93,13 @@ class o {
   /** 레이아웃 생성 */
   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;
+    let i;
+    if (e.type === "sidebar") {
+      const { SidebarLayout: a } = await import("./layouts/SidebarLayout.js"), s = new a();
+      s.config = e, i = s;
     } 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;
+    return t.appendChild(i), "updateComplete" in i && await i.updateComplete, i;
   }
 }
 const _ = o.instance;

package/dist/components/SidebarButton.d.ts

@@ -1,7 +1,6 @@
 import { DirectiveResult } from 'lit/directive.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { ExtendedBaseElement } from '../internals/ExtendedBaseElement.js';
-import { StyleMap } from '../types/AppTypes.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 /** 버튼 항목 부분 */
 type ElementParts = 'host' | 'base' | 'icon' | 'label';
 /** 버튼 항목 구성 */
@@ -15,9 +14,9 @@ export interface SidebarButtonConfig {
 /**
  * SidebarButton 컴포넌트는 사이드바 내의 버튼을 표시합니다.
  */
-export declare class SidebarButton extends ExtendedBaseElement<ElementParts> {
+export declare class SidebarButton extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 콤팩트 모드 여부 */
     compact: boolean;
     /** 기본 u-icon 경로의 아이콘 이름 */

package/dist/components/SidebarButton.js

@@ -1,19 +1,19 @@
 import { html as c } from "lit";
 import { property as o } from "lit/decorators.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 d } from "./SidebarButton.styles.js";
-var u = Object.defineProperty, n = (e, p, s, f) => {
+import { StyledElement as m } from "../internals/StyledElement.js";
+import { styles as u } from "./SidebarButton.styles.js";
+var d = Object.defineProperty, p = (e, n, 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 && u(p, s, t), t;
+    (a = e[r]) && (t = a(n, s, t) || t);
+  return t && d(n, s, t), t;
 };
 class i extends m {
   constructor() {
     super(...arguments), this.compact = !1;
   }
   static {
-    this.styles = [super.styles, d];
+    this.styles = [super.styles, u];
   }
   static {
     this.dependencies = {
@@ -22,26 +22,24 @@ class i extends m {
   }
   render() {
     return c`
-      <button part="base">
-        <u-icon part="icon"
-          ?hidden=${!this.icon}
+      <button part="base" ?compact=${this.compact}>
+        <u-icon part="icon" ?hidden=${!this.icon}
           .name=${this.icon}
         ></u-icon>
-        <span part="label"
-          ?hidden=${this.compact}>
+        <span part="label" ?hidden=${this.compact}>
           ${this.label}
         </span>
       </button>
     `;
   }
 }
-n([
+p([
   o({ type: Boolean, reflect: !0 })
 ], i.prototype, "compact");
-n([
+p([
   o({ type: String })
 ], i.prototype, "icon");
-n([
+p([
   o({ type: String })
 ], i.prototype, "label");
 export {

package/dist/components/SidebarButton.styles.js

@@ -1,25 +1,15 @@
 import { css as o } from "lit";
-const r = o`
+const e = o`
   :host {
     display: block;
     width: 100%;
-    padding: 8px 12px;
-    font-size: 14px;
     color: var(--u-txt-color);
-    background: transparent;
+    background-color: transparent;
     border: none;
     border-radius: 8px;
     transition: all 0.2s ease;
     cursor: pointer;
   }
-  :host([comact]) {
-    padding: 8px;
-  }
-  :host([compact]) button {
-    width: 100%;
-    justify-content: center;
-    gap: 0;
-  }
   :host(:hover) {
     color: var(--u-txt-color-hover);
     background-color: var(--u-bg-color-hover);
@@ -29,13 +19,19 @@ const r = o`
   }
 
   button {
-    width: 100%;
     all: unset;
+    width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     gap: 12px;
+    padding: 8px 12px;
+  }
+  button[compact] {
+    justify-content: center;
+    gap: 0;
+    padding: 8px;
   }
   button:focus-visible {
     outline: 2px solid #6666ff;
@@ -43,20 +39,21 @@ const r = o`
   }
   
   u-icon {
-    font-size: 20px;
-    color: inherit;
     flex-shrink: 0;
+    color: inherit;
+    font-size: 20px;
   }
 
   span {
     flex: 1;
+    font-size: 14px;
     font-weight: 500;
-    color: inherit;
-    overflow: hidden;
+    line-height: 20px;
     white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
   }
 `;
 export {
-  r as styles
+  e as styles
 };

package/dist/components/SidebarGroup.d.ts

@@ -1,9 +1,8 @@
 import { DirectiveResult } from 'lit/directive.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { StyleMap } from '../types/AppTypes.js';
-import { ExtendedBaseElement } from '../internals/ExtendedBaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 import { SidebarLinkConfig } from './SidebarLink.js';
-type ElementParts = 'host' | 'container' | 'base' | 'icon' | 'label' | 'toggler' | 'items';
+type ElementParts = 'host' | 'header' | 'icon' | 'label' | 'caret' | 'items';
 /** 그룹: 하위 링크들 묶음 */
 export interface SidebarGroupConfig {
     type: 'group';
@@ -17,11 +16,13 @@ export interface SidebarGroupConfig {
 /**
  * SidebarGroup 컴포넌트는 네비게이션 그룹 아이템을 표시합니다.
  */
-export declare class SidebarGroup extends ExtendedBaseElement<ElementParts> {
+export declare class SidebarGroup extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 콤팩트 모드 여부 */
     compact: boolean;
+    /** 선택된 상태 */
+    selected: boolean;
     /** collapsed 상태 */
     collapsed: boolean;
     /** 네비게이션 아이템 데이터 */

package/dist/components/SidebarGroup.js

@@ -1,27 +1,22 @@
-import { html as c } from "lit";
-import { property as o } from "lit/decorators.js";
+import { html as p } from "lit";
+import { property as e } from "lit/decorators.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";
-var y = Object.defineProperty, r = (i, n, e, l) => {
-  for (var t = void 0, a = i.length - 1, p; a >= 0; a--)
-    (p = i[a]) && (t = p(n, e, t) || t);
-  return t && y(n, e, t), t;
+import { StyledElement as h } from "../internals/StyledElement.js";
+import { SidebarLink as m } from "./SidebarLink.js";
+import { styles as u } from "./SidebarGroup.styles.js";
+var f = Object.defineProperty, o = (i, l, c, a) => {
+  for (var t = void 0, r = i.length - 1, n; r >= 0; r--)
+    (n = i[r]) && (t = n(l, c, t) || t);
+  return t && f(l, c, t), t;
 };
-class s extends u {
+class s extends h {
   constructor() {
-    super(...arguments), this.compact = !1, this.collapsed = !0, this.handleButtonClick = (n) => {
-      if (this.compact) {
-        const e = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((l) => l instanceof h);
-        m.navigate(e?.href || "/");
-      } else
-        this.collapsed = !this.collapsed;
+    super(...arguments), this.compact = !1, this.selected = !1, this.collapsed = !0, this.handleButtonClick = (l) => {
+      this.compact ? this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((t) => t instanceof m)?.renderRoot.querySelector("u-link")?.click() : this.collapsed = !this.collapsed;
     };
   }
   static {
-    this.styles = [super.styles, f];
+    this.styles = [super.styles, u];
   }
   static {
     this.dependencies = {
@@ -29,41 +24,45 @@ class s extends u {
     };
   }
   render() {
-    return c`
-      <div class="container" part="container">
-        <button part="base"
-          @click=${this.handleButtonClick}>
-          <u-icon class="icon" part="icon"
-            ?hidden=${!this.icon}
-            .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>
-        
-        <div class="items" part="items">
-          <slot></slot>
-        </div>
+    return p`
+      <button part="header"
+        ?compact=${this.compact}
+        ?selected=${this.selected}
+        @click=${this.handleButtonClick}>
+        <u-icon class="icon" part="icon" ?hidden=${!this.icon}
+          .name=${this.icon}
+        ></u-icon>
+        <span class="label" part="label" ?hidden=${this.compact}>
+          ${this.label}
+        </span>
+        <u-icon class="caret" part="caret" ?hidden=${this.compact}
+          ?collapsed=${this.collapsed}
+          lib="internal"
+          name="chevron-down"
+        ></u-icon>
+      </button>
+      
+      <div class="items" part="items" ?hidden=${this.compact}
+        ?collapsed=${this.collapsed}>
+        <slot></slot>
       </div>
     `;
   }
 }
-r([
-  o({ type: Boolean, reflect: !0 })
+o([
+  e({ type: Boolean, reflect: !0 })
 ], s.prototype, "compact");
-r([
-  o({ type: Boolean, reflect: !0 })
+o([
+  e({ type: Boolean, reflect: !0 })
+], s.prototype, "selected");
+o([
+  e({ type: Boolean, reflect: !0 })
 ], s.prototype, "collapsed");
-r([
-  o({ type: String })
+o([
+  e({ type: String })
 ], s.prototype, "icon");
-r([
-  o({ type: String })
+o([
+  e({ type: String })
 ], s.prototype, "label");
 export {
   s as SidebarGroup

package/dist/components/SidebarGroup.styles.js

@@ -1,93 +1,88 @@
 import { css as o } from "lit";
-const e = o`
+const t = o`
   :host {
-    display: block;
-  }
-  :host([compact]) button {
-    justify-content: center;
-    padding: 8px;
-  }
-  :host([compact]) .label {
-    display: none;
-  }
-  :host([compact]) .toggler {
-    display: none;
-  }
-  :host([compact]) .items {
-    display: none;
-  }
-  :host(:not([compact])[collapsed]) .toggler {
-    transform: rotate(-90deg);
-  }
-  :host(:not([compact])[collapsed]) .items {
-    height: 0;
-    margin-top: 0;
-    opacity: 0;
-  }
-
-  .container {
     display: flex;
     flex-direction: column;
+    color: var(--u-neutral-800);
   }
 
   button {
     all: unset;
-    position: relative;
+    width: 100%;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     gap: 12px;
-    width: 100%;
     padding: 8px 12px;
-    color: var(--u-txt-color);
-    font-family: inherit;
-    background: transparent;
+    background-color: transparent;
     border: none;
     border-radius: 8px;
     transition: all 0.2s ease;
     cursor: pointer;
   }
+  button[compact] {
+    justify-content: center;
+    gap: 0;
+    padding: 8px;
+  }
+  button[selected] {
+    color: var(--u-blue-700);
+  }
   button:hover {
-    background-color: var(--u-bg-color-hover);
     color: var(--u-txt-color-hover);
+    background-color: var(--u-bg-color-hover);
+  }
+  button:active {
+    background-color: var(--u-bg-color-active);
+  }
+  button:focus-visible {
+    outline: 2px solid #6666ff;
+    outline-offset: 2px;
   }
 
   .icon {
-    font-size: 20px;
-    color: inherit;
     flex-shrink: 0;
+    color: inherit;
+    font-size: 20px;
   }
 
   .label {
     flex: 1;
-    color: inherit;
     font-size: 14px;
-    font-weight: 600;
     line-height: 20px;
-    text-align: left;
+    font-weight: 600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  .toggler {
+  .caret {
+    color: inherit;
     font-size: 16px !important;
     transition: transform 0.2s ease;
   }
+  .caret[collapsed] {
+    transform: rotate(-90deg);
+  }
 
   .items {
     display: flex;
     flex-direction: column;
-    margin-left: 32px;
-    margin-top: 4px;
     gap: 4px;
-    overflow: hidden;
-    transition: all 0.3s ease;
+    margin-top: 4px;
+    margin-left: 32px;
     border-left: 2px solid var(--u-border-color-weak);
     padding-left: 8px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+  .items[collapsed] {
+    margin-top: 0;
+    height: 0;
+    opacity: 0;
   }
 `;
 export {
-  e as styles
+  t as styles
 };