@git-diff-view/react 0.0.14 → 0.0.16

package/dist/esm/index.mjs

@@ -2,9 +2,9 @@ import { composeLen, DiffLineType, NewLineSymbol, checkDiffLineIncludeChange, ge
 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 { createStore, ref } from 'reactivity-store';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { flushSync } from 'react-dom';
+import { createStore, ref } from 'reactivity-store';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -20,7 +20,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __rest(s, e) {
@@ -56,6 +56,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 const useUnmount = (cb, deps) => {
     const ref = useRef(cb);
     ref.current = cb;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => ref.current, deps);
 };
 
@@ -160,6 +161,7 @@ const useDomWidth = ({ selector, enable }) => {
     return width;
 };
 
+// TODO
 const useSyncHeight = ({ selector, side, enable }) => {
     const { useDiffContext } = useDiffViewContext();
     const id = useDiffContext(useCallback((s) => s.id, []));
@@ -170,6 +172,7 @@ const useSyncHeight = ({ selector, side, enable }) => {
             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";
@@ -189,7 +192,6 @@ const useSyncHeight = ({ selector, side, enable }) => {
                 };
                 cb();
                 const observer = new ResizeObserver(cb);
-                const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
                 observer.observe(target);
                 target.setAttribute("data-observe", "height");
                 return () => {
@@ -243,15 +245,14 @@ const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend,
     const renderExtendLine = useDiffContext(React.useCallback((s) => s.renderExtendLine, []));
     const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
     const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
-    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
     useSyncHeight({
         selector: `tr[data-line="${lineNumber}-extend"]`,
-        side: currentExtend ? SplitSide[side] : SplitSide[otherSide],
-        enable: side === SplitSide.new && typeof renderExtendLine === "function",
+        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 && typeof renderExtendLine === "function",
+        enable: !!(currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data) && typeof renderExtendLine === "function",
     });
     if (!renderExtendLine)
         return null;
@@ -264,7 +265,7 @@ const _DiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLineExtend,
                 lineNumber: currentLineNumber,
                 data: currentExtend.data,
                 onUpdate: diffFile.notifyAll,
-            }))))) : (React.createElement("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder p-0 select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            }))))) : (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, }) => {
@@ -343,7 +344,106 @@ const memoFunc = (func) => {
         return result;
     });
 };
-const asideWidth = "--diff-aside-width--";
+const createDiffConfigStore = (props, diffFileId) => {
+    return createStore(() => {
+        var _a, _b;
+        const id = ref(diffFileId);
+        const setId = (_id) => (id.value = _id);
+        const mode = ref(props.diffViewMode);
+        const setMode = (_mode) => (mode.value = _mode);
+        const enableWrap = ref(props.diffViewWrap);
+        const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
+        const enableAddWidget = ref(props.diffViewAddWidget);
+        const setEnableAddWidget = (_enableAddWidget) => (enableAddWidget.value = _enableAddWidget);
+        const enableHighlight = ref(props.diffViewHighlight);
+        const setEnableHighlight = (_enableHighlight) => (enableHighlight.value = _enableHighlight);
+        const fontSize = ref(props.diffViewFontSize);
+        const setFontSize = (_fontSize) => (fontSize.value = _fontSize);
+        const extendData = ref({
+            oldFile: Object.assign({}, (_a = props.extendData) === null || _a === void 0 ? void 0 : _a.oldFile),
+            newFile: Object.assign({}, (_b = props.extendData) === null || _b === void 0 ? void 0 : _b.newFile),
+        });
+        const setExtendData = (_extendData) => {
+            const existOldKeys = Object.keys(extendData.value.oldFile || {});
+            const inComingOldKeys = Object.keys(_extendData.oldFile || {});
+            for (const key of existOldKeys) {
+                if (!inComingOldKeys.includes(key)) {
+                    delete extendData.value.oldFile[key];
+                }
+            }
+            for (const key of inComingOldKeys) {
+                extendData.value.oldFile[key] = _extendData.oldFile[key];
+            }
+            const existNewKeys = Object.keys(extendData.value.newFile || {});
+            const inComingNewKeys = Object.keys(_extendData.newFile || {});
+            for (const key of existNewKeys) {
+                if (!inComingNewKeys.includes(key)) {
+                    delete extendData.value.newFile[key];
+                }
+            }
+            for (const key of inComingNewKeys) {
+                extendData.value.newFile[key] = _extendData.newFile[key];
+            }
+        };
+        const renderWidgetLine = ref(props.renderWidgetLine);
+        const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
+        const renderExtendLine = ref(props.renderExtendLine);
+        const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
+        // 避免无意义的订阅
+        const onAddWidgetClick = { current: props.onAddWidgetClick };
+        const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
+        return {
+            id,
+            setId,
+            mode,
+            setMode,
+            enableWrap,
+            setEnableWrap,
+            enableAddWidget,
+            setEnableAddWidget,
+            enableHighlight,
+            setEnableHighlight,
+            fontSize,
+            setFontSize,
+            extendData,
+            setExtendData,
+            renderWidgetLine,
+            setRenderWidgetLine,
+            renderExtendLine,
+            setRenderExtendLine,
+            onAddWidgetClick,
+            setOnAddWidgetClick,
+        };
+    });
+};
+const createDiffWidgetStore = (useDiffContextRef) => {
+    return createStore(() => {
+        const widgetSide = ref(undefined);
+        const widgetLineNumber = ref(undefined);
+        const setWidget = ({ side, lineNumber }) => {
+            var _a, _b;
+            const { renderWidgetLine } = ((_b = (_a = useDiffContextRef.current) === null || _a === void 0 ? void 0 : _a.getReadonlyState) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+            if (typeof renderWidgetLine !== "function")
+                return;
+            widgetSide.value = side;
+            widgetLineNumber.value = lineNumber;
+        };
+        return { widgetSide, widgetLineNumber, setWidget };
+    });
+};
+const createDiffSplitConfigStore = () => {
+    return createStore(() => {
+        const splitRef = ref(undefined);
+        const setSplit = (side) => {
+            flushSync(() => {
+                splitRef.value = side;
+            });
+        };
+        return { splitRef, setSplit };
+    });
+};
+const diffAsideWidthName = "--diff-aside-width--";
+const diffFontSizeName = "--diff-font-size--";
 
 const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
@@ -362,21 +462,21 @@ const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
     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 p-[1px] w-[1%] min-w-[40px] select-none", style: {
+        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(${asideWidth})`,
-                minWidth: `var(${asideWidth})`,
-                maxWidth: `var(${asideWidth})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px] relative", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
+                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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: {
@@ -390,8 +490,8 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
     const expandEnabled = diffFile.getExpandEnabled();
     useSyncHeight({
         selector: `tr[data-line="${lineNumber}-hunk"]`,
-        side: SplitSide[SplitSide.old],
-        enable: side === SplitSide.new,
+        side: SplitSide[side],
+        enable: true,
     });
     const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
     const isExpandAll = currentHunk &&
@@ -400,21 +500,21 @@ const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
     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 p-[1px] w-[1%] min-w-[40px] select-none", style: {
+        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(${asideWidth})`,
-                minWidth: `var(${asideWidth})`,
-                maxWidth: `var(${asideWidth})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px] relative", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
+                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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: {
@@ -445,14 +545,13 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
 };
 
 const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("div", { className: "diff-add-widget-wrapper" + (className ? " " + className : ""), style: {
+    return (React.createElement("div", { className: "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
+            (className ? " " + className : ""), style: {
             width: `calc(var(${diffFontSizeName}) * 1.4)`,
             height: `calc(var(${diffFontSizeName}) * 1.4)`,
         } },
-        React.createElement("button", { className: "diff-add-widget w-full h-full invisible cursor-pointer rounded-md flex items-center justify-center transition-transform origin-center group-hover:visible hover:scale-110", style: {
+        React.createElement("button", { className: "diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]", style: {
                 color: `var(${addWidgetColorName})`,
-                zIndex: 1,
-                fontSize: `1.2em`,
                 backgroundColor: `var(${addWidgetBGName})`,
             }, onClick: () => {
                 onOpenAddWidget(lineNumber, side);
@@ -460,14 +559,12 @@ const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpen
             } }, "+")));
 };
 const DiffUnifiedAddWidget = ({ lineNumber, side, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("div", { className: "diff-add-widget-wrapper absolute left-[100%] top-[1px] translate-x-[-50%]", style: {
+    return (React.createElement("div", { className: "diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible", style: {
             width: `calc(var(${diffFontSizeName}) * 1.4)`,
             height: `calc(var(${diffFontSizeName}) * 1.4)`,
         } },
-        React.createElement("button", { className: "diff-add-widget w-full h-full invisible cursor-pointer rounded-md flex items-center justify-center transition-transform origin-center group-hover:visible hover:scale-110", style: {
+        React.createElement("button", { className: "diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]", style: {
                 color: `var(${addWidgetColorName})`,
-                zIndex: 1,
-                fontSize: `1.2em`,
                 backgroundColor: `var(${addWidgetBGName})`,
             }, onClick: () => {
                 onOpenAddWidget(lineNumber, side);
@@ -506,14 +603,15 @@ const getStyleObjectFromString = memoFunc((str) => {
     return style;
 });
 const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
-    const range = diffLine === null || diffLine === void 0 ? void 0 : diffLine.range;
-    if (range) {
+    const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
+    if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
+        const range = changes.range;
         const str1 = rawLine.slice(0, range.location);
         const str2 = rawLine.slice(range.location, range.location + range.length);
         const str3 = rawLine.slice(range.location + range.length);
         const isLast = str2.includes("\n");
         const _str2 = isLast ? str2.replace("\n", "") : str2;
-        const isNewLineSymbolChanged = range.newLineSymbol;
+        const isNewLineSymbolChanged = changes.newLineSymbol;
         return (React.createElement("span", { className: "diff-line-content-raw" },
             React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
                 str1,
@@ -529,7 +627,7 @@ const DiffString = ({ rawLine, diffLine, operator, enableWrap, }) => {
                                 : ""}`
                     : str2),
                 str3),
-            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && diffLine.noTrailingNewLine && (React.createElement("span", { "data-no-newline-at-end-of-file": true, className: enableWrap ? "block text-red-500" : "inline-block align-middle text-red-500", style: {
+            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block text-red-500" : "inline-block align-middle text-red-500", style: {
                     width: `var(${diffFontSizeName})`,
                     height: `var(${diffFontSizeName})`,
                 } },
@@ -542,9 +640,10 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
     if (!syntaxLine) {
         return React.createElement(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator });
     }
-    const range = diffLine === null || diffLine === void 0 ? void 0 : diffLine.range;
-    if (range) {
-        const isNewLineSymbolChanged = range.newLineSymbol;
+    const changes = diffLine === null || diffLine === void 0 ? void 0 : diffLine.changes;
+    if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
+        const isNewLineSymbolChanged = changes.newLineSymbol;
+        const range = changes.range;
         return (React.createElement("span", { className: "diff-line-syntax-raw" },
             React.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length }, (_a = syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
                 var _a, _b, _c, _d, _e, _f;
@@ -581,7 +680,7 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, enableWrap, }) =>
                         str3));
                 }
             })),
-            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && diffLine.noTrailingNewLine && (React.createElement("span", { "data-no-newline-at-end-of-file": true, className: enableWrap ? "block text-red-500" : "inline-block align-middle text-red-500", style: {
+            isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (React.createElement("span", { "data-no-newline-at-end-of-file-symbol": true, className: enableWrap ? "block text-red-500" : "inline-block align-middle text-red-500", style: {
                     width: `var(${diffFontSizeName})`,
                     height: `var(${diffFontSizeName})`,
                 } },
@@ -601,7 +700,7 @@ const DiffContent = ({ diffLine, rawLine, syntaxLine, enableWrap, enableHighligh
             whiteSpace: enableWrap ? "pre-wrap" : "pre",
             wordBreak: enableWrap ? "break-all" : "initial",
         } },
-        React.createElement("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator inline-block w-[1.5em] ml-[-1.5em] indent-[0.2em] select-none" }, isAdded ? "+" : isDelete ? "-" : " "),
+        React.createElement("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]" }, isAdded ? "+" : isDelete ? "-" : " "),
         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 }))));
 };
 
@@ -632,14 +731,14 @@ const _DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
     const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
     const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
     return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": SplitSide[side], className: "diff-line" + (hasContent ? " group" : "") }, hasContent ? (React.createElement(React.Fragment, null,
-        React.createElement("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px]`, style: {
+        React.createElement("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
                 backgroundColor: lineNumberBG,
                 color: `var(${plainLineNumberColorName})`,
-                width: `var(${asideWidth})`,
-                minWidth: `var(${asideWidth})`,
-                maxWidth: `var(${asideWidth})`,
+                width: `var(${diffAsideWidthName})`,
+                minWidth: `var(${diffAsideWidthName})`,
+                maxWidth: `var(${diffAsideWidthName})`,
             } },
-            hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+            hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: currentLine.lineNumber, side: side, 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": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, currentLine.lineNumber)),
         React.createElement("td", { className: `diff-line-${SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG } },
             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 },
@@ -654,13 +753,12 @@ const DiffSplitLine$1 = ({ index, diffFile, lineNumber, side, }) => {
 };
 
 const _DiffSplitWidgetLine$1 = ({ diffFile, side, lineNumber, currentLine, setWidget, currentWidget, }) => {
-    const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
     const { useDiffContext } = useDiffViewContext();
     const renderWidgetLine = useDiffContext(React.useCallback((s) => s.renderWidgetLine, []));
     useSyncHeight({
         selector: `tr[data-line="${lineNumber}-widget"]`,
-        side: currentWidget ? SplitSide[side] : SplitSide[otherSide],
-        enable: side === SplitSide.new && typeof renderWidgetLine === "function",
+        side: SplitSide[side],
+        enable: currentWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
@@ -705,7 +803,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 + " border-collapse w-full", "data-mode": SplitSide[side] },
+    return (React.createElement("table", { className: className + " w-full border-collapse", "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` })),
@@ -745,19 +843,19 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
         font,
     });
     const width = Math.max(40, _width + 25);
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full flex basis-[50%]" },
-        React.createElement("div", { className: "old-diff-table-wrapper overflow-x-auto overflow-y-hidden w-full scrollbar-hide scrollbar-disable", ref: ref1, style: {
+    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: {
                 // @ts-ignore
-                [asideWidth]: `${Math.round(width)}px`,
+                [diffAsideWidthName]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
                 fontFamily: "Menlo, Consolas, monospace",
                 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 overflow-x-auto overflow-y-hidden w-full scrollbar-hide scrollbar-disable", ref: ref2, style: {
+        React.createElement("div", { className: "new-diff-table-wrapper scrollbar-hide scrollbar-disable w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
                 // @ts-ignore
-                [asideWidth]: `${Math.round(width)}px`,
+                [diffAsideWidthName]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
@@ -783,9 +881,9 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
                     lineNumber: oldLine.lineNumber,
                     data: oldLineExtend.data,
                     onUpdate: diffFile.notifyAll,
-                }))))) : (React.createElement("td", { className: "diff-line-extend-old-placeholder p-0 select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+                }))))) : (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 p-0 border-l-[1px] border-l-[rgb(222,222,222)]", colSpan: 2 },
+        newLineExtend ? (React.createElement("td", { className: "diff-line-extend-new-content border-l-[1px] border-l-[rgb(222,222,222)] p-0", 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,
@@ -793,7 +891,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 p-0 border-l-[1px] border-l-[rgb(222,222,222)] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+                }))))) : (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("span", null, "\u2002")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
@@ -833,16 +931,16 @@ const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
     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 p-[1px] w-[1%] min-w-[40px] select-none relative", style: {
+        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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", 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] 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) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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})` }, colSpan: 3 },
             React.createElement("div", { className: "pl-[1.5em]", style: {
@@ -866,31 +964,31 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
     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 p-[1px] w-[1%] min-w-[40px] select-none relative", style: {
+        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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", 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] 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) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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-action p-[1px] w-[1%] min-w-[40px] select-none relative border-l-[1px] border-l-[rgb(222,222,222)]", style: {
+        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: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", 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] 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) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] 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: {
@@ -936,19 +1034,19 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
     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 pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px]", "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%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+            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%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                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 pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px] border-l-[1px] border-l-[rgb(222,222,222)]", "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%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+            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%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
+                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")))));
 };
@@ -976,15 +1074,15 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newL
                 side: SplitSide.old,
                 lineNumber: oldLine.lineNumber,
                 onClose: () => setWidget({}),
-            })))) : (React.createElement("td", { className: "diff-line-widget-old-placeholder p-0 select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            })))) : (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 p-0 border-l-[1px] border-l-[rgb(222,222,222)]", colSpan: 2 },
+        newLineWidget ? (React.createElement("td", { className: "diff-line-widget-new-content border-l-[1px] border-l-[rgb(222,222,222)] p-0", colSpan: 2 },
             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 p-0 border-l-[1px] border-l-[rgb(222,222,222)] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            })))) : (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("span", null, "\u2002")))));
 };
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1000,6 +1098,7 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     return (React.createElement(_DiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineWidget: oldLineWidget, newLineWidget: newLineWidget }));
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 const Style = ({ useSelector, id, }) => {
     const splitRef = useSelector((s) => s.splitRef);
     return (React.createElement("style", { "data-select-style": true }, splitRef === SplitSide.old
@@ -1011,20 +1110,12 @@ const Style = ({ useSelector, id, }) => {
 const DiffSplitViewWrap = memo(({ diffFile }) => {
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
-    const splitSideInfo = useMemo(() => createStore(() => {
-        const splitRef = ref(undefined);
-        const setSplit = (side) => {
-            flushSync(() => {
-                splitRef.value = side;
-            });
-        };
-        return { splitRef, setSplit };
-    }), []);
-    const setSelectSide = splitSideInfo.getReadonlyState().setSplit;
+    const useSplitConfig = useMemo(() => createDiffSplitConfigStore(), []);
     const fontSize = useDiffContext(useCallback((s) => s.fontSize, []));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
     const onMouseDown = useCallback((e) => {
         let ele = e.target;
+        const setSelectSide = useSplitConfig.getReadonlyState().setSplit;
         // need remove all the selection
         if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
             removeAllSelection();
@@ -1040,7 +1131,8 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
                 removeAllSelection();
             }
         }
-    }, [setSelectSide]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const font = useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
     const _width = useTextWidth({
         text: splitLineLength.toString(),
@@ -1050,11 +1142,13 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
     const lines = getSplitContentLines(diffFile);
     return (React.createElement("div", { className: "split-diff-view split-diff-view-normal w-full" },
         React.createElement("div", { className: "diff-table-wrapper w-full", style: {
+                // @ts-ignore
+                [diffAsideWidthName]: `${Math.round(width)}px`,
                 fontFamily: "Menlo, Consolas, monospace",
                 fontSize: `var(${diffFontSizeName})`,
             } },
-            React.createElement(Style, { useSelector: splitSideInfo, id: `diff-root${diffFile.getId()}` }),
-            React.createElement("table", { className: "diff-table border-collapse table-fixed w-full" },
+            React.createElement(Style, { useSelector: useSplitConfig, id: `diff-root${diffFile.getId()}` }),
+            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse" },
                 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" }),
@@ -1078,20 +1172,11 @@ DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
 
 const DiffSplitView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
-    const enableWrap = useDiffContext(React.useCallback((s) => s.enableWrap, []));
+    const useDiffContextRef = useRef(useDiffContext);
+    useDiffContextRef.current = useDiffContext;
+    const enableWrap = useDiffContext(useCallback((s) => s.enableWrap, []));
     // performance optimization
-    const useWidget = useMemo(() => createStore(() => {
-        const widgetSide = ref(undefined);
-        const widgetLineNumber = ref(undefined);
-        const setWidget = ({ side, lineNumber }) => {
-            const { renderWidgetLine } = useDiffContext.getReadonlyState();
-            if (typeof renderWidgetLine !== "function")
-                return;
-            widgetSide.value = side;
-            widgetLineNumber.value = lineNumber;
-        };
-        return { widgetSide, widgetLineNumber, setWidget };
-    }), [useDiffContext]);
+    const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
     useEffect(() => {
         const { setWidget } = useWidget.getReadonlyState();
@@ -1112,7 +1197,7 @@ const _DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, ne
     if (!renderExtendLine)
         return null;
     return (React.createElement("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend" },
-        React.createElement("td", { className: "diff-line-extend-content align-top p-0", colSpan: 2 },
+        React.createElement("td", { className: "diff-line-extend-content p-0 align-top", colSpan: 2 },
             React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0", style: { width } },
                 width > 0 &&
                     (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) &&
@@ -1162,19 +1247,19 @@ const _DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
     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 sticky left-0 p-[1px] w-[1%] min-w-[100px] select-none", style: {
+        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[100px] select-none p-[1px]", style: {
                 backgroundColor: `var(${hunkLineNumberBGName})`,
                 color: `var(${plainLineNumberColorName})`,
-                width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onUnifiedHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onUnifiedHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onUnifiedHunkExpand("all", index) },
+                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) },
             React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] hover:bg-blue-300", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onUnifiedHunkExpand("down", index) },
                 React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", 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] hover:bg-blue-300", 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: {
@@ -1196,12 +1281,12 @@ const DiffUnifiedHunkLine = ({ index, diffFile, 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 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top", style: {
+        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(${asideWidth}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                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" },
@@ -1213,17 +1298,17 @@ const DiffUnifiedOldLine = ({ index, diffLine, rawLine, syntaxLine, lineNumber,
 };
 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 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top", style: {
+        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(${asideWidth}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                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: "shrink-0 w-[10px]" }),
+                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 }))));
@@ -1260,11 +1345,11 @@ const _DiffUnifiedLine = memo(({ index, diffFile, lineNumber }) => {
     }
     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 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top", style: {
+            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(${asideWidth}) + 5px) * 2)`,
-                    maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
-                    minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
+                    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 }) })),
@@ -1331,19 +1416,10 @@ const onMouseDown = (e) => {
 };
 const DiffUnifiedView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
+    const useDiffContextRef = useRef(useDiffContext);
+    useDiffContextRef.current = useDiffContext;
     // performance optimization
-    const useWidget = useMemo(() => createStore(() => {
-        const widgetSide = ref(undefined);
-        const widgetLineNumber = ref(undefined);
-        const setWidget = ({ side, lineNumber }) => {
-            const { renderWidgetLine } = useDiffContext.getReadonlyState();
-            if (typeof renderWidgetLine !== "function")
-                return;
-            widgetSide.value = side;
-            widgetLineNumber.value = lineNumber;
-        };
-        return { widgetSide, widgetLineNumber, setWidget };
-    }), [useDiffContext]);
+    const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
     const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
     const fontSize = useDiffContext(useCallback((s) => s.fontSize, []));
     useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
@@ -1354,19 +1430,19 @@ const DiffUnifiedView = memo(({ diffFile }) => {
     const unifiedLineLength = Math.max(diffFile.unifiedLineLength, diffFile.fileLineLength);
     const _width = useTextWidth({
         text: unifiedLineLength.toString(),
-        font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
+        font: useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]),
     });
-    const width = Math.max(40, _width + 25);
+    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 overflow-x-auto overflow-y-hidden w-full scrollbar-hide scrollbar-disable", style: {
+            React.createElement("div", { className: "unified-diff-table-wrapper scrollbar-hide scrollbar-disable w-full overflow-x-auto overflow-y-hidden", style: {
                     // @ts-ignore
-                    [asideWidth]: `${Math.round(width)}px`,
+                    [diffAsideWidthName]: `${Math.round(width)}px`,
                     fontFamily: "Menlo, Consolas, monospace",
                     fontSize: `var(${diffFontSizeName})`,
                 } },
-                React.createElement("table", { className: "unified-diff-table border-collapse w-full" },
+                React.createElement("table", { className: "unified-diff-table w-full border-collapse" },
                     React.createElement("colgroup", null,
                         React.createElement("col", { className: "unified-diff-table-num-col" }),
                         React.createElement("col", { className: "unified-diff-table-content-col" })),
@@ -1384,7 +1460,6 @@ const DiffUnifiedView = memo(({ diffFile }) => {
 });
 DiffUnifiedView.displayName = "DiffUnifiedView";
 
-const diffFontSizeName = "--diff-font-size--";
 _cacheMap.name = "@git-diff-view/react";
 var SplitSide;
 (function (SplitSide) {
@@ -1395,76 +1470,7 @@ const _InternalDiffView = (props) => {
     const { diffFile, className, style, diffViewMode, diffViewWrap, diffViewFontSize, diffViewHighlight, renderWidgetLine, renderExtendLine, extendData, diffViewAddWidget, onAddWidgetClick, } = props;
     const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
     // performance optimization
-    const useDiffContext = useMemo(() => createStore(() => {
-        var _a, _b;
-        const id = ref(diffFileId);
-        const setId = (_id) => (id.value = _id);
-        const mode = ref(props.diffViewMode);
-        const setMode = (_mode) => (mode.value = _mode);
-        const enableWrap = ref(props.diffViewWrap);
-        const setEnableWrap = (_enableWrap) => (enableWrap.value = _enableWrap);
-        const enableAddWidget = ref(props.diffViewAddWidget);
-        const setEnableAddWidget = (_enableAddWidget) => (enableAddWidget.value = _enableAddWidget);
-        const enableHighlight = ref(props.diffViewHighlight);
-        const setEnableHighlight = (_enableHighlight) => (enableHighlight.value = _enableHighlight);
-        const fontSize = ref(props.diffViewFontSize);
-        const setFontSize = (_fontSize) => (fontSize.value = _fontSize);
-        const extendData = ref({
-            oldFile: Object.assign({}, (_a = props.extendData) === null || _a === void 0 ? void 0 : _a.oldFile),
-            newFile: Object.assign({}, (_b = props.extendData) === null || _b === void 0 ? void 0 : _b.newFile),
-        });
-        const setExtendData = (_extendData) => {
-            const existOldKeys = Object.keys(extendData.value.oldFile || {});
-            const inComingOldKeys = Object.keys(_extendData.oldFile || {});
-            for (const key of existOldKeys) {
-                if (!inComingOldKeys.includes(key)) {
-                    delete extendData.value.oldFile[key];
-                }
-            }
-            for (const key of inComingOldKeys) {
-                extendData.value.oldFile[key] = _extendData.oldFile[key];
-            }
-            const existNewKeys = Object.keys(extendData.value.newFile || {});
-            const inComingNewKeys = Object.keys(_extendData.newFile || {});
-            for (const key of existNewKeys) {
-                if (!inComingNewKeys.includes(key)) {
-                    delete extendData.value.newFile[key];
-                }
-            }
-            for (const key of inComingNewKeys) {
-                extendData.value.newFile[key] = _extendData.newFile[key];
-            }
-        };
-        const renderWidgetLine = ref(props.renderWidgetLine);
-        const setRenderWidgetLine = (_renderWidgetLine) => (renderWidgetLine.value = _renderWidgetLine);
-        const renderExtendLine = ref(props.renderExtendLine);
-        const setRenderExtendLine = (_renderExtendLine) => (renderExtendLine.value = _renderExtendLine);
-        // 避免无意义的订阅
-        const onAddWidgetClick = { current: props.onAddWidgetClick };
-        const setOnAddWidgetClick = (_onAddWidgetClick) => (onAddWidgetClick.current = _onAddWidgetClick.current);
-        return {
-            id,
-            setId,
-            mode,
-            setMode,
-            enableWrap,
-            setEnableWrap,
-            enableAddWidget,
-            setEnableAddWidget,
-            enableHighlight,
-            setEnableHighlight,
-            fontSize,
-            setFontSize,
-            extendData,
-            setExtendData,
-            renderWidgetLine,
-            setRenderWidgetLine,
-            renderExtendLine,
-            setRenderExtendLine,
-            onAddWidgetClick,
-            setOnAddWidgetClick,
-        };
-    }), 
+    const useDiffContext = useMemo(() => createDiffConfigStore(props, diffFileId), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(() => {
@@ -1494,7 +1500,7 @@ const _InternalDiffView = (props) => {
     ]);
     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.14"}`, "data-highlighter": diffFile._getHighlighterName() },
+        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-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
@@ -1503,6 +1509,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 diffFile = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
@@ -1516,6 +1523,11 @@ const DiffViewWithRef = (props, ref) => {
         }
         return null;
     }, [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);
+        diffFileRef.current = diffFile;
+    }
     useEffect(() => {
         if (!diffFile)
             return;
@@ -1547,7 +1559,7 @@ const DiffViewWithRef = (props, ref) => {
 };
 const DiffView = forwardRef(DiffViewWithRef);
 DiffView.displayName = "DiffView";
-const version = "0.0.14";
+const version = "0.0.16";
 
-export { DiffModeEnum, DiffView, DiffViewContext, SplitSide, diffFontSizeName, useDiffViewContext, version };
+export { DiffModeEnum, DiffView, DiffViewContext, SplitSide, useDiffViewContext, version };
 //# sourceMappingURL=index.mjs.map