@git-diff-view/react 0.0.16 → 0.0.17

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import { composeLen, DiffLineType, NewLineSymbol, checkDiffLineIncludeChange, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
+import { DiffLineType, NewLineSymbol, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile } from '@git-diff-view/core';
 export * from '@git-diff-view/core';
 import * as React from 'react';
 import { useRef, useEffect, createContext, useContext, useLayoutEffect, useState, useCallback, memo, Fragment, useMemo, forwardRef, useImperativeHandle } from 'react';
@@ -118,93 +118,9 @@ const useTextWidth = ({ text, font, }) => {
     return width;
 };
 
-const useDomWidth = ({ selector, enable }) => {
-    const [width, setWidth] = useState(0);
-    const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
-    useEffect(() => {
-        if (enable) {
-            const container = document.querySelector(`#diff-root${id}`);
-            const wrapper = container === null || container === void 0 ? void 0 : container.querySelector(selector);
-            if (!wrapper)
-                return;
-            const typedWrapper = wrapper;
-            const cb = () => {
-                var _a;
-                const rect = wrapper === null || wrapper === void 0 ? void 0 : wrapper.getBoundingClientRect();
-                setWidth((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
-            };
-            cb();
-            const cleanCb = () => {
-                var _a;
-                typedWrapper.__observeCallback.delete(cb);
-                if (typedWrapper.__observeCallback.size === 0) {
-                    (_a = typedWrapper.__observeInstance) === null || _a === void 0 ? void 0 : _a.disconnect();
-                    typedWrapper.removeAttribute("data-observe");
-                    delete typedWrapper.__observeCallback;
-                    delete typedWrapper.__observeInstance;
-                }
-            };
-            if (typedWrapper.__observeCallback) {
-                typedWrapper.__observeCallback.add(cb);
-                return () => cleanCb();
-            }
-            typedWrapper.__observeCallback = new Set();
-            typedWrapper.__observeCallback.add(cb);
-            const observer = new ResizeObserver(() => typedWrapper.__observeCallback.forEach((cb) => cb()));
-            typedWrapper.__observeInstance = observer;
-            observer.observe(typedWrapper);
-            typedWrapper.setAttribute("data-observe", "height");
-            return () => cleanCb();
-        }
-    }, [selector, enable, id]);
-    return width;
-};
-
-// TODO
-const useSyncHeight = ({ selector, side, enable }) => {
-    const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
-    useSafeLayout(() => {
-        if (enable) {
-            const container = document.querySelector(`#diff-root${id}`);
-            const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
-            if (elements.length === 2) {
-                const ele1 = elements[0];
-                const ele2 = elements[1];
-                const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
-                const cb = () => {
-                    ele1.style.height = "auto";
-                    ele2.style.height = "auto";
-                    const rect1 = ele1.getBoundingClientRect();
-                    const rect2 = ele2.getBoundingClientRect();
-                    if (rect1.height !== rect2.height) {
-                        const maxHeight = Math.max(rect1.height, rect2.height);
-                        ele1.style.height = maxHeight + "px";
-                        ele2.style.height = maxHeight + "px";
-                        ele1.setAttribute("data-sync-height", String(maxHeight));
-                        ele2.setAttribute("data-sync-height", String(maxHeight));
-                    }
-                    else {
-                        ele1.removeAttribute("data-sync-height");
-                        ele2.removeAttribute("data-sync-height");
-                    }
-                };
-                cb();
-                const observer = new ResizeObserver(cb);
-                observer.observe(target);
-                target.setAttribute("data-observe", "height");
-                return () => {
-                    observer.disconnect();
-                    target === null || target === void 0 ? void 0 : target.removeAttribute("data-observe");
-                };
-            }
-        }
-    }, [selector, enable, side, id]);
-};
-
 const addContentBGName = "--diff-add-content--";
 const delContentBGName = "--diff-del-content--";
+const borderColorName = "--diff-border--";
 const addLineNumberBGName = "--diff-add-lineNumber--";
 const delLineNumberBGName = "--diff-del-lineNumber--";
 const plainContentBGName = "--diff-plain-content--";
@@ -238,70 +154,6 @@ const getLineNumberBG = (isAdded, isDelete, hasDiff) => {
                 : `var(${expandContentBGName})`;
 };
 
-const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
-    const { useDiffContext } = useDiffViewContext();
-    const oldLine = diffFile.getSplitLeftLine(index);
-    const newLine = diffFile.getSplitRightLine(index);
-    const renderExtendLine = useDiffContext(React.useCallback((s) => s.renderExtendLine, []));
-    const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
-    const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
-    useSyncHeight({
-        selector: `tr[data-line="${lineNumber}-extend"]`,
-        side: SplitSide[side],
-        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
-    });
-    const width = useDomWidth({
-        selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
-    });
-    if (!renderExtendLine)
-        return null;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, currentExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
-        React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 &&
-            (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) &&
-            (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                diffFile,
-                side,
-                lineNumber: currentLineNumber,
-                data: currentExtend.data,
-                onUpdate: diffFile.notifyAll,
-            }))))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-        React.createElement("span", null, "\u2002")))));
-};
-const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
-    const { useDiffContext } = useDiffViewContext();
-    const oldLine = diffFile.getSplitLeftLine(index);
-    const newLine = diffFile.getSplitRightLine(index);
-    const { oldLineExtend, newLineExtend } = useDiffContext(React.useCallback((s) => {
-        var _a, _b, _c, _d;
-        return ({
-            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber],
-            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber],
-        });
-    }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
-    const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
-    // if the expand action not enabled, the `isHidden` property will never change
-    const enableExpand = diffFile.getExpandEnabled();
-    const currentLine = side === SplitSide.old ? oldLine : newLine;
-    const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
-    if (!currentIsShow)
-        return null;
-    return (React.createElement(_DiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
-};
-
-const ExpandDown = ({ className }) => {
-    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
-        React.createElement("path", { d: "m8.177 14.323 2.896-2.896a.25.25 0 0 0-.177-.427H8.75V7.764a.75.75 0 1 0-1.5 0V11H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0ZM2.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75ZM8.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
-};
-const ExpandUp = ({ className }) => {
-    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
-        React.createElement("path", { d: "M7.823 1.677 4.927 4.573A.25.25 0 0 0 5.104 5H7.25v3.236a.75.75 0 1 0 1.5 0V5h2.146a.25.25 0 0 0 .177-.427L8.177 1.677a.25.25 0 0 0-.354 0ZM13.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Zm-3.75.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM7.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5ZM4 11.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM1.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Z" })));
-};
-const ExpandAll = ({ className }) => {
-    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
-        React.createElement("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
-};
-
 const removeAllSelection = () => {
     const selection = window.getSelection();
     for (let i = 0; i < selection.rangeCount; i++) {
@@ -445,105 +297,6 @@ const createDiffSplitConfigStore = () => {
 const diffAsideWidthName = "--diff-aside-width--";
 const diffFontSizeName = "--diff-font-size--";
 
-const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
-    var _a;
-    const currentHunk = diffFile.getSplitHunkLine(index);
-    const expandEnabled = diffFile.getExpandEnabled();
-    useSyncHeight({
-        selector: `tr[data-line="${lineNumber}-hunk"]`,
-        side: SplitSide[SplitSide.old],
-        enable: side === SplitSide.new,
-    });
-    const enableHunkAction = side === SplitSide.old;
-    const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
-    const isExpandAll = currentHunk &&
-        currentHunk.splitInfo &&
-        currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
-    const isFirstLine = currentHunk && currentHunk.isFirst;
-    const isLastLine = currentHunk && currentHunk.isLast;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk" }, enableHunkAction ? (React.createElement(React.Fragment, null,
-        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-                width: `var(${diffAsideWidthName})`,
-                minWidth: `var(${diffAsideWidthName})`,
-                maxWidth: `var(${diffAsideWidthName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
-                diffFile.onSplitHunkExpand("down", index);
-            } },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)))) : (React.createElement("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` } },
-        React.createElement("div", { className: "min-h-[28px]" }, "\u2002")))));
-};
-const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
-    var _a;
-    const currentHunk = diffFile.getSplitHunkLine(index);
-    const expandEnabled = diffFile.getExpandEnabled();
-    useSyncHeight({
-        selector: `tr[data-line="${lineNumber}-hunk"]`,
-        side: SplitSide[side],
-        enable: true,
-    });
-    const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
-    const isExpandAll = currentHunk &&
-        currentHunk.splitInfo &&
-        currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
-    const isFirstLine = currentHunk && currentHunk.isFirst;
-    const isLastLine = currentHunk && currentHunk.isLast;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk" },
-        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-                width: `var(${diffAsideWidthName})`,
-                minWidth: `var(${diffAsideWidthName})`,
-                maxWidth: `var(${diffAsideWidthName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
-                diffFile.onSplitHunkExpand("down", index);
-            } },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
-};
-const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber, }) => {
-    const { useDiffContext } = useDiffViewContext();
-    const diffViewMode = useDiffContext(React.useCallback((s) => s.mode, []));
-    if (diffViewMode === DiffModeEnum.SplitGitHub ||
-        diffViewMode === DiffModeEnum.Split ||
-        diffViewMode === DiffModeEnum.Unified) {
-        return React.createElement(_DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
-    }
-    else {
-        return React.createElement(_DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
-    }
-};
-const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
-    const currentHunk = diffFile.getSplitHunkLine(index);
-    const currentIsShow = currentHunk &&
-        currentHunk.splitInfo &&
-        currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
-    const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
-    if (!currentIsShow && !currentIsPureHunk)
-        return null;
-    return React.createElement(_DiffSplitHunkLine, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
-};
-
 const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpenAddWidget, }) => {
     return (React.createElement("div", { className: "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
             (className ? " " + className : ""), style: {
@@ -720,11 +473,11 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const isAdded = ((_a = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Add;
     const isDelete = ((_b = currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Delete;
     const { useDiffContext } = useDiffViewContext();
-    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext(React.useCallback((s) => ({
+    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
         enableHighlight: s.enableHighlight,
         enableAddWidget: s.enableAddWidget,
         onAddWidgetClick: s.onAddWidgetClick,
-    }), []));
+    }));
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const contentBG = getContentBG(isAdded, isDelete, hasDiff);
@@ -744,7 +497,7 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
             React.createElement(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: currentLine.value, diffLine: currentLine.diff, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("span", null, "\u2002")))));
 };
-const DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const getCurrentLine = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
@@ -752,11 +505,264 @@ const DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     return React.createElement(_DiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
 };
 
+const useDomWidth = ({ selector, enable }) => {
+    const [width, setWidth] = useState(0);
+    const { useDiffContext } = useDiffViewContext();
+    const id = useDiffContext(useCallback((s) => s.id, []));
+    useEffect(() => {
+        if (enable) {
+            const container = document.querySelector(`#diff-root${id}`);
+            const wrapper = container === null || container === void 0 ? void 0 : container.querySelector(selector);
+            if (!wrapper)
+                return;
+            const typedWrapper = wrapper;
+            const cb = () => {
+                var _a;
+                const rect = wrapper === null || wrapper === void 0 ? void 0 : wrapper.getBoundingClientRect();
+                setWidth((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
+            };
+            cb();
+            const cleanCb = () => {
+                var _a;
+                typedWrapper.__observeCallback.delete(cb);
+                if (typedWrapper.__observeCallback.size === 0) {
+                    (_a = typedWrapper.__observeInstance) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    typedWrapper.removeAttribute("data-observe");
+                    delete typedWrapper.__observeCallback;
+                    delete typedWrapper.__observeInstance;
+                }
+            };
+            if (typedWrapper.__observeCallback) {
+                typedWrapper.__observeCallback.add(cb);
+                return () => cleanCb();
+            }
+            typedWrapper.__observeCallback = new Set();
+            typedWrapper.__observeCallback.add(cb);
+            const observer = new ResizeObserver(() => typedWrapper.__observeCallback.forEach((cb) => cb()));
+            typedWrapper.__observeInstance = observer;
+            observer.observe(typedWrapper);
+            typedWrapper.setAttribute("data-observe", "height");
+            return () => cleanCb();
+        }
+    }, [selector, enable, id]);
+    return width;
+};
+
+// TODO
+const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
+    const { useDiffContext } = useDiffViewContext();
+    const id = useDiffContext(useCallback((s) => s.id, []));
+    useSafeLayout(() => {
+        if (enable) {
+            const container = document.querySelector(`#diff-root${id}`);
+            const elements = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(selector)) || []);
+            const wrappers = wrapper ? Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(wrapper)) || []) : elements;
+            if (elements.length === 2 && wrappers.length === 2) {
+                const ele1 = elements[0];
+                const ele2 = elements[1];
+                const wrapper1 = wrappers[0];
+                const wrapper2 = wrappers[1];
+                const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
+                const cb = () => {
+                    ele1.style.height = "auto";
+                    ele2.style.height = "auto";
+                    const rect1 = ele1.getBoundingClientRect();
+                    const rect2 = ele2.getBoundingClientRect();
+                    if (rect1.height !== rect2.height) {
+                        const maxHeight = Math.max(rect1.height, rect2.height);
+                        wrapper1.style.height = maxHeight + "px";
+                        wrapper2.style.height = maxHeight + "px";
+                        wrapper1.setAttribute("data-sync-height", String(maxHeight));
+                        wrapper2.setAttribute("data-sync-height", String(maxHeight));
+                    }
+                    else {
+                        wrapper1.removeAttribute("data-sync-height");
+                        wrapper2.removeAttribute("data-sync-height");
+                    }
+                };
+                cb();
+                const observer = new ResizeObserver(cb);
+                observer.observe(target);
+                target.setAttribute("data-observe", "height");
+                return () => {
+                    observer.disconnect();
+                    target === null || target === void 0 ? void 0 : target.removeAttribute("data-observe");
+                };
+            }
+        }
+    }, [selector, enable, side, id, wrapper]);
+};
+
+const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
+    const { useDiffContext } = useDiffViewContext();
+    const oldLine = diffFile.getSplitLeftLine(index);
+    const newLine = diffFile.getSplitRightLine(index);
+    const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
+    const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
+    const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
+    useSyncHeight({
+        selector: `div[data-line="${lineNumber}-extend-content"]`,
+        wrapper: `tr[data-line="${lineNumber}-extend"]`,
+        side: SplitSide[side],
+        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
+    });
+    const width = useDomWidth({
+        selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
+    });
+    if (!renderExtendLine)
+        return null;
+    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, currentExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
+        React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0", style: { width } }, width > 0 &&
+            (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) &&
+            (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+                diffFile,
+                side,
+                lineNumber: currentLineNumber,
+                data: currentExtend.data,
+                onUpdate: diffFile.notifyAll,
+            }))))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+        React.createElement("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side] }, "\u2002")))));
+};
+const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+    const { useDiffContext } = useDiffViewContext();
+    const oldLine = diffFile.getSplitLeftLine(index);
+    const newLine = diffFile.getSplitRightLine(index);
+    const { oldLineExtend, newLineExtend } = useDiffContext(React.useCallback((s) => {
+        var _a, _b, _c, _d;
+        return ({
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber],
+            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber],
+        });
+    }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
+    const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
+    // if the expand action not enabled, the `isHidden` property will never change
+    const enableExpand = diffFile.getExpandEnabled();
+    const currentLine = side === SplitSide.old ? oldLine : newLine;
+    const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
+    if (!currentIsShow)
+        return null;
+    return (React.createElement(_DiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+};
+
+const ExpandDown = ({ className }) => {
+    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
+        React.createElement("path", { d: "m8.177 14.323 2.896-2.896a.25.25 0 0 0-.177-.427H8.75V7.764a.75.75 0 1 0-1.5 0V11H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0ZM2.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75ZM8.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
+};
+const ExpandUp = ({ className }) => {
+    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
+        React.createElement("path", { d: "M7.823 1.677 4.927 4.573A.25.25 0 0 0 5.104 5H7.25v3.236a.75.75 0 1 0 1.5 0V5h2.146a.25.25 0 0 0 .177-.427L8.177 1.677a.25.25 0 0 0-.354 0ZM13.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Zm-3.75.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM7.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5ZM4 11.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM1.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Z" })));
+};
+const ExpandAll = ({ className }) => {
+    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
+        React.createElement("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
+};
+
+const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
+    var _a;
+    const currentHunk = diffFile.getSplitHunkLine(index);
+    const expandEnabled = diffFile.getExpandEnabled();
+    useSyncHeight({
+        selector: `tr[data-line="${lineNumber}-hunk"]`,
+        side: SplitSide[SplitSide.old],
+        enable: side === SplitSide.new,
+    });
+    const enableHunkAction = side === SplitSide.old;
+    const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+    const isExpandAll = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+    const isFirstLine = currentHunk && currentHunk.isFirst;
+    const isLastLine = currentHunk && currentHunk.isLast;
+    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk" }, enableHunkAction ? (React.createElement(React.Fragment, null,
+        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
+                backgroundColor: `var(${hunkLineNumberBGName})`,
+                color: `var(${plainLineNumberColorName})`,
+                width: `var(${diffAsideWidthName})`,
+                minWidth: `var(${diffAsideWidthName})`,
+                maxWidth: `var(${diffAsideWidthName})`,
+            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
+                diffFile.onSplitHunkExpand("down", index);
+            } },
+            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+                React.createElement(ExpandDown, { className: "fill-current" })),
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
+        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
+            React.createElement("div", { className: "pl-[1.5em]", style: {
+                    color: `var(${hunkContentColorName})`,
+                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)))) : (React.createElement("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` } },
+        React.createElement("div", { className: "min-h-[28px]" }, "\u2002")))));
+};
+const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
+    var _a;
+    const currentHunk = diffFile.getSplitHunkLine(index);
+    const expandEnabled = diffFile.getExpandEnabled();
+    useSyncHeight({
+        selector: `tr[data-line="${lineNumber}-hunk"]`,
+        side: SplitSide[side],
+        enable: true,
+    });
+    const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+    const isExpandAll = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+    const isFirstLine = currentHunk && currentHunk.isFirst;
+    const isLastLine = currentHunk && currentHunk.isLast;
+    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk" },
+        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
+                backgroundColor: `var(${hunkLineNumberBGName})`,
+                color: `var(${plainLineNumberColorName})`,
+                width: `var(${diffAsideWidthName})`,
+                minWidth: `var(${diffAsideWidthName})`,
+                maxWidth: `var(${diffAsideWidthName})`,
+            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
+                diffFile.onSplitHunkExpand("down", index);
+            } },
+            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+                React.createElement(ExpandDown, { className: "fill-current" })),
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
+        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
+            React.createElement("div", { className: "pl-[1.5em]", style: {
+                    color: `var(${hunkContentColorName})`,
+                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
+};
+const _DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+    const { useDiffContext } = useDiffViewContext();
+    const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
+    if (diffViewMode === DiffModeEnum.SplitGitHub ||
+        diffViewMode === DiffModeEnum.Split ||
+        diffViewMode === DiffModeEnum.Unified) {
+        return React.createElement(_DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    }
+    else {
+        return React.createElement(_DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    }
+};
+const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+    const currentHunk = diffFile.getSplitHunkLine(index);
+    const currentIsShow = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
+    const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
+    if (!currentIsShow && !currentIsPureHunk)
+        return null;
+    return React.createElement(_DiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+};
+
 const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWidget, currentWidget, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const renderWidgetLine = useDiffContext(React.useCallback((s) => s.renderWidgetLine, []));
+    const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     useSyncHeight({
-        selector: `tr[data-line="${lineNumber}-widget"]`,
+        selector: `div[data-line="${lineNumber}-widget-content"]`,
+        wrapper: `tr[data-line="${lineNumber}-widget"]`,
         side: SplitSide[side],
         enable: currentWidget && typeof renderWidgetLine === "function",
     });
@@ -767,18 +773,22 @@ const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWi
     if (!renderWidgetLine)
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
-        React.createElement("div", { className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 &&
+        React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 &&
             (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
                 diffFile,
                 side,
                 lineNumber: currentLine.lineNumber,
                 onClose: () => setWidget({}),
             }))))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-        React.createElement("span", null, "\u2002")))));
+        React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side] }, "\u2002")))));
 };
 const DiffSplitWidgetLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetLineNumber, widgetSide, setWidget } = useWidget(React.useCallback((s) => ({ widgetLineNumber: s.widgetLineNumber, widgetSide: s.widgetSide, setWidget: s.setWidget }), []));
+    const { widgetLineNumber, widgetSide, setWidget } = useWidget.useShallowStableSelector((s) => ({
+        widgetLineNumber: s.widgetLineNumber,
+        widgetSide: s.widgetSide,
+        setWidget: s.setWidget,
+    }));
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
@@ -803,7 +813,7 @@ const onMouseDown$1 = (e) => {
 const DiffSplitViewTable = ({ side, diffFile }) => {
     const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
     const lines = getSplitContentLines(diffFile);
-    return (React.createElement("table", { className: className + " w-full border-collapse", "data-mode": SplitSide[side] },
+    return (React.createElement("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": SplitSide[side] },
         React.createElement("colgroup", null,
             React.createElement("col", { className: `diff-table-${SplitSide[side]}-num-col` }),
             React.createElement("col", { className: `diff-table-${SplitSide[side]}-content-col` })),
@@ -818,7 +828,7 @@ const DiffSplitViewTable = ({ side, diffFile }) => {
         React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown$1 },
             lines.map((line) => (React.createElement(Fragment, { key: line.index },
                 React.createElement(DiffSplitHunkLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
-                React.createElement(DiffSplitLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
+                React.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
                 React.createElement(DiffSplitWidgetLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
                 React.createElement(DiffSplitExtendLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile })))),
             React.createElement(DiffSplitHunkLine$1, { side: side, index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))));
@@ -828,7 +838,7 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
     const ref2 = useRef(null);
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
-    const fontSize = useDiffContext(useCallback((s) => s.fontSize, []));
+    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
     useEffect(() => {
         const left = ref1.current;
@@ -843,8 +853,8 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
         font,
     });
     const width = Math.max(40, _width + 25);
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap flex w-full basis-[50%]" },
-        React.createElement("div", { className: "old-diff-table-wrapper scrollbar-hide scrollbar-disable w-full overflow-x-auto overflow-y-hidden", ref: ref1, style: {
+    return (React.createElement("div", { className: "split-diff-view split-diff-view-normal flex w-full basis-[50%]" },
+        React.createElement("div", { className: "old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref1, style: {
                 // @ts-ignore
                 [diffAsideWidthName]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
@@ -852,8 +862,8 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
                 fontSize: `var(${diffFontSizeName})`,
             } },
             React.createElement(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile })),
-        React.createElement("div", { className: "diff-split-line w-[1.5px] bg-[rgb(222,222,222)]" }),
-        React.createElement("div", { className: "new-diff-table-wrapper scrollbar-hide scrollbar-disable w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
+        React.createElement("div", { className: "diff-split-line w-[1.5px]", style: { backgroundColor: `var(${borderColorName})` } }),
+        React.createElement("div", { className: "new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
                 // @ts-ignore
                 [diffAsideWidthName]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
@@ -864,12 +874,66 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
+const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
+    var _a, _b;
+    const oldLine = diffFile.getSplitLeftLine(index);
+    const newLine = diffFile.getSplitRightLine(index);
+    const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber);
+    const newSyntaxLine = diffFile.getNewSyntaxLine(newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber);
+    const hasDiff = !!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || !!(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
+    const hasChange = checkDiffLineIncludeChange(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || checkDiffLineIncludeChange(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
+    const oldLineIsDelete = ((_a = oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Delete;
+    const newLineIsAdded = ((_b = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Add;
+    const { useDiffContext } = useDiffViewContext();
+    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
+        enableHighlight: s.enableHighlight,
+        enableAddWidget: s.enableAddWidget,
+        onAddWidgetClick: s.onAddWidgetClick,
+    }));
+    const { useWidget } = useDiffWidgetContext();
+    const setWidget = useWidget.getReadonlyState().setWidget;
+    const hasOldLine = !!oldLine.lineNumber;
+    const hasNewLine = !!newLine.lineNumber;
+    const oldLineContentBG = getContentBG(false, oldLineIsDelete, hasDiff);
+    const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete, hasDiff);
+    const newLineContentBG = getContentBG(newLineIsAdded, false, hasDiff);
+    const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
+    return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line" },
+        hasOldLine ? (React.createElement(React.Fragment, null,
+            React.createElement("td", { className: "diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` } },
+                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                React.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
+            React.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineContentBG } },
+                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            React.createElement("span", null, "\u2002"))),
+        hasNewLine ? (React.createElement(React.Fragment, null,
+            React.createElement("td", { className: "diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.new], style: {
+                    backgroundColor: newLineNumberBG,
+                    color: `var(${plainLineNumberColorName})`,
+                    borderLeftColor: `var(${borderColorName})`,
+                } },
+                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                React.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
+            React.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.new], style: { backgroundColor: newLineContentBG } },
+                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: { backgroundColor: `var(${emptyBGName})`, borderLeftColor: `var(${borderColorName})` }, "data-side": SplitSide[SplitSide.new], colSpan: 2 },
+            React.createElement("span", null, "\u2002")))));
+};
+const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
+    const oldLine = diffFile.getSplitLeftLine(index);
+    const newLine = diffFile.getSplitRightLine(index);
+    if ((oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && (newLine === null || newLine === void 0 ? void 0 : newLine.isHidden))
+        return null;
+    return React.createElement(_DiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+};
+
 const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     // 需要显示的时候才进行方法订阅，可以大幅度提高性能
-    const renderExtendLine = useDiffContext(React.useCallback((s) => s.renderExtendLine, []));
+    const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     if (!renderExtendLine)
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
@@ -883,7 +947,7 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
                     onUpdate: diffFile.notifyAll,
                 }))))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React.createElement("span", null, "\u2002"))),
-        newLineExtend ? (React.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] border-l-[rgb(222,222,222)] p-0", colSpan: 2 },
+        newLineExtend ? (React.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})` }, colSpan: 2 },
             React.createElement("div", { className: "diff-line-extend-wrapper" }, (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
                 (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                     diffFile,
@@ -891,7 +955,7 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
                     lineNumber: newLine.lineNumber,
                     data: newLineExtend.data,
                     onUpdate: diffFile.notifyAll,
-                }))))) : (React.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] border-l-[rgb(222,222,222)] p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+                }))))) : (React.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] p-0", style: { backgroundColor: `var(${emptyBGName})`, borderLeftColor: `var(${borderColorName})` }, colSpan: 2 },
             React.createElement("span", null, "\u2002")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
@@ -922,25 +986,19 @@ const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
     const isExpandAll = currentHunk &&
         currentHunk.splitInfo &&
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
-    const currentIsShow = currentHunk &&
-        currentHunk.splitInfo &&
-        currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
-    const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    if (!currentIsShow && !currentIsPureHunk)
-        return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk" },
         React.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
                 React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
                 React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
         React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, colSpan: 3 },
             React.createElement("div", { className: "pl-[1.5em]", style: {
@@ -955,49 +1013,44 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
     const isExpandAll = currentHunk &&
         currentHunk.splitInfo &&
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
-    const currentIsShow = currentHunk &&
-        currentHunk.splitInfo &&
-        currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
-    const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    if (!currentIsShow && !currentIsPureHunk)
-        return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk" },
         React.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
                 React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
                 React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
         React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
             React.createElement("div", { className: "pl-[1.5em]", style: {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)),
-        React.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none border-l-[1px] border-l-[rgb(222,222,222)] p-[1px]", style: {
+        React.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none border-l-[1px] p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+                borderLeftColor: `var(${borderColorName})`,
+            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
                 React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
                 React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
         React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
             React.createElement("div", { className: "pl-[1.5em]", style: {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
 };
-const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+const _DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const diffViewMode = useDiffContext(React.useCallback((s) => s.mode, []));
+    const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
         diffViewMode === DiffModeEnum.Split ||
         diffViewMode === DiffModeEnum.Unified) {
@@ -1007,62 +1060,22 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
         return React.createElement(DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, lineNumber: lineNumber });
     }
 };
-
-const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
-    var _a, _b;
-    const oldLine = diffFile.getSplitLeftLine(index);
-    const newLine = diffFile.getSplitRightLine(index);
-    const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber);
-    const newSyntaxLine = diffFile.getNewSyntaxLine(newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber);
-    const hasDiff = !!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || !!(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
-    const hasChange = checkDiffLineIncludeChange(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || checkDiffLineIncludeChange(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
-    const oldLineIsDelete = ((_a = oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Delete;
-    const newLineIsAdded = ((_b = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Add;
-    const { useDiffContext } = useDiffViewContext();
-    const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext(React.useCallback((s) => ({
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }), []));
-    const { useWidget } = useDiffWidgetContext();
-    const setWidget = useWidget.getReadonlyState().setWidget;
-    const hasOldLine = !!oldLine.lineNumber;
-    const hasNewLine = !!newLine.lineNumber;
-    const oldLineContentBG = getContentBG(false, oldLineIsDelete, hasDiff);
-    const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete, hasDiff);
-    const newLineContentBG = getContentBG(newLineIsAdded, false, hasDiff);
-    const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
-    return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line" },
-        hasOldLine ? (React.createElement(React.Fragment, null,
-            React.createElement("td", { className: "diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` } },
-                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
-            React.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineContentBG } },
-                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-            React.createElement("span", null, "\u2002"))),
-        hasNewLine ? (React.createElement(React.Fragment, null,
-            React.createElement("td", { className: "diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] border-l-[rgb(222,222,222)] pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.new], style: { backgroundColor: newLineNumberBG, color: `var(${plainLineNumberColorName})` } },
-                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
-            React.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.new], style: { backgroundColor: newLineContentBG } },
-                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px] border-l-[rgb(222,222,222)]", style: { backgroundColor: `var(${emptyBGName})` }, "data-side": SplitSide[SplitSide.new], colSpan: 2 },
-            React.createElement("span", null, "\u2002")))));
-};
-const DiffSplitLine = ({ index, diffFile, lineNumber, }) => {
-    const oldLine = diffFile.getSplitLeftLine(index);
-    const newLine = diffFile.getSplitRightLine(index);
-    if ((oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && (newLine === null || newLine === void 0 ? void 0 : newLine.isHidden))
+const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+    const currentHunk = diffFile.getSplitHunkLine(index);
+    const currentIsShow = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
+    const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
+    if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(_DiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newLineWidget, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
-    const renderWidgetLine = useDiffContext(React.useCallback((s) => s.renderWidgetLine, []));
+    const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     if (!renderWidgetLine)
@@ -1076,18 +1089,21 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newL
                 onClose: () => setWidget({}),
             })))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React.createElement("span", null, "\u2002"))),
-        newLineWidget ? (React.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] border-l-[rgb(222,222,222)] p-0", colSpan: 2 },
+        newLineWidget ? (React.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})` } },
             React.createElement("div", { className: "diff-line-widget-wrapper" }, renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
                 diffFile,
                 side: SplitSide.new,
                 lineNumber: newLine.lineNumber,
                 onClose: () => setWidget({}),
-            })))) : (React.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] border-l-[rgb(222,222,222)] p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            })))) : (React.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] p-0", style: { backgroundColor: `var(${emptyBGName})`, borderLeftColor: `var(${borderColorName})` }, colSpan: 2 },
             React.createElement("span", null, "\u2002")))));
 };
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetLineNumber, widgetSide } = useWidget(React.useCallback((s) => ({ widgetLineNumber: s.widgetLineNumber, widgetSide: s.widgetSide }), []));
+    const { widgetLineNumber, widgetSide } = useWidget((s) => ({
+        widgetLineNumber: s.widgetLineNumber,
+        widgetSide: s.widgetSide,
+    }));
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
@@ -1111,7 +1127,7 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
     const useSplitConfig = useMemo(() => createDiffSplitConfigStore(), []);
-    const fontSize = useDiffContext(useCallback((s) => s.fontSize, []));
+    const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
     const onMouseDown = useCallback((e) => {
         let ele = e.target;
@@ -1140,7 +1156,7 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
     });
     const width = Math.max(40, _width + 25);
     const lines = getSplitContentLines(diffFile);
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-normal w-full" },
+    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
         React.createElement("div", { className: "diff-table-wrapper w-full", style: {
                 // @ts-ignore
                 [diffAsideWidthName]: `${Math.round(width)}px`,
@@ -1148,7 +1164,7 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
                 fontSize: `var(${diffFontSizeName})`,
             } },
             React.createElement(Style, { useSelector: useSplitConfig, id: `diff-root${diffFile.getId()}` }),
-            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse" },
+            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
                 React.createElement("colgroup", null,
                     React.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
                     React.createElement("col", { className: "diff-table-old-content-col" }),
@@ -1163,7 +1179,7 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
                 React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
                     lines.map((line) => (React.createElement(Fragment, { key: line.index },
                         React.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
+                        React.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
                         React.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
                         React.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
                     React.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
@@ -1174,7 +1190,7 @@ const DiffSplitView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
-    const enableWrap = useDiffContext(useCallback((s) => s.enableWrap, []));
+    const enableWrap = useDiffContext.useShallowStableSelector((s) => s.enableWrap);
     // performance optimization
     const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
@@ -1186,9 +1202,101 @@ const DiffSplitView = memo(({ diffFile }) => {
 });
 DiffSplitView.displayName = "DiffSplitView";
 
+const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
+    return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
+        React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+                color: `var(${plainLineNumberColorName})`,
+                backgroundColor: `var(${delLineNumberBGName})`,
+                width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+            } },
+            enableAddWidget && (React.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+            React.createElement("div", { className: "flex" },
+                React.createElement("span", { "data-line-old-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber),
+                React.createElement("span", { className: "w-[10px] shrink-0" }),
+                React.createElement("span", { className: "inline-block w-[50%]" }))),
+        React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` } },
+            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+};
+const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
+    return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
+        React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+                color: `var(${plainLineNumberColorName})`,
+                backgroundColor: `var(${addLineNumberBGName})`,
+                width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+            } },
+            enableAddWidget && (React.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+            React.createElement("div", { className: "flex" },
+                React.createElement("span", { className: "inline-block w-[50%]" }),
+                React.createElement("span", { className: "w-[10px] shrink-0" }),
+                React.createElement("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber))),
+        React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
+            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+};
+const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
+    const unifiedLine = diffFile.getUnifiedLine(index);
+    const { useDiffContext } = useDiffViewContext();
+    const { enableWrap, enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
+        enableWrap: s.enableWrap,
+        enableHighlight: s.enableHighlight,
+        enableAddWidget: s.enableAddWidget,
+        onAddWidgetClick: s.onAddWidgetClick,
+    }));
+    const { useWidget } = useDiffWidgetContext();
+    const setWidget = useWidget.getReadonlyState().setWidget;
+    const hasDiff = unifiedLine.diff;
+    const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
+    const rawLine = unifiedLine.value || "";
+    const diffLine = unifiedLine.diff;
+    const newLineNumber = unifiedLine.newLineNumber;
+    const oldLinenumber = unifiedLine.oldLineNumber;
+    const syntaxLine = newLineNumber
+        ? diffFile.getNewSyntaxLine(newLineNumber)
+        : oldLinenumber
+            ? diffFile.getOldSyntaxLine(oldLinenumber)
+            : undefined;
+    if (hasChange) {
+        if (unifiedLine.oldLineNumber) {
+            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+        }
+        else {
+            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+        }
+    }
+    else {
+        return (React.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
+            React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+                    color: `var(${plainLineNumberColorName})`,
+                    width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
+                } },
+                enableAddWidget && hasDiff && (React.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: SplitSide.new, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
+                React.createElement("div", { className: "flex opacity-[0.5]" },
+                    React.createElement("span", { "data-line-old-num": unifiedLine.oldLineNumber, className: "inline-block w-[50%]" }, unifiedLine.oldLineNumber),
+                    React.createElement("span", { className: "w-[10px] shrink-0" }),
+                    React.createElement("span", { "data-line-new-num": unifiedLine.newLineNumber, className: "inline-block w-[50%]" }, unifiedLine.newLineNumber))),
+            React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: {
+                    backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
+                } },
+                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
+    }
+});
+_DiffUnifiedLine.displayName = "_DiffUnifiedLine";
+const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, }) => {
+    const unifiedLine = diffFile.getUnifiedLine(index);
+    if (unifiedLine === null || unifiedLine === void 0 ? void 0 : unifiedLine.isHidden)
+        return null;
+    return React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+};
+
 const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const renderExtendLine = useDiffContext(useCallback((s) => s.renderExtendLine, []));
+    const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const unifiedItem = diffFile.getUnifiedLine(index);
     const width = useDomWidth({
         selector: ".unified-diff-table-wrapper",
@@ -1239,7 +1347,7 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentHunk = diffFile.getUnifiedHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
     const { useDiffContext } = useDiffViewContext();
-    const enableWrap = useDiffContext(useCallback((s) => s.enableWrap, []));
+    const enableWrap = useDiffContext.useShallowStableSelector((s) => s.enableWrap);
     const couldExpand = expandEnabled && currentHunk && currentHunk.unifiedInfo;
     const isExpandAll = currentHunk &&
         currentHunk.unifiedInfo &&
@@ -1279,104 +1387,12 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     return React.createElement(_DiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
-    return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
-        React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                color: `var(${plainLineNumberColorName})`,
-                backgroundColor: `var(${delLineNumberBGName})`,
-                width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-            } },
-            enableAddWidget && (React.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
-            React.createElement("div", { className: "flex" },
-                React.createElement("span", { "data-line-old-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber),
-                React.createElement("span", { className: "w-[10px] shrink-0" }),
-                React.createElement("span", { className: "inline-block w-[50%]" }))),
-        React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
-};
-const DiffUnifiedNewLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber, diffFile, setWidget, enableWrap, enableAddWidget, enableHighlight, onAddWidgetClick, }) => {
-    return (React.createElement("tr", { "data-line": index, "data-state": "diff", className: "diff-line group" },
-        React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                color: `var(${plainLineNumberColorName})`,
-                backgroundColor: `var(${addLineNumberBGName})`,
-                width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-            } },
-            enableAddWidget && (React.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
-            React.createElement("div", { className: "flex" },
-                React.createElement("span", { className: "inline-block w-[50%]" }),
-                React.createElement("span", { className: "w-[10px] shrink-0" }),
-                React.createElement("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber))),
-        React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
-};
-const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
-    const unifiedLine = diffFile.getUnifiedLine(index);
-    const { useDiffContext } = useDiffViewContext();
-    const { enableWrap, enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext(React.useCallback((s) => ({
-        enableWrap: s.enableWrap,
-        enableHighlight: s.enableHighlight,
-        enableAddWidget: s.enableAddWidget,
-        onAddWidgetClick: s.onAddWidgetClick,
-    }), []));
-    const { useWidget } = useDiffWidgetContext();
-    const setWidget = useWidget.getReadonlyState().setWidget;
-    const hasDiff = unifiedLine.diff;
-    const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
-    const rawLine = unifiedLine.value || "";
-    const diffLine = unifiedLine.diff;
-    const newLineNumber = unifiedLine.newLineNumber;
-    const oldLinenumber = unifiedLine.oldLineNumber;
-    const syntaxLine = newLineNumber
-        ? diffFile.getNewSyntaxLine(newLineNumber)
-        : oldLinenumber
-            ? diffFile.getOldSyntaxLine(oldLinenumber)
-            : undefined;
-    if (hasChange) {
-        if (unifiedLine.oldLineNumber) {
-            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
-        }
-        else {
-            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
-        }
-    }
-    else {
-        return (React.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
-            React.createElement("td", { className: "diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                    color: `var(${plainLineNumberColorName})`,
-                    width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                    maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                    minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                    backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
-                } },
-                enableAddWidget && hasDiff && (React.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: SplitSide.new, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
-                React.createElement("div", { className: "flex opacity-[0.5]" },
-                    React.createElement("span", { "data-line-old-num": unifiedLine.oldLineNumber, className: "inline-block w-[50%]" }, unifiedLine.oldLineNumber),
-                    React.createElement("span", { className: "w-[10px] shrink-0" }),
-                    React.createElement("span", { "data-line-new-num": unifiedLine.newLineNumber, className: "inline-block w-[50%]" }, unifiedLine.newLineNumber))),
-            React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: {
-                    backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
-                } },
-                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine }))));
-    }
-});
-_DiffUnifiedLine.displayName = "_DiffUnifiedLine";
-const DiffUnifiedLine = ({ index, diffFile, lineNumber, }) => {
-    const unifiedLine = diffFile.getUnifiedLine(index);
-    if (unifiedLine === null || unifiedLine === void 0 ? void 0 : unifiedLine.isHidden)
-        return null;
-    return React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
-};
-
 const _DiffUnifiedWidgetLine = ({ index, diffFile, oldWidget, newWidget, lineNumber, setWidget, }) => {
     const unifiedItem = diffFile.getUnifiedLine(index);
     const onClose = () => setWidget({});
     const { useDiffContext } = useDiffViewContext();
     // 需要显示的时候才进行方法订阅，可以大幅度提高性能
-    const renderWidgetLine = useDiffContext(useCallback((s) => s.renderWidgetLine, []));
+    const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
     const width = useDomWidth({
         selector: ".unified-diff-table-wrapper",
         enable: typeof renderWidgetLine === "function",
@@ -1395,7 +1411,11 @@ const _DiffUnifiedWidgetLine = ({ index, diffFile, oldWidget, newWidget, lineNum
 };
 const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
-    const { widgetSide, widgetLineNumber, setWidget } = useWidget(React.useCallback((s) => ({ widgetLineNumber: s.widgetLineNumber, widgetSide: s.widgetSide, setWidget: s.setWidget }), []));
+    const { widgetSide, widgetLineNumber, setWidget } = useWidget.useShallowStableSelector((s) => ({
+        widgetLineNumber: s.widgetLineNumber,
+        widgetSide: s.widgetSide,
+        setWidget: s.setWidget,
+    }));
     const unifiedItem = diffFile.getUnifiedLine(index);
     const oldWidget = unifiedItem.oldLineNumber && widgetSide === SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
     const newWidget = unifiedItem.newLineNumber && widgetSide === SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
@@ -1421,7 +1441,10 @@ const DiffUnifiedView = memo(({ diffFile }) => {
     // performance optimization
     const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
-    const fontSize = useDiffContext(useCallback((s) => s.fontSize, []));
+    const { fontSize, enableWrap } = useDiffContext.useShallowStableSelector((s) => ({
+        fontSize: s.fontSize,
+        enableWrap: s.enableWrap,
+    }));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
     useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
@@ -1435,14 +1458,14 @@ const DiffUnifiedView = memo(({ diffFile }) => {
     const width = Math.max(40, _width + 10);
     const lines = getUnifiedContentLine(diffFile);
     return (React.createElement(DiffWidgetContext.Provider, { value: contextValue },
-        React.createElement("div", { className: "unified-diff-view w-full" },
-            React.createElement("div", { className: "unified-diff-table-wrapper scrollbar-hide scrollbar-disable w-full overflow-x-auto overflow-y-hidden", style: {
+        React.createElement("div", { className: `unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full` },
+            React.createElement("div", { className: "unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", style: {
                     // @ts-ignore
                     [diffAsideWidthName]: `${Math.round(width)}px`,
                     fontFamily: "Menlo, Consolas, monospace",
                     fontSize: `var(${diffFontSizeName})`,
                 } },
-                React.createElement("table", { className: "unified-diff-table w-full border-collapse" },
+                React.createElement("table", { className: `unified-diff-table w-full border-collapse border-spacing-0 ${enableWrap ? "table-fixed" : ""}` },
                     React.createElement("colgroup", null,
                         React.createElement("col", { className: "unified-diff-table-num-col" }),
                         React.createElement("col", { className: "unified-diff-table-content-col" })),
@@ -1453,7 +1476,7 @@ const DiffUnifiedView = memo(({ diffFile }) => {
                     React.createElement("tbody", { className: "diff-table-body leading-[1.4]", onMouseDownCapture: onMouseDown },
                         lines.map((item) => (React.createElement(Fragment, { key: item.index },
                             React.createElement(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
-                            React.createElement(DiffUnifiedLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
+                            React.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
                             React.createElement(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
                             React.createElement(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile })))),
                         React.createElement(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })))))));
@@ -1469,6 +1492,7 @@ var SplitSide;
 const _InternalDiffView = (props) => {
     const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
+    const wrapperRef = useRef();
     // performance optimization
     const useDiffContext = useMemo(() => createDiffConfigStore(props, diffFileId), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1498,9 +1522,16 @@ const _InternalDiffView = (props) => {
         extendData,
         onAddWidgetClick,
     ]);
+    useEffect(() => {
+        const cb = diffFile.subscribe(() => {
+            var _a;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-theme", diffFile._getTheme() || "light");
+        });
+        return cb;
+    }, [diffFile]);
     const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React.createElement(DiffViewContext.Provider, { value: value },
-        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-version": `${"0.0.16"}`, "data-highlighter": diffFile._getHighlighterName() },
+        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.17", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1510,7 +1541,7 @@ const _InternalDiffView = (props) => {
 const InternalDiffView = memo(_InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
     var _a, _b;
-    const { registerHighlighter, data, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "data", "diffFile"]);
+    const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "data", "diffViewTheme", "diffFile"]);
     const diffFile = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         if (_diffFile) {
@@ -1525,16 +1556,17 @@ const DiffViewWithRef = (props, ref) => {
     }, [data, _diffFile]);
     const diffFileRef = useRef(diffFile);
     if (diffFileRef.current && diffFileRef.current !== diffFile) {
-        (_b = (_a = diffFileRef.current)._destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
     }
     useEffect(() => {
         if (!diffFile)
             return;
+        diffFile.initTheme(diffViewTheme);
         diffFile.initRaw();
         diffFile.buildSplitDiffLines();
         diffFile.buildUnifiedDiffLines();
-    }, [diffFile]);
+    }, [diffFile, diffViewTheme]);
     useEffect(() => {
         if (!diffFile)
             return;
@@ -1542,7 +1574,7 @@ const DiffViewWithRef = (props, ref) => {
             diffFile.initSyntax({ registerHighlighter });
             diffFile.notifyAll();
         }
-    }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+    }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
     useEffect(() => {
         if (_diffFile && diffFile) {
             _diffFile._addClonedInstance(diffFile);
@@ -1551,7 +1583,7 @@ const DiffViewWithRef = (props, ref) => {
             };
         }
     }, [diffFile, _diffFile]);
-    useUnmount(() => { var _a; return (_a = diffFile === null || diffFile === void 0 ? void 0 : diffFile._destroy) === null || _a === void 0 ? void 0 : _a.call(diffFile); }, [diffFile]);
+    useUnmount(() => { var _a; return (_a = diffFile === null || diffFile === void 0 ? void 0 : diffFile.clear) === null || _a === void 0 ? void 0 : _a.call(diffFile); }, [diffFile]);
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
@@ -1559,7 +1591,7 @@ const DiffViewWithRef = (props, ref) => {
 };
 const DiffView = forwardRef(DiffViewWithRef);
 DiffView.displayName = "DiffView";
-const version = "0.0.16";
+const version = "0.0.17";
 
 export { DiffModeEnum, DiffView, DiffViewContext, SplitSide, useDiffViewContext, version };
 //# sourceMappingURL=index.mjs.map