@lobehub/ui 4.3.2 → 4.3.3

package/es/hooks/useMermaid.mjs

@@ -1,54 +1,84 @@
 'use client';
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTheme } from "antd-style";
-import useSWR from "swr";
 import { Md5 } from "ts-md5";
 
 //#region src/hooks/useMermaid.ts
 const MD5_LENGTH_THRESHOLD = 1e4;
+const mermaidCache = /* @__PURE__ */ new Map();
+const MAX_CACHE_SIZE = 500;
+const cleanupCache = () => {
+	if (mermaidCache.size > MAX_CACHE_SIZE) {
+		const entriesToRemove = Math.floor(MAX_CACHE_SIZE * .2);
+		const keysToRemove = Array.from(mermaidCache.keys()).slice(0, entriesToRemove);
+		for (const key of keysToRemove) mermaidCache.delete(key);
+	}
+};
+let mermaidPromise = null;
 const loadMermaid = () => {
 	if (typeof window === "undefined") return Promise.resolve(null);
-	return import("mermaid").then((mod) => mod.default);
+	if (!mermaidPromise) mermaidPromise = import("mermaid").then((mod) => mod.default);
+	return mermaidPromise;
 };
-const mermaidPromise = loadMermaid();
+const createMermaidConfig = (theme, customTheme) => ({
+	fontFamily: theme.fontFamilyCode,
+	gantt: { useWidth: 1920 },
+	securityLevel: "loose",
+	startOnLoad: false,
+	theme: customTheme || (theme.isDarkMode ? "dark" : "neutral"),
+	themeVariables: customTheme ? void 0 : {
+		errorBkgColor: theme.colorTextDescription,
+		errorTextColor: theme.colorTextDescription,
+		fontFamily: theme.fontFamily,
+		lineColor: theme.colorTextSecondary,
+		mainBkg: theme.colorBgContainer,
+		noteBkgColor: theme.colorInfoBg,
+		noteTextColor: theme.colorInfoText,
+		pie1: theme.geekblue,
+		pie2: theme.colorWarning,
+		pie3: theme.colorSuccess,
+		pie4: theme.colorError,
+		primaryBorderColor: theme.colorBorder,
+		primaryColor: theme.colorBgContainer,
+		primaryTextColor: theme.colorText,
+		secondaryBorderColor: theme.colorInfoBorder,
+		secondaryColor: theme.colorInfoBg,
+		secondaryTextColor: theme.colorInfoText,
+		tertiaryBorderColor: theme.colorSuccessBorder,
+		tertiaryColor: theme.colorSuccessBg,
+		tertiaryTextColor: theme.colorSuccessText,
+		textColor: theme.colorText
+	}
+});
 /**
-* 验证并处理 Mermaid 图表内容
+* 验证并处理 Mermaid 图表内容 - 优化版本（移除 SWR）
 */
 const useMermaid = (content, { id, theme: customTheme }) => {
 	const theme = useTheme();
-	const [validContent, setValidContent] = useState("");
-	const mermaidConfig = useMemo(() => ({
-		fontFamily: theme.fontFamilyCode,
-		gantt: { useWidth: 1920 },
-		securityLevel: "loose",
-		startOnLoad: false,
-		theme: customTheme || (theme.isDarkMode ? "dark" : "neutral"),
-		themeVariables: customTheme ? void 0 : {
-			errorBkgColor: theme.colorTextDescription,
-			errorTextColor: theme.colorTextDescription,
-			fontFamily: theme.fontFamily,
-			lineColor: theme.colorTextSecondary,
-			mainBkg: theme.colorBgContainer,
-			noteBkgColor: theme.colorInfoBg,
-			noteTextColor: theme.colorInfoText,
-			pie1: theme.geekblue,
-			pie2: theme.colorWarning,
-			pie3: theme.colorSuccess,
-			pie4: theme.colorError,
-			primaryBorderColor: theme.colorBorder,
-			primaryColor: theme.colorBgContainer,
-			primaryTextColor: theme.colorText,
-			secondaryBorderColor: theme.colorInfoBorder,
-			secondaryColor: theme.colorInfoBg,
-			secondaryTextColor: theme.colorInfoText,
-			tertiaryBorderColor: theme.colorSuccessBorder,
-			tertiaryColor: theme.colorSuccessBg,
-			tertiaryTextColor: theme.colorSuccessText,
-			textColor: theme.colorText
-		}
-	}), [theme.isDarkMode, customTheme]);
-	return useSWR(useMemo(() => {
+	const [data, setData] = useState("");
+	const mermaidConfig = useMemo(() => createMermaidConfig(theme, customTheme), [
+		theme.fontFamilyCode,
+		theme.isDarkMode,
+		theme.colorTextDescription,
+		theme.fontFamily,
+		theme.colorTextSecondary,
+		theme.colorBgContainer,
+		theme.colorInfoBg,
+		theme.colorInfoText,
+		theme.geekblue,
+		theme.colorWarning,
+		theme.colorSuccess,
+		theme.colorError,
+		theme.colorBorder,
+		theme.colorInfoBorder,
+		theme.colorSuccessBorder,
+		theme.colorSuccessBg,
+		theme.colorSuccessText,
+		theme.colorText,
+		customTheme
+	]);
+	const cacheKey = useMemo(() => {
 		const hash = content.length < MD5_LENGTH_THRESHOLD ? content : Md5.hashStr(content);
 		return [
 			id,
@@ -60,28 +90,45 @@ const useMermaid = (content, { id, theme: customTheme }) => {
 		id,
 		theme.isDarkMode,
 		customTheme
-	]), async () => {
-		try {
-			const mermaidInstance = await mermaidPromise;
-			if (!mermaidInstance) return content;
-			if (await mermaidInstance.parse(content)) {
-				mermaidInstance.initialize(mermaidConfig);
-				const { svg } = await mermaidInstance.render(id, content);
-				setValidContent(svg);
-				return svg;
-			} else throw new Error("Mermaid 语法无效");
-		} catch (error) {
-			if (!validContent) console.error("Mermaid 解析错误:", error);
-			return validContent || "";
+	]);
+	useEffect(() => {
+		const cachedPromise = mermaidCache.get(cacheKey);
+		if (cachedPromise) {
+			cachedPromise.then((svg) => {
+				setData(svg);
+			}).catch(() => {});
+			return;
 		}
-	}, {
-		dedupingInterval: 3e3,
-		errorRetryCount: 2,
-		revalidateOnFocus: false,
-		revalidateOnReconnect: false
-	});
+		const renderPromise = (async () => {
+			try {
+				const mermaidInstance = await loadMermaid();
+				if (!mermaidInstance) return "";
+				if (await mermaidInstance.parse(content)) {
+					mermaidInstance.initialize(mermaidConfig);
+					const { svg } = await mermaidInstance.render(id, content);
+					return svg;
+				} else throw new Error("Mermaid 语法无效");
+			} catch (error_) {
+				console.error("Mermaid 解析错误:", error_);
+				return "";
+			}
+		})();
+		mermaidCache.set(cacheKey, renderPromise);
+		cleanupCache();
+		renderPromise.then((svg) => {
+			if (mermaidCache.get(cacheKey) === renderPromise) setData(svg);
+		}).catch(() => {
+			if (mermaidCache.get(cacheKey) === renderPromise) mermaidCache.delete(cacheKey);
+		});
+	}, [
+		cacheKey,
+		content,
+		id,
+		mermaidConfig
+	]);
+	return data;
 };
 
 //#endregion
-export { useMermaid };
+export { createMermaidConfig, loadMermaid, useMermaid };
 //# sourceMappingURL=useMermaid.mjs.map

package/es/hooks/useMermaid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMermaid.mjs","names":["mermaidConfig: MermaidConfig"],"sources":["../../src/hooks/useMermaid.ts"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport type { MermaidConfig } from 'mermaid/dist/config.type';\nimport { useMemo, useState } from 'react';\nimport useSWR, { SWRResponse } from 'swr';\nimport { Md5 } from 'ts-md5';\n\n// 缓存已验证的图表内容\nconst MD5_LENGTH_THRESHOLD = 10_000;\n\n// 懒加载 mermaid 实例\nconst loadMermaid = () => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n  return import('mermaid').then((mod) => mod.default);\n};\nconst mermaidPromise = loadMermaid();\n\n/**\n * 验证并处理 Mermaid 图表内容\n */\nexport const useMermaid = (\n  content: string,\n  {\n    id,\n    theme: customTheme,\n  }: {\n    id: string;\n    theme?: MermaidConfig['theme'];\n  },\n): SWRResponse<string, Error> => {\n  const theme = useTheme();\n  // 用于存储最近一次有效的内容\n  const [validContent, setValidContent] = useState<string>('');\n\n  // 提取主题相关配置到 useMemo 中\n  const mermaidConfig: MermaidConfig = useMemo(\n    () => ({\n      fontFamily: theme.fontFamilyCode,\n      gantt: {\n        useWidth: 1920,\n      },\n      securityLevel: 'loose',\n      startOnLoad: false,\n      theme: customTheme || (theme.isDarkMode ? 'dark' : 'neutral'),\n      themeVariables: customTheme\n        ? undefined\n        : {\n            errorBkgColor: theme.colorTextDescription,\n            errorTextColor: theme.colorTextDescription,\n            fontFamily: theme.fontFamily,\n            lineColor: theme.colorTextSecondary,\n            mainBkg: theme.colorBgContainer,\n            noteBkgColor: theme.colorInfoBg,\n            noteTextColor: theme.colorInfoText,\n            pie1: theme.geekblue,\n            pie2: theme.colorWarning,\n            pie3: theme.colorSuccess,\n            pie4: theme.colorError,\n            primaryBorderColor: theme.colorBorder,\n            primaryColor: theme.colorBgContainer,\n            primaryTextColor: theme.colorText,\n            secondaryBorderColor: theme.colorInfoBorder,\n            secondaryColor: theme.colorInfoBg,\n            secondaryTextColor: theme.colorInfoText,\n            tertiaryBorderColor: theme.colorSuccessBorder,\n            tertiaryColor: theme.colorSuccessBg,\n            tertiaryTextColor: theme.colorSuccessText,\n            textColor: theme.colorText,\n          },\n    }),\n    [theme.isDarkMode, customTheme],\n  );\n\n  // 为长内容生成哈希键\n  const cacheKey = useMemo((): string => {\n    const hash = content.length < MD5_LENGTH_THRESHOLD ? content : Md5.hashStr(content);\n    return [id, customTheme || (theme.isDarkMode ? 'd' : 'l'), hash].filter(Boolean).join('-');\n  }, [content, id, theme.isDarkMode, customTheme]);\n\n  return useSWR(\n    cacheKey,\n    async (): Promise<string> => {\n      // 检查缓存中是否已验证过\n      try {\n        const mermaidInstance = await mermaidPromise;\n        if (!mermaidInstance) return content;\n\n        // 验证语法\n        const isValid = await mermaidInstance.parse(content);\n\n        if (isValid) {\n          // 更新有效内容状态\n          mermaidInstance.initialize(mermaidConfig);\n          const { svg } = await mermaidInstance.render(id, content);\n          setValidContent(svg);\n          // 缓存验证结果\n          return svg;\n        } else {\n          throw new Error('Mermaid 语法无效');\n        }\n      } catch (error) {\n        if (!validContent) console.error('Mermaid 解析错误:', error);\n        // 返回最近一次有效的内容，或空字符串\n        return validContent || '';\n      }\n    },\n    {\n      dedupingInterval: 3000,\n      errorRetryCount: 2,\n      revalidateOnFocus: false,\n      revalidateOnReconnect: false,\n    },\n  );\n};\n"],"mappings":";;;;;;;;AASA,MAAM,uBAAuB;AAG7B,MAAM,oBAAoB;AACxB,KAAI,OAAO,WAAW,YAAa,QAAO,QAAQ,QAAQ,KAAK;AAC/D,QAAO,OAAO,WAAW,MAAM,QAAQ,IAAI,QAAQ;;AAErD,MAAM,iBAAiB,aAAa;;;;AAKpC,MAAa,cACX,SACA,EACE,IACA,OAAO,kBAKsB;CAC/B,MAAM,QAAQ,UAAU;CAExB,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAG5D,MAAMA,gBAA+B,eAC5B;EACL,YAAY,MAAM;EAClB,OAAO,EACL,UAAU,MACX;EACD,eAAe;EACf,aAAa;EACb,OAAO,gBAAgB,MAAM,aAAa,SAAS;EACnD,gBAAgB,cACZ,SACA;GACE,eAAe,MAAM;GACrB,gBAAgB,MAAM;GACtB,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,SAAS,MAAM;GACf,cAAc,MAAM;GACpB,eAAe,MAAM;GACrB,MAAM,MAAM;GACZ,MAAM,MAAM;GACZ,MAAM,MAAM;GACZ,MAAM,MAAM;GACZ,oBAAoB,MAAM;GAC1B,cAAc,MAAM;GACpB,kBAAkB,MAAM;GACxB,sBAAsB,MAAM;GAC5B,gBAAgB,MAAM;GACtB,oBAAoB,MAAM;GAC1B,qBAAqB,MAAM;GAC3B,eAAe,MAAM;GACrB,mBAAmB,MAAM;GACzB,WAAW,MAAM;GAClB;EACN,GACD,CAAC,MAAM,YAAY,YAAY,CAChC;AAQD,QAAO,OALU,cAAsB;EACrC,MAAM,OAAO,QAAQ,SAAS,uBAAuB,UAAU,IAAI,QAAQ,QAAQ;AACnF,SAAO;GAAC;GAAI,gBAAgB,MAAM,aAAa,MAAM;GAAM;GAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;IACzF;EAAC;EAAS;EAAI,MAAM;EAAY;EAAY,CAAC,EAI9C,YAA6B;AAE3B,MAAI;GACF,MAAM,kBAAkB,MAAM;AAC9B,OAAI,CAAC,gBAAiB,QAAO;AAK7B,OAFgB,MAAM,gBAAgB,MAAM,QAAQ,EAEvC;AAEX,oBAAgB,WAAW,cAAc;IACzC,MAAM,EAAE,QAAQ,MAAM,gBAAgB,OAAO,IAAI,QAAQ;AACzD,oBAAgB,IAAI;AAEpB,WAAO;SAEP,OAAM,IAAI,MAAM,eAAe;WAE1B,OAAO;AACd,OAAI,CAAC,aAAc,SAAQ,MAAM,iBAAiB,MAAM;AAExD,UAAO,gBAAgB;;IAG3B;EACE,kBAAkB;EAClB,iBAAiB;EACjB,mBAAmB;EACnB,uBAAuB;EACxB,CACF"}
+{"version":3,"file":"useMermaid.mjs","names":["mermaidPromise: Promise<typeof import('mermaid').default | null> | null"],"sources":["../../src/hooks/useMermaid.ts"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport type { MermaidConfig } from 'mermaid/dist/config.type';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Md5 } from 'ts-md5';\n\n// 缓存已验证的图表内容\nexport const MD5_LENGTH_THRESHOLD = 10_000;\n\n// Application-level cache for rendered Mermaid SVG\n// Key: cacheKey string, Value: Promise<string>\nconst mermaidCache = new Map<string, Promise<string>>();\n\n// Maximum cache size to prevent memory leaks\nconst MAX_CACHE_SIZE = 500;\n\n// Clean up old cache entries when limit is reached\nconst cleanupCache = () => {\n  if (mermaidCache.size > MAX_CACHE_SIZE) {\n    // Remove oldest 20% of entries\n    const entriesToRemove = Math.floor(MAX_CACHE_SIZE * 0.2);\n    const keysToRemove = Array.from(mermaidCache.keys()).slice(0, entriesToRemove);\n    for (const key of keysToRemove) {\n      mermaidCache.delete(key);\n    }\n  }\n};\n\n// 懒加载 mermaid 实例\nlet mermaidPromise: Promise<typeof import('mermaid').default | null> | null = null;\n\nexport const loadMermaid = (): Promise<typeof import('mermaid').default | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n\n  if (!mermaidPromise) {\n    mermaidPromise = import('mermaid').then((mod) => mod.default);\n  }\n\n  return mermaidPromise;\n};\n\n// Helper to create mermaid config\nexport const createMermaidConfig = (\n  theme: ReturnType<typeof useTheme>,\n  customTheme?: MermaidConfig['theme'],\n): MermaidConfig => ({\n  fontFamily: theme.fontFamilyCode,\n  gantt: {\n    useWidth: 1920,\n  },\n  securityLevel: 'loose',\n  startOnLoad: false,\n  theme: customTheme || (theme.isDarkMode ? 'dark' : 'neutral'),\n  themeVariables: customTheme\n    ? undefined\n    : {\n        errorBkgColor: theme.colorTextDescription,\n        errorTextColor: theme.colorTextDescription,\n        fontFamily: theme.fontFamily,\n        lineColor: theme.colorTextSecondary,\n        mainBkg: theme.colorBgContainer,\n        noteBkgColor: theme.colorInfoBg,\n        noteTextColor: theme.colorInfoText,\n        pie1: theme.geekblue,\n        pie2: theme.colorWarning,\n        pie3: theme.colorSuccess,\n        pie4: theme.colorError,\n        primaryBorderColor: theme.colorBorder,\n        primaryColor: theme.colorBgContainer,\n        primaryTextColor: theme.colorText,\n        secondaryBorderColor: theme.colorInfoBorder,\n        secondaryColor: theme.colorInfoBg,\n        secondaryTextColor: theme.colorInfoText,\n        tertiaryBorderColor: theme.colorSuccessBorder,\n        tertiaryColor: theme.colorSuccessBg,\n        tertiaryTextColor: theme.colorSuccessText,\n        textColor: theme.colorText,\n      },\n});\n\n/**\n * 验证并处理 Mermaid 图表内容 - 优化版本（移除 SWR）\n */\nexport const useMermaid = (\n  content: string,\n  {\n    id,\n    theme: customTheme,\n  }: {\n    id: string;\n    theme?: MermaidConfig['theme'];\n  },\n): string => {\n  const theme = useTheme();\n  const [data, setData] = useState<string>('');\n\n  // 提取主题相关配置到 useMemo 中 - 只依赖实际使用的 theme 属性\n  const mermaidConfig = useMemo(\n    () => createMermaidConfig(theme, customTheme),\n    [\n      theme.fontFamilyCode,\n      theme.isDarkMode,\n      theme.colorTextDescription,\n      theme.fontFamily,\n      theme.colorTextSecondary,\n      theme.colorBgContainer,\n      theme.colorInfoBg,\n      theme.colorInfoText,\n      theme.geekblue,\n      theme.colorWarning,\n      theme.colorSuccess,\n      theme.colorError,\n      theme.colorBorder,\n      theme.colorInfoBorder,\n      theme.colorSuccessBorder,\n      theme.colorSuccessBg,\n      theme.colorSuccessText,\n      theme.colorText,\n      customTheme,\n    ],\n  );\n\n  // 为长内容生成哈希键\n  const cacheKey = useMemo((): string => {\n    const hash = content.length < MD5_LENGTH_THRESHOLD ? content : Md5.hashStr(content);\n    return [id, customTheme || (theme.isDarkMode ? 'd' : 'l'), hash].filter(Boolean).join('-');\n  }, [content, id, theme.isDarkMode, customTheme]);\n\n  useEffect(() => {\n    // Check cache first\n    const cachedPromise = mermaidCache.get(cacheKey);\n    if (cachedPromise) {\n      cachedPromise\n        .then((svg) => {\n          setData(svg);\n        })\n        .catch(() => {\n          // Silently handle errors, fallback will be handled in the promise\n        });\n      return;\n    }\n\n    // Create new promise for rendering\n    const renderPromise = (async (): Promise<string> => {\n      try {\n        const mermaidInstance = await loadMermaid();\n        if (!mermaidInstance) return '';\n\n        // 验证语法\n        const isValid = await mermaidInstance.parse(content);\n\n        if (isValid) {\n          // 初始化并渲染\n          mermaidInstance.initialize(mermaidConfig);\n          const { svg } = await mermaidInstance.render(id, content);\n          return svg;\n        } else {\n          throw new Error('Mermaid 语法无效');\n        }\n      } catch (error_) {\n        console.error('Mermaid 解析错误:', error_);\n        return '';\n      }\n    })();\n\n    // Cache the promise\n    mermaidCache.set(cacheKey, renderPromise);\n    cleanupCache();\n\n    // Handle promise result\n    renderPromise\n      .then((svg) => {\n        // Only update if this is still the current cache key\n        if (mermaidCache.get(cacheKey) === renderPromise) {\n          setData(svg);\n        }\n      })\n      .catch(() => {\n        // Remove failed promise from cache\n        if (mermaidCache.get(cacheKey) === renderPromise) {\n          mermaidCache.delete(cacheKey);\n        }\n      });\n  }, [cacheKey, content, id, mermaidConfig]);\n\n  return data;\n};\n"],"mappings":"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"}

package/es/hooks/useStreamHighlight.mjs

@@ -0,0 +1,221 @@
+'use client';
+
+import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
+import lobe_theme_default from "../Highlighter/theme/lobe-theme.mjs";
+import { shikiModulePromise } from "./useHighlight.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ShikiStreamTokenizer } from "shiki-stream";
+
+//#region src/hooks/useStreamHighlight.ts
+const tokensToLineTokens = (tokens) => {
+	if (!tokens.length) return [[]];
+	const lines = [];
+	let currentLine = [];
+	for (const token of tokens) {
+		const content = token.content ?? "";
+		if (content === "\n") {
+			lines.push(currentLine);
+			currentLine = [];
+			continue;
+		}
+		if (content.indexOf("\n") === -1) currentLine.push(token);
+		else {
+			const segments = content.split("\n");
+			for (const [j, segment] of segments.entries()) {
+				if (segment) currentLine.push(j === 0 && segment === content ? token : {
+					...token,
+					content: segment
+				});
+				if (j < segments.length - 1) {
+					lines.push(currentLine);
+					currentLine = [];
+				}
+			}
+		}
+	}
+	if (currentLine.length > 0 || lines.length === 0) lines.push(currentLine);
+	return lines.length > 0 ? lines : [[]];
+};
+const createPreStyle = (bg, fg) => {
+	if (!bg && !fg) return void 0;
+	return {
+		backgroundColor: bg,
+		color: fg
+	};
+};
+const useStreamingHighlighter = (text, options) => {
+	const { customThemes, enabled, language, theme } = options;
+	const [result, setResult] = useState();
+	const tokenizerRef = useRef(null);
+	const previousTextRef = useRef("");
+	const safeText = text ?? "";
+	const latestTextRef = useRef(safeText);
+	const preStyleRef = useRef(void 0);
+	const linesRef = useRef([[]]);
+	useEffect(() => {
+		latestTextRef.current = safeText;
+	}, [safeText]);
+	const setStreamingResultRef = useRef((rawLines) => {
+		const previousLines = linesRef.current;
+		const newLinesLength = rawLines.length;
+		if (newLinesLength !== previousLines.length || newLinesLength === 0) {
+			linesRef.current = rawLines;
+			setResult({
+				lines: rawLines,
+				preStyle: preStyleRef.current
+			});
+			return;
+		}
+		let hasChanges = false;
+		const mergedLines = [];
+		for (let i = 0; i < newLinesLength; i++) {
+			const newLine = rawLines[i];
+			const prevLine = previousLines[i];
+			if (prevLine === newLine) {
+				mergedLines[i] = prevLine;
+				continue;
+			}
+			if (!prevLine || prevLine.length !== newLine.length) {
+				mergedLines[i] = newLine;
+				hasChanges = true;
+				continue;
+			}
+			let lineChanged = false;
+			for (const [j, newToken] of newLine.entries()) if (prevLine[j] !== newToken) {
+				lineChanged = true;
+				break;
+			}
+			if (lineChanged) {
+				mergedLines[i] = newLine;
+				hasChanges = true;
+			} else mergedLines[i] = prevLine;
+		}
+		if (hasChanges) {
+			linesRef.current = mergedLines;
+			setResult({
+				lines: mergedLines,
+				preStyle: preStyleRef.current
+			});
+		}
+	});
+	const updateTokens = useCallback(async (nextText, forceReset = false) => {
+		const tokenizer = tokenizerRef.current;
+		if (!tokenizer) return;
+		if (forceReset) {
+			tokenizer.clear();
+			previousTextRef.current = "";
+		}
+		const previousText = previousTextRef.current;
+		let chunk = nextText;
+		if (!forceReset && nextText.startsWith(previousText)) chunk = nextText.slice(previousText.length);
+		else if (!forceReset) tokenizer.clear();
+		previousTextRef.current = nextText;
+		if (!chunk) {
+			const stableTokens = tokenizer.tokensStable;
+			const unstableTokens = tokenizer.tokensUnstable;
+			if (stableTokens.length + unstableTokens.length === 0) {
+				setStreamingResultRef.current([[]]);
+				return;
+			}
+			const mergedTokens = stableTokens.length === 0 ? unstableTokens : unstableTokens.length === 0 ? stableTokens : [...stableTokens, ...unstableTokens];
+			setStreamingResultRef.current(tokensToLineTokens(mergedTokens));
+			return;
+		}
+		try {
+			await tokenizer.enqueue(chunk);
+			const stableTokens = tokenizer.tokensStable;
+			const unstableTokens = tokenizer.tokensUnstable;
+			const mergedTokens = stableTokens.length === 0 ? unstableTokens : unstableTokens.length === 0 ? stableTokens : [...stableTokens, ...unstableTokens];
+			setStreamingResultRef.current(tokensToLineTokens(mergedTokens));
+		} catch (error) {
+			console.error("Streaming highlighting failed:", error);
+		}
+	}, []);
+	const highlighterKeyRef = useRef("");
+	useEffect(() => {
+		if (!enabled) {
+			tokenizerRef.current?.clear();
+			tokenizerRef.current = null;
+			previousTextRef.current = "";
+			preStyleRef.current = void 0;
+			linesRef.current = [[]];
+			setResult(void 0);
+			highlighterKeyRef.current = "";
+			return;
+		}
+		const currentKey = `${language}-${theme}`;
+		if (highlighterKeyRef.current === currentKey && tokenizerRef.current) return;
+		let cancelled = false;
+		(async () => {
+			const mod = await shikiModulePromise;
+			if (!mod || cancelled) return;
+			try {
+				let themesToLoad = [theme];
+				if (customThemes && theme === "lobe-theme") {
+					const customTheme = customThemes[theme];
+					if (customTheme) themesToLoad = [customTheme];
+				}
+				const highlighter = await mod.getSingletonHighlighter({
+					langs: language ? [language] : ["plaintext"],
+					themes: themesToLoad
+				});
+				if (!highlighter || cancelled) return;
+				if (highlighterKeyRef.current !== currentKey) {
+					tokenizerRef.current?.clear();
+					tokenizerRef.current = new ShikiStreamTokenizer({
+						highlighter,
+						lang: language,
+						theme
+					});
+					highlighterKeyRef.current = currentKey;
+					previousTextRef.current = "";
+					linesRef.current = [[]];
+					const themeInfo = highlighter.getTheme(theme);
+					preStyleRef.current = createPreStyle(themeInfo?.bg, themeInfo?.fg);
+				}
+				const currentText = latestTextRef.current;
+				if (currentText) await updateTokens(currentText, true);
+				else setStreamingResultRef.current([[]]);
+			} catch (error) {
+				console.error("Streaming highlighter initialization failed:", error);
+				highlighterKeyRef.current = "";
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		enabled,
+		language,
+		theme,
+		updateTokens,
+		customThemes
+	]);
+	useEffect(() => {
+		if (!enabled) return;
+		if (!tokenizerRef.current) return;
+		const currentText = latestTextRef.current;
+		updateTokens(currentText);
+	}, [
+		enabled,
+		safeText,
+		updateTokens
+	]);
+	return result;
+};
+const useStreamHighlight = (text, { language, theme: builtinTheme, streaming }) => {
+	const safeText = text ?? "";
+	const lang = (language ?? "plaintext").toLowerCase();
+	const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);
+	const effectiveTheme = builtinTheme || "lobe-theme";
+	return useStreamingHighlighter(safeText, {
+		customThemes: { "lobe-theme": lobe_theme_default },
+		enabled: streaming,
+		language: matchedLanguage,
+		theme: effectiveTheme
+	});
+};
+
+//#endregion
+export { useStreamHighlight };
+//# sourceMappingURL=useStreamHighlight.mjs.map

package/es/hooks/useStreamHighlight.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStreamHighlight.mjs","names":["lines: ThemedToken[][]","currentLine: ThemedToken[]","mergedLines: ThemedToken[][]","themesToLoad: any[]","lobeTheme"],"sources":["../../src/hooks/useStreamHighlight.ts"],"sourcesContent":["'use client';\n\nimport { CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\nimport { ShikiStreamTokenizer } from 'shiki-stream';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\nimport { StreamingHighlightResult, shikiModulePromise } from './useHighlight';\n\ntype StreamingOptions = {\n  customThemes?: Record<string, any>;\n  enabled?: boolean;\n  language: string;\n  theme: string;\n};\n\n// Optimized version: reduce array allocations and object spreading\nconst tokensToLineTokens = (tokens: ThemedToken[]): ThemedToken[][] => {\n  if (!tokens.length) return [[]];\n\n  const lines: ThemedToken[][] = [];\n  let currentLine: ThemedToken[] = [];\n\n  for (const token of tokens) {\n    const content = token.content ?? '';\n\n    if (content === '\\n') {\n      lines.push(currentLine);\n      currentLine = [];\n      continue;\n    }\n\n    const newlineIndex = content.indexOf('\\n');\n    if (newlineIndex === -1) {\n      // No newline, add token directly\n      currentLine.push(token);\n    } else {\n      // Split on newlines\n      const segments = content.split('\\n');\n      for (const [j, segment] of segments.entries()) {\n        if (segment) {\n          // Only create new object if we need to modify content\n          currentLine.push(j === 0 && segment === content ? token : { ...token, content: segment });\n        }\n        if (j < segments.length - 1) {\n          lines.push(currentLine);\n          currentLine = [];\n        }\n      }\n    }\n  }\n\n  // Don't forget the last line\n  if (currentLine.length > 0 || lines.length === 0) {\n    lines.push(currentLine);\n  }\n\n  return lines.length > 0 ? lines : [[]];\n};\n\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\n  if (!bg && !fg) return undefined;\n  return {\n    backgroundColor: bg,\n    color: fg,\n  };\n};\n\nconst useStreamingHighlighter = (\n  text: string,\n  options: StreamingOptions,\n): StreamingHighlightResult | undefined => {\n  const { customThemes, enabled, language, theme } = options;\n  const [result, setResult] = useState<StreamingHighlightResult>();\n  const tokenizerRef = useRef<ShikiStreamTokenizer | null>(null);\n  const previousTextRef = useRef('');\n  const safeText = text ?? '';\n  const latestTextRef = useRef(safeText);\n  const preStyleRef = useRef<CSSProperties | undefined>(undefined);\n  const linesRef = useRef<ThemedToken[][]>([[]]);\n\n  useEffect(() => {\n    latestTextRef.current = safeText;\n  }, [safeText]);\n\n  // Use ref to store callback to avoid recreating it\n  const setStreamingResultRef = useRef((rawLines: ThemedToken[][]) => {\n    const previousLines = linesRef.current;\n    const newLinesLength = rawLines.length;\n    const prevLinesLength = previousLines.length;\n\n    // Fast path: if lengths differ or it's a complete reset, use new lines directly\n    if (newLinesLength !== prevLinesLength || newLinesLength === 0) {\n      linesRef.current = rawLines;\n      setResult({\n        lines: rawLines,\n        preStyle: preStyleRef.current,\n      });\n      return;\n    }\n\n    // Optimized comparison: only check changed lines\n    let hasChanges = false;\n    const mergedLines: ThemedToken[][] = [];\n\n    for (let i = 0; i < newLinesLength; i++) {\n      const newLine = rawLines[i];\n      const prevLine = previousLines[i];\n\n      // Quick reference equality check first\n      if (prevLine === newLine) {\n        mergedLines[i] = prevLine;\n        continue;\n      }\n\n      // Length check\n      if (!prevLine || prevLine.length !== newLine.length) {\n        mergedLines[i] = newLine;\n        hasChanges = true;\n        continue;\n      }\n\n      // Deep comparison only for lines that might have changed\n      let lineChanged = false;\n      for (const [j, newToken] of newLine.entries()) {\n        if (prevLine[j] !== newToken) {\n          lineChanged = true;\n          break;\n        }\n      }\n\n      if (lineChanged) {\n        mergedLines[i] = newLine;\n        hasChanges = true;\n      } else {\n        mergedLines[i] = prevLine;\n      }\n    }\n\n    // Only update state if there are actual changes\n    if (hasChanges) {\n      linesRef.current = mergedLines;\n      setResult({\n        lines: mergedLines,\n        preStyle: preStyleRef.current,\n      });\n    }\n  });\n\n  const updateTokens = useCallback(async (nextText: string, forceReset = false) => {\n    const tokenizer = tokenizerRef.current;\n    if (!tokenizer) return;\n\n    if (forceReset) {\n      tokenizer.clear();\n      previousTextRef.current = '';\n    }\n\n    const previousText = previousTextRef.current;\n    let chunk = nextText;\n    const canAppend = !forceReset && nextText.startsWith(previousText);\n\n    if (canAppend) {\n      chunk = nextText.slice(previousText.length);\n    } else if (!forceReset) {\n      tokenizer.clear();\n    }\n\n    previousTextRef.current = nextText;\n\n    if (!chunk) {\n      // Optimize: avoid array spread if possible\n      const stableTokens = tokenizer.tokensStable;\n      const unstableTokens = tokenizer.tokensUnstable;\n      const totalLength = stableTokens.length + unstableTokens.length;\n\n      if (totalLength === 0) {\n        setStreamingResultRef.current([[]]);\n        return;\n      }\n\n      // Only create merged array if we have both stable and unstable tokens\n      const mergedTokens =\n        stableTokens.length === 0\n          ? unstableTokens\n          : unstableTokens.length === 0\n            ? stableTokens\n            : [...stableTokens, ...unstableTokens];\n\n      setStreamingResultRef.current(tokensToLineTokens(mergedTokens));\n      return;\n    }\n\n    try {\n      await tokenizer.enqueue(chunk);\n      // Optimize: avoid array spread if possible\n      const stableTokens = tokenizer.tokensStable;\n      const unstableTokens = tokenizer.tokensUnstable;\n      const mergedTokens =\n        stableTokens.length === 0\n          ? unstableTokens\n          : unstableTokens.length === 0\n            ? stableTokens\n            : [...stableTokens, ...unstableTokens];\n      setStreamingResultRef.current(tokensToLineTokens(mergedTokens));\n    } catch (error) {\n      console.error('Streaming highlighting failed:', error);\n    }\n  }, []);\n\n  // Cache highlighter key to avoid unnecessary recreations\n  const highlighterKeyRef = useRef<string>('');\n\n  useEffect(() => {\n    if (!enabled) {\n      tokenizerRef.current?.clear();\n      tokenizerRef.current = null;\n      previousTextRef.current = '';\n      preStyleRef.current = undefined;\n      linesRef.current = [[]];\n      setResult(undefined);\n      highlighterKeyRef.current = '';\n      return;\n    }\n\n    // Skip if language/theme combination hasn't changed\n    const currentKey = `${language}-${theme}`;\n    if (highlighterKeyRef.current === currentKey && tokenizerRef.current) {\n      return;\n    }\n\n    let cancelled = false;\n\n    (async () => {\n      const mod = await shikiModulePromise;\n      if (!mod || cancelled) return;\n\n      try {\n        // Load custom theme if using slack-dark or slack-ochin\n        let themesToLoad: any[] = [theme];\n        if (customThemes && theme === 'lobe-theme') {\n          const customTheme = customThemes[theme];\n          if (customTheme) {\n            themesToLoad = [customTheme as any];\n          }\n        }\n\n        // Only load the specific language and theme needed\n        // getSingletonHighlighter will cache the instance internally\n        const highlighter = await mod.getSingletonHighlighter({\n          langs: language ? [language] : ['plaintext'],\n          themes: themesToLoad,\n        });\n\n        if (!highlighter || cancelled) return;\n\n        // Only create new tokenizer if key changed\n        if (highlighterKeyRef.current !== currentKey) {\n          // Clear old tokenizer\n          tokenizerRef.current?.clear();\n\n          const tokenizer = new ShikiStreamTokenizer({\n            highlighter,\n            lang: language,\n            theme,\n          });\n\n          tokenizerRef.current = tokenizer;\n          highlighterKeyRef.current = currentKey;\n          previousTextRef.current = '';\n          linesRef.current = [[]];\n\n          const themeInfo = highlighter.getTheme(theme);\n          preStyleRef.current = createPreStyle(themeInfo?.bg, themeInfo?.fg);\n        }\n\n        const currentText = latestTextRef.current;\n        if (currentText) {\n          await updateTokens(currentText, true);\n        } else {\n          setStreamingResultRef.current([[]]);\n        }\n      } catch (error) {\n        console.error('Streaming highlighter initialization failed:', error);\n        // Reset on error\n        highlighterKeyRef.current = '';\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n      // Cleanup only if this effect was cancelled before completion\n      // The next effect will handle cleanup if key changed\n    };\n  }, [enabled, language, theme, updateTokens, customThemes]);\n\n  // Separate effect for text updates to avoid unnecessary tokenizer recreation\n  useEffect(() => {\n    if (!enabled) return;\n    if (!tokenizerRef.current) return;\n    // Use ref to get latest text to avoid stale closures\n    const currentText = latestTextRef.current;\n    updateTokens(currentText);\n  }, [enabled, safeText, updateTokens]);\n\n  return result;\n};\n\nexport const useStreamHighlight = (\n  text: string,\n  {\n    language,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n) => {\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  const effectiveTheme = builtinTheme || 'lobe-theme';\n\n  return useStreamingHighlighter(safeText, {\n    customThemes: {\n      'lobe-theme': lobeTheme,\n    },\n    enabled: streaming,\n    language: matchedLanguage,\n    theme: effectiveTheme,\n  });\n};\n"],"mappings":"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"}

package/es/hooks/useStreamMermaid.mjs

@@ -0,0 +1,87 @@
+'use client';
+
+import { createMermaidConfig, loadMermaid } from "./useMermaid.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "antd-style";
+
+//#region src/hooks/useStreamMermaid.ts
+/**
+* 流式 Mermaid 渲染 - 支持内容逐步更新
+*/
+const useStreamMermaid = (content, { enabled = true, id, theme: customTheme }) => {
+	const theme = useTheme();
+	const [data, setData] = useState("");
+	const previousContentRef = useRef("");
+	const latestContentRef = useRef(content);
+	const renderTimeoutRef = useRef(void 0);
+	const mermaidConfig = useMemo(() => createMermaidConfig(theme, customTheme), [
+		theme.fontFamilyCode,
+		theme.isDarkMode,
+		theme.colorTextDescription,
+		theme.fontFamily,
+		theme.colorTextSecondary,
+		theme.colorBgContainer,
+		theme.colorInfoBg,
+		theme.colorInfoText,
+		theme.geekblue,
+		theme.colorWarning,
+		theme.colorSuccess,
+		theme.colorError,
+		theme.colorBorder,
+		theme.colorInfoBorder,
+		theme.colorSuccessBorder,
+		theme.colorSuccessBg,
+		theme.colorSuccessText,
+		theme.colorText,
+		customTheme
+	]);
+	useEffect(() => {
+		latestContentRef.current = content;
+	}, [content]);
+	useEffect(() => {
+		if (!enabled) {
+			setData("");
+			previousContentRef.current = "";
+			const timeoutId$1 = renderTimeoutRef.current;
+			if (timeoutId$1) clearTimeout(timeoutId$1);
+			return;
+		}
+		const currentContent = latestContentRef.current;
+		if (currentContent === previousContentRef.current && data) return;
+		const timeoutId = renderTimeoutRef.current;
+		if (timeoutId) clearTimeout(timeoutId);
+		renderTimeoutRef.current = setTimeout(async () => {
+			const contentToRender = latestContentRef.current;
+			if (contentToRender !== currentContent) return;
+			try {
+				const mermaidInstance = await loadMermaid();
+				if (!mermaidInstance) return;
+				if (await mermaidInstance.parse(contentToRender)) {
+					mermaidInstance.initialize(mermaidConfig);
+					const { svg } = await mermaidInstance.render(id, contentToRender);
+					if (latestContentRef.current === contentToRender) {
+						setData(svg);
+						previousContentRef.current = contentToRender;
+					}
+				}
+			} catch (error_) {
+				if (contentToRender === latestContentRef.current) console.error("Mermaid 解析错误:", error_);
+			}
+		}, 300);
+		return () => {
+			const timeoutId$1 = renderTimeoutRef.current;
+			if (timeoutId$1) clearTimeout(timeoutId$1);
+		};
+	}, [
+		enabled,
+		content,
+		id,
+		mermaidConfig,
+		data
+	]);
+	return data;
+};
+
+//#endregion
+export { useStreamMermaid };
+//# sourceMappingURL=useStreamMermaid.mjs.map

package/es/hooks/useStreamMermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStreamMermaid.mjs","names":["timeoutId"],"sources":["../../src/hooks/useStreamMermaid.ts"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport type { MermaidConfig } from 'mermaid/dist/config.type';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { createMermaidConfig, loadMermaid } from './useMermaid';\n\n/**\n * 流式 Mermaid 渲染 - 支持内容逐步更新\n */\nexport const useStreamMermaid = (\n  content: string,\n  {\n    enabled = true,\n    id,\n    theme: customTheme,\n  }: {\n    enabled?: boolean;\n    id: string;\n    theme?: MermaidConfig['theme'];\n  },\n): string => {\n  const theme = useTheme();\n  const [data, setData] = useState<string>('');\n  const previousContentRef = useRef<string>('');\n  const latestContentRef = useRef(content);\n  const renderTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // 提取主题相关配置到 useMemo 中\n  const mermaidConfig = useMemo(\n    () => createMermaidConfig(theme, customTheme),\n    [\n      theme.fontFamilyCode,\n      theme.isDarkMode,\n      theme.colorTextDescription,\n      theme.fontFamily,\n      theme.colorTextSecondary,\n      theme.colorBgContainer,\n      theme.colorInfoBg,\n      theme.colorInfoText,\n      theme.geekblue,\n      theme.colorWarning,\n      theme.colorSuccess,\n      theme.colorError,\n      theme.colorBorder,\n      theme.colorInfoBorder,\n      theme.colorSuccessBorder,\n      theme.colorSuccessBg,\n      theme.colorSuccessText,\n      theme.colorText,\n      customTheme,\n    ],\n  );\n\n  // Update latest content ref\n  useEffect(() => {\n    latestContentRef.current = content;\n  }, [content]);\n\n  // Debounced rendering for streaming content\n  useEffect(() => {\n    if (!enabled) {\n      setData('');\n      previousContentRef.current = '';\n      const timeoutId = renderTimeoutRef.current;\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n      return;\n    }\n\n    const currentContent = latestContentRef.current;\n\n    // Skip if content hasn't changed\n    if (currentContent === previousContentRef.current && data) {\n      return;\n    }\n\n    // Clear previous timeout\n    const timeoutId = renderTimeoutRef.current;\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n\n    // Debounce rendering for streaming content (wait 300ms after last change)\n    renderTimeoutRef.current = setTimeout(async () => {\n      const contentToRender = latestContentRef.current;\n\n      // Skip if content changed during debounce\n      if (contentToRender !== currentContent) {\n        return;\n      }\n\n      try {\n        const mermaidInstance = await loadMermaid();\n        if (!mermaidInstance) return;\n\n        // 验证语法\n        const isValid = await mermaidInstance.parse(contentToRender);\n\n        if (isValid) {\n          // 初始化并渲染\n          mermaidInstance.initialize(mermaidConfig);\n          const { svg } = await mermaidInstance.render(id, contentToRender);\n\n          // Only update if content hasn't changed during rendering\n          if (latestContentRef.current === contentToRender) {\n            setData(svg);\n            previousContentRef.current = contentToRender;\n          }\n        }\n      } catch (error_) {\n        // Silently handle errors during streaming\n        // Only log if this is the final content\n        if (contentToRender === latestContentRef.current) {\n          console.error('Mermaid 解析错误:', error_);\n        }\n      }\n    }, 300);\n\n    return () => {\n      const timeoutId = renderTimeoutRef.current;\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [enabled, content, id, mermaidConfig, data]);\n\n  return data;\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAa,oBACX,SACA,EACE,UAAU,MACV,IACA,OAAO,kBAME;CACX,MAAM,QAAQ,UAAU;CACxB,MAAM,CAAC,MAAM,WAAW,SAAiB,GAAG;CAC5C,MAAM,qBAAqB,OAAe,GAAG;CAC7C,MAAM,mBAAmB,OAAO,QAAQ;CACxC,MAAM,mBAAmB,OAAkD,OAAU;CAGrF,MAAM,gBAAgB,cACd,oBAAoB,OAAO,YAAY,EAC7C;EACE,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN;EACD,CACF;AAGD,iBAAgB;AACd,mBAAiB,UAAU;IAC1B,CAAC,QAAQ,CAAC;AAGb,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,WAAQ,GAAG;AACX,sBAAmB,UAAU;GAC7B,MAAMA,cAAY,iBAAiB;AACnC,OAAIA,YACF,cAAaA,YAAU;AAEzB;;EAGF,MAAM,iBAAiB,iBAAiB;AAGxC,MAAI,mBAAmB,mBAAmB,WAAW,KACnD;EAIF,MAAM,YAAY,iBAAiB;AACnC,MAAI,UACF,cAAa,UAAU;AAIzB,mBAAiB,UAAU,WAAW,YAAY;GAChD,MAAM,kBAAkB,iBAAiB;AAGzC,OAAI,oBAAoB,eACtB;AAGF,OAAI;IACF,MAAM,kBAAkB,MAAM,aAAa;AAC3C,QAAI,CAAC,gBAAiB;AAKtB,QAFgB,MAAM,gBAAgB,MAAM,gBAAgB,EAE/C;AAEX,qBAAgB,WAAW,cAAc;KACzC,MAAM,EAAE,QAAQ,MAAM,gBAAgB,OAAO,IAAI,gBAAgB;AAGjE,SAAI,iBAAiB,YAAY,iBAAiB;AAChD,cAAQ,IAAI;AACZ,yBAAmB,UAAU;;;YAG1B,QAAQ;AAGf,QAAI,oBAAoB,iBAAiB,QACvC,SAAQ,MAAM,iBAAiB,OAAO;;KAGzC,IAAI;AAEP,eAAa;GACX,MAAMA,cAAY,iBAAiB;AACnC,OAAIA,YACF,cAAaA,YAAU;;IAG1B;EAAC;EAAS;EAAS;EAAI;EAAe;EAAK,CAAC;AAE/C,QAAO"}

package/es/i18n/context.d.mts

@@ -1,7 +1,7 @@
 import { MotionComponentType } from "../MotionProvider/index.mjs";
 import { I18nContextValue, TranslationKey, TranslationResources, TranslationResourcesInput } from "./types.mjs";
 import "../ConfigProvider/index.mjs";
-import * as react4 from "react";
+import * as react35 from "react";
 import { ReactNode } from "react";
 
 //#region src/i18n/context.d.ts
@@ -11,7 +11,7 @@ interface I18nProviderProps {
   motion: MotionComponentType;
   resources?: TranslationResourcesInput;
 }
-declare const I18nProvider: react4.NamedExoticComponent<I18nProviderProps>;
+declare const I18nProvider: react35.NamedExoticComponent<I18nProviderProps>;
 //#endregion
 export { I18nProvider, I18nProviderProps };
 //# sourceMappingURL=context.d.mts.map

package/es/icons/lucideExtra/BotPromptIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react72 from "react";
+import * as react73 from "react";
 import * as lucide_react0 from "lucide-react";
 
 //#region src/icons/lucideExtra/BotPromptIcon.d.ts
-declare const BotPromptIcon: react72.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react72.RefAttributes<SVGSVGElement>>;
+declare const BotPromptIcon: react73.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react73.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { BotPromptIcon };
 //# sourceMappingURL=BotPromptIcon.d.mts.map

package/es/icons/lucideExtra/CreateBotIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react74 from "react";
+import * as react75 from "react";
 import * as lucide_react1 from "lucide-react";
 
 //#region src/icons/lucideExtra/CreateBotIcon.d.ts
-declare const CreateBotIcon: react74.ForwardRefExoticComponent<Omit<lucide_react1.LucideProps, "ref"> & react74.RefAttributes<SVGSVGElement>>;
+declare const CreateBotIcon: react75.ForwardRefExoticComponent<Omit<lucide_react1.LucideProps, "ref"> & react75.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { CreateBotIcon };
 //# sourceMappingURL=CreateBotIcon.d.mts.map

package/es/icons/lucideExtra/DiscordIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react70 from "react";
+import * as react71 from "react";
 import * as lucide_react0 from "lucide-react";
 
 //#region src/icons/lucideExtra/DiscordIcon.d.ts
-declare const DiscordIcon: react70.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react70.RefAttributes<SVGSVGElement>>;
+declare const DiscordIcon: react71.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react71.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { DiscordIcon };
 //# sourceMappingURL=DiscordIcon.d.mts.map

package/es/icons/lucideExtra/GlobeOffIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react82 from "react";
-import * as lucide_react5 from "lucide-react";
+import * as react79 from "react";
+import * as lucide_react3 from "lucide-react";
 
 //#region src/icons/lucideExtra/GlobeOffIcon.d.ts
-declare const GlobeOffIcon: react82.ForwardRefExoticComponent<Omit<lucide_react5.LucideProps, "ref"> & react82.RefAttributes<SVGSVGElement>>;
+declare const GlobeOffIcon: react79.ForwardRefExoticComponent<Omit<lucide_react3.LucideProps, "ref"> & react79.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { GlobeOffIcon };
 //# sourceMappingURL=GlobeOffIcon.d.mts.map