@iyulab/components 0.1.4 → 0.1.6

package/dist/utilities/icons.js

@@ -0,0 +1,114 @@
+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 defaultIconBaseUrl = "/assets/icons/";
+const defaultIconCache = /* @__PURE__ */ new Map();
+const internalIconBundle = 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 !== "")
+);
+class IconRegistry {
+  constructor() {
+    this.libs = /* @__PURE__ */ new Map();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new IconRegistry();
+    }
+    return this._instance;
+  }
+  /**
+   * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
+   */
+  has(lib) {
+    return this.libs.has(lib);
+  }
+  /**
+   * 지정된 아이콘 라이브러리를 등록합니다.
+   * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+   */
+  register(lib, resolver) {
+    if (this.libs.has(lib)) {
+      console.warn(`Icon library "${lib}" is already registered`);
+    } else {
+      this.libs.set(lib, resolver);
+    }
+  }
+  /**
+   * 지정된 아이콘 라이브러리를 등록 해제합니다.
+   */
+  unregister(lib) {
+    this.libs.delete(lib);
+  }
+  /**
+   * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
+   */
+  async resolve(lib, name) {
+    const resolver = this.libs.get(lib);
+    if (!resolver) return void 0;
+    const svg = await resolver(name);
+    return svg?.trim();
+  }
+}
+IconRegistry.instance.register("internal", (name) => {
+  return internalIconBundle.get(name);
+});
+IconRegistry.instance.register("default", async (name) => {
+  if (defaultIconCache.has(name)) {
+    return defaultIconCache.get(name);
+  }
+  const baseUrl = getDefaultBaseUrl();
+  const remoteUrl = baseUrl.endsWith("/") ? `${baseUrl}${name}.svg` : `${baseUrl}/${name}.svg`;
+  try {
+    const response = await fetch(remoteUrl);
+    if (!response.ok) return void 0;
+    const svg = await response.text();
+    defaultIconCache.set(name, svg);
+    return svg;
+  } catch (error) {
+    console.error(error);
+    return void 0;
+  }
+});
+const icons = IconRegistry.instance;
+function getDefaultBaseUrl() {
+  return defaultIconBaseUrl;
+}
+function setDefaultBaseUrl(url) {
+  defaultIconBaseUrl = url;
+}
+
+export { getDefaultBaseUrl, icons, setDefaultBaseUrl };

package/dist/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './BrowserStorage.js';
 export * from './decorators';
+export * from './icons.js';
 export * from './notifier.js';
 export * from './theme.js';

package/dist/utilities/notifier.d.ts

@@ -1,11 +1,11 @@
-import { Alert, AlertType } from '../components/alert/Alert.js';
+import { AlertType } from '../components/alert/Alert.js';
 export type ScreenPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
 /** 토스트 알림 옵션 */
 export interface ToastOptions {
     /** 알림 유형 */
     type: AlertType;
     /** 알림 제목 */
-    label?: string;
+    heading?: string;
     /** 알림 내용 */
     content?: string;
     /** 알림 표시 시간 (밀리초 단위) */
@@ -14,13 +14,23 @@ export interface ToastOptions {
     position?: ScreenPosition;
 }
 /**
- * notifier 객체 여러 위치에 알림을 표시하는 유틸리티입니다.
+ * Notifier 클래스 — 싱글톤 패턴으로 사용합니다.
  */
-export declare const notifier: {
-    container: Map<ScreenPosition, HTMLDivElement>;
-    toasts: Set<Alert>;
+declare class Notifier {
+    private static _instance;
+    private containers;
+    private toasts;
+    private constructor();
+    static get instance(): Notifier;
     /**
      * 토스트 알림을 생성합니다.
      */
     toast(options: ToastOptions): Promise<void>;
-};
+    /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+    private getOrCreateContainer;
+}
+/**
+ * 알림 유틸리티 싱글톤 인스턴스입니다.
+ */
+export declare const notifier: Notifier;
+export {};

package/dist/utilities/notifier.js

@@ -1,20 +1,28 @@
 import { Alert } from '../components/alert/Alert.js';
 
 Alert.define("u-alert");
-const notifier = {
-  container: /* @__PURE__ */ new Map(),
-  toasts: /* @__PURE__ */ new Set(),
+class Notifier {
+  constructor() {
+    this.containers = /* @__PURE__ */ new Map();
+    this.toasts = /* @__PURE__ */ new Set();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new Notifier();
+    }
+    return this._instance;
+  }
   /**
    * 토스트 알림을 생성합니다.
    */
   async toast(options) {
     const el = new Alert();
     el.type = options.type;
-    el.label = options.label;
+    el.heading = options.heading;
     el.content = options.content;
     this.toasts.add(el);
     const position = options.position || "top-right";
-    const container = getOrCreateContainer(position);
+    const container = this.getOrCreateContainer(position);
     container.appendChild(el);
     await el.updateComplete;
     el.show();
@@ -26,46 +34,48 @@ const notifier = {
       this.toasts.delete(el);
       if (!container.hasChildNodes()) {
         container.remove();
-        this.container.delete(position);
+        this.containers.delete(position);
       }
     }, duration);
   }
-};
-function getOrCreateContainer(position) {
-  let container = notifier.container.get(position);
-  if (container) return container;
-  container = document.createElement("div");
-  container.style.position = "fixed";
-  container.style.zIndex = "9999";
-  container.style.display = "flex";
-  container.style.gap = "10px";
-  const transformParts = [];
-  if (position.startsWith("top")) {
-    container.style.top = "20px";
-    container.style.flexDirection = "column";
-  } else if (position.startsWith("bottom")) {
-    container.style.bottom = "20px";
-    container.style.flexDirection = "column-reverse";
-  } else {
-    container.style.top = "50%";
-    container.style.flexDirection = "column";
-    transformParts.push("translateY(-50%)");
-  }
-  if (position.endsWith("left")) {
-    container.style.left = "20px";
-    container.style.alignItems = "flex-start";
-  } else if (position.endsWith("right")) {
-    container.style.right = "20px";
-    container.style.alignItems = "flex-end";
-  } else {
-    container.style.left = "50%";
-    container.style.alignItems = "center";
-    transformParts.unshift("translateX(-50%)");
+  /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+  getOrCreateContainer(position) {
+    let container = this.containers.get(position);
+    if (container) return container;
+    container = document.createElement("div");
+    container.style.position = "fixed";
+    container.style.zIndex = "9999";
+    container.style.display = "flex";
+    container.style.gap = "10px";
+    const transformParts = [];
+    if (position.startsWith("top")) {
+      container.style.top = "20px";
+      container.style.flexDirection = "column";
+    } else if (position.startsWith("bottom")) {
+      container.style.bottom = "20px";
+      container.style.flexDirection = "column-reverse";
+    } else {
+      container.style.top = "50%";
+      container.style.flexDirection = "column";
+      transformParts.push("translateY(-50%)");
+    }
+    if (position.endsWith("left")) {
+      container.style.left = "20px";
+      container.style.alignItems = "flex-start";
+    } else if (position.endsWith("right")) {
+      container.style.right = "20px";
+      container.style.alignItems = "flex-end";
+    } else {
+      container.style.left = "50%";
+      container.style.alignItems = "center";
+      transformParts.unshift("translateX(-50%)");
+    }
+    container.style.transform = transformParts.length ? transformParts.join(" ") : "";
+    document.body.appendChild(container);
+    this.containers.set(position, container);
+    return container;
   }
-  container.style.transform = transformParts.length ? transformParts.join(" ") : "";
-  document.body.appendChild(container);
-  notifier.container.set(position, container);
-  return container;
 }
+const notifier = Notifier.instance;
 
 export { notifier };

package/dist/utilities/theme.d.ts

@@ -8,11 +8,6 @@ export interface ThemeInitOptions {
      * @default false
      */
     debug?: boolean;
-    /**
-     * 내부적으로 제공되는 스타일 시트를 사용할지 여부
-     * @default true
-     */
-    useBuiltIn?: boolean;
     /**
      * 테마 설정을 브라우저 스토리지에 영구 저장할지 여부 또는 옵션
      * @default false
@@ -23,24 +18,27 @@ export interface ThemeInitOptions {
      * @default 'system'
      */
     default?: ThemeType;
+    /**
+     * 내부적으로 제공되는 스타일 시트를 사용할지 여부
+     * @default true
+     */
+    useBuiltIn?: boolean;
 }
 /**
- * Theme 클래스 — 싱글톤 패턴으로 사용합니다.
+ * 현재 문서에 테마를 적용하고 관리하는 유틸리티 클래스입니다.
  */
-export declare class Theme {
+declare class Theme {
     private static _instance;
-    private readonly STORAGE_KEY_DEFAULT;
+    private readonly STORAGE_THEME_KEY;
     private storage;
     private _isInitialized;
     private _isDebugMode;
-    /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
     private constructor();
-    /** 싱글톤 인스턴스 접근자 */
     static get instance(): Theme;
-    /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
     get isInitialized(): boolean;
+    get isDebugMode(): boolean;
     /**
-     * 테마 유틸리티 초기화
+     * 테마 유틸리티를 초기화합니다.
      */
     init(options?: ThemeInitOptions): Promise<void>;
     /**
@@ -48,19 +46,16 @@ export declare class Theme {
      */
     get(): ThemeType | undefined;
     /**
-     * 현재 문서 테마를 설정합니다.
+     * 현재 문서에 적용할 테마를 설정합니다.
      */
     set(theme: ThemeType): void;
-    /**
-     * 시스템 테마 변경을 처리하는 메서드
-     */
+    /** 시스템 테마 변경을 처리하는 메서드 */
     private handleSystemThemeChanged;
-    /**
-     * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
-     */
+    /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
     private log;
 }
 /**
- * 테마 유틸리티 싱글톤 인스턴스입니다.
+ * 테마 유틸리티의 싱글톤 인스턴스입니다.
  */
 export declare const theme: Theme;
+export {};

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,58 +1,59 @@
-{
-  "name": "@iyulab/components",
-  "description": "web-components library by iyulab based on lit-element",
-  "version": "0.1.4",
-  "keywords": [
-    "iyulab",
-    "web-components",
-    "lit-element"
-  ],
-  "license": "MIT",
-  "author": "iyulab",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/iyulab/node-components.git"
-  },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md",
-    "CHANGELOG.md",
-    "package.json"
-  ],
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./dist/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*"
-    }
-  },
-  "scripts": {
-    "start": "vite --force",
-    "build": "eslint && vite build"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "lit": "^3.3.1",
-    "react": "^19.2.1",
-    "reflect-metadata": "^0.2.2"
-  },
-  "devDependencies": {
-    "@lit/react": "^1.0.8",
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "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",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.4"
-  }
-}
+{
+  "name": "@iyulab/components",
+  "description": "web-components library based on lit-element made by iyulab",
+  "version": "0.1.6",
+  "keywords": [
+    "iyulab",
+    "components",
+    "web-components",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-components.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "package.json"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./dist/*": {
+      "types": "./src/*.d.ts",
+      "import": "./src/*"
+    }
+  },
+  "scripts": {
+    "start": "vite --force",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "lit": "^3.3.1",
+    "react": "^19.2.3",
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@lit/react": "^1.0.8",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^25.0.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-lit": "^2.1.1",
+    "globals": "^16.5.0",
+    "typescript": "^5.9.3",
+    "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.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>;