@iyulab/modern-app 0.2.0

package/dist/internals/ExtendedBaseElement.js

@@ -0,0 +1,59 @@
+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);
+  return t && p(e, i, t), t;
+};
+class y extends l {
+  static {
+    this.styles = super.styles;
+  }
+  static {
+    this.dependencies = {};
+  }
+  updated(e) {
+    super.updated?.(e), e.has("styles") && this.applyToParts(this.styles);
+  }
+  /**
+   * 현재 스타일 구성을 각 파트에 적용, host 포함
+   */
+  applyToParts(e) {
+    if (!e) return;
+    const i = Object.entries(e);
+    for (const [r, t] of i)
+      if (t)
+        if (r === "host")
+          this.assignToObject(this, t);
+        else {
+          const s = this.renderRoot?.querySelector(`[part="${String(r)}"]`);
+          if (!s) continue;
+          this.assignToObject(s, t);
+        }
+  }
+  /** 
+   * 스타일 객체를 개별 프로퍼티 단위로 적용 (camelCase / kebab-case / custom props 처리) 
+   */
+  assignToObject(e, i) {
+    for (const [r, t] of Object.entries(i)) {
+      if (t == null) continue;
+      const s = String(t);
+      if (r.startsWith("--") || r.includes("-")) {
+        e.style.setProperty(r, s);
+        continue;
+      }
+      try {
+        e.style[r] = s;
+      } catch {
+        const n = r.replace(/[A-Z]/g, (a) => "-" + a.toLowerCase());
+        e.style.setProperty(n, s);
+      }
+    }
+  }
+}
+f([
+  c({ type: Object, attribute: !1 })
+], y.prototype, "styles");
+export {
+  y as ExtendedBaseElement
+};

package/dist/internals/observers.d.ts

@@ -0,0 +1,10 @@
+import { IObservableValue } from 'mobx';
+import { ScreenSize } from '../types/AppTypes';
+/**
+ * 현재 화면 크기 상태
+ */
+export declare const screen: IObservableValue<ScreenSize>;
+/**
+ * 로딩 진행 상태 (0 - 100)
+ */
+export declare const progress: IObservableValue<number>;

package/dist/internals/observers.js

@@ -0,0 +1,6 @@
+import { observable as o } from "mobx";
+const e = o.box("large"), s = o.box(0);
+export {
+  s as progress,
+  e as screen
+};

package/dist/layouts/SidebarLayout.d.ts

@@ -0,0 +1,60 @@
+import { nothing, PropertyValues, TemplateResult } 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';
+import { SidebarLink } from '../components/SidebarLink';
+import { SidebarButton } from '../components/SidebarButton';
+import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
+/** 엘리먼트 타입 매핑 */
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-progress-bar': ProgressBar;
+        'u-unsafe-content': UnsafeContent;
+        'u-sidebar-logo': SidebarLogo;
+        'u-sidebar-section': SidebarSection;
+        'u-sidebar-group': SidebarGroup;
+        'u-sidebar-link': SidebarLink;
+        'u-sidebar-button': SidebarButton;
+    }
+}
+/**
+ * SidebarLayout - 반응형 사이드바 레이아웃
+ * - large: docked / slim
+ * - medium: slim / modal
+ * - small: closed / modal
+ *
+ * - docked: 사이드바가 펼침 상태로 표시됨
+ * - slim: 아이콘만 표시되는 슬림 모드
+ * - modal: 오버레이로 사이드바가 펼침 상태로 표시되는 모달 모드, 백드롭 클릭 시 닫힘
+ * - closed: 사이드바가 왼쪽에 완전히 숨겨진 상태
+ */
+export declare class SidebarLayout extends ExtendedBaseElement<SidebarParts> {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 반응형 상태 관리를 위한 MobX 반응 해제 함수들 */
+    private disposers;
+    progressEl?: ProgressBar;
+    /** 사이드바 상태 */
+    state: SidebarState;
+    /** 사이드바 레이아웃 설정 */
+    config?: SidebarLayoutConfig;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1> | typeof nothing;
+    /** 사이드바 아이템 렌더링 */
+    private renderItem;
+    /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
+    private updateState;
+    /** 사이드바 토글 핸들러 */
+    private toggleState;
+    /**
+     * 모달 상태에서 사이드바 닫기
+     * 백드롭 클릭 or 라우트 변경 시
+     */
+    private handleCloseModal;
+}

package/dist/layouts/SidebarLayout.js

@@ -0,0 +1,183 @@
+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 { repeat as l } from "lit/directives/repeat.js";
+import { autorun as b } 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 { 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 { 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--)
+    (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);
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.disposers = [], this.state = "docked", this.toggleState = () => {
+      const e = p.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.state === "modal" && (e === "medium" ? this.state = "slim" : e === "small" && (this.state = "closed"));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.disposers.push(b(() => {
+      const e = p.get();
+      this.updateState(e);
+    })), this.disposers.push(b(() => {
+      const e = y.get();
+      this.progressEl && (this.progressEl.value = e);
+    })), window.addEventListener("route-begin", this.handleCloseModal);
+  }
+  disconnectedCallback() {
+    this.disposers.forEach((e) => e()), window.removeEventListener("route-begin", this.handleCloseModal), super.disconnectedCallback();
+  }
+  updated(e) {
+    super.updated(e), e.has("config") && (this.styles = this.config?.styles);
+  }
+  render() {
+    return this.config ? i`
+      <!-- Sidebar -->
+      <aside class="sidebar" part="sidebar" state=${this.state}>
+        <!-- Sidebar Header -->
+        <div class="sidebar-header" part="sidebar-header">
+          <u-sidebar-logo
+            .compact="${this.state === "slim"}"
+            .type=${this.config.logo.type}
+            .image="${this.config.logo.image}"
+            .icon="${this.config.logo.icon}"
+            .label="${this.config.logo.label}"
+            .styles="${this.config.logo.styles}"
+            @click="${this.config.logo.onClick}"
+          ></u-sidebar-logo>
+          <u-icon-button class="sidebar-toggler" part="sidebar-toggler"
+            name=${this.state === "closed" ? "chevron-right" : "layout-sidebar"}
+            @click="${this.toggleState}"
+          ></u-icon-button>
+        </div>
+
+        <!-- Sidebar Navigation Menu -->
+        <nav class="sidebar-menu" part="sidebar-menu">
+          ${l(
+      this.config.menu ?? [],
+      (e, t) => t,
+      (e, t) => this.renderItem(e)
+    )}
+        </nav>
+
+        <!-- Sidebar Footer -->
+        <div class="sidebar-footer" part="sidebar-footer">
+          ${l(
+      this.config.footer ?? [],
+      (e, t) => t,
+      (e, t) => this.renderItem(e)
+    )}
+        </div>
+      </aside>
+
+      <!-- Main Content -->
+      <div class="main" part="main">
+        <u-progress-bar part="progress"></u-progress-bar>
+
+        <u-outlet></u-outlet>
+      </div>
+
+      <!-- Backdrop for modal state -->
+      <div class="backdrop"
+        ?hidden="${this.state !== "modal"}"
+        @click="${this.handleCloseModal}"
+      ></div>
+    ` : u;
+  }
+  /** 사이드바 아이템 렌더링 */
+  renderItem(e) {
+    return e ? e.type === "group" ? i`
+        <u-sidebar-group
+          ?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>
+      ` : e.type === "section" ? i`
+        <u-sidebar-section
+          ?compact=${this.state === "slim"}
+          .mainTitle="${e.title}"
+          .subTitle="${e.subTitle}"
+          .items="${e.items}"
+          .styles="${e.styles}">
+          ${l(
+      e.items,
+      (t, s) => s,
+      (t, s) => this.renderItem(t)
+    )}
+        </u-sidebar-section>
+      ` : e.type === "button" ? i`
+        <u-sidebar-button
+          ?compact=${this.state === "slim"}
+          .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>
+      ` : i`
+        <u-sidebar-link
+          ?compact=${this.state === "slim"}
+          .icon="${e.icon}"
+          .label="${e.label}"
+          .href="${e.href}"
+          .pattern="${e.pattern}"
+          .styles="${e.styles}"
+        ></u-sidebar-link>
+      ` : u;
+  }
+  /** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
+  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.dependencies = {
+  "u-icon-button": $,
+  "u-progress-bar": _,
+  "u-unsafe-content": S,
+  "u-sidebar-logo": k,
+  "u-sidebar-section": C,
+  "u-sidebar-group": w,
+  "u-sidebar-link": E,
+  "u-sidebar-button": O
+};
+n([
+  h("u-progress-bar")
+], o.prototype, "progressEl", 2);
+n([
+  f()
+], o.prototype, "state", 2);
+n([
+  m({ type: Object })
+], o.prototype, "config", 2);
+o = n([
+  g("app-sidebar-layout")
+], o);
+export {
+  o as SidebarLayout
+};

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/layouts/SidebarLayout.styles.js

@@ -0,0 +1,126 @@
+import { css as o } from "lit";
+const r = o`
+  :host {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  /* Sidebar Container */
+  .sidebar {
+    position: relative;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 8px;
+    width: 260px;
+    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);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* Sidebar states */
+  .sidebar[state="slim"] {
+    width: 64px;
+  }
+  .sidebar[state="slim"] .sidebar-header {
+    flex-direction: column;
+  }
+  .sidebar[state="closed"] {
+    position: fixed;
+    top: 0;
+    left: -260px;
+    bottom: 0;
+    width: 260px;
+  }
+  .sidebar[state="closed"] .sidebar-toggler {
+    position: absolute;
+    z-index: 1000;
+    top: 16px;
+    left: calc(100% - 16px);
+    background-color: var(--u-panel-bg-color);
+    border: 1px solid var(--u-border-color-strong);
+    border-radius: 4px 8px 8px 4px;
+  }
+  .sidebar[state="closed"] .sidebar-toggler:hover {
+    transform: translateX(24px);
+  }
+  .sidebar[state="modal"] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 260px;
+  }
+
+  /* Sidebar Toggler Button */
+  .sidebar-toggler {
+    font-size: 20px;
+    border: none;
+    background: transparent;
+    cursor: col-resize;
+  }
+
+  /* Sidebar Header */
+  .sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 16px 12px;
+    border-bottom: 1px solid var(--u-border-color-weak);
+  }
+
+  /* Sidebar Menu */
+  .sidebar-menu {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+  }
+
+  /* Sidebar Footer */
+  .sidebar-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+    border-top: 1px solid var(--u-border-color-weak);
+  }
+
+  /* Backdrop for modal mode */
+  .backdrop {
+    content: '';
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--u-overlay-bg-color);
+  }
+
+  /* Main Content */
+  .main {
+    position: relative;
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    background: var(--u-bg-color);
+  }
+`;
+export {
+  r as styles
+};

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

@@ -0,0 +1,25 @@
+import { StyleMap } from '../types/AppTypes';
+import { SidebarLogoConfig } from '../components/SidebarLogo';
+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';
+/** union: section | group | link | button */
+export type SidebarItem = (SidebarLinkConfig | SidebarSectionConfig | SidebarGroupConfig | SidebarButtonConfig | UnsafeContentConfig);
+/** 사이드바 전체 설정 (루트) */
+export interface SidebarLayoutConfig {
+    type: 'sidebar';
+    /** 최상단 앱 로고 */
+    logo: SidebarLogoConfig;
+    /** 상단/메인 메뉴 항목들 */
+    menu?: SidebarItem[];
+    /** 하단(footer)에 고정해서 렌더할 항목들 */
+    footer?: SidebarItem[];
+    /** 사이드바 스타일 맵 */
+    styles?: StyleMap<SidebarParts>;
+}

package/dist/types/AppConfigs.d.ts

@@ -0,0 +1,54 @@
+import { InitOptions, Module, Newable, NewableModule } from 'i18next';
+import { RouteConfig } from '@iyulab/router';
+import { ThemeInitOptions } from '@iyulab/components/dist/utilities/theme.js';
+import { SidebarLayoutConfig } from '../layouts/SidebarLayout.types';
+/**
+ * i18next의 초기화 옵션과 플러그인 배열을 포함한 다국어 설정
+ */
+export type LocaleInitOptions = InitOptions & {
+    /**
+     * i18next 플러그인 배열
+     * @description i18next.use() 메서드에 전달될 플러그인들의 배열입니다.
+     */
+    plugins?: (Module | NewableModule<Module> | Newable<Module>)[];
+};
+/**
+ * 어플리케이션 레이아웃 설정
+ */
+export type LayoutConfig = (SidebarLayoutConfig) & {
+    /**
+     * 반응형 레이아웃 디자인을 위한 화면 크기의 브레이크포인트 설정
+     * @description 태블릿과 데스크탑의 최소 픽셀 너비를 차례로 지정합니다.
+     * @default [768, 1024]
+     */
+    breakpoints?: [number, number];
+};
+/**
+ * 전체 애플리케이션 설정
+ */
+export interface AppConfig {
+    /**
+     * 현재 애플리케이션의 기본 경로 설정
+     * @default '/'
+     */
+    basepath?: string;
+    /**
+     * 클라이언트 사이드 라우팅을 위한 설정 배열
+     */
+    routes: RouteConfig[];
+    /**
+     * 애플리케이션의 스타일 테마 설정
+     */
+    theme?: ThemeInitOptions;
+    /**
+     * i18next를 사용하는 다국어 설정
+     * @description i18next의 InitOptions와 플러그인 배열을 포함합니다. i18next를 사용하지 않는 경우 이 설정은 생략할 수 있습니다.
+     * @see 설정에 대한 자세한 내용은 {@link https://www.i18next.com/overview/configuration-options} 참조하십시오.
+     */
+    locales?: LocaleInitOptions;
+    /**
+     * 애플리케이션을 구성하기 위한 레이아웃 설정
+     * @description 현재는 사이드바 레이아웃만 지원합니다.
+     */
+    layout: LayoutConfig;
+}

package/dist/types/AppOptions.d.ts

@@ -0,0 +1,12 @@
+import { ScreenPosition } from '@iyulab/components/dist/utilities/notifier.js';
+export interface NotificationOptions {
+    title?: string;
+    duration?: number;
+    position?: ScreenPosition;
+}
+export interface DialogOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+}

package/dist/types/AppTypes.d.ts

@@ -0,0 +1,6 @@
+/** 화면 크기 타입 */
+export type ScreenSize = 'small' | 'medium' | 'large';
+/** 스타일 값 타입 */
+export type StyleValue = Record<string, string> | Partial<CSSStyleDeclaration>;
+/** 스타일 맵 타입 */
+export type StyleMap<T extends string> = Partial<Record<T, StyleValue>>;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@iyulab/modern-app",
+  "description": "web-framework by iyulab based on react, lit-element",
+  "version": "0.2.0",
+  "keywords": [
+    "iyulab",
+    "web-framework",
+    "react",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-modern-app.git"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*",
+      "import": "./dist/*"
+    }
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@iyulab/components": "^0.1.0",
+    "@iyulab/router": "^0.5.0",
+    "lit": "^3.3.1",
+    "mobx": "^6.15.0",
+    "i18next": "^25.6.2"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}