@iyulab/chat-components 0.4.0 → 0.5.1

package/dist/components/references/URefCardGroup.d.ts

@@ -1,7 +1,30 @@
-import { URefCardGroup } from './URefCardGroup.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { URefCard } from './URefCard.js';
+/**
+ * 여러 참조 카드를 그룹으로 표시하는 컴포넌트입니다.
+ * 페이지네이션 기능을 제공하여 각 카드를 하나씩 탐색할 수 있습니다.
+ * 카드가 1개 이하인 경우 페이지네이션 UI는 자동으로 숨겨집니다.
+ */
+export declare class URefCardGroup extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** slot으로 받은 카드 엘리먼트들 */
+    cards: URefCard[];
+    /** 현재 표시 중인 카드의 인덱스 */
+    currentIndex: number;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 해당하는 인덱스에 해당하는 카드로 변경합니다.
+     */
+    switch(index: number): void;
+    /** 이전 카드로 이동합니다. */
+    private handlePreviousButtonClick;
+    /** 다음 카드로 이동합니다. */
+    private handleNextButtonClick;
+    /** slot 내용이 변경될 때 호출됩니다. */
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-ref-card-group": URefCardGroup;
     }
 }
-export { URefCardGroup };

package/dist/components/references/URefCardGroup.js

@@ -1,5 +1,70 @@
-import { URefCardGroup } from './URefCardGroup.component.js';
-
-URefCardGroup.define("u-ref-card-group");
-
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { URefCard } from "./URefCard.js";
+import { styles } from "./URefCardGroup.styles.js";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/references/URefCardGroup.ts
+var URefCardGroup = class URefCardGroup extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.cards = [];
+		this.currentIndex = 0;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="header" ?hidden=${this.cards.length <= 1}>
+        <button class="nav-button"
+          @click=${this.handlePreviousButtonClick}>
+          <u-icon lib="internal" name="chevron-left"></u-icon>
+        </button>
+        
+        <span class="page-indicator">
+          ${this.currentIndex + 1} / ${this.cards.length}
+        </span>
+        
+        <button class="nav-button"
+          @click=${this.handleNextButtonClick}>
+          <u-icon lib="internal" name="chevron-right"></u-icon>
+        </button>
+      </div>
+      
+      <div class="viewport">
+        <div class="track" style=${`transform: translateX(-${this.currentIndex * 100}%);`}>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* 해당하는 인덱스에 해당하는 카드로 변경합니다.
+	*/
+	switch(index) {
+		const len = this.cards.length;
+		if (len === 0) return;
+		this.currentIndex = index < 0 ? len - 1 : index >= len ? 0 : index;
+	}
+	/** 이전 카드로 이동합니다. */
+	handlePreviousButtonClick() {
+		this.switch(this.currentIndex - 1);
+	}
+	/** 다음 카드로 이동합니다. */
+	handleNextButtonClick() {
+		this.switch(this.currentIndex + 1);
+	}
+	/** slot 내용이 변경될 때 호출됩니다. */
+	handleSlotChange(e) {
+		this.cards = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof URefCard);
+		this.switch(0);
+	}
+};
+__decorate([state(), __decorateMetadata("design:type", Array)], URefCardGroup.prototype, "cards", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], URefCardGroup.prototype, "currentIndex", void 0);
+URefCardGroup = __decorate([customElement("u-ref-card-group")], URefCardGroup);
+//#endregion
 export { URefCardGroup };

package/dist/components/references/URefCardGroup.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/references/URefCardGroup.styles.ts
+var styles = css`
   :host {
     display: flex;
     flex-direction: column;
@@ -65,5 +65,5 @@ const styles = css`
     border: none;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/references/URefTag.d.ts

@@ -1,7 +1,17 @@
-import { URefTag } from './URefTag.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 인용 태그 컴포넌트입니다.
+ */
+export declare class URefTag extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 인용 출처 소스 데이터 */
+    href?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 링크 클릭 핸들러 */
+    private handleAnchorClick;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-ref-tag': URefTag;
     }
 }
-export { URefTag };

package/dist/components/references/URefTag.js

@@ -1,5 +1,40 @@
-import { URefTag } from './URefTag.component.js';
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { styles } from "./URefTag.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/tooltip/UTooltip.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/references/URefTag.ts
+var URefTag = class URefTag extends UElement {
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
+        <slot></slot>
+      </a>
 
-URefTag.define("u-ref-tag");
+      <u-icon lib="bootstrap" name="box-arrow-up-right"></u-icon>
 
+      <u-tooltip interactive placement="bottom" distance="4">
+        <slot name="tooltip"></slot>
+      </u-tooltip>
+    `;
+	}
+	/** 링크 클릭 핸들러 */
+	handleAnchorClick(e) {
+		if (!this.href) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefTag.prototype, "href", void 0);
+URefTag = __decorate([customElement("u-ref-tag")], URefTag);
+//#endregion
 export { URefTag };

package/dist/components/references/URefTag.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/references/URefTag.styles.ts
+var styles = css`
   :host {
     display: inline-flex;
     flex-direction: row;
@@ -47,5 +47,5 @@ const styles = css`
     opacity: 1;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/{widgets/UChartWidget.component.d.ts → views/UChartView.d.ts}

@@ -2,12 +2,10 @@ import { nothing, PropertyValues } from 'lit';
 import { ChartType, ChartData, ChartOptions } from 'chart.js/auto';
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
- * 차트 위젯 컴포넌트
- * Chart.js를 사용하여 다양한 차트를 렌더링
+ * Chart.js를 사용하여 다양한 차트를 렌더링하는 뷰 컴포넌트입니다.
  */
-export declare class UChartWidget extends UElement {
+export declare class UChartView extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
     /** 차트 유형 (bar, line, pie 등) */
     type?: ChartType;
     /** 차트 데이터 */
@@ -34,3 +32,8 @@ export declare class UChartWidget extends UElement {
     private handleDownloadJSON;
     private handleFullscreen;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-chart-view": UChartView;
+    }
+}

package/dist/components/views/UChartView.js

@@ -0,0 +1,167 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { styles } from "./UChartView.styles.js";
+import { html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/views/UChartView.ts
+var _ref, _ref2;
+/** chart.js lazy load */
+var ChartCtor;
+async function loadChartJS() {
+	if (!ChartCtor) ChartCtor = (await import("chart.js/auto")).Chart;
+	return ChartCtor;
+}
+var UChartView = class UChartView extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.error = null;
+		this.chartjs = null;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.observer = new MutationObserver(() => {
+			this.createChart();
+		});
+		this.observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["theme"]
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.observer?.disconnect();
+		this.destroyChart();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if ([
+			"data",
+			"type",
+			"options"
+		].some((k) => changedProperties.has(k))) this.createChart();
+	}
+	render() {
+		if (!this.data) return nothing;
+		return html`
+      <div class="toolbar">
+        <div class="toolbar-left"></div>
+        <div class="toolbar-right">
+          <u-button title="PNG Download" @click=${this.handleDownloadPNG}>
+            PNG
+            <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
+          </u-button>
+          <u-button title="JSON Download" @click=${this.handleDownloadJSON}>
+            JSON
+            <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
+          </u-button>
+          <u-button title="Full Screen" @click=${this.handleFullscreen}>
+            <u-icon lib="bootstrap" name="box-arrow-up-right"></u-icon>
+          </u-button>
+        </div>
+      </div>
+      <div class="viewport">
+        <canvas></canvas>
+        <div class="error-overlay" ?hidden=${!this.error}>
+          <u-icon lib="bootstrap" name="exclamation-triangle-fill"></u-icon>
+          <span>${this.error}</span>
+        </div>
+      </div>
+    `;
+	}
+	/** Chart.js로 차트 생성 */
+	async createChart() {
+		if (!this.canvas) return;
+		if (!this.type || !this.data) return;
+		this.destroyChart();
+		this.error = null;
+		let Chart;
+		try {
+			Chart = await loadChartJS();
+		} catch {
+			this.error = "chart.js를 로드할 수 없습니다. chart.js 패키지가 설치되어 있는지 확인하세요.";
+			return;
+		}
+		const ctx = this.canvas.getContext("2d");
+		if (!ctx) {
+			this.error = "Canvas 2D context를 가져올 수 없습니다.";
+			return;
+		}
+		try {
+			this.applyTheme(Chart);
+			this.chartjs = new Chart(ctx, {
+				type: this.type,
+				data: this.data,
+				options: {
+					responsive: true,
+					maintainAspectRatio: true,
+					...this.options
+				}
+			});
+		} catch (e) {
+			this.error = e instanceof Error ? e.message : String(e);
+		}
+	}
+	/** 기존 차트 인스턴스 제거 */
+	destroyChart() {
+		if (this.chartjs) {
+			this.chartjs.destroy();
+			this.chartjs = null;
+		}
+	}
+	/** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
+	applyTheme(Chart) {
+		const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
+		const textColor = css("--u-txt-color");
+		const weakColor = css("--u-txt-color-weak");
+		const borderColor = css("--u-border-color");
+		const bgColor = css("--u-bg-color");
+		Chart.defaults.color = textColor;
+		Chart.defaults.borderColor = borderColor;
+		Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
+		Chart.defaults.plugins.tooltip.titleColor = textColor;
+		Chart.defaults.plugins.tooltip.bodyColor = weakColor;
+		Chart.defaults.plugins.tooltip.borderColor = borderColor;
+		Chart.defaults.plugins.tooltip.borderWidth = 1;
+		Chart.defaults.scale.ticks.color = weakColor;
+		Chart.defaults.scale.grid.color = borderColor;
+	}
+	handleDownloadPNG() {
+		if (!this.chartjs) return;
+		const url = this.chartjs.toBase64Image("image/png", 1);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `chart-image-${Date.now()}.png`;
+		a.click();
+	}
+	handleDownloadJSON() {
+		if (!this.data) return;
+		const json = JSON.stringify(this.data, null, 2);
+		const blob = new Blob([json], { type: "application/json;charset=utf-8;" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `chart-data-${Date.now()}.json`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+	handleFullscreen() {
+		const target = this.viewport ?? this;
+		if (document.fullscreenElement) document.exitFullscreen();
+		else target.requestFullscreen?.();
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UChartView.prototype, "type", void 0);
+__decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UChartView.prototype, "data", void 0);
+__decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UChartView.prototype, "options", void 0);
+__decorate([query("canvas"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLCanvasElement !== "undefined" && HTMLCanvasElement) === "function" ? _ref : Object)], UChartView.prototype, "canvas", void 0);
+__decorate([query(".viewport"), __decorateMetadata("design:type", typeof (_ref2 = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref2 : Object)], UChartView.prototype, "viewport", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UChartView.prototype, "error", void 0);
+UChartView = __decorate([customElement("u-chart-view")], UChartView);
+//#endregion
+export { UChartView };

package/dist/components/{widgets/UChartWidget.styles.js → views/UChartView.styles.js}

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/views/UChartView.styles.ts
+var styles = css`
   :host {
     margin: 0.75em auto;
     display: block;
@@ -82,5 +82,5 @@ const styles = css`
     flex-shrink: 0;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/{widgets/UImagesWidget.component.d.ts → views/UImagesView.d.ts}

@@ -6,12 +6,10 @@ export interface ImageSlide {
     caption?: string;
 }
 /**
- * 이미지 갤러리 위젯 컴포넌트
- * u-carousel 기반 가로 슬라이드 + 슬라이딩 라이트박스
+ * u-carousel 기반 가로 슬라이드 + 슬라이딩 라이트박스 형태의 이미지 뷰어입니다.
  */
-export declare class UImagesWidget extends UElement {
+export declare class UImagesView extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
     /** 이미지 슬라이드 배열 */
     items: ImageSlide[];
     /** 라이트박스에서 현재 열려있는 이미지 인덱스, null이면 라이트박스 닫힘 */
@@ -28,3 +26,8 @@ export declare class UImagesWidget extends UElement {
     private handleNextClick;
     private handleKeyDown;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-images-view": UImagesView;
+    }
+}

package/dist/components/views/UImagesView.js

@@ -0,0 +1,144 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { styles } from "./UImagesView.styles.js";
+import { html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { repeat } from "lit/directives/repeat.js";
+import "@iyulab/components/dist/components/carousel/UCarousel.js";
+//#region src/components/views/UImagesView.ts
+var UImagesView = class UImagesView extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.index = null;
+		this.open = (i) => {
+			this.index = i;
+		};
+		this.close = () => {
+			this.index = null;
+		};
+		this.prev = () => {
+			if (this.index !== null && this.index > 0) this.index--;
+		};
+		this.next = () => {
+			if (this.index !== null && this.index < this.items.length - 1) this.index++;
+		};
+		this.handlePrevClick = (e) => {
+			e.stopPropagation();
+			this.prev();
+		};
+		this.handleNextClick = (e) => {
+			e.stopPropagation();
+			this.next();
+		};
+		this.handleKeyDown = (e) => {
+			if (this.index === null) return;
+			if (e.key === "Escape") this.close();
+			else if (e.key === "ArrowLeft") this.prev();
+			else if (e.key === "ArrowRight") this.next();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.handleKeyDown);
+		super.disconnectedCallback();
+	}
+	render() {
+		if (!this.items?.length) return nothing;
+		const count = this.items.length;
+		return html`
+      <u-carousel
+        .loop=${false}
+        .navigation=${false}
+        .pagination=${true}
+        .draggable=${true}
+        .slidesPerView=${Math.min(count, 3)}
+        .gap=${8}
+      >
+        ${repeat(this.items, (item, i) => html`
+          <div class="slide" 
+            @click=${() => this.open(i)}>
+            <img 
+              src=${item.src} 
+              alt=${item.alt || ""} 
+              loading="lazy" 
+            />
+            <div class="caption"
+              ?hidden=${!item.caption}>
+              ${item.caption}
+            </div>
+          </div>
+        `)}
+      </u-carousel>
+
+      ${this.renderLightbox()}
+    `;
+	}
+	renderLightbox() {
+		const idx = this.index;
+		if (idx === null) return nothing;
+		if (idx < 0 || idx >= this.items.length) return nothing;
+		const item = this.items[idx];
+		if (!item) return nothing;
+		const total = this.items.length;
+		const translateX = `calc(15vw - ${idx} * (70vw + 16px))`;
+		return html`
+      <div class="lb-overlay">
+
+        <!-- 상단: 카운터(중앙) + 닫기 버튼(우측) -->
+        <header class="lb-header">
+          <div class="lb-counter" ?hidden=${total <= 1}>
+            ${idx + 1} / ${total}
+          </div>
+          <button class="lb-close" @click=${this.close}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </button>
+        </header>
+
+        <!-- 중앙: 뷰포트 + 이전/다음 버튼(absolute 오버레이) -->
+        <div class="lb-body">
+          <div class="lb-viewport">
+            <div class="lb-track" style="transform:translateX(${translateX})">
+              ${repeat(this.items, (img, i) => html`
+                <div class="lb-slide" ?active=${i === idx}>
+                  <img src=${img.src} alt=${img.alt || ""} />
+                </div>
+              `)}
+            </div>
+          </div>
+
+          <button class="lb-nav prev"
+            ?hidden=${idx <= 0}
+            @click=${this.handlePrevClick}>
+            <u-icon lib="internal" name="chevron-left"></u-icon>
+          </button>
+
+          <button class="lb-nav next"
+            ?hidden=${idx >= total - 1}
+            @click=${this.handleNextClick}>
+            <u-icon lib="internal" name="chevron-right"></u-icon>
+          </button>
+        </div>
+
+        <!-- 하단: 캡션 -->
+        <footer class="lb-footer" ?hidden=${!item.caption}>
+          <p class="lb-caption">${item.caption}</p>
+        </footer>
+
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UImagesView.prototype, "items", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UImagesView.prototype, "index", void 0);
+UImagesView = __decorate([customElement("u-images-view")], UImagesView);
+//#endregion
+export { UImagesView };

package/dist/components/{widgets/UImagesWidget.styles.js → views/UImagesView.styles.js}

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/views/UImagesView.styles.ts
+var styles = css`
   :host {
     display: block;
     width: 100%;
@@ -20,9 +20,10 @@ const styles = css`
     height: 100%;
     object-fit: cover;
     pointer-events: none;
-    transition: filter 0.2s ease;
+    transition: transform 0.3s ease, filter 0.3s ease;
   }
   .slide:hover img {
+    transform: scale(1.05);
     filter: brightness(0.92);
   }
 
@@ -214,5 +215,5 @@ const styles = css`
     to   { opacity: 1; }
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/{widgets/UMapWidget.component.d.ts → views/UMapView.d.ts}

@@ -1,11 +1,10 @@
 import { nothing } from 'lit';
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
- * 지도 위젯 컴포넌트 (OpenStreetMap embed)
+ * 지도 뷰 컴포넌트 (OpenStreetMap embed)
  */
-export declare class UMapWidget extends UElement {
+export declare class UMapView extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
     /** 위도 (latitude) */
     lat?: number;
     /** 경도 (longitude) */
@@ -18,3 +17,8 @@ export declare class UMapWidget extends UElement {
     description?: string;
     render(): import('lit-html').TemplateResult<1> | typeof nothing;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-map-view": UMapView;
+    }
+}