@iyulab/chat-components 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,151 @@
 # Changelog
 
+## 0.5.0 (2026-04-01)
+
+### Breaking Changes
+
+#### Full rename: Widget → View, Action → Intent
+- **Widget System → View System**: All widget components renamed to views
+  - `UImagesWidget` → `UImagesView`
+  - `UVideoWidget` → `UVideoView`
+  - `UMapWidget` → `UMapView`
+  - `UChartWidget` → `UChartView`
+  - `UWidget` → `UView`
+  - `types/Widgets.ts` → `types/Views.ts` (`WidgetDefinition`, `PresetWidget` → `ViewDefinition`, `PresetView`)
+  - `WidgetPromptBuilder` → `ViewPromptBuilder`
+- **Action System → Intent System**
+  - `UQuestionAction` → `UQuestionIntent`
+  - `types/Actions.ts` → `types/Intents.ts` (`ActionDefinition` → `IntentDefinition`)
+  - `ActionPromptBuilder` → `IntentPromptBuilder`
+
+#### Event type renames
+- `UCancelEvent` → `StopEvent`
+- `USubmitEvent` → `SendEvent`
+- Importing the old names will cause compile errors
+
+#### Block rename
+- `UFilesBlock` → `UFileBlock` (plural → singular)
+- `FilesBlockItem` + `FileItem` → `FileBlockItem` (simplified structure)
+  - `FileUploadStatus` type removed — replaced by `status?: "idle" | "uploading" | "error"` field
+
+#### Removed components
+- `UReportButton`, `URetryButton`, `UShareButton` removed
+
+#### `UToolBlock` property rename
+- `heading` → `title`
+
+#### `package.json` exports change
+- `./dist/*` mapping simplified to a direct `./src/*` mapping
+- `chart.js` moved from `dependencies` to optional `peerDependencies`
+
+### Added
+
+#### New events
+- `AttachEvent` (`attach`) — file attach event (`detail.files: File[]`)
+- `ChoiceEvent` (`choice`) — choice selection event (`detail.value: string`)
+
+#### DOM Agent utilities (`src/utilities/dom-agent/`) — Experimental
+A utility suite enabling LLMs to autonomously interact with web pages (currently disabled in the main index export)
+- `DOMScanner` — scans the DOM and extracts interactive elements (includes Shadow DOM, supports filter strategies)
+- `DOMController` — executes LLM commands (`click`, `input`, `select`, `scroll`, etc.) against the live DOM
+- `DOMAgent` — orchestrates Scanner and Controller into an automation agent (event-driven, execution history)
+- `DOMPromptBuilder` — builds LLM prompts and formats multimodal messages (Anthropic / OpenAI)
+
+#### React bindings
+- Added `./react` package export entry point
+- `@lit/react` and `react` added as optional peerDependencies
+
+#### html2canvas dependency
+- Added `html2canvas` for screenshot capture support
+
+#### Type improvements
+- `ThinkingBlockItem`: added `loading?: boolean` field
+- `ToolBlockItem`: added `loading?: boolean` field
+
+#### Skills documentation
+- `skills/iyulab-chat-components/` — full component reference and utility docs added
+
+### Changed
+
+#### Component file structure consolidation
+- Split `.component.ts` + `.ts` pattern → merged into a single `.ts` file per component
+- Component registration switched to `@customElement()` decorator
+
+#### Bug fix
+- `UTableBlock`: fixed inline markdown (**bold**, `` `code` ``, `<br>`, etc.) inside table cells rendering as raw text (now uses `Parser.parseInline()`)
+
+#### `UThinkBlock` improvements
+- Added `auto-scroll` attribute — automatically scrolls to bottom when `value` changes
+- Added public `scrollToBottom()` method
+- Auto-scroll is now interrupted by wheel or touch input
+
+#### Dependency updates
+- `@iyulab/components`: `^0.4.0` → `^1.0.1`
+- `marked`: `^17.0.3` → `^17.0.5`
+- `vite`: `^7.3.1` → `^8.0.3`
+- `openai` (dev): `^6.25.0` → `^6.33.0`
+
+#### Documentation overhaul
+- `README.md` fully rewritten with detailed API documentation
+- New `docs/` pages: architecture, block system, events, intent system, view system
+- Old `docs/components/` files removed
+
+### Removed
+- `UReportButton`, `URetryButton`, `UShareButton`
+- `UCancelEvent`, `USubmitEvent` (→ `StopEvent`, `SendEvent`)
+- `UQuestionAction` (→ `UQuestionIntent`)
+- `UWidget`, `UImagesWidget`, `UVideoWidget`, `UMapWidget`, `UChartWidget` (→ View equivalents)
+- `ActionPromptBuilder`, `WidgetPromptBuilder` (→ `IntentPromptBuilder`, `ViewPromptBuilder`)
+- `types/Actions.ts`, `types/Widgets.ts` (→ `types/Intents.ts`, `types/Views.ts`)
+- `utilities/converters.ts` (moved to `@iyulab/components`)
+- `TODO.md`
+- All `.component.ts` split files
+
+---
+
+## 0.4.0 (2026-03-03)
+
+### Breaking Changes
+- `UMessage`: `items` prop removed — block components must now be inserted directly via slots
+- `UMessage`: base class changed from `BaseElement` to `UElement`
+
+### Added
+
+#### Widget System
+- `UWidget` — widget container component (dynamic rendering from `widget-json` blocks)
+- `UImagesWidget` — scrollable image gallery widget
+- `UVideoWidget` — video embed widget (YouTube, Vimeo, and direct URL support)
+- `UMapWidget` — OpenStreetMap-based map widget (lat/lng coordinates and marker display)
+- `UChartWidget` — Chart.js chart widget (8 types: bar, line, pie, doughnut, etc.; PNG/JSON download, fullscreen, auto dark-mode theme detection)
+
+#### Action System
+- `UQuestionAction` — clickable question choices component (rendered from `action-json` block)
+
+#### New Block Types
+- `UFilesBlock` — file attachment list block (filename, size, MIME type, download URL, optional delete button)
+- `UTableBlock` — table display block
+
+#### New Types
+- `JsonSchema` — JSON Schema types for LLM use (`BooleanJsonSchema`, `StringJsonSchema`, `NumberJsonSchema`, `ArrayJsonSchema`, `ObjectJsonSchema`)
+- `ActionDefinition`, `ActionSchema`, `PresetAction` — action definition and preset types
+- `WidgetDefinition`, `PresetWidget` — widget definition and preset types (`Images`, `Video`, `Map`, `Chart`)
+- `FilesBlockItem`, `FileItem` — file block types
+- `MessageFit` — message width setting type (`full` | `auto`)
+
+#### New Utilities
+- `ActionPromptBuilder` — utility for auto-generating LLM action prompts
+- `WidgetPromptBuilder` — utility for auto-generating LLM widget prompts
+
+### Changed
+- `UMessage`: migrated from `BaseElement` to `UElement`, removed `items` prop in favour of slot-based rendering, added `fit` attribute (`MessageFit`)
+- `UMarkedBlock`: markdown rendering logic fully reworked
+- `UPrompt`: style improvements
+
+### Removed
+- `UDotLoader` component removed
+
+---
+
 ## 0.3.0 (2026-01-22)
 
 - Renamed `TextBlockReference` to `ReferenceCitation` and field `name` to `label`

package/README.md

@@ -1,6 +1,11 @@
-# @iyulab/chat-components
+# @iyulab/chat-components
 
-LLM 채팅 인터페이스를 위한 웹 컴포넌트 라이브러리
+Web component library for building LLM chat interfaces — works in any framework or vanilla HTML.
+
+[![npm](https://img.shields.io/npm/v/@iyulab/chat-components)](https://www.npmjs.com/package/@iyulab/chat-components)
+[![license](https://img.shields.io/npm/l/@iyulab/chat-components)](./LICENSE)
+
+---
 
 ## Installation
 
@@ -8,29 +13,141 @@ LLM 채팅 인터페이스를 위한 웹 컴포넌트 라이브러리
 npm install @iyulab/chat-components
 ```
 
-## Usage
+---
+
+## Quick Start
 
-```typescript
+```ts
 import '@iyulab/chat-components';
 ```
 
+```html
+<u-message>
+  <u-marked-block value="# Hello&#10;&#10;This is **markdown**."></u-marked-block>
+</u-message>
+
+<u-prompt placeholder="Type a message...">
+  <u-attach-button slot="left-actions" multiple>Attach</u-attach-button>
+</u-prompt>
+```
+
+```ts
+const prompt = document.querySelector('u-prompt');
+
+prompt.addEventListener('send', () => {
+  console.log('value:', prompt.value);
+  console.log('files:', prompt.files);
+});
+```
+
+> For a complete setup guide, see **[docs/getting-started.md](./docs/getting-started.md)**.
+
+---
+
+## Skills Usage
+
+Skills for LLM coding agents (Claude Code, GitHub Copilot, Cursor, etc.).
+
+```bash
+# Install from GitHub
+npx skills add iyulab/node-chat-components
+
+# Reference locally after package install
+npx skills add ./node_modules/@iyulab/chat-components
+```
+
+---
+
 ## Components
 
-- `u-message` - 메시지 컴포넌트
-- `u-code-block` - 코드 블록
-- `u-marked-block` - 마크다운 렌더링
-- `u-text-block` - 텍스트 블록
-- `u-think-block` - 추론 과정 표시
-- `u-tool-block` - 도구 호출 표시
-- `u-attach-button` - 파일 첨부
-- `u-copy-button` - 복사 버튼
-- `u-send-button` - 전송 버튼
-- `u-think-button` - 추론 레벨 설정
+### Message & Input
+
+| Tag | Description |
+|-----|-------------|
+| `u-message` | Chat message wrapper. Slot-based block layout, loading animation, bubble/default styles |
+| `u-prompt` | Chat input. Auto-resize textarea, file attachment preview, integrated send/stop button |
+
+### Content Blocks
+
+| Tag | Description |
+|-----|-------------|
+| `u-marked-block` | Markdown renderer — KaTeX, code highlighting, citation injection, view-json/intent-json handling |
+| `u-code-block` | Syntax-highlighted code block (Highlight.js) with language label and copy button |
+| `u-text-block` | Plain text display or editable textarea |
+| `u-think-block` | LLM reasoning block — collapse/expand, auto-scroll |
+| `u-tool-block` | Tool call input/output display — collapse/expand |
+| `u-file-block` | File card — type icon, upload status, download, remove |
+| `u-ref-block` | Reference source group — collapse/expand, card grid |
+| `u-json-block` | Collapsible JSON tree |
+| `u-table-block` | Table — column sort, search, CSV/XLS download |
+
+### Action Buttons
+
+| Tag | Description |
+|-----|-------------|
+| `u-copy-button` | Copies text to clipboard; icon confirms copy |
+| `u-vote-button` | Thumbs-up / thumbs-down vote pair |
+| `u-attach-button` | Opens file picker; fires `attach` event |
+
+---
+
+## Intent & View Systems
+
+```ts
+import { IntentPromptBuilder, ViewPromptBuilder, PresetIntent, PresetView } from '@iyulab/chat-components';
+
+// Build system prompt instructions
+const intentInstructions = IntentPromptBuilder.instance.use(PresetIntent.Questions).build();
+const viewInstructions   = ViewPromptBuilder.instance.use(PresetView.All).build();
+
+const systemPrompt = `You are a helpful assistant.\n\n${intentInstructions}\n\n${viewInstructions}`;
+
+// Parse LLM response
+const [intents, cleanText] = IntentPromptBuilder.instance.parse(llmResponse);
+markedBlock.value = cleanText;  // view-json blocks inside are rendered automatically
+
+for (const intent of intents) {
+  if (intent.type === 'question') {
+    const el = document.createElement('u-question-intent') as any;
+    el.question = intent.properties?.question;
+    el.choices  = intent.properties?.choices ?? [];
+    el.addEventListener('choice', (e: any) => { prompt.value = e.detail.value; prompt.submit(); });
+    msg.appendChild(el);
+  }
+}
+```
+
+> - Intent system details: **[docs/intent-system.md](./docs/intent-system.md)**
+> - View system details: **[docs/view-system.md](./docs/view-system.md)**
+
+---
+
+## Events
+
+| Event | Source | Detail | Description |
+|-------|--------|--------|-------------|
+| `send` | `u-prompt` | — | Send button clicked or Enter pressed |
+| `stop` | `u-prompt` | — | Stop button clicked while loading |
+| `attach` | `u-attach-button` | `{ files: File[] }` | File selection completed |
+| `choice` | `u-question-intent` | `{ value: string }` | Choice button clicked |
+| `change` | `u-vote-button` | — | Vote state changed |
+| `remove` | `u-file-block` | — | Remove button clicked |
+
+---
 
 ## Documentation
 
-자세한 사용법은 [docs](./docs/README.md)를 참고하세요.
+| File | Description |
+|------|-------------|
+| [docs/getting-started.md](./docs/getting-started.md) | Installation, basic chat UI, streaming, history rendering |
+| [docs/architecture.md](./docs/architecture.md) | Package structure, class hierarchy, rendering pipeline |
+| [docs/block-system.md](./docs/block-system.md) | Block components and `BlockItem` types in depth |
+| [docs/intent-system.md](./docs/intent-system.md) | Intent system setup and custom intents |
+| [docs/view-system.md](./docs/view-system.md) | View system setup and custom views |
+| [docs/events.md](./docs/events.md) | Full event reference |
+
+---
 
 ## License
 
-MIT
+MIT © iyulab

package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate };

package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js

@@ -0,0 +1,6 @@
+//#region \0@oxc-project+runtime@0.122.0/helpers/decorateMetadata.js
+function __decorateMetadata(k, v) {
+	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+//#endregion
+export { __decorateMetadata };

package/dist/_virtual/_glob-assets_raw/intent-prompt.md.1907474e.js

@@ -0,0 +1,4 @@
+//#region \0glob-assets_raw/intent-prompt.md.1907474e
+var intent_prompt_md_default = "## Interactive Intents\n\nYou can guide the user with interactive intents by appending `intent-json` fenced code blocks at the end of your response. These intents can suggest follow-up questions, offer buttons to click, or provide other interactive elements that help the user continue the conversation.\n\n**Output format (the fence language must be `intent-json`):**\n```intent-json\n{\n  \"type\": \"intent-type-here\",\n  \"properties\" : {\n    \"key\": \"value\"\n  }\n}\n```\n\n**Rules — follow these STRICTLY. Violation means the feature will not work:**\n1. The fenced block language identifier must be `intent-json`, not `json` or anything else.\n2. `type` must be one of the exact strings listed below. Do not invent new types.\n3. place ALL intent blocks at the very end of your response, after all prose content.\n4. Output valid JSON only — no comments, no trailing commas, etc.\n\n---\n\n{{INTENT_DOCS}}\n";
+//#endregion
+export { intent_prompt_md_default as default };

package/dist/_virtual/_glob-assets_raw/view-prompt.md.e0dbcffe.js

@@ -0,0 +1,4 @@
+//#region \0glob-assets_raw/view-prompt.md.e0dbcffe
+var view_prompt_md_default = "## Renderable Views\n\nYou can render interactive visual views inside your response.\nWhen a view would make your answer clearer or more useful, output a `view-json` fenced code block.\n\n**Output format (the fence language must be `view-json`):**\n```view-json\n{\n  \"tag\": \"view-tag-here\",\n  \"properties\": {\n    \"key\": \"value\"\n  }\n}\n```\n\n**Rules — follow these strictly:**\n1. The fenced block language identifier must be `view-json`, not `json` or anything else.\n2. `tag` must be one of the exact strings listed below. Never invent a tag.\n3. Output valid JSON — no comments, no trailing commas.\n\n---\n\n{{VIEW_DOCS}}\n";
+//#endregion
+export { view_prompt_md_default as default };

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

@@ -1,7 +1,29 @@
-import { UCodeBlock } from './UCodeBlock.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 코드 블록을 렌더링하는 컴포넌트입니다.
+ * 언어와 코드를 받아 syntax highlighting을 적용합니다.
+ */
+export declare class UCodeBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 코드 블록이 로딩 중인지 여부를 나타냅니다. */
+    loading: boolean;
+    /** 코드 블록의 헤더를 숨길지 여부를 지정합니다. */
+    headless: boolean;
+    /** 코드 언어를 지정합니다. */
+    lang: string;
+    /** 표시할 코드 내용입니다. */
+    value?: string;
+    /** 클립보드 복사 상태를 나타내는 플래그입니다. */
+    isCopied: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * slot에 할당된 코드를 value로 설정합니다.
+     * 이 기능을 통해 HTML 내에 직접 코드를 작성할 수 있습니다.
+     */
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-code-block": UCodeBlock;
     }
 }
-export { UCodeBlock };

package/dist/components/blocks/UCodeBlock.js

@@ -1,5 +1,68 @@
-import { UCodeBlock } from './UCodeBlock.component.js';
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../buttons/UCopyButton.js";
+import { styles } from "./UCodeBlock.styles.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import hljs from "highlight.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/spinner/USpinner.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/blocks/UCodeBlock.ts
+var UCodeBlock = class UCodeBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.loading = false;
+		this.headless = false;
+		this.lang = "plaintext";
+		this.isCopied = false;
+		this.handleSlotChange = (e) => {
+			this.value = e.target.assignedNodes({ flatten: true }).map((node) => node.textContent).join("\n\n");
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		const lang = hljs.getLanguage(this.lang) ? this.lang : "plaintext";
+		const value = this.value || "";
+		return html`
+      <div class="header" ?hidden=${this.headless}>
+        <span class="status">
+          ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon lib="bootstrap" name="code-slash"></u-icon>`}
+        </span>
+        <span class="lang">
+          ${lang}
+        </span>
+        <div style="flex: 1"></div>
+        <u-copy-button
+          .value=${value}
+        ></u-copy-button>
+      </div>
 
-UCodeBlock.define("u-code-block");
+      <pre class="hljs">${unsafeHTML(hljs.highlight(value, { language: lang }).value)}</pre>
 
+      <div hidden aria-hidden="true">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCodeBlock.prototype, "loading", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCodeBlock.prototype, "headless", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], UCodeBlock.prototype, "lang", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeBlock.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UCodeBlock.prototype, "isCopied", void 0);
+UCodeBlock = __decorate([customElement("u-code-block")], UCodeBlock);
+//#endregion
 export { UCodeBlock };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UCodeBlock.styles.ts
+var styles = css`
   :host {
     --hljs-text-color: #24292e;
     --hljs-background-color: #ffffff;
@@ -51,9 +51,15 @@ const styles = css`
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    gap: 12px;
     margin-bottom: 12px;
     user-select: none;
   }
+  .header .status {
+    display: inline-flex;
+    font-size: 12px;
+    color: var(--u-txt-color-strong);
+  }
   .header .lang {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
@@ -172,5 +178,5 @@ const styles = css`
     color: currentColor;
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -0,0 +1,33 @@
+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?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleDownloadClick;
+    private handleRemoveClick;
+    /** MIME 타입 → Bootstrap Icon 이름 */
+    private resolveIcon;
+    /** 파일명 또는 MIME 타입에서 확장자를 추출합니다. */
+    private resolveExt;
+    /** bytes → 읽기 좋은 크기 문자열 */
+    private formatSize;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-file-block": UFileBlock;
+    }
+}

package/dist/components/blocks/UFileBlock.js

@@ -0,0 +1,154 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UFileBlock.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/spinner/USpinner.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.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.handleRemoveClick = (e) => {
+			e.stopPropagation();
+			if (this.fire("remove")) this.remove();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	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>
+        </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>
+        </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>
+    `;
+	}
+	/** MIME 타입 → Bootstrap 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 ([
+			"application/json",
+			"application/javascript",
+			"application/typescript",
+			"application/xml",
+			"text/html",
+			"text/css",
+			"text/javascript",
+			"text/x-python",
+			"text/x-java-source"
+		].includes(mimeType) || mimeType.startsWith("text/x-")) return "file-earmark-code";
+		if ([
+			"application/vnd.ms-excel",
+			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+			"text/csv"
+		].includes(mimeType)) return "file-earmark-spreadsheet";
+		if ([
+			"application/zip",
+			"application/x-zip-compressed",
+			"application/x-tar",
+			"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";
+	}
+	/** 파일명 또는 MIME 타입에서 확장자를 추출합니다. */
+	resolveExt(name, mimeType) {
+		if (name) {
+			const dot = name.lastIndexOf(".");
+			if (dot !== -1 && dot < name.length - 1) return name.slice(dot + 1).toLowerCase();
+		}
+		return mimeType ? {
+			"image/jpeg": "jpg",
+			"image/png": "png",
+			"image/gif": "gif",
+			"image/webp": "webp",
+			"image/svg+xml": "svg",
+			"application/pdf": "pdf",
+			"text/plain": "txt",
+			"text/csv": "csv",
+			"application/json": "json",
+			"application/zip": "zip"
+		}[mimeType] ?? mimeType.split("/").pop() ?? "" : "";
+	}
+	/** bytes → 읽기 좋은 크기 문자열 */
+	formatSize(bytes) {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+		if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+		return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+	}
+};
+__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);
+UFileBlock = __decorate([customElement("u-file-block")], UFileBlock);
+//#endregion
+export { UFileBlock };