@jinmi/ui 0.0.0-stage → 6.0.2

package/es/hooks/useMarkdown/utils.mjs

@@ -0,0 +1,82 @@
+import { preprocessLaTeX } from "@lobehub/streamdown";
+//#region src/hooks/useMarkdown/utils.ts
+const CACHE_SIZE = 50;
+/**
+* Cache for storing processed content to avoid redundant processing
+*/
+const contentCache = /* @__PURE__ */ new Map();
+/**
+* Adds content to the cache with size limitation
+* Removes oldest entry if cache size limit is reached
+*
+* @param key The cache key
+* @param value The processed content to store
+*/
+const addToCache = (key, value) => {
+	if (contentCache.size >= CACHE_SIZE) {
+		const firstKey = contentCache.keys().next().value;
+		if (firstKey) contentCache.delete(firstKey);
+	}
+	contentCache.set(key, value);
+};
+/**
+* Transforms citation references in the format [n] to markdown links
+*
+* @param rawContent The markdown content with citation references
+* @param length The number of citations
+* @returns The content with citations transformed to markdown links
+*/
+const transformCitations = (rawContent, length = 0) => {
+	if (length === 0) return rawContent;
+	const citationIndices = Array.from({ length }).fill("").map((_, index) => index + 1);
+	const pattern = new RegExp(`\\[(${citationIndices.join("|")})\\]`, "g");
+	const matches = [];
+	let match;
+	while ((match = pattern.exec(rawContent)) !== null) matches.push({
+		id: match[1],
+		index: match.index,
+		length: match[0].length
+	});
+	const excludedRanges = [];
+	const latexBlockRegex = /\$\$([\s\S]*?)\$\$/g;
+	while ((match = latexBlockRegex.exec(rawContent)) !== null) excludedRanges.push({
+		end: match.index + match[0].length - 1,
+		start: match.index
+	});
+	const inlineLatexRegex = /\$([^$]*)\$/g;
+	while ((match = inlineLatexRegex.exec(rawContent)) !== null) excludedRanges.push({
+		end: match.index + match[0].length - 1,
+		start: match.index
+	});
+	const codeBlockRegex = /```([\s\S]*?)```/g;
+	while ((match = codeBlockRegex.exec(rawContent)) !== null) excludedRanges.push({
+		end: match.index + match[0].length - 1,
+		start: match.index
+	});
+	const inlineCodeRegex = /`([^`]*)`/g;
+	while ((match = inlineCodeRegex.exec(rawContent)) !== null) excludedRanges.push({
+		end: match.index + match[0].length - 1,
+		start: match.index
+	});
+	const validMatches = matches.filter((citation) => {
+		return !excludedRanges.some((range) => citation.index >= range.start && citation.index <= range.end);
+	});
+	let result = rawContent;
+	for (let i = validMatches.length - 1; i >= 0; i--) {
+		const citation = validMatches[i];
+		const before = result.slice(0, Math.max(0, citation.index));
+		const after = result.slice(Math.max(0, citation.index + citation.length));
+		result = before + `[#citation-${citation.id}](citation-${citation.id})` + after;
+	}
+	return result.replaceAll("][", "] [");
+};
+const preprocessMarkdownContent = (str, { enableCustomFootnotes, enableLatex, citationsLength } = {}) => {
+	let content = str;
+	if (enableLatex) content = preprocessLaTeX(content);
+	if (enableCustomFootnotes) content = transformCitations(content, citationsLength);
+	return content;
+};
+//#endregion
+export { addToCache, contentCache, preprocessMarkdownContent, transformCitations };
+
+//# sourceMappingURL=utils.mjs.map

package/es/hooks/useMarkdown/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/utils.ts"],"sourcesContent":["import { preprocessLaTeX } from '@lobehub/streamdown';\r\n\r\n// Cache configuration\r\nconst CACHE_SIZE = 50;\r\n\r\n/**\r\n * Cache for storing processed content to avoid redundant processing\r\n */\r\nexport const contentCache = new Map<string, string>();\r\n\r\n/**\r\n * Adds content to the cache with size limitation\r\n * Removes oldest entry if cache size limit is reached\r\n *\r\n * @param key The cache key\r\n * @param value The processed content to store\r\n */\r\nexport const addToCache = (key: string, value: string) => {\r\n  if (contentCache.size >= CACHE_SIZE) {\r\n    // Remove the oldest cache entry\r\n    const firstKey = contentCache.keys().next().value;\r\n    if (firstKey) contentCache.delete(firstKey);\r\n  }\r\n  contentCache.set(key, value);\r\n};\r\n\r\n/**\r\n * Transforms citation references in the format [n] to markdown links\r\n *\r\n * @param rawContent The markdown content with citation references\r\n * @param length The number of citations\r\n * @returns The content with citations transformed to markdown links\r\n */\r\nexport const transformCitations = (rawContent: string, length: number = 0) => {\r\n  if (length === 0) return rawContent;\r\n\r\n  // 生成引用索引\r\n  const citationIndices = Array.from({ length })\r\n    .fill('')\r\n    .map((_, index) => index + 1);\r\n\r\n  // 匹配所有潜在的引用\r\n  const pattern = new RegExp(`\\\\[(${citationIndices.join('|')})\\\\]`, 'g');\r\n  const matches: { id: string; index: number; length: number }[] = [];\r\n\r\n  let match;\r\n  while ((match = pattern.exec(rawContent)) !== null) {\r\n    matches.push({\r\n      id: match[1],\r\n      index: match.index,\r\n      length: match[0].length,\r\n    });\r\n  }\r\n\r\n  // 识别所有需要排除的区域\r\n  const excludedRanges: { end: number; start: number }[] = [];\r\n\r\n  // 查找LaTeX块 $$...$$\r\n  const latexBlockRegex = /\\$\\$([\\s\\S]*?)\\$\\$/g;\r\n  while ((match = latexBlockRegex.exec(rawContent)) !== null) {\r\n    excludedRanges.push({\r\n      end: match.index + match[0].length - 1,\r\n      start: match.index,\r\n    });\r\n  }\r\n\r\n  // 查找行内LaTeX $...$\r\n  const inlineLatexRegex = /\\$([^$]*)\\$/g;\r\n  while ((match = inlineLatexRegex.exec(rawContent)) !== null) {\r\n    excludedRanges.push({\r\n      end: match.index + match[0].length - 1,\r\n      start: match.index,\r\n    });\r\n  }\r\n\r\n  // 查找代码块 ```...```\r\n  const codeBlockRegex = /```([\\s\\S]*?)```/g;\r\n  while ((match = codeBlockRegex.exec(rawContent)) !== null) {\r\n    excludedRanges.push({\r\n      end: match.index + match[0].length - 1,\r\n      start: match.index,\r\n    });\r\n  }\r\n\r\n  // 查找行内代码 `...`\r\n  const inlineCodeRegex = /`([^`]*)`/g;\r\n  while ((match = inlineCodeRegex.exec(rawContent)) !== null) {\r\n    excludedRanges.push({\r\n      end: match.index + match[0].length - 1,\r\n      start: match.index,\r\n    });\r\n  }\r\n\r\n  // 过滤掉在排除区域内的引用\r\n  const validMatches = matches.filter((citation) => {\r\n    return !excludedRanges.some(\r\n      (range) => citation.index >= range.start && citation.index <= range.end,\r\n    );\r\n  });\r\n\r\n  // 从后向前替换，避免索引变化问题\r\n  let result = rawContent;\r\n  for (let i = validMatches.length - 1; i >= 0; i--) {\r\n    const citation = validMatches[i];\r\n    const before = result.slice(0, Math.max(0, citation.index));\r\n    const after = result.slice(Math.max(0, citation.index + citation.length));\r\n    result = before + `[#citation-${citation.id}](citation-${citation.id})` + after;\r\n  }\r\n\r\n  // 处理连续引用\r\n  return result.replaceAll('][', '] [');\r\n};\r\n\r\n/**\r\n * Preprocessing options for markdown content\r\n */\r\ninterface PreprocessOptions {\r\n  citationsLength?: number;\r\n  enableCustomFootnotes?: boolean;\r\n  enableLatex?: boolean;\r\n}\r\n\r\nexport const preprocessMarkdownContent = (\r\n  str: string,\r\n  { enableCustomFootnotes, enableLatex, citationsLength }: PreprocessOptions = {},\r\n) => {\r\n  let content = str;\r\n\r\n  // Process LaTeX expressions\r\n  if (enableLatex) {\r\n    content = preprocessLaTeX(content);\r\n  }\r\n\r\n  // Process custom footnotes/citations\r\n  if (enableCustomFootnotes) {\r\n    content = transformCitations(content, citationsLength);\r\n  }\r\n\r\n  return content;\r\n};\r\n"],"mappings":";;AAGA,MAAM,aAAa;;;;AAKnB,MAAa,+BAAe,IAAI,IAAoB;;;;;;;;AASpD,MAAa,cAAc,KAAa,UAAkB;CACxD,IAAI,aAAa,QAAQ,YAAY;EAEnC,MAAM,WAAW,aAAa,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;EAC5C,IAAI,UAAU,aAAa,OAAO,QAAQ;CAC5C;CACA,aAAa,IAAI,KAAK,KAAK;AAC7B;;;;;;;;AASA,MAAa,sBAAsB,YAAoB,SAAiB,MAAM;CAC5E,IAAI,WAAW,GAAG,OAAO;CAGzB,MAAM,kBAAkB,MAAM,KAAK,EAAE,OAAO,CAAC,CAAC,CAC3C,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU,QAAQ,CAAC;CAG9B,MAAM,UAAU,IAAI,OAAO,OAAO,gBAAgB,KAAK,GAAG,EAAE,OAAO,GAAG;CACtE,MAAM,UAA2D,CAAC;CAElE,IAAI;CACJ,QAAQ,QAAQ,QAAQ,KAAK,UAAU,OAAO,MAC5C,QAAQ,KAAK;EACX,IAAI,MAAM;EACV,OAAO,MAAM;EACb,QAAQ,MAAM,EAAE,CAAC;CACnB,CAAC;CAIH,MAAM,iBAAmD,CAAC;CAG1D,MAAM,kBAAkB;CACxB,QAAQ,QAAQ,gBAAgB,KAAK,UAAU,OAAO,MACpD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,mBAAmB;CACzB,QAAQ,QAAQ,iBAAiB,KAAK,UAAU,OAAO,MACrD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,iBAAiB;CACvB,QAAQ,QAAQ,eAAe,KAAK,UAAU,OAAO,MACnD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,kBAAkB;CACxB,QAAQ,QAAQ,gBAAgB,KAAK,UAAU,OAAO,MACpD,eAAe,KAAK;EAClB,KAAK,MAAM,QAAQ,MAAM,EAAE,CAAC,SAAS;EACrC,OAAO,MAAM;CACf,CAAC;CAIH,MAAM,eAAe,QAAQ,QAAQ,aAAa;EAChD,OAAO,CAAC,eAAe,MACpB,UAAU,SAAS,SAAS,MAAM,SAAS,SAAS,SAAS,MAAM,GACtE;CACF,CAAC;CAGD,IAAI,SAAS;CACb,KAAK,IAAI,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;EACjD,MAAM,WAAW,aAAa;EAC9B,MAAM,SAAS,OAAO,MAAM,GAAG,KAAK,IAAI,GAAG,SAAS,KAAK,CAAC;EAC1D,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI,GAAG,SAAS,QAAQ,SAAS,MAAM,CAAC;EACxE,SAAS,SAAS,cAAc,SAAS,GAAG,aAAa,SAAS,GAAG,KAAK;CAC5E;CAGA,OAAO,OAAO,WAAW,MAAM,KAAK;AACtC;AAWA,MAAa,6BACX,KACA,EAAE,uBAAuB,aAAa,oBAAuC,CAAC,MAC3E;CACH,IAAI,UAAU;CAGd,IAAI,aACF,UAAU,gBAAgB,OAAO;CAInC,IAAI,uBACF,UAAU,mBAAmB,SAAS,eAAe;CAGvD,OAAO;AACT"}

package/es/hooks/useMermaid.mjs

@@ -0,0 +1,98 @@
+"use client";
+import { prepareInlineMermaidSvg } from "../Mermaid/SyntaxMermaid/prepareInlineSvg.mjs";
+import { createCdnMermaidConfig, renderWithCdnMermaid } from "./useMermaidCdn.mjs";
+import { useEffect, useId, useMemo, useState } from "react";
+import { useThemeMode } from "antd-style";
+import { THEMES, renderMermaidSVG } from "beautiful-mermaid";
+//#region src/hooks/useMermaid.ts
+/**
+* beautiful-mermaid emits these as CSS custom properties on the SVG root and
+* derives the rest with color-mix(), so pointing them at antd's variables lets
+* the diagram follow the theme through CSS alone — no token subscription, and
+* no re-render (or re-layout) when the appearance changes.
+*/
+const LOBE_THEME_OPTIONS = {
+	accent: "var(--ant-color-primary)",
+	bg: "var(--ant-color-bg-container)",
+	border: "var(--ant-color-border)",
+	fg: "var(--ant-color-text)",
+	line: "var(--ant-color-text-secondary)",
+	muted: "var(--ant-color-text-description)",
+	surface: "var(--ant-color-fill-tertiary)",
+	transparent: true
+};
+const isNamedTheme = (theme) => !!theme && theme !== "jinmi-theme" && theme in THEMES;
+const createMermaidOptions = (customTheme) => isNamedTheme(customTheme) ? THEMES[customTheme] : LOBE_THEME_OPTIONS;
+/**
+* beautiful-mermaid covers six diagram types; anything else throws here and is
+* handed to the CDN-loaded upstream mermaid instead.
+*/
+const renderMermaid = (content, scopeId, customTheme) => {
+	if (!content) return { svg: "" };
+	try {
+		const svg = renderMermaidSVG(content, createMermaidOptions(customTheme));
+		return { svg: prepareInlineMermaidSvg(svg, scopeId) };
+	} catch {
+		return {
+			error: "unsupported",
+			svg: ""
+		};
+	}
+};
+const useCdnMermaidFallback = (content, { enabled, theme: customTheme }) => {
+	const { isDarkMode } = useThemeMode();
+	const reactId = useId();
+	const [result, setResult] = useState({ svg: "" });
+	useEffect(() => {
+		if (!enabled || !content) {
+			setResult({ svg: "" });
+			return;
+		}
+		let active = true;
+		setResult({
+			loading: true,
+			svg: ""
+		});
+		const config = createCdnMermaidConfig(isDarkMode, isNamedTheme(customTheme) ? customTheme : void 0);
+		renderWithCdnMermaid(content, `mermaid-cdn-${reactId.replaceAll(":", "")}`, config).then((svg) => {
+			if (!active) return;
+			setResult(svg ? { svg } : {
+				error: "Failed to render diagram",
+				svg: ""
+			});
+		}).catch(() => {
+			if (active) setResult({
+				error: "Failed to render diagram",
+				svg: ""
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		enabled,
+		content,
+		isDarkMode,
+		customTheme,
+		reactId
+	]);
+	return result;
+};
+const useMermaid = (content, { theme: customTheme } = {}) => {
+	const reactId = useId();
+	const scopeId = useMemo(() => `mermaid-${reactId.replaceAll(":", "")}`, [reactId]);
+	const primary = useMemo(() => renderMermaid(content, scopeId, customTheme), [
+		content,
+		scopeId,
+		customTheme
+	]);
+	const fallback = useCdnMermaidFallback(content, {
+		enabled: Boolean(primary.error),
+		theme: customTheme
+	});
+	return primary.error ? fallback : primary;
+};
+//#endregion
+export { createMermaidOptions, renderMermaid, useCdnMermaidFallback, useMermaid };
+
+//# sourceMappingURL=useMermaid.mjs.map

package/es/hooks/useMermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMermaid.mjs","names":[],"sources":["../../src/hooks/useMermaid.ts"],"sourcesContent":["'use client';\r\n\r\nimport { useThemeMode } from 'antd-style';\r\nimport { renderMermaidSVG, type RenderOptions, type ThemeName, THEMES } from 'beautiful-mermaid';\r\nimport { useEffect, useId, useMemo, useState } from 'react';\r\n\r\nimport { prepareInlineMermaidSvg } from '@/Mermaid/SyntaxMermaid/prepareInlineSvg';\r\n\r\nimport { createCdnMermaidConfig, renderWithCdnMermaid } from './useMermaidCdn';\r\n\r\nexport type MermaidThemeName = 'jinmi-theme' | ThemeName;\r\n\r\nexport interface MermaidRenderResult {\r\n  error?: string;\r\n  loading?: boolean;\r\n  svg: string;\r\n}\r\n\r\n/**\r\n * beautiful-mermaid emits these as CSS custom properties on the SVG root and\r\n * derives the rest with color-mix(), so pointing them at antd's variables lets\r\n * the diagram follow the theme through CSS alone — no token subscription, and\r\n * no re-render (or re-layout) when the appearance changes.\r\n */\r\nconst LOBE_THEME_OPTIONS: RenderOptions = {\r\n  accent: 'var(--ant-color-primary)',\r\n  bg: 'var(--ant-color-bg-container)',\r\n  border: 'var(--ant-color-border)',\r\n  fg: 'var(--ant-color-text)',\r\n  line: 'var(--ant-color-text-secondary)',\r\n  muted: 'var(--ant-color-text-description)',\r\n  surface: 'var(--ant-color-fill-tertiary)',\r\n  transparent: true,\r\n};\r\n\r\nconst isNamedTheme = (theme?: MermaidThemeName): theme is ThemeName =>\r\n  !!theme && theme !== 'jinmi-theme' && theme in THEMES;\r\n\r\nexport const createMermaidOptions = (customTheme?: MermaidThemeName): RenderOptions =>\r\n  isNamedTheme(customTheme) ? THEMES[customTheme]! : LOBE_THEME_OPTIONS;\r\n\r\n/**\r\n * beautiful-mermaid covers six diagram types; anything else throws here and is\r\n * handed to the CDN-loaded upstream mermaid instead.\r\n */\r\nexport const renderMermaid = (\r\n  content: string,\r\n  scopeId: string,\r\n  customTheme?: MermaidThemeName,\r\n): MermaidRenderResult => {\r\n  if (!content) return { svg: '' };\r\n  try {\r\n    const svg = renderMermaidSVG(content, createMermaidOptions(customTheme));\r\n    return { svg: prepareInlineMermaidSvg(svg, scopeId) };\r\n  } catch {\r\n    return { error: 'unsupported', svg: '' };\r\n  }\r\n};\r\n\r\nexport const useCdnMermaidFallback = (\r\n  content: string,\r\n  { enabled, theme: customTheme }: { enabled: boolean; theme?: MermaidThemeName },\r\n): MermaidRenderResult => {\r\n  const { isDarkMode } = useThemeMode();\r\n  const reactId = useId();\r\n  const [result, setResult] = useState<MermaidRenderResult>({ svg: '' });\r\n\r\n  useEffect(() => {\r\n    if (!enabled || !content) {\r\n      setResult({ svg: '' });\r\n      return;\r\n    }\r\n\r\n    let active = true;\r\n    setResult({ loading: true, svg: '' });\r\n\r\n    const config = createCdnMermaidConfig(\r\n      isDarkMode,\r\n      isNamedTheme(customTheme) ? customTheme : undefined,\r\n    );\r\n\r\n    renderWithCdnMermaid(content, `mermaid-cdn-${reactId.replaceAll(':', '')}`, config)\r\n      .then((svg) => {\r\n        if (!active) return;\r\n        setResult(svg ? { svg } : { error: 'Failed to render diagram', svg: '' });\r\n      })\r\n      .catch(() => {\r\n        if (active) setResult({ error: 'Failed to render diagram', svg: '' });\r\n      });\r\n\r\n    return () => {\r\n      active = false;\r\n    };\r\n  }, [enabled, content, isDarkMode, customTheme, reactId]);\r\n\r\n  return result;\r\n};\r\n\r\nexport const useMermaid = (\r\n  content: string,\r\n  { theme: customTheme }: { theme?: MermaidThemeName } = {},\r\n): MermaidRenderResult => {\r\n  const reactId = useId();\r\n  const scopeId = useMemo(() => `mermaid-${reactId.replaceAll(':', '')}`, [reactId]);\r\n\r\n  const primary = useMemo(\r\n    () => renderMermaid(content, scopeId, customTheme),\r\n    [content, scopeId, customTheme],\r\n  );\r\n\r\n  const fallback = useCdnMermaidFallback(content, {\r\n    enabled: Boolean(primary.error),\r\n    theme: customTheme,\r\n  });\r\n\r\n  return primary.error ? fallback : primary;\r\n};\r\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,qBAAoC;CACxC,QAAQ;CACR,IAAI;CACJ,QAAQ;CACR,IAAI;CACJ,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;AACf;AAEA,MAAM,gBAAgB,UACpB,CAAC,CAAC,SAAS,UAAU,iBAAiB,SAAS;AAEjD,MAAa,wBAAwB,gBACnC,aAAa,WAAW,IAAI,OAAO,eAAgB;;;;;AAMrD,MAAa,iBACX,SACA,SACA,gBACwB;CACxB,IAAI,CAAC,SAAS,OAAO,EAAE,KAAK,GAAG;CAC/B,IAAI;EACF,MAAM,MAAM,iBAAiB,SAAS,qBAAqB,WAAW,CAAC;EACvE,OAAO,EAAE,KAAK,wBAAwB,KAAK,OAAO,EAAE;CACtD,QAAQ;EACN,OAAO;GAAE,OAAO;GAAe,KAAK;EAAG;CACzC;AACF;AAEA,MAAa,yBACX,SACA,EAAE,SAAS,OAAO,kBACM;CACxB,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,QAAQ,aAAa,SAA8B,EAAE,KAAK,GAAG,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,SAAS;GACxB,UAAU,EAAE,KAAK,GAAG,CAAC;GACrB;EACF;EAEA,IAAI,SAAS;EACb,UAAU;GAAE,SAAS;GAAM,KAAK;EAAG,CAAC;EAEpC,MAAM,SAAS,uBACb,YACA,aAAa,WAAW,IAAI,cAAc,KAAA,CAC5C;EAEA,qBAAqB,SAAS,eAAe,QAAQ,WAAW,KAAK,EAAE,KAAK,MAAM,CAAC,CAChF,MAAM,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,UAAU,MAAM,EAAE,IAAI,IAAI;IAAE,OAAO;IAA4B,KAAK;GAAG,CAAC;EAC1E,CAAC,CAAC,CACD,YAAY;GACX,IAAI,QAAQ,UAAU;IAAE,OAAO;IAA4B,KAAK;GAAG,CAAC;EACtE,CAAC;EAEH,aAAa;GACX,SAAS;EACX;CACF,GAAG;EAAC;EAAS;EAAS;EAAY;EAAa;CAAO,CAAC;CAEvD,OAAO;AACT;AAEA,MAAa,cACX,SACA,EAAE,OAAO,gBAA8C,CAAC,MAChC;CACxB,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,cAAc,WAAW,QAAQ,WAAW,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;CAEjF,MAAM,UAAU,cACR,cAAc,SAAS,SAAS,WAAW,GACjD;EAAC;EAAS;EAAS;CAAW,CAChC;CAEA,MAAM,WAAW,sBAAsB,SAAS;EAC9C,SAAS,QAAQ,QAAQ,KAAK;EAC9B,OAAO;CACT,CAAC;CAED,OAAO,QAAQ,QAAQ,WAAW;AACpC"}

package/es/hooks/useMermaidCdn.d.mts

@@ -0,0 +1,10 @@
+//#region src/hooks/useMermaidCdn.d.ts
+/**
+ * Point the fallback loader at a mirror, or at a self-hosted copy for offline
+ * and strict-CSP deployments. Resets any in-flight load.
+ */
+declare const setMermaidCdnUrl: (url: string) => void;
+declare const getMermaidCdnUrl: () => string;
+//#endregion
+export { getMermaidCdnUrl, setMermaidCdnUrl };
+//# sourceMappingURL=useMermaidCdn.d.mts.map

package/es/hooks/useMermaidCdn.mjs

@@ -0,0 +1,97 @@
+"use client";
+//#region src/hooks/useMermaidCdn.ts
+let mermaidCdnUrl = "https://esm.sh/mermaid@11";
+let mermaidPromise = null;
+/**
+* Point the fallback loader at a mirror, or at a self-hosted copy for offline
+* and strict-CSP deployments. Resets any in-flight load.
+*/
+const setMermaidCdnUrl = (url) => {
+	if (url === mermaidCdnUrl) return;
+	mermaidCdnUrl = url;
+	mermaidPromise = null;
+};
+const getMermaidCdnUrl = () => mermaidCdnUrl;
+const loadCdnMermaid = () => {
+	if (typeof window === "undefined") return Promise.resolve(null);
+	mermaidPromise ??= import(
+		/* @vite-ignore */
+		mermaidCdnUrl
+).then((mod) => mod.default ?? mod).catch(() => null);
+	return mermaidPromise;
+};
+/**
+* Upstream mermaid runs colour maths over themeVariables, so it needs literal
+* values rather than var() references. Reading antd's CSS variables here keeps
+* the cost off the render path — no theme context subscription, and it only
+* runs for the diagram types that actually fall back to the CDN.
+*/
+const readCssVars = (names) => {
+	const result = {};
+	if (typeof document === "undefined") return result;
+	const computed = globalThis.getComputedStyle(document.documentElement);
+	for (const [key, variable] of Object.entries(names)) result[key] = computed.getPropertyValue(variable).trim() || void 0;
+	return result;
+};
+const createCdnMermaidConfig = (isDarkMode, customTheme) => {
+	const token = readCssVars({
+		border: "--ant-color-border",
+		error: "--ant-color-error",
+		fontFamily: "--ant-font-family",
+		fontFamilyCode: "--ant-font-family-code",
+		infoBg: "--ant-color-info-bg",
+		infoBorder: "--ant-color-info-border",
+		infoText: "--ant-color-info-text",
+		primary: "--ant-color-primary",
+		success: "--ant-color-success",
+		successBg: "--ant-color-success-bg",
+		successBorder: "--ant-color-success-border",
+		successText: "--ant-color-success-text",
+		text: "--ant-color-text",
+		textDescription: "--ant-color-text-description",
+		textSecondary: "--ant-color-text-secondary",
+		bgContainer: "--ant-color-bg-container",
+		warning: "--ant-color-warning"
+	});
+	return {
+		fontFamily: token.fontFamilyCode,
+		gantt: { useWidth: 1920 },
+		securityLevel: "strict",
+		startOnLoad: false,
+		theme: customTheme || (isDarkMode ? "dark" : "neutral"),
+		themeVariables: customTheme ? void 0 : {
+			errorBkgColor: token.textDescription,
+			errorTextColor: token.textDescription,
+			fontFamily: token.fontFamily,
+			lineColor: token.textSecondary,
+			mainBkg: token.bgContainer,
+			noteBkgColor: token.infoBg,
+			noteTextColor: token.infoText,
+			pie1: token.primary,
+			pie2: token.warning,
+			pie3: token.success,
+			pie4: token.error,
+			primaryBorderColor: token.border,
+			primaryColor: token.bgContainer,
+			primaryTextColor: token.text,
+			secondaryBorderColor: token.infoBorder,
+			secondaryColor: token.infoBg,
+			secondaryTextColor: token.infoText,
+			tertiaryBorderColor: token.successBorder,
+			tertiaryColor: token.successBg,
+			tertiaryTextColor: token.successText,
+			textColor: token.text
+		}
+	};
+};
+const renderWithCdnMermaid = async (content, id, config) => {
+	const mermaid = await loadCdnMermaid();
+	if (!mermaid) return "";
+	mermaid.initialize(config);
+	const { svg } = await mermaid.render(id, content);
+	return svg;
+};
+//#endregion
+export { createCdnMermaidConfig, getMermaidCdnUrl, loadCdnMermaid, renderWithCdnMermaid, setMermaidCdnUrl };
+
+//# sourceMappingURL=useMermaidCdn.mjs.map

package/es/hooks/useMermaidCdn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMermaidCdn.mjs","names":[],"sources":["../../src/hooks/useMermaidCdn.ts"],"sourcesContent":["'use client';\r\n\r\ninterface CdnMermaidConfig {\r\n  fontFamily?: string;\r\n  gantt?: { useWidth?: number };\r\n  securityLevel?: string;\r\n  startOnLoad?: boolean;\r\n  theme?: string;\r\n  themeVariables?: Record<string, string | undefined>;\r\n}\r\n\r\ninterface CdnMermaidApi {\r\n  initialize: (config: CdnMermaidConfig) => void;\r\n  render: (id: string, content: string) => Promise<{ svg: string }>;\r\n}\r\n\r\nconst DEFAULT_MERMAID_CDN_URL = 'https://esm.sh/mermaid@11';\r\n\r\nlet mermaidCdnUrl = DEFAULT_MERMAID_CDN_URL;\r\nlet mermaidPromise: Promise<CdnMermaidApi | null> | null = null;\r\n\r\n/**\r\n * Point the fallback loader at a mirror, or at a self-hosted copy for offline\r\n * and strict-CSP deployments. Resets any in-flight load.\r\n */\r\nexport const setMermaidCdnUrl = (url: string) => {\r\n  if (url === mermaidCdnUrl) return;\r\n  mermaidCdnUrl = url;\r\n  mermaidPromise = null;\r\n};\r\n\r\nexport const getMermaidCdnUrl = () => mermaidCdnUrl;\r\n\r\nexport const loadCdnMermaid = (): Promise<CdnMermaidApi | null> => {\r\n  if (typeof window === 'undefined') return Promise.resolve(null);\r\n\r\n  mermaidPromise ??= import(/* @vite-ignore */ mermaidCdnUrl)\r\n    .then((mod) => (mod.default ?? mod) as CdnMermaidApi)\r\n    .catch(() => null);\r\n\r\n  return mermaidPromise;\r\n};\r\n\r\n/**\r\n * Upstream mermaid runs colour maths over themeVariables, so it needs literal\r\n * values rather than var() references. Reading antd's CSS variables here keeps\r\n * the cost off the render path — no theme context subscription, and it only\r\n * runs for the diagram types that actually fall back to the CDN.\r\n */\r\nconst readCssVars = <T extends string>(names: Record<T, string>): Record<T, string | undefined> => {\r\n  const result = {} as Record<T, string | undefined>;\r\n  if (typeof document === 'undefined') return result;\r\n\r\n  const computed = globalThis.getComputedStyle(document.documentElement);\r\n  for (const [key, variable] of Object.entries(names) as [T, string][]) {\r\n    result[key] = computed.getPropertyValue(variable).trim() || undefined;\r\n  }\r\n  return result;\r\n};\r\n\r\nexport const createCdnMermaidConfig = (\r\n  isDarkMode: boolean,\r\n  customTheme?: string,\r\n): CdnMermaidConfig => {\r\n  const token = readCssVars({\r\n    border: '--ant-color-border',\r\n    error: '--ant-color-error',\r\n    fontFamily: '--ant-font-family',\r\n    fontFamilyCode: '--ant-font-family-code',\r\n    infoBg: '--ant-color-info-bg',\r\n    infoBorder: '--ant-color-info-border',\r\n    infoText: '--ant-color-info-text',\r\n    primary: '--ant-color-primary',\r\n    success: '--ant-color-success',\r\n    successBg: '--ant-color-success-bg',\r\n    successBorder: '--ant-color-success-border',\r\n    successText: '--ant-color-success-text',\r\n    text: '--ant-color-text',\r\n    textDescription: '--ant-color-text-description',\r\n    textSecondary: '--ant-color-text-secondary',\r\n    bgContainer: '--ant-color-bg-container',\r\n    warning: '--ant-color-warning',\r\n  });\r\n\r\n  return {\r\n    fontFamily: token.fontFamilyCode,\r\n    gantt: { useWidth: 1920 },\r\n    // SECURITY: 'strict' keeps Mermaid from rendering node labels via innerHTML,\r\n    // which would be an XSS vector for model-generated diagram content.\r\n    securityLevel: 'strict',\r\n    startOnLoad: false,\r\n    theme: customTheme || (isDarkMode ? 'dark' : 'neutral'),\r\n    themeVariables: customTheme\r\n      ? undefined\r\n      : {\r\n          errorBkgColor: token.textDescription,\r\n          errorTextColor: token.textDescription,\r\n          fontFamily: token.fontFamily,\r\n          lineColor: token.textSecondary,\r\n          mainBkg: token.bgContainer,\r\n          noteBkgColor: token.infoBg,\r\n          noteTextColor: token.infoText,\r\n          pie1: token.primary,\r\n          pie2: token.warning,\r\n          pie3: token.success,\r\n          pie4: token.error,\r\n          primaryBorderColor: token.border,\r\n          primaryColor: token.bgContainer,\r\n          primaryTextColor: token.text,\r\n          secondaryBorderColor: token.infoBorder,\r\n          secondaryColor: token.infoBg,\r\n          secondaryTextColor: token.infoText,\r\n          tertiaryBorderColor: token.successBorder,\r\n          tertiaryColor: token.successBg,\r\n          tertiaryTextColor: token.successText,\r\n          textColor: token.text,\r\n        },\r\n  };\r\n};\r\n\r\nexport const renderWithCdnMermaid = async (\r\n  content: string,\r\n  id: string,\r\n  config: CdnMermaidConfig,\r\n): Promise<string> => {\r\n  const mermaid = await loadCdnMermaid();\r\n  if (!mermaid) return '';\r\n\r\n  mermaid.initialize(config);\r\n  const { svg } = await mermaid.render(id, content);\r\n  return svg;\r\n};\r\n"],"mappings":";;AAkBA,IAAI,gBAAgB;AACpB,IAAI,iBAAuD;;;;;AAM3D,MAAa,oBAAoB,QAAgB;CAC/C,IAAI,QAAQ,eAAe;CAC3B,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAa,yBAAyB;AAEtC,MAAa,uBAAsD;CACjE,IAAI,OAAO,WAAW,aAAa,OAAO,QAAQ,QAAQ,IAAI;CAE9D,mBAAmB;;EAA0B;CAAc,CACxD,MAAM,QAAS,IAAI,WAAW,GAAqB,CAAC,CACpD,YAAY,IAAI;CAEnB,OAAO;AACT;;;;;;;AAQA,MAAM,eAAiC,UAA4D;CACjG,MAAM,SAAS,CAAC;CAChB,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,WAAW,WAAW,iBAAiB,SAAS,eAAe;CACrE,KAAK,MAAM,CAAC,KAAK,aAAa,OAAO,QAAQ,KAAK,GAChD,OAAO,OAAO,SAAS,iBAAiB,QAAQ,CAAC,CAAC,KAAK,KAAK,KAAA;CAE9D,OAAO;AACT;AAEA,MAAa,0BACX,YACA,gBACqB;CACrB,MAAM,QAAQ,YAAY;EACxB,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,YAAY;EACZ,UAAU;EACV,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;EACf,aAAa;EACb,MAAM;EACN,iBAAiB;EACjB,eAAe;EACf,aAAa;EACb,SAAS;CACX,CAAC;CAED,OAAO;EACL,YAAY,MAAM;EAClB,OAAO,EAAE,UAAU,KAAK;EAGxB,eAAe;EACf,aAAa;EACb,OAAO,gBAAgB,aAAa,SAAS;EAC7C,gBAAgB,cACZ,KAAA,IACA;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;EACnB;CACN;AACF;AAEA,MAAa,uBAAuB,OAClC,SACA,IACA,WACoB;CACpB,MAAM,UAAU,MAAM,eAAe;CACrC,IAAI,CAAC,SAAS,OAAO;CAErB,QAAQ,WAAW,MAAM;CACzB,MAAM,EAAE,QAAQ,MAAM,QAAQ,OAAO,IAAI,OAAO;CAChD,OAAO;AACT"}

package/es/hooks/useNativeButton.mjs

@@ -0,0 +1,107 @@
+import { isValidElement, useMemo } from "react";
+//#region src/hooks/useNativeButton.ts
+/**
+* Map of component displayNames to their nativeButton values.
+* Components that render native <button> elements should be true,
+* components that render non-button elements should be false.
+*/
+const NATIVE_BUTTON_MAP = {
+	A: false,
+	ActionIcon: false,
+	ActionIconGroup: false,
+	Alert: false,
+	Avatar: false,
+	AvatarGroup: false,
+	BaseActionIcon: true,
+	BaseButton: true,
+	Block: false,
+	BottomGradientButton: true,
+	Burger: false,
+	Button: true,
+	Center: false,
+	Checkbox: false,
+	CheckboxGroup: false,
+	Collapse: false,
+	ColorSwatches: false,
+	CopyButton: false,
+	DownloadButton: false,
+	EditableText: false,
+	Empty: false,
+	FileTypeIcon: false,
+	Flexbox: false,
+	FluentEmoji: false,
+	GradientButton: true,
+	Highlighter: false,
+	Hotkey: false,
+	Icon: false,
+	Image: false,
+	Img: false,
+	Input: false,
+	InputNumber: false,
+	InputPassword: false,
+	List: false,
+	ListItem: false,
+	Select: false,
+	Switch: false,
+	Markdown: false,
+	MaterialFileTypeIcon: false,
+	Segmented: false,
+	Skeleton: false,
+	SkeletonAvatar: false,
+	SkeletonBlock: false,
+	SkeletonButton: false,
+	SkeletonParagraph: false,
+	SkeletonTags: false,
+	SkeletonText: false,
+	SkeletonTitle: false,
+	Snippet: false,
+	Tag: false,
+	Text: false,
+	TextArea: false,
+	ThemeSwitch: false,
+	Video: false
+};
+/**
+* Get the displayName of a React component from an element.
+* Handles function components, forwardRef, memo, etc.
+*/
+function getComponentDisplayName(element) {
+	const type = element.type;
+	if (typeof type === "string") return void 0;
+	if (typeof type === "function") return type.displayName || type.name;
+	if (typeof type === "object" && type !== null) return type.displayName || type.render?.displayName || type.render?.name || type.type?.displayName || type.type?.name;
+}
+/**
+* Hook to resolve nativeButton prop for Base UI trigger components.
+*
+* When using `render`, Base UI expects the rendered element to be a native <button> by default.
+* If we can infer it's not, we opt out to avoid warnings (users can still override via `nativeButton`).
+*/
+function useNativeButton({ children, nativeButton, triggerNativeButton }) {
+	const isNativeButtonTriggerElement = useMemo(() => {
+		if (!isValidElement(children)) return false;
+		return typeof children.type === "string" && children.type === "button";
+	}, [children]);
+	return {
+		isNativeButtonTriggerElement,
+		resolvedNativeButton: useMemo(() => {
+			if (nativeButton !== void 0) return nativeButton;
+			if (triggerNativeButton !== void 0) return triggerNativeButton;
+			if (isNativeButtonTriggerElement) return true;
+			if (!isValidElement(children)) return void 0;
+			if (typeof children.type === "string") return false;
+			const displayName = getComponentDisplayName(children);
+			if (displayName && displayName in NATIVE_BUTTON_MAP) return NATIVE_BUTTON_MAP[displayName];
+			return false;
+		}, [
+			children,
+			isNativeButtonTriggerElement,
+			nativeButton,
+			triggerNativeButton
+		])
+	};
+}
+//#endregion
+export { useNativeButton };
+
+//# sourceMappingURL=useNativeButton.mjs.map

package/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  BaseActionIcon: true,\r\n  BaseButton: true,\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  SkeletonText: 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,gBAAgB;CAChB,YAAY;CACZ,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,cAAc;CACd,eAAe;CACf,SAAS;CACT,KAAK;CACL,MAAM;CACN,UAAU;CACV,aAAa;CACb,OAAO;AACT;;;;;AAMA,SAAS,wBAAwB,SAA2C;CAC1E,MAAM,OAAO,QAAQ;CAErB,IAAI,OAAO,SAAS,UAAU,OAAO,KAAA;CAErC,IAAI,OAAO,SAAS,YAClB,OAAQ,KAAa,eAAe,KAAK;CAG3C,IAAI,OAAO,SAAS,YAAY,SAAS,MAQvC,OALG,KAAa,eACb,KAAa,QAAQ,eACrB,KAAa,QAAQ,QACrB,KAAa,MAAM,eACnB,KAAa,MAAM;AAK1B;;;;;;;AAQA,SAAgB,gBAAgB,EAC9B,UACA,cACA,uBACgD;CAChD,MAAM,+BAA+B,cAAc;EACjD,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,OAAO,OAAO,SAAS,SAAS,YAAY,SAAS,SAAS;CAChE,GAAG,CAAC,QAAQ,CAAC;CAyBb,OAAO;EACL;EACA,sBAzB2B,cAAc;GAEzC,IAAI,iBAAiB,KAAA,GAAW,OAAO;GAEvC,IAAI,wBAAwB,KAAA,GAAW,OAAO;GAE9C,IAAI,8BAA8B,OAAO;GAEzC,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO,KAAA;GAEtC,IAAI,OAAO,SAAS,SAAS,UAAU,OAAO;GAG9C,MAAM,cAAc,wBAAwB,QAAQ;GACpD,IAAI,eAAe,eAAe,mBAChC,OAAO,kBAAkB;GAK3B,OAAO;EACT,GAAG;GAAC;GAAU;GAA8B;GAAc;EAAmB,CAIxD;CACrB;AACF"}

package/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/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,KAAK;CAC/B,IAAI,CAAC,YAAY,QAAQ,SAAS,KAAK,GACrC,QAAQ,UAAU;CAEpB,OAAO,QAAQ;AACjB"}