@iyulab/chat-components 0.3.0 → 0.4.0

package/dist/components/widgets/UImagesWidget.styles.js

@@ -0,0 +1,218 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    margin: 0.75em 0;
+  }
+
+  .slide {
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+    cursor: pointer;
+    aspect-ratio: 4 / 3;
+  }
+  .slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+    transition: filter 0.2s ease;
+  }
+  .slide:hover img {
+    filter: brightness(0.92);
+  }
+
+  .caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px 10px 8px;
+    color: white;
+    font-size: 0.8em;
+    line-height: 1.3;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
+  }
+
+  /* ─── 라이트박스 UI ─── */
+
+  /* 루트 오버레이: flex column 전체 화면 */
+  .lb-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.92);
+    animation: overlay-fadeIn 0.2s ease;
+  }
+
+  /* 상단 헤더: 카운터(중앙) + 닫기(우측) */
+  .lb-header {
+    height: 56px;
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .lb-counter {
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.875em;
+    font-variant-numeric: tabular-nums;
+    background: rgba(0, 0, 0, 0.35);
+    padding: 3px 12px;
+    border-radius: 20px;
+    backdrop-filter: blur(4px);
+  }
+
+  .lb-close {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 12px;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .lb-close:hover  { 
+    background: rgba(255, 255, 255, 0.18); 
+  }
+  .lb-close:active { 
+    background: rgba(255, 255, 255, 0.28); 
+  }
+
+  .lb-close u-icon {
+    color: white;
+    font-size: 1.25em;
+  }
+
+  /* 중앙 본문: 뷰포트 + 이전/다음 버튼(absolute 오버레이) */
+  .lb-body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .lb-viewport {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .lb-track {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
+    will-change: transform;
+  }
+
+  .lb-slide {
+    flex: 0 0 70vw;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.5;
+    transform: scale(0.9);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+  }
+  .lb-slide[active] {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .lb-slide img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 6px;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  .lb-nav {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    width: 80px;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.25s;
+  }
+  .lb-nav.prev {
+    left: 0;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent);
+  }
+  .lb-nav.next {
+    right: 0;
+    background: linear-gradient(to left, rgba(0, 0, 0, 0.28), transparent);
+  }
+  .lb-nav.prev:hover {
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
+  }
+  .lb-nav.next:hover {
+    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
+  }
+
+  .lb-nav u-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5em;
+    padding: 12px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15);
+    transition: background 0.2s, transform 0.15s;
+  }
+  .lb-nav:hover u-icon {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  /* 하단 푸터: 캡션 */
+  .lb-footer {
+    position: relative;
+    flex-shrink: 0;
+    padding: 24px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
+  }
+
+  .lb-caption {
+    margin: 0;
+    color: white;
+    font-size: 1.05em;
+    line-height: 1.5;
+    text-align: center;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  @keyframes overlay-fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+`;
+
+export { styles };

package/dist/components/widgets/UMapWidget.component.d.ts

@@ -0,0 +1,20 @@
+import { nothing } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 지도 위젯 컴포넌트 (OpenStreetMap embed)
+ */
+export declare class UMapWidget extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 위도 (latitude) */
+    lat?: number;
+    /** 경도 (longitude) */
+    lng?: number;
+    /** 지도 확대 레벨 (zoom level, 기본값: 15) */
+    zoom: number;
+    /** 지도 마커 라벨 */
+    label?: string;
+    /** 지도 마커 설명 */
+    description?: string;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+}

package/dist/components/widgets/UMapWidget.component.js

@@ -0,0 +1,65 @@
+import { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { styles } from './UMapWidget.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 UMapWidget extends UElement {
+  constructor() {
+    super(...arguments);
+    this.zoom = 15;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  render() {
+    if (this.lat == null || this.lng == null) return nothing;
+    const offset = 360 / Math.pow(2, this.zoom);
+    const bbox = `${this.lng - offset},${this.lat - offset},${this.lng + offset},${this.lat + offset}`;
+    const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${this.lat},${this.lng}`;
+    const linkUrl = `https://www.openstreetmap.org/?mlat=${this.lat}&mlon=${this.lng}#map=${this.zoom}/${this.lat}/${this.lng}`;
+    return html`
+      <iframe 
+        src="${embedUrl}" 
+        loading="lazy"
+      ></iframe>
+      <a class="caption" 
+        ?hidden=${!this.label && !this.description}  
+        href="${linkUrl}" 
+        target="_blank" 
+        rel="noopener"
+      >
+        <strong>${this.label}</strong>
+        <span>${this.description}</span>
+      </a>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], UMapWidget.prototype, "lat");
+__decorateClass([
+  property({ type: Number })
+], UMapWidget.prototype, "lng");
+__decorateClass([
+  property({ type: Number })
+], UMapWidget.prototype, "zoom");
+__decorateClass([
+  property({ type: String })
+], UMapWidget.prototype, "label");
+__decorateClass([
+  property({ type: String })
+], UMapWidget.prototype, "description");
+
+export { UMapWidget };

package/dist/components/widgets/UMapWidget.d.ts

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

package/dist/components/widgets/UMapWidget.js

@@ -0,0 +1,5 @@
+import { UMapWidget } from './UMapWidget.component.js';
+
+UMapWidget.define("u-map-widget");
+
+export { UMapWidget };

package/dist/components/widgets/UMapWidget.styles.d.ts

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

package/dist/components/widgets/UMapWidget.styles.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 0.75em 0;
+  }
+
+  iframe {
+    width: 100%;
+    height: 300px;
+    display: block;
+    border: none;
+  }
+
+  .caption {
+    text-decoration: none;
+    max-width: 60%;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    padding: 0.25em 0.5em;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 6px;
+    backdrop-filter: blur(4px);
+  }
+  .caption:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .caption strong {
+    font-size: 0.8em;
+  }
+  .caption span {
+    font-size: 0.7em;
+    opacity: 0.8;
+  }
+`;
+
+export { styles };

package/dist/components/widgets/UVideoWidget.component.d.ts

@@ -0,0 +1,21 @@
+import { nothing, PropertyValues } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 비디오 플레이어 위젯 컴포넌트
+ */
+export declare class UVideoWidget extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 비디오 URL (YouTube, Vimeo, 직접 파일) */
+    src?: string;
+    /** 포스터 이미지 URL */
+    poster?: string;
+    /** 비디오 비율 */
+    ratio: '16:9' | '4:3' | '1:1';
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    private isYouTube;
+    private isVimeo;
+    private extractYouTubeId;
+    private extractVimeoId;
+}

package/dist/components/widgets/UVideoWidget.component.js

@@ -0,0 +1,106 @@
+import { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { styles } from './UVideoWidget.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 UVideoWidget extends UElement {
+  constructor() {
+    super(...arguments);
+    this.ratio = "16:9";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("ratio")) {
+      this.style.setProperty("--video-ratio", this.ratio.replace(":", " / "));
+    }
+  }
+  render() {
+    if (!this.src) return nothing;
+    if (this.isYouTube(this.src)) {
+      const videoId = this.extractYouTubeId(this.src);
+      if (videoId) {
+        return html`
+          <div class="video-wrapper">
+            <iframe
+              src="https://www.youtube.com/embed/${videoId}"
+              loading="lazy"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            ></iframe>
+          </div>
+        `;
+      }
+    }
+    if (this.isVimeo(this.src)) {
+      const videoId = this.extractVimeoId(this.src);
+      if (videoId) {
+        return html`
+          <div class="video-wrapper">
+            <iframe
+              src="https://player.vimeo.com/video/${videoId}"
+              loading="lazy"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowfullscreen
+            ></iframe>
+          </div>
+        `;
+      }
+    }
+    return html`
+      <video
+        src=${this.src}
+        poster=${ifDefined(this.poster)}
+        controls
+        playsinline
+      ></video>
+    `;
+  }
+  isYouTube(url) {
+    return /youtube\.com|youtu\.be/i.test(url);
+  }
+  isVimeo(url) {
+    return /vimeo\.com/i.test(url);
+  }
+  extractYouTubeId(url) {
+    const patterns = [
+      /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/,
+      /youtube\.com\/embed\/([^&\s]+)/
+    ];
+    for (const pattern of patterns) {
+      const match = url.match(pattern);
+      if (match && match[1]) return match[1];
+    }
+    return null;
+  }
+  extractVimeoId(url) {
+    const match = url.match(/vimeo\.com\/(\d+)/);
+    return match ? match[1] : null;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], UVideoWidget.prototype, "src");
+__decorateClass([
+  property({ type: String })
+], UVideoWidget.prototype, "poster");
+__decorateClass([
+  property({ type: String })
+], UVideoWidget.prototype, "ratio");
+
+export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.d.ts

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

package/dist/components/widgets/UVideoWidget.js

@@ -0,0 +1,5 @@
+import { UVideoWidget } from './UVideoWidget.component.js';
+
+UVideoWidget.define("u-video-widget");
+
+export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.styles.d.ts

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

package/dist/components/widgets/UVideoWidget.styles.js

@@ -0,0 +1,36 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    --video-ratio: 16 / 9;
+  }
+
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0.75em auto;
+  }
+
+  video {
+    width: 100%;
+    aspect-ratio: var(--video-ratio);
+    border-radius: 8px;
+    background: #000;
+  }
+
+  .video-wrapper {
+    width: 100%;
+    aspect-ratio: var(--video-ratio);
+  }
+
+  .video-wrapper iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 8px;
+  }
+`;
+
+export { styles };

package/dist/components/widgets/UWidget.component.d.ts

@@ -0,0 +1,43 @@
+import { nothing, PropertyValues } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
+/**
+ * 위젯 파싱/렌더링 오류를 표시하는 컴포넌트입니다.
+ */
+export declare class UWidget extends UJsonElement {
+    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 로딩 상태입니다. `true`인 경우, 위젯이 로딩 중임을 나타냅니다. */
+    loading: boolean;
+    /** `tag` 프로퍼티에 등록된 커스텀 엘리먼트를 렌더링하는 컴포넌트입니다. */
+    tag?: string;
+    /** `properties` 객체의 키가 렌더링된 엘리먼트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다. */
+    properties?: Record<string, unknown>;
+    /** `properties` 객체에서 위험한 프로퍼티 이름을 지정하여 차단할 수 있습니다. */
+    blacklist: string[];
+    /** 실제 렌더링된 엘리먼트입니다. `tag` 프로퍼티가 변경될 때마다 업데이트됩니다. */
+    private element;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): HTMLElement | import('lit-html').TemplateResult<1> | typeof nothing;
+    /**
+     * `loading`이 `true`인 경우, 에러 UI로 대체하지 않습니다.
+     */
+    protected error(error: Error): Promise<void>;
+    /**
+     * `tag` 프로퍼티에 등록된 커스텀 엘리먼트를 렌더링하는 컴포넌트입니다.
+     * `tag`가 변경될 때마다 등록된 커스텀 엘리먼트를 새로 생성하여 렌더링합니다.
+     * `tag`가 유효하지 않거나 등록된 커스텀 엘리먼트가 아닌 경우, 에러 처리합니다.
+     */
+    private updateElement;
+    /**
+     * `properties` 객체의 키가 렌더링된 엘리먼트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
+     * `properties` 객체에 위험한 프로퍼티가 포함되어 있는지 검증하여, 유효한 경우에만 할당합니다.
+     * 할당 중 오류가 발생한 경우, 에러 처리합니다.
+     */
+    private updateProperties;
+    /**
+     * `properties` 객체에 위험한 프로퍼티가 포함되어 있는지 검증합니다.
+     * DOM 조작이나 이벤트 핸들러로 악용될 수 있는 프로퍼티를 최소한으로 차단합니다.
+     */
+    private validateProperties;
+}