@iyulab/chat-components 0.6.0 → 0.7.1

package/dist/components/{views/UView.js → blocks/UElementBlock.js}

@@ -1,12 +1,11 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { styles } from "./UView.styles.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import { UDataElement } from "../UDataElement.js";
+import { styles } from "./UElementBlock.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { UDataElement } from "@iyulab/components/dist/components/UDataElement.js";
 import "@iyulab/components/dist/components/skeleton/USkeleton.js";
-//#region src/components/views/UView.ts
-var _ref;
+//#region src/components/blocks/UElementBlock.ts
 var DEFAULT_BLACKLIST = [
 	"innerHTML",
 	"outerHTML",
@@ -15,7 +14,7 @@ var DEFAULT_BLACKLIST = [
 	"outerText",
 	"srcdoc"
 ];
-var UView = class UView extends UDataElement {
+var UElementBlock = class UElementBlock extends UDataElement {
 	constructor(..._args) {
 		super(..._args);
 		this.loading = false;
@@ -50,28 +49,31 @@ var UView = class UView extends UDataElement {
 		if (this.element != null) return this.element;
 		return nothing;
 	}
-	/** 
-	* `loading`이 `true`인 경우, 에러 UI로 대체하지 않습니다. 
+	/**
+	* `UDataElement.load()`의 JSON 파싱 실패 시 호출됩니다. 스트리밍 중(`loading`)에는
+	* JSON이 아직 완성되지 않아 일시적으로 파싱에 실패하는 것이 정상이므로 콘솔 기록도 건너뜁니다.
 	*/
 	async error(error) {
 		if (this.loading) return;
-		await super.error(error);
+		this.reportError(error);
 	}
 	/**
 	* `tag` 프로퍼티에 등록된 커스텀 엘리먼트를 렌더링하는 컴포넌트입니다.
 	* `tag`가 변경될 때마다 등록된 커스텀 엘리먼트를 새로 생성하여 렌더링합니다.
 	* `tag`가 유효하지 않거나 등록된 커스텀 엘리먼트가 아닌 경우, 에러 처리합니다.
+	* JSON 자체는 이미 파싱에 성공한 상태이므로(스트리밍 중 파싱 실패와는 다른 케이스),
+	* `loading` 여부와 무관하게 항상 기록합니다.
 	*/
 	updateElement(tag) {
 		tag = tag?.trim();
 		if (!tag) {
 			this.element = null;
-			super.error(/* @__PURE__ */ new Error("Tag is required"));
+			this.reportError(/* @__PURE__ */ new Error("Tag is required"));
 			return;
 		}
 		if (!customElements.get(tag)) {
 			this.element = null;
-			super.error(/* @__PURE__ */ new Error(`Unknown tag: ${tag}`));
+			this.reportError(/* @__PURE__ */ new Error(`Unknown tag: ${tag}`));
 			return;
 		}
 		this.element = document.createElement(tag);
@@ -85,9 +87,9 @@ var UView = class UView extends UDataElement {
 		if (this.validateProperties(props)) try {
 			Object.assign(element, props);
 		} catch (error) {
-			super.error(error);
+			this.reportError(error);
 		}
-		else super.error(/* @__PURE__ */ new Error(`Not allowed properties: ${JSON.stringify(props)}`));
+		else this.reportError(/* @__PURE__ */ new Error(`Not allowed properties: ${JSON.stringify(props)}`));
 	}
 	/**
 	* `properties` 객체에 위험한 프로퍼티가 포함되어 있는지 검증합니다.
@@ -99,15 +101,23 @@ var UView = class UView extends UDataElement {
 		for (const key of Object.keys(obj)) if (this.blacklist.includes(key)) return false;
 		return true;
 	}
+	/**
+	* 에러 카드 없이 콘솔에만 기록합니다. 채팅 UI에 갑작스러운 에러 카드가 뜨는 것을 피하기 위함입니다 —
+	* addon 모듈을 import하지 않아 아직 등록되지 않은 태그일 수도 있으므로, 실제 에러라기보다
+	* "아직 준비 안 됨"에 가깝습니다.
+	*/
+	reportError(error) {
+		console.error(`[u-element-block]`, error);
+	}
 };
 __decorate([property({
 	type: Boolean,
 	reflect: true
-}), __decorateMetadata("design:type", Object)], UView.prototype, "loading", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UView.prototype, "tag", void 0);
-__decorate([property({ type: Object }), __decorateMetadata("design:type", typeof (_ref = typeof Record !== "undefined" && Record) === "function" ? _ref : Object)], UView.prototype, "properties", void 0);
-__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UView.prototype, "blacklist", void 0);
-__decorate([state(), __decorateMetadata("design:type", Object)], UView.prototype, "element", void 0);
-UView = __decorate([customElement("u-view")], UView);
+}), __decorateMetadata("design:type", Object)], UElementBlock.prototype, "loading", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UElementBlock.prototype, "tag", void 0);
+__decorate([property({ type: Object }), __decorateMetadata("design:type", typeof Record === "undefined" ? Object : Record)], UElementBlock.prototype, "properties", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UElementBlock.prototype, "blacklist", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UElementBlock.prototype, "element", void 0);
+UElementBlock = __decorate([customElement("u-element-block")], UElementBlock);
 //#endregion
-export { UView };
+export { UElementBlock };

package/dist/components/{views/UView.styles.js → blocks/UElementBlock.styles.js}

@@ -1,5 +1,5 @@
 import { css } from "lit";
-//#region src/components/views/UView.styles.ts
+//#region src/components/blocks/UElementBlock.styles.ts
 var styles = css`
   :host {
     display: contents;

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

@@ -1,25 +1,35 @@
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 단일 파일을 표시하는 블록 컴포넌트입니다.
+ * 이미지/비디오는 실제 미리보기를, 그 외 타입은 아이콘을 썸네일로 보여주며
+ * 미리보기가 가능한 경우 클릭 시 오버레이로 원본을 확인할 수 있습니다.
  */
 export declare class UFileBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
     /** 삭제 버튼 표시 */
     removable: boolean;
-    /** 파일 상태 */
-    status?: 'idle' | 'uploading' | 'error';
     /** 파일 이름 */
     name?: string;
     /** MIME 타입 */
     type?: string;
     /** 파일 크기 (bytes) */
     size?: number;
-    /** 다운로드 URL */
+    /** 미리보기용 파일 URL */
     url?: string;
+    /** 미리보기 오버레이가 열려있는지 여부 */
+    private previewOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get isImage();
+    private get isVideo();
+    /** 클릭 시 오버레이로 미리볼 수 있는 타입인지 여부 */
+    private get previewable();
     render(): import('lit-html').TemplateResult<1>;
-    private handleDownloadClick;
+    private handleCardClick;
+    private closePreview;
+    private handleKeyDown;
     private handleRemoveClick;
-    /** MIME 타입 → Bootstrap Icon 이름 */
+    /** MIME 타입 → Tabler Icon 이름 */
     private resolveIcon;
     /** 파일명 또는 MIME 타입에서 확장자를 추출합니다. */
     private resolveExt;

package/dist/components/blocks/UFileBlock.js

@@ -1,28 +1,28 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import "../../utilities/icons.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { styles } from "./UFileBlock.styles.js";
-import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";
-import "@iyulab/components/dist/components/spinner/USpinner.js";
-import "@iyulab/components/dist/components/button/UButton.js";
 import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import "@iyulab/components/dist/components/button/UButton.js";
 //#region src/components/blocks/UFileBlock.ts
 var UFileBlock = class UFileBlock extends UElement {
 	constructor(..._args) {
 		super(..._args);
 		this.removable = false;
-		this.handleDownloadClick = (e) => {
-			e.stopPropagation();
-			if (!this.url) return;
-			const a = document.createElement("a");
-			a.href = this.url;
-			a.download = this.name || "unknown-file";
-			a.target = "_blank";
-			a.rel = "noopener noreferrer";
-			document.body.appendChild(a);
-			a.click();
-			a.remove();
+		this.previewOpen = false;
+		this.handleCardClick = () => {
+			if (!this.previewable || this.previewOpen) return;
+			this.previewOpen = true;
+		};
+		this.closePreview = (e) => {
+			e?.stopPropagation();
+			this.previewOpen = false;
+		};
+		this.handleKeyDown = (e) => {
+			if (this.previewOpen && e.key === "Escape") this.closePreview();
 		};
 		this.handleRemoveClick = (e) => {
 			e.stopPropagation();
@@ -32,57 +32,73 @@ var UFileBlock = class UFileBlock extends UElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.handleKeyDown);
+		super.disconnectedCallback();
+	}
+	get isImage() {
+		return !!this.url && !!this.type?.startsWith("image/");
+	}
+	get isVideo() {
+		return !!this.url && !!this.type?.startsWith("video/");
+	}
+	/** 클릭 시 오버레이로 미리볼 수 있는 타입인지 여부 */
+	get previewable() {
+		return this.isImage || this.isVideo;
+	}
 	render() {
 		return html`
-      <div class="thumbnail">
-        <u-spinner 
-          ?hidden=${this.status !== "uploading"}
-        ></u-spinner>  
-        <u-icon
-          ?hidden=${this.status !== "error"}
-          lib="bootstrap" 
-          name="file-earmark-x"
-        ></u-icon>
-        <u-icon
-          ?hidden=${this.status && this.status !== "idle"}
-          lib="bootstrap" 
-          name=${this.resolveIcon(this.type)}
-        ></u-icon>
-        <u-button class="download-btn"
-          ?hidden=${!this.url || this.status === "uploading" || this.status === "error"}
-          title="Download"
-          @click=${this.handleDownloadClick}>
-          <u-icon lib="bootstrap" name="download"></u-icon>
+      <div class="card" @click=${this.handleCardClick}>
+        <div class="thumbnail">
+          ${this.isImage ? html`<img src=${this.url} alt=${this.name || ""} loading="lazy" />` : this.isVideo ? html`<video src="${this.url}#t=0.1" preload="metadata" muted playsinline></video>` : html`<u-icon lib="internal-chat" name=${this.resolveIcon(this.type)}></u-icon>`}
+        </div>
+
+        <div class="info">
+          <div class="name">${this.name}</div>
+          <div class="meta">
+            <span class="type">
+              ${this.resolveExt(this.name, this.type)}
+            </span>
+            <span class="size">
+              ${this.formatSize(this.size || 0)}
+            </span>
+          </div>
+        </div>
+
+        <u-button class="remove-btn"
+          ?hidden=${!this.removable}
+          title="Remove"
+          @click=${this.handleRemoveClick}>
+          <u-icon lib="internal" name="x"></u-icon>
         </u-button>
       </div>
 
-      <div class="info">
-        <div class="name">${this.name}</div>
-        <div class="meta">
-          <span class="type">
-            ${this.resolveExt(this.name, this.type)}
-          </span>
-          <span class="size">
-            ${this.formatSize(this.size || 0)}
-          </span>
+      ${this.previewOpen && this.previewable ? html`
+        <div class="preview-overlay" @click=${this.closePreview}>
+          <header class="preview-header">
+            <span class="preview-name">${this.name}</span>
+            <button class="preview-close" @click=${this.closePreview}>
+              <u-icon lib="internal" name="x"></u-icon>
+            </button>
+          </header>
+          <div class="preview-body" @click=${(e) => e.stopPropagation()}>
+            ${this.isImage ? html`<img src=${this.url} alt=${this.name || ""} />` : html`<video src=${this.url} controls autoplay></video>`}
+          </div>
         </div>
-      </div>
-      
-      <u-button class="remove-btn"
-        ?hidden=${!this.removable}
-        title="Remove"
-        @click=${this.handleRemoveClick}>
-        <u-icon lib="internal" name="x-lg"></u-icon>
-      </u-button>
+      ` : nothing}
     `;
 	}
-	/** MIME 타입 → Bootstrap Icon 이름 */
+	/** MIME 타입 → Tabler Icon 이름 */
 	resolveIcon(mimeType) {
-		if (!mimeType) return "file-earmark";
-		if (mimeType.startsWith("image/")) return "file-earmark-image";
-		if (mimeType.startsWith("video/")) return "file-earmark-play";
-		if (mimeType.startsWith("audio/")) return "file-earmark-music";
-		if (mimeType === "application/pdf") return "file-earmark-pdf";
+		if (!mimeType) return "file";
+		if (mimeType.startsWith("image/")) return "photo";
+		if (mimeType.startsWith("video/")) return "video";
+		if (mimeType.startsWith("audio/")) return "file-music";
+		if (mimeType === "application/pdf") return "file-type-pdf";
 		if ([
 			"application/json",
 			"application/javascript",
@@ -93,12 +109,12 @@ var UFileBlock = class UFileBlock extends UElement {
 			"text/javascript",
 			"text/x-python",
 			"text/x-java-source"
-		].includes(mimeType) || mimeType.startsWith("text/x-")) return "file-earmark-code";
+		].includes(mimeType) || mimeType.startsWith("text/x-")) return "file-code";
 		if ([
 			"application/vnd.ms-excel",
 			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
 			"text/csv"
-		].includes(mimeType)) return "file-earmark-spreadsheet";
+		].includes(mimeType)) return "file-spreadsheet";
 		if ([
 			"application/zip",
 			"application/x-zip-compressed",
@@ -106,9 +122,9 @@ var UFileBlock = class UFileBlock extends UElement {
 			"application/x-rar-compressed",
 			"application/gzip",
 			"application/x-7z-compressed"
-		].includes(mimeType)) return "file-earmark-zip";
-		if (mimeType.startsWith("text/")) return "file-earmark-text";
-		return "file-earmark";
+		].includes(mimeType)) return "file-zip";
+		if (mimeType.startsWith("text/")) return "file-text";
+		return "file";
 	}
 	/** 파일명 또는 MIME 타입에서 확장자를 추출합니다. */
 	resolveExt(name, mimeType) {
@@ -141,14 +157,11 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Object)], UFileBlock.prototype, "removable", void 0);
-__decorate([property({
-	type: String,
-	reflect: true
-}), __decorateMetadata("design:type", String)], UFileBlock.prototype, "status", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFileBlock.prototype, "name", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFileBlock.prototype, "type", void 0);
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UFileBlock.prototype, "size", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFileBlock.prototype, "url", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UFileBlock.prototype, "previewOpen", void 0);
 UFileBlock = __decorate([customElement("u-file-block")], UFileBlock);
 //#endregion
 export { UFileBlock };

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

@@ -2,12 +2,19 @@ import { css } from "lit";
 //#region src/components/blocks/UFileBlock.styles.ts
 var styles = css`
   :host {
+    position: relative;
+    display: block;
+    min-width: 0;
+    max-width: 200px;
+    font-size: 14px;
+  }
+
+  .card {
     position: relative;
     display: flex;
     flex-direction: row;
     align-items: center;
     min-width: 0;
-    max-width: 200px;
     gap: 10px;
     padding: 8px 10px;
     border: 1px solid var(--u-border-color);
@@ -16,17 +23,12 @@ var styles = css`
     overflow: visible;
     cursor: pointer;
     transition: background-color 0.12s ease, border-color 0.12s ease;
-    font-size: 14px;
   }
-  :host(:hover) {
+  .card:hover {
     background-color: var(--u-neutral-100);
     border-color: var(--u-border-color-strong);
   }
 
-  u-icon[name="file-earmark-x"] {
-    color: var(--u-red-600);
-  }
-
   .thumbnail {
     position: relative;
     flex-shrink: 0;
@@ -42,6 +44,14 @@ var styles = css`
     transition: background 0.15s ease;
     overflow: hidden;
   }
+  .thumbnail img,
+  .thumbnail video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+  }
 
   .info {
     flex: 1;
@@ -82,27 +92,6 @@ var styles = css`
     font-variant-numeric: tabular-nums;
   }
 
-  .download-btn {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    color: var(--u-neutral-0);
-    font-size: 14px;
-    border-radius: 6px;
-    background-color: color-mix(in srgb, var(--u-neutral-900) 70%, transparent);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s ease;
-  }
-  .thumbnail:hover .download-btn {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  .download-btn:hover {
-    background-color: color-mix(in srgb, var(--u-neutral-900) 85%, transparent);
-  }
-
   .remove-btn {
     position: absolute;
     z-index: 10;
@@ -116,13 +105,81 @@ var styles = css`
     pointer-events: none;
     transition: opacity 0.12s ease, background-color 0.12s ease;
   }
-  :host(:hover) .remove-btn {
+  .card:hover .remove-btn {
     opacity: 1;
     pointer-events: auto;
   }
   .remove-btn:hover {
     background-color: var(--u-red-600);
   }
+
+  /* ─── 미리보기 오버레이 ─── */
+
+  .preview-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.92);
+    cursor: default;
+    animation: preview-fadeIn 0.2s ease;
+  }
+
+  .preview-header {
+    height: 56px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+  }
+
+  .preview-name {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.875em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .preview-close {
+    flex-shrink: 0;
+    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;
+  }
+  .preview-close:hover  { background: rgba(255, 255, 255, 0.18); }
+  .preview-close:active { background: rgba(255, 255, 255, 0.28); }
+  .preview-close u-icon { color: white; font-size: 1.25em; }
+
+  .preview-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 24px 24px;
+  }
+  .preview-body img,
+  .preview-body video {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 6px;
+  }
+
+  @keyframes preview-fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
 `;
 //#endregion
 export { styles };

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

@@ -18,7 +18,9 @@ export declare class UMarkedBlock extends UElement {
     private parser;
     private placeholder;
     private queued;
-    private timer?;
+    private queuedTimer?;
+    private streaming;
+    private streamingTimer?;
     disconnectedCallback(): void;
     protected shouldUpdate(_changedProperties: PropertyValues): boolean;
     protected willUpdate(changedProperties: PropertyValues): void;

package/dist/components/blocks/UMarkedBlock.js

@@ -1,21 +1,21 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import "./UCodeBlock.js";
+import { escapeHtmlText, stripZeroWidth } from "../../utilities/sanitizers.js";
+import { HtmlBuilder } from "../../utilities/HtmlBuilder.js";
+import { UElementBlock } from "./UElementBlock.js";
 import "../references/URefTag.js";
 import { URefCard } from "../references/URefCard.js";
 import "../references/URefCardGroup.js";
 import { UTableBlock } from "./UTableBlock.js";
-import { UView } from "../views/UView.js";
 import { HtmlPlaceholder } from "../../utilities/HtmlPlaceholder.js";
 import { styles } from "./UMarkedBlock.styles.js";
 import { nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { UElement } from "@iyulab/components/dist/components/UElement.js";
 import { Marked, Parser } from "marked";
 import markedKatex from "marked-katex-extension";
-import { escapeHtmlText, stripZeroWidth } from "@iyulab/components/dist/utilities/sanitizers.js";
-import { buildElementHTML } from "@iyulab/components/dist/utilities/elements.js";
 //#region src/components/blocks/UMarkedBlock.ts
 var UMarkedBlock = class UMarkedBlock extends UElement {
 	constructor(..._args) {
@@ -32,12 +32,14 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 		}).use(markedKatex({ output: "mathml" }));
 		this.placeholder = new HtmlPlaceholder();
 		this.queued = false;
+		this.streaming = false;
 	}
 	static {
 		this.styles = [super.styles, styles];
 	}
 	disconnectedCallback() {
-		clearTimeout(this.timer);
+		clearTimeout(this.queuedTimer);
+		clearTimeout(this.streamingTimer);
 		super.disconnectedCallback();
 	}
 	shouldUpdate(_changedProperties) {
@@ -47,9 +49,14 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has("value")) {
+			this.streaming = true;
+			clearTimeout(this.streamingTimer);
+			this.streamingTimer = window.setTimeout(() => {
+				this.streaming = false;
+			}, 1500);
 			if (this.queued) return;
 			this.queued = true;
-			this.timer = window.setTimeout(() => {
+			this.queuedTimer = window.setTimeout(() => {
 				this.queued = false;
 				this.requestUpdate();
 			}, 80);
@@ -69,15 +76,9 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 	*/
 	renderCode(token) {
 		const lang = token.lang ?? "plaintext";
-		const trimmed = token.raw.trimEnd();
-		const isClosed = trimmed.endsWith("```") || trimmed.endsWith("~~~");
-		if (lang === "view-json") return UView.buildHTML(token.text, { loading: !isClosed });
-		if (lang === "intent-json") return "";
+		if (lang === "block-json") return UElementBlock.buildHTML(token.text, { loading: this.streaming });
 		const safeText = this.removeRefs(token.text);
-		return buildElementHTML("u-code-block", {
-			lang,
-			loading: !isClosed
-		}, safeText);
+		return HtmlBuilder.build("u-code-block", { lang }, safeText);
 	}
 	/**
 	* 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다.
@@ -108,8 +109,11 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 			const label = escapeHtmlText(ref.label ?? `[${refs.indexOf(ref) + 1}]`);
 			const link = sources.at(0)?.url;
 			let tooltip = "";
-			if (sources.length > 0) tooltip = buildElementHTML("u-ref-card-group", { slot: "tooltip" }, sources.map((s) => URefCard.buildHTML(s)).join(""));
-			const html = buildElementHTML("u-ref-tag", { href: link }, label + tooltip);
+			if (sources.length > 0) {
+				const cards = sources.map((s) => URefCard.buildHTML(s)).join("");
+				tooltip = HtmlBuilder.build("u-ref-card-group", { slot: "tooltip" }, cards);
+			}
+			const html = HtmlBuilder.build("u-ref-tag", { href: link }, label + tooltip);
 			const key = this.placeholder.store(html);
 			value = value.slice(0, ref.endIndex) + key + value.slice(ref.endIndex);
 		}
@@ -126,6 +130,7 @@ var UMarkedBlock = class UMarkedBlock extends UElement {
 };
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UMarkedBlock.prototype, "value", void 0);
 __decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UMarkedBlock.prototype, "refs", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UMarkedBlock.prototype, "streaming", void 0);
 UMarkedBlock = __decorate([customElement("u-marked-block")], UMarkedBlock);
 //#endregion
 export { UMarkedBlock };

package/dist/components/blocks/URefBlock.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import "../references/URefCard.js";
 import { styles } from "./URefBlock.styles.js";
 import { html } from "lit";

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

@@ -1,4 +1,4 @@
-import { UDataElement } from '@iyulab/components/dist/components/UDataElement.js';
+import { UDataElement } from '../UDataElement.js';
 /** 테이블 셀 데이터 타입 */
 export interface TableCell {
     /** 셀에 표시할 텍스트 내용 */
@@ -19,7 +19,7 @@ export interface SortState {
  * light DOM 내 `<script type="application/json">` 에서 데이터를 자동으로 읽어냅니다.
  */
 export declare class UTableBlock extends UDataElement {
-    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    static styles: import('lit').CSSResultGroup[];
     /** 테이블 헤더 목록. 각 헤더는 { text, align } 형식입니다. */
     headers: TableCell[];
     /** 테이블 행 목록. 각 행은 셀 배열입니다. */