@hubstr/kit 0.1.5 → 0.1.6

package/ui/es/hooks/useNativeButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeButton.mjs","names":[],"sources":["../../src/hooks/useNativeButton.ts"],"sourcesContent":["import { isValidElement, type ReactElement, type ReactNode, useMemo } from 'react';\r\n\r\nexport interface UseNativeButtonOptions {\r\n  /**\r\n   * The children element that will be used as the trigger\r\n   */\r\n  children: ReactNode;\r\n  /**\r\n   * User-provided nativeButton prop\r\n   */\r\n  nativeButton?: boolean;\r\n  /**\r\n   * Additional nativeButton from trigger props (for DropdownMenu)\r\n   */\r\n  triggerNativeButton?: boolean;\r\n}\r\n\r\nexport interface UseNativeButtonResult {\r\n  /**\r\n   * Whether the trigger element is a native button\r\n   */\r\n  isNativeButtonTriggerElement: boolean;\r\n  /**\r\n   * The resolved nativeButton value to pass to Base UI components\r\n   */\r\n  resolvedNativeButton: boolean | undefined;\r\n}\r\n\r\n/**\r\n * Map of component displayNames to their nativeButton values.\r\n * Components that render native <button> elements should be true,\r\n * components that render non-button elements should be false.\r\n */\r\nconst NATIVE_BUTTON_MAP: Record<string, boolean> = {\r\n  A: false,\r\n  ActionIcon: false,\r\n  ActionIconGroup: false,\r\n  Alert: false,\r\n  Avatar: false,\r\n  AvatarGroup: false,\r\n  Block: false,\r\n  BottomGradientButton: true,\r\n  Burger: false,\r\n  Button: true,\r\n  Center: false,\r\n  Checkbox: false,\r\n  CheckboxGroup: false,\r\n  Collapse: false,\r\n  ColorSwatches: false,\r\n  CopyButton: false,\r\n  DownloadButton: false,\r\n  EditableText: false,\r\n  Empty: false,\r\n  FileTypeIcon: false,\r\n  Flexbox: false,\r\n  FluentEmoji: false,\r\n  GradientButton: true,\r\n  Highlighter: false,\r\n  Hotkey: false,\r\n  Icon: false,\r\n  Image: false,\r\n  Img: false,\r\n  Input: false,\r\n  InputNumber: false,\r\n  InputPassword: false,\r\n  List: false,\r\n  ListItem: false,\r\n  Select: false,\r\n  Switch: false,\r\n  Markdown: false,\r\n  MaterialFileTypeIcon: false,\r\n  Segmented: false,\r\n  Skeleton: false,\r\n  SkeletonAvatar: false,\r\n  SkeletonBlock: false,\r\n  SkeletonButton: false,\r\n  SkeletonParagraph: false,\r\n  SkeletonTags: false,\r\n  SkeletonTitle: false,\r\n  Snippet: false,\r\n  Tag: false,\r\n  Text: false,\r\n  TextArea: false,\r\n  ThemeSwitch: false,\r\n  Video: false,\r\n};\r\n\r\n/**\r\n * Get the displayName of a React component from an element.\r\n * Handles function components, forwardRef, memo, etc.\r\n */\r\nfunction getComponentDisplayName(element: ReactElement): string | undefined {\r\n  const type = element.type;\r\n\r\n  if (typeof type === 'string') return undefined;\r\n\r\n  if (typeof type === 'function') {\r\n    return (type as any).displayName || type.name;\r\n  }\r\n\r\n  if (typeof type === 'object' && type !== null) {\r\n    // Handle forwardRef, memo, etc.\r\n    const displayName =\r\n      (type as any).displayName ||\r\n      (type as any).render?.displayName ||\r\n      (type as any).render?.name ||\r\n      (type as any).type?.displayName ||\r\n      (type as any).type?.name;\r\n    return displayName;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\n/**\r\n * Hook to resolve nativeButton prop for Base UI trigger components.\r\n *\r\n * When using `render`, Base UI expects the rendered element to be a native <button> by default.\r\n * If we can infer it's not, we opt out to avoid warnings (users can still override via `nativeButton`).\r\n */\r\nexport function useNativeButton({\r\n  children,\r\n  nativeButton,\r\n  triggerNativeButton,\r\n}: UseNativeButtonOptions): UseNativeButtonResult {\r\n  const isNativeButtonTriggerElement = useMemo(() => {\r\n    if (!isValidElement(children)) return false;\r\n    return typeof children.type === 'string' && children.type === 'button';\r\n  }, [children]);\r\n\r\n  const resolvedNativeButton = useMemo(() => {\r\n    // User-provided nativeButton takes highest priority\r\n    if (nativeButton !== undefined) return nativeButton;\r\n    // Trigger props nativeButton (for DropdownMenu) takes second priority\r\n    if (triggerNativeButton !== undefined) return triggerNativeButton;\r\n    // If it's a native button element, return true\r\n    if (isNativeButtonTriggerElement) return true;\r\n    // If children is not a valid element, let Base UI decide\r\n    if (!isValidElement(children)) return undefined;\r\n    // If it's a string type but not a button (e.g., 'div'), return false\r\n    if (typeof children.type === 'string') return false;\r\n\r\n    // Check if it's a known component from the library\r\n    const displayName = getComponentDisplayName(children);\r\n    if (displayName && displayName in NATIVE_BUTTON_MAP) {\r\n      return NATIVE_BUTTON_MAP[displayName];\r\n    }\r\n\r\n    // For unknown React components, default to false to avoid warnings\r\n    // since most custom components don't render native buttons\r\n    return false;\r\n  }, [children, isNativeButtonTriggerElement, nativeButton, triggerNativeButton]);\r\n\r\n  return {\r\n    isNativeButtonTriggerElement,\r\n    resolvedNativeButton,\r\n  };\r\n}\r\n"],"mappings":";;;;;;;AAiCA,MAAM,oBAA6C;CACjD,GAAG;CACH,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,aAAa;CACb,OAAO;CACP,sBAAsB;CACtB,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,eAAe;CACf,UAAU;CACV,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,cAAc;CACd,SAAS;CACT,aAAa;CACb,gBAAgB;CAChB,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,aAAa;CACb,eAAe;CACf,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,sBAAsB;CACtB,WAAW;CACX,UAAU;CACV,gBAAgB;CAChB,eAAe;CACf,gBAAgB;CAChB,mBAAmB;CACnB,cAAc;CACd,eAAe;CACf,SAAS;CACT,KAAK;CACL,MAAM;CACN,UAAU;CACV,aAAa;CACb,OAAO;CACR;;;;;AAMD,SAAS,wBAAwB,SAA2C;CAC1E,MAAM,OAAO,QAAQ;AAErB,KAAI,OAAO,SAAS,SAAU,QAAO,KAAA;AAErC,KAAI,OAAO,SAAS,WAClB,QAAQ,KAAa,eAAe,KAAK;AAG3C,KAAI,OAAO,SAAS,YAAY,SAAS,KAQvC,QALG,KAAa,eACb,KAAa,QAAQ,eACrB,KAAa,QAAQ,QACrB,KAAa,MAAM,eACnB,KAAa,MAAM;;;;;;;;AAa1B,SAAgB,gBAAgB,EAC9B,UACA,cACA,uBACgD;CAChD,MAAM,+BAA+B,cAAc;AACjD,MAAI,CAAC,eAAe,SAAS,CAAE,QAAO;AACtC,SAAO,OAAO,SAAS,SAAS,YAAY,SAAS,SAAS;IAC7D,CAAC,SAAS,CAAC;AAyBd,QAAO;EACL;EACA,sBAzB2B,cAAc;AAEzC,OAAI,iBAAiB,KAAA,EAAW,QAAO;AAEvC,OAAI,wBAAwB,KAAA,EAAW,QAAO;AAE9C,OAAI,6BAA8B,QAAO;AAEzC,OAAI,CAAC,eAAe,SAAS,CAAE,QAAO,KAAA;AAEtC,OAAI,OAAO,SAAS,SAAS,SAAU,QAAO;GAG9C,MAAM,cAAc,wBAAwB,SAAS;AACrD,OAAI,eAAe,eAAe,kBAChC,QAAO,kBAAkB;AAK3B,UAAO;KACN;GAAC;GAAU;GAA8B;GAAc;GAAoB,CAIxD;EACrB"}

package/ui/es/hooks/useStableValue.mjs

@@ -0,0 +1,30 @@
+import { isDeepEqual } from "../utils/isDeepEqual.mjs";
+import { useRef } from "react";
+//#region src/hooks/useStableValue.ts
+/**
+* Return the previous reference when the incoming value is structurally
+* identical to it, so callers don't have to wrap every prop-shaped object
+* in `useMemo` to keep downstream React reference checks happy.
+*
+* Motivation: when a structural prop like `componentProps={{ html: {
+* theme: 'dark' } }}` is passed inline, React's normal ref equality
+* forces every consumer downstream to re-run effects, recompute memos,
+* and — most importantly — remount any children whose deps include
+* sub-properties of that object (`components` for react-markdown is the
+* classic case). For Markdown rendering a streaming HTML preview that
+* blew the iframe up 50× per second.
+*
+* Comparison is structural for plain objects and arrays. Functions and
+* class instances are compared by reference — callers passing inline
+* callbacks still need `useCallback` to keep those stable. Don't use this
+* for state values you intend to compare with `===`.
+*/
+const useStableValue = (value) => {
+	const prevRef = useRef(value);
+	if (!isDeepEqual(prevRef.current, value)) prevRef.current = value;
+	return prevRef.current;
+};
+//#endregion
+export { useStableValue };
+
+//# sourceMappingURL=useStableValue.mjs.map

package/ui/es/hooks/useStableValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStableValue.mjs","names":[],"sources":["../../src/hooks/useStableValue.ts"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport { isDeepEqual } from '../utils/isDeepEqual';\r\n\r\n/**\r\n * Return the previous reference when the incoming value is structurally\r\n * identical to it, so callers don't have to wrap every prop-shaped object\r\n * in `useMemo` to keep downstream React reference checks happy.\r\n *\r\n * Motivation: when a structural prop like `componentProps={{ html: {\r\n * theme: 'dark' } }}` is passed inline, React's normal ref equality\r\n * forces every consumer downstream to re-run effects, recompute memos,\r\n * and — most importantly — remount any children whose deps include\r\n * sub-properties of that object (`components` for react-markdown is the\r\n * classic case). For Markdown rendering a streaming HTML preview that\r\n * blew the iframe up 50× per second.\r\n *\r\n * Comparison is structural for plain objects and arrays. Functions and\r\n * class instances are compared by reference — callers passing inline\r\n * callbacks still need `useCallback` to keep those stable. Don't use this\r\n * for state values you intend to compare with `===`.\r\n */\r\nexport const useStableValue = <T>(value: T): T => {\r\n  const prevRef = useRef<T>(value);\r\n  if (!isDeepEqual(prevRef.current, value)) {\r\n    prevRef.current = value;\r\n  }\r\n  return prevRef.current;\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,kBAAqB,UAAgB;CAChD,MAAM,UAAU,OAAU,MAAM;AAChC,KAAI,CAAC,YAAY,QAAQ,SAAS,MAAM,CACtC,SAAQ,UAAU;AAEpB,QAAO,QAAQ"}

package/ui/es/hooks/useStreamHighlight.mjs

@@ -0,0 +1,218 @@
+"use client";
+import hubstr_theme_default from "../Highlighter/theme/hubstr-theme.mjs";
+import { getCodeLanguageByInput } from "../Highlighter/const.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 === "hubstr-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]);
+	return useStreamingHighlighter(safeText, {
+		customThemes: { "hubstr-theme": hubstr_theme_default },
+		enabled: streaming,
+		language: matchedLanguage,
+		theme: builtinTheme || "hubstr-theme"
+	});
+};
+//#endregion
+export { useStreamHighlight };
+
+//# sourceMappingURL=useStreamHighlight.mjs.map

package/ui/es/hooks/useStreamHighlight.mjs.map

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

package/ui/es/hooks/useStreamMermaid.mjs

@@ -0,0 +1,85 @@
+"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 = renderTimeoutRef.current;
+			if (timeoutId) clearTimeout(timeoutId);
+			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 = renderTimeoutRef.current;
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	}, [
+		enabled,
+		content,
+		id,
+		mermaidConfig,
+		data
+	]);
+	return data;
+};
+//#endregion
+export { useStreamMermaid };
+
+//# sourceMappingURL=useStreamMermaid.mjs.map

package/ui/es/hooks/useStreamMermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStreamMermaid.mjs","names":[],"sources":["../../src/hooks/useStreamMermaid.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useTheme } from 'antd-style';\r\nimport type { MermaidConfig } from 'mermaid';\r\nimport { useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport { createMermaidConfig, loadMermaid } from './useMermaid';\r\n\r\n/**\r\n * 流式 Mermaid 渲染 - 支持内容逐步更新\r\n */\r\nexport const useStreamMermaid = (\r\n  content: string,\r\n  {\r\n    enabled = true,\r\n    id,\r\n    theme: customTheme,\r\n  }: {\r\n    enabled?: boolean;\r\n    id: string;\r\n    theme?: MermaidConfig['theme'];\r\n  },\r\n): string => {\r\n  const theme = useTheme();\r\n  const [data, setData] = useState<string>('');\r\n  const previousContentRef = useRef<string>('');\r\n  const latestContentRef = useRef(content);\r\n  const renderTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\r\n\r\n  // 提取主题相关配置到 useMemo 中\r\n  const mermaidConfig = useMemo(\r\n    () => createMermaidConfig(theme, customTheme),\r\n    [\r\n      theme.fontFamilyCode,\r\n      theme.isDarkMode,\r\n      theme.colorTextDescription,\r\n      theme.fontFamily,\r\n      theme.colorTextSecondary,\r\n      theme.colorBgContainer,\r\n      theme.colorInfoBg,\r\n      theme.colorInfoText,\r\n      theme.geekblue,\r\n      theme.colorWarning,\r\n      theme.colorSuccess,\r\n      theme.colorError,\r\n      theme.colorBorder,\r\n      theme.colorInfoBorder,\r\n      theme.colorSuccessBorder,\r\n      theme.colorSuccessBg,\r\n      theme.colorSuccessText,\r\n      theme.colorText,\r\n      customTheme,\r\n    ],\r\n  );\r\n\r\n  // Update latest content ref\r\n  useEffect(() => {\r\n    latestContentRef.current = content;\r\n  }, [content]);\r\n\r\n  // Debounced rendering for streaming content\r\n  useEffect(() => {\r\n    if (!enabled) {\r\n      setData('');\r\n      previousContentRef.current = '';\r\n      const timeoutId = renderTimeoutRef.current;\r\n      if (timeoutId) {\r\n        clearTimeout(timeoutId);\r\n      }\r\n      return;\r\n    }\r\n\r\n    const currentContent = latestContentRef.current;\r\n\r\n    // Skip if content hasn't changed\r\n    if (currentContent === previousContentRef.current && data) {\r\n      return;\r\n    }\r\n\r\n    // Clear previous timeout\r\n    const timeoutId = renderTimeoutRef.current;\r\n    if (timeoutId) {\r\n      clearTimeout(timeoutId);\r\n    }\r\n\r\n    // Debounce rendering for streaming content (wait 300ms after last change)\r\n    renderTimeoutRef.current = setTimeout(async () => {\r\n      const contentToRender = latestContentRef.current;\r\n\r\n      // Skip if content changed during debounce\r\n      if (contentToRender !== currentContent) {\r\n        return;\r\n      }\r\n\r\n      try {\r\n        const mermaidInstance = await loadMermaid();\r\n        if (!mermaidInstance) return;\r\n\r\n        // 验证语法\r\n        const isValid = await mermaidInstance.parse(contentToRender);\r\n\r\n        if (isValid) {\r\n          // 初始化并渲染\r\n          mermaidInstance.initialize(mermaidConfig);\r\n          const { svg } = await mermaidInstance.render(id, contentToRender);\r\n\r\n          // Only update if content hasn't changed during rendering\r\n          if (latestContentRef.current === contentToRender) {\r\n            setData(svg);\r\n            previousContentRef.current = contentToRender;\r\n          }\r\n        }\r\n      } catch (error_) {\r\n        // Silently handle errors during streaming\r\n        // Only log if this is the final content\r\n        if (contentToRender === latestContentRef.current) {\r\n          console.error('Mermaid 解析错误:', error_);\r\n        }\r\n      }\r\n    }, 300);\r\n\r\n    return () => {\r\n      const timeoutId = renderTimeoutRef.current;\r\n      if (timeoutId) {\r\n        clearTimeout(timeoutId);\r\n      }\r\n    };\r\n  }, [enabled, content, id, mermaidConfig, data]);\r\n\r\n  return data;\r\n};\r\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,KAAA,EAAU;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,MAAM,YAAY,iBAAiB;AACnC,OAAI,UACF,cAAa,UAAU;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,QAAI,MAFkB,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,MAAM,YAAY,iBAAiB;AACnC,OAAI,UACF,cAAa,UAAU;;IAG1B;EAAC;EAAS;EAAS;EAAI;EAAe;EAAK,CAAC;AAE/C,QAAO"}

package/ui/es/hooks/useTextOverflow.mjs

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/useTextOverflow.ts
+const useTextOverflow = (textRef, ellipsis, children) => {
+	const [isOverflow, setIsOverflow] = useState(false);
+	const tooltipWhenOverflow = typeof ellipsis === "object" && ellipsis.tooltipWhenOverflow;
+	useEffect(() => {
+		if (!tooltipWhenOverflow) return;
+		const checkOverflow = () => {
+			const element = textRef.current;
+			if (!element) return;
+			const rows = typeof ellipsis === "object" ? ellipsis.rows : void 0;
+			if (rows && rows > 1) setIsOverflow(element.scrollHeight > element.clientHeight);
+			else setIsOverflow(element.scrollWidth > element.clientWidth);
+		};
+		checkOverflow();
+		const resizeObserver = new ResizeObserver(checkOverflow);
+		if (textRef.current) resizeObserver.observe(textRef.current);
+		return () => resizeObserver.disconnect();
+	}, [
+		tooltipWhenOverflow,
+		ellipsis,
+		children,
+		textRef
+	]);
+	return isOverflow;
+};
+//#endregion
+export { useTextOverflow };
+
+//# sourceMappingURL=useTextOverflow.mjs.map

package/ui/es/hooks/useTextOverflow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextOverflow.mjs","names":[],"sources":["../../src/hooks/useTextOverflow.ts"],"sourcesContent":["import { type ReactNode, type RefObject, useEffect, useState } from 'react';\r\n\r\ninterface EllipsisConfig {\r\n  rows?: number;\r\n  tooltipWhenOverflow?: boolean;\r\n}\r\n\r\nexport const useTextOverflow = <T extends HTMLElement = HTMLElement>(\r\n  textRef: RefObject<T | null>,\r\n  ellipsis: boolean | EllipsisConfig | undefined,\r\n  children: ReactNode,\r\n) => {\r\n  const [isOverflow, setIsOverflow] = useState(false);\r\n\r\n  const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\r\n\r\n  useEffect(() => {\r\n    if (!tooltipWhenOverflow) return;\r\n\r\n    const checkOverflow = () => {\r\n      const element = textRef.current;\r\n      if (!element) return;\r\n\r\n      const rows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\r\n      if (rows && rows > 1) {\r\n        setIsOverflow(element.scrollHeight > element.clientHeight);\r\n      } else {\r\n        setIsOverflow(element.scrollWidth > element.clientWidth);\r\n      }\r\n    };\r\n\r\n    checkOverflow();\r\n\r\n    const resizeObserver = new ResizeObserver(checkOverflow);\r\n    if (textRef.current) {\r\n      resizeObserver.observe(textRef.current);\r\n    }\r\n\r\n    return () => resizeObserver.disconnect();\r\n  }, [tooltipWhenOverflow, ellipsis, children, textRef]);\r\n\r\n  return isOverflow;\r\n};\r\n"],"mappings":";;AAOA,MAAa,mBACX,SACA,UACA,aACG;CACH,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;AAErE,iBAAgB;AACd,MAAI,CAAC,oBAAqB;EAE1B,MAAM,sBAAsB;GAC1B,MAAM,UAAU,QAAQ;AACxB,OAAI,CAAC,QAAS;GAEd,MAAM,OAAO,OAAO,aAAa,WAAW,SAAS,OAAO,KAAA;AAC5D,OAAI,QAAQ,OAAO,EACjB,eAAc,QAAQ,eAAe,QAAQ,aAAa;OAE1D,eAAc,QAAQ,cAAc,QAAQ,YAAY;;AAI5D,iBAAe;EAEf,MAAM,iBAAiB,IAAI,eAAe,cAAc;AACxD,MAAI,QAAQ,QACV,gBAAe,QAAQ,QAAQ,QAAQ;AAGzC,eAAa,eAAe,YAAY;IACvC;EAAC;EAAqB;EAAU;EAAU;EAAQ,CAAC;AAEtD,QAAO"}

package/ui/es/i18n/context.d.mts

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

package/ui/es/i18n/context.mjs

@@ -0,0 +1,17 @@
+import ConfigProvider from "../ConfigProvider/index.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/i18n/context.tsx
+const I18nProvider = memo(({ children, locale, resources, motion }) => {
+	return /* @__PURE__ */ jsx(ConfigProvider, {
+		config: {},
+		locale,
+		motion,
+		resources,
+		children
+	});
+});
+//#endregion
+export { I18nProvider };
+
+//# sourceMappingURL=context.mjs.map

package/ui/es/i18n/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/i18n/context.tsx"],"sourcesContent":["import { memo, type ReactNode } from 'react';\r\n\r\nimport ConfigProvider from '../ConfigProvider';\r\nimport type { MotionComponentType } from '../MotionProvider';\r\n\r\nimport { type TranslationResourcesInput } from './types';\r\n\r\nexport interface I18nProviderProps {\r\n  children: ReactNode;\r\n  locale?: string;\r\n  motion: MotionComponentType;\r\n  resources?: TranslationResourcesInput;\r\n}\r\n\r\n// Re-export for backward compatibility\r\nexport { I18nContext } from '../ConfigProvider';\r\n\r\n// I18nProvider delegates to ConfigProvider with flattened i18n props\r\nexport const I18nProvider = memo<I18nProviderProps>(({ children, locale, resources, motion }) => {\r\n  return (\r\n    <ConfigProvider config={{}} locale={locale} motion={motion} resources={resources}>\r\n      {children}\r\n    </ConfigProvider>\r\n  );\r\n});\r\n\r\n// Internal useI18n - for useTranslation only, not exported publicly\r\nexport { useI18n } from '../ConfigProvider';\r\n\r\n// Re-export types\r\nexport type { I18nContextValue, TranslationKey, TranslationResources } from './types';\r\n"],"mappings":";;;;AAkBA,MAAa,eAAe,MAAyB,EAAE,UAAU,QAAQ,WAAW,aAAa;AAC/F,QACE,oBAAC,gBAAD;EAAgB,QAAQ,EAAE;EAAU;EAAgB;EAAmB;EACpE;EACc,CAAA;EAEnB"}

package/ui/es/i18n/index.d.mts

@@ -0,0 +1,6 @@
+import { I18nContextValue, Locale, TranslationKey, TranslationResources, TranslationResourcesInput, TranslationResourcesMap, TranslationValue } from "./types.mjs";
+import { I18nProvider, I18nProviderProps } from "./context.mjs";
+import { useTranslation } from "./useTranslation.mjs";
+import { index_d_exports } from "./resources/en/index.mjs";
+import { index_d_exports as index_d_exports$1 } from "./resources/zhCn/index.mjs";
+export { type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, type TranslationKey, type TranslationResources, type TranslationResourcesInput, type TranslationResourcesMap, type TranslationValue, index_d_exports as en, useTranslation, index_d_exports$1 as zhCn };

package/ui/es/i18n/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/ui/es/i18n/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/ui/es/i18n/index.mjs

@@ -0,0 +1,5 @@
+import { I18nProvider } from "./context.mjs";
+import { useTranslation } from "./useTranslation.mjs";
+import { en_exports } from "./resources/en/index.mjs";
+import { zhCn_exports } from "./resources/zhCn/index.mjs";
+export { I18nProvider, en_exports as en, useTranslation, zhCn_exports as zhCn };

package/ui/es/i18n/resources/en/chat.d.mts

@@ -0,0 +1,11 @@
+//#region src/i18n/resources/en/chat.d.ts
+declare const _default: {
+  readonly 'chat.avatar': "avatar";
+  readonly 'chat.placeholder': "...";
+  readonly 'tokenTag.overload': "Overload";
+  readonly 'tokenTag.remained': "Remained";
+  readonly 'tokenTag.used': "Used";
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=chat.d.mts.map

package/ui/es/i18n/resources/en/chat.mjs

@@ -0,0 +1,12 @@
+//#region src/i18n/resources/en/chat.ts
+var chat_default = {
+	"chat.avatar": "avatar",
+	"chat.placeholder": "...",
+	"tokenTag.overload": "Overload",
+	"tokenTag.remained": "Remained",
+	"tokenTag.used": "Used"
+};
+//#endregion
+export { chat_default as default };
+
+//# sourceMappingURL=chat.mjs.map

package/ui/es/i18n/resources/en/chat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.mjs","names":[],"sources":["../../../../src/i18n/resources/en/chat.ts"],"sourcesContent":["export default {\r\n  'chat.avatar': 'avatar',\r\n  'chat.placeholder': '...',\r\n  'tokenTag.overload': 'Overload',\r\n  'tokenTag.remained': 'Remained',\r\n  'tokenTag.used': 'Used',\r\n} as const;\r\n"],"mappings":";AAAA,IAAA,eAAe;CACb,eAAe;CACf,oBAAoB;CACpB,qBAAqB;CACrB,qBAAqB;CACrB,iBAAiB;CAClB"}

package/ui/es/i18n/resources/en/common.d.mts

@@ -0,0 +1,11 @@
+//#region src/i18n/resources/en/common.d.ts
+declare const _default: {
+  readonly 'common.cancel': "Cancel";
+  readonly 'common.confirm': "Confirm";
+  readonly 'common.delete': "Delete";
+  readonly 'common.edit': "Edit";
+  readonly 'common.empty': "(empty)";
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=common.d.mts.map

package/ui/es/i18n/resources/en/common.mjs

@@ -0,0 +1,12 @@
+//#region src/i18n/resources/en/common.ts
+var common_default = {
+	"common.cancel": "Cancel",
+	"common.confirm": "Confirm",
+	"common.delete": "Delete",
+	"common.edit": "Edit",
+	"common.empty": "(empty)"
+};
+//#endregion
+export { common_default as default };
+
+//# sourceMappingURL=common.mjs.map

package/ui/es/i18n/resources/en/common.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.mjs","names":[],"sources":["../../../../src/i18n/resources/en/common.ts"],"sourcesContent":["export default {\r\n  'common.cancel': 'Cancel',\r\n  'common.confirm': 'Confirm',\r\n  'common.delete': 'Delete',\r\n  'common.edit': 'Edit',\r\n  'common.empty': '(empty)',\r\n} as const;\r\n"],"mappings":";AAAA,IAAA,iBAAe;CACb,iBAAiB;CACjB,kBAAkB;CAClB,iBAAiB;CACjB,eAAe;CACf,gBAAgB;CACjB"}

package/ui/es/i18n/resources/en/editableMessage.d.mts

@@ -0,0 +1,13 @@
+//#region src/i18n/resources/en/editableMessage.d.ts
+declare const _default: {
+  readonly 'editableMessage.addProps': "Add Props";
+  readonly 'editableMessage.delete': "Delete";
+  readonly 'editableMessage.input': "Input";
+  readonly 'editableMessage.inputPlaceholder': "Please enter sample input content";
+  readonly 'editableMessage.output': "Output";
+  readonly 'editableMessage.outputPlaceholder': "Please enter sample output content";
+  readonly 'editableMessage.system': "System";
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=editableMessage.d.mts.map

package/ui/es/i18n/resources/en/editableMessage.mjs

@@ -0,0 +1,14 @@
+//#region src/i18n/resources/en/editableMessage.ts
+var editableMessage_default = {
+	"editableMessage.addProps": "Add Props",
+	"editableMessage.delete": "Delete",
+	"editableMessage.input": "Input",
+	"editableMessage.inputPlaceholder": "Please enter sample input content",
+	"editableMessage.output": "Output",
+	"editableMessage.outputPlaceholder": "Please enter sample output content",
+	"editableMessage.system": "System"
+};
+//#endregion
+export { editableMessage_default as default };
+
+//# sourceMappingURL=editableMessage.mjs.map

package/ui/es/i18n/resources/en/editableMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"editableMessage.mjs","names":[],"sources":["../../../../src/i18n/resources/en/editableMessage.ts"],"sourcesContent":["export default {\r\n  'editableMessage.addProps': 'Add Props',\r\n  'editableMessage.delete': 'Delete',\r\n  'editableMessage.input': 'Input',\r\n  'editableMessage.inputPlaceholder': 'Please enter sample input content',\r\n  'editableMessage.output': 'Output',\r\n  'editableMessage.outputPlaceholder': 'Please enter sample output content',\r\n  'editableMessage.system': 'System',\r\n} as const;\r\n"],"mappings":";AAAA,IAAA,0BAAe;CACb,4BAA4B;CAC5B,0BAA0B;CAC1B,yBAAyB;CACzB,oCAAoC;CACpC,0BAA0B;CAC1B,qCAAqC;CACrC,0BAA0B;CAC3B"}

package/ui/es/i18n/resources/en/emojiPicker.d.mts

@@ -0,0 +1,12 @@
+//#region src/i18n/resources/en/emojiPicker.d.ts
+declare const _default: {
+  readonly 'emojiPicker.delete': "Delete";
+  readonly 'emojiPicker.draggerDesc': "Click or Drag image to this area to upload";
+  readonly 'emojiPicker.emoji': "Emoji";
+  readonly 'emojiPicker.fileTypeError': "You can only upload image file!";
+  readonly 'emojiPicker.upload': "Upload";
+  readonly 'emojiPicker.uploadBtn': "Crop and Upload";
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=emojiPicker.d.mts.map

package/ui/es/i18n/resources/en/emojiPicker.mjs

@@ -0,0 +1,13 @@
+//#region src/i18n/resources/en/emojiPicker.ts
+var emojiPicker_default = {
+	"emojiPicker.delete": "Delete",
+	"emojiPicker.draggerDesc": "Click or Drag image to this area to upload",
+	"emojiPicker.emoji": "Emoji",
+	"emojiPicker.fileTypeError": "You can only upload image file!",
+	"emojiPicker.upload": "Upload",
+	"emojiPicker.uploadBtn": "Crop and Upload"
+};
+//#endregion
+export { emojiPicker_default as default };
+
+//# sourceMappingURL=emojiPicker.mjs.map

package/ui/es/i18n/resources/en/emojiPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emojiPicker.mjs","names":[],"sources":["../../../../src/i18n/resources/en/emojiPicker.ts"],"sourcesContent":["export default {\r\n  'emojiPicker.delete': 'Delete',\r\n  'emojiPicker.draggerDesc': 'Click or Drag image to this area to upload',\r\n  'emojiPicker.emoji': 'Emoji',\r\n  'emojiPicker.fileTypeError': 'You can only upload image file!',\r\n  'emojiPicker.upload': 'Upload',\r\n  'emojiPicker.uploadBtn': 'Crop and Upload',\r\n} as const;\r\n"],"mappings":";AAAA,IAAA,sBAAe;CACb,sBAAsB;CACtB,2BAA2B;CAC3B,qBAAqB;CACrB,6BAA6B;CAC7B,sBAAsB;CACtB,yBAAyB;CAC1B"}