@composy/chat-core 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,8 +1,8 @@
 /*!
 * ***********************************
-* @composy/chat-core v0.0.1       *
+* @composy/chat-core v0.0.2       *
 * Built with rollup               *
-* Build time: 2024-08-17 11:30:32 *
+* Build time: 2024-10-12 21:52:18 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -11,6 +11,415 @@
 	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignChat = {}));
 })(this, function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/constants/dom.ts
+	const DEFAULT_CLASS_PREFIX = "ldesign-chat";
+	const COMPONENT_CSS_VAR_PREFIX = "--ldesign-chat";
+	const STYLE_ELEMENT_ID = "ldesign-chat-styles";
+	function normalizeClassPrefix(prefix) {
+		const trimmed = prefix?.trim();
+		if (!trimmed) return DEFAULT_CLASS_PREFIX;
+		const safeSuffix = trimmed.replace(/^ldesign-/i, "").replace(/[^\w-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+		return safeSuffix ? `ldesign-${safeSuffix}` : DEFAULT_CLASS_PREFIX;
+	}
+	function getStyleElementId(prefix = DEFAULT_CLASS_PREFIX) {
+		const normalized = normalizeClassPrefix(prefix);
+		return normalized === "ldesign-chat" ? STYLE_ELEMENT_ID : `${normalized}-styles`;
+	}
+	function cx(...classes) {
+		return classes.filter(Boolean).join(" ");
+	}
+	//#endregion
+	//#region src/types/index.ts
+	const CHAT_MESSAGE_SCHEMA_VERSION = 1;
+	//#endregion
+	//#region src/core/message-schema.ts
+	function normalizeChatMessage(message) {
+		if (!message || typeof message !== "object") throw new TypeError("Chat message must be an object.");
+		if (typeof message.id !== "string" || !message.id.trim()) throw new TypeError("Chat message ID must be a non-empty string.");
+		if (!Number.isFinite(message.timestamp)) throw new TypeError("Chat message timestamp must be finite.");
+		const schemaVersion = message.schemaVersion ?? 1;
+		if (schemaVersion > 1) throw new Error(`Unsupported chat message schema version: ${schemaVersion}.`);
+		return cloneChatMessage({
+			...message,
+			schemaVersion: 1,
+			...message.contentBlocks && { contentBlocks: normalizeChatContentBlocks(message.contentBlocks) }
+		});
+	}
+	function normalizeChatContentBlocks(blocks) {
+		const normalized = [];
+		for (const value of blocks) {
+			const block = normalizeContentBlock(value);
+			if (block) normalized.push(block);
+		}
+		return normalized;
+	}
+	function normalizeChatMessages(messages) {
+		const result = [];
+		const ids = /* @__PURE__ */ new Set();
+		const clientIds = /* @__PURE__ */ new Set();
+		for (const message of messages) {
+			const normalized = normalizeChatMessage(message);
+			if (ids.has(normalized.id)) throw new Error(`Duplicate chat message ID: ${normalized.id}`);
+			if (normalized.clientMessageId && clientIds.has(normalized.clientMessageId)) throw new Error(`Duplicate chat client message ID: ${normalized.clientMessageId}`);
+			ids.add(normalized.id);
+			if (normalized.clientMessageId) clientIds.add(normalized.clientMessageId);
+			result.push(normalized);
+		}
+		return result;
+	}
+	function cloneChatMessage(message) {
+		return {
+			...message,
+			sender: cloneUser(message.sender),
+			...message.image && { image: cloneImage(message.image) },
+			...message.file && { file: cloneFile(message.file) },
+			...message.mentions && { mentions: message.mentions.map(cloneMention) },
+			...message.contentBlocks && { contentBlocks: message.contentBlocks.map(cloneContentBlock) },
+			...message.customData && { customData: cloneRecord(message.customData) }
+		};
+	}
+	function compareChatMessages(left, right) {
+		if (Number.isFinite(left.sequence) && Number.isFinite(right.sequence) && left.sequence !== right.sequence) return left.sequence - right.sequence;
+		if (left.timestamp !== right.timestamp) return left.timestamp - right.timestamp;
+		return left.id.localeCompare(right.id);
+	}
+	function cloneContentBlock(block) {
+		switch (block.type) {
+			case "text": return {
+				type: "text",
+				text: block.text
+			};
+			case "mention": return {
+				type: "mention",
+				id: block.id,
+				label: block.label
+			};
+			case "link": return {
+				type: "link",
+				url: block.url,
+				...block.label && { label: block.label }
+			};
+			case "code": return {
+				type: "code",
+				code: block.code,
+				...block.language && { language: block.language }
+			};
+			case "image": return {
+				type: "image",
+				src: block.src,
+				...block.alt && { alt: block.alt },
+				...block.width !== void 0 && { width: block.width },
+				...block.height !== void 0 && { height: block.height }
+			};
+			case "file": return {
+				type: "file",
+				url: block.url,
+				name: block.name,
+				...block.size !== void 0 && { size: block.size },
+				...block.mimeType && { mimeType: block.mimeType }
+			};
+			case "break": return { type: "break" };
+			case "custom": return {
+				type: "custom",
+				kind: block.kind,
+				data: cloneRecord(block.data),
+				...block.fallback && { fallback: block.fallback }
+			};
+		}
+	}
+	function normalizeContentBlock(value) {
+		if (!isRecord(value) || typeof value.type !== "string") return null;
+		switch (value.type) {
+			case "text": return typeof value.text === "string" ? {
+				type: "text",
+				text: value.text
+			} : null;
+			case "mention": return typeof value.id === "string" && typeof value.label === "string" ? {
+				type: "mention",
+				id: value.id,
+				label: value.label
+			} : null;
+			case "link": return typeof value.url === "string" ? {
+				type: "link",
+				url: value.url,
+				...typeof value.label === "string" && { label: value.label }
+			} : null;
+			case "code": return typeof value.code === "string" ? {
+				type: "code",
+				code: value.code,
+				...typeof value.language === "string" && { language: value.language }
+			} : null;
+			case "image": return typeof value.src === "string" ? {
+				type: "image",
+				src: value.src,
+				...typeof value.alt === "string" && { alt: value.alt },
+				...isPositiveNumber(value.width) && { width: value.width },
+				...isPositiveNumber(value.height) && { height: value.height }
+			} : null;
+			case "file": return typeof value.url === "string" && typeof value.name === "string" ? {
+				type: "file",
+				url: value.url,
+				name: value.name,
+				...isPositiveNumber(value.size) && { size: value.size },
+				...typeof value.mimeType === "string" && { mimeType: value.mimeType }
+			} : null;
+			case "break": return { type: "break" };
+			case "custom": return typeof value.kind === "string" && isRecord(value.data) ? {
+				type: "custom",
+				kind: value.kind,
+				data: cloneRecord(value.data),
+				...typeof value.fallback === "string" && { fallback: value.fallback }
+			} : fallbackBlock(value);
+			default: return fallbackBlock(value);
+		}
+	}
+	function fallbackBlock(value) {
+		return typeof value.fallback === "string" ? {
+			type: "text",
+			text: value.fallback
+		} : null;
+	}
+	function isRecord(value) {
+		return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+	}
+	function isPositiveNumber(value) {
+		return typeof value === "number" && Number.isFinite(value) && value > 0;
+	}
+	function cloneUser(user) {
+		return { ...user };
+	}
+	function cloneMention(mention) {
+		return { ...mention };
+	}
+	function cloneImage(image) {
+		return { ...image };
+	}
+	function cloneFile(file) {
+		return { ...file };
+	}
+	function cloneRecord(value, seen = /* @__PURE__ */ new WeakMap()) {
+		if (!value || typeof value !== "object") return value;
+		if (seen.has(value)) return seen.get(value);
+		if (Array.isArray(value)) {
+			const clone2 = [];
+			seen.set(value, clone2);
+			value.forEach((item) => clone2.push(cloneRecord(item, seen)));
+			return clone2;
+		}
+		const prototype = Object.getPrototypeOf(value);
+		if (prototype !== Object.prototype && prototype !== null) return value;
+		const clone = {};
+		seen.set(value, clone);
+		Object.entries(value).forEach(([key, item]) => {
+			clone[key] = cloneRecord(item, seen);
+		});
+		return clone;
+	}
+	//#endregion
+	//#region src/core/chat-manager.ts
+	var ChatManager = class {
+		constructor(emitter, initialMessages) {
+			this.messages = [];
+			this.streams = /* @__PURE__ */ new Map();
+			this.emitter = emitter;
+			if (initialMessages?.length) this.messages = normalizeChatMessages(initialMessages);
+		}
+		getMessages() {
+			return this.messages.map(cloneChatMessage);
+		}
+		getMessage(id) {
+			const message = this.messages.find((item) => item.id === id);
+			return message ? cloneChatMessage(message) : void 0;
+		}
+		getMessageIdByClientMessageId(clientMessageId) {
+			return this.messages.find((message) => message.clientMessageId === clientMessageId)?.id;
+		}
+		addMessage(message) {
+			const storedMessage = normalizeChatMessage(message);
+			this.assertUniqueIds([storedMessage]);
+			this.messages.push(storedMessage);
+			this.emitAdded(storedMessage);
+		}
+		prependMessages(messages) {
+			const storedMessages = normalizeChatMessages(messages);
+			this.assertUniqueIds(storedMessages);
+			this.messages.unshift(...storedMessages);
+			this.emitter.emit("messages-prepended", storedMessages.map(cloneChatMessage));
+			this.emitChanged();
+		}
+		/** 合并本地 ack 或远端推送，按 id/clientMessageId 去重并拒绝旧 sequence。 */
+		upsertMessage(message, options = {}) {
+			const normalized = normalizeChatMessage({
+				...message,
+				...options.sequence !== void 0 && { sequence: options.sequence }
+			});
+			const index = this.findMessageIndex(normalized);
+			if (index < 0) {
+				this.messages.push(normalized);
+				this.emitAdded(normalized);
+				return "added";
+			}
+			const current = this.messages[index];
+			if (Number.isFinite(normalized.sequence) && Number.isFinite(current.sequence) && normalized.sequence <= current.sequence) return "ignored";
+			const merged = normalizeChatMessage({
+				...current,
+				...normalized,
+				id: current.id,
+				clientMessageId: normalized.clientMessageId ?? current.clientMessageId,
+				sequence: normalized.sequence ?? current.sequence
+			});
+			this.messages[index] = merged;
+			this.emitter.emit("message-updated", cloneChatMessage(merged));
+			this.emitChanged();
+			return "updated";
+		}
+		mergeMessages(messages, options = {}) {
+			const result = {
+				added: 0,
+				updated: 0,
+				ignored: 0
+			};
+			for (const message of messages) {
+				const outcome = this.upsertMessage(message, options);
+				result[outcome] += 1;
+			}
+			return result;
+		}
+		updateMessage(id, updates) {
+			const index = this.messages.findIndex((message) => message.id === id);
+			if (index === -1) return;
+			if (updates.id !== void 0 && updates.id !== id) throw new Error("Chat message IDs are immutable.");
+			const next = normalizeChatMessage({
+				...this.messages[index],
+				...updates,
+				id
+			});
+			this.assertUniqueClientMessageId(next, id);
+			this.messages[index] = next;
+			this.emitter.emit("message-updated", cloneChatMessage(next));
+			this.emitChanged();
+		}
+		markMessageStatus(id, status) {
+			this.updateMessage(id, { status });
+		}
+		removeMessage(id) {
+			const index = this.messages.findIndex((message) => message.id === id);
+			if (index === -1) return;
+			const [removed] = this.messages.splice(index, 1);
+			this.streams.delete(id);
+			this.emitter.emit("message-removed", cloneChatMessage(removed));
+			this.emitChanged();
+		}
+		setMessages(messages) {
+			this.messages = normalizeChatMessages(messages);
+			this.streams.clear();
+			this.emitChanged();
+		}
+		clearMessages() {
+			this.messages = [];
+			this.streams.clear();
+			this.emitChanged();
+		}
+		beginStreaming(id, generation = createGeneration()) {
+			const index = this.messages.findIndex((message) => message.id === id);
+			if (index === -1) return null;
+			this.streams.set(id, {
+				generation,
+				lastSequence: -1
+			});
+			this.messages[index] = normalizeChatMessage({
+				...this.messages[index],
+				streaming: true
+			});
+			this.emitter.emit("message-updated", cloneChatMessage(this.messages[index]));
+			this.emitChanged();
+			return generation;
+		}
+		appendMessageContent(id, chunk, options = {}) {
+			const stream = this.streams.get(id);
+			if (options.generation) {
+				if (!stream || stream.generation !== options.generation) return false;
+				const sequence = options.sequence;
+				if (sequence !== void 0 && Number.isFinite(sequence) && sequence <= stream.lastSequence) return false;
+				if (sequence !== void 0 && Number.isFinite(sequence)) stream.lastSequence = sequence;
+			}
+			const index = this.messages.findIndex((message2) => message2.id === id);
+			if (index === -1) return false;
+			const message = this.messages[index];
+			this.messages[index] = normalizeChatMessage({
+				...message,
+				content: (message.content ?? "") + chunk,
+				streaming: options.generation ? true : message.streaming
+			});
+			this.emitter.emit("message-content-appended", id, this.messages[index].content, options.generation, options.sequence);
+			this.emitChanged();
+			return true;
+		}
+		finishStreaming(id, generation) {
+			const stream = this.streams.get(id);
+			if (generation && (!stream || stream.generation !== generation)) return false;
+			const index = this.messages.findIndex((message) => message.id === id);
+			if (index === -1) return false;
+			this.messages[index] = normalizeChatMessage({
+				...this.messages[index],
+				streaming: false
+			});
+			this.streams.delete(id);
+			this.emitter.emit("message-updated", cloneChatMessage(this.messages[index]));
+			this.emitChanged();
+			return true;
+		}
+		cancelStreaming(id, generation) {
+			const stream = this.streams.get(id);
+			if (generation && (!stream || stream.generation !== generation)) return false;
+			const index = this.messages.findIndex((message) => message.id === id);
+			if (index === -1) return false;
+			this.streams.delete(id);
+			this.messages[index] = normalizeChatMessage({
+				...this.messages[index],
+				streaming: false
+			});
+			this.emitter.emit("stream-cancelled", cloneChatMessage(this.messages[index]));
+			this.emitter.emit("message-updated", cloneChatMessage(this.messages[index]));
+			this.emitChanged();
+			return true;
+		}
+		getStreamGeneration(id) {
+			return this.streams.get(id)?.generation;
+		}
+		findMessageIndex(message) {
+			const byId = this.messages.findIndex((item) => item.id === message.id);
+			if (byId >= 0) return byId;
+			if (!message.clientMessageId) return -1;
+			return this.messages.findIndex((item) => item.clientMessageId === message.clientMessageId);
+		}
+		assertUniqueIds(messages) {
+			const ids = new Set(this.messages.map((message) => message.id));
+			const clientIds = new Set(this.messages.flatMap((message) => message.clientMessageId ? [message.clientMessageId] : []));
+			for (const message of messages) {
+				if (!message.id || ids.has(message.id)) throw new Error(`Chat message ID must be non-empty and unique: ${message.id}`);
+				if (message.clientMessageId && clientIds.has(message.clientMessageId)) throw new Error(`Chat client message ID must be unique: ${message.clientMessageId}`);
+				ids.add(message.id);
+				if (message.clientMessageId) clientIds.add(message.clientMessageId);
+			}
+		}
+		assertUniqueClientMessageId(message, ownId) {
+			if (message.clientMessageId && this.messages.some((item) => item.id !== ownId && item.clientMessageId === message.clientMessageId)) throw new Error(`Chat client message ID must be unique: ${message.clientMessageId}`);
+		}
+		emitAdded(message) {
+			this.emitter.emit("message-added", cloneChatMessage(message));
+			this.emitChanged();
+		}
+		emitChanged() {
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+	};
+	function createGeneration() {
+		const cryptoObject = globalThis.crypto;
+		if (cryptoObject?.randomUUID) return cryptoObject.randomUUID();
+		return `stream-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+	}
+	//#endregion
 	//#region src/core/event-emitter.ts
 	var EventEmitter = class {
 		constructor() {
@@ -23,8 +432,12 @@
 		* @returns 返回一个取消订阅的函数，调用即可移除该监听器
 		*/
 		on(event, handler) {
-			if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
-			this.listeners.get(event).add(handler);
+			let handlers = this.listeners.get(event);
+			if (!handlers) {
+				handlers = /* @__PURE__ */ new Set();
+				this.listeners.set(event, handlers);
+			}
+			handlers.add(handler);
 			return () => this.off(event, handler);
 		}
 		/**
@@ -33,7 +446,10 @@
 		* @param handler - 要移除的处理函数引用（必须与注册时为同一函数引用）
 		*/
 		off(event, handler) {
-			this.listeners.get(event)?.delete(handler);
+			const handlers = this.listeners.get(event);
+			if (!handlers) return;
+			handlers.delete(handler);
+			if (handlers.size === 0) this.listeners.delete(event);
 		}
 		/**
 		* 触发（发射）指定事件，依次调用所有已注册的监听器
@@ -41,7 +457,7 @@
 		* @param args - 传递给监听器函数的参数列表（剩余参数语法）
 		*/
 		emit(event, ...args) {
-			this.listeners.get(event)?.forEach((handler) => {
+			[...this.listeners.get(event) ?? []].forEach((handler) => {
 				try {
 					handler(...args);
 				} catch (err) {
@@ -69,92 +485,11 @@
 		*   - 若不传参数，则清空所有事件的所有监听器
 		*/
 		removeAll(event) {
-			if (event) this.listeners.delete(event);
+			if (event !== void 0) this.listeners.delete(event);
 			else this.listeners.clear();
 		}
 	};
 	//#endregion
-	//#region src/core/chat-manager.ts
-	var ChatManager = class {
-		constructor(emitter, initialMessages) {
-			this.messages = [];
-			this.emitter = emitter;
-			if (initialMessages?.length) this.messages = [...initialMessages];
-		}
-		/** 获取所有消息 */
-		getMessages() {
-			return [...this.messages];
-		}
-		/** 根据 ID 获取消息 */
-		getMessage(id) {
-			return this.messages.find((m) => m.id === id);
-		}
-		/** 添加消息（末尾追加） */
-		addMessage(message) {
-			this.messages.push(message);
-			this.emitter.emit("message-added", message);
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-		/** 在顶部批量插入消息（用于加载更多） */
-		prependMessages(messages) {
-			this.messages.unshift(...messages);
-			this.emitter.emit("messages-prepended", messages);
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-		/** 更新消息 */
-		updateMessage(id, updates) {
-			const index = this.messages.findIndex((m) => m.id === id);
-			if (index === -1) return;
-			this.messages[index] = {
-				...this.messages[index],
-				...updates
-			};
-			this.emitter.emit("message-updated", this.messages[index]);
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-		/** 删除消息 */
-		removeMessage(id) {
-			const index = this.messages.findIndex((m) => m.id === id);
-			if (index === -1) return;
-			const removed = this.messages.splice(index, 1)[0];
-			this.emitter.emit("message-removed", removed);
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-		/** 替换全部消息 */
-		setMessages(messages) {
-			this.messages = [...messages];
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-		/** 清空所有消息 */
-		clearMessages() {
-			this.messages = [];
-			this.emitter.emit("messages-changed", []);
-		}
-		/** 追加流式消息内容 */
-		appendMessageContent(id, chunk) {
-			const index = this.messages.findIndex((m) => m.id === id);
-			if (index === -1) return;
-			const msg = this.messages[index];
-			this.messages[index] = {
-				...msg,
-				content: (msg.content ?? "") + chunk
-			};
-			this.emitter.emit("message-content-appended", id, this.messages[index].content);
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-		/** 完成流式消息 */
-		finishStreaming(id) {
-			const index = this.messages.findIndex((m) => m.id === id);
-			if (index === -1) return;
-			this.messages[index] = {
-				...this.messages[index],
-				streaming: false
-			};
-			this.emitter.emit("message-updated", this.messages[index]);
-			this.emitter.emit("messages-changed", this.getMessages());
-		}
-	};
-	//#endregion
 	//#region src/core/mention-engine.ts
 	var MentionEngine = class {
 		constructor(emitter, members) {
@@ -168,7 +503,7 @@
 			};
 			this.selectedMentions = [];
 			this.emitter = emitter;
-			if (members) this.members = [...members];
+			if (members) this.members = members.map((member) => ({ ...member }));
 		}
 		getState() {
 			return {
@@ -177,10 +512,10 @@
 			};
 		}
 		getSelectedMentions() {
-			return [...this.selectedMentions];
+			return this.selectedMentions.map((member) => ({ ...member }));
 		}
 		setMembers(members) {
-			this.members = [...members];
+			this.members = members.map((member) => ({ ...member }));
 			if (this.state.active) this.filter(this.state.query);
 		}
 		handleInput(text, cursorPos) {
@@ -195,7 +530,7 @@
 				return;
 			}
 			const query = beforeCursor.slice(atIndex + 1);
-			if (/[^\S\r\n]/.test(query)) {
+			if (/\s/.test(query)) {
 				this.deactivate();
 				return;
 			}
@@ -220,7 +555,7 @@
 		select(index) {
 			if (index < 0 || index >= this.state.filtered.length) return null;
 			const member = this.state.filtered[index];
-			if (!this.selectedMentions.find((m) => m.id === member.id)) this.selectedMentions.push(member);
+			if (!this.selectedMentions.some((m) => m.id === member.id)) this.selectedMentions.push(member);
 			this.emitter.emit("mention-select", member);
 			this.deactivate();
 			return member;
@@ -239,7 +574,7 @@
 		parseMentions(text) {
 			const mentions = [];
 			const sortedMembers = [...this.members].sort((a, b) => b.name.length - a.name.length);
-			for (const member of sortedMembers) if (new RegExp(`(^|\\s)@${this.escapeRegex(member.name)}(?=\\s|$|[\uFF0C\u3002\uFF01\uFF1F,.!?])`, "u").test(text) && !mentions.find((m) => m.id === member.id)) mentions.push(member);
+			for (const member of sortedMembers) if (new RegExp(`(^|\\s)@${this.escapeRegex(member.name)}(?=\\s|$|[\uFF0C\u3002\uFF01\uFF1F,.!?])`, "u").test(text) && !mentions.some((m) => m.id === member.id)) mentions.push({ ...member });
 			return mentions;
 		}
 		resetSelected() {
@@ -251,7 +586,7 @@
 		filter(query) {
 			const normalizedQuery = query.trim().toLowerCase();
 			this.state.query = query;
-			this.state.filtered = this.members.filter((member) => member.name.toLowerCase().includes(normalizedQuery) || member.id.toLowerCase().includes(normalizedQuery));
+			this.state.filtered = this.members.filter((member) => member.name.toLowerCase().includes(normalizedQuery) || member.id.toLowerCase().includes(normalizedQuery)).map((member) => ({ ...member }));
 			this.state.activeIndex = 0;
 			this.emitter.emit("mention-filter", this.getState());
 		}
@@ -260,879 +595,162 @@
 		}
 	};
 	//#endregion
-	//#region src/theme/tokens.ts
-	const lightTokens = {
-		bgPrimary: "var(--color-gray-50)",
-		bgSecondary: "var(--color-gray-100)",
-		bgBubbleOutgoing: "var(--color-primary-default)",
-		bgBubbleIncoming: "var(--color-gray-100)",
-		bgInput: "var(--color-gray-50)",
-		bgMention: "var(--color-gray-50)",
-		bgMentionHover: "var(--color-primary-50)",
-		bgMentionActive: "var(--color-primary-100)",
-		bgLoadMore: "var(--color-gray-100)",
-		bgSystemMessage: "var(--color-gray-100)",
-		bgDropOverlay: "color-mix(in srgb, var(--color-primary-default) 10%, var(--color-gray-50))",
-		bgDangerSoft: "color-mix(in srgb, var(--color-danger-default) 12%, var(--color-gray-50))",
-		textPrimary: "var(--color-gray-900)",
-		textSecondary: "var(--color-gray-600)",
-		textBubbleOutgoing: "var(--color-gray-50)",
-		textBubbleIncoming: "var(--color-gray-900)",
-		textMention: "var(--color-gray-900)",
-		textMentionTag: "var(--color-primary-default)",
-		textTimestamp: "var(--color-gray-500)",
-		textSystem: "var(--color-gray-600)",
-		textPlaceholder: "var(--color-gray-400)",
-		borderPrimary: "var(--color-gray-200)",
-		borderInput: "var(--color-gray-300)",
-		borderInputFocus: "var(--color-primary-default)",
-		borderMention: "var(--color-gray-200)",
-		colorSending: "var(--color-gray-400)",
-		colorSent: "var(--color-gray-500)",
-		colorDelivered: "var(--color-primary-default)",
-		colorRead: "var(--color-success-default)",
-		colorFailed: "var(--color-danger-default)",
-		colorLink: "var(--color-primary-default)",
-		shadowPanel: "var(--size-shadow-2)",
-		shadowMention: "var(--size-shadow-4)",
-		avatarBg: "var(--color-primary-default)",
-		avatarText: "var(--color-gray-50)",
-		btnPrimaryBg: "var(--color-primary-default)",
-		btnPrimaryText: "var(--color-gray-50)",
-		btnPrimaryHover: "var(--color-primary-hover)",
-		scrollbarThumb: "var(--color-gray-300)",
-		scrollbarTrack: "var(--color-gray-100)",
-		bgToolbar: "var(--color-gray-100)",
-		borderToolbar: "var(--color-gray-200)",
-		toolbarIconColor: "var(--color-gray-600)",
-		toolbarIconHover: "var(--color-primary-default)",
-		toolbarVoiceActive: "var(--color-danger-default)"
-	};
-	const darkTokens = {
-		bgPrimary: "var(--color-gray-900)",
-		bgSecondary: "var(--color-gray-800)",
-		bgBubbleOutgoing: "var(--color-primary-default)",
-		bgBubbleIncoming: "var(--color-gray-800)",
-		bgInput: "var(--color-gray-900)",
-		bgMention: "var(--color-gray-900)",
-		bgMentionHover: "var(--color-gray-800)",
-		bgMentionActive: "var(--color-primary-900)",
-		bgLoadMore: "var(--color-gray-800)",
-		bgSystemMessage: "var(--color-gray-800)",
-		bgDropOverlay: "color-mix(in srgb, var(--color-primary-default) 16%, var(--color-gray-900))",
-		bgDangerSoft: "color-mix(in srgb, var(--color-danger-default) 18%, var(--color-gray-900))",
-		textPrimary: "var(--color-gray-50)",
-		textSecondary: "var(--color-gray-300)",
-		textBubbleOutgoing: "var(--color-gray-50)",
-		textBubbleIncoming: "var(--color-gray-50)",
-		textMention: "var(--color-gray-50)",
-		textMentionTag: "var(--color-primary-300)",
-		textTimestamp: "var(--color-gray-400)",
-		textSystem: "var(--color-gray-300)",
-		textPlaceholder: "var(--color-gray-500)",
-		borderPrimary: "var(--color-gray-700)",
-		borderInput: "var(--color-gray-700)",
-		borderInputFocus: "var(--color-primary-default)",
-		borderMention: "var(--color-gray-700)",
-		colorSending: "var(--color-gray-500)",
-		colorSent: "var(--color-gray-400)",
-		colorDelivered: "var(--color-primary-300)",
-		colorRead: "var(--color-success-default)",
-		colorFailed: "var(--color-danger-default)",
-		colorLink: "var(--color-primary-300)",
-		shadowPanel: "var(--size-shadow-3)",
-		shadowMention: "var(--size-shadow-6)",
-		avatarBg: "var(--color-primary-default)",
-		avatarText: "var(--color-gray-50)",
-		btnPrimaryBg: "var(--color-primary-default)",
-		btnPrimaryText: "var(--color-gray-50)",
-		btnPrimaryHover: "var(--color-primary-hover)",
-		scrollbarThumb: "var(--color-gray-700)",
-		scrollbarTrack: "var(--color-gray-800)",
-		bgToolbar: "var(--color-gray-800)",
-		borderToolbar: "var(--color-gray-700)",
-		toolbarIconColor: "var(--color-gray-300)",
-		toolbarIconHover: "var(--color-primary-300)",
-		toolbarVoiceActive: "var(--color-danger-default)"
-	};
-	//#endregion
-	//#region src/theme/theme-manager.ts
-	var ThemeManager = class {
-		constructor(emitter, mode) {
-			this.mode = "light";
-			this.mediaQuery = null;
-			this.mediaHandler = null;
-			this.emitter = emitter;
-			if (mode) this.setTheme(mode);
-		}
-		/** 获取当前模式 */
-		getMode() {
-			return this.mode;
-		}
-		/** 获取当前实际主题（auto 时解析为 light/dark） */
-		getResolvedTheme() {
-			if (this.mode === "auto") return this.getSystemTheme();
-			return this.mode;
-		}
-		/** 获取当前主题令牌 */
-		getTokens() {
-			return this.getResolvedTheme() === "dark" ? darkTokens : lightTokens;
-		}
-		/** 设置主题 */
-		setTheme(mode) {
-			this.cleanupMediaListener();
-			this.mode = mode;
-			if (mode === "auto") this.setupMediaListener();
-			this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
-		}
-		/** 获取系统主题偏好 */
-		getSystemTheme() {
-			if (typeof window === "undefined") return "light";
-			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-		}
-		/** 监听系统主题变化 */
-		setupMediaListener() {
-			if (typeof window === "undefined") return;
-			this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-			this.mediaHandler = () => {
-				this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
-			};
-			this.mediaQuery.addEventListener("change", this.mediaHandler);
+	//#region src/core/transport.ts
+	var ChatTransportController = class {
+		constructor(transport, options = {}) {
+			this.status = "idle";
+			this.unsubscribeEvents = null;
+			this.unsubscribeStatus = null;
+			this.destroyed = false;
+			this.connectPromise = null;
+			this.lifecycle = 0;
+			this.transport = transport;
+			this.options = options;
+			this.cursor = options.cursor;
+		}
+		getStatus() {
+			return this.status;
+		}
+		getCursor() {
+			return this.cursor;
+		}
+		async connect(signal) {
+			if (this.destroyed) throw new Error("Chat transport controller is disposed.");
+			if (this.status === "connected") return;
+			if (this.connectPromise) return this.connectPromise;
+			const lifecycle = ++this.lifecycle;
+			this.setStatus("connecting");
+			this.connectPromise = (async () => {
+				this.unsubscribeEvents?.();
+				this.unsubscribeStatus?.();
+				this.unsubscribeEvents = this.transport.subscribe((event) => this.handleEvent(event));
+				this.unsubscribeStatus = this.transport.onStatusChange?.((status) => this.setStatus(status)) ?? null;
+				try {
+					await this.transport.connect({
+						conversationId: this.options.conversationId,
+						cursor: this.cursor,
+						signal
+					});
+					if (this.destroyed || lifecycle !== this.lifecycle) return;
+					this.setStatus("connected");
+				} catch (error) {
+					if (!this.destroyed && lifecycle === this.lifecycle) this.setStatus("error");
+					throw error;
+				} finally {
+					this.connectPromise = null;
+				}
+			})();
+			return this.connectPromise;
 		}
-		/** 清理监听器 */
-		cleanupMediaListener() {
-			if (this.mediaQuery && this.mediaHandler) {
-				this.mediaQuery.removeEventListener("change", this.mediaHandler);
-				this.mediaQuery = null;
-				this.mediaHandler = null;
+		async disconnect() {
+			if (this.destroyed) return;
+			this.lifecycle += 1;
+			this.connectPromise = null;
+			try {
+				await this.transport.disconnect();
+			} finally {
+				this.setStatus("disconnected");
 			}
 		}
-		/** 销毁 */
-		destroy() {
-			this.cleanupMediaListener();
+		async send(message, options = {}) {
+			if (this.destroyed) throw new Error("Chat transport controller is disposed.");
+			if (this.status !== "connected") throw new Error(`Chat transport is not connected: ${this.status}`);
+			const result = await this.transport.send(message, options);
+			if (result && result.cursor) this.cursor = result.cursor;
+			return result;
+		}
+		dispose() {
+			if (this.destroyed) return;
+			this.destroyed = true;
+			this.lifecycle += 1;
+			this.unsubscribeEvents?.();
+			this.unsubscribeStatus?.();
+			this.unsubscribeEvents = null;
+			this.unsubscribeStatus = null;
+			this.connectPromise = null;
+			Promise.resolve(this.transport.disconnect()).catch(() => void 0);
+			this.setStatus("disconnected");
+		}
+		handleEvent(event) {
+			if (this.destroyed) return;
+			if ("cursor" in event && event.cursor) this.cursor = event.cursor;
+			if (event.type === "ack" && event.ack.cursor) this.cursor = event.ack.cursor;
+			if (event.type === "error" && !event.recoverable) this.setStatus("error");
+			this.options.onEvent?.(event);
+		}
+		setStatus(status) {
+			if (this.status === status) return;
+			this.status = status;
+			this.options.onStatusChange?.(status);
 		}
 	};
 	//#endregion
-	//#region src/constants/dom.ts
-	const DEFAULT_CLASS_PREFIX = "ldesign-chat";
-	const COMPONENT_CSS_VAR_PREFIX = "--ldesign-chat";
-	const STYLE_ELEMENT_ID = "ldesign-chat-styles";
-	function normalizeClassPrefix(prefix) {
-		const trimmed = prefix?.trim();
-		if (!trimmed) return DEFAULT_CLASS_PREFIX;
-		if (trimmed.startsWith("ldesign-")) return trimmed;
-		return `ldesign-${trimmed.replace(/^-+/, "")}`;
-	}
-	function getStyleElementId(prefix = DEFAULT_CLASS_PREFIX) {
-		const normalized = normalizeClassPrefix(prefix);
-		return normalized === "ldesign-chat" ? STYLE_ELEMENT_ID : `${normalized}-styles`;
+	//#region src/renderer/style-manager.ts
+	const styleRefs = /* @__PURE__ */ new WeakMap();
+	function injectStyles(tokens, prefix = DEFAULT_CLASS_PREFIX, targetRoot) {
+		const normalizedPrefix = normalizeClassPrefix(prefix);
+		const styleId = getStyleElementId(normalizedPrefix);
+		const ownerDocument = resolveDocument(targetRoot?.ownerDocument);
+		const refs = getDocumentRefs(ownerDocument);
+		refs.set(styleId, (refs.get(styleId) ?? 0) + 1);
+		if (!ownerDocument.getElementById(styleId)) upsertStyle(ownerDocument, styleId, generateCSS(tokens, normalizedPrefix));
+		if (targetRoot) applyThemeTokens(targetRoot, tokens);
 	}
-	function cx(...classes) {
-		return classes.filter(Boolean).join(" ");
+	function updateStyles(tokens, prefix = DEFAULT_CLASS_PREFIX, targetRoot) {
+		const normalizedPrefix = normalizeClassPrefix(prefix);
+		const styleId = getStyleElementId(normalizedPrefix);
+		if (targetRoot) applyThemeTokens(targetRoot, tokens);
+		else upsertStyle(resolveDocument(), styleId, generateCSS(tokens, normalizedPrefix));
 	}
-	//#endregion
-	//#region src/renderer/dom-renderer.ts
-	const SEND_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line><polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon></svg>";
-	const ICON_IMAGE = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>";
-	const ICON_PAPERCLIP = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\"/></svg>";
-	const ICON_MIC = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/></svg>";
-	const ICON_MIC_OFF = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/><path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\"/><path d=\"M5 10v2a7 7 0 0 0 12 5.29\"/><path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\"/><path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/></svg>";
-	const FILE_ICON = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/></svg>";
-	const STATUS_MAP = {
-		sending: "...",
-		sent: "✓",
-		delivered: "✓✓",
-		read: "✓✓",
-		failed: "!"
-	};
-	var DOMRenderer = class {
-		constructor(container, config, emitter, mentionEngine) {
-			this.inputArea = null;
-			this.textareaEl = null;
-			this.sendBtn = null;
-			this.mentionPanel = null;
-			this.loadMoreEl = null;
-			this.toolbarEl = null;
-			this.dropOverlay = null;
-			this.voiceBtn = null;
-			this.loadingMore = false;
-			this.isRecording = false;
-			this.recognition = null;
-			this.lastVoiceTranscript = "";
-			this.container = container;
-			this.config = config;
-			this.emitter = emitter;
-			this.mentionEngine = mentionEngine;
-			this.prefix = normalizeClassPrefix(config.classPrefix ?? "ldesign-chat");
+	function removeStyles(prefix = DEFAULT_CLASS_PREFIX, ownerDocument) {
+		const doc = resolveDocument(ownerDocument);
+		const refsByStyle = getDocumentRefs(doc);
+		const styleId = getStyleElementId(prefix);
+		const refs = refsByStyle.get(styleId) ?? 0;
+		if (refs > 1) {
+			refsByStyle.set(styleId, refs - 1);
+			return;
 		}
-		init() {
-			this.container.innerHTML = "";
-			this.root = this.el("div", `${this.prefix}-container`);
-			this.messageListEl = this.el("div", `${this.prefix}-message-list`);
-			this.root.appendChild(this.messageListEl);
-			if (this.config.showInput !== false) this.renderInputArea();
-			this.container.appendChild(this.root);
-			this.setupEventListeners();
-		}
-		updateMessageContent(id, content) {
-			const bubble = this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`)?.querySelector(`.${this.prefix}-bubble`);
-			if (!bubble) return;
-			bubble.innerHTML = this.renderTextContent(content);
-		}
-		renderMessages(messages) {
-			this.messageListEl.innerHTML = "";
-			if (this.config.enableLoadMore) this.renderLoadMoreButton();
-			if (messages.length === 0) {
-				this.renderEmpty();
-				return;
-			}
-			let lastTimestamp = 0;
-			const interval = this.config.timeGroupInterval ?? 3e5;
-			for (const message of messages) {
-				if (this.config.showTimestamp !== false && message.timestamp - lastTimestamp > interval) {
-					this.renderTimeDivider(message.timestamp);
-					lastTimestamp = message.timestamp;
-				}
-				this.renderMessageRow(message);
-			}
-		}
-		appendMessage(message) {
-			this.removeEmpty();
-			const messageEls = this.getMessageElements();
-			const lastTime = messageEls.length > 0 ? Number.parseInt(messageEls[messageEls.length - 1].dataset.timestamp ?? "0", 10) : 0;
-			const interval = this.config.timeGroupInterval ?? 3e5;
-			if (this.config.showTimestamp !== false && message.timestamp - lastTime > interval) this.renderTimeDivider(message.timestamp);
-			this.renderMessageRow(message);
-		}
-		prependMessages(messages) {
-			if (!messages.length) return;
-			this.removeEmpty();
-			const scrollHeight = this.messageListEl.scrollHeight;
-			const scrollTop = this.messageListEl.scrollTop;
-			const fragment = document.createDocumentFragment();
-			let lastTimestamp = 0;
-			const interval = this.config.timeGroupInterval ?? 3e5;
-			for (const message of messages) {
-				if (this.config.showTimestamp !== false && message.timestamp - lastTimestamp > interval) {
-					fragment.appendChild(this.createTimeDivider(message.timestamp));
-					lastTimestamp = message.timestamp;
-				}
-				fragment.appendChild(this.createMessageRow(message));
-			}
-			const firstMessage = this.messageListEl.querySelector(`.${this.prefix}-message-row, .${this.prefix}-time-divider`);
-			if (firstMessage) firstMessage.before(fragment);
-			else if (this.loadMoreEl) this.loadMoreEl.after(fragment);
-			else this.messageListEl.appendChild(fragment);
-			this.messageListEl.scrollTop = scrollTop + (this.messageListEl.scrollHeight - scrollHeight);
-		}
-		updateMessage(id, message) {
-			const rowEl = this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`);
-			if (!rowEl) return;
-			rowEl.replaceWith(this.createMessageRow(message));
-		}
-		removeMessage(id) {
-			this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`)?.remove();
-			if (this.getMessageElements().length === 0) this.renderEmpty();
-		}
-		scrollToBottom(smooth = true) {
-			if (typeof this.messageListEl.scrollTo === "function") {
-				this.messageListEl.scrollTo({
-					top: this.messageListEl.scrollHeight,
-					behavior: smooth ? "smooth" : "auto"
-				});
-				return;
-			}
-			this.messageListEl.scrollTop = this.messageListEl.scrollHeight;
-		}
-		isAtBottom(threshold = 4) {
-			return this.messageListEl.scrollHeight - this.messageListEl.scrollTop - this.messageListEl.clientHeight <= threshold;
-		}
-		setLoadingMore(loading) {
-			this.loadingMore = loading;
-			if (!this.loadMoreEl) return;
-			this.loadMoreEl.textContent = loading ? "加载中..." : this.config.loadMoreText ?? "加载更多";
-			this.loadMoreEl.classList.toggle(`${this.prefix}-load-more--loading`, loading);
-		}
-		focusInput() {
-			this.textareaEl?.focus();
-		}
-		setInputContent(content) {
-			if (!this.textareaEl) return;
-			this.textareaEl.value = this.limitInput(content);
-			this.autoResize();
-			this.updateSendButtonState();
-			this.config.onInputChange?.(this.textareaEl.value);
-		}
-		getInputContent() {
-			return this.textareaEl?.value ?? "";
-		}
-		clearInput() {
-			this.setInputContent("");
-		}
-		renderMentionPanel(members, activeIndex) {
-			if (!this.mentionPanel) return;
-			if (members.length === 0) {
-				this.mentionPanel.style.display = "none";
-				return;
-			}
-			this.mentionPanel.style.display = "block";
-			this.mentionPanel.innerHTML = "";
-			members.forEach((member, index) => {
-				const item = this.el("div", cx(`${this.prefix}-mention-item`, index === activeIndex && `${this.prefix}-mention-item--active`));
-				item.setAttribute("role", "option");
-				item.setAttribute("aria-selected", String(index === activeIndex));
-				const avatar = this.el("div", `${this.prefix}-mention-item-avatar`);
-				if (member.avatar) {
-					const img = document.createElement("img");
-					img.src = member.avatar;
-					img.alt = "";
-					avatar.appendChild(img);
-				} else avatar.textContent = member.name[0]?.toUpperCase() ?? "";
-				item.appendChild(avatar);
-				const name = this.el("span", `${this.prefix}-mention-item-name`);
-				name.textContent = member.name;
-				item.appendChild(name);
-				item.addEventListener("click", () => {
-					this.mentionEngine.select(index);
-				});
-				this.mentionPanel?.appendChild(item);
-			});
-		}
-		hideMentionPanel() {
-			if (this.mentionPanel) this.mentionPanel.style.display = "none";
-		}
-		destroy() {
-			this.stopVoice();
-			this.container.innerHTML = "";
-		}
-		renderInputArea() {
-			this.inputArea = this.el("div", `${this.prefix}-input-area`);
-			const wrapper = this.el("div", `${this.prefix}-input-wrapper`);
-			this.mentionPanel = this.el("div", `${this.prefix}-mention-panel`);
-			this.mentionPanel.style.display = "none";
-			this.mentionPanel.setAttribute("role", "listbox");
-			wrapper.appendChild(this.mentionPanel);
-			if (this.config.enableToolbar !== false) this.renderToolbar(wrapper);
-			this.textareaEl = document.createElement("textarea");
-			this.textareaEl.className = `${this.prefix}-textarea`;
-			this.textareaEl.placeholder = this.config.inputPlaceholder ?? "输入消息...";
-			this.textareaEl.rows = 1;
-			if (this.config.maxInputLength && this.config.maxInputLength > 0) this.textareaEl.maxLength = this.config.maxInputLength;
-			wrapper.appendChild(this.textareaEl);
-			this.dropOverlay = this.el("div", `${this.prefix}-drop-overlay`);
-			this.dropOverlay.innerHTML = "<span>拖放文件到这里</span>";
-			this.dropOverlay.style.display = "none";
-			wrapper.appendChild(this.dropOverlay);
-			this.inputArea.appendChild(wrapper);
-			this.sendBtn = document.createElement("button");
-			this.sendBtn.className = `${this.prefix}-send-btn`;
-			this.sendBtn.innerHTML = SEND_ICON_SVG;
-			this.sendBtn.title = "发送";
-			this.sendBtn.type = "button";
-			this.sendBtn.disabled = true;
-			this.inputArea.appendChild(this.sendBtn);
-			this.root.appendChild(this.inputArea);
-		}
-		renderToolbar(wrapper) {
-			const toolbar = this.config.toolbarConfig ?? {};
-			this.toolbarEl = this.el("div", `${this.prefix}-toolbar`);
-			if (toolbar.image !== false) {
-				const imageBtn = this.createToolbarBtn(ICON_IMAGE, "插入图片");
-				imageBtn.addEventListener("click", () => this.openFilePicker("image/*"));
-				this.toolbarEl.appendChild(imageBtn);
-			}
-			if (toolbar.file !== false) {
-				const fileBtn = this.createToolbarBtn(ICON_PAPERCLIP, "插入文件");
-				fileBtn.addEventListener("click", () => this.openFilePicker("*/*"));
-				this.toolbarEl.appendChild(fileBtn);
-			}
-			if (toolbar.voice !== false) {
-				this.voiceBtn = this.createToolbarBtn(ICON_MIC, "语音输入");
-				this.voiceBtn.addEventListener("click", () => this.toggleVoice());
-				this.toolbarEl.appendChild(this.voiceBtn);
-			}
-			wrapper.insertBefore(this.toolbarEl, wrapper.firstChild);
-		}
-		createToolbarBtn(iconSvg, title) {
-			const btn = document.createElement("button");
-			btn.className = `${this.prefix}-toolbar-btn`;
-			btn.innerHTML = iconSvg;
-			btn.title = title;
-			btn.type = "button";
-			return btn;
-		}
-		openFilePicker(accept) {
-			const input = document.createElement("input");
-			input.type = "file";
-			input.accept = accept;
-			input.multiple = true;
-			input.style.display = "none";
-			input.addEventListener("change", () => {
-				const files = Array.from(input.files ?? []);
-				input.remove();
-				if (!files.length) return;
-				const isImage = accept.startsWith("image");
-				this.emitter.emit(isImage ? "toolbar-image" : "toolbar-file", files);
-				if (isImage) this.config.onImageUpload?.(files);
-				else this.config.onFileUpload?.(files);
-			});
-			document.body.appendChild(input);
-			input.click();
-		}
-		toggleVoice() {
-			if (this.isRecording) this.stopVoice();
-			else this.startVoice();
-		}
-		startVoice() {
-			if (typeof window === "undefined") return;
-			const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-			if (!SpeechRecognition) {
-				this.emitter.emit("toolbar-voice-unsupported");
-				this.config.onVoiceUnsupported?.();
-				return;
-			}
-			try {
-				this.lastVoiceTranscript = "";
-				this.recognition = new SpeechRecognition();
-				this.recognition.continuous = false;
-				this.recognition.interimResults = true;
-				this.recognition.lang = this.config.voiceLang ?? "zh-CN";
-				this.recognition.onresult = (event) => {
-					let transcript = "";
-					for (let i = 0; i < event.results.length; i++) transcript += event.results[i][0].transcript;
-					this.lastVoiceTranscript = transcript;
-					if (event.results[event.results.length - 1]?.isFinal && this.textareaEl) this.insertTextAtCursor(transcript);
-				};
-				this.recognition.onend = () => {
-					this.finishVoice();
-					this.emitter.emit("toolbar-voice-end", this.lastVoiceTranscript);
-					this.config.onVoiceEnd?.(this.lastVoiceTranscript);
-				};
-				this.recognition.onerror = (error) => {
-					this.finishVoice();
-					this.emitter.emit("toolbar-voice-error", error);
-					this.config.onVoiceError?.(error);
-				};
-				this.isRecording = true;
-				this.voiceBtn?.classList.add(`${this.prefix}-toolbar-btn--active`);
-				if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC_OFF;
-				this.recognition.start();
-				this.emitter.emit("toolbar-voice-start");
-				this.config.onVoiceStart?.();
-			} catch (error) {
-				this.finishVoice();
-				this.emitter.emit("toolbar-voice-error", error);
-				this.config.onVoiceError?.(error);
-			}
+		refsByStyle.delete(styleId);
+		doc.getElementById(styleId)?.remove();
+	}
+	function cls(prefix, ...parts) {
+		const normalizedPrefix = normalizeClassPrefix(prefix);
+		return parts.map((part) => `${normalizedPrefix}-${part}`).join(" ");
+	}
+	const clsx = cx;
+	function upsertStyle(ownerDocument, styleId, cssText) {
+		let style = ownerDocument.getElementById(styleId);
+		if (!style) {
+			style = ownerDocument.createElement("style");
+			style.id = styleId;
+			style.dataset.ldesignChat = "true";
+			(ownerDocument.head ?? ownerDocument.documentElement).appendChild(style);
 		}
-		stopVoice() {
-			if (!this.recognition) return;
-			const recognition = this.recognition;
-			this.recognition = null;
-			try {
-				recognition.stop();
-			} catch {
-				this.finishVoice();
-			}
+		style.textContent = cssText;
+	}
+	function applyThemeTokens(root, tokens) {
+		Object.entries(themeVariableMap(tokens)).forEach(([name, value]) => {
+			root.style.setProperty(name, value);
+		});
+	}
+	function resolveDocument(ownerDocument) {
+		if (ownerDocument) return ownerDocument;
+		if (typeof document !== "undefined") return document;
+		throw new Error("[Chat] Styles require a browser Document.");
+	}
+	function getDocumentRefs(ownerDocument) {
+		let refs = styleRefs.get(ownerDocument);
+		if (!refs) {
+			refs = /* @__PURE__ */ new Map();
+			styleRefs.set(ownerDocument, refs);
 		}
-		finishVoice() {
-			this.isRecording = false;
-			this.recognition = null;
-			this.voiceBtn?.classList.remove(`${this.prefix}-toolbar-btn--active`);
-			if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC;
-		}
-		setupEventListeners() {
-			if (this.textareaEl) {
-				this.textareaEl.addEventListener("input", () => {
-					const limited = this.limitInput(this.textareaEl?.value ?? "");
-					if (this.textareaEl && limited !== this.textareaEl.value) this.textareaEl.value = limited;
-					this.autoResize();
-					this.updateSendButtonState();
-					this.config.onInputChange?.(this.textareaEl?.value ?? "");
-					if (this.config.enableMention && this.textareaEl) this.mentionEngine.handleInput(this.textareaEl.value, this.textareaEl.selectionStart);
-				});
-				this.textareaEl.addEventListener("keydown", (event) => {
-					if (this.mentionEngine.getState().active) {
-						if (event.key === "ArrowUp") {
-							event.preventDefault();
-							this.mentionEngine.moveUp();
-						} else if (event.key === "ArrowDown") {
-							event.preventDefault();
-							this.mentionEngine.moveDown();
-						} else if (event.key === "Enter" && !event.shiftKey) {
-							event.preventDefault();
-							const member = this.mentionEngine.selectCurrent();
-							if (member) this.insertMention(member);
-						} else if (event.key === "Escape") {
-							event.preventDefault();
-							this.mentionEngine.deactivate();
-						}
-						return;
-					}
-					if (this.config.enterToSend !== false && event.key === "Enter" && !event.shiftKey) {
-						event.preventDefault();
-						this.handleSend();
-					}
-				});
-				this.textareaEl.addEventListener("paste", (event) => {
-					const items = event.clipboardData?.items;
-					if (!items) return;
-					const files = [];
-					for (let i = 0; i < items.length; i++) if (items[i].kind === "file") {
-						const file = items[i].getAsFile();
-						if (file) files.push(file);
-					}
-					if (files.length > 0) {
-						event.preventDefault();
-						this.emitter.emit("toolbar-paste", files);
-						this.config.onPaste?.(files);
-					}
-				});
-			}
-			if (this.inputArea) {
-				const wrapper = this.inputArea.querySelector(`.${this.prefix}-input-wrapper`);
-				if (wrapper) this.setupDropEvents(wrapper);
-			}
-			this.sendBtn?.addEventListener("click", () => {
-				this.handleSend();
-			});
-			this.emitter.on("mention-filter", (state) => {
-				this.renderMentionPanel(state.filtered, state.activeIndex);
-			});
-			this.emitter.on("mention-active-change", (index) => {
-				(this.mentionPanel?.querySelectorAll(`.${this.prefix}-mention-item`))?.forEach((el, i) => {
-					el.classList.toggle(`${this.prefix}-mention-item--active`, i === index);
-					el.setAttribute("aria-selected", String(i === index));
-				});
-			});
-			this.emitter.on("mention-deactivate", () => {
-				this.hideMentionPanel();
-			});
-		}
-		setupDropEvents(wrapper) {
-			let dragCounter = 0;
-			wrapper.addEventListener("dragenter", (event) => {
-				event.preventDefault();
-				dragCounter++;
-				if (this.dropOverlay) this.dropOverlay.style.display = "flex";
-			});
-			wrapper.addEventListener("dragleave", (event) => {
-				event.preventDefault();
-				dragCounter--;
-				if (dragCounter <= 0) {
-					dragCounter = 0;
-					if (this.dropOverlay) this.dropOverlay.style.display = "none";
-				}
-			});
-			wrapper.addEventListener("dragover", (event) => {
-				event.preventDefault();
-			});
-			wrapper.addEventListener("drop", (event) => {
-				event.preventDefault();
-				dragCounter = 0;
-				if (this.dropOverlay) this.dropOverlay.style.display = "none";
-				const files = Array.from(event.dataTransfer?.files ?? []);
-				if (files.length > 0) {
-					this.emitter.emit("toolbar-drop", files);
-					this.config.onDrop?.(files);
-				}
-			});
-		}
-		handleSend() {
-			const content = (this.textareaEl?.value ?? "").trim();
-			if (!content) return;
-			const mentions = this.mentionEngine.parseMentions(content);
-			this.emitter.emit("send", content, mentions);
-			this.config.onSend?.(content, mentions);
-			if (this.config.clearInputOnSend !== false) this.clearInput();
-			this.mentionEngine.resetSelected();
-		}
-		insertMention(member) {
-			if (!this.textareaEl) return;
-			const state = this.mentionEngine.getState();
-			const text = this.textareaEl.value;
-			const pos = this.textareaEl.selectionStart;
-			const insertText = this.mentionEngine.getInsertText(member);
-			const before = text.slice(0, state.triggerPosition);
-			const after = text.slice(pos);
-			this.textareaEl.value = this.limitInput(before + insertText + after);
-			const newPos = Math.min(before.length + insertText.length, this.textareaEl.value.length);
-			this.textareaEl.setSelectionRange(newPos, newPos);
-			this.textareaEl.focus();
-			this.autoResize();
-			this.updateSendButtonState();
-			this.config.onInputChange?.(this.textareaEl.value);
-		}
-		insertTextAtCursor(text) {
-			if (!this.textareaEl) return;
-			const current = this.textareaEl.value;
-			const start = this.textareaEl.selectionStart;
-			const end = this.textareaEl.selectionEnd;
-			this.textareaEl.value = this.limitInput(current.slice(0, start) + text + current.slice(end));
-			const nextCursor = Math.min(start + text.length, this.textareaEl.value.length);
-			this.textareaEl.setSelectionRange(nextCursor, nextCursor);
-			this.autoResize();
-			this.updateSendButtonState();
-			this.config.onInputChange?.(this.textareaEl.value);
-		}
-		autoResize() {
-			if (!this.textareaEl) return;
-			this.textareaEl.style.height = "auto";
-			const maxHeight = this.getCssSizeValue("--ldesign-chat-textarea-max-height", 120);
-			this.textareaEl.style.height = `${Math.min(this.textareaEl.scrollHeight, maxHeight)}px`;
-		}
-		updateSendButtonState() {
-			if (!this.sendBtn) return;
-			this.sendBtn.disabled = !this.getInputContent().trim();
-		}
-		renderLoadMoreButton() {
-			this.loadMoreEl = this.el("div", `${this.prefix}-load-more`);
-			this.loadMoreEl.textContent = this.config.loadMoreText ?? "加载更多";
-			this.loadMoreEl.addEventListener("click", () => {
-				if (this.loadingMore) return;
-				this.setLoadingMore(true);
-				this.emitter.emit("load-more");
-				Promise.resolve(this.config.onLoadMore?.()).finally(() => {
-					this.setLoadingMore(false);
-				});
-			});
-			this.messageListEl.appendChild(this.loadMoreEl);
-		}
-		renderTimeDivider(timestamp) {
-			this.messageListEl.appendChild(this.createTimeDivider(timestamp));
-		}
-		createTimeDivider(timestamp) {
-			const divider = this.el("div", `${this.prefix}-time-divider`);
-			const span = document.createElement("span");
-			span.textContent = this.formatTime(timestamp);
-			divider.appendChild(span);
-			return divider;
-		}
-		renderMessageRow(message) {
-			this.messageListEl.appendChild(this.createMessageRow(message));
-		}
-		createMessageRow(message) {
-			const p = this.prefix;
-			if (message.type === "system") {
-				const row2 = this.el("div", cx(`${p}-message-row`, `${p}-message-row--system`));
-				row2.dataset.msgId = message.id;
-				row2.dataset.timestamp = String(message.timestamp);
-				const system = this.el("div", `${p}-system-message`);
-				system.textContent = message.content ?? "";
-				row2.appendChild(system);
-				return row2;
-			}
-			const isOutgoing = message.direction === "outgoing";
-			const row = this.el("div", cx(`${p}-message-row`, isOutgoing && `${p}-message-row--outgoing`));
-			row.dataset.msgId = message.id;
-			row.dataset.timestamp = String(message.timestamp);
-			if (this.config.showAvatar !== false) row.appendChild(this.createAvatar(message.sender.nickname, message.sender.avatar));
-			const body = this.el("div", `${p}-message-body`);
-			if (this.config.showNickname !== false && !isOutgoing) {
-				const nickname = this.el("div", `${p}-nickname`);
-				nickname.textContent = message.sender.nickname;
-				body.appendChild(nickname);
-			}
-			body.appendChild(this.createBubble(message, isOutgoing));
-			body.appendChild(this.createMessageFooter(message, isOutgoing));
-			row.appendChild(body);
-			row.addEventListener("click", () => {
-				this.emitter.emit("message-click", message);
-				this.config.onMessageClick?.(message);
-			});
-			return row;
-		}
-		createAvatar(name, avatarUrl) {
-			const avatar = this.el("div", `${this.prefix}-avatar`);
-			if (avatarUrl) {
-				const img = document.createElement("img");
-				img.src = avatarUrl;
-				img.alt = name;
-				avatar.appendChild(img);
-			} else avatar.textContent = name[0]?.toUpperCase() ?? "";
-			return avatar;
-		}
-		createMessageFooter(message, isOutgoing) {
-			const footer = this.el("div", `${this.prefix}-message-footer`);
-			if (this.config.showTimestamp !== false) {
-				const time = this.el("span", `${this.prefix}-timestamp`);
-				time.textContent = this.formatShortTime(message.timestamp);
-				footer.appendChild(time);
-			}
-			if (this.config.showStatus !== false && isOutgoing && message.status) {
-				const status = this.el("span", cx(`${this.prefix}-status`, `${this.prefix}-status--${message.status}`));
-				status.textContent = STATUS_MAP[message.status] ?? "";
-				if (message.status === "failed") status.addEventListener("click", (event) => {
-					event.stopPropagation();
-					this.emitter.emit("message-retry", message);
-				});
-				footer.appendChild(status);
-			}
-			return footer;
-		}
-		createBubble(message, isOutgoing) {
-			const p = this.prefix;
-			const dirClass = isOutgoing ? `${p}-bubble--outgoing` : `${p}-bubble--incoming`;
-			if (message.revoked) {
-				const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--revoked`));
-				bubble.textContent = "消息已撤回";
-				return bubble;
-			}
-			switch (message.type) {
-				case "image": {
-					const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--image`));
-					if (message.image) {
-						const img = document.createElement("img");
-						img.src = message.image.thumbUrl ?? message.image.url;
-						img.alt = message.content ?? "";
-						if (message.image.width) img.width = Math.min(message.image.width, 240);
-						bubble.appendChild(img);
-					}
-					return bubble;
-				}
-				case "file": {
-					const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--file`));
-					const icon = this.el("div", `${p}-file-icon`);
-					icon.innerHTML = FILE_ICON;
-					bubble.appendChild(icon);
-					const info = this.el("div", `${p}-file-info`);
-					const name = this.el("div", `${p}-file-name`);
-					name.textContent = message.file?.name ?? "file";
-					info.appendChild(name);
-					if (message.file?.size) {
-						const size = this.el("div", `${p}-file-size`);
-						size.textContent = this.formatFileSize(message.file.size);
-						info.appendChild(size);
-					}
-					bubble.appendChild(info);
-					return bubble;
-				}
-				case "custom": {
-					const bubble = this.el("div", cx(`${p}-bubble`, dirClass));
-					if (message.customHtml) bubble.innerHTML = message.customHtml;
-					else bubble.textContent = message.content ?? "";
-					return bubble;
-				}
-				default: {
-					const bubble = this.el("div", cx(`${p}-bubble`, dirClass, message.streaming && `${p}-bubble--streaming`));
-					bubble.innerHTML = this.renderTextContent(message.content ?? "", message.mentions);
-					return bubble;
-				}
-			}
-		}
-		renderTextContent(content, mentions) {
-			let html = this.escapeHtml(content);
-			if (mentions?.length) for (const mention of mentions) {
-				const tag = `<span class="${this.prefix}-mention-tag" data-mention-id="${this.escapeAttr(mention.id)}">@${this.escapeHtml(mention.name)}</span>`;
-				html = html.replace(new RegExp(`@${this.escapeRegex(mention.name)}`, "g"), tag);
-			}
-			return html.replace(/(https?:\/\/[^\s<]+)/g, `<a class="${this.prefix}-link" href="$1" target="_blank" rel="noopener noreferrer">$1</a>`);
-		}
-		renderEmpty() {
-			if (this.messageListEl.querySelector(`.${this.prefix}-empty`)) return;
-			const empty = this.el("div", `${this.prefix}-empty`);
-			empty.textContent = "暂无消息";
-			this.messageListEl.appendChild(empty);
-		}
-		removeEmpty() {
-			this.messageListEl.querySelector(`.${this.prefix}-empty`)?.remove();
-		}
-		el(tag, className) {
-			const el = document.createElement(tag);
-			el.className = className;
-			return el;
-		}
-		getMessageElements() {
-			return Array.from(this.messageListEl.querySelectorAll(`.${this.prefix}-message-row`));
-		}
-		formatTime(timestamp) {
-			if (this.config.formatTime) return this.config.formatTime(timestamp);
-			const date = new Date(timestamp);
-			const now = /* @__PURE__ */ new Date();
-			if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("zh-CN", {
-				hour: "2-digit",
-				minute: "2-digit"
-			});
-			return date.toLocaleDateString("zh-CN", {
-				month: "2-digit",
-				day: "2-digit",
-				hour: "2-digit",
-				minute: "2-digit"
-			});
-		}
-		formatShortTime(timestamp) {
-			return new Date(timestamp).toLocaleTimeString("zh-CN", {
-				hour: "2-digit",
-				minute: "2-digit"
-			});
-		}
-		formatFileSize(bytes) {
-			if (bytes < 1024) return `${bytes} B`;
-			if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-			return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-		}
-		limitInput(content) {
-			const max = this.config.maxInputLength;
-			if (!max || max <= 0) return content;
-			return content.slice(0, max);
-		}
-		getCssSizeValue(name, fallback) {
-			if (typeof window === "undefined" || !this.root) return fallback;
-			const value = window.getComputedStyle(this.root).getPropertyValue(name).trim();
-			const parsed = Number.parseFloat(value);
-			return Number.isFinite(parsed) ? parsed : fallback;
-		}
-		escapeHtml(str) {
-			const div = document.createElement("div");
-			div.textContent = str;
-			return div.innerHTML;
-		}
-		escapeAttr(str) {
-			return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-		}
-		escapeRegex(str) {
-			return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-		}
-	};
-	//#endregion
-	//#region src/renderer/style-manager.ts
-	const styleRefs = /* @__PURE__ */ new Map();
-	function injectStyles(tokens, prefix = DEFAULT_CLASS_PREFIX) {
-		const normalizedPrefix = normalizeClassPrefix(prefix);
-		const styleId = getStyleElementId(normalizedPrefix);
-		styleRefs.set(styleId, (styleRefs.get(styleId) ?? 0) + 1);
-		upsertStyle(styleId, generateCSS(tokens, normalizedPrefix));
-	}
-	function updateStyles(tokens, prefix = DEFAULT_CLASS_PREFIX) {
-		const normalizedPrefix = normalizeClassPrefix(prefix);
-		upsertStyle(getStyleElementId(normalizedPrefix), generateCSS(tokens, normalizedPrefix));
-	}
-	function removeStyles(prefix = DEFAULT_CLASS_PREFIX) {
-		const styleId = getStyleElementId(prefix);
-		const refs = styleRefs.get(styleId) ?? 0;
-		if (refs > 1) {
-			styleRefs.set(styleId, refs - 1);
-			return;
-		}
-		styleRefs.delete(styleId);
-		document.getElementById(styleId)?.remove();
-	}
-	function cls(prefix, ...parts) {
-		const normalizedPrefix = normalizeClassPrefix(prefix);
-		return parts.map((part) => `${normalizedPrefix}-${part}`).join(" ");
-	}
-	const clsx = cx;
-	function upsertStyle(styleId, cssText) {
-		let style = document.getElementById(styleId);
-		if (!style) {
-			style = document.createElement("style");
-			style.id = styleId;
-			style.dataset.ldesignChat = "true";
-			document.head.appendChild(style);
-		}
-		style.textContent = cssText;
+		return refs;
 	}
 	function tokenVars(t) {
+		return Object.entries(themeVariableMap(t)).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+	}
+	function themeVariableMap(t) {
 		const vars = {
 			bgPrimary: t.bgPrimary,
 			bgSecondary: t.bgSecondary,
@@ -1180,51 +798,52 @@
 			toolbarIconHover: t.toolbarIconHover,
 			toolbarVoiceActive: t.toolbarVoiceActive
 		};
-		return Object.entries(vars).map(([key, value]) => `  ${COMPONENT_CSS_VAR_PREFIX}-${toKebab(key)}: ${value};`).join("\n");
+		return Object.fromEntries(Object.entries(vars).map(([key, value]) => [`${COMPONENT_CSS_VAR_PREFIX}-${toKebab(key)}`, value]));
 	}
 	function sizeVars() {
 		return `
-  ${COMPONENT_CSS_VAR_PREFIX}-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  ${COMPONENT_CSS_VAR_PREFIX}-font-size: var(--size-font-base);
-  ${COMPONENT_CSS_VAR_PREFIX}-font-size-sm: var(--size-font-sm);
-  ${COMPONENT_CSS_VAR_PREFIX}-font-size-xs: var(--size-font-xs);
-  ${COMPONENT_CSS_VAR_PREFIX}-font-size-lg: var(--size-font-lg);
-  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-regular: var(--size-font-weight-regular);
-  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-medium: var(--size-font-weight-medium);
-  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-semibold: var(--size-font-weight-semibold);
-  ${COMPONENT_CSS_VAR_PREFIX}-line-height: var(--size-line-normal);
-  ${COMPONENT_CSS_VAR_PREFIX}-line-height-bubble: var(--size-line-relaxed);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-1: var(--size-1);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-2: var(--size-2);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-3: var(--size-3);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-4: var(--size-4);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-5: var(--size-5);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-6: var(--size-6);
-  ${COMPONENT_CSS_VAR_PREFIX}-space-8: var(--size-8);
-  ${COMPONENT_CSS_VAR_PREFIX}-avatar-size: var(--size-11);
-  ${COMPONENT_CSS_VAR_PREFIX}-mention-avatar-size: var(--size-9);
-  ${COMPONENT_CSS_VAR_PREFIX}-toolbar-button-size: var(--size-9);
-  ${COMPONENT_CSS_VAR_PREFIX}-input-button-size: var(--size-11);
-  ${COMPONENT_CSS_VAR_PREFIX}-file-icon-size: var(--size-12);
-  ${COMPONENT_CSS_VAR_PREFIX}-image-max-size: calc(var(--size-13) * 5);
-  ${COMPONENT_CSS_VAR_PREFIX}-panel-max-height: calc(var(--size-24) + var(--size-4));
-  ${COMPONENT_CSS_VAR_PREFIX}-textarea-min-height: var(--size-11);
-  ${COMPONENT_CSS_VAR_PREFIX}-textarea-max-height: calc(var(--size-12) * 3);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-family: var(--ld-font-family);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size: var(--ld-font-base);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size-sm: var(--ld-font-sm);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size-xs: var(--ld-font-xs);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size-lg: var(--ld-font-lg);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-regular: 400;
+  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-medium: 500;
+  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-semibold: 600;
+  ${COMPONENT_CSS_VAR_PREFIX}-line-height: var(--ld-line-normal);
+  ${COMPONENT_CSS_VAR_PREFIX}-line-height-bubble: 1.6;
+  ${COMPONENT_CSS_VAR_PREFIX}-space-1: var(--ld-spacing-3xs);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-2: var(--ld-spacing-2xs);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-3: var(--ld-spacing-xs);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-4: var(--ld-spacing-sm);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-5: var(--ld-spacing-md);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-6: var(--ld-spacing-lg);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-8: var(--ld-spacing-xl);
+  ${COMPONENT_CSS_VAR_PREFIX}-avatar-size: calc(var(--ld-px-40) + var(--ld-px-4));
+  ${COMPONENT_CSS_VAR_PREFIX}-mention-avatar-size: var(--ld-px-36);
+  ${COMPONENT_CSS_VAR_PREFIX}-toolbar-button-size: var(--ld-px-36);
+  ${COMPONENT_CSS_VAR_PREFIX}-input-button-size: calc(var(--ld-px-40) + var(--ld-px-4));
+  ${COMPONENT_CSS_VAR_PREFIX}-file-icon-size: var(--ld-px-48);
+  ${COMPONENT_CSS_VAR_PREFIX}-image-max-size: var(--ld-px-260);
+  ${COMPONENT_CSS_VAR_PREFIX}-panel-max-height: var(--ld-px-220);
+  ${COMPONENT_CSS_VAR_PREFIX}-textarea-min-height: calc(var(--ld-px-40) + var(--ld-px-4));
+  ${COMPONENT_CSS_VAR_PREFIX}-textarea-max-height: calc(var(--ld-px-64) + var(--ld-px-56));
   ${COMPONENT_CSS_VAR_PREFIX}-message-max-width: 65%;
   ${COMPONENT_CSS_VAR_PREFIX}-system-message-max-width: 80%;
-  ${COMPONENT_CSS_VAR_PREFIX}-file-bubble-min-width: calc(var(--size-24) + var(--size-4));
-  ${COMPONENT_CSS_VAR_PREFIX}-border-width: var(--size-border-width-thin);
-  ${COMPONENT_CSS_VAR_PREFIX}-border-width-drop: var(--size-border-width-medium);
-  ${COMPONENT_CSS_VAR_PREFIX}-radius-xs: var(--size-radius-sm);
-  ${COMPONENT_CSS_VAR_PREFIX}-radius-sm: var(--size-radius-md);
-  ${COMPONENT_CSS_VAR_PREFIX}-radius-md: var(--size-radius-lg);
-  ${COMPONENT_CSS_VAR_PREFIX}-radius-lg: var(--size-radius-xl);
-  ${COMPONENT_CSS_VAR_PREFIX}-radius-pill: var(--size-radius-full);
-  ${COMPONENT_CSS_VAR_PREFIX}-radius-circle: var(--size-radius-circle);
-  ${COMPONENT_CSS_VAR_PREFIX}-transition-fast: var(--size-duration-fast) var(--size-ease-out);
-  ${COMPONENT_CSS_VAR_PREFIX}-transition-normal: var(--size-duration-normal) var(--size-ease-out);
-  ${COMPONENT_CSS_VAR_PREFIX}-z-overlay: var(--size-z-dropdown);
-  ${COMPONENT_CSS_VAR_PREFIX}-z-mention: var(--size-z-popover);
+  ${COMPONENT_CSS_VAR_PREFIX}-file-bubble-min-width: var(--ld-px-220);
+  ${COMPONENT_CSS_VAR_PREFIX}-border-width: var(--ld-border-width-thin);
+  ${COMPONENT_CSS_VAR_PREFIX}-border-width-drop: var(--ld-border-width-medium);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-xs: var(--ld-radius-sm);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-sm: var(--ld-radius-md);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-md: var(--ld-radius-lg);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-lg: var(--ld-radius-xl);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-pill: var(--ld-radius-full);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-circle: var(--ld-radius-full);
+  ${COMPONENT_CSS_VAR_PREFIX}-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  ${COMPONENT_CSS_VAR_PREFIX}-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  ${COMPONENT_CSS_VAR_PREFIX}-z-overlay: 1000;
+  ${COMPONENT_CSS_VAR_PREFIX}-z-mention: 1100;
+  ${COMPONENT_CSS_VAR_PREFIX}-icon-size: var(--ld-px-24);
 `;
 	}
 	function generateCSS(tokens, p) {
@@ -1264,7 +883,7 @@ ${sizeVars()}
 }
 
 .${p}-message-list::-webkit-scrollbar {
-  width: var(--size-3);
+  width: var(--ld-px-4);
 }
 
 .${p}-message-list::-webkit-scrollbar-thumb {
@@ -1563,8 +1182,8 @@ ${sizeVars()}
 }
 
 .${p}-send-btn svg {
-  width: var(--size-7);
-  height: var(--size-7);
+  width: var(--ldesign-chat-icon-size);
+  height: var(--ldesign-chat-icon-size);
 }
 
 .${p}-mention-panel {
@@ -1661,8 +1280,8 @@ ${sizeVars()}
 }
 
 .${p}-toolbar-btn svg {
-  width: var(--size-6);
-  height: var(--size-6);
+  width: var(--ldesign-chat-space-6);
+  height: var(--ldesign-chat-space-6);
 }
 
 .${p}-toolbar-btn:hover {
@@ -1716,18 +1335,1251 @@ ${sizeVars()}
 }
 `;
 	}
-	function v(name) {
-		return `var(${COMPONENT_CSS_VAR_PREFIX}-${name})`;
+	function v(name) {
+		return `var(${COMPONENT_CSS_VAR_PREFIX}-${name})`;
+	}
+	function toKebab(key) {
+		return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+	}
+	//#endregion
+	//#region src/renderer/dom-renderer.ts
+	const SEND_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line><polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon></svg>";
+	const ICON_IMAGE = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>";
+	const ICON_PAPERCLIP = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\"/></svg>";
+	const ICON_MIC = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/></svg>";
+	const ICON_MIC_OFF = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/><path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\"/><path d=\"M5 10v2a7 7 0 0 0 12 5.29\"/><path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\"/><path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/></svg>";
+	const FILE_ICON = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/></svg>";
+	const ALLOWED_CUSTOM_TAGS = /* @__PURE__ */ new Set([
+		"a",
+		"b",
+		"blockquote",
+		"br",
+		"code",
+		"div",
+		"em",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"i",
+		"img",
+		"li",
+		"ol",
+		"p",
+		"pre",
+		"s",
+		"span",
+		"strong",
+		"u",
+		"ul"
+	]);
+	const DANGEROUS_CUSTOM_TAGS = /* @__PURE__ */ new Set([
+		"iframe",
+		"object",
+		"embed",
+		"script",
+		"style",
+		"svg",
+		"math",
+		"template",
+		"form",
+		"input",
+		"button",
+		"link",
+		"meta",
+		"base"
+	]);
+	const STATUS_MAP = {
+		sending: "...",
+		sent: "✓",
+		delivered: "✓✓",
+		read: "✓✓",
+		failed: "!"
+	};
+	var DOMRenderer = class {
+		constructor(container, config, emitter, mentionEngine) {
+			this.inputArea = null;
+			this.textareaEl = null;
+			this.sendBtn = null;
+			this.mentionPanel = null;
+			this.loadMoreEl = null;
+			this.toolbarEl = null;
+			this.dropOverlay = null;
+			this.voiceBtn = null;
+			this.loadingMore = false;
+			this.isRecording = false;
+			this.recognition = null;
+			this.lastVoiceTranscript = "";
+			this.destroyed = false;
+			this.pendingFileInputs = /* @__PURE__ */ new Set();
+			this.container = container;
+			this.document = container.ownerDocument;
+			this.config = config;
+			this.emitter = emitter;
+			this.mentionEngine = mentionEngine;
+			this.prefix = normalizeClassPrefix(config.classPrefix ?? "ldesign-chat");
+		}
+		init() {
+			if (this.destroyed) return;
+			this.container.innerHTML = "";
+			this.root = this.el("div", `${this.prefix}-container`);
+			this.messageListEl = this.el("div", `${this.prefix}-message-list`);
+			this.root.appendChild(this.messageListEl);
+			if (this.config.showInput !== false) this.renderInputArea();
+			this.container.appendChild(this.root);
+			this.setupEventListeners();
+		}
+		updateMessageContent(id, content) {
+			const bubble = this.getMessageRow(id)?.querySelector(`.${this.prefix}-bubble`);
+			if (!bubble) return;
+			bubble.innerHTML = this.renderTextContent(content);
+		}
+		renderMessages(messages) {
+			this.messageListEl.innerHTML = "";
+			if (this.config.enableLoadMore) this.renderLoadMoreButton();
+			if (messages.length === 0) {
+				this.renderEmpty();
+				return;
+			}
+			let lastTimestamp = 0;
+			const interval = this.config.timeGroupInterval ?? 3e5;
+			for (const message of messages) {
+				if (this.config.showTimestamp !== false && message.timestamp - lastTimestamp > interval) {
+					this.renderTimeDivider(message.timestamp);
+					lastTimestamp = message.timestamp;
+				}
+				this.renderMessageRow(message);
+			}
+		}
+		appendMessage(message) {
+			this.removeEmpty();
+			const messageEls = this.getMessageElements();
+			const lastTime = messageEls.length > 0 ? Number.parseInt(messageEls[messageEls.length - 1].dataset.timestamp ?? "0", 10) : 0;
+			const interval = this.config.timeGroupInterval ?? 3e5;
+			if (this.config.showTimestamp !== false && message.timestamp - lastTime > interval) this.renderTimeDivider(message.timestamp);
+			this.renderMessageRow(message);
+		}
+		prependMessages(messages) {
+			if (!messages.length) return;
+			this.removeEmpty();
+			const scrollHeight = this.messageListEl.scrollHeight;
+			const scrollTop = this.messageListEl.scrollTop;
+			const fragment = this.document.createDocumentFragment();
+			let lastTimestamp = 0;
+			const interval = this.config.timeGroupInterval ?? 3e5;
+			for (const message of messages) {
+				if (this.config.showTimestamp !== false && message.timestamp - lastTimestamp > interval) {
+					fragment.appendChild(this.createTimeDivider(message.timestamp));
+					lastTimestamp = message.timestamp;
+				}
+				fragment.appendChild(this.createMessageRow(message));
+			}
+			const firstMessage = this.messageListEl.querySelector(`.${this.prefix}-message-row, .${this.prefix}-time-divider`);
+			if (firstMessage) firstMessage.before(fragment);
+			else if (this.loadMoreEl) this.loadMoreEl.after(fragment);
+			else this.messageListEl.appendChild(fragment);
+			this.messageListEl.scrollTop = scrollTop + (this.messageListEl.scrollHeight - scrollHeight);
+		}
+		updateMessage(id, message) {
+			const rowEl = this.getMessageRow(id);
+			if (!rowEl) return;
+			rowEl.replaceWith(this.createMessageRow({
+				...message,
+				id
+			}));
+		}
+		removeMessage(id) {
+			this.getMessageRow(id)?.remove();
+			this.refreshTimeDividers();
+			if (this.getMessageElements().length === 0) this.renderEmpty();
+			else this.removeEmpty();
+		}
+		scrollToBottom(smooth = true) {
+			if (typeof this.messageListEl.scrollTo === "function") {
+				this.messageListEl.scrollTo({
+					top: this.messageListEl.scrollHeight,
+					behavior: smooth ? "smooth" : "auto"
+				});
+				return;
+			}
+			this.messageListEl.scrollTop = this.messageListEl.scrollHeight;
+		}
+		isAtBottom(threshold = 4) {
+			return this.messageListEl.scrollHeight - this.messageListEl.scrollTop - this.messageListEl.clientHeight <= threshold;
+		}
+		setLoadingMore(loading) {
+			this.loadingMore = loading;
+			if (!this.loadMoreEl) return;
+			this.loadMoreEl.textContent = loading ? "加载中..." : this.config.loadMoreText ?? "加载更多";
+			this.loadMoreEl.classList.toggle(`${this.prefix}-load-more--loading`, loading);
+		}
+		setThemeTokens(tokens) {
+			if (this.root) applyThemeTokens(this.root, tokens);
+		}
+		getRootElement() {
+			return this.root;
+		}
+		focusInput() {
+			this.textareaEl?.focus();
+		}
+		setInputContent(content) {
+			if (!this.textareaEl) return;
+			this.textareaEl.value = this.limitInput(content);
+			this.autoResize();
+			this.updateSendButtonState();
+			this.config.onInputChange?.(this.textareaEl.value);
+		}
+		getInputContent() {
+			return this.textareaEl?.value ?? "";
+		}
+		clearInput() {
+			this.setInputContent("");
+		}
+		renderMentionPanel(members, activeIndex) {
+			if (!this.mentionPanel) return;
+			if (members.length === 0) {
+				this.mentionPanel.style.display = "none";
+				return;
+			}
+			this.mentionPanel.style.display = "block";
+			this.mentionPanel.innerHTML = "";
+			members.forEach((member, index) => {
+				const item = this.el("div", cx(`${this.prefix}-mention-item`, index === activeIndex && `${this.prefix}-mention-item--active`));
+				item.setAttribute("role", "option");
+				item.setAttribute("aria-selected", String(index === activeIndex));
+				const avatar = this.el("div", `${this.prefix}-mention-item-avatar`);
+				if (member.avatar) {
+					const img = this.document.createElement("img");
+					img.src = this.safeResourceUrl(member.avatar);
+					img.alt = "";
+					avatar.appendChild(img);
+				} else avatar.textContent = member.name[0]?.toUpperCase() ?? "";
+				item.appendChild(avatar);
+				const name = this.el("span", `${this.prefix}-mention-item-name`);
+				name.textContent = member.name;
+				item.appendChild(name);
+				item.addEventListener("mousedown", (event) => event.preventDefault());
+				item.addEventListener("click", () => {
+					const triggerPosition = this.mentionEngine.getState().triggerPosition;
+					const selectionEnd = this.textareaEl?.selectionEnd;
+					const selected = this.mentionEngine.select(index);
+					if (selected) this.insertMention(selected, triggerPosition, selectionEnd);
+				});
+				this.mentionPanel?.appendChild(item);
+			});
+		}
+		hideMentionPanel() {
+			if (this.mentionPanel) this.mentionPanel.style.display = "none";
+		}
+		destroy() {
+			if (this.destroyed) return;
+			this.destroyed = true;
+			this.stopVoice();
+			this.finishVoice();
+			this.pendingFileInputs.forEach((input) => input.remove());
+			this.pendingFileInputs.clear();
+			this.root?.remove();
+		}
+		renderInputArea() {
+			this.inputArea = this.el("div", `${this.prefix}-input-area`);
+			const wrapper = this.el("div", `${this.prefix}-input-wrapper`);
+			this.mentionPanel = this.el("div", `${this.prefix}-mention-panel`);
+			this.mentionPanel.style.display = "none";
+			this.mentionPanel.setAttribute("role", "listbox");
+			wrapper.appendChild(this.mentionPanel);
+			if (this.config.enableToolbar !== false) this.renderToolbar(wrapper);
+			this.textareaEl = this.document.createElement("textarea");
+			this.textareaEl.className = `${this.prefix}-textarea`;
+			this.textareaEl.placeholder = this.config.inputPlaceholder ?? "输入消息...";
+			this.textareaEl.rows = 1;
+			if (this.config.maxInputLength && this.config.maxInputLength > 0) this.textareaEl.maxLength = this.config.maxInputLength;
+			wrapper.appendChild(this.textareaEl);
+			this.dropOverlay = this.el("div", `${this.prefix}-drop-overlay`);
+			this.dropOverlay.innerHTML = "<span>拖放文件到这里</span>";
+			this.dropOverlay.style.display = "none";
+			wrapper.appendChild(this.dropOverlay);
+			this.inputArea.appendChild(wrapper);
+			this.sendBtn = this.document.createElement("button");
+			this.sendBtn.className = `${this.prefix}-send-btn`;
+			this.sendBtn.innerHTML = SEND_ICON_SVG;
+			this.sendBtn.title = "发送";
+			this.sendBtn.type = "button";
+			this.sendBtn.disabled = true;
+			this.inputArea.appendChild(this.sendBtn);
+			this.root.appendChild(this.inputArea);
+		}
+		renderToolbar(wrapper) {
+			const toolbar = this.config.toolbarConfig ?? {};
+			this.toolbarEl = this.el("div", `${this.prefix}-toolbar`);
+			if (toolbar.image !== false) {
+				const imageBtn = this.createToolbarBtn(ICON_IMAGE, "插入图片");
+				imageBtn.addEventListener("click", () => this.openFilePicker("image/*"));
+				this.toolbarEl.appendChild(imageBtn);
+			}
+			if (toolbar.file !== false) {
+				const fileBtn = this.createToolbarBtn(ICON_PAPERCLIP, "插入文件");
+				fileBtn.addEventListener("click", () => this.openFilePicker("*/*"));
+				this.toolbarEl.appendChild(fileBtn);
+			}
+			if (toolbar.voice !== false) {
+				this.voiceBtn = this.createToolbarBtn(ICON_MIC, "语音输入");
+				this.voiceBtn.addEventListener("click", () => this.toggleVoice());
+				this.toolbarEl.appendChild(this.voiceBtn);
+			}
+			wrapper.insertBefore(this.toolbarEl, wrapper.firstChild);
+		}
+		createToolbarBtn(iconSvg, title) {
+			const btn = this.document.createElement("button");
+			btn.className = `${this.prefix}-toolbar-btn`;
+			btn.innerHTML = iconSvg;
+			btn.title = title;
+			btn.type = "button";
+			return btn;
+		}
+		openFilePicker(accept) {
+			const input = this.document.createElement("input");
+			input.type = "file";
+			input.accept = accept;
+			input.multiple = true;
+			input.style.display = "none";
+			this.pendingFileInputs.add(input);
+			const cleanup = () => {
+				input.remove();
+				this.pendingFileInputs.delete(input);
+			};
+			input.addEventListener("change", () => {
+				const files = Array.from(input.files ?? []);
+				cleanup();
+				if (!files.length) return;
+				const isImage = accept.startsWith("image");
+				this.emitter.emit(isImage ? "toolbar-image" : "toolbar-file", files);
+				if (isImage) this.config.onImageUpload?.(files);
+				else this.config.onFileUpload?.(files);
+			});
+			input.addEventListener("cancel", cleanup);
+			(this.document.body ?? this.document.documentElement).appendChild(input);
+			input.click();
+		}
+		toggleVoice() {
+			if (this.isRecording) this.stopVoice();
+			else this.startVoice();
+		}
+		startVoice() {
+			const view = this.document.defaultView;
+			const SpeechRecognition = view?.SpeechRecognition || view?.webkitSpeechRecognition;
+			if (!SpeechRecognition) {
+				this.emitter.emit("toolbar-voice-unsupported");
+				this.config.onVoiceUnsupported?.();
+				return;
+			}
+			try {
+				this.lastVoiceTranscript = "";
+				const recognition = new SpeechRecognition();
+				const finalSegments = /* @__PURE__ */ new Map();
+				recognition.continuous = false;
+				recognition.interimResults = true;
+				recognition.lang = this.config.voiceLang ?? "zh-CN";
+				this.recognition = recognition;
+				recognition.onresult = (event) => {
+					if (this.destroyed || this.recognition !== recognition) return;
+					const firstChangedResult = Math.max(0, event.resultIndex ?? 0);
+					const newFinalSegments = [];
+					for (let index = firstChangedResult; index < event.results.length; index++) {
+						const result = event.results[index];
+						if (!result?.isFinal || finalSegments.has(index)) continue;
+						finalSegments.set(index, result[0].transcript);
+						newFinalSegments.push(result[0].transcript);
+					}
+					this.lastVoiceTranscript = [...finalSegments.entries()].sort(([left], [right]) => left - right).map(([, transcript]) => transcript).join("");
+					if (newFinalSegments.length && this.textareaEl) this.insertTextAtCursor(newFinalSegments.join(""));
+				};
+				recognition.onend = () => {
+					if (this.destroyed || this.recognition !== recognition) return;
+					const transcript = this.lastVoiceTranscript;
+					this.finishVoice();
+					this.emitter.emit("toolbar-voice-end", transcript);
+					this.config.onVoiceEnd?.(transcript);
+				};
+				recognition.onerror = (error) => {
+					if (this.destroyed || this.recognition !== recognition) return;
+					this.finishVoice();
+					this.emitter.emit("toolbar-voice-error", error);
+					this.config.onVoiceError?.(error);
+				};
+				this.isRecording = true;
+				this.voiceBtn?.classList.add(`${this.prefix}-toolbar-btn--active`);
+				if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC_OFF;
+				recognition.start();
+				this.emitter.emit("toolbar-voice-start");
+				this.config.onVoiceStart?.();
+			} catch (error) {
+				this.finishVoice();
+				this.emitter.emit("toolbar-voice-error", error);
+				this.config.onVoiceError?.(error);
+			}
+		}
+		stopVoice() {
+			if (!this.recognition) return;
+			const recognition = this.recognition;
+			try {
+				recognition.stop();
+			} catch {
+				this.finishVoice();
+			}
+		}
+		finishVoice() {
+			this.isRecording = false;
+			this.recognition = null;
+			this.voiceBtn?.classList.remove(`${this.prefix}-toolbar-btn--active`);
+			if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC;
+		}
+		setupEventListeners() {
+			if (this.textareaEl) {
+				this.textareaEl.addEventListener("input", () => {
+					const limited = this.limitInput(this.textareaEl?.value ?? "");
+					if (this.textareaEl && limited !== this.textareaEl.value) this.textareaEl.value = limited;
+					this.autoResize();
+					this.updateSendButtonState();
+					this.config.onInputChange?.(this.textareaEl?.value ?? "");
+					if (this.config.enableMention && this.textareaEl) this.mentionEngine.handleInput(this.textareaEl.value, this.textareaEl.selectionStart);
+				});
+				this.textareaEl.addEventListener("keydown", (event) => {
+					const mentionState = this.mentionEngine.getState();
+					if (mentionState.active) {
+						if (event.key === "ArrowUp") {
+							event.preventDefault();
+							this.mentionEngine.moveUp();
+						} else if (event.key === "ArrowDown") {
+							event.preventDefault();
+							this.mentionEngine.moveDown();
+						} else if (event.key === "Enter" && !event.shiftKey) {
+							event.preventDefault();
+							const triggerPosition = mentionState.triggerPosition;
+							const selectionEnd = this.textareaEl.selectionEnd;
+							const member = this.mentionEngine.selectCurrent();
+							if (member) this.insertMention(member, triggerPosition, selectionEnd);
+						} else if (event.key === "Escape") {
+							event.preventDefault();
+							this.mentionEngine.deactivate();
+						}
+						return;
+					}
+					if (this.config.enterToSend !== false && event.key === "Enter" && !event.shiftKey) {
+						event.preventDefault();
+						this.handleSend();
+					}
+				});
+				this.textareaEl.addEventListener("paste", (event) => {
+					const items = event.clipboardData?.items;
+					if (!items) return;
+					const files = [];
+					for (let i = 0; i < items.length; i++) if (items[i].kind === "file") {
+						const file = items[i].getAsFile();
+						if (file) files.push(file);
+					}
+					if (files.length > 0) {
+						event.preventDefault();
+						this.emitter.emit("toolbar-paste", files);
+						this.config.onPaste?.(files);
+					}
+				});
+			}
+			if (this.inputArea) {
+				const wrapper = this.inputArea.querySelector(`.${this.prefix}-input-wrapper`);
+				if (wrapper) this.setupDropEvents(wrapper);
+			}
+			this.sendBtn?.addEventListener("click", () => {
+				this.handleSend();
+			});
+			this.emitter.on("mention-filter", (state) => {
+				this.renderMentionPanel(state.filtered, state.activeIndex);
+			});
+			this.emitter.on("mention-active-change", (index) => {
+				(this.mentionPanel?.querySelectorAll(`.${this.prefix}-mention-item`))?.forEach((el, i) => {
+					el.classList.toggle(`${this.prefix}-mention-item--active`, i === index);
+					el.setAttribute("aria-selected", String(i === index));
+				});
+			});
+			this.emitter.on("mention-deactivate", () => {
+				this.hideMentionPanel();
+			});
+		}
+		setupDropEvents(wrapper) {
+			let dragCounter = 0;
+			wrapper.addEventListener("dragenter", (event) => {
+				event.preventDefault();
+				dragCounter++;
+				if (this.dropOverlay) this.dropOverlay.style.display = "flex";
+			});
+			wrapper.addEventListener("dragleave", (event) => {
+				event.preventDefault();
+				dragCounter--;
+				if (dragCounter <= 0) {
+					dragCounter = 0;
+					if (this.dropOverlay) this.dropOverlay.style.display = "none";
+				}
+			});
+			wrapper.addEventListener("dragover", (event) => {
+				event.preventDefault();
+			});
+			wrapper.addEventListener("drop", (event) => {
+				event.preventDefault();
+				dragCounter = 0;
+				if (this.dropOverlay) this.dropOverlay.style.display = "none";
+				const files = Array.from(event.dataTransfer?.files ?? []);
+				if (files.length > 0) {
+					this.emitter.emit("toolbar-drop", files);
+					this.config.onDrop?.(files);
+				}
+			});
+		}
+		handleSend() {
+			const content = (this.textareaEl?.value ?? "").trim();
+			if (!content) return;
+			const mentions = this.mentionEngine.parseMentions(content);
+			this.emitter.emit("send", content, mentions);
+			this.config.onSend?.(content, mentions);
+			if (this.config.clearInputOnSend !== false) this.clearInput();
+			this.mentionEngine.resetSelected();
+		}
+		insertMention(member, triggerPosition, selectionEnd) {
+			if (!this.textareaEl) return;
+			const state = this.mentionEngine.getState();
+			const text = this.textareaEl.value;
+			const end = selectionEnd ?? this.textareaEl.selectionEnd;
+			const insertText = this.mentionEngine.getInsertText(member);
+			const before = text.slice(0, triggerPosition ?? state.triggerPosition);
+			const after = text.slice(end);
+			this.textareaEl.value = this.limitInput(before + insertText + after);
+			const newPos = Math.min(before.length + insertText.length, this.textareaEl.value.length);
+			this.textareaEl.setSelectionRange(newPos, newPos);
+			this.textareaEl.focus();
+			this.autoResize();
+			this.updateSendButtonState();
+			this.config.onInputChange?.(this.textareaEl.value);
+		}
+		insertTextAtCursor(text) {
+			if (!this.textareaEl) return;
+			const current = this.textareaEl.value;
+			const start = this.textareaEl.selectionStart;
+			const end = this.textareaEl.selectionEnd;
+			this.textareaEl.value = this.limitInput(current.slice(0, start) + text + current.slice(end));
+			const nextCursor = Math.min(start + text.length, this.textareaEl.value.length);
+			this.textareaEl.setSelectionRange(nextCursor, nextCursor);
+			this.autoResize();
+			this.updateSendButtonState();
+			this.config.onInputChange?.(this.textareaEl.value);
+		}
+		autoResize() {
+			if (!this.textareaEl) return;
+			this.textareaEl.style.height = "auto";
+			this.textareaEl.style.height = `${this.textareaEl.scrollHeight}px`;
+		}
+		updateSendButtonState() {
+			if (!this.sendBtn) return;
+			this.sendBtn.disabled = !this.getInputContent().trim();
+		}
+		renderLoadMoreButton() {
+			this.loadMoreEl = this.el("div", `${this.prefix}-load-more`);
+			this.loadMoreEl.textContent = this.config.loadMoreText ?? "加载更多";
+			this.loadMoreEl.addEventListener("click", () => {
+				if (this.destroyed || this.loadingMore) return;
+				this.setLoadingMore(true);
+				this.emitter.emit("load-more");
+				this.loadMore();
+			});
+			this.messageListEl.appendChild(this.loadMoreEl);
+		}
+		async loadMore() {
+			try {
+				await this.config.onLoadMore?.();
+			} catch (error) {
+				this.emitter.emit("load-more-error", error);
+			} finally {
+				if (!this.destroyed) this.setLoadingMore(false);
+			}
+		}
+		renderTimeDivider(timestamp) {
+			this.messageListEl.appendChild(this.createTimeDivider(timestamp));
+		}
+		createTimeDivider(timestamp) {
+			const divider = this.el("div", `${this.prefix}-time-divider`);
+			const span = this.document.createElement("span");
+			span.textContent = this.formatTime(timestamp);
+			divider.appendChild(span);
+			return divider;
+		}
+		renderMessageRow(message) {
+			this.messageListEl.appendChild(this.createMessageRow(message));
+		}
+		createMessageRow(message) {
+			const p = this.prefix;
+			if (message.type === "system") {
+				const row2 = this.el("div", cx(`${p}-message-row`, `${p}-message-row--system`));
+				row2.dataset.msgId = message.id;
+				row2.dataset.timestamp = String(message.timestamp);
+				const system = this.el("div", `${p}-system-message`);
+				system.textContent = message.content ?? "";
+				row2.appendChild(system);
+				return row2;
+			}
+			const isOutgoing = message.direction === "outgoing";
+			const row = this.el("div", cx(`${p}-message-row`, isOutgoing && `${p}-message-row--outgoing`));
+			row.dataset.msgId = message.id;
+			row.dataset.timestamp = String(message.timestamp);
+			if (this.config.showAvatar !== false) row.appendChild(this.createAvatar(message.sender.nickname, message.sender.avatar));
+			const body = this.el("div", `${p}-message-body`);
+			if (this.config.showNickname !== false && !isOutgoing) {
+				const nickname = this.el("div", `${p}-nickname`);
+				nickname.textContent = message.sender.nickname;
+				body.appendChild(nickname);
+			}
+			body.appendChild(this.createBubble(message, isOutgoing));
+			body.appendChild(this.createMessageFooter(message, isOutgoing));
+			row.appendChild(body);
+			row.addEventListener("click", () => {
+				this.emitter.emit("message-click", message);
+				this.config.onMessageClick?.(message);
+			});
+			return row;
+		}
+		createAvatar(name, avatarUrl) {
+			const avatar = this.el("div", `${this.prefix}-avatar`);
+			if (avatarUrl) {
+				const img = this.document.createElement("img");
+				img.src = this.safeResourceUrl(avatarUrl);
+				img.alt = name;
+				avatar.appendChild(img);
+			} else avatar.textContent = name[0]?.toUpperCase() ?? "";
+			return avatar;
+		}
+		createMessageFooter(message, isOutgoing) {
+			const footer = this.el("div", `${this.prefix}-message-footer`);
+			if (this.config.showTimestamp !== false) {
+				const time = this.el("span", `${this.prefix}-timestamp`);
+				time.textContent = this.formatShortTime(message.timestamp);
+				footer.appendChild(time);
+			}
+			if (this.config.showStatus !== false && isOutgoing && message.status) {
+				const status = this.el("span", cx(`${this.prefix}-status`, `${this.prefix}-status--${message.status}`));
+				status.textContent = STATUS_MAP[message.status] ?? "";
+				if (message.status === "failed") status.addEventListener("click", (event) => {
+					event.stopPropagation();
+					this.emitter.emit("message-retry", message);
+				});
+				footer.appendChild(status);
+			}
+			return footer;
+		}
+		createBubble(message, isOutgoing) {
+			const p = this.prefix;
+			const dirClass = isOutgoing ? `${p}-bubble--outgoing` : `${p}-bubble--incoming`;
+			if (message.revoked) {
+				const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--revoked`));
+				bubble.textContent = "消息已撤回";
+				return bubble;
+			}
+			switch (message.type) {
+				case "image": {
+					const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--image`));
+					if (message.image) {
+						const img = this.document.createElement("img");
+						img.src = this.safeResourceUrl(message.image.thumbUrl ?? message.image.url);
+						img.alt = message.content ?? "";
+						if (message.image.width) img.width = Math.min(message.image.width, 240);
+						bubble.appendChild(img);
+					}
+					return bubble;
+				}
+				case "file": {
+					const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--file`));
+					const icon = this.el("div", `${p}-file-icon`);
+					icon.innerHTML = FILE_ICON;
+					bubble.appendChild(icon);
+					const info = this.el("div", `${p}-file-info`);
+					const name = this.el("div", `${p}-file-name`);
+					name.textContent = message.file?.name ?? "file";
+					info.appendChild(name);
+					if (message.file?.size) {
+						const size = this.el("div", `${p}-file-size`);
+						size.textContent = this.formatFileSize(message.file.size);
+						info.appendChild(size);
+					}
+					bubble.appendChild(info);
+					return bubble;
+				}
+				case "custom": {
+					const bubble = this.el("div", cx(`${p}-bubble`, dirClass));
+					if (message.customHtml) this.setSanitizedCustomHtml(bubble, message.customHtml);
+					else bubble.textContent = message.content ?? "";
+					return bubble;
+				}
+				default: {
+					const bubble = this.el("div", cx(`${p}-bubble`, dirClass, message.streaming && `${p}-bubble--streaming`));
+					if (message.contentBlocks?.length) this.renderContentBlocks(bubble, message.contentBlocks);
+					else bubble.innerHTML = this.renderTextContent(message.content ?? "", message.mentions);
+					return bubble;
+				}
+			}
+		}
+		renderContentBlocks(target, blocks) {
+			target.replaceChildren();
+			for (const block of blocks) switch (block.type) {
+				case "text":
+					target.appendChild(this.document.createTextNode(block.text));
+					break;
+				case "mention": {
+					const mention = this.el("span", `${this.prefix}-mention-tag`);
+					mention.dataset.mentionId = block.id;
+					mention.textContent = `@${block.label}`;
+					target.appendChild(mention);
+					break;
+				}
+				case "link": {
+					const link = this.document.createElement("a");
+					const safeUrl = this.safeUrl(block.url, [
+						"http:",
+						"https:",
+						"mailto:"
+					]);
+					link.className = `${this.prefix}-link`;
+					link.textContent = block.label ?? block.url;
+					if (safeUrl) {
+						link.href = safeUrl;
+						link.target = "_blank";
+						link.rel = "noopener noreferrer";
+					}
+					target.appendChild(link);
+					break;
+				}
+				case "code": {
+					const code = this.document.createElement("code");
+					code.textContent = block.code;
+					if (block.language) code.dataset.language = block.language;
+					target.appendChild(code);
+					break;
+				}
+				case "image": {
+					const image = this.document.createElement("img");
+					const safeUrl = this.safeResourceUrl(block.src);
+					const width = block.width;
+					const height = block.height;
+					if (safeUrl) image.src = safeUrl;
+					image.alt = block.alt ?? "";
+					image.loading = "lazy";
+					if (Number.isFinite(width) && width > 0) image.width = width;
+					if (Number.isFinite(height) && height > 0) image.height = height;
+					target.appendChild(image);
+					break;
+				}
+				case "file": {
+					const file = this.document.createElement("a");
+					const safeUrl = this.safeResourceUrl(block.url);
+					file.className = `${this.prefix}-file-link`;
+					file.textContent = block.name;
+					if (safeUrl) {
+						file.href = safeUrl;
+						file.target = "_blank";
+						file.rel = "noopener noreferrer";
+					}
+					target.appendChild(file);
+					break;
+				}
+				case "break":
+					target.appendChild(this.document.createElement("br"));
+					break;
+				case "custom":
+					target.appendChild(this.document.createTextNode(block.fallback ?? `[${block.kind}]`));
+					break;
+			}
+		}
+		renderTextContent(content, mentions) {
+			let html = this.escapeHtml(content);
+			if (mentions?.length) for (const mention of mentions) {
+				const tag = `<span class="${this.prefix}-mention-tag" data-mention-id="${this.escapeAttr(mention.id)}">@${this.escapeHtml(mention.name)}</span>`;
+				html = html.replace(new RegExp(`@${this.escapeRegex(mention.name)}`, "g"), tag);
+			}
+			return html.replace(/(https?:\/\/[^\s<]+)/g, `<a class="${this.prefix}-link" href="$1" target="_blank" rel="noopener noreferrer">$1</a>`);
+		}
+		setSanitizedCustomHtml(target, html) {
+			const template = this.document.createElement("template");
+			template.innerHTML = html;
+			const fragment = this.document.createDocumentFragment();
+			for (const node of Array.from(template.content.childNodes)) {
+				const sanitized = this.sanitizeCustomNode(node);
+				if (sanitized) fragment.appendChild(sanitized);
+			}
+			target.replaceChildren(fragment);
+		}
+		sanitizeCustomNode(node) {
+			if (node.nodeType === 3) return this.document.createTextNode(node.textContent ?? "");
+			if (node.nodeType !== 1) return null;
+			const source = node;
+			const tagName = source.tagName.toLowerCase();
+			if (DANGEROUS_CUSTOM_TAGS.has(tagName)) return null;
+			if (!ALLOWED_CUSTOM_TAGS.has(tagName)) {
+				const fragment = this.document.createDocumentFragment();
+				for (const child of Array.from(source.childNodes)) {
+					const sanitized = this.sanitizeCustomNode(child);
+					if (sanitized) fragment.appendChild(sanitized);
+				}
+				return fragment;
+			}
+			const element = this.document.createElement(tagName);
+			const title = source.getAttribute("title");
+			if (title) element.setAttribute("title", title);
+			const ariaLabel = source.getAttribute("aria-label");
+			if (ariaLabel) element.setAttribute("aria-label", ariaLabel);
+			if (tagName === "a") {
+				const href = source.getAttribute("href");
+				const safeHref = href ? this.safeUrl(href, [
+					"http:",
+					"https:",
+					"mailto:"
+				]) : null;
+				if (safeHref) element.setAttribute("href", safeHref);
+				const target = source.getAttribute("target");
+				if (target === "_blank" || target === "_self") element.setAttribute("target", target);
+				element.setAttribute("rel", "noopener noreferrer");
+			}
+			if (tagName === "img") {
+				const src = source.getAttribute("src");
+				const safeSrc = src ? this.safeUrl(src, [
+					"http:",
+					"https:",
+					"blob:"
+				]) : null;
+				if (safeSrc) element.setAttribute("src", safeSrc);
+				element.setAttribute("alt", source.getAttribute("alt") ?? "");
+				for (const dimension of ["width", "height"]) {
+					const value = Number(source.getAttribute(dimension));
+					if (Number.isFinite(value) && value > 0) element.setAttribute(dimension, String(value));
+				}
+				element.setAttribute("loading", "lazy");
+			}
+			for (const child of Array.from(source.childNodes)) {
+				const sanitized = this.sanitizeCustomNode(child);
+				if (sanitized) element.appendChild(sanitized);
+			}
+			return element;
+		}
+		safeResourceUrl(value) {
+			if (!value) return "";
+			return this.safeUrl(value, [
+				"http:",
+				"https:",
+				"blob:"
+			]) ?? "";
+		}
+		safeUrl(value, protocols) {
+			const trimmed = value.trim();
+			if (!trimmed || [...trimmed].some((character) => {
+				const code = character.charCodeAt(0);
+				return code < 32 || code === 127;
+			})) return null;
+			try {
+				const resolved = new URL(trimmed, this.document.baseURI);
+				return protocols.includes(resolved.protocol) ? trimmed : null;
+			} catch {
+				return null;
+			}
+		}
+		renderEmpty() {
+			if (this.messageListEl.querySelector(`.${this.prefix}-empty`)) return;
+			const empty = this.el("div", `${this.prefix}-empty`);
+			empty.textContent = "暂无消息";
+			this.messageListEl.appendChild(empty);
+		}
+		removeEmpty() {
+			this.messageListEl.querySelector(`.${this.prefix}-empty`)?.remove();
+		}
+		el(tag, className) {
+			const el = this.document.createElement(tag);
+			el.className = className;
+			return el;
+		}
+		getMessageElements() {
+			return Array.from(this.messageListEl.querySelectorAll(`.${this.prefix}-message-row`));
+		}
+		getMessageRow(id) {
+			return this.getMessageElements().find((element) => element.dataset.msgId === id) ?? null;
+		}
+		refreshTimeDividers() {
+			this.messageListEl.querySelectorAll(`.${this.prefix}-time-divider`).forEach((divider) => divider.remove());
+			const interval = this.config.timeGroupInterval ?? 3e5;
+			let previousTimestamp = 0;
+			for (const row of this.getMessageElements()) {
+				const timestamp = Number(row.dataset.timestamp ?? 0);
+				if (this.config.showTimestamp !== false && timestamp - previousTimestamp > interval) row.before(this.createTimeDivider(timestamp));
+				previousTimestamp = timestamp;
+			}
+		}
+		formatTime(timestamp) {
+			if (this.config.formatTime) return this.config.formatTime(timestamp);
+			const date = new Date(timestamp);
+			const now = /* @__PURE__ */ new Date();
+			if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("zh-CN", {
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+			return date.toLocaleDateString("zh-CN", {
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+		}
+		formatShortTime(timestamp) {
+			return new Date(timestamp).toLocaleTimeString("zh-CN", {
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+		}
+		formatFileSize(bytes) {
+			if (bytes < 1024) return `${bytes} B`;
+			if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+			return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+		}
+		limitInput(content) {
+			const max = this.config.maxInputLength;
+			if (!max || max <= 0) return content;
+			return content.slice(0, max);
+		}
+		escapeHtml(str) {
+			const div = this.document.createElement("div");
+			div.textContent = str;
+			return div.innerHTML;
+		}
+		escapeAttr(str) {
+			return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		}
+		escapeRegex(str) {
+			return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		}
+	};
+	//#endregion
+	//#region src/theme/tokens.ts
+	const lightTokens = {
+		bgPrimary: "var(--ld-bg-surface)",
+		bgSecondary: "var(--ld-bg-surface-soft)",
+		bgBubbleOutgoing: "var(--ld-primary-default)",
+		bgBubbleIncoming: "var(--ld-bg-surface-soft)",
+		bgInput: "var(--ld-bg-surface)",
+		bgMention: "var(--ld-bg-surface)",
+		bgMentionHover: "var(--ld-primary-50)",
+		bgMentionActive: "var(--ld-primary-100)",
+		bgLoadMore: "var(--ld-bg-surface-soft)",
+		bgSystemMessage: "var(--ld-bg-surface-soft)",
+		bgDropOverlay: "color-mix(in srgb, var(--ld-primary-default) 10%, var(--ld-bg-surface))",
+		bgDangerSoft: "color-mix(in srgb, var(--ld-danger-default) 12%, var(--ld-bg-surface))",
+		textPrimary: "var(--ld-text-primary)",
+		textSecondary: "var(--ld-text-secondary)",
+		textBubbleOutgoing: "var(--ld-gray-50)",
+		textBubbleIncoming: "var(--ld-text-primary)",
+		textMention: "var(--ld-text-primary)",
+		textMentionTag: "var(--ld-primary-default)",
+		textTimestamp: "var(--ld-text-muted)",
+		textSystem: "var(--ld-text-secondary)",
+		textPlaceholder: "var(--ld-text-muted)",
+		borderPrimary: "var(--ld-border)",
+		borderInput: "var(--ld-gray-300)",
+		borderInputFocus: "var(--ld-primary-default)",
+		borderMention: "var(--ld-border)",
+		colorSending: "var(--ld-gray-400)",
+		colorSent: "var(--ld-gray-500)",
+		colorDelivered: "var(--ld-primary-default)",
+		colorRead: "var(--ld-success-default)",
+		colorFailed: "var(--ld-danger-default)",
+		colorLink: "var(--ld-primary-default)",
+		shadowPanel: "none",
+		shadowMention: "none",
+		avatarBg: "var(--ld-primary-default)",
+		avatarText: "var(--ld-gray-50)",
+		btnPrimaryBg: "var(--ld-primary-default)",
+		btnPrimaryText: "var(--ld-gray-50)",
+		btnPrimaryHover: "var(--ld-primary-hover)",
+		scrollbarThumb: "var(--ld-gray-300)",
+		scrollbarTrack: "var(--ld-gray-100)",
+		bgToolbar: "var(--ld-bg-surface-soft)",
+		borderToolbar: "var(--ld-border)",
+		toolbarIconColor: "var(--ld-text-secondary)",
+		toolbarIconHover: "var(--ld-primary-default)",
+		toolbarVoiceActive: "var(--ld-danger-default)"
+	};
+	const darkTokens = {
+		bgPrimary: "var(--ld-gray-900)",
+		bgSecondary: "var(--ld-gray-800)",
+		bgBubbleOutgoing: "var(--ld-primary-default)",
+		bgBubbleIncoming: "var(--ld-gray-800)",
+		bgInput: "var(--ld-gray-900)",
+		bgMention: "var(--ld-gray-900)",
+		bgMentionHover: "var(--ld-gray-800)",
+		bgMentionActive: "var(--ld-primary-900)",
+		bgLoadMore: "var(--ld-gray-800)",
+		bgSystemMessage: "var(--ld-gray-800)",
+		bgDropOverlay: "color-mix(in srgb, var(--ld-primary-default) 16%, var(--ld-gray-900))",
+		bgDangerSoft: "color-mix(in srgb, var(--ld-danger-default) 18%, var(--ld-gray-900))",
+		textPrimary: "var(--ld-gray-50)",
+		textSecondary: "var(--ld-gray-300)",
+		textBubbleOutgoing: "var(--ld-gray-50)",
+		textBubbleIncoming: "var(--ld-gray-50)",
+		textMention: "var(--ld-gray-50)",
+		textMentionTag: "var(--ld-primary-300)",
+		textTimestamp: "var(--ld-gray-400)",
+		textSystem: "var(--ld-gray-300)",
+		textPlaceholder: "var(--ld-gray-500)",
+		borderPrimary: "var(--ld-gray-700)",
+		borderInput: "var(--ld-gray-700)",
+		borderInputFocus: "var(--ld-primary-default)",
+		borderMention: "var(--ld-gray-700)",
+		colorSending: "var(--ld-gray-500)",
+		colorSent: "var(--ld-gray-400)",
+		colorDelivered: "var(--ld-primary-300)",
+		colorRead: "var(--ld-success-default)",
+		colorFailed: "var(--ld-danger-default)",
+		colorLink: "var(--ld-primary-300)",
+		shadowPanel: "none",
+		shadowMention: "none",
+		avatarBg: "var(--ld-primary-default)",
+		avatarText: "var(--ld-gray-50)",
+		btnPrimaryBg: "var(--ld-primary-default)",
+		btnPrimaryText: "var(--ld-gray-50)",
+		btnPrimaryHover: "var(--ld-primary-hover)",
+		scrollbarThumb: "var(--ld-gray-700)",
+		scrollbarTrack: "var(--ld-gray-800)",
+		bgToolbar: "var(--ld-gray-800)",
+		borderToolbar: "var(--ld-gray-700)",
+		toolbarIconColor: "var(--ld-gray-300)",
+		toolbarIconHover: "var(--ld-primary-300)",
+		toolbarVoiceActive: "var(--ld-danger-default)"
+	};
+	//#endregion
+	//#region src/theme/theme-manager.ts
+	var ThemeManager = class {
+		constructor(emitter, mode, view) {
+			this.mode = "light";
+			this.mediaQuery = null;
+			this.mediaHandler = null;
+			this.destroyed = false;
+			this.emitter = emitter;
+			this.view = view === void 0 ? typeof window === "undefined" ? null : window : view;
+			if (mode) this.setTheme(mode);
+		}
+		/** 获取当前模式 */
+		getMode() {
+			return this.mode;
+		}
+		/** 获取当前实际主题（auto 时解析为 light/dark） */
+		getResolvedTheme() {
+			if (this.mode === "auto") return this.getSystemTheme();
+			return this.mode;
+		}
+		/** 获取当前主题令牌 */
+		getTokens() {
+			return this.getResolvedTheme() === "dark" ? darkTokens : lightTokens;
+		}
+		/** 设置主题 */
+		setTheme(mode) {
+			if (this.destroyed) return;
+			this.cleanupMediaListener();
+			this.mode = mode;
+			if (mode === "auto") this.setupMediaListener();
+			this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
+		}
+		/** 获取系统主题偏好 */
+		getSystemTheme() {
+			const matchMedia = this.view?.matchMedia;
+			if (!matchMedia) return "light";
+			return matchMedia.call(this.view, "(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		}
+		/** 监听系统主题变化 */
+		setupMediaListener() {
+			if (!this.view?.matchMedia) return;
+			this.mediaQuery = this.view.matchMedia("(prefers-color-scheme: dark)");
+			this.mediaHandler = () => {
+				this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
+			};
+			const query = this.mediaQuery;
+			if (typeof query.addEventListener === "function") query.addEventListener("change", this.mediaHandler);
+			else query.addListener?.(this.mediaHandler);
+		}
+		/** 清理监听器 */
+		cleanupMediaListener() {
+			if (this.mediaQuery && this.mediaHandler) {
+				const query = this.mediaQuery;
+				if (typeof query.removeEventListener === "function") query.removeEventListener("change", this.mediaHandler);
+				else query.removeListener?.(this.mediaHandler);
+				this.mediaQuery = null;
+				this.mediaHandler = null;
+			}
+		}
+		/** 销毁 */
+		destroy() {
+			if (this.destroyed) return;
+			this.destroyed = true;
+			this.cleanupMediaListener();
+		}
+	};
+	//#endregion
+	//#region src/core/outbox.ts
+	var MemoryChatOutboxStorage = class {
+		constructor() {
+			this.entries = [];
+		}
+		load() {
+			return cloneEntries(this.entries);
+		}
+		save(entries) {
+			this.entries = cloneEntries(entries);
+		}
+	};
+	var ChatOutbox = class {
+		constructor(options = {}) {
+			this.entries = [];
+			this.hydrated = false;
+			this.writePromise = Promise.resolve();
+			this.storage = options.storage ?? new MemoryChatOutboxStorage();
+			this.now = options.now ?? Date.now;
+		}
+		async hydrate() {
+			if (!this.hydrated) {
+				this.entries = (await this.storage.load()).map(normalizeEntry);
+				this.hydrated = true;
+			}
+			return this.list();
+		}
+		list() {
+			return cloneEntries(this.entries);
+		}
+		async enqueue(message) {
+			await this.hydrate();
+			const normalized = normalizeChatMessage({
+				...message,
+				clientMessageId: message.clientMessageId ?? message.id
+			});
+			const key = getOutboxKey(normalized);
+			const existing = this.entries.find((entry2) => entry2.id === key);
+			if (existing) return cloneEntry(existing);
+			const entry = {
+				id: key,
+				message: normalized,
+				enqueuedAt: this.now(),
+				attempts: 0,
+				state: "pending"
+			};
+			this.entries.push(entry);
+			await this.persist();
+			return cloneEntry(entry);
+		}
+		async remove(id) {
+			await this.hydrate();
+			const index = this.entries.findIndex((entry) => entry.id === id);
+			if (index < 0) return false;
+			this.entries.splice(index, 1);
+			await this.persist();
+			return true;
+		}
+		async retry(id) {
+			await this.hydrate();
+			for (const entry of this.entries) if (!id || entry.id === id) {
+				entry.state = "pending";
+				entry.lastError = void 0;
+			}
+			await this.persist();
+		}
+		async clear() {
+			await this.hydrate();
+			this.entries = [];
+			await this.persist();
+		}
+		async flush(send, options = {}) {
+			await this.hydrate();
+			const maxAttempts = Math.max(1, Math.floor(options.maxAttempts ?? 3));
+			const concurrency = Math.min(8, Math.max(1, Math.floor(options.concurrency ?? 1)));
+			const candidates = this.entries.filter((entry) => entry.state === "pending");
+			const sent = [];
+			const failed = [];
+			let cursor = 0;
+			const worker = async () => {
+				while (cursor < candidates.length) {
+					if (options.signal?.aborted) throw createAbortError();
+					const entry = candidates[cursor++];
+					entry.attempts += 1;
+					try {
+						await send(entry.message, {
+							signal: options.signal,
+							clientMessageId: entry.message.clientMessageId ?? entry.id
+						});
+						const index = this.entries.findIndex((item) => item.id === entry.id);
+						if (index >= 0) this.entries.splice(index, 1);
+						sent.push(entry.id);
+					} catch (error) {
+						entry.lastError = toErrorMessage(error);
+						if (entry.attempts >= maxAttempts) entry.state = "failed";
+						failed.push({
+							id: entry.id,
+							error
+						});
+					}
+					await this.persist();
+				}
+			};
+			await Promise.all(Array.from({ length: concurrency }, () => worker()));
+			return {
+				sent,
+				failed,
+				remaining: this.list()
+			};
+		}
+		async persist() {
+			const snapshot = cloneEntries(this.entries);
+			const previous = this.writePromise;
+			this.writePromise = previous.then(() => this.storage.save(snapshot));
+			await this.writePromise;
+		}
+	};
+	function getOutboxKey(message) {
+		return message.clientMessageId ?? message.id;
+	}
+	function cloneEntry(entry) {
+		return {
+			...entry,
+			message: cloneChatMessage(entry.message)
+		};
 	}
-	function toKebab(key) {
-		return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+	function cloneEntries(entries) {
+		return entries.map(cloneEntry);
+	}
+	function normalizeEntry(entry) {
+		const message = normalizeChatMessage(entry.message);
+		return {
+			id: typeof entry.id === "string" && entry.id ? entry.id : getOutboxKey(message),
+			message,
+			enqueuedAt: Number.isFinite(entry.enqueuedAt) ? entry.enqueuedAt : Date.now(),
+			attempts: Number.isFinite(entry.attempts) ? Math.max(0, Math.floor(entry.attempts)) : 0,
+			state: entry.state === "failed" ? "failed" : "pending",
+			...typeof entry.lastError === "string" && { lastError: entry.lastError }
+		};
+	}
+	function toErrorMessage(error) {
+		return error instanceof Error ? error.message : String(error);
+	}
+	function createAbortError() {
+		return new DOMException("The operation was aborted.", "AbortError");
 	}
 	//#endregion
 	//#region src/index.ts
 	const version = "0.1.0";
 	function createChat(config) {
-		const container = typeof config.container === "string" ? document.querySelector(config.container) : config.container;
+		let container;
+		if (typeof config.container === "string") {
+			if (typeof document === "undefined") throw new Error("[Chat] A browser Document is required to resolve a container selector.");
+			container = document.querySelector(config.container);
+		} else container = config.container;
 		if (!container) throw new Error(`[Chat] Container not found: ${config.container}`);
+		const ownerDocument = container.ownerDocument;
 		const prefix = normalizeClassPrefix(config.classPrefix ?? "ldesign-chat");
 		const normalizedConfig = {
 			...config,
@@ -1736,23 +2588,70 @@ ${sizeVars()}
 		const emitter = new EventEmitter();
 		const chatManager = new ChatManager(emitter, normalizedConfig.messages);
 		const mentionEngine = new MentionEngine(emitter, normalizedConfig.mentionMembers);
-		const themeManager = new ThemeManager(emitter, normalizedConfig.theme ?? "light");
+		const themeManager = new ThemeManager(emitter, normalizedConfig.theme ?? "light", ownerDocument.defaultView);
 		const renderer = new DOMRenderer(container, normalizedConfig, emitter, mentionEngine);
-		injectStyles(themeManager.getTokens(), prefix);
+		let destroyed = false;
+		const schedule = (callback) => {
+			const run = () => {
+				if (!destroyed) callback();
+			};
+			if (ownerDocument.defaultView?.requestAnimationFrame) ownerDocument.defaultView.requestAnimationFrame(run);
+			else setTimeout(run, 0);
+		};
 		renderer.init();
 		renderer.renderMessages(chatManager.getMessages());
-		requestAnimationFrame(() => {
+		renderer.setThemeTokens(themeManager.getTokens());
+		injectStyles(themeManager.getTokens(), prefix, renderer.getRootElement());
+		const applyTransportAck = async (ack) => {
+			const localId = chatManager.getMessageIdByClientMessageId(ack.clientMessageId);
+			if (localId) chatManager.updateMessage(localId, {
+				...ack.message ?? {},
+				id: localId,
+				clientMessageId: ack.clientMessageId,
+				status: "sent",
+				...ack.sequence !== void 0 && { sequence: ack.sequence },
+				...ack.cursor !== void 0 && { cursor: ack.cursor }
+			});
+			if (normalizedConfig.outbox) await normalizedConfig.outbox.remove(ack.clientMessageId);
+			emitter.emit("transport-ack", ack);
+		};
+		const handleTransportEvent = (event) => {
+			if (event.type === "message") chatManager.upsertMessage({
+				...event.message,
+				...event.cursor !== void 0 && { cursor: event.cursor }
+			}, {
+				sequence: event.sequence,
+				source: "remote"
+			});
+			else if (event.type === "ack") applyTransportAck(event.ack).catch((error) => {
+				emitter.emit("transport-error", error);
+			});
+			else if (event.type === "cursor") emitter.emit("transport-cursor", event.cursor);
+			else emitter.emit("transport-error", event.error, event.recoverable);
+		};
+		const transportController = normalizedConfig.transport ? new ChatTransportController(normalizedConfig.transport, {
+			conversationId: normalizedConfig.conversationId,
+			cursor: normalizedConfig.transportCursor,
+			onEvent: handleTransportEvent,
+			onStatusChange: (status) => {
+				emitter.emit("transport-status", status);
+			}
+		}) : null;
+		schedule(() => {
 			renderer.scrollToBottom(false);
 		});
 		emitter.on("theme-change", (_resolved, tokens) => {
-			updateStyles(tokens, prefix);
+			renderer.setThemeTokens(tokens);
 		});
 		emitter.on("message-added", (message) => {
 			renderer.appendMessage(message);
-			requestAnimationFrame(() => {
+			schedule(() => {
 				renderer.scrollToBottom(true);
 			});
 		});
+		emitter.on("mention-select", (member) => {
+			normalizedConfig.onMentionSelect?.(member);
+		});
 		emitter.on("messages-prepended", (messages) => {
 			renderer.prependMessages(messages);
 		});
@@ -1764,101 +2663,185 @@ ${sizeVars()}
 		});
 		emitter.on("message-content-appended", (id, content) => {
 			renderer.updateMessageContent(id, content);
-			requestAnimationFrame(() => {
+			schedule(() => {
 				renderer.scrollToBottom(false);
 			});
 		});
-		return {
+		const instance = {
 			addMessage(message) {
-				chatManager.addMessage(message);
+				if (!destroyed) chatManager.addMessage(message);
 			},
 			prependMessages(messages) {
-				chatManager.prependMessages(messages);
+				if (!destroyed) chatManager.prependMessages(messages);
 			},
 			updateMessage(id, updates) {
-				chatManager.updateMessage(id, updates);
+				if (!destroyed) chatManager.updateMessage(id, updates);
 			},
 			removeMessage(id) {
-				chatManager.removeMessage(id);
+				if (!destroyed) chatManager.removeMessage(id);
 			},
 			setMessages(messages) {
+				if (destroyed) return;
 				chatManager.setMessages(messages);
 				renderer.renderMessages(chatManager.getMessages());
-				requestAnimationFrame(() => {
+				schedule(() => {
 					renderer.scrollToBottom(false);
 				});
 			},
 			clearMessages() {
-				chatManager.clearMessages();
-				renderer.renderMessages([]);
+				if (!destroyed) {
+					chatManager.clearMessages();
+					renderer.renderMessages([]);
+				}
 			},
 			scrollToBottom(smooth = true) {
-				renderer.scrollToBottom(smooth);
+				if (!destroyed) renderer.scrollToBottom(smooth);
 			},
 			setTheme(theme) {
-				themeManager.setTheme(theme);
+				if (!destroyed) themeManager.setTheme(theme);
 			},
 			setMentionMembers(members) {
-				mentionEngine.setMembers(members);
+				if (!destroyed) mentionEngine.setMembers(members);
 			},
 			setLoadingMore(loading) {
-				renderer.setLoadingMore(loading);
+				if (!destroyed) renderer.setLoadingMore(loading);
 			},
 			focusInput() {
-				renderer.focusInput();
+				if (!destroyed) renderer.focusInput();
 			},
 			setInputContent(content) {
-				renderer.setInputContent(content);
+				if (!destroyed) renderer.setInputContent(content);
 			},
 			getInputContent() {
-				return renderer.getInputContent();
+				return destroyed ? "" : renderer.getInputContent();
 			},
 			clearInput() {
-				renderer.clearInput();
+				if (!destroyed) renderer.clearInput();
 			},
 			isAtBottom(threshold) {
-				return renderer.isAtBottom(threshold);
+				return destroyed || renderer.isAtBottom(threshold);
 			},
 			on(event, handler) {
-				return emitter.on(event, handler);
+				return destroyed ? () => {} : emitter.on(event, handler);
 			},
 			getMessages() {
-				return chatManager.getMessages();
+				return destroyed ? [] : chatManager.getMessages();
 			},
 			getMessage(id) {
-				return chatManager.getMessage(id);
+				return destroyed ? void 0 : chatManager.getMessage(id);
 			},
 			appendMessageContent(id, chunk) {
-				chatManager.appendMessageContent(id, chunk);
+				return destroyed ? false : chatManager.appendMessageContent(id, chunk);
+			},
+			finishStreaming(id, generation) {
+				return destroyed ? false : chatManager.finishStreaming(id, generation);
+			},
+			beginStreaming(id, generation) {
+				return destroyed ? null : chatManager.beginStreaming(id, generation);
+			},
+			cancelStreaming(id, generation) {
+				return destroyed ? false : chatManager.cancelStreaming(id, generation);
+			},
+			mergeMessage(message, sequence) {
+				return destroyed ? "ignored" : chatManager.upsertMessage(message, {
+					sequence,
+					source: "remote"
+				});
+			},
+			async connectTransport(signal) {
+				if (!transportController) throw new Error("No chat transport is configured.");
+				await transportController.connect(signal);
+			},
+			async disconnectTransport() {
+				await transportController?.disconnect();
 			},
-			finishStreaming(id) {
-				chatManager.finishStreaming(id);
+			getTransportStatus() {
+				return transportController?.getStatus() ?? "idle";
+			},
+			async sendMessage(message, options = {}) {
+				if (!transportController) throw new Error("No chat transport is configured.");
+				if (destroyed) throw new Error("Chat instance is destroyed.");
+				const prepared = normalizeChatMessage({
+					...message,
+					clientMessageId: message.clientMessageId ?? createClientMessageId(message.id),
+					status: message.status ?? "sending"
+				});
+				chatManager.addMessage(prepared);
+				try {
+					if (normalizedConfig.outbox) await normalizedConfig.outbox.enqueue(prepared);
+					const ack = await transportController.send(prepared, {
+						signal: options.signal,
+						clientMessageId: prepared.clientMessageId
+					});
+					if (ack) await applyTransportAck(ack);
+					else chatManager.markMessageStatus(prepared.id, "sent");
+					emitter.emit("message-sent", prepared, ack);
+					return ack;
+				} catch (error) {
+					chatManager.markMessageStatus(prepared.id, "failed");
+					emitter.emit("message-send-failed", prepared, error);
+					throw error;
+				}
+			},
+			async flushOutbox(options = {}) {
+				if (!normalizedConfig.outbox) return {
+					sent: [],
+					failed: [],
+					remaining: []
+				};
+				if (!transportController) throw new Error("No chat transport is configured.");
+				return normalizedConfig.outbox.flush(async (message, sendOptions) => {
+					const ack = await transportController.send(message, sendOptions);
+					if (ack) await applyTransportAck(ack);
+					else if (message.id) chatManager.markMessageStatus(message.id, "sent");
+				}, options);
 			},
 			destroy() {
+				if (destroyed) return;
+				destroyed = true;
+				transportController?.dispose();
 				themeManager.destroy();
 				renderer.destroy();
 				emitter.removeAll();
-				removeStyles(prefix);
+				removeStyles(prefix, ownerDocument);
 			}
 		};
+		if (normalizedConfig.autoConnect && transportController) instance.connectTransport().catch((error) => {
+			emitter.emit("transport-error", error);
+		});
+		return instance;
+	}
+	function createClientMessageId(messageId) {
+		const cryptoObject = globalThis.crypto;
+		if (cryptoObject?.randomUUID) return cryptoObject.randomUUID();
+		return `client-${messageId}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 	}
 	//#endregion
+	exports.CHAT_MESSAGE_SCHEMA_VERSION = CHAT_MESSAGE_SCHEMA_VERSION;
 	exports.COMPONENT_CSS_VAR_PREFIX = COMPONENT_CSS_VAR_PREFIX;
 	exports.ChatManager = ChatManager;
+	exports.ChatOutbox = ChatOutbox;
+	exports.ChatTransportController = ChatTransportController;
 	exports.DEFAULT_CLASS_PREFIX = DEFAULT_CLASS_PREFIX;
 	exports.DOMRenderer = DOMRenderer;
 	exports.EventEmitter = EventEmitter;
+	exports.MemoryChatOutboxStorage = MemoryChatOutboxStorage;
 	exports.MentionEngine = MentionEngine;
 	exports.STYLE_ELEMENT_ID = STYLE_ELEMENT_ID;
 	exports.ThemeManager = ThemeManager;
+	exports.cloneChatMessage = cloneChatMessage;
 	exports.cls = cls;
 	exports.clsx = clsx;
+	exports.compareChatMessages = compareChatMessages;
 	exports.createChat = createChat;
 	exports.cx = cx;
 	exports.darkTokens = darkTokens;
 	exports.getStyleElementId = getStyleElementId;
 	exports.injectStyles = injectStyles;
 	exports.lightTokens = lightTokens;
+	exports.normalizeChatContentBlocks = normalizeChatContentBlocks;
+	exports.normalizeChatMessage = normalizeChatMessage;
+	exports.normalizeChatMessages = normalizeChatMessages;
 	exports.normalizeClassPrefix = normalizeClassPrefix;
 	exports.removeStyles = removeStyles;
 	exports.updateStyles = updateStyles;