@iyulab/chat-components 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,45 +1,148 @@
 # 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이 제거됨 — slot 방식으로 블록 컴포넌트를 직접 삽입해야 함
-- `UMessage`의 `BaseElement` 의존성이 `UElement`로 변경됨
+- `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-json 블록 기반 동적 렌더링)
-- `UImagesWidget` - 이미지 갤러리 위젯 (스크롤 가능한 이미지 목록 표시)
-- `UVideoWidget` - 비디오 임베드 위젯 (YouTube, Vimeo, 직접 URL 지원)
-- `UMapWidget` - OpenStreetMap 기반 지도 위젯 (위경도 좌표 및 마커 표시)
-- `UChartWidget` - Chart.js 기반 차트 위젯 (bar, line, pie, doughnut 등 8가지 타입, PNG/JSON 다운로드, 전체화면, 다크모드 테마 자동 감지)
+- `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` - 클릭 가능한 선택지를 제공하는 질문 액션 컴포넌트 (action-json 블록 기반)
+- `UQuestionAction` — clickable question choices component (rendered from `action-json` block)
 
 #### New Block Types
-- `UFilesBlock` - 파일 첨부 목록 표시 블록 (파일명, 크기, MIME 타입, 다운로드 URL 지원, 삭제 버튼 옵션)
-- `UTableBlock` - 테이블 표시 블록
+- `UFilesBlock` — file attachment list block (filename, size, MIME type, download URL, optional delete button)
+- `UTableBlock` — table display block
 
 #### New Types
-- `JsonSchema` - LLM용 JSON Schema 타입 (`BooleanJsonSchema`, `StringJsonSchema`, `NumberJsonSchema`, `ArrayJsonSchema`, `ObjectJsonSchema`)
-- `ActionDefinition`, `ActionSchema`, `PresetAction` - 액션 정의 및 프리셋 타입
-- `WidgetDefinition`, `PresetWidget` - 위젯 정의 및 프리셋 타입 (`Images`, `Video`, `Map`, `Chart`)
-- `FilesBlockItem`, `FileItem` - 파일 블록 타입
-- `MessageFit` - 메시지 너비 설정 타입 (`full` | `auto`)
+- `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` - LLM 액션 프롬프트 자동 생성 유틸리티
-- `WidgetPromptBuilder` - LLM 위젯 프롬프트 자동 생성 유틸리티
+- `ActionPromptBuilder` — utility for auto-generating LLM action prompts
+- `WidgetPromptBuilder` — utility for auto-generating LLM widget prompts
 
 ### Changed
-- `UMessage`: `BaseElement` → `UElement` 로 변경, `items` prop 제거 및 slot 기반 렌더링으로 전환, `fit` 속성(`MessageFit`) 추가
-- `UMarkedBlock`: 마크다운 렌더링 로직 전면 개선
-- `UPrompt`: 스타일 개선
+- `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` 컴포넌트 제거
+- `UDotLoader` component removed
 
 ---
 

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;
@@ -178,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;
+    }
+}