@iyulab/modern-app 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # 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

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.js

@@ -1,9 +1,9 @@
 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 s } from "@iyulab/components/dist/utilities/Theme.js";
-import { Notifier as y } from "@iyulab/components/dist/utilities/Notifier.js";
-import { ScreenObserver as c } from "./internals/ScreenObserver.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() {
@@ -26,7 +26,7 @@ class o {
   }
   /** 스타일 테마 관리 유틸리티 객체 반환 */
   get theme() {
-    return s;
+    return n;
   }
   /** 다국어 로컬라이저(i18next) 반환 */
   get i18n() {
@@ -34,16 +34,18 @@ class o {
   }
   /** 앱 로드 및 초기화 */
   async load(t) {
-    if (this.unload(), this._config = t, await s.init(t.theme), t.iconBasepath && h(t.iconBasepath), t.i18n) {
-      for (const i of t.i18n.plugins || [])
-        r.use(i);
+    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);
     }
     const e = t.root || document.body;
-    this._layout = await this.createLayout(e, t.layout), this._screen = new c({
+    this._layout = await this.createLayout(e, t.layout), this._screen = new y({
       element: e,
       breakpoints: t.layout.breakpoints || [768, 1024]
-    }), this._router = new u({
+    });
+    const i = document.createElement("u-outlet");
+    this._layout.appendChild(i), this._router = new u({
       root: this._layout,
       basepath: t.basepath,
       routes: t.routes,
@@ -80,7 +82,7 @@ class o {
   }
   /** 알림 표시 */
   async notify(t, e, i) {
-    await y.toast({
+    await c.toast({
       type: t,
       content: e,
       heading: i?.title,
@@ -93,8 +95,8 @@ class o {
     t === document.body && (document.body.style.margin = "0", document.body.style.width = "100vw", document.body.style.height = "100vh");
     let i;
     if (e.type === "sidebar") {
-      const { SidebarLayout: n } = await import("./layouts/SidebarLayout.js"), a = new n();
-      a.config = e, i = a;
+      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 t.appendChild(i), "updateComplete" in i && await i.updateComplete, i;

package/dist/components/SidebarButton.d.ts

@@ -1,5 +1,5 @@
 import { DirectiveResult } from 'lit/directive.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 /** 버튼 항목 부분 */
 type ElementParts = 'host' | 'base' | 'icon' | 'label';
@@ -16,7 +16,7 @@ export interface SidebarButtonConfig {
  */
 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.styles.js

@@ -1,10 +1,9 @@
 import { css as o } from "lit";
-const r = o`
+const e = o`
   :host {
     display: block;
     width: 100%;
     color: var(--u-txt-color);
-    color: var(--u-neutral-800);
     background-color: transparent;
     border: none;
     border-radius: 8px;
@@ -56,5 +55,5 @@ const r = o`
   }
 `;
 export {
-  r as styles
+  e as styles
 };

package/dist/components/SidebarGroup.d.ts

@@ -1,5 +1,5 @@
 import { DirectiveResult } from 'lit/directive.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.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' | 'header' | 'icon' | 'label' | 'caret' | 'items';
@@ -18,7 +18,7 @@ export interface SidebarGroupConfig {
  */
 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;
     /** 선택된 상태 */

package/dist/components/SidebarLink.d.ts

@@ -1,10 +1,10 @@
 import { DirectiveResult } from 'lit/directive.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'base' | 'icon' | 'label';
 /** 링크 항목 디폴트 타입 */
 export interface SidebarLinkConfig {
-    type?: 'link';
+    type: 'link';
     icon?: string;
     label: string | DirectiveResult;
     href: string;
@@ -17,7 +17,7 @@ export interface SidebarLinkConfig {
  */
 export declare class SidebarLink extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** selected 상태 */
     selected: boolean;
     /** 콤팩트 모드 여부 */

package/dist/components/SidebarSection.d.ts

@@ -1,5 +1,5 @@
 import { DirectiveResult } from 'lit/directive.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 import { SidebarLinkConfig } from './SidebarLink.js';
 import { SidebarGroupConfig } from './SidebarGroup.js';
@@ -17,7 +17,7 @@ export interface SidebarSectionConfig {
  */
 export declare class SidebarSection extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 콤팩트 모드 여부 */
     compact: boolean;
     /** 네비게이션 아이템 데이터 */

package/dist/internals/StyledElement.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /** 스타일 값 타입 */
 export type StyleValue = Record<string, string> | Partial<CSSStyleDeclaration>;
 /** 스타일 맵 타입 */
@@ -7,9 +7,9 @@ export type StyleMap<T extends string> = Partial<Record<T, StyleValue>>;
 /**
  * StyledBaseElement - BaseElement의 확장으로 부분별 스타일링 기능 추가
  */
-export declare class StyledElement<T extends string> extends BaseElement {
+export declare class StyledElement<T extends string> extends UElement {
     static styles: import('lit').CSSResultGroup;
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 부분별 스타일 구성 */
     styles?: StyleMap<T>;
     protected updated(changedProperties: PropertyValues): void;

package/dist/internals/StyledElement.js

@@ -1,5 +1,5 @@
-import { property as l } from "lit/decorators.js";
-import { BaseElement as c } from "@iyulab/components/dist/components/BaseElement.js";
+import { property as a } from "lit/decorators.js";
+import { UElement as c } from "@iyulab/components/dist/components/UElement.js";
 var p = Object.defineProperty, y = (n, e, i, r) => {
   for (var t = void 0, s = n.length - 1, o; s >= 0; s--)
     (o = n[s]) && (t = o(e, i, t) || t);
@@ -44,14 +44,14 @@ class f extends c {
       try {
         e.style[r] = s;
       } catch {
-        const o = r.replace(/[A-Z]/g, (a) => "-" + a.toLowerCase());
+        const o = r.replace(/[A-Z]/g, (l) => "-" + l.toLowerCase());
         e.style.setProperty(o, s);
       }
     }
   }
 }
 y([
-  l({ type: Object, attribute: !1 })
+  a({ type: Object, attribute: !1 })
 ], f.prototype, "styles");
 export {
   f as StyledElement

package/dist/layouts/SidebarLayout.d.ts

@@ -1,6 +1,6 @@
 import { nothing, PropertyValues } from 'lit';
 import { RouteContext } from '@iyulab/router';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.component.js';
@@ -39,7 +39,7 @@ declare global {
  */
 export declare class SidebarLayout extends StyledElement<SidebarParts> {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     progressBarEl: UProgressBar;
     /** 현재 라우터 컨텍스트 */
     context: RouteContext | null;

package/dist/layouts/SidebarLayout.js

@@ -13,10 +13,10 @@ import { SidebarLink as L } from "../components/SidebarLink.js";
 import { SidebarButton as _ } from "../components/SidebarButton.js";
 import { styles as C } from "./SidebarLayout.styles.js";
 import { IconRegistry as R } from "@iyulab/components/dist/utilities/IconRegistry.js";
-var S = Object.defineProperty, z = Object.getOwnPropertyDescriptor, E = Object.getPrototypeOf, x = Reflect.get, n = (e, t, s, r) => {
-  for (var o = r > 1 ? void 0 : r ? z(t, s) : t, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (o = (r ? c(t, s, o) : c(o)) || o);
-  return r && o && S(t, s, o), o;
+var S = Object.defineProperty, z = Object.getOwnPropertyDescriptor, E = Object.getPrototypeOf, x = Reflect.get, n = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? z(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (r = (o ? c(t, s, r) : c(r)) || r);
+  return o && r && S(t, s, r), r;
 }, M = (e, t, s) => x(E(e), s, t);
 R.register("sidebar-app", (e) => e === "layout-sidebar" ? '<svg viewBox="0 0 16 16"><path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"/></svg>' : e === "list" ? '<svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1 m0 5a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1 m0 5a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H2a1 1 0 0 1-1-1"/></svg>' : e === "x-lg" ? '<svg viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>' : "");
 let i = class extends w {
@@ -93,7 +93,7 @@ let i = class extends w {
           ${l(
       this.config.main ?? [],
       (e, t) => t,
-      (e, t) => this.renderItem(e)
+      (e) => this.renderItem(e)
     )}
         </nav>
 
@@ -102,7 +102,7 @@ let i = class extends w {
           ${l(
       this.config.footer ?? [],
       (e, t) => t,
-      (e, t) => this.renderItem(e)
+      (e) => this.renderItem(e)
     )}
         </div>
       </aside>
@@ -111,7 +111,7 @@ let i = class extends w {
       <div class="main" part="main" scrollable>
         <u-progress-bar part="progress"></u-progress-bar>
 
-        <u-outlet></u-outlet>
+        <slot></slot>
       </div>
 
       <!-- Backdrop for modal state -->
@@ -161,7 +161,7 @@ let i = class extends w {
           ${l(
             e.items,
             (t, s) => s,
-            (t, s) => this.renderItem(t)
+            (t) => this.renderItem(t)
           )}
         </u-sidebar-section>
       `;
@@ -177,8 +177,8 @@ let i = class extends w {
           .styles="${e.styles}">
           ${l(
             e.items,
-            (s, r) => r,
-            (s, r) => this.renderItem(s)
+            (s, o) => o,
+            (s) => this.renderItem(s)
           )}
         </u-sidebar-group>
       `;

package/dist/types/AppConfigs.d.ts

@@ -1,6 +1,6 @@
 import { InitOptions, Module, Newable, NewableModule } from 'i18next';
 import { RouteConfig, FallbackRouteConfig } from '@iyulab/router';
-import { ThemeInitOptions } from '@iyulab/components/dist/utilities/theme.js';
+import { ThemeInitOptions } from '@iyulab/components/dist/utilities/Theme.js';
 import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
 /**
  * i18next의 초기화 옵션과 플러그인 배열을 포함한 다국어 설정

package/dist/types/AppOptions.d.ts

@@ -1,4 +1,4 @@
-import { ScreenPosition } from '@iyulab/components/dist/utilities/notifier.js';
+import { ScreenPosition } from '@iyulab/components/dist/utilities/Notifier.js';
 export interface NotificationOptions {
     title?: string;
     duration?: number;

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@iyulab/modern-app",
-  "description": "web-framework by iyulab based on react, lit-element",
-  "version": "0.3.0",
+  "description": "web-framework by iyulab based on lit-element",
+  "version": "0.3.1",
   "keywords": [
     "iyulab",
     "web-framework",
-    "react",
     "lit-element"
   ],
   "license": "MIT",
@@ -38,13 +37,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.2.0",
-    "@iyulab/router": "^0.6.2",
-    "lit": "^3.3.2",
-    "i18next": "^25.8.0"
+    "@iyulab/components": "^0.4.0",
+    "@iyulab/router": "^0.7.4",
+    "i18next": "^25.8.13",
+    "lit": "^3.3.2"
   },
   "devDependencies": {
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.3.2",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"