@iyulab/modern-app 0.2.4 → 0.3.0

package/dist/components/SidebarLink.js

@@ -1,18 +1,16 @@
 import { html as c } from "lit";
 import { property as e } from "lit/decorators.js";
 import { UIcon as l } from "@iyulab/components/dist/components/icon/UIcon.component.js";
-import { ExtendedBaseElement as h } from "../internals/ExtendedBaseElement.js";
+import { StyledElement as m } from "../internals/StyledElement.js";
 import { styles as d } from "./SidebarLink.styles.js";
-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 && f(r, a, t), t;
+var h = Object.defineProperty, r = (p, n, s, y) => {
+  for (var t = void 0, i = p.length - 1, a; i >= 0; i--)
+    (a = p[i]) && (t = a(n, s, t) || t);
+  return t && h(n, s, t), t;
 };
-class i extends h {
+class o extends m {
   constructor() {
-    super(...arguments), this.selected = !1, this.compact = !1, this.handleRouteBegin = (r) => {
-      this.pattern ||= this.href, this.pattern ? (this.pattern = typeof this.pattern == "string" ? new URLPattern(this.pattern, window.location.origin) : this.pattern, this.selected = this.pattern.test(r.context.path, window.location.origin)) : this.selected = !1;
-    };
+    super(...arguments), this.selected = !1, this.compact = !1;
   }
   static {
     this.styles = [super.styles, d];
@@ -22,47 +20,39 @@ class i extends h {
       "u-icon": l
     };
   }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin);
-  }
-  disconnectedCallback() {
-    window.removeEventListener("route-begin", this.handleRouteBegin), super.disconnectedCallback();
-  }
   render() {
     return c`
-      <u-link part="base"
-        .href=${this.href || "#"}
-        ?compact=${this.compact}>
-        <u-icon part="icon"
-          ?hidden=${!this.icon}
-          .name=${this.icon}
-        ></u-icon>
-        <span part="label"
-          ?hidden=${this.compact}>
-          ${this.label}
-        </span>
+      <u-link .href=${this.href || "#"}>
+        <div class="container" part="base" ?compact=${this.compact}>
+          <u-icon part="icon" ?hidden=${!this.icon}
+            .name=${this.icon}
+          ></u-icon>
+          <span part="label" ?hidden=${this.compact}>
+            ${this.label}
+          </span>
+        </div>
       </u-link>
     `;
   }
 }
-n([
+r([
   e({ type: Boolean, reflect: !0 })
-], i.prototype, "selected");
-n([
+], o.prototype, "selected");
+r([
   e({ type: Boolean })
-], i.prototype, "compact");
-n([
+], o.prototype, "compact");
+r([
   e({ type: String })
-], i.prototype, "icon");
-n([
+], o.prototype, "icon");
+r([
   e({ type: String })
-], i.prototype, "label");
-n([
+], o.prototype, "label");
+r([
   e({ type: String })
-], i.prototype, "href");
-n([
+], o.prototype, "href");
+r([
   e({ type: String })
-], i.prototype, "pattern");
+], o.prototype, "pattern");
 export {
-  i as SidebarLink
+  o as SidebarLink
 };

package/dist/components/SidebarLink.styles.js

@@ -2,9 +2,9 @@ import { css as o } from "lit";
 const e = o`
   :host {
     display: block;
+    color: var(--u-neutral-800);
+    background-color: transparent;
     border-radius: 8px;
-    color: var(--u-txt-color);
-    text-decoration: none;
     transition: all 0.2s ease;
     cursor: pointer;
   }
@@ -23,33 +23,33 @@ const e = o`
     box-shadow: 0 2px 6px var(--u-shadow-color-normal);
   }
   
-  u-link {
+  .container {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: flex-start;
     gap: 12px;
     padding: 8px 12px;
   }
-  u-link[compact] {
+  .container[compact] {
     justify-content: center;
+    gap: 0;
     padding: 8px;
   }
 
   u-icon {
+    flex-shrink: 0;
     color: inherit;
     font-size: 20px;
-    flex-shrink: 0;
   }
 
   span {
     flex: 1;
-    color: inherit;
     font-size: 14px;
-    font-weight: 500;
     line-height: 20px;
-    overflow: hidden;
+    font-weight: 500;
     white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
   }
 `;

package/dist/components/SidebarSection.d.ts

@@ -1,11 +1,10 @@
 import { DirectiveResult } from 'lit/directive.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { ExtendedBaseElement } from '../internals/ExtendedBaseElement.js';
+import { StyledElement, StyleMap } from '../internals/StyledElement.js';
 import { SidebarLinkConfig } from './SidebarLink.js';
 import { SidebarGroupConfig } from './SidebarGroup.js';
-import { StyleMap } from '../types/AppTypes.js';
-type ElementParts = 'host' | 'container' | 'header' | 'title' | 'subtitle' | 'items';
-/** 섹션: 섹션 내에는 그룹 또는 링크들만 허용 */
+type ElementParts = 'host' | 'header' | 'title' | 'subtitle' | 'items';
+/** 섹션 내에는 그룹 또는 링크들만 허용 */
 export interface SidebarSectionConfig {
     type: 'section';
     title: string | DirectiveResult;
@@ -16,7 +15,7 @@ export interface SidebarSectionConfig {
 /**
  * SidebarSection 컴포넌트는 사이드바의 섹션 헤더를 표시합니다.
  */
-export declare class SidebarSection extends ExtendedBaseElement<ElementParts> {
+export declare class SidebarSection extends StyledElement<ElementParts> {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 콤팩트 모드 여부 */

package/dist/components/SidebarSection.js

@@ -1,39 +1,35 @@
 import { html as n } from "lit";
 import { property as i } from "lit/decorators.js";
-import { ExtendedBaseElement as d } from "../internals/ExtendedBaseElement.js";
-import { styles as c } from "./SidebarSection.styles.js";
-var m = Object.defineProperty, r = (e, a, o, h) => {
-  for (var t = void 0, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (t = l(a, o, t) || t);
-  return t && m(a, o, t), t;
+import { StyledElement as d } from "../internals/StyledElement.js";
+import { styles as m } from "./SidebarSection.styles.js";
+var c = Object.defineProperty, r = (e, a, l, h) => {
+  for (var t = void 0, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (t = o(a, l, t) || t);
+  return t && c(a, l, t), t;
 };
 class p extends d {
   constructor() {
     super(...arguments), this.compact = !1;
   }
   static {
-    this.styles = [super.styles, c];
+    this.styles = [super.styles, m];
   }
   static {
     this.dependencies = {};
   }
   render() {
     return n`
-      <div class="container" part="container">
-        <div class="header" part="header"
-          ?hidden=${this.compact}>
-          <h3 class="title" part="title">
-            ${this.mainTitle}
-          </h3>
-          <p class="subtitle" part="subtitle"
-            ?hidden=${!this.subTitle}>
-            ${this.subTitle}
-          </p>
-        </div>
-        
-        <div class="items" part="items">
-          <slot></slot>
-        </div>
+      <div class="header" part="header" ?hidden=${this.compact}>
+        <span class="title" part="title">
+          ${this.mainTitle}
+        </span>
+        <span class="subtitle" part="subtitle" ?hidden=${!this.subTitle}>
+          ${this.subTitle}
+        </span>
+      </div>
+      
+      <div class="items" part="items">
+        <slot></slot>
       </div>
     `;
   }

package/dist/components/SidebarSection.styles.js

@@ -1,44 +1,39 @@
 import { css as e } from "lit";
-const o = e`
+const i = e`
   :host {
-    display: block;
-    margin: 8px 0;
-  }
-
-  .container {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    margin: 8px 0;
   }
 
   .header {
     display: flex;
     flex-direction: column;
-    gap: 2px;
     padding: 8px 12px 4px;
   }
 
   .title {
+    color: var(--u-neutral-700);
     font-size: 12px;
     font-weight: 700;
-    color: var(--u-txt-color-weak);
-    text-transform: uppercase;
     letter-spacing: 0.5px;
-    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   
   .subtitle {
+    color: var(--u-neutral-600);
     font-size: 11px;
-    color: var(--u-txt-color-disabled);
-    margin: 0;
+    font-weight: 300;
   }
 
   .items {
     display: flex;
     flex-direction: column;
-    gap: 2px;
   }
 `;
 export {
-  o as styles
+  i as styles
 };

package/dist/index.d.ts

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

package/dist/internals/ScreenObserver.d.ts

@@ -0,0 +1,43 @@
+/** 화면 크기 타입 */
+export type ScreenSize = 'small' | 'medium' | 'large';
+/** 스크린 옵저버 설정 */
+export interface ScreenObserverConfig {
+    /** 관찰할 엘리먼트 */
+    element: Element;
+    /** 브레이크포인트 설정 [small, medium] */
+    breakpoints: [number, number];
+}
+/**
+ * 화면 크기 변경을 감지하고 관리하는 옵저버 클래스
+ * root 엘리먼트의 크기를 기준으로 반응형 화면 크기를 추적합니다.
+ */
+export declare class ScreenObserver {
+    /** ResizeObserver 인스턴스 */
+    private _observer;
+    /** 브레이크포인트 설정 [small, medium] */
+    private _breakpoints;
+    /** 현재 화면 크기 */
+    private _size;
+    /**
+     * ScreenObserver 생성자
+     * @param config - 스크린 옵저버 설정
+     */
+    constructor(config: ScreenObserverConfig);
+    destroy(): void;
+    /** 현재 화면 크기 반환 */
+    get(): ScreenSize;
+    /**
+     * 너비를 기준으로 화면 크기를 반환
+     * @param width - 엘리먼트의 너비
+     * @return 화면 크기
+     */
+    private calculate;
+}
+export type ScreenResizeEvent = CustomEvent<{
+    size: ScreenSize;
+}>;
+declare global {
+    interface WindowEventMap {
+        'screen-resize': ScreenResizeEvent;
+    }
+}

package/dist/internals/ScreenObserver.js

@@ -0,0 +1,37 @@
+class c {
+  /**
+   * ScreenObserver 생성자
+   * @param config - 스크린 옵저버 설정
+   */
+  constructor(e) {
+    this._breakpoints = e.breakpoints, this._observer = new ResizeObserver((s) => {
+      const r = s[0], i = this.calculate(r.contentRect.width);
+      this._size !== i && (this._size = i, window.dispatchEvent(new CustomEvent("screen-resize", {
+        detail: { size: this._size }
+      })));
+    }), this._observer.observe(e.element);
+    const t = e.element.getBoundingClientRect();
+    this._size = this.calculate(t.width), window.dispatchEvent(new CustomEvent("screen-resize", {
+      detail: { size: this._size }
+    }));
+  }
+  destroy() {
+    this._observer && this._observer.disconnect();
+  }
+  /** 현재 화면 크기 반환 */
+  get() {
+    return this._size;
+  }
+  /**
+   * 너비를 기준으로 화면 크기를 반환
+   * @param width - 엘리먼트의 너비
+   * @return 화면 크기
+   */
+  calculate(e) {
+    const [t, s] = this._breakpoints;
+    return e < t ? "small" : e < s ? "medium" : "large";
+  }
+}
+export {
+  c as ScreenObserver
+};

package/dist/internals/{ExtendedBaseElement.d.ts → StyledElement.d.ts}

@@ -1,11 +1,13 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { StyleMap } from '../types/AppTypes';
+/** 스타일 값 타입 */
+export type StyleValue = Record<string, string> | Partial<CSSStyleDeclaration>;
+/** 스타일 맵 타입 */
+export type StyleMap<T extends string> = Partial<Record<T, StyleValue>>;
 /**
- * ExtendedBaseElement - BaseElement를 확장한 클래스
- * - 부분별 스타일링 지원
+ * StyledBaseElement - BaseElement의 확장으로 부분별 스타일링 기능 추가
  */
-export declare class ExtendedBaseElement<T extends string> extends BaseElement {
+export declare class StyledElement<T extends string> extends BaseElement {
     static styles: import('lit').CSSResultGroup;
     static dependencies: Record<string, typeof BaseElement>;
     /** 부분별 스타일 구성 */

package/dist/internals/{ExtendedBaseElement.js → StyledElement.js}

@@ -1,11 +1,11 @@
-import { property as c } from "lit/decorators.js";
-import { BaseElement as l } from "@iyulab/components/dist/components/BaseElement.js";
-var p = Object.defineProperty, f = (o, e, i, r) => {
-  for (var t = void 0, s = o.length - 1, n; s >= 0; s--)
-    (n = o[s]) && (t = n(e, i, t) || t);
+import { property as l } from "lit/decorators.js";
+import { BaseElement as c } from "@iyulab/components/dist/components/BaseElement.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);
   return t && p(e, i, t), t;
 };
-class y extends l {
+class f extends c {
   static {
     this.styles = super.styles;
   }
@@ -13,13 +13,12 @@ class y extends l {
     this.dependencies = {};
   }
   updated(e) {
-    super.updated?.(e), e.has("styles") && this.applyToParts(this.styles);
+    super.updated(e), e.has("styles") && this.styles && this.applyToParts(this.styles);
   }
   /**
    * 현재 스타일 구성을 각 파트에 적용, host 포함
    */
   applyToParts(e) {
-    if (!e) return;
     const i = Object.entries(e);
     for (const [r, t] of i)
       if (t)
@@ -45,15 +44,15 @@ class y extends l {
       try {
         e.style[r] = s;
       } catch {
-        const n = r.replace(/[A-Z]/g, (a) => "-" + a.toLowerCase());
-        e.style.setProperty(n, s);
+        const o = r.replace(/[A-Z]/g, (a) => "-" + a.toLowerCase());
+        e.style.setProperty(o, s);
       }
     }
   }
 }
-f([
-  c({ type: Object, attribute: !1 })
-], y.prototype, "styles");
+y([
+  l({ type: Object, attribute: !1 })
+], f.prototype, "styles");
 export {
-  y as ExtendedBaseElement
+  f as StyledElement
 };

package/dist/layouts/SidebarLayout.d.ts

@@ -1,20 +1,21 @@
 import { nothing, PropertyValues } from 'lit';
+import { RouteContext } from '@iyulab/router';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { UIconButton } from '@iyulab/components/dist/components/icon-button/UIconButton.component.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';
-import { ExtendedBaseElement } from '../internals/ExtendedBaseElement';
-import { SidebarLogo } from '../components/SidebarLogo';
+import { StyledElement } from '../internals/StyledElement.js';
 import { SidebarSection } from '../components/SidebarSection';
 import { SidebarGroup } from '../components/SidebarGroup';
 import { SidebarLink } from '../components/SidebarLink';
 import { SidebarButton } from '../components/SidebarButton';
 import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
-/** 엘리먼트 타입 매핑 (for deveveloper experience) */
+/** 엘리먼트 타입 매핑 (for devevelop experience) */
 declare global {
     interface HTMLElementTagNameMap {
-        'u-icon-button': UIconButton;
+        'u-icon': UIcon;
+        'u-button': UButton;
         'u-progress-bar': UProgressBar;
-        'u-sidebar-logo': SidebarLogo;
         'u-sidebar-section': SidebarSection;
         'u-sidebar-group': SidebarGroup;
         'u-sidebar-link': SidebarLink;
@@ -22,22 +23,26 @@ declare global {
     }
 }
 /**
- * SidebarLayout - 반응형 사이드바 레이아웃
- * - large: docked / slim
+ * 반응형 사이드바 레이아웃 컴포넌트
+ *
+ * 화면 크기에 따른 사이드바 모드 전환:
+ * - large: default / slim
  * - medium: slim / modal
- * - small: closed / modal
+ * - small: mobile / mobile-open
  *
- * - docked: 사이드바가 펼침 상태로 표시됨
+ * 사이드바 모드:
+ * - default: 사이드바가 펼침 상태로 표시됨
  * - slim: 아이콘만 표시되는 슬림 모드
  * - modal: 오버레이로 사이드바가 펼침 상태로 표시되는 모달 모드, 백드롭 클릭 시 닫힘
- * - closed: 사이드바가 왼쪽에 완전히 숨겨진 상태
+ * - mobile: 모바일에서 헤더만 표시되는 상태, 사이드바는 숨겨짐
+ * - mobile-open: 모바일에서 사이드바가 펼침 상태로 표시되는 모드
  */
-export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
+export declare class SidebarLayout extends StyledElement<SidebarParts> {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 반응형 상태 관리를 위한 MobX 반응 해제 함수들 */
-    private disposers;
     progressBarEl: UProgressBar;
+    /** 현재 라우터 컨텍스트 */
+    context: RouteContext | null;
     /** 사이드바 상태 */
     state: SidebarState;
     /** 사이드바 레이아웃 설정 */
@@ -48,19 +53,22 @@ export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
     render(): import('lit-html').TemplateResult<1> | typeof nothing;
     /** 사이드바 아이템 렌더링 */
     private renderItem;
-    /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
-    private updateState;
+    /** 현재 경로와 패턴 매칭 여부 확인 */
+    private isMatchedLink;
+    /** 브랜드 로고 클릭 핸들러 */
+    private handleBrandLogoClick;
     /** 사이드바 토글 핸들러 */
-    private toggleState;
+    private handleToggleButtonClick;
     /**
      * 모달 상태에서 사이드바 닫기
-     * 백드롭 클릭 or 라우트 변경 시
      */
-    private toggleStateIfModalState;
+    private handleBackdropClick;
     /** 라우트 변경 시작 핸들러 */
     private handleRouteBegin;
     /** 라우트 변경 진행 핸들러 */
     private handleRouteProgress;
     /** 라우트 변경 완료 핸들러 */
     private handleRouteDone;
+    /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
+    private handleScreenResize;
 }