@lobehub/ui 5.10.2 → 5.10.4

package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs

@@ -0,0 +1,142 @@
+"use client";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, keyframes } from "antd-style";
+//#region src/NeuralNetworkLoading/NeuralNetworkLoading.tsx
+const pulseAnim = keyframes`
+  0%, 100% { opacity: 0.3; }
+  50%      { opacity: 1; }
+`;
+const flowAnim = keyframes`
+  0%   { transform: translateX(0);                     opacity: 0.5; }
+  50%  {                                                opacity: 1; }
+  100% { transform: translateX(var(--flow-distance));  opacity: 0.5; }
+`;
+const rotateAnim = keyframes`
+  100% { transform: rotate(360deg); }
+`;
+const scaleAnim = keyframes`
+  0%, 100% { transform: scale(0.8); opacity: 0.5; }
+  50%      { transform: scale(1);   opacity: 1; }
+`;
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	center: css`
+    fill: ${cssVar.colorTextSecondary};
+    animation: ${scaleAnim} 2s infinite;
+  `,
+	connection: css`
+    opacity: 0.3;
+    stroke: ${cssVar.colorTextSecondary};
+    stroke-width: 0.5;
+  `,
+	container: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+	node: css`
+    fill: ${cssVar.colorTextSecondary};
+    animation: ${pulseAnim} 2s infinite;
+  `,
+	particle: css`
+    fill: ${cssVar.colorTextSecondary};
+    animation: ${flowAnim} 2s infinite;
+  `,
+	ring: css`
+    transform-origin: center;
+
+    fill: none;
+    stroke: ${cssVar.colorFill};
+    stroke-dasharray: 0 8;
+    stroke-width: 1;
+
+    animation: ${rotateAnim} 20s infinite linear;
+  `,
+	svg: css`
+    width: 100%;
+    height: 100%;
+  `
+}));
+const LAYER_COUNT = 3;
+const NODE_COUNT = 3;
+const NeuralNetworkLoading = memo(({ size = 16, className, style }) => {
+	const nodes = [];
+	for (let layerIndex = 0; layerIndex < LAYER_COUNT; layerIndex++) for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {
+		const x = 25 + layerIndex * 25;
+		const y = 25 + nodeIndex * 25;
+		const delay = (layerIndex * NODE_COUNT + nodeIndex) * .2;
+		nodes.push(/* @__PURE__ */ jsx("circle", {
+			className: styles.node,
+			cx: x,
+			cy: y,
+			r: "3",
+			style: { animationDelay: `${delay}s` }
+		}, `node-${layerIndex}-${nodeIndex}`));
+	}
+	const connections = [];
+	for (let layerIndex = 0; layerIndex < LAYER_COUNT - 1; layerIndex++) for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {
+		const x1 = 25 + layerIndex * 25;
+		const y1 = 25 + nodeIndex * 25;
+		for (let targetIndex = 0; targetIndex < NODE_COUNT; targetIndex++) {
+			const x2 = 25 + (layerIndex + 1) * 25;
+			const y2 = 25 + targetIndex * 25;
+			connections.push(/* @__PURE__ */ jsx("line", {
+				className: styles.connection,
+				x1,
+				x2,
+				y1,
+				y2
+			}, `connection-${layerIndex}-${nodeIndex}-${targetIndex}`));
+		}
+	}
+	const particles = [
+		0,
+		1,
+		2
+	].map((index) => /* @__PURE__ */ jsx("circle", {
+		className: styles.particle,
+		cx: 25,
+		cy: 50,
+		r: "1.5",
+		style: {
+			"--flow-distance": "50px",
+			"animationDelay": `${index * .6}s`
+		}
+	}, `particle-${index}`));
+	return /* @__PURE__ */ jsx("div", {
+		className: [styles.container, className].filter(Boolean).join(" "),
+		style: {
+			height: size,
+			width: size,
+			...style
+		},
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: styles.svg,
+			viewBox: "0 0 100 100",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				connections,
+				nodes,
+				particles,
+				/* @__PURE__ */ jsx("rect", {
+					className: styles.center,
+					height: "6",
+					width: "6",
+					x: "47",
+					y: "47"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					className: styles.ring,
+					cx: "50",
+					cy: "50",
+					r: "40"
+				})
+			]
+		})
+	});
+});
+NeuralNetworkLoading.displayName = "NeuralNetworkLoading";
+//#endregion
+export { NeuralNetworkLoading as default };
+
+//# sourceMappingURL=NeuralNetworkLoading.mjs.map

package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeuralNetworkLoading.mjs","names":[],"sources":["../../src/NeuralNetworkLoading/NeuralNetworkLoading.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, keyframes } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport type { NeuralNetworkLoadingProps } from './type';\n\nconst pulseAnim = keyframes`\n  0%, 100% { opacity: 0.3; }\n  50%      { opacity: 1; }\n`;\n\nconst flowAnim = keyframes`\n  0%   { transform: translateX(0);                     opacity: 0.5; }\n  50%  {                                                opacity: 1; }\n  100% { transform: translateX(var(--flow-distance));  opacity: 0.5; }\n`;\n\nconst rotateAnim = keyframes`\n  100% { transform: rotate(360deg); }\n`;\n\nconst scaleAnim = keyframes`\n  0%, 100% { transform: scale(0.8); opacity: 0.5; }\n  50%      { transform: scale(1);   opacity: 1; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n  center: css`\n    fill: ${cssVar.colorTextSecondary};\n    animation: ${scaleAnim} 2s infinite;\n  `,\n  connection: css`\n    opacity: 0.3;\n    stroke: ${cssVar.colorTextSecondary};\n    stroke-width: 0.5;\n  `,\n  container: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  node: css`\n    fill: ${cssVar.colorTextSecondary};\n    animation: ${pulseAnim} 2s infinite;\n  `,\n  particle: css`\n    fill: ${cssVar.colorTextSecondary};\n    animation: ${flowAnim} 2s infinite;\n  `,\n  ring: css`\n    transform-origin: center;\n\n    fill: none;\n    stroke: ${cssVar.colorFill};\n    stroke-dasharray: 0 8;\n    stroke-width: 1;\n\n    animation: ${rotateAnim} 20s infinite linear;\n  `,\n  svg: css`\n    width: 100%;\n    height: 100%;\n  `,\n}));\n\nconst LAYER_COUNT = 3;\nconst NODE_COUNT = 3;\n\nconst NeuralNetworkLoading = memo<NeuralNetworkLoadingProps>(({ size = 16, className, style }) => {\n  const nodes = [];\n  for (let layerIndex = 0; layerIndex < LAYER_COUNT; layerIndex++) {\n    for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n      const x = 25 + layerIndex * 25;\n      const y = 25 + nodeIndex * 25;\n      const delay = (layerIndex * NODE_COUNT + nodeIndex) * 0.2;\n      nodes.push(\n        <circle\n          className={styles.node}\n          cx={x}\n          cy={y}\n          key={`node-${layerIndex}-${nodeIndex}`}\n          r=\"3\"\n          style={{ animationDelay: `${delay}s` }}\n        />,\n      );\n    }\n  }\n\n  const connections = [];\n  for (let layerIndex = 0; layerIndex < LAYER_COUNT - 1; layerIndex++) {\n    for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n      const x1 = 25 + layerIndex * 25;\n      const y1 = 25 + nodeIndex * 25;\n      for (let targetIndex = 0; targetIndex < NODE_COUNT; targetIndex++) {\n        const x2 = 25 + (layerIndex + 1) * 25;\n        const y2 = 25 + targetIndex * 25;\n        connections.push(\n          <line\n            className={styles.connection}\n            key={`connection-${layerIndex}-${nodeIndex}-${targetIndex}`}\n            x1={x1}\n            x2={x2}\n            y1={y1}\n            y2={y2}\n          />,\n        );\n      }\n    }\n  }\n\n  const particles = [0, 1, 2].map((index) => (\n    <circle\n      className={styles.particle}\n      cx={25}\n      cy={50}\n      key={`particle-${index}`}\n      r=\"1.5\"\n      style={\n        {\n          '--flow-distance': '50px',\n          'animationDelay': `${index * 0.6}s`,\n        } as CSSProperties\n      }\n    />\n  ));\n\n  return (\n    <div\n      className={[styles.container, className].filter(Boolean).join(' ')}\n      style={{ height: size, width: size, ...style }}\n    >\n      <svg className={styles.svg} viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n        {connections}\n        {nodes}\n        {particles}\n        <rect className={styles.center} height=\"6\" width=\"6\" x=\"47\" y=\"47\" />\n        <circle className={styles.ring} cx=\"50\" cy=\"50\" r=\"40\" />\n      </svg>\n    </div>\n  );\n});\n\nNeuralNetworkLoading.displayName = 'NeuralNetworkLoading';\n\nexport default NeuralNetworkLoading;\n"],"mappings":";;;;;AAOA,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,WAAW,SAAS;;;;;AAM1B,MAAM,aAAa,SAAS;;;AAI5B,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,QAAQ,GAAG;YACD,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,YAAY,GAAG;;cAEH,OAAO,mBAAmB;;;CAGtC,WAAW,GAAG;;;;;CAKd,MAAM,GAAG;YACC,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,UAAU,GAAG;YACH,OAAO,mBAAmB;iBACrB,SAAS;;CAExB,MAAM,GAAG;;;;cAIG,OAAO,UAAU;;;;iBAId,WAAW;;CAE1B,KAAK,GAAG;;;;CAIT,EAAE;AAEH,MAAM,cAAc;AACpB,MAAM,aAAa;AAEnB,MAAM,uBAAuB,MAAiC,EAAE,OAAO,IAAI,WAAW,YAAY;CAChG,MAAM,QAAQ,EAAE;AAChB,MAAK,IAAI,aAAa,GAAG,aAAa,aAAa,aACjD,MAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,IAAI,KAAK,aAAa;EAC5B,MAAM,IAAI,KAAK,YAAY;EAC3B,MAAM,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,KACJ,oBAAC,UAAD;GACE,WAAW,OAAO;GAClB,IAAI;GACJ,IAAI;GAEJ,GAAE;GACF,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI;GACtC,EAHK,QAAQ,WAAW,GAAG,YAG3B,CACH;;CAIL,MAAM,cAAc,EAAE;AACtB,MAAK,IAAI,aAAa,GAAG,aAAa,cAAc,GAAG,aACrD,MAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,KAAK,KAAK,aAAa;EAC7B,MAAM,KAAK,KAAK,YAAY;AAC5B,OAAK,IAAI,cAAc,GAAG,cAAc,YAAY,eAAe;GACjE,MAAM,KAAK,MAAM,aAAa,KAAK;GACnC,MAAM,KAAK,KAAK,cAAc;AAC9B,eAAY,KACV,oBAAC,QAAD;IACE,WAAW,OAAO;IAEd;IACA;IACA;IACA;IACJ,EALK,cAAc,WAAW,GAAG,UAAU,GAAG,cAK9C,CACH;;;CAKP,MAAM,YAAY;EAAC;EAAG;EAAG;EAAE,CAAC,KAAK,UAC/B,oBAAC,UAAD;EACE,WAAW,OAAO;EAClB,IAAI;EACJ,IAAI;EAEJ,GAAE;EACF,OACE;GACE,mBAAmB;GACnB,kBAAkB,GAAG,QAAQ,GAAI;GAClC;EAEH,EARK,YAAY,QAQjB,CACF;AAEF,QACE,oBAAC,OAAD;EACE,WAAW,CAAC,OAAO,WAAW,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAClE,OAAO;GAAE,QAAQ;GAAM,OAAO;GAAM,GAAG;GAAO;YAE9C,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAK,SAAQ;GAAc,OAAM;aAAxD;IACG;IACA;IACA;IACD,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAQ,QAAO;KAAI,OAAM;KAAI,GAAE;KAAK,GAAE;KAAO,CAAA;IACrE,oBAAC,UAAD;KAAQ,WAAW,OAAO;KAAM,IAAG;KAAK,IAAG;KAAK,GAAE;KAAO,CAAA;IACrD;;EACF,CAAA;EAER;AAEF,qBAAqB,cAAc"}

package/es/NeuralNetworkLoading/index.d.mts

@@ -0,0 +1,3 @@
+import { NeuralNetworkLoadingProps } from "./type.mjs";
+import { NeuralNetworkLoading } from "./NeuralNetworkLoading.mjs";
+export { NeuralNetworkLoadingProps, NeuralNetworkLoading as default };

package/es/NeuralNetworkLoading/index.d.ts

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

package/es/NeuralNetworkLoading/index.js

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

package/es/NeuralNetworkLoading/index.mjs

@@ -0,0 +1,2 @@
+import NeuralNetworkLoading from "./NeuralNetworkLoading.mjs";
+export { NeuralNetworkLoading as default };

package/es/NeuralNetworkLoading/type.d.mts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+
+//#region src/NeuralNetworkLoading/type.d.ts
+interface NeuralNetworkLoadingProps {
+  className?: string;
+  /** Size in pixels (width and height). */
+  size?: number;
+  style?: CSSProperties;
+}
+//#endregion
+export { NeuralNetworkLoadingProps };
+//# sourceMappingURL=type.d.mts.map

package/es/ScrollShadow/ScrollShadow.mjs

@@ -1,5 +1,6 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
 import { variants } from "./style.mjs";
 import { useScrollOverflow } from "./useScrollOverflow.mjs";
 import { useMemo, useRef } from "react";
@@ -10,11 +11,14 @@ import { mergeRefs } from "react-merge-refs";
 const ScrollShadow = ({ className, children, orientation = "vertical", hideScrollBar = false, size = 16, offset = 8, visibility = "auto", isEnabled = true, onVisibilityChange, style, ref, ...rest }) => {
 	const cssVariables = useMemo(() => ({ "--scroll-shadow-size": `${size}%` }), [size]);
 	const domRef = useRef(null);
+	const onVisibilityChangeEvent = useEventCallback((visibility) => {
+		onVisibilityChange?.(visibility);
+	});
 	const scrollState = useScrollOverflow({
 		domRef,
 		isEnabled: isEnabled && visibility === "auto",
 		offset,
-		onVisibilityChange,
+		onVisibilityChange: onVisibilityChangeEvent,
 		orientation,
 		updateDeps: [children]
 	});

package/es/ScrollShadow/ScrollShadow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,IACjC,GACD,CAAC,KAAK,CACP;CACD,MAAM,SAAS,OAAuB,KAAK;CAG3C,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA;EACA;EACA,YAAY,CAAC,SAAS;EACvB,CAAC;CAGF,MAAM,mBAAmB,cAAc;AACrC,MAAI,eAAe,SACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,MAAI,eAAe,QACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,SAAO;IACN,CAAC,YAAY,YAAY,CAAC;CAG7B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,aACrB;AAED,MAAI,gBAAgB;OACd,iBAAiB,OAAO,iBAAiB,OAC3C,YAAW,4BAA4B;YAC9B,iBAAiB,IAC1B,YAAW,qBAAqB;YACvB,iBAAiB,OAC1B,YAAW,wBAAwB;aAGjC,iBAAiB,QAAQ,iBAAiB,MAC5C,YAAW,4BAA4B;WAC9B,iBAAiB,KAC1B,YAAW,sBAAsB;WACxB,iBAAiB,MAC1B,YAAW,uBAAuB;AAItC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;AAgBnC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;AACnC,QAAI,gBAAgB,YAAY;AAC9B,SAAI,iBAAiB,OAAO,iBAAiB,OAAQ,QAAO;AAC5D,SAAI,iBAAiB,IAAK,QAAO;AACjC,SAAI,iBAAiB,OAAQ,QAAO;WAC/B;AACL,SAAI,iBAAiB,QAAQ,iBAAiB,MAAO,QAAO;AAC5D,SAAI,iBAAiB,KAAM,QAAO;AAClC,SAAI,iBAAiB,MAAO,QAAO;;AAErC,WAAO;MACN,CAAC,aAAa,iBAAiB,CAIqC;GAAE,CAAC,EAAE,UAAU;EAClF,KAAK,UAA0B,CAAC,QAAQ,IAAI,CAAC;EAC7C,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EACJ,GAAI;EAEH;EACO,CAAA;;AAId,aAAa,cAAc"}
+{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  const onVisibilityChangeEvent = useEventCallback<\n    NonNullable<ScrollShadowProps['onVisibilityChange']>\n  >((visibility) => {\n    onVisibilityChange?.(visibility);\n  });\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange: onVisibilityChangeEvent,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,IACjC,GACD,CAAC,KAAK,CACP;CACD,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,0BAA0B,kBAE7B,eAAe;AAChB,uBAAqB,WAAW;GAChC;CAEF,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,SAAS;EACvB,CAAC;CAGF,MAAM,mBAAmB,cAAc;AACrC,MAAI,eAAe,SACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,MAAI,eAAe,QACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,SAAO;IACN,CAAC,YAAY,YAAY,CAAC;CAG7B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,aACrB;AAED,MAAI,gBAAgB;OACd,iBAAiB,OAAO,iBAAiB,OAC3C,YAAW,4BAA4B;YAC9B,iBAAiB,IAC1B,YAAW,qBAAqB;YACvB,iBAAiB,OAC1B,YAAW,wBAAwB;aAGjC,iBAAiB,QAAQ,iBAAiB,MAC5C,YAAW,4BAA4B;WAC9B,iBAAiB,KAC1B,YAAW,sBAAsB;WACxB,iBAAiB,MAC1B,YAAW,uBAAuB;AAItC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;AAgBnC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;AACnC,QAAI,gBAAgB,YAAY;AAC9B,SAAI,iBAAiB,OAAO,iBAAiB,OAAQ,QAAO;AAC5D,SAAI,iBAAiB,IAAK,QAAO;AACjC,SAAI,iBAAiB,OAAQ,QAAO;WAC/B;AACL,SAAI,iBAAiB,QAAQ,iBAAiB,MAAO,QAAO;AAC5D,SAAI,iBAAiB,KAAM,QAAO;AAClC,SAAI,iBAAiB,MAAO,QAAO;;AAErC,WAAO;MACN,CAAC,aAAa,iBAAiB,CAIqC;GAAE,CAAC,EAAE,UAAU;EAClF,KAAK,UAA0B,CAAC,QAAQ,IAAI,CAAC;EAC7C,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EACJ,GAAI;EAEH;EACO,CAAA;;AAId,aAAa,cAAc"}

package/es/ScrollShadow/useScrollOverflow.mjs

@@ -1,17 +1,20 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 //#region src/ScrollShadow/useScrollOverflow.ts
+const initialScrollState = {
+	bottom: false,
+	left: false,
+	right: false,
+	top: false
+};
+const isSameScrollState = (a, b) => a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.top === b.top;
 const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEnabled = true, onVisibilityChange, updateDeps = [] }) => {
-	const [scrollState, setScrollState] = useState({
-		bottom: false,
-		left: false,
-		right: false,
-		top: false
-	});
+	const [scrollState, setScrollState] = useState(initialScrollState);
+	const scrollStateRef = useRef(initialScrollState);
 	useEffect(() => {
 		const element = domRef.current;
 		if (!element || !isEnabled) return;
 		const checkScroll = () => {
-			const newState = { ...scrollState };
+			const newState = { ...initialScrollState };
 			if (orientation === "vertical") if (element.scrollHeight > element.clientHeight) {
 				newState.top = element.scrollTop > offset;
 				newState.bottom = element.scrollTop + element.clientHeight < element.scrollHeight - offset;
@@ -26,6 +29,8 @@ const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEna
 				newState.left = false;
 				newState.right = false;
 			}
+			if (isSameScrollState(scrollStateRef.current, newState)) return;
+			scrollStateRef.current = newState;
 			setScrollState(newState);
 			onVisibilityChange?.(newState);
 		};
@@ -44,7 +49,6 @@ const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEna
 		offset,
 		orientation,
 		isEnabled,
-		onVisibilityChange,
 		...updateDeps
 	]);
 	return scrollState;

package/es/ScrollShadow/useScrollOverflow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../src/ScrollShadow/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowProps {\n  domRef: RefObject<HTMLElement | null>;\n  isEnabled?: boolean;\n  offset?: number;\n  onVisibilityChange?: (visibility: {\n    bottom?: boolean;\n    left?: boolean;\n    right?: boolean;\n    top?: boolean;\n  }) => void;\n  orientation?: 'vertical' | 'horizontal';\n  updateDeps?: any[];\n}\n\nexport const useScrollOverflow = ({\n  domRef,\n  offset = 0,\n  orientation = 'vertical',\n  isEnabled = true,\n  onVisibilityChange,\n  updateDeps = [],\n}: UseScrollOverflowProps) => {\n  const [scrollState, setScrollState] = useState({\n    bottom: false,\n    left: false,\n    right: false,\n    top: false,\n  });\n\n  useEffect(() => {\n    const element = domRef.current;\n    if (!element || !isEnabled) return;\n\n    const checkScroll = () => {\n      const newState = { ...scrollState };\n\n      if (orientation === 'vertical') {\n        const hasVerticalScroll = element.scrollHeight > element.clientHeight;\n\n        if (hasVerticalScroll) {\n          newState.top = element.scrollTop > offset;\n          newState.bottom =\n            element.scrollTop + element.clientHeight < element.scrollHeight - offset;\n        } else {\n          newState.top = false;\n          newState.bottom = false;\n        }\n      } else {\n        const hasHorizontalScroll = element.scrollWidth > element.clientWidth;\n\n        if (hasHorizontalScroll) {\n          newState.left = element.scrollLeft > offset;\n          newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;\n        } else {\n          newState.left = false;\n          newState.right = false;\n        }\n      }\n\n      setScrollState(newState);\n      onVisibilityChange?.(newState);\n    };\n\n    // 初始检查\n    checkScroll();\n\n    // 监听滚动事件\n    element.addEventListener('scroll', checkScroll);\n    window.addEventListener('resize', checkScroll);\n\n    // 观察内容变化\n    const resizeObserver = new ResizeObserver(checkScroll);\n    resizeObserver.observe(element);\n\n    return () => {\n      element.removeEventListener('scroll', checkScroll);\n      window.removeEventListener('resize', checkScroll);\n      resizeObserver.disconnect();\n    };\n  }, [domRef, offset, orientation, isEnabled, onVisibilityChange, ...updateDeps]);\n\n  return scrollState;\n};\n"],"mappings":";;AAgBA,MAAa,qBAAqB,EAChC,QACA,SAAS,GACT,cAAc,YACd,YAAY,MACZ,oBACA,aAAa,EAAE,OACa;CAC5B,MAAM,CAAC,aAAa,kBAAkB,SAAS;EAC7C,QAAQ;EACR,MAAM;EACN,OAAO;EACP,KAAK;EACN,CAAC;AAEF,iBAAgB;EACd,MAAM,UAAU,OAAO;AACvB,MAAI,CAAC,WAAW,CAAC,UAAW;EAE5B,MAAM,oBAAoB;GACxB,MAAM,WAAW,EAAE,GAAG,aAAa;AAEnC,OAAI,gBAAgB,WAGlB,KAF0B,QAAQ,eAAe,QAAQ,cAElC;AACrB,aAAS,MAAM,QAAQ,YAAY;AACnC,aAAS,SACP,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe;UAC/D;AACL,aAAS,MAAM;AACf,aAAS,SAAS;;YAGQ,QAAQ,cAAc,QAAQ,aAEjC;AACvB,aAAS,OAAO,QAAQ,aAAa;AACrC,aAAS,QAAQ,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;UAC7E;AACL,aAAS,OAAO;AAChB,aAAS,QAAQ;;AAIrB,kBAAe,SAAS;AACxB,wBAAqB,SAAS;;AAIhC,eAAa;AAGb,UAAQ,iBAAiB,UAAU,YAAY;AAC/C,SAAO,iBAAiB,UAAU,YAAY;EAG9C,MAAM,iBAAiB,IAAI,eAAe,YAAY;AACtD,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,YAAY;AAClD,UAAO,oBAAoB,UAAU,YAAY;AACjD,kBAAe,YAAY;;IAE5B;EAAC;EAAQ;EAAQ;EAAa;EAAW;EAAoB,GAAG;EAAW,CAAC;AAE/E,QAAO"}
+{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../src/ScrollShadow/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from 'react';\n\ninterface ScrollState {\n  bottom: boolean;\n  left: boolean;\n  right: boolean;\n  top: boolean;\n}\n\nconst initialScrollState: ScrollState = {\n  bottom: false,\n  left: false,\n  right: false,\n  top: false,\n};\n\nconst isSameScrollState = (a: ScrollState, b: ScrollState) =>\n  a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.top === b.top;\n\ninterface UseScrollOverflowProps {\n  domRef: RefObject<HTMLElement | null>;\n  isEnabled?: boolean;\n  offset?: number;\n  onVisibilityChange?: (visibility: {\n    bottom?: boolean;\n    left?: boolean;\n    right?: boolean;\n    top?: boolean;\n  }) => void;\n  orientation?: 'vertical' | 'horizontal';\n  updateDeps?: any[];\n}\n\nexport const useScrollOverflow = ({\n  domRef,\n  offset = 0,\n  orientation = 'vertical',\n  isEnabled = true,\n  onVisibilityChange,\n  updateDeps = [],\n}: UseScrollOverflowProps) => {\n  const [scrollState, setScrollState] = useState(initialScrollState);\n  const scrollStateRef = useRef(initialScrollState);\n\n  useEffect(() => {\n    const element = domRef.current;\n    if (!element || !isEnabled) return;\n\n    const checkScroll = () => {\n      const newState = { ...initialScrollState };\n\n      if (orientation === 'vertical') {\n        const hasVerticalScroll = element.scrollHeight > element.clientHeight;\n\n        if (hasVerticalScroll) {\n          newState.top = element.scrollTop > offset;\n          newState.bottom =\n            element.scrollTop + element.clientHeight < element.scrollHeight - offset;\n        } else {\n          newState.top = false;\n          newState.bottom = false;\n        }\n      } else {\n        const hasHorizontalScroll = element.scrollWidth > element.clientWidth;\n\n        if (hasHorizontalScroll) {\n          newState.left = element.scrollLeft > offset;\n          newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;\n        } else {\n          newState.left = false;\n          newState.right = false;\n        }\n      }\n\n      if (isSameScrollState(scrollStateRef.current, newState)) return;\n\n      scrollStateRef.current = newState;\n      setScrollState(newState);\n      onVisibilityChange?.(newState);\n    };\n\n    // 初始检查\n    checkScroll();\n\n    // 监听滚动事件\n    element.addEventListener('scroll', checkScroll);\n    window.addEventListener('resize', checkScroll);\n\n    // 观察内容变化\n    const resizeObserver = new ResizeObserver(checkScroll);\n    resizeObserver.observe(element);\n\n    return () => {\n      element.removeEventListener('scroll', checkScroll);\n      window.removeEventListener('resize', checkScroll);\n      resizeObserver.disconnect();\n    };\n  }, [domRef, offset, orientation, isEnabled, ...updateDeps]);\n\n  return scrollState;\n};\n"],"mappings":";;AASA,MAAM,qBAAkC;CACtC,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACN;AAED,MAAM,qBAAqB,GAAgB,MACzC,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE;AAgBnF,MAAa,qBAAqB,EAChC,QACA,SAAS,GACT,cAAc,YACd,YAAY,MACZ,oBACA,aAAa,EAAE,OACa;CAC5B,MAAM,CAAC,aAAa,kBAAkB,SAAS,mBAAmB;CAClE,MAAM,iBAAiB,OAAO,mBAAmB;AAEjD,iBAAgB;EACd,MAAM,UAAU,OAAO;AACvB,MAAI,CAAC,WAAW,CAAC,UAAW;EAE5B,MAAM,oBAAoB;GACxB,MAAM,WAAW,EAAE,GAAG,oBAAoB;AAE1C,OAAI,gBAAgB,WAGlB,KAF0B,QAAQ,eAAe,QAAQ,cAElC;AACrB,aAAS,MAAM,QAAQ,YAAY;AACnC,aAAS,SACP,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe;UAC/D;AACL,aAAS,MAAM;AACf,aAAS,SAAS;;YAGQ,QAAQ,cAAc,QAAQ,aAEjC;AACvB,aAAS,OAAO,QAAQ,aAAa;AACrC,aAAS,QAAQ,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;UAC7E;AACL,aAAS,OAAO;AAChB,aAAS,QAAQ;;AAIrB,OAAI,kBAAkB,eAAe,SAAS,SAAS,CAAE;AAEzD,kBAAe,UAAU;AACzB,kBAAe,SAAS;AACxB,wBAAqB,SAAS;;AAIhC,eAAa;AAGb,UAAQ,iBAAiB,UAAU,YAAY;AAC/C,SAAO,iBAAiB,UAAU,YAAY;EAG9C,MAAM,iBAAiB,IAAI,eAAe,YAAY;AACtD,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,YAAY;AAClD,UAAO,oBAAoB,UAAU,YAAY;AACjD,kBAAe,YAAY;;IAE5B;EAAC;EAAQ;EAAQ;EAAa;EAAW,GAAG;EAAW,CAAC;AAE3D,QAAO"}

package/es/Tag/Tag.mjs

@@ -17,7 +17,7 @@ const Tag$1 = ({ className, ref, size = "middle", color, variant = "filled", chi
 		const isPresetSystemColors = color && presetSystemColors.has(color);
 		const isHexColor = color && color.startsWith("#");
 		if (isPresetColor) {
-			textColor = colorsPreset(color);
+			textColor = colorsPreset(color, "active");
 			backgroundColor = isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
 			borderColor = colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
 		}

package/es/Tag/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":["Tag","AntTag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n  className,\n  ref,\n  size = 'middle',\n  color,\n  variant = 'filled',\n  children,\n  onClick,\n  style,\n  ...rest\n}) => {\n  const colors = useMemo(() => {\n    let textColor = cssVar.colorTextSecondary;\n    let backgroundColor;\n    let borderColor;\n    const isBorderless = variant === 'borderless';\n    const isFilled = variant === 'filled';\n    const isPresetColor = color && presetColors.includes(color);\n    const isPresetSystemColors = color && presetSystemColors.has(color);\n    const isHexColor = color && color.startsWith('#');\n\n    if (isPresetColor) {\n      textColor = colorsPreset(color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPreset(color, 'fillTertiary');\n      borderColor = colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isPresetSystemColors) {\n      textColor = colorsPresetSystem(color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPresetSystem(color, 'fillTertiary');\n      borderColor = colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isHexColor) {\n      textColor = cssVar.colorBgLayout;\n      backgroundColor = isBorderless ? 'transparent' : color;\n    }\n\n    return {\n      backgroundColor,\n      borderColor,\n      textColor,\n    };\n  }, [color, variant]);\n\n  return (\n    <AntTag\n      className={cx(variants({ size, variant: variant as any }), className)}\n      color={color}\n      ref={ref}\n      variant={variant === 'borderless' ? 'outlined' : variant}\n      style={{\n        background: colors?.backgroundColor,\n        borderColor: colors?.borderColor,\n        color: colors?.textColor,\n        cursor: onClick ? 'pointer' : undefined,\n        ...style,\n      }}\n      onClick={onClick}\n      {...rest}\n    >\n      {children}\n    </AntTag>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,MAAM;AAC/B,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,eAAe;AACpF,iBAAc,aAAa,OAAO,WAAW,mBAAmB,eAAe;;AAEjF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,MAAM;AACrC,qBAAkB,eAAe,gBAAgB,mBAAmB,OAAO,eAAe;AAC1F,iBAAc,mBAAmB,OAAO,WAAW,mBAAmB,eAAe;;AAEvF,MAAI,YAAY;AACd,eAAY,OAAO;AACnB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAACC,KAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACF;EACL,SAAS,YAAY,eAAe,aAAa;EACjD,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACJ;EACQ;EACT,GAAI;EAEH;EACM,CAAA;;AAIb,MAAI,cAAc"}
+{"version":3,"file":"Tag.mjs","names":["Tag","AntTag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n  className,\n  ref,\n  size = 'middle',\n  color,\n  variant = 'filled',\n  children,\n  onClick,\n  style,\n  ...rest\n}) => {\n  const colors = useMemo(() => {\n    let textColor = cssVar.colorTextSecondary;\n    let backgroundColor;\n    let borderColor;\n    const isBorderless = variant === 'borderless';\n    const isFilled = variant === 'filled';\n    const isPresetColor = color && presetColors.includes(color);\n    const isPresetSystemColors = color && presetSystemColors.has(color);\n    const isHexColor = color && color.startsWith('#');\n\n    if (isPresetColor) {\n      textColor = colorsPreset(color, 'active');\n      backgroundColor = isBorderless ? 'transparent' : colorsPreset(color, 'fillTertiary');\n      borderColor = colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isPresetSystemColors) {\n      textColor = colorsPresetSystem(color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPresetSystem(color, 'fillTertiary');\n      borderColor = colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isHexColor) {\n      textColor = cssVar.colorBgLayout;\n      backgroundColor = isBorderless ? 'transparent' : color;\n    }\n\n    return {\n      backgroundColor,\n      borderColor,\n      textColor,\n    };\n  }, [color, variant]);\n\n  return (\n    <AntTag\n      className={cx(variants({ size, variant: variant as any }), className)}\n      color={color}\n      ref={ref}\n      variant={variant === 'borderless' ? 'outlined' : variant}\n      style={{\n        background: colors?.backgroundColor,\n        borderColor: colors?.borderColor,\n        color: colors?.textColor,\n        cursor: onClick ? 'pointer' : undefined,\n        ...style,\n      }}\n      onClick={onClick}\n      {...rest}\n    >\n      {children}\n    </AntTag>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,OAAO,SAAS;AACzC,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,eAAe;AACpF,iBAAc,aAAa,OAAO,WAAW,mBAAmB,eAAe;;AAEjF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,MAAM;AACrC,qBAAkB,eAAe,gBAAgB,mBAAmB,OAAO,eAAe;AAC1F,iBAAc,mBAAmB,OAAO,WAAW,mBAAmB,eAAe;;AAEvF,MAAI,YAAY;AACd,eAAY,OAAO;AACnB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAACC,KAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACF;EACL,SAAS,YAAY,eAAe,aAAa;EACjD,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACJ;EACQ;EACT,GAAI;EAEH;EACM,CAAA;;AAIb,MAAI,cAAc"}

package/es/hooks/useMarkdown/useMarkdownComponents.mjs

@@ -10,7 +10,7 @@ import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/hooks/useMarkdown/useMarkdownComponents.tsx
 const useMarkdownComponents = () => {
-	const { components, animated, citations, componentProps, enableMermaid, fullFeaturedCodeBlock, showFootnotes } = useMarkdownContext();
+	const { components, animated, citations, componentProps, enableHtmlPreview, enableMermaid, fullFeaturedCodeBlock, showFootnotes } = useMarkdownContext();
 	const memoA = useCallback(({ node, ...props }) => /* @__PURE__ */ jsx(Link, {
 		citations,
 		...props,
@@ -50,14 +50,20 @@ const useMarkdownComponents = () => {
 				...componentProps.highlight,
 				theme: highlightTheme
 			} : void 0,
+			html: componentProps.html,
 			mermaid: componentProps.mermaid ? {
 				...componentProps.mermaid,
 				theme: mermaidTheme
 			} : void 0
 		};
-	}, [highlightTheme, mermaidTheme]);
+	}, [
+		highlightTheme,
+		mermaidTheme,
+		componentProps?.html
+	]);
 	const memoPre = useCallback(({ node, ...props }) => /* @__PURE__ */ jsx(CodeBlock, {
 		animated,
+		enableHtmlPreview,
 		enableMermaid,
 		fullFeatured: fullFeaturedCodeBlock,
 		...stableComponentProps,
@@ -65,6 +71,7 @@ const useMarkdownComponents = () => {
 		...props
 	}), [
 		animated,
+		enableHtmlPreview,
 		enableMermaid,
 		fullFeaturedCodeBlock,
 		stableComponentProps,

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

@@ -1 +1 @@
-{"version":3,"file":"useMarkdownComponents.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/useMarkdownComponents.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo } from 'react';\nimport type { Components } from 'react-markdown';\n\nimport Hotkey from '@/Hotkey';\nimport { CodeBlock } from '@/Markdown/components/CodeBlock';\nimport { useMarkdownContext } from '@/Markdown/components/MarkdownProvider';\nimport Image from '@/mdx/mdxComponents/Image';\nimport Link from '@/mdx/mdxComponents/Link';\nimport Section from '@/mdx/mdxComponents/Section';\nimport Video from '@/mdx/mdxComponents/Video';\n\nexport const useMarkdownComponents = (): Components => {\n  const {\n    components,\n    animated,\n    citations,\n    componentProps,\n    enableMermaid,\n    fullFeaturedCodeBlock,\n    showFootnotes,\n  } = useMarkdownContext();\n\n  const memoA = useCallback(\n    ({ node, ...props }: any) => <Link citations={citations} {...props} {...componentProps?.a} />,\n    [citations, componentProps?.a],\n  );\n\n  const memoImg = useCallback(\n    ({ node, ...props }: any) => <Image {...props} {...componentProps?.img} />,\n    [componentProps?.img],\n  );\n\n  const memoVideo = useCallback(\n    ({ node, ...props }: any) => <Video {...props} {...componentProps?.video} />,\n    [componentProps?.video],\n  );\n\n  const memoSection = useCallback(\n    ({ node, ...props }: any) => <Section showFootnotes={showFootnotes} {...props} />,\n    [showFootnotes],\n  );\n\n  const memoKbd = useCallback(\n    ({ children }: any) => <Hotkey keys={children} style={{ display: 'inline-flex' }} />,\n    [],\n  );\n\n  const memoBr = useCallback(() => <br />, []);\n\n  const memeP = useCallback(({ style, children, className }: any) => {\n    const skipWrapperTags = ['img', 'video'];\n    if (typeof children === 'object' && skipWrapperTags.includes(children?.props?.node?.tagName)) {\n      return children;\n    }\n    return (\n      <p className={className} style={style}>\n        {children}\n      </p>\n    );\n  }, []);\n\n  // Stable references for theme objects to prevent unnecessary re-renders\n  const highlightTheme = useMemo(\n    () => componentProps?.highlight?.theme,\n    [JSON.stringify(componentProps?.highlight?.theme)],\n  );\n\n  const mermaidTheme = useMemo(\n    () => componentProps?.mermaid?.theme,\n    [JSON.stringify(componentProps?.mermaid?.theme)],\n  );\n\n  // Create stable component props reference\n  const stableComponentProps = useMemo(() => {\n    if (!componentProps) return;\n\n    return {\n      highlight: componentProps.highlight\n        ? { ...componentProps.highlight, theme: highlightTheme }\n        : undefined,\n      mermaid: componentProps.mermaid\n        ? { ...componentProps.mermaid, theme: mermaidTheme }\n        : undefined,\n    };\n  }, [highlightTheme, mermaidTheme]);\n\n  const memoPre = useCallback(\n    ({ node, ...props }: any) => (\n      <CodeBlock\n        animated={animated}\n        enableMermaid={enableMermaid}\n        fullFeatured={fullFeaturedCodeBlock}\n        {...stableComponentProps}\n        {...componentProps?.pre}\n        {...props}\n      />\n    ),\n    [animated, enableMermaid, fullFeaturedCodeBlock, stableComponentProps, componentProps?.pre],\n  );\n\n  const memoColorPreview = useCallback(({ node, ...props }: any) => <code {...props} />, []);\n\n  const memoComponents = useMemo(\n    () => ({\n      a: memoA,\n      br: memoBr,\n      colorPreview: memoColorPreview,\n      img: memoImg,\n      kbd: memoKbd,\n      p: memeP,\n      pre: memoPre,\n      section: memoSection,\n      video: memoVideo,\n    }),\n    [memoA, memoBr, memoImg, memoVideo, memoPre, memoSection, memeP, memoColorPreview, memoKbd],\n  );\n\n  return useMemo(\n    () => ({\n      ...memoComponents,\n      ...components,\n    }),\n    [memoComponents, components],\n  );\n};\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,8BAA0C;CACrD,MAAM,EACJ,YACA,UACA,WACA,gBACA,eACA,uBACA,kBACE,oBAAoB;CAExB,MAAM,QAAQ,aACX,EAAE,MAAM,GAAG,YAAiB,oBAAC,MAAD;EAAiB;EAAW,GAAI;EAAO,GAAI,gBAAgB;EAAK,CAAA,EAC7F,CAAC,WAAW,gBAAgB,EAAE,CAC/B;CAED,MAAM,UAAU,aACb,EAAE,MAAM,GAAG,YAAiB,oBAAC,OAAD;EAAO,GAAI;EAAO,GAAI,gBAAgB;EAAO,CAAA,EAC1E,CAAC,gBAAgB,IAAI,CACtB;CAED,MAAM,YAAY,aACf,EAAE,MAAM,GAAG,YAAiB,oBAAC,OAAD;EAAO,GAAI;EAAO,GAAI,gBAAgB;EAAS,CAAA,EAC5E,CAAC,gBAAgB,MAAM,CACxB;CAED,MAAM,cAAc,aACjB,EAAE,MAAM,GAAG,YAAiB,oBAAC,SAAD;EAAwB;EAAe,GAAI;EAAS,CAAA,EACjF,CAAC,cAAc,CAChB;CAED,MAAM,UAAU,aACb,EAAE,eAAoB,oBAAC,QAAD;EAAQ,MAAM;EAAU,OAAO,EAAE,SAAS,eAAe;EAAI,CAAA,EACpF,EAAE,CACH;CAED,MAAM,SAAS,kBAAkB,oBAAC,MAAD,EAAM,CAAA,EAAE,EAAE,CAAC;CAE5C,MAAM,QAAQ,aAAa,EAAE,OAAO,UAAU,gBAAqB;AAEjE,MAAI,OAAO,aAAa,YAAY,CADX,OAAO,QACmB,CAAC,SAAS,UAAU,OAAO,MAAM,QAAQ,CAC1F,QAAO;AAET,SACE,oBAAC,KAAD;GAAc;GAAkB;GAC7B;GACC,CAAA;IAEL,EAAE,CAAC;CAGN,MAAM,iBAAiB,cACf,gBAAgB,WAAW,OACjC,CAAC,KAAK,UAAU,gBAAgB,WAAW,MAAM,CAAC,CACnD;CAED,MAAM,eAAe,cACb,gBAAgB,SAAS,OAC/B,CAAC,KAAK,UAAU,gBAAgB,SAAS,MAAM,CAAC,CACjD;CAGD,MAAM,uBAAuB,cAAc;AACzC,MAAI,CAAC,eAAgB;AAErB,SAAO;GACL,WAAW,eAAe,YACtB;IAAE,GAAG,eAAe;IAAW,OAAO;IAAgB,GACtD,KAAA;GACJ,SAAS,eAAe,UACpB;IAAE,GAAG,eAAe;IAAS,OAAO;IAAc,GAClD,KAAA;GACL;IACA,CAAC,gBAAgB,aAAa,CAAC;CAElC,MAAM,UAAU,aACb,EAAE,MAAM,GAAG,YACV,oBAAC,WAAD;EACY;EACK;EACf,cAAc;EACd,GAAI;EACJ,GAAI,gBAAgB;EACpB,GAAI;EACJ,CAAA,EAEJ;EAAC;EAAU;EAAe;EAAuB;EAAsB,gBAAgB;EAAI,CAC5F;CAED,MAAM,mBAAmB,aAAa,EAAE,MAAM,GAAG,YAAiB,oBAAC,QAAD,EAAM,GAAI,OAAS,CAAA,EAAE,EAAE,CAAC;CAE1F,MAAM,iBAAiB,eACd;EACL,GAAG;EACH,IAAI;EACJ,cAAc;EACd,KAAK;EACL,KAAK;EACL,GAAG;EACH,KAAK;EACL,SAAS;EACT,OAAO;EACR,GACD;EAAC;EAAO;EAAQ;EAAS;EAAW;EAAS;EAAa;EAAO;EAAkB;EAAQ,CAC5F;AAED,QAAO,eACE;EACL,GAAG;EACH,GAAG;EACJ,GACD,CAAC,gBAAgB,WAAW,CAC7B"}
+{"version":3,"file":"useMarkdownComponents.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/useMarkdownComponents.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo } from 'react';\nimport type { Components } from 'react-markdown';\n\nimport Hotkey from '@/Hotkey';\nimport { CodeBlock } from '@/Markdown/components/CodeBlock';\nimport { useMarkdownContext } from '@/Markdown/components/MarkdownProvider';\nimport Image from '@/mdx/mdxComponents/Image';\nimport Link from '@/mdx/mdxComponents/Link';\nimport Section from '@/mdx/mdxComponents/Section';\nimport Video from '@/mdx/mdxComponents/Video';\n\nexport const useMarkdownComponents = (): Components => {\n  const {\n    components,\n    animated,\n    citations,\n    componentProps,\n    enableHtmlPreview,\n    enableMermaid,\n    fullFeaturedCodeBlock,\n    showFootnotes,\n  } = useMarkdownContext();\n\n  const memoA = useCallback(\n    ({ node, ...props }: any) => <Link citations={citations} {...props} {...componentProps?.a} />,\n    [citations, componentProps?.a],\n  );\n\n  const memoImg = useCallback(\n    ({ node, ...props }: any) => <Image {...props} {...componentProps?.img} />,\n    [componentProps?.img],\n  );\n\n  const memoVideo = useCallback(\n    ({ node, ...props }: any) => <Video {...props} {...componentProps?.video} />,\n    [componentProps?.video],\n  );\n\n  const memoSection = useCallback(\n    ({ node, ...props }: any) => <Section showFootnotes={showFootnotes} {...props} />,\n    [showFootnotes],\n  );\n\n  const memoKbd = useCallback(\n    ({ children }: any) => <Hotkey keys={children} style={{ display: 'inline-flex' }} />,\n    [],\n  );\n\n  const memoBr = useCallback(() => <br />, []);\n\n  const memeP = useCallback(({ style, children, className }: any) => {\n    const skipWrapperTags = ['img', 'video'];\n    if (typeof children === 'object' && skipWrapperTags.includes(children?.props?.node?.tagName)) {\n      return children;\n    }\n    return (\n      <p className={className} style={style}>\n        {children}\n      </p>\n    );\n  }, []);\n\n  // Stable references for theme objects to prevent unnecessary re-renders\n  const highlightTheme = useMemo(\n    () => componentProps?.highlight?.theme,\n    [JSON.stringify(componentProps?.highlight?.theme)],\n  );\n\n  const mermaidTheme = useMemo(\n    () => componentProps?.mermaid?.theme,\n    [JSON.stringify(componentProps?.mermaid?.theme)],\n  );\n\n  // Create stable component props reference\n  const stableComponentProps = useMemo(() => {\n    if (!componentProps) return;\n\n    return {\n      highlight: componentProps.highlight\n        ? { ...componentProps.highlight, theme: highlightTheme }\n        : undefined,\n      html: componentProps.html,\n      mermaid: componentProps.mermaid\n        ? { ...componentProps.mermaid, theme: mermaidTheme }\n        : undefined,\n    };\n  }, [highlightTheme, mermaidTheme, componentProps?.html]);\n\n  const memoPre = useCallback(\n    ({ node, ...props }: any) => (\n      <CodeBlock\n        animated={animated}\n        enableHtmlPreview={enableHtmlPreview}\n        enableMermaid={enableMermaid}\n        fullFeatured={fullFeaturedCodeBlock}\n        {...stableComponentProps}\n        {...componentProps?.pre}\n        {...props}\n      />\n    ),\n    [\n      animated,\n      enableHtmlPreview,\n      enableMermaid,\n      fullFeaturedCodeBlock,\n      stableComponentProps,\n      componentProps?.pre,\n    ],\n  );\n\n  const memoColorPreview = useCallback(({ node, ...props }: any) => <code {...props} />, []);\n\n  const memoComponents = useMemo(\n    () => ({\n      a: memoA,\n      br: memoBr,\n      colorPreview: memoColorPreview,\n      img: memoImg,\n      kbd: memoKbd,\n      p: memeP,\n      pre: memoPre,\n      section: memoSection,\n      video: memoVideo,\n    }),\n    [memoA, memoBr, memoImg, memoVideo, memoPre, memoSection, memeP, memoColorPreview, memoKbd],\n  );\n\n  return useMemo(\n    () => ({\n      ...memoComponents,\n      ...components,\n    }),\n    [memoComponents, components],\n  );\n};\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,8BAA0C;CACrD,MAAM,EACJ,YACA,UACA,WACA,gBACA,mBACA,eACA,uBACA,kBACE,oBAAoB;CAExB,MAAM,QAAQ,aACX,EAAE,MAAM,GAAG,YAAiB,oBAAC,MAAD;EAAiB;EAAW,GAAI;EAAO,GAAI,gBAAgB;EAAK,CAAA,EAC7F,CAAC,WAAW,gBAAgB,EAAE,CAC/B;CAED,MAAM,UAAU,aACb,EAAE,MAAM,GAAG,YAAiB,oBAAC,OAAD;EAAO,GAAI;EAAO,GAAI,gBAAgB;EAAO,CAAA,EAC1E,CAAC,gBAAgB,IAAI,CACtB;CAED,MAAM,YAAY,aACf,EAAE,MAAM,GAAG,YAAiB,oBAAC,OAAD;EAAO,GAAI;EAAO,GAAI,gBAAgB;EAAS,CAAA,EAC5E,CAAC,gBAAgB,MAAM,CACxB;CAED,MAAM,cAAc,aACjB,EAAE,MAAM,GAAG,YAAiB,oBAAC,SAAD;EAAwB;EAAe,GAAI;EAAS,CAAA,EACjF,CAAC,cAAc,CAChB;CAED,MAAM,UAAU,aACb,EAAE,eAAoB,oBAAC,QAAD;EAAQ,MAAM;EAAU,OAAO,EAAE,SAAS,eAAe;EAAI,CAAA,EACpF,EAAE,CACH;CAED,MAAM,SAAS,kBAAkB,oBAAC,MAAD,EAAM,CAAA,EAAE,EAAE,CAAC;CAE5C,MAAM,QAAQ,aAAa,EAAE,OAAO,UAAU,gBAAqB;AAEjE,MAAI,OAAO,aAAa,YAAY,CADX,OAAO,QACmB,CAAC,SAAS,UAAU,OAAO,MAAM,QAAQ,CAC1F,QAAO;AAET,SACE,oBAAC,KAAD;GAAc;GAAkB;GAC7B;GACC,CAAA;IAEL,EAAE,CAAC;CAGN,MAAM,iBAAiB,cACf,gBAAgB,WAAW,OACjC,CAAC,KAAK,UAAU,gBAAgB,WAAW,MAAM,CAAC,CACnD;CAED,MAAM,eAAe,cACb,gBAAgB,SAAS,OAC/B,CAAC,KAAK,UAAU,gBAAgB,SAAS,MAAM,CAAC,CACjD;CAGD,MAAM,uBAAuB,cAAc;AACzC,MAAI,CAAC,eAAgB;AAErB,SAAO;GACL,WAAW,eAAe,YACtB;IAAE,GAAG,eAAe;IAAW,OAAO;IAAgB,GACtD,KAAA;GACJ,MAAM,eAAe;GACrB,SAAS,eAAe,UACpB;IAAE,GAAG,eAAe;IAAS,OAAO;IAAc,GAClD,KAAA;GACL;IACA;EAAC;EAAgB;EAAc,gBAAgB;EAAK,CAAC;CAExD,MAAM,UAAU,aACb,EAAE,MAAM,GAAG,YACV,oBAAC,WAAD;EACY;EACS;EACJ;EACf,cAAc;EACd,GAAI;EACJ,GAAI,gBAAgB;EACpB,GAAI;EACJ,CAAA,EAEJ;EACE;EACA;EACA;EACA;EACA;EACA,gBAAgB;EACjB,CACF;CAED,MAAM,mBAAmB,aAAa,EAAE,MAAM,GAAG,YAAiB,oBAAC,QAAD,EAAM,GAAI,OAAS,CAAA,EAAE,EAAE,CAAC;CAE1F,MAAM,iBAAiB,eACd;EACL,GAAG;EACH,IAAI;EACJ,cAAc;EACd,KAAK;EACL,KAAK;EACL,GAAG;EACH,KAAK;EACL,SAAS;EACT,OAAO;EACR,GACD;EAAC;EAAO;EAAQ;EAAS;EAAW;EAAS;EAAa;EAAO;EAAkB;EAAQ,CAC5F;AAED,QAAO,eACE;EACL,GAAG;EACH,GAAG;EACJ,GACD,CAAC,gBAAgB,WAAW,CAC7B"}

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

@@ -136,6 +136,11 @@ import { Highlighter } from "./Highlighter/Highlighter.mjs";
 import { SyntaxHighlighter } from "./Highlighter/SyntaxHighlighter/index.mjs";
 import { HotkeyInputProps } from "./HotkeyInput/type.mjs";
 import { HotkeyInput } from "./HotkeyInput/HotkeyInput.mjs";
+import { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./HtmlPreview/const.mjs";
+import { HtmlPreviewIframeProps, HtmlPreviewMode, HtmlPreviewProps, HtmlPreviewStreamingMode } from "./HtmlPreview/type.mjs";
+import { HtmlPreview } from "./HtmlPreview/HtmlPreview.mjs";
+import { HtmlPreviewIframe } from "./HtmlPreview/Iframe.mjs";
+import { AUTO_HEIGHT_MESSAGE_TYPE } from "./HtmlPreview/injectAutoHeightScript.mjs";
 import { ImageProps, PreviewGroupProps } from "./Image/type.mjs";
 import { PreviewGroup } from "./Image/PreviewGroup.mjs";
 import Image from "./Image/index.mjs";
@@ -178,6 +183,8 @@ import { MaskShadow } from "./MaskShadow/MaskShadow.mjs";
 import { MaterialFileTypeIconProps } from "./MaterialFileTypeIcon/type.mjs";
 import { MaterialFileTypeIcon } from "./MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
 import { styles } from "./Menu/sharedStyle.mjs";
+import { NeuralNetworkLoadingProps } from "./NeuralNetworkLoading/type.mjs";
+import { NeuralNetworkLoading } from "./NeuralNetworkLoading/NeuralNetworkLoading.mjs";
 import { I18nProvider, I18nProviderProps } from "./i18n/context.mjs";
 import { useTranslation } from "./i18n/useTranslation.mjs";
 import { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./base-ui/ScrollArea/atoms.mjs";
@@ -234,4 +241,4 @@ import { LayoutSidebarInner } from "./Layout/components/LayoutSidebarInner.mjs";
 import { LayoutToc } from "./Layout/components/LayoutToc.mjs";
 import Layout from "./Layout/index.mjs";
 import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
-export { A, AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, ColorPalettes, ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, LobeCustomStylish, LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, SpanProps, SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, Trigger, Typography, type TypographyProps, Video, type VideoProps, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverPortalContainer, useToast, useTranslation };
+export { A, AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, ColorPalettes, ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, LobeCustomStylish, LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeuralNetworkLoading, type NeuralNetworkLoadingProps, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, SpanProps, SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, Trigger, Typography, type TypographyProps, Video, type VideoProps, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverPortalContainer, useToast, useTranslation };

package/es/index.mjs

@@ -106,6 +106,12 @@ import Header from "./Header/Header.mjs";
 import Highlighter from "./Highlighter/Highlighter.mjs";
 import { preprocessMarkdownContent } from "./hooks/useMarkdown/utils.mjs";
 import HotkeyInput from "./HotkeyInput/HotkeyInput.mjs";
+import { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./HtmlPreview/const.mjs";
+import NeuralNetworkLoading from "./NeuralNetworkLoading/NeuralNetworkLoading.mjs";
+import Segmented from "./Segmented/Segmented.mjs";
+import { AUTO_HEIGHT_MESSAGE_TYPE } from "./HtmlPreview/injectAutoHeightScript.mjs";
+import HtmlPreviewIframe from "./HtmlPreview/Iframe.mjs";
+import HtmlPreview from "./HtmlPreview/HtmlPreview.mjs";
 import PreviewGroup from "./Image/PreviewGroup.mjs";
 import Image from "./Image/index.mjs";
 import ImageSelect from "./ImageSelect/ImageSelect.mjs";
@@ -139,7 +145,6 @@ import MaskShadow from "./MaskShadow/MaskShadow.mjs";
 import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./base-ui/ScrollArea/atoms.mjs";
 import { ScrollArea } from "./base-ui/ScrollArea/ScrollArea.mjs";
 import SearchBar from "./SearchBar/SearchBar.mjs";
-import Segmented from "./Segmented/Segmented.mjs";
 import Select from "./Select/Select.mjs";
 import SideNav from "./SideNav/SideNav.mjs";
 import SkeletonBlock from "./Skeleton/SkeletonBlock.mjs";
@@ -155,4 +160,4 @@ import ThemeSwitch from "./ThemeSwitch/ThemeSwitch.mjs";
 import { ToastHost, toast, useToast } from "./base-ui/Toast/imperative.mjs";
 import Toc from "./Toc/Toc.mjs";
 import { ErrorBoundary } from "react-error-boundary";
-export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, Header, Highlighter, Hotkey, HotkeyInput, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle, SliderWithInput, Snippet, SortableList, SyntaxHighlighter, SyntaxMermaid, Tabs, Tag, Text, TextArea, ThemeProvider, ThemeSwitch, ToastHost, Toc, Tooltip, TooltipGroup, Typography, Video, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverPortalContainer, useToast, useTranslation };
+export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, NeuralNetworkLoading, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle, SliderWithInput, Snippet, SortableList, SyntaxHighlighter, SyntaxMermaid, Tabs, Tag, Text, TextArea, ThemeProvider, ThemeSwitch, ToastHost, Toc, Tooltip, TooltipGroup, Typography, Video, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverPortalContainer, useToast, useTranslation };

package/es/mdx/mdxComponents/Pre.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { FALLBACK_LANG } from "../../Highlighter/const.mjs";
 import Highlighter from "../../Highlighter/Highlighter.mjs";
+import HtmlPreview from "../../HtmlPreview/HtmlPreview.mjs";
 import Mermaid from "../../Mermaid/Mermaid.mjs";
 import Snippet from "../../Snippet/Snippet.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -50,8 +51,20 @@ const PreMermaid = ({ animated, fullFeatured, children, className, style, varian
 		children
 	});
 };
+const PreHtmlPreview = ({ animated, fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
+	return /* @__PURE__ */ jsx(HtmlPreview, {
+		animated,
+		className: cx(styles.container, className),
+		fullFeatured,
+		style,
+		theme,
+		variant,
+		...rest,
+		children
+	});
+};
 Pre.displayName = "MdxPre";
 //#endregion
-export { PreMermaid, PreSingleLine, Pre as default };
+export { PreHtmlPreview, PreMermaid, PreSingleLine, Pre as default };
 
 //# sourceMappingURL=Pre.mjs.map

package/es/mdx/mdxComponents/Pre.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pre.mjs","names":[],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nconst styles = createStaticStyles(({ css }) => ({\n  container: css`\n    overflow: hidden;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n  `,\n}));\n\nexport type PreProps = HighlighterProps;\n\nexport const Pre: FC<PreProps> = ({\n  fullFeatured,\n  fileName,\n  allowChangeLanguage,\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  icon,\n  theme,\n  ...rest\n}) => {\n  return (\n    <Highlighter\n      allowChangeLanguage={allowChangeLanguage}\n      className={cx(styles.container, className)}\n      fileName={fileName}\n      fullFeatured={fullFeatured}\n      icon={icon}\n      language={language}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Highlighter>\n  );\n};\n\nexport const PreSingleLine: FC<SnippetProps> = ({\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <Snippet\n      className={cx(styles.container, className)}\n      data-code-type=\"highlighter\"\n      language={language}\n      style={style}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Snippet>\n  );\n};\n\nexport const PreMermaid: FC<MermaidProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <Mermaid\n      animated={animated}\n      className={cx(styles.container, className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Mermaid>\n  );\n};\n\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;AAUA,MAAM,SAAS,oBAAoB,EAAE,WAAW,EAC9C,WAAW,GAAG;;;;;KAMf,EAAE;AAIH,MAAa,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;AACJ,QACE,oBAAC,aAAD;EACuB;EACrB,WAAW,GAAG,OAAO,WAAW,UAAU;EAChC;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;EACW,CAAA;;AAIlB,MAAa,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;AACJ,QACE,oBAAC,SAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;EACO,CAAA;;AAId,MAAa,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;AACJ,QACE,oBAAC,SAAD;EACY;EACV,WAAW,GAAG,OAAO,WAAW,UAAU;EAC5B;EACP;EACA;EACE;EACT,GAAI;EAEH;EACO,CAAA;;AAId,IAAI,cAAc"}
+{"version":3,"file":"Pre.mjs","names":[],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport HtmlPreview, { type HtmlPreviewProps } from '@/HtmlPreview';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nconst styles = createStaticStyles(({ css }) => ({\n  container: css`\n    overflow: hidden;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n  `,\n}));\n\nexport type PreProps = HighlighterProps;\n\nexport const Pre: FC<PreProps> = ({\n  fullFeatured,\n  fileName,\n  allowChangeLanguage,\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  icon,\n  theme,\n  ...rest\n}) => {\n  return (\n    <Highlighter\n      allowChangeLanguage={allowChangeLanguage}\n      className={cx(styles.container, className)}\n      fileName={fileName}\n      fullFeatured={fullFeatured}\n      icon={icon}\n      language={language}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Highlighter>\n  );\n};\n\nexport const PreSingleLine: FC<SnippetProps> = ({\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <Snippet\n      className={cx(styles.container, className)}\n      data-code-type=\"highlighter\"\n      language={language}\n      style={style}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Snippet>\n  );\n};\n\nexport const PreMermaid: FC<MermaidProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <Mermaid\n      animated={animated}\n      className={cx(styles.container, className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Mermaid>\n  );\n};\n\nexport const PreHtmlPreview: FC<HtmlPreviewProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <HtmlPreview\n      animated={animated}\n      className={cx(styles.container, className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </HtmlPreview>\n  );\n};\n\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;AAWA,MAAM,SAAS,oBAAoB,EAAE,WAAW,EAC9C,WAAW,GAAG;;;;;KAMf,EAAE;AAIH,MAAa,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;AACJ,QACE,oBAAC,aAAD;EACuB;EACrB,WAAW,GAAG,OAAO,WAAW,UAAU;EAChC;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;EACW,CAAA;;AAIlB,MAAa,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;AACJ,QACE,oBAAC,SAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;EACO,CAAA;;AAId,MAAa,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;AACJ,QACE,oBAAC,SAAD;EACY;EACV,WAAW,GAAG,OAAO,WAAW,UAAU;EAC5B;EACP;EACA;EACE;EACT,GAAI;EAEH;EACO,CAAA;;AAId,MAAa,kBAAwC,EACnD,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;AACJ,QACE,oBAAC,aAAD;EACY;EACV,WAAW,GAAG,OAAO,WAAW,UAAU;EAC5B;EACP;EACA;EACE;EACT,GAAI;EAEH;EACW,CAAA;;AAIlB,IAAI,cAAc"}

package/es/utils/isDeepEqual.mjs

@@ -0,0 +1,21 @@
+//#region src/utils/isDeepEqual.ts
+const isRecord = (value) => typeof value === "object" && value !== null;
+const isDeepEqual = (a, b) => {
+	if (a === b) return true;
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b)) return false;
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (!isDeepEqual(a[i], b[i])) return false;
+		return true;
+	}
+	if (!isRecord(a) || !isRecord(b)) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (!isDeepEqual(a[key], b[key])) return false;
+	return true;
+};
+//#endregion
+export { isDeepEqual };
+
+//# sourceMappingURL=isDeepEqual.mjs.map