@iyulab/modern-app 0.2.0

package/dist/components/SidebarGroup.styles.js

@@ -0,0 +1,93 @@
+import { css as o } from "lit";
+const e = 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;
+  }
+
+  button {
+    all: unset;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 8px 12px;
+    color: var(--u-text-color);
+    font-family: inherit;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: var(--u-bg-color-hover);
+    color: var(--u-text-color-hover);
+  }
+
+  .icon {
+    font-size: 20px;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  .label {
+    flex: 1;
+    color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .toggler {
+    font-size: 16px !important;
+    transition: transform 0.2s ease;
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    margin-left: 32px;
+    margin-top: 4px;
+    gap: 4px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    border-left: 2px solid var(--u-border-color-weak);
+    padding-left: 8px;
+  }
+`;
+export {
+  e as styles
+};

package/dist/components/SidebarLink.d.ts

@@ -0,0 +1,42 @@
+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';
+type ElementParts = 'host' | 'base' | 'icon' | 'label';
+/** 링크 항목 디폴트 타입 */
+export interface SidebarLinkConfig {
+    type?: 'link';
+    icon?: string;
+    label: string | DirectiveResult;
+    href: string;
+    pattern?: string | URLPattern;
+    styles?: StyleMap<ElementParts>;
+}
+/**
+ * SidebarLink 컴포넌트는 계층형 네비게이션 아이템을 표시합니다.
+ * 아이콘, 레이블, 하위 아이템을 지원합니다.
+ */
+export declare class SidebarLink extends ExtendedBaseElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** selected 상태 */
+    selected: boolean;
+    /** 콤팩트 모드 여부 */
+    compact: boolean;
+    /** 네비게이션 아이템 데이터 */
+    icon?: string;
+    /** 네비게이션 아이템 데이터 */
+    label?: string | DirectiveResult;
+    /** 네비게이션 링크 */
+    href?: string;
+    /** 네비게이션 패턴 매칭 */
+    pattern?: string | URLPattern;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 라우트 변경 이벤트 핸들러 */
+    private handleRouteBegin;
+    /** 라우트 변경 이벤트 핸들러 */
+    private handleRouteDone;
+}
+export {};

package/dist/components/SidebarLink.js

@@ -0,0 +1,71 @@
+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;
+};
+class o extends d {
+  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;
+    };
+  }
+  static {
+    this.styles = [super.styles, h];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": c
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), super.disconnectedCallback();
+  }
+  render() {
+    return l`
+      <u-link part="base"
+        .href=${this.href || "#"}
+        ?compact=${this.compact}>
+        <u-icon part="icon"
+          ?hidden=${!this.icon}
+          ?remote=${!0}
+          .name=${this.icon}
+        ></u-icon>
+        <span part="label"
+          ?hidden=${this.compact}>
+          ${this.label}
+        </span>
+      </u-link>
+    `;
+  }
+}
+n([
+  t({ type: Boolean, reflect: !0 })
+], o.prototype, "selected");
+n([
+  t({ type: Boolean })
+], o.prototype, "compact");
+n([
+  t({ type: String })
+], o.prototype, "icon");
+n([
+  t({ type: String })
+], o.prototype, "label");
+n([
+  t({ type: String })
+], o.prototype, "href");
+n([
+  t({ type: String })
+], o.prototype, "pattern");
+export {
+  o as SidebarLink
+};

package/dist/components/SidebarLink.styles.d.ts

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

package/dist/components/SidebarLink.styles.js

@@ -0,0 +1,58 @@
+import { css as o } from "lit";
+const r = o`
+  :host {
+    display: block;
+    border-radius: 8px;
+    color: var(--u-text-color);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+  :host(:hover) {
+    color: var(--u-text-color-hover);
+    background-color: var(--u-bg-color-hover);
+  }
+  :host([selected]) {
+    color: var(--u-text-color-inverse);
+    background-color: var(--u-blue-600);
+    box-shadow: 0 1px 3px var(--u-shadow-weak);
+  }
+  :host([selected]:hover) {
+    color: var(--u-text-color-inverse);
+    background-color: var(--u-blue-700);
+    box-shadow: 0 2px 6px var(--u-shadow-normal);
+  }
+  
+  u-link {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+  }
+  u-link[compact] {
+    justify-content: center;
+    padding: 8px;
+  }
+
+  u-icon {
+    color: inherit;
+    font-size: 20px;
+    flex-shrink: 0;
+  }
+
+  span {
+    flex: 1;
+    color: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+export {
+  r as styles
+};

package/dist/components/SidebarLogo.d.ts

@@ -0,0 +1,33 @@
+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';
+type ElementParts = 'host' | 'container' | 'image' | 'icon' | 'label';
+/** 로고  설정 */
+export interface SidebarLogoConfig {
+    type: 'image' | 'icon';
+    image?: string;
+    icon?: string;
+    label?: string | DirectiveResult;
+    styles?: StyleMap<ElementParts>;
+    onClick?: (e: MouseEvent) => void;
+}
+/**
+ * SidebarLogo 컴포넌트는 사이드바에 표시되는 로고를 나타냅니다.
+ */
+export declare class SidebarLogo extends ExtendedBaseElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 콤팩트 모드 여부 */
+    compact: boolean;
+    /** 로고 타입 */
+    type: 'image' | 'icon';
+    /** 로고 이미지 URL */
+    image?: string;
+    /** 로고 아이콘 svg 이름 */
+    icon?: string;
+    /** 로고 아이콘 텍스트 */
+    label?: string | DirectiveResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

package/dist/components/SidebarLogo.js

@@ -0,0 +1,60 @@
+import { nothing as m, html as n } 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) => {
+  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;
+};
+class o extends y {
+  constructor() {
+    super(...arguments), this.compact = !1, this.type = "icon";
+  }
+  static {
+    this.styles = [super.styles, h];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": l
+    };
+  }
+  render() {
+    return n`
+      <div class="container" part="container">
+        ${this.type === "image" && this.image ? n`
+          <img part="image"
+            src=${this.image}
+            alt="App Logo"
+          />` : this.type === "icon" && this.icon ? n`
+          <u-icon part="icon" 
+            .remote=${!0}
+            .name=${this.icon}
+          ></u-icon>` : m}
+        <span part="label"
+          ?hidden=${this.compact || !this.label}>
+          ${this.label}
+        </span>
+      </div>
+    `;
+  }
+}
+i([
+  e({ type: Boolean })
+], o.prototype, "compact");
+i([
+  e({ type: String })
+], o.prototype, "type");
+i([
+  e({ type: String })
+], o.prototype, "image");
+i([
+  e({ type: String })
+], o.prototype, "icon");
+i([
+  e({ type: String })
+], o.prototype, "label");
+export {
+  o as SidebarLogo
+};

package/dist/components/SidebarLogo.styles.d.ts

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

package/dist/components/SidebarLogo.styles.js

@@ -0,0 +1,53 @@
+import { css as e } from "lit";
+const t = e`
+  :host {
+    display: block;
+    min-width: 0;
+    font-size: 32px;
+    color: var(--u-text-color);
+    user-select: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  :host(:hover) {
+    color: var(--u-text-color-hover);
+  }
+  :host(:active) {
+    color: var(--u-text-color-active);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+    gap: 8px;
+  }
+
+  img {
+    width: 100%;
+    height: 1em;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  u-icon {
+    font-size: 1em;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  span {
+    font-size: 0.75em;
+    font-weight: 600;
+    line-height: inherit;
+    color: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+export {
+  t as styles
+};

package/dist/components/SidebarSection.d.ts

@@ -0,0 +1,30 @@
+import { DirectiveResult } from 'lit/directive.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { ExtendedBaseElement } from '../internals/ExtendedBaseElement.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';
+/** 섹션: 섹션 내에는 그룹 또는 링크들만 허용 */
+export interface SidebarSectionConfig {
+    type: 'section';
+    title: string | DirectiveResult;
+    subTitle?: string | DirectiveResult;
+    items: (SidebarGroupConfig | SidebarLinkConfig)[];
+    styles?: StyleMap<ElementParts>;
+}
+/**
+ * SidebarSection 컴포넌트는 사이드바의 섹션 헤더를 표시합니다.
+ */
+export declare class SidebarSection extends ExtendedBaseElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 콤팩트 모드 여부 */
+    compact: boolean;
+    /** 네비게이션 아이템 데이터 */
+    mainTitle?: string | DirectiveResult;
+    /** 네비게이션 아이템 데이터 */
+    subTitle?: string | DirectiveResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

package/dist/components/SidebarSection.js

@@ -0,0 +1,52 @@
+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;
+};
+class p extends d {
+  constructor() {
+    super(...arguments), this.compact = !1;
+  }
+  static {
+    this.styles = [super.styles, c];
+  }
+  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>
+    `;
+  }
+}
+r([
+  i({ type: Boolean })
+], p.prototype, "compact");
+r([
+  i({ type: String })
+], p.prototype, "mainTitle");
+r([
+  i({ type: String })
+], p.prototype, "subTitle");
+export {
+  p as SidebarSection
+};

package/dist/components/SidebarSection.styles.d.ts

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

package/dist/components/SidebarSection.styles.js

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

package/dist/components/UnsafeContent.d.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,26 @@
+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

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

package/dist/components/UnsafeContent.styles.js

@@ -0,0 +1,9 @@
+import { css as s } from "lit";
+const o = s`
+  :host {
+    display: contents;
+  }
+`;
+export {
+  o as styles
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './types/AppConfigs.js';
+export type * from './types/AppOptions.js';
+export type * from './types/AppTypes.js';
+export { app } from './app';

package/dist/index.js

@@ -0,0 +1,4 @@
+import { app as r } from "./app.js";
+export {
+  r as app
+};

package/dist/internals/ExtendedBaseElement.d.ts

@@ -0,0 +1,22 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { StyleMap } from '../types/AppTypes';
+/**
+ * ExtendedBaseElement - BaseElement를 확장한 클래스
+ * - 부분별 스타일링 지원
+ */
+export declare class ExtendedBaseElement<T extends string> extends BaseElement {
+    static styles: import('lit').CSSResultGroup;
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 부분별 스타일 구성 */
+    styles?: StyleMap<T>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * 현재 스타일 구성을 각 파트에 적용, host 포함
+     */
+    private applyToParts;
+    /**
+     * 스타일 객체를 개별 프로퍼티 단위로 적용 (camelCase / kebab-case / custom props 처리)
+     */
+    private assignToObject;
+}