@iyulab/components 0.1.4 → 0.1.5

package/dist/utilities/theme.js

@@ -2,7 +2,7 @@ import * as dark from '../assets/styles/dark.css.js';
 import * as light from '../assets/styles/light.css.js';
 import { BrowserStorage } from './BrowserStorage.js';
 
-const styleAssets = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
+const styleBundle = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
 
 
 })).map(([path, module]) => {
@@ -10,61 +10,67 @@ const styleAssets = Object.entries(/* #__PURE__ */ Object.assign({"../assets/sty
   return [name, module.default];
 }).filter(([name]) => name !== "");
 class Theme {
-  /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
   constructor() {
-    this.STORAGE_KEY_DEFAULT = "theme";
+    this.STORAGE_THEME_KEY = "theme";
     this.storage = null;
     this._isInitialized = false;
     this._isDebugMode = false;
-    /**
-     * 시스템 테마 변경을 처리하는 메서드
-     */
+    /** 시스템 테마 변경을 처리하는 메서드 */
     this.handleSystemThemeChanged = (_) => {
       if (document.documentElement.getAttribute("data-theme") === "system") {
         const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
         document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
+        this.log("system theme changed, applied", isDark ? "dark" : "light");
       }
     };
   }
-  /** 싱글톤 인스턴스 접근자 */
   static get instance() {
     if (!this._instance) {
       this._instance = new Theme();
     }
     return this._instance;
   }
-  /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
   get isInitialized() {
     return this._isInitialized;
   }
+  get isDebugMode() {
+    return this._isDebugMode;
+  }
   /**
-   * 테마 유틸리티 초기화
+   * 테마 유틸리티를 초기화합니다.
    */
   async init(options) {
     this._isDebugMode = options?.debug || false;
     this.log("init called", { options });
     if (options?.store) {
-      this.log("store option provided, initializing BrowserStorage");
       this.storage = new BrowserStorage(options.store);
+      this.log("store option provided, initializing BrowserStorage");
+    } else {
+      this.storage = null;
+      this.log("no store option provided, skipping BrowserStorage initialization");
     }
     const useBuiltIn = options?.useBuiltIn ?? true;
     if (useBuiltIn) {
       this.log("Import enabled: loading styles via internal assets");
-      for (let [name, module] of styleAssets) {
+      for (let [name, module] of styleBundle) {
         const style = document.createElement("style");
-        style.setAttribute("data-path", name);
+        style.setAttribute("data-name", name);
         style.textContent = module;
-        if (document.head.querySelector(`style[data-path="${name}"]`)) {
+        if (document.head.querySelector(`style[data-name="${name}"]`)) {
           this.log("style already present, skipping", name);
           continue;
         }
         document.head.appendChild(style);
         this.log("appended style to head", name);
       }
+    } else {
+      const styleHead = document.head.querySelectorAll("style[data-name]");
+      styleHead.forEach((el) => el.remove());
+      this.log("Import disabled: removed internal styles from head");
     }
     let theme2 = options?.default ?? "system";
     if (this.storage !== null) {
-      const savedTheme = await this.storage.get(this.STORAGE_KEY_DEFAULT);
+      const savedTheme = await this.storage.get(this.STORAGE_THEME_KEY);
       if (savedTheme) {
         theme2 = savedTheme;
         this.log("loaded theme from storage", theme2);
@@ -93,7 +99,7 @@ class Theme {
     }
   }
   /**
-   * 현재 문서 테마를 설정합니다.
+   * 현재 문서에 적용할 테마를 설정합니다.
    */
   set(theme2) {
     try {
@@ -120,17 +126,15 @@ class Theme {
       this.log("Error applying theme:", e);
     }
     if (this.storage !== null) {
-      this.storage.set(this.STORAGE_KEY_DEFAULT, theme2);
+      this.storage.set(this.STORAGE_THEME_KEY, theme2);
       this.log("saved theme to storage", theme2);
     }
   }
-  /**
-   * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
-   */
+  /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
   log(...args) {
     if (this._isDebugMode) console.log("[theme]", ...args);
   }
 }
 const theme = Theme.instance;
 
-export { Theme, theme };
+export { theme };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@iyulab/components",
-  "description": "web-components library by iyulab based on lit-element",
-  "version": "0.1.4",
+  "description": "web-components library based on lit-element made by iyulab",
+  "version": "0.1.5",
   "keywords": [
     "iyulab",
+    "components",
     "web-components",
     "lit-element"
   ],
@@ -45,14 +46,14 @@
   "devDependencies": {
     "@lit/react": "^1.0.8",
     "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.2",
     "eslint": "^9.39.1",
     "eslint-plugin-lit": "^2.1.1",
     "globals": "^16.5.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.6",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4"
   }
-}
+}

package/dist/components/panel/Panel.d.ts

@@ -1,9 +0,0 @@
-import { BaseElement } from '../BaseElement.js';
-/**
- * 각 패널은 독립적인 크기와 콘텐츠를 가질 수 있습니다.
- */
-export declare class Panel extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    render(): import('lit-html').TemplateResult<1>;
-}

package/dist/components/panel/Panel.js

@@ -1,17 +0,0 @@
-import { html } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-import { styles } from './Panel.styles.js';
-
-class Panel extends BaseElement {
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-export { Panel };

package/dist/components/panel/Panel.styles.d.ts

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

package/dist/components/panel/Panel.styles.js

@@ -1,12 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-export { styles };

package/dist/components/panel/index.d.ts

@@ -1,7 +0,0 @@
-import { Panel } from './Panel.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-panel': Panel;
-    }
-}
-export { Panel };

package/dist/integrations/react/UPanel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Panel } from '../../components/panel/index';
-
-export declare const UPanel: React.ForwardRefExoticComponent<
-  Partial<Panel> & React.HTMLAttributes<Panel>
->;
-
-export type UPanelProps = React.ComponentProps<typeof UPanel>;

package/dist/integrations/react/UPanel.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { Panel } from '../../components/panel/index';
-
-export const UPanel = createComponent({
-  react: React,
-  tagName: 'u-panel',
-  elementClass: Panel,
-  events: {}
-});

package/dist/internals/icon-helpers.d.ts

@@ -1,32 +0,0 @@
-/**
- * 아이콘 이름과 SVG 소스를 매핑하는 레지스트리입니다.
- *
- * - 키: SVG 파일명에서 확장자를 제거한 문자열 (예: `close.svg` → `"close"`)
- * - 값: SVG 파일의 raw 문자열 (`?raw` 옵션으로 로드됨)
- *
- * Vite의 `import.meta.glob`을 사용하여
- * `../assets/icons/*.svg` 경로의 모든 SVG 파일을 빌드 시점에 한 번에 로드합니다.
- * 이 레지스트리는 런타임 동안 불변이며, 아이콘 조회 시 재사용됩니다.
- */
-export declare const iconBundle: Map<string, string>;
-/**
- * 현재 설정된 아이콘 기본 URL을 반환합니다.
- *
- * 이 값은 아이콘을 정적 경로 또는 CDN 등에서 동적으로 로드할 때
- * prefix로 사용됩니다.
- *
- * @returns 아이콘 로딩에 사용되는 기본 URL (예: `/assets/icons/`)
- */
-export declare function getBaseUrl(): string;
-/**
- * 아이콘을 외부에서 로드할 때 사용할 기본 URL을 설정합니다.
- *
- * 예:
- * - `/assets/icons/`
- * - `https://cdn.example.com/icons/`
- *
- * 일반적으로 마지막에 슬래시(`/`)가 포함된 형태를 권장합니다.
- *
- * @param url 아이콘이 배포된 기본 경로
- */
-export declare function setBaseUrl(url: string): void;

package/dist/internals/icon-helpers.js

@@ -1,48 +0,0 @@
-import * as arrowClockwise from '../assets/icons/arrow-clockwise.svg.js';
-import * as arrowDown from '../assets/icons/arrow-down.svg.js';
-import * as arrowUp from '../assets/icons/arrow-up.svg.js';
-import * as ban from '../assets/icons/ban.svg.js';
-import * as bellFill from '../assets/icons/bell-fill.svg.js';
-import * as checkCircleFill from '../assets/icons/check-circle-fill.svg.js';
-import * as checkLg from '../assets/icons/check-lg.svg.js';
-import * as chevronDown from '../assets/icons/chevron-down.svg.js';
-import * as chevronLeft from '../assets/icons/chevron-left.svg.js';
-import * as chevronRight from '../assets/icons/chevron-right.svg.js';
-import * as chevronUp from '../assets/icons/chevron-up.svg.js';
-import * as copy from '../assets/icons/copy.svg.js';
-import * as dashLg from '../assets/icons/dash-lg.svg.js';
-import * as exclamationCircleFill from '../assets/icons/exclamation-circle-fill.svg.js';
-import * as exclamationTriangleFill from '../assets/icons/exclamation-triangle-fill.svg.js';
-import * as eyeSlash from '../assets/icons/eye-slash.svg.js';
-import * as eye from '../assets/icons/eye.svg.js';
-import * as infoCircleFill from '../assets/icons/info-circle-fill.svg.js';
-import * as layoutSidebar from '../assets/icons/layout-sidebar.svg.js';
-import * as lightbulbFill from '../assets/icons/lightbulb-fill.svg.js';
-import * as lightbulbOff from '../assets/icons/lightbulb-off.svg.js';
-import * as lightbulb from '../assets/icons/lightbulb.svg.js';
-import * as micFill from '../assets/icons/mic-fill.svg.js';
-import * as micMuteFill from '../assets/icons/mic-mute-fill.svg.js';
-import * as paperclip from '../assets/icons/paperclip.svg.js';
-import * as pencilSquare from '../assets/icons/pencil-square.svg.js';
-import * as plusLg from '../assets/icons/plus-lg.svg.js';
-import * as search from '../assets/icons/search.svg.js';
-import * as speedometer from '../assets/icons/speedometer.svg.js';
-import * as xLg from '../assets/icons/x-lg.svg.js';
-
-let iconBaseUrl = "/assets/icons/";
-const iconBundle = new Map(
-  Object.entries(
-    /* #__PURE__ */ Object.assign({"../assets/icons/arrow-clockwise.svg": arrowClockwise,"../assets/icons/arrow-down.svg": arrowDown,"../assets/icons/arrow-up.svg": arrowUp,"../assets/icons/ban.svg": ban,"../assets/icons/bell-fill.svg": bellFill,"../assets/icons/check-circle-fill.svg": checkCircleFill,"../assets/icons/check-lg.svg": checkLg,"../assets/icons/chevron-down.svg": chevronDown,"../assets/icons/chevron-left.svg": chevronLeft,"../assets/icons/chevron-right.svg": chevronRight,"../assets/icons/chevron-up.svg": chevronUp,"../assets/icons/copy.svg": copy,"../assets/icons/dash-lg.svg": dashLg,"../assets/icons/exclamation-circle-fill.svg": exclamationCircleFill,"../assets/icons/exclamation-triangle-fill.svg": exclamationTriangleFill,"../assets/icons/eye-slash.svg": eyeSlash,"../assets/icons/eye.svg": eye,"../assets/icons/info-circle-fill.svg": infoCircleFill,"../assets/icons/layout-sidebar.svg": layoutSidebar,"../assets/icons/lightbulb-fill.svg": lightbulbFill,"../assets/icons/lightbulb-off.svg": lightbulbOff,"../assets/icons/lightbulb.svg": lightbulb,"../assets/icons/mic-fill.svg": micFill,"../assets/icons/mic-mute-fill.svg": micMuteFill,"../assets/icons/paperclip.svg": paperclip,"../assets/icons/pencil-square.svg": pencilSquare,"../assets/icons/plus-lg.svg": plusLg,"../assets/icons/search.svg": search,"../assets/icons/speedometer.svg": speedometer,"../assets/icons/x-lg.svg": xLg
-
-
-})
-  ).map(([path, module]) => {
-    const name = path.split("/").pop()?.replace(".svg", "") || "";
-    return [name, module.default];
-  }).filter(([name]) => name !== "")
-);
-function getBaseUrl() {
-  return iconBaseUrl;
-}
-
-export { getBaseUrl, iconBundle };