@git-diff-view/react 0.0.24 → 0.0.26

package/dist/esm/index.mjs

@@ -2,7 +2,7 @@
 import { NewLineSymbol, DiffLineType, 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';
+import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, memo, Fragment, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { flushSync } from 'react-dom';
 import { createStore, ref } from 'reactivity-store';
@@ -65,7 +65,7 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
 }
 
 function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    if (typeof state === "function" ? receiver !== state || true : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (state.set(receiver, value)), value;
 }
 
@@ -188,7 +188,7 @@ const syncScroll = (left, right) => {
 const diffFontSizeName = "--diff-font-size--";
 const diffAsideWidthName = "--diff-aside-width--";
 
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 const memoFunc = (func) => {
     const cache = {};
     return ((key) => {
@@ -214,6 +214,14 @@ const getSymbol = (symbol) => {
     }
 };
 
+const useIsMounted = () => {
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    return isMounted;
+};
+
 const useUnmount = (cb, deps) => {
     const ref = useRef(cb);
     ref.current = cb;
@@ -221,19 +229,6 @@ const useUnmount = (cb, deps) => {
     useEffect(() => ref.current, deps);
 };
 
-var DiffModeEnum;
-(function (DiffModeEnum) {
-    // github like
-    DiffModeEnum[DiffModeEnum["SplitGitHub"] = 1] = "SplitGitHub";
-    // gitlab like
-    DiffModeEnum[DiffModeEnum["SplitGitLab"] = 2] = "SplitGitLab";
-    DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
-    DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
-})(DiffModeEnum || (DiffModeEnum = {}));
-const DiffViewContext = createContext(null);
-DiffViewContext.displayName = "DiffViewContext";
-const useDiffViewContext = () => useContext(DiffViewContext);
-
 const isClient = typeof window !== "undefined";
 const useSafeLayout = isClient ? useLayoutEffect : useEffect;
 
@@ -403,11 +398,15 @@ const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighligh
         enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (React.createElement(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, enableWrap: enableWrap }))));
 };
 
+const DiffViewContext = createContext(null);
+DiffViewContext.displayName = "DiffViewContext";
+const useDiffViewContext = () => useContext(DiffViewContext);
+
 const DiffWidgetContext = createContext(null);
 DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => useContext(DiffWidgetContext);
 
-const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
+const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     var _a, _b;
     const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -448,13 +447,13 @@ const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
         return null;
-    return React.createElement(_DiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side });
+    return React.createElement(InternalDiffSplitLine$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, []));
+    const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
     useEffect(() => {
         if (enable) {
             const container = document.querySelector(`#diff-root${id}`);
@@ -490,86 +489,95 @@ const useDomWidth = ({ selector, enable }) => {
             typedWrapper.setAttribute("data-observe", "height");
             return () => cleanCb();
         }
-    }, [selector, enable, id]);
+    }, [selector, enable, id, mounted]);
     return width;
 };
 
-// TODO
 const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
     const { useDiffContext } = useDiffViewContext();
-    const id = useDiffContext(useCallback((s) => s.id, []));
+    const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
     useEffect(() => {
         if (enable) {
-            let clean = () => { };
-            // fix the dom delay update
-            const timer = setTimeout(() => {
-                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();
-                        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));
-                    };
-                    cb();
-                    const observer = new ResizeObserver(cb);
-                    observer.observe(target);
-                    target.setAttribute("data-observe", "height");
-                    clean = () => {
-                        observer.disconnect();
-                        target === null || target === void 0 ? void 0 : target.removeAttribute("data-observe");
-                    };
+            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 typedTarget = target;
+                const cb = () => {
+                    ele1.style.height = "auto";
+                    ele2.style.height = "auto";
+                    const rect1 = ele1.getBoundingClientRect();
+                    const rect2 = ele2.getBoundingClientRect();
+                    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));
+                };
+                cb();
+                const cleanCb = () => {
+                    var _a;
+                    typedTarget.__observeCallback.delete(cb);
+                    if (typedTarget.__observeCallback.size === 0) {
+                        (_a = typedTarget.__observeInstance) === null || _a === void 0 ? void 0 : _a.disconnect();
+                        typedTarget.removeAttribute("data-observe");
+                        delete typedTarget.__observeCallback;
+                        delete typedTarget.__observeInstance;
+                    }
+                };
+                if (typedTarget.__observeCallback) {
+                    typedTarget.__observeCallback.add(cb);
+                    return () => cleanCb();
                 }
-            });
-            return () => {
-                clean();
-                clearTimeout(timer);
-            };
+                typedTarget.__observeCallback = new Set();
+                typedTarget.__observeCallback.add(cb);
+                const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
+                typedTarget.__observeInstance = observer;
+                observer.observe(target);
+                target.setAttribute("data-observe", "height");
+                return () => cleanCb();
+            }
         }
-    }, [selector, enable, side, id, wrapper]);
+    }, [selector, enable, side, id, wrapper, mounted]);
 };
 
-const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend, side, lineNumber, }) => {
+const InternalDiffSplitExtendLine$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 otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
     const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
-    const hasExtend = (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== undefined && (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== null;
+    const currentSideHasExtend = (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== undefined && (currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) !== null;
+    const hasExtend = ((oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined && (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null) ||
+        ((newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined && (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null);
     const currentExtendRendered = hasExtend &&
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
             side,
             lineNumber: currentLineNumber,
-            data: currentExtend.data,
+            data: currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-extend-content"]`,
         wrapper: `tr[data-line="${lineNumber}-extend"]`,
-        side: SplitSide[side],
+        side: SplitSide[currentSideHasExtend ? side : otherSide],
         enable: hasExtend && typeof renderExtendLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: hasExtend && typeof renderExtendLine === "function",
+        enable: currentSideHasExtend && 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" }, hasExtend ? (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2 },
+    return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend" }, currentSideHasExtend ? (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 && currentExtendRendered))) : (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] })))));
 };
@@ -591,7 +599,7 @@ const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     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 }));
+    return (React.createElement(InternalDiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const ExpandDown = ({ className }) => {
@@ -607,7 +615,7 @@ const ExpandAll = ({ 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, }) => {
+const InternalDiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -631,9 +639,7 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
                 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(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) },
@@ -646,7 +652,7 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
                 } }, ((_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, }) => {
+const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -669,9 +675,7 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
                 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(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) },
@@ -683,16 +687,16 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
 };
-const _DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
+const InternalDiffSplitHunkLine$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 });
+        return React.createElement(InternalDiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
     else {
-        return React.createElement(_DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return React.createElement(InternalDiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
 };
 const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -703,10 +707,10 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     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 });
+    return React.createElement(InternalDiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
+const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -717,9 +721,11 @@ const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
     const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
     const currentLine = side === SplitSide.old ? oldLine : newLine;
-    const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+    const currentHasWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+    const hasWidget = oldLineWidget || newLineWidget;
     const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
-    const currentWidgetRendered = currentWidget &&
+    const currentWidgetRendered = currentHasWidget &&
         (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
             diffFile,
             side,
@@ -729,16 +735,16 @@ const _DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-widget-content"]`,
         wrapper: `tr[data-line="${lineNumber}-widget"]`,
-        side: SplitSide[side],
-        enable: !!currentWidget && typeof renderWidgetLine === "function",
+        side: SplitSide[currentHasWidget ? side : otherSide],
+        enable: hasWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
-        enable: !!currentWidget && typeof renderWidgetLine === "function",
+        enable: !!currentHasWidget && typeof renderWidgetLine === "function",
     });
     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 },
+    return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget" }, currentHasWidget ? (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0", style: { width } }, width > 0 && currentWidgetRendered))) : (React.createElement("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
         React.createElement("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side] })))));
 };
@@ -757,7 +763,7 @@ const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -833,7 +839,7 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
-const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
+const InternalDiffSplitLine = ({ index, diffFile, lineNumber, }) => {
     var _a, _b;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
@@ -871,12 +877,17 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
                     backgroundColor: newLineNumberBG,
                     color: `var(${plainLineNumberColorName})`,
                     borderLeftColor: `var(${borderColorName})`,
+                    borderLeftStyle: "solid",
                 } },
                 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(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})`,
+                borderLeftStyle: "solid",
+            }, "data-side": SplitSide[SplitSide.new], colSpan: 2 },
             React.createElement("span", null, "\u2002")))));
 };
 const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
@@ -884,10 +895,10 @@ const DiffSplitContentLine = ({ index, diffFile, lineNumber, }) => {
     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 });
+    return React.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
@@ -914,8 +925,12 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
         oldExtendRendered ? (React.createElement("td", { className: "diff-line-extend-old-content p-0", colSpan: 2 },
             React.createElement("div", { className: "diff-line-extend-wrapper" }, oldExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newExtendRendered && React.createElement("span", null, "\u2002"))),
-        newExtendRendered ? (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" }, newExtendRendered))) : (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 }, oldExtendRendered && React.createElement("span", null, "\u2002")))));
+        newExtendRendered ? (React.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, colSpan: 2 },
+            React.createElement("div", { className: "diff-line-extend-wrapper" }, newExtendRendered))) : (React.createElement("td", { className: "diff-line-extend-new-placeholder select-none border-l-[1px] p-0", style: {
+                backgroundColor: `var(${emptyBGName})`,
+                borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
+            }, colSpan: 2 }, oldExtendRendered && React.createElement("span", null, "\u2002")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -934,7 +949,7 @@ const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsShow = hasExtend && ((!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && !(newLine === null || newLine === void 0 ? void 0 : newLine.isHidden)) || !enableExpand);
     if (!currentIsShow)
         return null;
-    return (React.createElement(_DiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
@@ -990,10 +1005,11 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
             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] p-[1px]", style: {
+        React.createElement("td", { className: "diff-line-hunk-action relative z-[1] w-[1%] min-w-[40px] select-none border-l-[1px] p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
                 borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
             } }, 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) },
@@ -1007,7 +1023,7 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
 };
-const _DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
@@ -1027,10 +1043,10 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
@@ -1050,8 +1066,12 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
         oldWidgetRendered ? (React.createElement("td", { className: "diff-line-widget-old-content p-0", colSpan: 2 },
             React.createElement("div", { className: "diff-line-widget-wrapper" }, oldWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 }, newWidgetRendered && React.createElement("span", null, "\u2002"))),
-        newWidgetRendered ? (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" }, newWidgetRendered))) : (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 }, oldWidgetRendered && React.createElement("span", null, "\u2002")))));
+        newWidgetRendered ? (React.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" } },
+            React.createElement("div", { className: "diff-line-widget-wrapper" }, newWidgetRendered))) : (React.createElement("td", { className: "diff-line-widget-new-placeholder select-none border-l-[1px] p-0", style: {
+                backgroundColor: `var(${emptyBGName})`,
+                borderLeftColor: `var(${borderColorName})`,
+                borderLeftStyle: "solid",
+            }, colSpan: 2 }, oldWidgetRendered && React.createElement("span", null, "\u2002")))));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1068,7 +1088,7 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 const createDiffConfigStore = (props, diffFileId) => {
@@ -1078,6 +1098,8 @@ const createDiffConfigStore = (props, diffFileId) => {
         const setId = (_id) => (id.value = _id);
         const mode = ref(props.diffViewMode);
         const setMode = (_mode) => (mode.value = _mode);
+        const mounted = ref(props.isMounted);
+        const setMounted = (_mounted) => (mounted.value = _mounted);
         const enableWrap = ref(props.diffViewWrap);
         const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
         const enableAddWidget = ref(props.diffViewAddWidget);
@@ -1124,6 +1146,8 @@ const createDiffConfigStore = (props, diffFileId) => {
             setId,
             mode,
             setMode,
+            mounted,
+            setMounted,
             enableWrap,
             setEnableWrap,
             enableAddWidget,
@@ -1350,7 +1374,7 @@ const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, }) => {
     return React.createElement(_DiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
     const { useDiffContext } = useDiffViewContext();
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1395,12 +1419,12 @@ const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, }) => {
         });
     }, [unifiedItem.oldLineNumber, unifiedItem.newLineNumber]));
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
-    if (!hasExtend || !unifiedItem || unifiedItem.isHidden || !unifiedItem.diff)
+    if (!hasExtend || !unifiedItem || unifiedItem.isHidden)
         return null;
-    return (React.createElement(_DiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (React.createElement(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
-const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getUnifiedHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -1419,13 +1443,13 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
                 width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                 maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
                 minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-            } }, 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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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.onUnifiedHunkExpand("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: {
@@ -1442,10 +1466,10 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.unifiedInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(_DiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-const _DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
+const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1486,7 +1510,7 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(_DiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return React.createElement(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -1553,8 +1577,17 @@ var SplitSide;
     SplitSide[SplitSide["old"] = 1] = "old";
     SplitSide[SplitSide["new"] = 2] = "new";
 })(SplitSide || (SplitSide = {}));
-const _InternalDiffView = (props) => {
-    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, } = props;
+var DiffModeEnum;
+(function (DiffModeEnum) {
+    // github like
+    DiffModeEnum[DiffModeEnum["SplitGitHub"] = 1] = "SplitGitHub";
+    // gitlab like
+    DiffModeEnum[DiffModeEnum["SplitGitLab"] = 2] = "SplitGitLab";
+    DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
+    DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
+})(DiffModeEnum || (DiffModeEnum = {}));
+const InternalDiffView = (props) => {
+    const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, isMounted, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
     const wrapperRef = useRef();
     // performance optimization
@@ -1562,17 +1595,40 @@ const _InternalDiffView = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(() => {
-        const { id, setId, mode, setMode, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, } = useDiffContext.getReadonlyState();
-        diffFileId && diffFileId !== id && setId(diffFileId);
-        diffViewMode && diffViewMode !== mode && setMode(diffViewMode);
-        diffViewAddWidget !== enableAddWidget && setEnableAddWidget(diffViewAddWidget);
-        diffViewHighlight !== enableHighlight && setEnableHighlight(diffViewHighlight);
-        diffViewWrap !== enableWrap && setEnableWrap(diffViewWrap);
-        extendData && setExtendData(extendData);
-        diffViewFontSize && diffViewFontSize !== fontSize && setFontSize(diffViewFontSize);
-        onAddWidgetClick !== _onAddWidgetClick.current && setOnAddWidgetClick({ current: onAddWidgetClick });
-        renderExtendLine !== _renderExtendLine && setRenderExtendLine(renderExtendLine);
-        renderWidgetLine !== _renderWidgetLine && setRenderWidgetLine(renderWidgetLine);
+        const { id, setId, mode, setMode, mounted, setMounted, enableAddWidget, setEnableAddWidget, enableHighlight, setEnableHighlight, enableWrap, setEnableWrap, setExtendData, fontSize, setFontSize, onAddWidgetClick: _onAddWidgetClick, setOnAddWidgetClick, renderExtendLine: _renderExtendLine, setRenderExtendLine, renderWidgetLine: _renderWidgetLine, setRenderWidgetLine, } = useDiffContext.getReadonlyState();
+        if (diffFileId && diffFileId !== id) {
+            setId(diffFileId);
+        }
+        if (diffViewMode && diffViewMode !== mode) {
+            setMode(diffViewMode);
+        }
+        if (mounted !== isMounted) {
+            setMounted(isMounted);
+        }
+        if (diffViewAddWidget !== enableAddWidget) {
+            setEnableAddWidget(diffViewAddWidget);
+        }
+        if (diffViewHighlight !== enableHighlight) {
+            setEnableHighlight(diffViewHighlight);
+        }
+        if (diffViewWrap !== enableWrap) {
+            setEnableWrap(diffViewWrap);
+        }
+        if (extendData) {
+            setExtendData(extendData);
+        }
+        if (diffViewFontSize && diffViewFontSize !== fontSize) {
+            setFontSize(diffViewFontSize);
+        }
+        if (onAddWidgetClick !== _onAddWidgetClick.current) {
+            setOnAddWidgetClick({ current: onAddWidgetClick });
+        }
+        if (renderExtendLine !== _renderExtendLine) {
+            setRenderExtendLine(renderExtendLine);
+        }
+        if (renderWidgetLine !== _renderWidgetLine) {
+            setRenderWidgetLine(renderWidgetLine);
+        }
     }, [
         useDiffContext,
         diffViewFontSize,
@@ -1581,6 +1637,7 @@ const _InternalDiffView = (props) => {
         diffViewWrap,
         diffViewAddWidget,
         diffFileId,
+        isMounted,
         renderWidgetLine,
         renderExtendLine,
         extendData,
@@ -1596,14 +1653,14 @@ const _InternalDiffView = (props) => {
     }, [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-theme": diffFile._getTheme() || "light", "data-version": "0.0.24", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
+        React.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.0.26", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
             React.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
                 } },
-                React.createElement("div", { suppressHydrationWarning: true, id: `diff-root${diffFileId}`, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & DiffModeEnum.Split ? (React.createElement(DiffSplitView, { diffFile: diffFile })) : (React.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
+                React.createElement("div", { id: isMounted ? `diff-root${diffFileId}` : undefined, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & DiffModeEnum.Split ? (React.createElement(DiffSplitView, { diffFile: diffFile })) : (React.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
 };
-const InternalDiffView = memo(_InternalDiffView);
+const MemoedInternalDiffView = memo(InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
     var _a, _b;
     const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile } = props, restProps = __rest(props, ["registerHighlighter", "data", "diffViewTheme", "diffFile"]);
@@ -1627,6 +1684,7 @@ const DiffViewWithRef = (props, ref) => {
         (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
     }
+    const isMounted = useIsMounted();
     useEffect(() => {
         if (_diffFile && diffFile) {
             _diffFile._addClonedInstance(diffFile);
@@ -1656,12 +1714,12 @@ const DiffViewWithRef = (props, ref) => {
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
-    return (React.createElement(InternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
+    return (React.createElement(MemoedInternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, isMounted: isMounted, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
 };
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.0.24";
+const version = "0.0.26";
 
-export { DiffModeEnum, DiffView, DiffViewContext, SplitSide, useDiffViewContext, version };
+export { DiffModeEnum, DiffView, SplitSide, version };
 //# sourceMappingURL=index.mjs.map