@iyulab/chat-components 0.2.0 → 0.4.0

package/dist/components/blocks/URefBlock.styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  /* 헤더 영역 */
+  .header {
+    all: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+    color: var(--u-txt-color-strong);
+    user-select: none;
+    cursor: pointer;
+  }
+  .header:hover {
+    color: var(--u-txt-color-hover);
+  }
+  .header:focus-visible {
+    outline: 2px solid rgba(100, 150, 250, 0.6);
+    outline-offset: 2px;
+  }
+
+  u-icon {
+    color: inherit;
+    font-size: 1em;
+    transition: transform 0.2s ease-in-out;
+  }
+  u-icon[collapsed] {
+    transform: rotate(-90deg);
+  }
+
+  .title {
+    color: inherit;
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 600;
+    color: var(--u-text-color-weak);
+  }
+
+  .count {
+    color: inherit;
+    font-size: 0.75em;
+    font-weight: 400;
+    line-height: 2em;
+  }
+
+  /* 바디 영역 */
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    margin-top: 0.75em;
+    transition: all 0.3s ease-in-out;
+  }
+  .body[collapsed] {
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  .body u-ref-card {
+    width: 100%;
+  }
+`;
+
+export { styles };

package/dist/components/blocks/UTableBlock.component.d.ts

@@ -0,0 +1,49 @@
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
+/** 테이블 셀 데이터 타입 */
+export interface TableCell {
+    /** 셀에 표시할 텍스트 내용 */
+    text: string;
+    /** 셀 내용의 정렬 방식. 기본값은 "left" */
+    align: "left" | "center" | "right" | null;
+}
+/** 테이블 정렬 상태 */
+export interface SortState {
+    /** 현재 정렬 기준이 되는 컬럼 인덱스. -1이면 정렬 안 된 상태 */
+    index: number;
+    /** 정렬 방향. "asc"는 오름차순, "desc"는 내림차순 */
+    dir: "asc" | "desc";
+}
+/**
+ * 마크다운 테이블 데이터를 렌더링하는 컴포넌트입니다.
+ * 컬럼 정렬, CSV 다운로드 기능을 지원합니다.
+ * light DOM 내 `<script type="application/json">` 에서 데이터를 자동으로 읽어냅니다.
+ */
+export declare class UTableBlock extends UJsonElement {
+    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 테이블 헤더 목록. 각 헤더는 { text, align } 형식입니다. */
+    headers: TableCell[];
+    /** 테이블 행 목록. 각 행은 셀 배열입니다. */
+    rows: TableCell[][];
+    private loading;
+    private sort;
+    private search;
+    private searchCache;
+    private searchTimer;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
+     * 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+     */
+    private renderHighlightedText;
+    /**
+     * 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.
+     */
+    private getFilteredSortedRows;
+    private handleSearchInput;
+    private handleSortColumn;
+    private handleDownloadCSV;
+    private handleDownloadXLS;
+    private triggerDownload;
+}

package/dist/components/blocks/UTableBlock.component.js

@@ -0,0 +1,228 @@
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
+import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UInput } from '@iyulab/components/dist/components/input/UInput.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { USkeleton } from '@iyulab/components/dist/components/skeleton/USkeleton.component.js';
+import { styles } from './UTableBlock.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class UTableBlock extends UJsonElement {
+  constructor() {
+    super(...arguments);
+    this.headers = [];
+    this.rows = [];
+    this.loading = false;
+    this.sort = { index: -1, dir: "asc" };
+    this.search = "";
+    this.searchCache = "";
+    this.searchTimer = null;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-input": UInput,
+      "u-button": UButton,
+      "u-skeleton": USkeleton
+    };
+  }
+  render() {
+    const rows = this.getFilteredSortedRows();
+    return html`
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <u-input
+            class="toolbar-search"
+            type="search"
+            placeholder="Search..."
+            .value=${this.search}
+            @input=${this.handleSearchInput}
+          >
+            <u-icon slot="prefix" lib="internal" name="search"></u-icon>
+          </u-input>
+          <span class="toolbar-count">
+            ${rows.length} / ${this.rows.length} Rows
+          </span>
+        </div>
+        <div class="toolbar-right">
+          <u-button @click=${this.handleDownloadXLS} title="Excel Download">
+            XLS
+            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
+          </u-button>
+          <u-button @click=${this.handleDownloadCSV} title="CSV Download">
+            CSV
+            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
+          </u-button>
+        </div>
+      </div>
+      <div class="table-wrapper" scrollable>
+        <table>
+          <thead ?hidden=${!this.headers.length}>
+            <tr>
+              ${repeat(this.headers, (_, i) => i, (h, i) => {
+      const isActive = this.sort.index === i;
+      return html`
+                  <th
+                    ?active=${isActive}
+                    align=${h.align ?? "left"}
+                    @click=${() => this.handleSortColumn(i)}
+                  >
+                    ${h.text}
+                    <u-icon
+                      class="sort-icon"
+                      lib="internal"
+                      name=${isActive ? this.sort.dir === "asc" ? "sort-alpha-up" : "sort-alpha-down" : "arrow-down-up"}
+                    ></u-icon>
+                  </th>
+                `;
+    })}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.loading ? html`
+                <tr>
+                  <td colspan=${this.headers.length || 1}>
+                    <u-skeleton width="80%" height="1.2em"></u-skeleton>
+                    <u-skeleton width="60%" height="1.2em"></u-skeleton>
+                    <u-skeleton width="70%" height="1.2em"></u-skeleton>
+                    <u-skeleton width="50%" height="1.2em"></u-skeleton>
+                  </td>
+                </tr>
+              ` : repeat(rows, (_, i) => i, (row) => html`
+                <tr>
+                  ${repeat(row, (_, j) => j, (cell) => html`
+                    <td align=${cell.align ?? "left"}>
+                      ${this.renderHighlightedText(cell.text)}
+                    </td>
+                  `)}
+                </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  /**
+   * 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
+   * 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+   */
+  renderHighlightedText(text) {
+    const q = this.search.trim();
+    if (!q) return text;
+    const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const re = new RegExp(`(${escaped})`, "gi");
+    const parts = String(text).split(re);
+    if (parts.length === 1) return text;
+    return html`${parts.map(
+      (p, idx) => idx % 2 === 1 ? html`<mark>${p}</mark>` : p
+    )}`;
+  }
+  /**
+   * 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.
+   */
+  getFilteredSortedRows() {
+    let rows = this.rows;
+    const q = this.search.trim();
+    if (q) {
+      const qLower = q.toLowerCase();
+      rows = rows.filter((row) => row.some((cell) => cell.text.toLowerCase().includes(qLower)));
+    }
+    const { index, dir } = this.sort;
+    if (index < 0) return rows;
+    return [...rows].sort((a, b) => {
+      const av = a[index]?.text ?? "";
+      const bv = b[index]?.text ?? "";
+      const an = Number(av);
+      const bn = Number(bv);
+      const cmp = !isNaN(an) && !isNaN(bn) ? an - bn : av.localeCompare(bv, void 0, { sensitivity: "base" });
+      return dir === "asc" ? cmp : -cmp;
+    });
+  }
+  /* 250ms 디바운스되어 검색어가 업데이트되는 핸들러. */
+  handleSearchInput(e) {
+    const input = e.target;
+    this.searchCache = input.value;
+    if (this.searchTimer !== null) window.clearTimeout(this.searchTimer);
+    this.loading = true;
+    this.searchTimer = window.setTimeout(() => {
+      this.search = this.searchCache;
+      this.loading = false;
+      this.searchTimer = null;
+    }, 250);
+  }
+  /* 컬럼 헤더 클릭 시 정렬 상태를 토글하는 핸들러 */
+  handleSortColumn(index) {
+    if (this.sort.index === index) {
+      this.sort = { ...this.sort, dir: this.sort.dir === "asc" ? "desc" : "asc" };
+    } else {
+      this.sort = { index, dir: "asc" };
+    }
+  }
+  /* CSV 다운로드 핸들러 */
+  handleDownloadCSV() {
+    const escCsv = (v) => v.includes(",") || v.includes('"') || v.includes("\n") ? `"${v.replace(/"/g, '""')}"` : v;
+    const lines = [
+      this.headers.map((h) => escCsv(h.text)).join(","),
+      ...this.rows.map((row) => row.map((cell) => escCsv(cell.text)).join(","))
+    ];
+    const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" });
+    this.triggerDownload("table.csv", blob);
+  }
+  /* XLS 다운로드 핸들러 */
+  handleDownloadXLS() {
+    const escXml = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const cell = (v) => `<Cell><Data ss:Type="String">${escXml(v)}</Data></Cell>`;
+    const row = (cells) => `<Row>${cells.map(cell).join("")}</Row>`;
+    const xml = [
+      `<?xml version="1.0" encoding="UTF-8"?>`,
+      `<?mso-application progid="Excel.Sheet"?>`,
+      `<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"`,
+      ` xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">`,
+      `<Worksheet ss:Name="Sheet1"><Table>`,
+      row(this.headers.map((h) => h.text)),
+      ...this.rows.map((r) => row(r.map((c) => c.text))),
+      `</Table></Worksheet></Workbook>`
+    ].join("\n");
+    const blob = new Blob([xml], { type: "application/vnd.ms-excel;charset=utf-8;" });
+    this.triggerDownload("table.xls", blob);
+  }
+  /* 파일 다운로드 트리거 */
+  triggerDownload(filename, blob) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], UTableBlock.prototype, "headers");
+__decorateClass([
+  property({ type: Array })
+], UTableBlock.prototype, "rows");
+__decorateClass([
+  state()
+], UTableBlock.prototype, "loading");
+__decorateClass([
+  state()
+], UTableBlock.prototype, "sort");
+__decorateClass([
+  state()
+], UTableBlock.prototype, "search");
+
+export { UTableBlock };

package/dist/components/blocks/UTableBlock.d.ts

@@ -0,0 +1,7 @@
+import { UTableBlock } from './UTableBlock.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-table-block": UTableBlock;
+    }
+}
+export { UTableBlock };

package/dist/components/blocks/UTableBlock.js

@@ -0,0 +1,5 @@
+import { UTableBlock } from './UTableBlock.component.js';
+
+UTableBlock.define("u-table-block");
+
+export { UTableBlock };

package/dist/components/blocks/UTableBlock.styles.d.ts

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

package/dist/components/blocks/UTableBlock.styles.js

@@ -0,0 +1,134 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    margin: 8px 0;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background-color: var(--u-neutral-100);
+    border-bottom: 1px solid var(--u-border-color);
+    gap: 8px;
+  }
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toolbar-search {
+    flex: 1;
+    max-width: 200px;
+    font-size: 12px;
+  }
+
+  .toolbar-count {
+    font-size: 12px;
+    color: var(--u-txt-color-weak);
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .toolbar-right u-button {
+    font-size: 12px;
+    padding: 0.25em 0.5em;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    overflow-y: auto;
+    max-height: 480px;
+    width: 100%;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+
+  thead {
+    position: sticky;
+    z-index: 10;
+    top: 0;
+  }
+
+  thead tr {
+    background-color: var(--u-neutral-100);
+  }
+
+  th {
+    padding: 8px 12px;
+    font-weight: 600;
+    text-align: left;
+    border-bottom: 2px solid var(--u-border-color);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+  th:hover {
+    background-color: var(--u-neutral-200);
+  }
+  th:hover .sort-icon {
+    opacity: 0.7;
+  }
+  th[active] {
+    color: var(--u-primary, #4a90e2);
+  }
+  th[active] .sort-icon {
+    opacity: 1;
+  }
+
+  th .sort-icon {
+    display: inline-flex;
+    margin-left: 4px;
+    font-size: 12px;
+    opacity: 0.3;
+    transition: opacity 0.15s;
+  }
+
+  tbody tr {
+    background-color: var(--u-neutral-0);
+  }
+  tbody tr:hover td {
+    background-color: var(--u-neutral-50, rgba(0,0,0,0.02));
+  }
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--u-border-color);
+    vertical-align: top;
+  }
+
+  th[align="left"], td[align="left"] {
+    text-align: left; 
+  }
+  th[align="center"], td[align="center"] { 
+    text-align: center; 
+  }
+  th[align="right"], td[align="right"] { 
+    text-align: right; 
+  }
+`;
+
+export { styles };

package/dist/components/blocks/UTextBlock.component.d.ts

@@ -1,11 +1,11 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 텍스트를 표시하거나 편집할 수 있는 블록 컴포넌트입니다.
  */
-export declare class UTextBlock extends BaseElement {
+export declare class UTextBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     textareaEl: HTMLTextAreaElement;
     preEl: HTMLPreElement;
     /** 편집 가능 여부 */

package/dist/components/blocks/UTextBlock.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { styles } from './UTextBlock.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -12,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UTextBlock extends BaseElement {
+class UTextBlock extends UElement {
   constructor() {
     super(...arguments);
     this.editable = false;

package/dist/components/blocks/UThinkBlock.component.d.ts

@@ -1,12 +1,12 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 추론 내용을 표시하는 블록입니다.
  * 로딩 중일 때는 "Thinking..." 메시지를 표시하고, 내용 펼치기/접기 기능을 제공합니다.
  */
-export declare class UThinkBlock extends BaseElement {
+export declare class UThinkBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     bodyEl: HTMLDivElement;
     /** 컨텐츠가 로딩 중인지 여부 */
     loading: boolean;

package/dist/components/blocks/UThinkBlock.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { UMarkedBlock } from './UMarkedBlock.component.js';
 import { styles } from './UThinkBlock.styles.js';
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UThinkBlock extends BaseElement {
+class UThinkBlock extends UElement {
   constructor() {
     super(...arguments);
     this.loading = false;

package/dist/components/blocks/UToolBlock.component.d.ts

@@ -1,11 +1,11 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { JsonNode } from '../../types/JsonNode.js';
 /**
  * 툴 사용 블록 컴포넌트입니다.
  */
-export declare class UToolBlock extends BaseElement {
+export declare class UToolBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 로딩 상태 */
     loading: boolean;
     /** 블록 접힘 여부 */

package/dist/components/blocks/UToolBlock.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { USpinner } from '@iyulab/components/dist/components/spinner/USpinner.component.js';
 import { UJsonBlock } from './UJsonBlock.component.js';
@@ -16,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UToolBlock extends BaseElement {
+class UToolBlock extends UElement {
   constructor() {
     super(...arguments);
     this.loading = false;

package/dist/components/buttons/UAttachButton.component.d.ts

@@ -1,10 +1,10 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 파일 첨부 버튼 컴포넌트입니다.
  */
-export declare class UAttachButton extends BaseElement {
+export declare class UAttachButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     input?: HTMLInputElement;
     /** 첨부 파일 유형 제한, 컴마로 구분된 MIME 타입 문자열 (예: "image/*,application/pdf") */
     accept?: string;

package/dist/components/buttons/UAttachButton.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UAttachButton extends BaseElement {
+class UAttachButton extends UElement {
   constructor() {
     super(...arguments);
     this.multiple = false;

package/dist/components/buttons/UCopyButton.component.d.ts

@@ -1,10 +1,10 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 클릭 시 클립보드에 텍스트를 복사하는 버튼입니다. 복사 상태를 표시하기 위해 아이콘이 변경됩니다.
  */
-export declare class UCopyButton extends BaseElement {
+export declare class UCopyButton extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 클립보드 복사 상태를 나타내는 플래그입니다. */
     isCopied: boolean;
     /** 클립보드 복사 후 재사용 대기 시간 (ms) */

package/dist/components/buttons/UCopyButton.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { state, property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UCopyButton extends BaseElement {
+class UCopyButton extends UElement {
   constructor() {
     super(...arguments);
     this.isCopied = false;