@lobehub/ui 5.49.0 → 5.50.0

package/es/Empty/Empty.d.mts

@@ -1,7 +1,6 @@
 import { EmptyProps } from "./type.mjs";
-import { FC } from "react";
 //#region src/Empty/Empty.d.ts
-declare const Empty: FC<EmptyProps>;
+declare const Empty: import("react").NamedExoticComponent<EmptyProps>;
 //#endregion
 export { Empty as default };
 //# sourceMappingURL=Empty.d.mts.map

package/es/Empty/Empty.mjs

@@ -1,76 +1,130 @@
 "use client";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Block from "../Block/Block.mjs";
 import Icon from "../Icon/Icon.mjs";
 import Text from "../Text/Text.mjs";
 import FluentEmoji from "../FluentEmoji/FluentEmoji.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Empty } from "antd";
-import { cssVar, useThemeMode } from "antd-style";
+import { cssVar, cx } from "antd-style";
+import { Plus } from "lucide-react";
 //#region src/Empty/Empty.tsx
-const Empty$1 = ({ title, description, icon, image, emoji, imageSize = 48, iconColor, action, children, imageProps, align, actionProps, type = "default", titleProps, descriptionProps, ...rest }) => {
-	const { isDarkMode } = useThemeMode();
+const Empty = memo(({ title, description, icon, iconColor, emoji, image, imageSize = 48, action, actionProps, titleProps, descriptionProps, align, imageProps, children, type = "default", variant = "default", className, onClick, ref, style, ...rest }) => {
 	const isPage = type === "page";
 	const alignValue = align || (isPage ? "flex-start" : "center");
 	const isCenter = alignValue === "center";
-	const fallbackImage = Empty.PRESENTED_IMAGE_SIMPLE;
-	const cover = image || emoji || icon ? image ? image : /* @__PURE__ */ jsxs(Block, {
-		align: "center",
-		flex: "none",
-		height: imageSize,
-		justify: "center",
-		variant: "outlined",
-		width: imageSize,
-		...imageProps,
-		style: {
-			marginBottom: 4,
-			...imageProps?.style
-		},
-		children: [icon && /* @__PURE__ */ jsx(Icon, {
-			icon,
-			size: imageSize * .66,
-			color: iconColor || (isDarkMode ? cssVar.colorTextQuaternary : cssVar.colorTextSecondary)
-		}), emoji && /* @__PURE__ */ jsx(FluentEmoji, {
+	const isClickable = !isPage && variant === "dashed" && !!onClick;
+	const resolvedIcon = icon ?? (isClickable ? Plus : void 0);
+	const iconSize = isPage ? 36 : variant === "dashed" ? 20 : 32;
+	const cover = useMemo(() => {
+		if (image) return image;
+		if (emoji) return /* @__PURE__ */ jsx(FluentEmoji, {
 			emoji,
-			size: imageSize * .75,
+			size: imageSize,
 			type: "anim"
-		})]
-	}) : fallbackImage;
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		align: alignValue,
-		gap: 8,
-		padding: 16,
+		});
+		if (!resolvedIcon) return null;
+		return /* @__PURE__ */ jsx(Icon, {
+			color: iconColor,
+			icon: resolvedIcon,
+			size: {
+				size: iconSize,
+				strokeWidth: isPage ? 1.25 : 2
+			}
+		});
+	}, [
+		image,
+		emoji,
+		imageSize,
+		resolvedIcon,
+		isPage,
+		iconColor,
+		iconSize
+	]);
+	const rootClassName = cx(isPage ? styles.rootPage : styles.root, !isPage && variant === "dashed" && styles.dashed, isClickable && styles.dashedClickable, className);
+	const handleKeyDown = (event) => {
+		if (!isClickable) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onClick?.(event);
+	};
+	const rootStyle = {
+		color: !isPage && variant === "dashed" ? cssVar.colorTextTertiary : cssVar.colorTextQuaternary,
+		...style
+	};
+	const titleNode = title && /* @__PURE__ */ jsx(Text, {
+		align: isCenter ? "center" : void 0,
+		color: cssVar.colorText,
+		fontSize: isPage ? 18 : 14,
+		weight: isPage ? 600 : 500,
+		style: {
+			marginBottom: isPage ? 4 : 0,
+			marginTop: isPage ? 0 : variant === "dashed" ? 6 : 8
+		},
+		...titleProps,
+		children: title
+	});
+	const descriptionNode = description && /* @__PURE__ */ jsx(Text, {
+		align: isCenter ? "center" : void 0,
+		color: cssVar.colorTextTertiary,
+		fontSize: 13,
+		style: { maxWidth: isPage ? "52ch" : "34ch" },
+		...descriptionProps,
+		children: description
+	});
+	if (isPage) return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		ref,
+		style: {
+			alignItems: alignValue,
+			...rootStyle
+		},
+		onClick,
+		...rest,
+		children: [cover && /* @__PURE__ */ jsx("div", {
+			...imageProps,
+			children: cover
+		}), /* @__PURE__ */ jsxs("div", { children: [
+			titleNode,
+			descriptionNode,
+			children,
+			action && /* @__PURE__ */ jsx("div", {
+				className: styles.extraPage,
+				...actionProps,
+				children: action
+			})
+		] })]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		ref,
+		role: isClickable ? "button" : void 0,
+		style: {
+			alignItems: alignValue,
+			textAlign: isCenter ? "center" : void 0,
+			...rootStyle
+		},
+		tabIndex: isClickable ? 0 : void 0,
+		onClick,
+		onKeyDown: handleKeyDown,
 		...rest,
 		children: [
-			cover,
-			/* @__PURE__ */ jsxs(FlexBasic_default, {
-				align: alignValue,
-				gap: isPage ? 4 : 1,
-				children: [title && /* @__PURE__ */ jsx(Text, {
-					align: isCenter ? "center" : void 0,
-					fontSize: isPage ? 24 : 16,
-					weight: "bold",
-					...titleProps,
-					children: title
-				}), description && /* @__PURE__ */ jsx(Text, {
-					align: isCenter ? "center" : void 0,
-					color: isPage ? cssVar.colorTextSecondary : cssVar.colorTextDescription,
-					fontSize: isPage ? 16 : 14,
-					...descriptionProps,
-					children: description
-				})]
+			cover && /* @__PURE__ */ jsx("div", {
+				...imageProps,
+				children: cover
 			}),
+			titleNode,
+			descriptionNode,
 			children,
-			action && /* @__PURE__ */ jsx(FlexBasic_default, {
-				gap: 4,
+			action && /* @__PURE__ */ jsx("div", {
+				className: styles.action,
 				...actionProps,
 				children: action
 			})
 		]
 	});
-};
-Empty$1.displayName = "Empty";
+});
+Empty.displayName = "Empty";
 //#endregion
-export { Empty$1 as default };
+export { Empty as default };
 
 //# sourceMappingURL=Empty.mjs.map

package/es/Empty/Empty.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.mjs","names":["Empty","AntEmpty","Flexbox"],"sources":["../../src/Empty/Empty.tsx"],"sourcesContent":["'use client';\n\nimport { Empty as AntEmpty } from 'antd';\nimport { cssVar, useThemeMode } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport type { EmptyProps } from './type';\n\nconst Empty: FC<EmptyProps> = ({\n  title,\n  description,\n  icon,\n  image,\n  emoji,\n  imageSize = 48,\n  iconColor,\n  action,\n  children,\n  imageProps,\n  align,\n  actionProps,\n  type = 'default',\n  titleProps,\n  descriptionProps,\n  ...rest\n}) => {\n  const { isDarkMode } = useThemeMode();\n  const isPage = type === 'page';\n  const alignValue = align || (isPage ? 'flex-start' : 'center');\n  const isCenter = alignValue === 'center';\n\n  const fallbackImage = AntEmpty.PRESENTED_IMAGE_SIMPLE;\n  const hasImage = image || emoji || icon;\n  const cover = hasImage ? (\n    image ? (\n      image\n    ) : (\n      <Block\n        align={'center'}\n        flex={'none'}\n        height={imageSize}\n        justify=\"center\"\n        variant={'outlined'}\n        width={imageSize}\n        {...imageProps}\n        style={{\n          marginBottom: 4,\n          ...imageProps?.style,\n        }}\n      >\n        {icon && (\n          <Icon\n            icon={icon}\n            size={imageSize * 0.66}\n            color={\n              iconColor || (isDarkMode ? cssVar.colorTextQuaternary : cssVar.colorTextSecondary)\n            }\n          />\n        )}\n        {emoji && <FluentEmoji emoji={emoji} size={imageSize * 0.75} type={'anim'} />}\n      </Block>\n    )\n  ) : (\n    fallbackImage\n  );\n\n  return (\n    <Flexbox align={alignValue} gap={8} padding={16} {...rest}>\n      {cover}\n      <Flexbox align={alignValue} gap={isPage ? 4 : 1}>\n        {title && (\n          <Text\n            align={isCenter ? 'center' : undefined}\n            fontSize={isPage ? 24 : 16}\n            weight={'bold'}\n            {...titleProps}\n          >\n            {title}\n          </Text>\n        )}\n        {description && (\n          <Text\n            align={isCenter ? 'center' : undefined}\n            color={isPage ? cssVar.colorTextSecondary : cssVar.colorTextDescription}\n            fontSize={isPage ? 16 : 14}\n            {...descriptionProps}\n          >\n            {description}\n          </Text>\n        )}\n      </Flexbox>\n      {children}\n      {action && (\n        <Flexbox gap={4} {...actionProps}>\n          {action}\n        </Flexbox>\n      )}\n    </Flexbox>\n  );\n};\n\nEmpty.displayName = 'Empty';\n\nexport default Empty;\n"],"mappings":";;;;;;;;;;AAcA,MAAMA,WAAyB,EAC7B,OACA,aACA,MACA,OACA,OACA,YAAY,IACZ,WACA,QACA,UACA,YACA,OACA,aACA,OAAO,WACP,YACA,kBACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,SAAS,SAAS;CACxB,MAAM,aAAa,UAAU,SAAS,eAAe;CACrD,MAAM,WAAW,eAAe;CAEhC,MAAM,gBAAgBC,MAAS;CAE/B,MAAM,QADW,SAAS,SAAS,OAEjC,QACE,QAEA,qBAAC,OAAD;EACE,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAQ;EACR,SAAS;EACT,OAAO;EACP,GAAI;EACJ,OAAO;GACL,cAAc;GACd,GAAG,YAAY;EACjB;EAXF,UAAA,CAaG,QACC,oBAAC,MAAD;GACQ;GACN,MAAM,YAAY;GAClB,OACE,cAAc,aAAa,OAAO,sBAAsB,OAAO;EAElE,CAAA,GAEF,SAAS,oBAAC,aAAD;GAAoB;GAAO,MAAM,YAAY;GAAM,MAAM;EAAS,CAAA,CACvE;CAGT,CAAA,IAAA;CAGF,OACE,qBAACC,mBAAD;EAAS,OAAO;EAAY,KAAK;EAAG,SAAS;EAAI,GAAI;EAArD,UAAA;GACG;GACD,qBAACA,mBAAD;IAAS,OAAO;IAAY,KAAK,SAAS,IAAI;IAA9C,UAAA,CACG,SACC,oBAAC,MAAD;KACE,OAAO,WAAW,WAAW,KAAA;KAC7B,UAAU,SAAS,KAAK;KACxB,QAAQ;KACR,GAAI;KAEH,UAAA;IACG,CAAA,GAEP,eACC,oBAAC,MAAD;KACE,OAAO,WAAW,WAAW,KAAA;KAC7B,OAAO,SAAS,OAAO,qBAAqB,OAAO;KACnD,UAAU,SAAS,KAAK;KACxB,GAAI;KAEH,UAAA;IACG,CAAA,CAED;;GACR;GACA,UACC,oBAACA,mBAAD;IAAS,KAAK;IAAG,GAAI;IAClB,UAAA;GACM,CAAA;EAEJ;;AAEb;AAEA,QAAM,cAAc"}
+{"version":3,"file":"Empty.mjs","names":[],"sources":["../../src/Empty/Empty.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Plus } from 'lucide-react';\nimport { type KeyboardEvent, memo, useMemo } from 'react';\n\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { EmptyProps } from './type';\n\nconst Empty = memo<EmptyProps>(\n  ({\n    title,\n    description,\n    icon,\n    iconColor,\n    emoji,\n    image,\n    imageSize = 48,\n    action,\n    actionProps,\n    titleProps,\n    descriptionProps,\n    align,\n    imageProps,\n    children,\n    type = 'default',\n    variant = 'default',\n    className,\n    onClick,\n    ref,\n    style,\n    ...rest\n  }) => {\n    const isPage = type === 'page';\n    const alignValue = align || (isPage ? 'flex-start' : 'center');\n    const isCenter = alignValue === 'center';\n\n    const isClickable = !isPage && variant === 'dashed' && !!onClick;\n    const resolvedIcon = icon ?? (isClickable ? Plus : undefined);\n\n    const iconSize = isPage ? 36 : variant === 'dashed' ? 20 : 32;\n\n    const cover = useMemo(() => {\n      if (image) return image;\n      if (emoji) return <FluentEmoji emoji={emoji} size={imageSize} type={'anim'} />;\n      if (!resolvedIcon) return null;\n\n      return (\n        <Icon\n          color={iconColor}\n          icon={resolvedIcon}\n          size={{ size: iconSize, strokeWidth: isPage ? 1.25 : 2 }}\n        />\n      );\n    }, [image, emoji, imageSize, resolvedIcon, isPage, iconColor, iconSize]);\n\n    const rootClassName = cx(\n      isPage ? styles.rootPage : styles.root,\n      !isPage && variant === 'dashed' && styles.dashed,\n      isClickable && styles.dashedClickable,\n      className,\n    );\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!isClickable) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      event.preventDefault();\n      (onClick as (event: unknown) => void)?.(event);\n    };\n\n    const rootStyle: EmptyProps['style'] = {\n      color:\n        !isPage && variant === 'dashed' ? cssVar.colorTextTertiary : cssVar.colorTextQuaternary,\n      ...style,\n    };\n\n    const titleNode = title && (\n      <Text\n        align={isCenter ? 'center' : undefined}\n        color={cssVar.colorText}\n        fontSize={isPage ? 18 : 14}\n        weight={isPage ? 600 : 500}\n        style={{\n          marginBottom: isPage ? 4 : 0,\n          marginTop: isPage ? 0 : variant === 'dashed' ? 6 : 8,\n        }}\n        {...titleProps}\n      >\n        {title}\n      </Text>\n    );\n\n    const descriptionNode = description && (\n      <Text\n        align={isCenter ? 'center' : undefined}\n        color={cssVar.colorTextTertiary}\n        fontSize={13}\n        style={{ maxWidth: isPage ? '52ch' : '34ch' }}\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    );\n\n    if (isPage) {\n      return (\n        <div\n          className={rootClassName}\n          ref={ref}\n          style={{ alignItems: alignValue, ...rootStyle }}\n          onClick={onClick}\n          {...rest}\n        >\n          {cover && <div {...imageProps}>{cover}</div>}\n          <div>\n            {titleNode}\n            {descriptionNode}\n            {children}\n            {action && (\n              <div className={styles.extraPage} {...actionProps}>\n                {action}\n              </div>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={rootClassName}\n        ref={ref}\n        role={isClickable ? 'button' : undefined}\n        style={{ alignItems: alignValue, textAlign: isCenter ? 'center' : undefined, ...rootStyle }}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={onClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {cover && <div {...imageProps}>{cover}</div>}\n        {titleNode}\n        {descriptionNode}\n        {children}\n        {action && (\n          <div className={styles.action} {...actionProps}>\n            {action}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nEmpty.displayName = 'Empty';\n\nexport default Empty;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,QAAQ,MACX,EACC,OACA,aACA,MACA,WACA,OACA,OACA,YAAY,IACZ,QACA,aACA,YACA,kBACA,OACA,YACA,UACA,OAAO,WACP,UAAU,WACV,WACA,SACA,KACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,SAAS;CACxB,MAAM,aAAa,UAAU,SAAS,eAAe;CACrD,MAAM,WAAW,eAAe;CAEhC,MAAM,cAAc,CAAC,UAAU,YAAY,YAAY,CAAC,CAAC;CACzD,MAAM,eAAe,SAAS,cAAc,OAAO,KAAA;CAEnD,MAAM,WAAW,SAAS,KAAK,YAAY,WAAW,KAAK;CAE3D,MAAM,QAAQ,cAAc;EAC1B,IAAI,OAAO,OAAO;EAClB,IAAI,OAAO,OAAO,oBAAC,aAAD;GAAoB;GAAO,MAAM;GAAW,MAAM;EAAS,CAAA;EAC7E,IAAI,CAAC,cAAc,OAAO;EAE1B,OACE,oBAAC,MAAD;GACE,OAAO;GACP,MAAM;GACN,MAAM;IAAE,MAAM;IAAU,aAAa,SAAS,OAAO;GAAE;EACxD,CAAA;CAEL,GAAG;EAAC;EAAO;EAAO;EAAW;EAAc;EAAQ;EAAW;CAAQ,CAAC;CAEvE,MAAM,gBAAgB,GACpB,SAAS,OAAO,WAAW,OAAO,MAClC,CAAC,UAAU,YAAY,YAAY,OAAO,QAC1C,eAAe,OAAO,iBACtB,SACF;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,IAAI,CAAC,aAAa;EAClB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAEhD,MAAM,eAAe;EACrB,UAAwC,KAAK;CAC/C;CAEA,MAAM,YAAiC;EACrC,OACE,CAAC,UAAU,YAAY,WAAW,OAAO,oBAAoB,OAAO;EACtE,GAAG;CACL;CAEA,MAAM,YAAY,SAChB,oBAAC,MAAD;EACE,OAAO,WAAW,WAAW,KAAA;EAC7B,OAAO,OAAO;EACd,UAAU,SAAS,KAAK;EACxB,QAAQ,SAAS,MAAM;EACvB,OAAO;GACL,cAAc,SAAS,IAAI;GAC3B,WAAW,SAAS,IAAI,YAAY,WAAW,IAAI;EACrD;EACA,GAAI;EAEH,UAAA;CACG,CAAA;CAGR,MAAM,kBAAkB,eACtB,oBAAC,MAAD;EACE,OAAO,WAAW,WAAW,KAAA;EAC7B,OAAO,OAAO;EACd,UAAU;EACV,OAAO,EAAE,UAAU,SAAS,SAAS,OAAO;EAC5C,GAAI;EAEH,UAAA;CACG,CAAA;CAGR,IAAI,QACF,OACE,qBAAC,OAAD;EACE,WAAW;EACN;EACL,OAAO;GAAE,YAAY;GAAY,GAAG;EAAU;EACrC;EACT,GAAI;EALN,UAAA,CAOG,SAAS,oBAAC,OAAD;GAAK,GAAI;GAAa,UAAA;EAAW,CAAA,GAC3C,qBAAC,OAAD,EAAA,UAAA;GACG;GACA;GACA;GACA,UACC,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAW,GAAI;IACnC,UAAA;GACE,CAAA;EAEJ,EAAA,CAAA,CACF;;CAIT,OACE,qBAAC,OAAD;EACE,WAAW;EACN;EACL,MAAM,cAAc,WAAW,KAAA;EAC/B,OAAO;GAAE,YAAY;GAAY,WAAW,WAAW,WAAW,KAAA;GAAW,GAAG;EAAU;EAC1F,UAAU,cAAc,IAAI,KAAA;EACnB;EACT,WAAW;EACX,GAAI;EARN,UAAA;GAUG,SAAS,oBAAC,OAAD;IAAK,GAAI;IAAa,UAAA;GAAW,CAAA;GAC1C;GACA;GACA;GACA,UACC,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,GAAI;IAChC,UAAA;GACE,CAAA;EAEJ;;AAET,CACF;AAEA,MAAM,cAAc"}

package/es/Empty/style.mjs

@@ -0,0 +1,48 @@
+import { createStaticStyles } from "antd-style";
+//#region src/Empty/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	action: css`
+    margin-block-start: 8px;
+  `,
+	dashed: css`
+    padding-block: 24px;
+    padding-inline: 16px;
+    border: 1px dashed ${cssVar.colorBorder};
+    border-radius: ${cssVar.borderRadiusLG};
+  `,
+	dashedClickable: css`
+    cursor: pointer;
+    transition:
+      border-color 0.15s,
+      background 0.15s;
+
+    &:hover {
+      border-color: ${cssVar.colorTextTertiary};
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	extraPage: css`
+    display: flex;
+    gap: 8px;
+    margin-block-start: 14px;
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: center;
+
+    padding-block: 16px;
+    padding-inline: 8px;
+  `,
+	rootPage: css`
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+    padding: 8px;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Empty/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Empty/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    margin-block-start: 8px;\n  `,\n  dashed: css`\n    padding-block: 24px;\n    padding-inline: 16px;\n    border: 1px dashed ${cssVar.colorBorder};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  dashedClickable: css`\n    cursor: pointer;\n    transition:\n      border-color 0.15s,\n      background 0.15s;\n\n    &:hover {\n      border-color: ${cssVar.colorTextTertiary};\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  extraPage: css`\n    display: flex;\n    gap: 8px;\n    margin-block-start: 14px;\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: center;\n\n    padding-block: 16px;\n    padding-inline: 8px;\n  `,\n  rootPage: css`\n    display: flex;\n    gap: 20px;\n    align-items: flex-start;\n    padding: 8px;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;yBAGY,OAAO,YAAY;qBACvB,OAAO,eAAe;;CAEzC,iBAAiB,GAAG;;;;;;;sBAOA,OAAO,kBAAkB;oBAC3B,OAAO,oBAAoB;;;CAG7C,WAAW,GAAG;;;;;CAKd,MAAM,GAAG;;;;;;;;;CAST,UAAU,GAAG;;;;;;AAMf,EAAE"}

package/es/Empty/type.d.mts

@@ -1,27 +1,26 @@
-import { FlexboxProps } from "../Flex/type.mjs";
-import "../Flex/index.mjs";
-import { BlockProps } from "../Block/type.mjs";
-import "../Block/index.mjs";
 import { IconProps } from "../Icon/type.mjs";
 import "../Icon/index.mjs";
 import { TextProps } from "../Text/type.mjs";
 import "../Text/index.mjs";
-import { ReactNode } from "react";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/Empty/type.d.ts
-interface EmptyProps extends Omit<FlexboxProps, 'title'> {
+interface EmptyProps extends Omit<ComponentProps<'div'>, 'title'> {
   action?: ReactNode;
-  actionProps?: Omit<FlexboxProps, 'children'>;
+  actionProps?: Omit<ComponentProps<'div'>, 'children'>;
+  align?: CSSProperties['alignItems'];
   description?: ReactNode;
   descriptionProps?: Omit<TextProps, 'children'>;
   emoji?: string;
   icon?: IconProps['icon'];
   iconColor?: IconProps['color'];
   image?: ReactNode;
-  imageProps?: Omit<BlockProps, 'children'>;
+  imageProps?: Omit<ComponentProps<'div'>, 'children'>;
   imageSize?: number;
+  ref?: Ref<HTMLDivElement>;
   title?: ReactNode;
   titleProps?: Omit<TextProps, 'children'>;
   type?: 'default' | 'page';
+  variant?: 'default' | 'dashed';
 }
 //#endregion
 export { EmptyProps };

package/es/HtmlPreview/HtmlPreview.mjs

@@ -2,12 +2,12 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import { stopPropagation } from "../utils/dom.mjs";
 import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import Spin from "../base-ui/Spin/Spin.mjs";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter/index.mjs";
 import CopyButton from "../CopyButton/CopyButton.mjs";
 import { downloadBlob } from "../utils/downloadBlob.mjs";
 import { actionsHoverCls, variants } from "../Highlighter/style.mjs";
 import { containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
-import NeuralNetworkLoading from "../NeuralNetworkLoading/NeuralNetworkLoading.mjs";
 import Segmented from "../Segmented/Segmented.mjs";
 import { HtmlPreviewIframe } from "./Iframe.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -285,7 +285,10 @@ const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender,
 			/* @__PURE__ */ jsx("div", { className: styles.loadingBackdrop }),
 			/* @__PURE__ */ jsxs("div", {
 				className: styles.loadingBadge,
-				children: [/* @__PURE__ */ jsx(NeuralNetworkLoading, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "Preparing preview…" })]
+				children: [/* @__PURE__ */ jsx(Spin, {
+					size: 16,
+					variant: "network"
+				}), /* @__PURE__ */ jsx("span", { children: "Preparing preview…" })]
 			})
 		]
 	}), [

package/es/HtmlPreview/HtmlPreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { Download, Expand } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { actionsHoverCls, variants } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport NeuralNetworkLoading from '@/NeuralNetworkLoading';\nimport Segmented from '@/Segmented';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\n// Sheen sweep direction: left → right.\n// `background-position` works inversely from \"where the image is drawn\":\n// at `200%` the over-sized gradient starts off to the left of the\n// container, at `-200%` it ends off to the right — so animating\n// 200% → -200% moves the visible bright spot from left to right.\nconst shimmer = keyframes`\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n  loadingBackdrop: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    /* Subtle moving sheen so it doesn't look frozen. */\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      color-mix(in srgb, ${cssVar.colorText} 4%, transparent) 50%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 200% 100%;\n\n    animation: ${shimmer} 1.6s ${cssVar.motionEaseInOut} infinite;\n  `,\n  loadingBadge: css`\n    position: absolute;\n    z-index: 2;\n    inset-block-start: 12px;\n    inset-inline-start: 12px;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: 6px 10px;\n    border-radius: 999px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextDescription};\n\n    background: ${cssVar.colorBgContainer};\n    backdrop-filter: blur(8px);\n    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  // The streaming source visible during Phase 1 — heavily faded so it\n  // reads as \"this is preview-pending content\" rather than the finished\n  // article. Auto-follows the tail so the user can see new tokens land\n  // even on slow models.\n  loadingSource: css`\n    pointer-events: none;\n    overflow: hidden;\n    height: 100%;\n\n    /* Faded out so the iframe transition feels like content lighting up,\n       not like one document jump-cutting to another. */\n    opacity: 0.45;\n\n    /* SyntaxHighlighter sets its own background; flatten so the shimmer\n       overlay reads cleanly on top. */\n    & [data-code-type='highlighter'] {\n      background: transparent;\n      box-shadow: none;\n    }\n\n    /* Tail-follow is layout-only — we anchor the scrollable element to\n       its scrollHeight via the ref + effect; CSS just keeps the\n       overflow hidden. */\n    & pre,\n    & code {\n      background: transparent !important;\n    }\n  `,\n  loadingRoot: css`\n    position: relative;\n    overflow: hidden;\n    background: color-mix(in srgb, ${cssVar.colorText} 3%, ${cssVar.colorBgContainer});\n  `,\n  // Inline top-right toolbar. Tagged with `actionsHoverCls` so the Highlighter\n  // container's `&:hover .${actionsHoverCls} { opacity: 1 }` rule flips it\n  // in/out as the user moves over the preview — same UX as the regular code\n  // block actions.\n  toolbar: cx(\n    actionsHoverCls,\n    css`\n      position: absolute;\n      z-index: 2;\n      inset-block-start: 8px;\n      inset-inline-end: 8px;\n\n      padding: 4px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      opacity: 0;\n      background: ${cssVar.colorBgContainer};\n      backdrop-filter: blur(8px);\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      transition: opacity 0.2s ${cssVar.motionEaseOut};\n\n      &:focus-within {\n        opacity: 1;\n      }\n    `,\n  ),\n}));\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div className={styles.loadingRoot} style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}>\n          <div className={styles.loadingSource} ref={loadingSourceRef}>\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div className={styles.loadingBackdrop} />\n          <div className={styles.loadingBadge}>\n            <NeuralNetworkLoading size={16} />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.toolbar, classNames?.header)}\n          flex={'none'}\n          gap={4}\n          style={customStyles?.header}\n          onClick={stopPropagation}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}
+{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { Download, Expand } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Spin from '@/base-ui/Spin';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { actionsHoverCls, variants } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Segmented from '@/Segmented';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\n// Sheen sweep direction: left → right.\n// `background-position` works inversely from \"where the image is drawn\":\n// at `200%` the over-sized gradient starts off to the left of the\n// container, at `-200%` it ends off to the right — so animating\n// 200% → -200% moves the visible bright spot from left to right.\nconst shimmer = keyframes`\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n  loadingBackdrop: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    /* Subtle moving sheen so it doesn't look frozen. */\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      color-mix(in srgb, ${cssVar.colorText} 4%, transparent) 50%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 200% 100%;\n\n    animation: ${shimmer} 1.6s ${cssVar.motionEaseInOut} infinite;\n  `,\n  loadingBadge: css`\n    position: absolute;\n    z-index: 2;\n    inset-block-start: 12px;\n    inset-inline-start: 12px;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: 6px 10px;\n    border-radius: 999px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextDescription};\n\n    background: ${cssVar.colorBgContainer};\n    backdrop-filter: blur(8px);\n    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  // The streaming source visible during Phase 1 — heavily faded so it\n  // reads as \"this is preview-pending content\" rather than the finished\n  // article. Auto-follows the tail so the user can see new tokens land\n  // even on slow models.\n  loadingSource: css`\n    pointer-events: none;\n    overflow: hidden;\n    height: 100%;\n\n    /* Faded out so the iframe transition feels like content lighting up,\n       not like one document jump-cutting to another. */\n    opacity: 0.45;\n\n    /* SyntaxHighlighter sets its own background; flatten so the shimmer\n       overlay reads cleanly on top. */\n    & [data-code-type='highlighter'] {\n      background: transparent;\n      box-shadow: none;\n    }\n\n    /* Tail-follow is layout-only — we anchor the scrollable element to\n       its scrollHeight via the ref + effect; CSS just keeps the\n       overflow hidden. */\n    & pre,\n    & code {\n      background: transparent !important;\n    }\n  `,\n  loadingRoot: css`\n    position: relative;\n    overflow: hidden;\n    background: color-mix(in srgb, ${cssVar.colorText} 3%, ${cssVar.colorBgContainer});\n  `,\n  // Inline top-right toolbar. Tagged with `actionsHoverCls` so the Highlighter\n  // container's `&:hover .${actionsHoverCls} { opacity: 1 }` rule flips it\n  // in/out as the user moves over the preview — same UX as the regular code\n  // block actions.\n  toolbar: cx(\n    actionsHoverCls,\n    css`\n      position: absolute;\n      z-index: 2;\n      inset-block-start: 8px;\n      inset-inline-end: 8px;\n\n      padding: 4px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      opacity: 0;\n      background: ${cssVar.colorBgContainer};\n      backdrop-filter: blur(8px);\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      transition: opacity 0.2s ${cssVar.motionEaseOut};\n\n      &:focus-within {\n        opacity: 1;\n      }\n    `,\n  ),\n}));\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div className={styles.loadingRoot} style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}>\n          <div className={styles.loadingSource} ref={loadingSourceRef}>\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div className={styles.loadingBackdrop} />\n          <div className={styles.loadingBadge}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.toolbar, classNames?.header)}\n          flex={'none'}\n          gap={4}\n          style={customStyles?.header}\n          onClick={stopPropagation}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}

package/es/Markdown/type.d.mts

@@ -25,6 +25,7 @@ interface TypographyProps extends DivProps {
   ref?: Ref<HTMLDivElement>;
 }
 interface SyntaxMarkdownProps {
+  /** Parse and render sanitized inline HTML in Markdown content. */
   allowHtml?: boolean;
   allowHtmlList?: ElementType[];
   animated?: boolean;

package/es/base-ui/Badge/Badge.d.mts

@@ -0,0 +1,6 @@
+import { BadgeProps } from "./type.mjs";
+//#region src/base-ui/Badge/Badge.d.ts
+declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
+//#endregion
+export { Badge as default };
+//# sourceMappingURL=Badge.d.mts.map

package/es/base-ui/Badge/Badge.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { pillSize, statusColor, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Badge/Badge.tsx
+const Badge = memo(({ children, className, color, count, dot = false, offset, overflowCount = 99, ref, showZero = false, size = "default", status, style, text, ...rest }) => {
+	if (children == null && (status !== void 0 || text !== void 0)) {
+		const dotColor = color ?? statusColor[status ?? "default"];
+		return /* @__PURE__ */ jsxs("span", {
+			className: cx(styles.statusRoot, className),
+			ref,
+			style,
+			...rest,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cx(styles.statusDot, status === "processing" && styles.statusDotProcessing),
+				style: {
+					background: dotColor,
+					color: dotColor
+				}
+			}), text && /* @__PURE__ */ jsx("span", {
+				className: styles.statusText,
+				children: text
+			})]
+		});
+	}
+	let content = null;
+	let renderPill = dot;
+	if (!dot) {
+		if (typeof count === "number") {
+			if (count !== 0 || showZero) {
+				renderPill = true;
+				content = count > overflowCount ? `${overflowCount}+` : count;
+			}
+		} else if (count != null) {
+			renderPill = true;
+			content = count;
+		}
+	}
+	const pillStyle = {
+		background: color,
+		transform: offset ? `translate(${offset[0]}px, ${offset[1]}px)` : void 0
+	};
+	if (children == null) {
+		if (!renderPill) return null;
+		return /* @__PURE__ */ jsx("span", {
+			className: cx(pillSize({ size }), dot && styles.pillDot, className),
+			ref,
+			style: {
+				...pillStyle,
+				...style
+			},
+			...rest,
+			children: !dot && content
+		});
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx(styles.wrapper, className),
+		ref,
+		style,
+		...rest,
+		children: [children, renderPill && /* @__PURE__ */ jsx("span", {
+			className: cx(pillSize({ size }), styles.pillAbsolute, dot && styles.pillDot),
+			style: pillStyle,
+			children: !dot && content
+		})]
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=Badge.mjs.map

package/es/base-ui/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../../src/base-ui/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, type ReactNode } from 'react';\n\nimport { pillSize, statusColor, styles } from './style';\nimport type { BadgeProps } from './type';\n\nconst Badge = memo<BadgeProps>(\n  ({\n    children,\n    className,\n    color,\n    count,\n    dot = false,\n    offset,\n    overflowCount = 99,\n    ref,\n    showZero = false,\n    size = 'default',\n    status,\n    style,\n    text,\n    ...rest\n  }) => {\n    const isStatusMode = children == null && (status !== undefined || text !== undefined);\n\n    if (isStatusMode) {\n      const dotColor = color ?? statusColor[status ?? 'default'];\n\n      return (\n        <span className={cx(styles.statusRoot, className)} ref={ref} style={style} {...rest}>\n          <span\n            className={cx(styles.statusDot, status === 'processing' && styles.statusDotProcessing)}\n            style={{ background: dotColor, color: dotColor }}\n          />\n          {text && <span className={styles.statusText}>{text}</span>}\n        </span>\n      );\n    }\n\n    let content: ReactNode = null;\n    let renderPill = dot;\n\n    if (!dot) {\n      if (typeof count === 'number') {\n        if (count !== 0 || showZero) {\n          renderPill = true;\n          content = count > overflowCount ? `${overflowCount}+` : count;\n        }\n      } else if (count != null) {\n        renderPill = true;\n        content = count;\n      }\n    }\n\n    const pillStyle = {\n      background: color,\n      transform: offset ? `translate(${offset[0]}px, ${offset[1]}px)` : undefined,\n    };\n\n    if (children == null) {\n      if (!renderPill) return null;\n\n      return (\n        <span\n          className={cx(pillSize({ size }), dot && styles.pillDot, className)}\n          ref={ref}\n          style={{ ...pillStyle, ...style }}\n          {...rest}\n        >\n          {!dot && content}\n        </span>\n      );\n    }\n\n    return (\n      <span className={cx(styles.wrapper, className)} ref={ref} style={style} {...rest}>\n        {children}\n        {renderPill && (\n          <span\n            className={cx(pillSize({ size }), styles.pillAbsolute, dot && styles.pillDot)}\n            style={pillStyle}\n          >\n            {!dot && content}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";;;;;;AAQA,MAAM,QAAQ,MACX,EACC,UACA,WACA,OACA,OACA,MAAM,OACN,QACA,gBAAgB,IAChB,KACA,WAAW,OACX,OAAO,WACP,QACA,OACA,MACA,GAAG,WACC;CAGJ,IAFqB,YAAY,SAAS,WAAW,KAAA,KAAa,SAAS,KAAA,IAEzD;EAChB,MAAM,WAAW,SAAS,YAAY,UAAU;EAEhD,OACE,qBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,YAAY,SAAS;GAAQ;GAAY;GAAO,GAAI;GAA/E,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GAAG,OAAO,WAAW,WAAW,gBAAgB,OAAO,mBAAmB;IACrF,OAAO;KAAE,YAAY;KAAU,OAAO;IAAS;GAChD,CAAA,GACA,QAAQ,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAa,UAAA;GAAW,CAAA,CACrD;;CAEV;CAEA,IAAI,UAAqB;CACzB,IAAI,aAAa;CAEjB,IAAI,CAAC,KAAK;EACR,IAAI,OAAO,UAAU,UACf;OAAA,UAAU,KAAK,UAAU;IAC3B,aAAa;IACb,UAAU,QAAQ,gBAAgB,GAAG,cAAc,KAAK;GAC1D;SACK,IAAI,SAAS,MAAM;GACxB,aAAa;GACb,UAAU;EACZ;CACF;CAEA,MAAM,YAAY;EAChB,YAAY;EACZ,WAAW,SAAS,aAAa,OAAO,GAAG,MAAM,OAAO,GAAG,OAAO,KAAA;CACpE;CAEA,IAAI,YAAY,MAAM;EACpB,IAAI,CAAC,YAAY,OAAO;EAExB,OACE,oBAAC,QAAD;GACE,WAAW,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,OAAO,OAAO,SAAS,SAAS;GAC7D;GACL,OAAO;IAAE,GAAG;IAAW,GAAG;GAAM;GAChC,GAAI;GAEH,UAAA,CAAC,OAAO;EACL,CAAA;CAEV;CAEA,OACE,qBAAC,QAAD;EAAM,WAAW,GAAG,OAAO,SAAS,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA5E,UAAA,CACG,UACA,cACC,oBAAC,QAAD;GACE,WAAW,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,OAAO,cAAc,OAAO,OAAO,OAAO;GAC5E,OAAO;GAEN,UAAA,CAAC,OAAO;EACL,CAAA,CAEJ;;AAEV,CACF;AAEA,MAAM,cAAc"}

package/es/base-ui/Badge/index.d.mts

@@ -0,0 +1,3 @@
+import { BadgeProps, BadgeSize, BadgeStatus } from "./type.mjs";
+import Badge from "./Badge.mjs";
+export { type BadgeProps, type BadgeSize, type BadgeStatus, Badge as default };