@lobehub/ui 5.15.8 → 5.15.9

package/es/CodeDiff/CodeDiff.mjs

@@ -1,12 +1,12 @@
 "use client";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
-import { headerVariants, styles, variants } from "./style.mjs";
+import { DiffPanel } from "./DiffPanel.mjs";
+import { getLobeDiffOptions, registerLobeDiffThemes } from "./theme.mjs";
 import { memo, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import { jsx } from "react/jsx-runtime";
+import { useThemeMode } from "antd-style";
 import { MultiFileDiff } from "@pierre/diffs/react";
 //#region src/CodeDiff/CodeDiff.tsx
+registerLobeDiffThemes();
 const countContentChanges = (oldContent, newContent) => {
 	const oldLines = oldContent.split("\n");
 	const newLines = newContent.split("\n");
@@ -21,7 +21,8 @@ const countContentChanges = (oldContent, newContent) => {
 		deletions
 	};
 };
-const CodeDiff = memo(({ oldContent, newContent, language, fileName, viewMode = "split", showHeader = true, variant = "filled", className, classNames, styles: customStyles, actionsRender, diffOptions, ...rest }) => {
+const CodeDiff = memo(({ oldContent, newContent, language, fileName, viewMode = "split", showHeader = true, defaultExpand = true, fullFeatured = true, variant = "filled", className, classNames, styles: customStyles, actionsRender, diffOptions, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
 	const displayName = useMemo(() => {
 		if (fileName) return fileName;
 		if (language) return language;
@@ -49,67 +50,42 @@ const CodeDiff = memo(({ oldContent, newContent, language, fileName, viewMode =
 		language,
 		fileName
 	]);
-	const newFile = useMemo(() => ({
-		contents: newContent,
-		lang: language,
-		name: fileName || "file"
-	}), [
-		newContent,
-		language,
-		fileName
-	]);
-	const options = useMemo(() => ({
-		diffStyle: viewMode,
-		disableFileHeader: true,
-		...diffOptions
-	}), [viewMode, diffOptions]);
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({ variant }), className),
-		"data-code-type": "code-diff",
-		...rest,
-		children: [showHeader && /* @__PURE__ */ jsxs("div", {
-			className: cx(headerVariants({ variant }), classNames?.header),
-			style: customStyles?.header,
-			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				gap: 8,
-				children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
-					filename: fileName || displayName,
-					size: 18,
-					type: "file"
-				}), /* @__PURE__ */ jsx("span", { children: displayName })]
-			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				gap: 8,
-				children: [(deletions > 0 || additions > 0) && /* @__PURE__ */ jsxs(FlexBasic_default, {
-					horizontal: true,
-					className: styles.stats,
-					gap: 8,
-					children: [deletions > 0 && /* @__PURE__ */ jsxs("span", {
-						className: styles.deletions,
-						children: ["-", deletions]
-					}), additions > 0 && /* @__PURE__ */ jsxs("span", {
-						className: styles.additions,
-						children: ["+", additions]
-					})]
-				}), actions && /* @__PURE__ */ jsx(FlexBasic_default, {
-					align: "center",
-					className: cx(`lobe-code-diff-actions`, styles.actions),
-					gap: 4,
-					children: actions
-				})]
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx(styles.body, classNames?.body),
-			style: customStyles?.body,
-			children: /* @__PURE__ */ jsx(MultiFileDiff, {
-				newFile,
-				oldFile,
-				options
-			})
-		})]
+	return /* @__PURE__ */ jsx(DiffPanel, {
+		actions,
+		additions,
+		body: /* @__PURE__ */ jsx(MultiFileDiff, {
+			newFile: useMemo(() => ({
+				contents: newContent,
+				lang: language,
+				name: fileName || "file"
+			}), [
+				newContent,
+				language,
+				fileName
+			]),
+			oldFile,
+			options: useMemo(() => getLobeDiffOptions({
+				diffOptions,
+				isDarkMode,
+				viewMode
+			}), [
+				isDarkMode,
+				viewMode,
+				diffOptions
+			])
+		}),
+		className,
+		classNames,
+		dataCodeType: "code-diff",
+		defaultExpand,
+		deletions,
+		displayName,
+		fileName,
+		fullFeatured,
+		showHeader,
+		styles: customStyles,
+		variant,
+		...rest
 	});
 });
 CodeDiff.displayName = "CodeDiff";

package/es/CodeDiff/CodeDiff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDiff.mjs","names":["Flexbox"],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { cx } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\n\nimport { headerVariants, prefix, styles, variants } from './style';\nimport type { CodeDiffProps } from './type';\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => ({\n        diffStyle: viewMode,\n        disableFileHeader: true,\n        ...diffOptions,\n      }),\n      [viewMode, diffOptions],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        data-code-type=\"code-diff\"\n        {...rest}\n      >\n        {showHeader && (\n          <div\n            className={cx(headerVariants({ variant }), classNames?.header)}\n            style={customStyles?.header}\n          >\n            <Flexbox horizontal align=\"center\" gap={8}>\n              <MaterialFileTypeIcon filename={fileName || displayName} size={18} type=\"file\" />\n              <span>{displayName}</span>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" gap={8}>\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal className={styles.stats} gap={8}>\n                  {deletions > 0 && <span className={styles.deletions}>-{deletions}</span>}\n                  {additions > 0 && <span className={styles.additions}>+{additions}</span>}\n                </Flexbox>\n              )}\n              {actions && (\n                <Flexbox align=\"center\" className={cx(`${prefix}-actions`, styles.actions)} gap={4}>\n                  {actions}\n                </Flexbox>\n              )}\n            </Flexbox>\n          </div>\n        )}\n        <div className={cx(styles.body, classNames?.body)} style={customStyles?.body}>\n          <MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;;AAaA,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,KAAK;CACvC,MAAM,WAAW,WAAW,MAAM,KAAK;CAEvC,MAAM,SAAS,IAAI,IAAI,SAAS;CAChC,MAAM,SAAS,IAAI,IAAI,SAAS;CAEhC,IAAI,YAAY;CAChB,IAAI,YAAY;AAEhB,MAAK,MAAM,QAAQ,SACjB,KAAI,CAAC,OAAO,IAAI,KAAK,CACnB;AAIJ,MAAK,MAAM,QAAQ,SACjB,KAAI,CAAC,OAAO,IAAI,KAAK,CACnB;AAIJ,QAAO;EAAE;EAAW;EAAW;;AAGjC,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,SAAO;IACN,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,WAAW,EACjD,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA;GACA,cAAc;GACf,CAAC;IACD;EAAC;EAAe;EAAY;EAAW,CAAC;CAE3C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;EACnB,GACD;EAAC;EAAY;EAAU;EAAS,CACjC;CAED,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;EACnB,GACD;EAAC;EAAY;EAAU;EAAS,CACjC;CAED,MAAM,UAAU,eACP;EACL,WAAW;EACX,mBAAmB;EACnB,GAAG;EACJ,GACD,CAAC,UAAU,YAAY,CACxB;AAED,QACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAC/C,kBAAe;EACf,GAAI;YAHN,CAKG,cACC,qBAAC,OAAD;GACE,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,YAAY,OAAO;GAC9D,OAAO,cAAc;aAFvB,CAIE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,KAAK;cAAxC,CACE,oBAAC,sBAAD;KAAsB,UAAU,YAAY;KAAa,MAAM;KAAI,MAAK;KAAS,CAAA,EACjF,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,CAClB;OACV,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,KAAK;cAAxC,EACI,YAAY,KAAK,YAAY,MAC7B,qBAACA,mBAAD;KAAS,YAAA;KAAW,WAAW,OAAO;KAAO,KAAK;eAAlD,CACG,YAAY,KAAK,qBAAC,QAAD;MAAM,WAAW,OAAO;gBAAxB,CAAmC,KAAE,UAAiB;SACvE,YAAY,KAAK,qBAAC,QAAD;MAAM,WAAW,OAAO;gBAAxB,CAAmC,KAAE,UAAiB;QAChE;QAEX,WACC,oBAACA,mBAAD;KAAS,OAAM;KAAS,WAAW,GAAG,0BAAqB,OAAO,QAAQ;KAAE,KAAK;eAC9E;KACO,CAAA,CAEJ;MACN;MAER,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAAC,eAAD;IAAwB;IAAkB;IAAkB;IAAW,CAAA;GACnE,CAAA,CACE;;EAGf;AAED,SAAS,cAAc"}
+{"version":3,"file":"CodeDiff.mjs","names":[],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { CodeDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"code-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;AAWA,wBAAwB;AAExB,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,KAAK;CACvC,MAAM,WAAW,WAAW,MAAM,KAAK;CAEvC,MAAM,SAAS,IAAI,IAAI,SAAS;CAChC,MAAM,SAAS,IAAI,IAAI,SAAS;CAEhC,IAAI,YAAY;CAChB,IAAI,YAAY;AAEhB,MAAK,MAAM,QAAQ,SACjB,KAAI,CAAC,OAAO,IAAI,KAAK,CACnB;AAIJ,MAAK,MAAM,QAAQ,SACjB,KAAI,CAAC,OAAO,IAAI,KAAK,CACnB;AAIJ,QAAO;EAAE;EAAW;EAAW;;AAGjC,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,SAAO;IACN,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,WAAW,EACjD,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA;GACA,cAAc;GACf,CAAC;IACD;EAAC;EAAe;EAAY;EAAW,CAAC;CAE3C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;EACnB,GACD;EAAC;EAAY;EAAU;EAAS,CACjC;AAgBD,QACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAAC,eAAD;GAAe,SAlBT,eACP;IACL,UAAU;IACV,MAAM;IACN,MAAM,YAAY;IACnB,GACD;IAAC;IAAY;IAAU;IAAS,CAYO;GAAW;GAAS,SAT7C,cACR,mBAAmB;IAAE;IAAa;IAAY;IAAU,CAAC,EAC/D;IAAC;IAAY;IAAU;IAAY,CAOwC;GAAI,CAAA;EAClE;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;EACJ,CAAA;EAGP;AAED,SAAS,cAAc"}

package/es/CodeDiff/DiffPanel.mjs

@@ -0,0 +1,118 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Text from "../Text/Text.mjs";
+import { stopPropagation } from "../utils/dom.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import Tag from "../Tag/Tag.mjs";
+import { bodyVariants, headerVariants, prefix, styles, variants } from "./style.mjs";
+import { memo, useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronDown, ChevronRight } from "lucide-react";
+//#region src/CodeDiff/DiffPanel.tsx
+const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, defaultExpand = true, deletions, displayName, fileName, fullFeatured = true, showHeader = true, styles: customStyles, variant = "filled", additions, ...rest }) => {
+	const [expand, setExpand] = useState(defaultExpand);
+	const handleToggleExpand = useCallback(() => {
+		setExpand((prev) => !prev);
+	}, []);
+	if (!fullFeatured) return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({ variant }), className),
+		"data-code-type": dataCodeType,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: styles.actionsCompact,
+				flex: "none",
+				gap: 4,
+				children: actions
+			}),
+			showHeader && /* @__PURE__ */ jsx(Tag, {
+				className: styles.lang,
+				children: displayName
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx(styles.body, classNames?.body),
+				style: customStyles?.body,
+				children: body
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({ variant }), className),
+		"data-code-type": dataCodeType,
+		...rest,
+		children: [showHeader && /* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			className: cx(headerVariants({ variant }), classNames?.header),
+			justify: "space-between",
+			style: customStyles?.header,
+			onClick: handleToggleExpand,
+			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: "language-title",
+				flex: 1,
+				gap: 4,
+				justify: "flex-start",
+				paddingInline: 8,
+				children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
+					fallbackUnknownType: false,
+					filename: fileName || displayName,
+					size: 18,
+					type: "file",
+					variant: "raw"
+				}), /* @__PURE__ */ jsx(Text, {
+					ellipsis: true,
+					fontSize: 13,
+					children: displayName
+				})]
+			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				flex: "none",
+				gap: 8,
+				onClick: stopPropagation,
+				children: [
+					actions && /* @__PURE__ */ jsx(FlexBasic_default, {
+						horizontal: true,
+						align: "center",
+						className: cx("panel-actions", `lobe-code-diff-actions`, styles.actions),
+						flex: "none",
+						gap: 4,
+						children: actions
+					}),
+					(deletions > 0 || additions > 0) && /* @__PURE__ */ jsxs(FlexBasic_default, {
+						horizontal: true,
+						className: styles.stats,
+						gap: 8,
+						children: [deletions > 0 && /* @__PURE__ */ jsxs("span", {
+							className: styles.deletions,
+							children: ["-", deletions]
+						}), additions > 0 && /* @__PURE__ */ jsxs("span", {
+							className: styles.additions,
+							children: ["+", additions]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						icon: expand ? ChevronDown : ChevronRight,
+						size: "small",
+						onClick: handleToggleExpand
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(bodyVariants({ expand }), `${prefix}-body`, styles.body, classNames?.body),
+			style: customStyles?.body,
+			children: body
+		})]
+	});
+});
+DiffPanel.displayName = "DiffPanel";
+//#endregion
+export { DiffPanel };
+
+//# sourceMappingURL=DiffPanel.mjs.map

package/es/CodeDiff/DiffPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffPanel.mjs","names":["Flexbox"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { bodyVariants, headerVariants, prefix, styles, variants } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          className={cx(variants({ variant }), className)}\n          data-code-type={dataCodeType}\n          {...rest}\n        >\n          <Flexbox horizontal align=\"center\" className={styles.actionsCompact} flex=\"none\" gap={4}>\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={styles.lang}>{displayName}</Tag>}\n          <div className={cx(styles.body, classNames?.body)} style={customStyles?.body}>\n            {body}\n          </div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        data-code-type={dataCodeType}\n        {...rest}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            className={cx(headerVariants({ variant }), classNames?.header)}\n            justify=\"space-between\"\n            style={customStyles?.header}\n            onClick={handleToggleExpand}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  className={cx('panel-actions', `${prefix}-actions`, styles.actions)}\n                  flex=\"none\"\n                  gap={4}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal className={styles.stats} gap={8}>\n                  {deletions > 0 && <span className={styles.deletions}>-{deletions}</span>}\n                  {additions > 0 && <span className={styles.additions}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          className={cx(bodyVariants({ expand }), `${prefix}-body`, styles.body, classNames?.body)}\n          style={customStyles?.body}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAa,YAAY,MACtB,EACC,SACA,MACA,WACA,YACA,cACA,gBAAgB,MAChB,WACA,aACA,UACA,eAAe,MACf,aAAa,MACb,QAAQ,cACR,UAAU,UACV,WACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CAEnD,MAAM,qBAAqB,kBAAkB;AAC3C,aAAW,SAAS,CAAC,KAAK;IACzB,EAAE,CAAC;AAEN,KAAI,CAAC,aACH,QACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAC/C,kBAAgB;EAChB,GAAI;YAHN;GAKE,oBAACA,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,WAAW,OAAO;IAAgB,MAAK;IAAO,KAAK;cACnF;IACO,CAAA;GACT,cAAc,oBAAC,KAAD;IAAK,WAAW,OAAO;cAAO;IAAkB,CAAA;GAC/D,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;IAAE,OAAO,cAAc;cACrE;IACG,CAAA;GACE;;AAGd,QACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAC/C,kBAAgB;EAChB,GAAI;YAHN,CAKG,cACC,qBAACA,mBAAD;GACE,YAAA;GACA,OAAM;GACN,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,YAAY,OAAO;GAC9D,SAAQ;GACR,OAAO,cAAc;GACrB,SAAS;aANX,CAQE,qBAACA,mBAAD;IACE,YAAA;IACA,OAAM;IACN,WAAU;IACV,MAAM;IACN,KAAK;IACL,SAAQ;IACR,eAAe;cAPjB,CASE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU,YAAY;KACtB,MAAM;KACN,MAAK;KACL,SAAQ;KACR,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eACtB;KACI,CAAA,CACC;OACV,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,MAAK;IAAO,KAAK;IAAG,SAAS;cAAhE;KACG,WACC,oBAACA,mBAAD;MACE,YAAA;MACA,OAAM;MACN,WAAW,GAAG,iBAAiB,0BAAqB,OAAO,QAAQ;MACnE,MAAK;MACL,KAAK;gBAEJ;MACO,CAAA;MAEV,YAAY,KAAK,YAAY,MAC7B,qBAACA,mBAAD;MAAS,YAAA;MAAW,WAAW,OAAO;MAAO,KAAK;gBAAlD,CACG,YAAY,KAAK,qBAAC,QAAD;OAAM,WAAW,OAAO;iBAAxB,CAAmC,KAAE,UAAiB;UACvE,YAAY,KAAK,qBAAC,QAAD;OAAM,WAAW,OAAO;iBAAxB,CAAmC,KAAE,UAAiB;SAChE;;KAEZ,oBAAC,YAAD;MACE,MAAM,SAAS,cAAc;MAC7B,MAAK;MACL,SAAS;MACT,CAAA;KACM;MACF;MAEZ,oBAAC,OAAD;GACE,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,EAAE,GAAG,OAAO,QAAQ,OAAO,MAAM,YAAY,KAAK;GACxF,OAAO,cAAc;aAEpB;GACG,CAAA,CACE;;EAGf;AAED,UAAU,cAAc"}

package/es/CodeDiff/PatchDiff.mjs

@@ -1,12 +1,12 @@
 "use client";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
-import { headerVariants, styles, variants } from "./style.mjs";
+import { DiffPanel } from "./DiffPanel.mjs";
+import { getLobeDiffOptions, registerLobeDiffThemes } from "./theme.mjs";
 import { memo, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import { jsx } from "react/jsx-runtime";
+import { useThemeMode } from "antd-style";
 import { PatchDiff } from "@pierre/diffs/react";
 //#region src/CodeDiff/PatchDiff.tsx
+registerLobeDiffThemes();
 const countPatchChanges = (patch) => {
 	const lines = patch.split("\n");
 	let additions = 0;
@@ -18,7 +18,8 @@ const countPatchChanges = (patch) => {
 		deletions
 	};
 };
-const PatchDiff$1 = memo(({ patch, language, fileName, viewMode = "split", showHeader = true, variant = "filled", className, classNames, styles: customStyles, actionsRender, diffOptions, ...rest }) => {
+const PatchDiff$1 = memo(({ patch, language, fileName, viewMode = "split", showHeader = true, defaultExpand = true, fullFeatured = true, variant = "filled", className, classNames, styles: customStyles, actionsRender, diffOptions, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
 	const displayName = useMemo(() => {
 		if (fileName) return fileName;
 		const match = patch.match(/^(?:-{3}|\+{3})\s+(?:a\/|b\/)?(.+?)(?:\t|$)/m);
@@ -31,64 +32,39 @@ const PatchDiff$1 = memo(({ patch, language, fileName, viewMode = "split", showH
 		language
 	]);
 	const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);
-	const actions = useMemo(() => {
-		if (!actionsRender) return null;
-		return actionsRender({
-			originalNode: null,
-			patch
-		});
-	}, [actionsRender, patch]);
-	const options = useMemo(() => ({
-		diffStyle: viewMode,
-		disableFileHeader: true,
-		...diffOptions
-	}), [viewMode, diffOptions]);
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({ variant }), className),
-		"data-code-type": "patch-diff",
-		...rest,
-		children: [showHeader && /* @__PURE__ */ jsxs("div", {
-			className: cx(headerVariants({ variant }), classNames?.header),
-			style: customStyles?.header,
-			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				gap: 8,
-				children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
-					filename: fileName || displayName,
-					size: 18,
-					type: "file"
-				}), /* @__PURE__ */ jsx("span", { children: displayName })]
-			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				gap: 8,
-				children: [(deletions > 0 || additions > 0) && /* @__PURE__ */ jsxs(FlexBasic_default, {
-					horizontal: true,
-					className: styles.stats,
-					gap: 8,
-					children: [deletions > 0 && /* @__PURE__ */ jsxs("span", {
-						className: styles.deletions,
-						children: ["-", deletions]
-					}), additions > 0 && /* @__PURE__ */ jsxs("span", {
-						className: styles.additions,
-						children: ["+", additions]
-					})]
-				}), actions && /* @__PURE__ */ jsx(FlexBasic_default, {
-					align: "center",
-					className: cx(`lobe-code-diff-actions`, styles.actions),
-					gap: 4,
-					children: actions
-				})]
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx(styles.body, classNames?.body),
-			style: customStyles?.body,
-			children: /* @__PURE__ */ jsx(PatchDiff, {
-				options,
+	return /* @__PURE__ */ jsx(DiffPanel, {
+		actions: useMemo(() => {
+			if (!actionsRender) return null;
+			return actionsRender({
+				originalNode: null,
 				patch
-			})
-		})]
+			});
+		}, [actionsRender, patch]),
+		additions,
+		body: /* @__PURE__ */ jsx(PatchDiff, {
+			options: useMemo(() => getLobeDiffOptions({
+				diffOptions,
+				isDarkMode,
+				viewMode
+			}), [
+				isDarkMode,
+				viewMode,
+				diffOptions
+			]),
+			patch
+		}),
+		className,
+		classNames,
+		dataCodeType: "patch-diff",
+		defaultExpand,
+		deletions,
+		displayName,
+		fileName,
+		fullFeatured,
+		showHeader,
+		styles: customStyles,
+		variant,
+		...rest
 	});
 });
 PatchDiff$1.displayName = "PatchDiff";

package/es/CodeDiff/PatchDiff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PatchDiff.mjs","names":["PatchDiff","Flexbox","PierrePatchDiff"],"sources":["../../src/CodeDiff/PatchDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { PatchDiff as PierrePatchDiff } from '@pierre/diffs/react';\nimport { cx } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\n\nimport { headerVariants, prefix, styles, variants } from './style';\nimport type { PatchDiffProps } from './type';\n\nconst countPatchChanges = (patch: string): { additions: number; deletions: number } => {\n  const lines = patch.split('\\n');\n  let additions = 0;\n  let deletions = 0;\n\n  for (const line of lines) {\n    if (line.startsWith('+') && !line.startsWith('+++')) {\n      additions++;\n    } else if (line.startsWith('-') && !line.startsWith('---')) {\n      deletions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const PatchDiff = memo<PatchDiffProps>(\n  ({\n    patch,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      // Try to extract filename from patch header\n      const match = patch.match(/^(?:-{3}|\\+{3})\\s+(?:a\\/|b\\/)?(.+?)(?:\\t|$)/m);\n      if (match?.[1]) return match[1];\n      if (language) return language;\n      return 'patch';\n    }, [fileName, patch, language]);\n\n    const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        originalNode: null,\n        patch,\n      });\n    }, [actionsRender, patch]);\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => ({\n        diffStyle: viewMode,\n        disableFileHeader: true,\n        ...diffOptions,\n      }),\n      [viewMode, diffOptions],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        data-code-type=\"patch-diff\"\n        {...rest}\n      >\n        {showHeader && (\n          <div\n            className={cx(headerVariants({ variant }), classNames?.header)}\n            style={customStyles?.header}\n          >\n            <Flexbox horizontal align=\"center\" gap={8}>\n              <MaterialFileTypeIcon filename={fileName || displayName} size={18} type=\"file\" />\n              <span>{displayName}</span>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" gap={8}>\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal className={styles.stats} gap={8}>\n                  {deletions > 0 && <span className={styles.deletions}>-{deletions}</span>}\n                  {additions > 0 && <span className={styles.additions}>+{additions}</span>}\n                </Flexbox>\n              )}\n              {actions && (\n                <Flexbox align=\"center\" className={cx(`${prefix}-actions`, styles.actions)} gap={4}>\n                  {actions}\n                </Flexbox>\n              )}\n            </Flexbox>\n          </div>\n        )}\n        <div className={cx(styles.body, classNames?.body)} style={customStyles?.body}>\n          <PierrePatchDiff options={options} patch={patch} />\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nPatchDiff.displayName = 'PatchDiff';\n\nexport default PatchDiff;\n"],"mappings":";;;;;;;;;AAaA,MAAM,qBAAqB,UAA4D;CACrF,MAAM,QAAQ,MAAM,MAAM,KAAK;CAC/B,IAAI,YAAY;CAChB,IAAI,YAAY;AAEhB,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW,MAAM,CACjD;UACS,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW,MAAM,CACxD;AAIJ,QAAO;EAAE;EAAW;EAAW;;AAGjC,MAAaA,cAAY,MACtB,EACC,OACA,UACA,UACA,WAAW,SACX,aAAa,MACb,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;EAErB,MAAM,QAAQ,MAAM,MAAM,+CAA+C;AACzE,MAAI,QAAQ,GAAI,QAAO,MAAM;AAC7B,MAAI,SAAU,QAAO;AACrB,SAAO;IACN;EAAC;EAAU;EAAO;EAAS,CAAC;CAE/B,MAAM,EAAE,WAAW,cAAc,cAAc,kBAAkB,MAAM,EAAE,CAAC,MAAM,CAAC;CAEjF,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB,cAAc;GACd;GACD,CAAC;IACD,CAAC,eAAe,MAAM,CAAC;CAE1B,MAAM,UAAU,eACP;EACL,WAAW;EACX,mBAAmB;EACnB,GAAG;EACJ,GACD,CAAC,UAAU,YAAY,CACxB;AAED,QACE,qBAACC,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAC/C,kBAAe;EACf,GAAI;YAHN,CAKG,cACC,qBAAC,OAAD;GACE,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,YAAY,OAAO;GAC9D,OAAO,cAAc;aAFvB,CAIE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,KAAK;cAAxC,CACE,oBAAC,sBAAD;KAAsB,UAAU,YAAY;KAAa,MAAM;KAAI,MAAK;KAAS,CAAA,EACjF,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,CAClB;OACV,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,KAAK;cAAxC,EACI,YAAY,KAAK,YAAY,MAC7B,qBAACA,mBAAD;KAAS,YAAA;KAAW,WAAW,OAAO;KAAO,KAAK;eAAlD,CACG,YAAY,KAAK,qBAAC,QAAD;MAAM,WAAW,OAAO;gBAAxB,CAAmC,KAAE,UAAiB;SACvE,YAAY,KAAK,qBAAC,QAAD;MAAM,WAAW,OAAO;gBAAxB,CAAmC,KAAE,UAAiB;QAChE;QAEX,WACC,oBAACA,mBAAD;KAAS,OAAM;KAAS,WAAW,GAAG,0BAAqB,OAAO,QAAQ;KAAE,KAAK;eAC9E;KACO,CAAA,CAEJ;MACN;MAER,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAACC,WAAD;IAA0B;IAAgB;IAAS,CAAA;GAC/C,CAAA,CACE;;EAGf;AAED,YAAU,cAAc"}
+{"version":3,"file":"PatchDiff.mjs","names":["PatchDiff","PierrePatchDiff"],"sources":["../../src/CodeDiff/PatchDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { PatchDiff as PierrePatchDiff } from '@pierre/diffs/react';\nimport { useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { PatchDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countPatchChanges = (patch: string): { additions: number; deletions: number } => {\n  const lines = patch.split('\\n');\n  let additions = 0;\n  let deletions = 0;\n\n  for (const line of lines) {\n    if (line.startsWith('+') && !line.startsWith('+++')) {\n      additions++;\n    } else if (line.startsWith('-') && !line.startsWith('---')) {\n      deletions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const PatchDiff = memo<PatchDiffProps>(\n  ({\n    patch,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      // Try to extract filename from patch header\n      const match = patch.match(/^(?:-{3}|\\+{3})\\s+(?:a\\/|b\\/)?(.+?)(?:\\t|$)/m);\n      if (match?.[1]) return match[1];\n      if (language) return language;\n      return 'patch';\n    }, [fileName, patch, language]);\n\n    const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        originalNode: null,\n        patch,\n      });\n    }, [actionsRender, patch]);\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<PierrePatchDiff options={options} patch={patch} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"patch-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nPatchDiff.displayName = 'PatchDiff';\n\nexport default PatchDiff;\n"],"mappings":";;;;;;;;AAWA,wBAAwB;AAExB,MAAM,qBAAqB,UAA4D;CACrF,MAAM,QAAQ,MAAM,MAAM,KAAK;CAC/B,IAAI,YAAY;CAChB,IAAI,YAAY;AAEhB,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW,MAAM,CACjD;UACS,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW,MAAM,CACxD;AAIJ,QAAO;EAAE;EAAW;EAAW;;AAGjC,MAAaA,cAAY,MACtB,EACC,OACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;EAErB,MAAM,QAAQ,MAAM,MAAM,+CAA+C;AACzE,MAAI,QAAQ,GAAI,QAAO,MAAM;AAC7B,MAAI,SAAU,QAAO;AACrB,SAAO;IACN;EAAC;EAAU;EAAO;EAAS,CAAC;CAE/B,MAAM,EAAE,WAAW,cAAc,cAAc,kBAAkB,MAAM,EAAE,CAAC,MAAM,CAAC;AAejF,QACE,oBAAC,WAAD;EACE,SAfY,cAAc;AAC5B,OAAI,CAAC,cAAe,QAAO;AAC3B,UAAO,cAAc;IACnB,cAAc;IACd;IACD,CAAC;KACD,CAAC,eAAe,MAAM,CASL;EACL;EACX,MAAM,oBAACC,WAAD;GAAiB,SATX,cACR,mBAAmB;IAAE;IAAa;IAAY;IAAU,CAAC,EAC/D;IAAC;IAAY;IAAU;IAAY,CAOM;GAAS;GAAS,CAAA;EAC9C;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;EACJ,CAAA;EAGP;AAED,YAAU,cAAc"}

package/es/CodeDiff/style.mjs

@@ -3,21 +3,28 @@ import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/CodeDiff/style.ts
 const prefix = "lobe-code-diff";
+const compactActionsCls = `${prefix}-actions-compact`;
+const compactLangCls = `${prefix}-lang`;
 const styles = createStaticStyles(({ css, cssVar }) => {
 	return {
 		actions: css`
-      position: absolute;
-      z-index: 2;
-      inset-block-start: 8px;
-      inset-inline-end: 8px;
-
       opacity: 0;
       transition: opacity 0.2s ${cssVar.motionEaseInOut};
     `,
+		actionsCompact: cx(compactActionsCls, css`
+        position: absolute;
+        z-index: 2;
+        inset-block-start: 8px;
+        inset-inline-end: 8px;
+
+        opacity: 0;
+
+        transition: opacity 0.2s ${cssVar.motionEaseInOut};
+      `),
 		additions: css`
-      color: ${cssVar.colorSuccess};
       font-family: ${cssVar.fontFamilyCode};
       font-size: 12px;
+      color: ${cssVar.colorSuccess};
     `,
 		body: css`
       overflow: auto;
@@ -27,55 +34,66 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       font-family: ${cssVar.fontFamilyCode};
       font-size: 13px;
       line-height: 1.6;
-
-      /* Override @pierre/diffs shadow DOM CSS variables */
-      --pdiff-font-family: ${cssVar.fontFamilyCode};
-      --pdiff-font-size: 13px;
-      --pdiff-line-height: 1.6;
-      --pdiff-bg-color: transparent;
-      --pdiff-border-color: ${cssVar.colorBorderSecondary};
-      --pdiff-gutter-bg: ${cssVar.colorFillQuaternary};
-      --pdiff-gutter-color: ${cssVar.colorTextQuaternary};
-      --pdiff-added-bg: ${cssVar.colorSuccessBgHover};
-      --pdiff-added-highlight-bg: ${cssVar.colorSuccessBg};
-      --pdiff-removed-bg: ${cssVar.colorErrorBgHover};
-      --pdiff-removed-highlight-bg: ${cssVar.colorErrorBg};
-      --pdiff-info-bg: ${cssVar.colorInfoBg};
+    `,
+		bodyCollapsed: css`
+      height: 0;
+      opacity: 0;
+    `,
+		bodyRoot: css`
+      overflow: hidden;
+      transition: opacity 0.25s ${cssVar.motionEaseOut};
     `,
 		borderless: staticStylish.variantBorderlessWithoutHover,
 		deletions: css`
-      color: ${cssVar.colorError};
       font-family: ${cssVar.fontFamilyCode};
       font-size: 12px;
+      color: ${cssVar.colorError};
     `,
 		filled: cx(staticStylish.variantFilledWithoutHover, css`
         background: ${cssVar.colorFillQuaternary};
       `),
 		header: css`
+      cursor: pointer;
+
+      position: relative;
+
       display: flex;
       gap: 8px;
       align-items: center;
       justify-content: space-between;
 
-      padding: 8px 12px;
+      padding: 4px;
 
       font-family: ${cssVar.fontFamilyCode};
       font-size: 13px;
       color: ${cssVar.colorTextSecondary};
-
-      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
     `,
 		headerBorderless: css`
       padding-inline: 0;
-      border-block-end: none;
     `,
 		headerFilled: css`
       background: transparent;
     `,
 		headerOutlined: css`
-      background: ${cssVar.colorFillQuaternary};
+      & + .${prefix}-body {
+        border-block-start: 1px solid ${cssVar.colorFillQuaternary};
+      }
     `,
 		outlined: staticStylish.variantOutlinedWithoutHover,
+		lang: cx(compactLangCls, staticStylish.blur, css`
+        position: absolute;
+        z-index: 2;
+        inset-block-end: 8px;
+        inset-inline-end: 8px;
+
+        font-family: ${cssVar.fontFamilyCode};
+        color: ${cssVar.colorTextSecondary};
+
+        opacity: 0;
+        background: ${cssVar.colorFillQuaternary};
+
+        transition: opacity 0.1s;
+      `),
 		root: cx(prefix, css`
         position: relative;
 
@@ -86,8 +104,34 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 
         transition: background-color 100ms ${cssVar.motionEaseOut};
 
+        .language-title {
+          opacity: 0.5;
+          filter: grayscale(100%);
+          transition:
+            opacity,
+            grayscale 0.2s ${cssVar.motionEaseInOut};
+        }
+
+        .panel-actions {
+          opacity: 0;
+          transition: opacity 0.2s ${cssVar.motionEaseInOut};
+        }
+
         &:hover {
-          .${prefix}-actions {
+          .language-title {
+            opacity: 1;
+            filter: grayscale(0%);
+          }
+
+          .panel-actions {
+            opacity: 1;
+          }
+
+          .${compactActionsCls} {
+            opacity: 1;
+          }
+
+          .${compactLangCls} {
             opacity: 1;
           }
         }
@@ -110,12 +154,19 @@ const variants = cva(styles.root, {
 const headerVariants = cva(styles.header, {
 	defaultVariants: { variant: "filled" },
 	variants: { variant: {
-		filled: styles.headerFilled,
+		filled: cx(styles.headerFilled, styles.headerOutlined),
 		outlined: styles.headerOutlined,
 		borderless: styles.headerBorderless
 	} }
 });
+const bodyVariants = cva(styles.bodyRoot, {
+	defaultVariants: { expand: true },
+	variants: { expand: {
+		false: styles.bodyCollapsed,
+		true: null
+	} }
+});
 //#endregion
-export { headerVariants, prefix, styles, variants };
+export { bodyVariants, headerVariants, prefix, styles, variants };
 
 //# sourceMappingURL=style.mjs.map