@lobehub/editor 4.15.0 → 4.15.2

package/es/renderer/LexicalDiff.d.ts

@@ -0,0 +1,41 @@
+import { DiffAppearance } from "./diff/style.js";
+import { LexicalDiffBlockRenderContext, LexicalDiffBlockRenderer, LexicalDiffCell, LexicalDiffRow, LexicalDiffRowKind } from "./diff/types.js";
+import { LexicalRendererProps } from "./types.js";
+import { CSSProperties, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { SerializedEditorState } from "lexical";
+
+//#region src/renderer/LexicalDiff.d.ts
+interface LexicalDiffProps {
+  appearance?: DiffAppearance;
+  blockRenderers?: Record<string, LexicalDiffBlockRenderer>;
+  className?: string;
+  extraNodes?: LexicalRendererProps['extraNodes'];
+  labels?: {
+    new?: ReactNode;
+    old?: ReactNode;
+  };
+  newValue: SerializedEditorState;
+  oldValue: SerializedEditorState;
+  overrides?: LexicalRendererProps['overrides'];
+  renderBlockDiff?: LexicalDiffBlockRenderer;
+  renderContext?: LexicalRendererProps['renderContext'];
+  style?: CSSProperties;
+  variant?: LexicalRendererProps['variant'];
+}
+declare function LexicalDiff({
+  oldValue,
+  newValue,
+  variant,
+  appearance,
+  extraNodes,
+  overrides,
+  renderContext,
+  labels,
+  blockRenderers,
+  renderBlockDiff,
+  className,
+  style
+}: LexicalDiffProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LexicalDiff, LexicalDiffProps };

package/es/renderer/LexicalDiff.js

@@ -0,0 +1,96 @@
+import { LexicalRenderer } from "./LexicalRenderer.js";
+import { computeLexicalDiffRows } from "./diff/compute.js";
+import { diffStyles } from "./diff/style.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/renderer/LexicalDiff.tsx
+function wrapBlock(block) {
+	return { root: {
+		children: [block],
+		direction: "ltr",
+		format: "",
+		indent: 0,
+		type: "root",
+		version: 1
+	} };
+}
+function RowCell({ className, content }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: content
+	});
+}
+function LexicalDiff({ oldValue, newValue, variant = "default", appearance = "default", extraNodes, overrides, renderContext, labels, blockRenderers, renderBlockDiff, className, style }) {
+	const styles = diffStyles[appearance];
+	const rows = useMemo(() => computeLexicalDiffRows(oldValue, newValue), [oldValue, newValue]);
+	const renderDefaultCell = (block) => {
+		if (!block) return null;
+		return /* @__PURE__ */ jsx(LexicalRenderer, {
+			extraNodes,
+			overrides,
+			renderContext,
+			value: wrapBlock(block),
+			variant
+		});
+	};
+	const renderRow = (row, index) => {
+		const blockType = row.oldCell?.blockType && row.newCell?.blockType ? row.oldCell.blockType === row.newCell.blockType ? row.oldCell.blockType : null : row.oldCell?.blockType ?? row.newCell?.blockType ?? null;
+		const baseBlockType = row.oldCell?.baseBlockType && row.newCell?.baseBlockType ? row.oldCell.baseBlockType === row.newCell.baseBlockType ? row.oldCell.baseBlockType : null : row.oldCell?.baseBlockType ?? row.newCell?.baseBlockType ?? null;
+		const context = {
+			baseBlockType,
+			blockType,
+			newBaseBlockType: row.newCell?.baseBlockType ?? null,
+			newBlockType: row.newCell?.blockType ?? null,
+			oldBaseBlockType: row.oldCell?.baseBlockType ?? null,
+			oldBlockType: row.oldCell?.blockType ?? null,
+			renderDefaultNew: () => renderDefaultCell(row.newCell?.block ?? null),
+			renderDefaultOld: () => renderDefaultCell(row.oldCell?.block ?? null),
+			row
+		};
+		const renderers = [
+			blockType ? blockRenderers?.[blockType] : void 0,
+			baseBlockType && baseBlockType !== blockType ? blockRenderers?.[baseBlockType] : void 0,
+			renderBlockDiff
+		];
+		let rendered;
+		for (const renderer of renderers) {
+			if (!renderer) continue;
+			const next = renderer(context);
+			if (next === null) continue;
+			rendered = next;
+			break;
+		}
+		const oldContent = rendered?.old ?? context.renderDefaultOld();
+		const newContent = rendered?.new ?? context.renderDefaultNew();
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles.row,
+			children: [/* @__PURE__ */ jsx(RowCell, {
+				className: cx(styles.cell, !row.oldCell && styles.emptyCell, row.kind === "delete" && styles.deleteCell),
+				content: oldContent
+			}), /* @__PURE__ */ jsx(RowCell, {
+				className: cx(styles.cell, !row.newCell && styles.emptyCell, row.kind === "insert" && styles.insertCell),
+				content: newContent
+			})]
+		}, `row-${index}`);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, className),
+		style,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.header,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(styles.headerCell, styles.headerOld),
+				children: labels?.old ?? "Old"
+			}), /* @__PURE__ */ jsx("div", {
+				className: styles.headerCell,
+				children: labels?.new ?? "New"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.body,
+			children: rows.map(renderRow)
+		})]
+	});
+}
+//#endregion
+export { LexicalDiff };

package/es/renderer/LexicalRenderer.d.ts

@@ -0,0 +1,16 @@
+import { LexicalRendererProps } from "./types.js";
+import { ReactElement } from "react";
+
+//#region src/renderer/LexicalRenderer.d.ts
+declare function LexicalRenderer({
+  value,
+  overrides,
+  extraNodes,
+  renderContext,
+  as: Tag,
+  className,
+  style,
+  variant
+}: LexicalRendererProps): ReactElement;
+//#endregion
+export { LexicalRenderer };

package/es/renderer/LexicalRenderer.js

@@ -0,0 +1,48 @@
+import { getCSSVariables, getRendererClassName } from "./style.js";
+import { renderNode } from "./engine/render-tree.js";
+import { rendererNodes } from "./nodes/index.js";
+import { createDefaultRenderers } from "./renderers/index.js";
+import { createElement, useMemo } from "react";
+import { createHeadlessEditor } from "@lexical/headless";
+import { $getRoot } from "lexical";
+//#region src/renderer/LexicalRenderer.tsx
+function LexicalRenderer({ value, overrides, extraNodes, renderContext, as: Tag = "div", className, style, variant }) {
+	const content = useMemo(() => {
+		const nodes = extraNodes ? [...rendererNodes, ...extraNodes] : rendererNodes;
+		const registry = createDefaultRenderers();
+		const editor = createHeadlessEditor({
+			editable: false,
+			nodes,
+			onError: (error) => {
+				console.error("[LexicalRenderer]", error);
+			}
+		});
+		const state = editor.parseEditorState(value);
+		editor.setEditorState(state);
+		let result = null;
+		const headingSlugs = /* @__PURE__ */ new Map();
+		state.read(() => {
+			result = $getRoot().getChildren().map((child, i) => renderNode(child, registry, headingSlugs, overrides, `r-${i}`, {
+				...renderContext,
+				variant
+			}));
+		});
+		return result;
+	}, [
+		value,
+		overrides,
+		extraNodes,
+		renderContext,
+		variant
+	]);
+	const cssVars = getCSSVariables(variant);
+	return createElement(Tag, {
+		className: getRendererClassName(className),
+		style: {
+			...cssVars,
+			...style
+		}
+	}, createElement("div", null, content));
+}
+//#endregion
+export { LexicalRenderer };

package/es/renderer/diff/compute.js

@@ -0,0 +1,396 @@
+//#region src/renderer/diff/compute.ts
+const CHAR_DIFF_MAX_MATRIX_CELLS = 5e4;
+const DELETE_MARK_STYLE = "background-color: color-mix(in srgb, var(--ant-color-error) 18%, transparent); text-decoration: line-through;";
+const INSERT_MARK_STYLE = "background-color: color-mix(in srgb, var(--ant-color-success) 18%, transparent);";
+function getBaseNodeType(node) {
+	if (!node) return null;
+	const type = node.type;
+	return typeof type === "string" ? type : null;
+}
+function getNormalizedBlockType(node) {
+	if (!node) return null;
+	const record = node;
+	const type = getBaseNodeType(node);
+	if (!type) return null;
+	if (type === "heading") return `heading:${String(record.tag || "unknown")}`;
+	if (type === "list") return `list:${String(record.listType || "bullet")}`;
+	return type;
+}
+function createCell(block) {
+	if (!block) return null;
+	return {
+		baseBlockType: getBaseNodeType(block),
+		block,
+		blockType: getNormalizedBlockType(block)
+	};
+}
+function getChildren(node) {
+	const children = node.children;
+	return Array.isArray(children) ? children : null;
+}
+function nodesEqual(a, b) {
+	return JSON.stringify(a) === JSON.stringify(b);
+}
+function isTextNode(node) {
+	const record = node;
+	return record.type === "text" && typeof record.text === "string";
+}
+function appendStyle(baseStyle, extraStyle) {
+	const normalizedBase = typeof baseStyle === "string" ? baseStyle.trim() : "";
+	if (!normalizedBase) return extraStyle;
+	return `${normalizedBase}${normalizedBase.endsWith(";") ? "" : ";"} ${extraStyle}`;
+}
+function cloneTextNode(node, text, markKind) {
+	let { style } = node;
+	if (markKind === "delete") style = appendStyle(style, DELETE_MARK_STYLE);
+	else if (markKind === "insert") style = appendStyle(style, INSERT_MARK_STYLE);
+	return {
+		...node,
+		style,
+		text
+	};
+}
+function cloneNodeWithChildren(node, children) {
+	return {
+		...node,
+		children
+	};
+}
+function decorateSubtree(node, kind) {
+	if (isTextNode(node)) return cloneTextNode(node, node.text, kind);
+	const children = getChildren(node);
+	if (!children) return node;
+	return cloneNodeWithChildren(node, children.map((child) => decorateSubtree(child, kind)));
+}
+function reverseText(value) {
+	return Array.from(value).reverse().join("");
+}
+function mergeTextOps(ops) {
+	const merged = [];
+	for (const op of ops) {
+		if (!op.text) continue;
+		const last = merged.at(-1);
+		if (last && last.kind === op.kind) {
+			last.text += op.text;
+			continue;
+		}
+		merged.push({ ...op });
+	}
+	return merged;
+}
+function diffMiddleChars(oldChars, newChars) {
+	const m = oldChars.length;
+	const n = newChars.length;
+	if (m === 0 && n === 0) return [];
+	if (m === 0) return [{
+		kind: "insert",
+		text: newChars.join("")
+	}];
+	if (n === 0) return [{
+		kind: "delete",
+		text: oldChars.join("")
+	}];
+	if (m * n > CHAR_DIFF_MAX_MATRIX_CELLS) return [{
+		kind: "delete",
+		text: oldChars.join("")
+	}, {
+		kind: "insert",
+		text: newChars.join("")
+	}];
+	const dp = Array.from({ length: m + 1 }, () => Array.from({ length: n + 1 }).fill(0));
+	for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) if (oldChars[i - 1] === newChars[j - 1]) dp[i][j] = dp[i - 1][j - 1] + 1;
+	else dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+	const reversedOps = [];
+	let i = m;
+	let j = n;
+	while (i > 0 && j > 0) {
+		if (oldChars[i - 1] === newChars[j - 1]) {
+			const last = reversedOps.at(-1);
+			if (last && last.kind === "equal") last.text += oldChars[i - 1];
+			else reversedOps.push({
+				kind: "equal",
+				text: oldChars[i - 1]
+			});
+			i--;
+			j--;
+			continue;
+		}
+		if (dp[i - 1][j] >= dp[i][j - 1]) {
+			const last = reversedOps.at(-1);
+			if (last && last.kind === "delete") last.text += oldChars[i - 1];
+			else reversedOps.push({
+				kind: "delete",
+				text: oldChars[i - 1]
+			});
+			i--;
+		} else {
+			const last = reversedOps.at(-1);
+			if (last && last.kind === "insert") last.text += newChars[j - 1];
+			else reversedOps.push({
+				kind: "insert",
+				text: newChars[j - 1]
+			});
+			j--;
+		}
+	}
+	while (i > 0) {
+		const last = reversedOps.at(-1);
+		if (last && last.kind === "delete") last.text += oldChars[i - 1];
+		else reversedOps.push({
+			kind: "delete",
+			text: oldChars[i - 1]
+		});
+		i--;
+	}
+	while (j > 0) {
+		const last = reversedOps.at(-1);
+		if (last && last.kind === "insert") last.text += newChars[j - 1];
+		else reversedOps.push({
+			kind: "insert",
+			text: newChars[j - 1]
+		});
+		j--;
+	}
+	return mergeTextOps(reversedOps.reverse().map((op) => ({
+		kind: op.kind,
+		text: reverseText(op.text)
+	})));
+}
+function diffTextByChar(oldText, newText) {
+	const oldChars = Array.from(oldText);
+	const newChars = Array.from(newText);
+	let prefix = 0;
+	while (prefix < oldChars.length && prefix < newChars.length && oldChars[prefix] === newChars[prefix]) prefix++;
+	let oldSuffix = oldChars.length - 1;
+	let newSuffix = newChars.length - 1;
+	while (oldSuffix >= prefix && newSuffix >= prefix && oldChars[oldSuffix] === newChars[newSuffix]) {
+		oldSuffix--;
+		newSuffix--;
+	}
+	const ops = [];
+	if (prefix > 0) ops.push({
+		kind: "equal",
+		text: oldChars.slice(0, prefix).join("")
+	});
+	ops.push(...diffMiddleChars(oldChars.slice(prefix, oldSuffix + 1), newChars.slice(prefix, newSuffix + 1)));
+	if (oldSuffix < oldChars.length - 1) ops.push({
+		kind: "equal",
+		text: oldChars.slice(oldSuffix + 1).join("")
+	});
+	return mergeTextOps(ops);
+}
+function splitTextNodeByCharDiff(oldNode, newNode) {
+	const ops = diffTextByChar(oldNode.text, newNode.text);
+	const oldNodes = [];
+	const newNodes = [];
+	let changed = false;
+	for (const op of ops) {
+		if (!op.text) continue;
+		if (op.kind === "equal") {
+			oldNodes.push(cloneTextNode(oldNode, op.text));
+			newNodes.push(cloneTextNode(newNode, op.text));
+			continue;
+		}
+		changed = true;
+		if (op.kind === "delete") {
+			oldNodes.push(cloneTextNode(oldNode, op.text, "delete"));
+			continue;
+		}
+		newNodes.push(cloneTextNode(newNode, op.text, "insert"));
+	}
+	return {
+		changed,
+		newNodes: newNodes.length > 0 ? newNodes : [newNode],
+		oldNodes: oldNodes.length > 0 ? oldNodes : [oldNode]
+	};
+}
+function alignNodes(oldNodes, newNodes) {
+	const m = oldNodes.length;
+	const n = newNodes.length;
+	const dp = Array.from({ length: m + 1 }, () => Array.from({ length: n + 1 }).fill(0));
+	for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) {
+		const skip = Math.max(dp[i - 1][j], dp[i][j - 1]);
+		const oldType = getNormalizedBlockType(oldNodes[i - 1]);
+		const newType = getNormalizedBlockType(newNodes[j - 1]);
+		if (oldType && oldType === newType) {
+			const score = nodesEqual(oldNodes[i - 1], newNodes[j - 1]) ? 2 : 1;
+			dp[i][j] = Math.max(skip, dp[i - 1][j - 1] + score);
+		} else dp[i][j] = skip;
+	}
+	const ops = [];
+	let i = m;
+	let j = n;
+	while (i > 0 && j > 0) {
+		const oldType = getNormalizedBlockType(oldNodes[i - 1]);
+		const newType = getNormalizedBlockType(newNodes[j - 1]);
+		if (oldType && oldType === newType) {
+			const exact = nodesEqual(oldNodes[i - 1], newNodes[j - 1]);
+			const score = exact ? 2 : 1;
+			if (dp[i][j] === dp[i - 1][j - 1] + score) {
+				ops.push(exact ? {
+					kind: "equal",
+					node: oldNodes[i - 1]
+				} : {
+					kind: "modify",
+					newNode: newNodes[j - 1],
+					oldNode: oldNodes[i - 1]
+				});
+				i--;
+				j--;
+				continue;
+			}
+		}
+		if (dp[i - 1][j] >= dp[i][j - 1]) {
+			ops.push({
+				kind: "delete",
+				node: oldNodes[i - 1]
+			});
+			i--;
+		} else {
+			ops.push({
+				kind: "insert",
+				node: newNodes[j - 1]
+			});
+			j--;
+		}
+	}
+	while (i > 0) ops.push({
+		kind: "delete",
+		node: oldNodes[--i]
+	});
+	while (j > 0) ops.push({
+		kind: "insert",
+		node: newNodes[--j]
+	});
+	return ops.reverse();
+}
+function diffChildrenInline(oldChildren, newChildren) {
+	const ops = alignNodes(oldChildren, newChildren);
+	const nextOldChildren = [];
+	const nextNewChildren = [];
+	let changed = false;
+	for (const op of ops) switch (op.kind) {
+		case "equal":
+			nextOldChildren.push(op.node);
+			nextNewChildren.push(op.node);
+			break;
+		case "delete":
+			changed = true;
+			nextOldChildren.push(decorateSubtree(op.node, "delete"));
+			break;
+		case "insert":
+			changed = true;
+			nextNewChildren.push(decorateSubtree(op.node, "insert"));
+			break;
+		case "modify": {
+			changed = true;
+			if (isTextNode(op.oldNode) && isTextNode(op.newNode)) {
+				const textDiff = splitTextNodeByCharDiff(op.oldNode, op.newNode);
+				nextOldChildren.push(...textDiff.oldNodes);
+				nextNewChildren.push(...textDiff.newNodes);
+				break;
+			}
+			const nested = diffNodeInline(op.oldNode, op.newNode);
+			nextOldChildren.push(nested.oldNode);
+			nextNewChildren.push(nested.newNode);
+			break;
+		}
+	}
+	return {
+		changed,
+		newChildren: nextNewChildren,
+		oldChildren: nextOldChildren
+	};
+}
+function diffNodeInline(oldNode, newNode) {
+	if (nodesEqual(oldNode, newNode)) return {
+		changed: false,
+		newNode,
+		oldNode
+	};
+	const oldChildren = getChildren(oldNode);
+	const newChildren = getChildren(newNode);
+	if (!oldChildren || !newChildren) return {
+		changed: true,
+		newNode,
+		oldNode
+	};
+	const childDiff = diffChildrenInline(oldChildren, newChildren);
+	if (!childDiff.changed) return {
+		changed: false,
+		newNode,
+		oldNode
+	};
+	return {
+		changed: true,
+		newNode: cloneNodeWithChildren(newNode, childDiff.newChildren),
+		oldNode: cloneNodeWithChildren(oldNode, childDiff.oldChildren)
+	};
+}
+function getRootChildren(state) {
+	return Array.isArray(state.root.children) ? [...state.root.children] : [];
+}
+function computeLexicalDiffRows(oldState, newState) {
+	const ops = alignNodes(getRootChildren(oldState), getRootChildren(newState));
+	const rows = [];
+	let index = 0;
+	while (index < ops.length) {
+		const op = ops[index];
+		if (op.kind === "equal") {
+			rows.push({
+				kind: "equal",
+				newCell: createCell(op.node),
+				oldCell: createCell(op.node)
+			});
+			index++;
+			continue;
+		}
+		if (op.kind === "modify") {
+			const diffed = diffNodeInline(op.oldNode, op.newNode);
+			rows.push({
+				kind: "modify",
+				newCell: createCell(diffed.newNode),
+				oldCell: createCell(diffed.oldNode)
+			});
+			index++;
+			continue;
+		}
+		const deletes = [];
+		const inserts = [];
+		while (index < ops.length && (ops[index].kind === "delete" || ops[index].kind === "insert")) {
+			const current = ops[index];
+			if (current.kind === "delete") deletes.push(current.node);
+			else if (current.kind === "insert") inserts.push(current.node);
+			index++;
+		}
+		const maxLength = Math.max(deletes.length, inserts.length);
+		for (let pairIndex = 0; pairIndex < maxLength; pairIndex++) {
+			const oldBlock = deletes[pairIndex] ?? null;
+			const newBlock = inserts[pairIndex] ?? null;
+			if (oldBlock && newBlock) {
+				rows.push({
+					kind: "modify",
+					newCell: createCell(newBlock),
+					oldCell: createCell(oldBlock)
+				});
+				continue;
+			}
+			if (oldBlock) {
+				rows.push({
+					kind: "delete",
+					newCell: null,
+					oldCell: createCell(oldBlock)
+				});
+				continue;
+			}
+			rows.push({
+				kind: "insert",
+				newCell: createCell(newBlock),
+				oldCell: null
+			});
+		}
+	}
+	return rows;
+}
+//#endregion
+export { computeLexicalDiffRows };

package/es/renderer/diff/style.d.ts

@@ -0,0 +1,4 @@
+//#region src/renderer/diff/style.d.ts
+type DiffAppearance = 'borderless' | 'default';
+//#endregion
+export { DiffAppearance };

package/es/renderer/diff/style.js

@@ -0,0 +1,104 @@
+import { createStaticStyles, cx } from "antd-style";
+//#region src/renderer/diff/style.ts
+const base = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    display: flex;
+    flex-direction: column;
+    background: ${cssVar.colorBgContainer};
+  `,
+	cell: css`
+    overflow: auto;
+
+    min-width: 0;
+    min-height: 24px;
+    padding-block: 8px;
+    padding-inline: 16px;
+
+    > div {
+      width: 100%;
+      min-width: 0;
+    }
+  `,
+	deleteCell: css`
+    background: color-mix(in srgb, ${cssVar.colorError} 10%, transparent);
+  `,
+	emptyCell: css`
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	insertCell: css`
+    background: color-mix(in srgb, ${cssVar.colorSuccess} 10%, transparent);
+  `,
+	row: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  `
+}));
+const defaultOverrides = createStaticStyles(({ css, cssVar }) => ({
+	header: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	headerCell: css`
+    padding-block: 8px;
+    padding-inline: 16px;
+
+    font-size: 12px;
+    font-weight: 600;
+    color: ${cssVar.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  `,
+	headerOld: css`
+    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	root: css`
+    overflow: hidden;
+
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusSM};
+
+    font-size: 14px;
+
+    background: ${cssVar.colorBgContainer};
+  `
+}));
+const borderlessOverrides = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    & > *:nth-child(odd) {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	header: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  `,
+	headerCell: css`
+    padding-block: 8px;
+    padding-inline: 16px;
+
+    font-size: 12px;
+    font-weight: 600;
+    color: ${cssVar.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  `,
+	root: css`
+    overflow: hidden;
+    font-size: 14px;
+    background: ${cssVar.colorBgContainer};
+  `
+}));
+function merge(baseSet, overrides) {
+	const result = {};
+	const allKeys = new Set([...Object.keys(baseSet), ...Object.keys(overrides)]);
+	for (const key of allKeys) result[key] = cx(baseSet[key], overrides[key]);
+	return result;
+}
+const diffStyles = {
+	borderless: merge(base, borderlessOverrides),
+	default: merge(base, defaultOverrides)
+};
+//#endregion
+export { diffStyles };