@git-diff-view/react 0.1.3 → 0.1.5

package/dist/esm/index.mjs

@@ -1,9 +1,10 @@
 'use client';
-import { SplitSide, DiffLineType, getSyntaxDiffTemplate, getSyntaxLineTemplate, getPlainDiffTemplate, getPlainLineTemplate, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile, highlighter } from '@git-diff-view/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SplitSide, DiffLineType, getSyntaxDiffTemplate, getSyntaxLineTemplate, getPlainDiffTemplate, getPlainLineTemplate, checkDiffLineIncludeChange, composeLen, getSplitContentLines, getUnifiedContentLine, _cacheMap, DiffFile, highlighter, multiSelectClassNames, createDiffMultiSelectManager } from '@git-diff-view/core';
 export * from '@git-diff-view/core';
 export { SplitSide } from '@git-diff-view/core';
 import * as React from 'react';
-import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, memo, Fragment, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, useRef, useLayoutEffect, createContext, useContext, memo, Fragment as Fragment$1, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { createStore, ref } from 'reactivity-store';
 
@@ -24,40 +25,6 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-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, Iterator */
-
-
 function __classPrivateFieldGet(receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
@@ -89,7 +56,7 @@ class TextMeasure {
         _TextMeasure_map.set(this, {});
     }
     measure(text, font) {
-        const currentKey = getStableKey(font, text);
+        const currentKey = getStableKey(font || {}, text);
         if (__classPrivateFieldGet(this, _TextMeasure_map, "f")[currentKey]) {
             return __classPrivateFieldGet(this, _TextMeasure_map, "f")[currentKey];
         }
@@ -205,7 +172,7 @@ const getDiffIdFromElement = (element) => {
             while (el) {
                 if (el.getAttribute && el.getAttribute("data-component") === "git-diff-view") {
                     const ele = el.querySelector(".diff-view-wrapper");
-                    return ele.getAttribute("id");
+                    return ele === null || ele === void 0 ? void 0 : ele.getAttribute("id");
                 }
                 el = el.parentElement;
             }
@@ -251,6 +218,7 @@ var DiffModeEnum;
 const useIsMounted = () => {
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setIsMounted(true);
     }, []);
     return isMounted;
@@ -258,6 +226,7 @@ const useIsMounted = () => {
 
 const useUnmount = (cb, deps) => {
     const ref = useRef(cb);
+    // eslint-disable-next-line react-hooks/refs
     ref.current = cb;
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => ref.current, deps);
@@ -268,7 +237,7 @@ const useSafeLayout = isClient ? useLayoutEffect : useEffect;
 
 const useTextWidth = ({ text, font, }) => {
     const [width, setWidth] = useState(() => {
-        const fontSize = parseInt(font.fontSize);
+        const fontSize = parseInt(font.fontSize || "13");
         let baseSize = 6;
         baseSize += fontSize > 10 ? (fontSize - 10) * 0.6 : 0;
         return baseSize * text.length;
@@ -281,42 +250,39 @@ const useTextWidth = ({ text, font, }) => {
 };
 
 const DiffSplitAddWidget = ({ side, className, lineNumber, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("div", { "data-add-widget": SplitSide[side], className: "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
+    return (jsx("div", { "data-add-widget": SplitSide[side], 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)`,
             top: `calc(var(${diffFontSizeName}) * 0.1)`,
-        } },
-        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: {
+        }, children: jsx("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})`,
                 backgroundColor: `var(${addWidgetBGName})`,
-            }, onClick: () => {
+            }, onMouseDown: (e) => {
+                e.stopPropagation();
                 onOpenAddWidget(lineNumber, side);
                 onWidgetClick === null || onWidgetClick === void 0 ? void 0 : onWidgetClick(lineNumber, side);
-            } }, "+")));
+            }, children: "+" }) }));
 };
 const DiffUnifiedAddWidget = ({ lineNumber, side, onWidgetClick, onOpenAddWidget, }) => {
-    return (React.createElement("div", { "data-add-widget": SplitSide[side], className: "diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible", style: {
+    return (jsx("div", { "data-add-widget": SplitSide[side], className: "diff-add-widget-wrapper invisible absolute left-[100%] 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)`,
             top: `calc(var(${diffFontSizeName}) * 0.1)`,
-        } },
-        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: {
+        }, children: jsx("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})`,
                 backgroundColor: `var(${addWidgetBGName})`,
-            }, onClick: () => {
+            }, onMouseDown: (e) => {
+                e.stopPropagation();
                 onOpenAddWidget(lineNumber, side);
                 onWidgetClick === null || onWidgetClick === void 0 ? void 0 : onWidgetClick(lineNumber, side);
-            } }, "+")));
+            }, children: "+" }) }));
 };
 
 const DiffNoNewLine = () => {
-    return (React.createElement("svg", { "aria-label": "No newline at end of file", role: "img", viewBox: "0 0 16 16", version: "1.1", fill: "currentColor" },
-        React.createElement("path", { d: "M4.25 7.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }),
-        React.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z" })));
+    return (jsxs("svg", { "aria-label": "No newline at end of file", role: "img", viewBox: "0 0 16 16", version: "1.1", fill: "currentColor", children: [jsx("path", { d: "M4.25 7.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }), jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z" })] }));
 };
 
-/* eslint-disable max-lines */
 const temp = {};
 const formatStringToCamelCase = (str) => {
     if (str.startsWith("--"))
@@ -348,73 +314,65 @@ const DiffString = ({ rawLine, diffLine, operator, plainLine, enableWrap, }) =>
     if (changes === null || changes === void 0 ? void 0 : changes.hasLineChange) {
         const isNewLineSymbolChanged = changes.newLineSymbol;
         if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) && typeof getPlainDiffTemplate === "function") {
-            getPlainDiffTemplate({ diffLine, rawLine, operator });
+            getPlainDiffTemplate({ diffLine: diffLine, rawLine, operator: operator });
         }
         if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.plainTemplate) {
-            return (React.createElement("span", { className: "diff-line-content-raw" },
-                React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }),
-                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})`,
-                    } },
-                    React.createElement(DiffNoNewLine, null)))));
+            return (jsxs("span", { className: "diff-line-content-raw", children: [jsx("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.plainTemplate } }), isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (jsx("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})`,
+                        }, children: jsx(DiffNoNewLine, {}) }))] }));
         }
     }
     if (plainLine && !(plainLine === null || plainLine === void 0 ? void 0 : plainLine.template)) {
+        // eslint-disable-next-line react-hooks/immutability
         plainLine.template = getPlainLineTemplate(plainLine.value);
     }
     if (plainLine === null || plainLine === void 0 ? void 0 : plainLine.template) {
-        return (React.createElement("span", { className: "diff-line-content-raw" },
-            React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } })));
+        return (jsx("span", { className: "diff-line-content-raw", children: jsx("span", { "data-template": true, dangerouslySetInnerHTML: { __html: plainLine.template } }) }));
     }
-    return React.createElement("span", { className: "diff-line-content-raw" }, rawLine);
+    return jsx("span", { className: "diff-line-content-raw", children: rawLine });
 };
 const DiffSyntax = ({ rawLine, diffFile, diffLine, operator, syntaxLine, enableWrap, }) => {
     var _a;
     if (!syntaxLine) {
-        return React.createElement(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator, enableWrap: enableWrap });
+        return jsx(DiffString, { rawLine: rawLine, diffLine: diffLine, operator: operator, enableWrap: enableWrap });
     }
     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;
         if (!(diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) && typeof getSyntaxDiffTemplate === "function") {
-            getSyntaxDiffTemplate({ diffFile, diffLine, syntaxLine, operator });
+            getSyntaxDiffTemplate({ diffFile, diffLine: diffLine, syntaxLine, operator: operator });
         }
         if (diffLine === null || diffLine === void 0 ? void 0 : diffLine.syntaxTemplate) {
-            return (React.createElement("span", { className: "diff-line-syntax-raw" },
-                React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }),
-                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})`,
-                    } },
-                    React.createElement(DiffNoNewLine, null)))));
+            return (jsxs("span", { className: "diff-line-syntax-raw", children: [jsx("span", { "data-template": true, dangerouslySetInnerHTML: { __html: diffLine.syntaxTemplate } }), isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (jsx("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})`,
+                        }, children: jsx(DiffNoNewLine, {}) }))] }));
         }
     }
     if (!syntaxLine.template) {
+        // eslint-disable-next-line react-hooks/immutability
         syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
     }
     if (syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.template) {
-        return (React.createElement("span", { className: "diff-line-syntax-raw" },
-            React.createElement("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } })));
+        return (jsx("span", { className: "diff-line-syntax-raw", children: jsx("span", { "data-template": true, dangerouslySetInnerHTML: { __html: syntaxLine.template } }) }));
     }
-    return (React.createElement("span", { className: "diff-line-syntax-raw" }, (_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
-        var _a, _b, _c;
-        return (React.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || "") }, node.value));
-    })));
+    return (jsx("span", { className: "diff-line-syntax-raw", children: (_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.map(({ node, wrapper }, index) => {
+            var _a, _b, _c;
+            return (jsx("span", { "data-start": node.startIndex, "data-end": node.endIndex, className: (_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.join(" "), style: getStyleObjectFromString(((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _c === void 0 ? void 0 : _c.style) || ""), children: node.value }, index));
+        }) }));
 };
 const DiffContent = ({ diffFile, diffLine, rawLine, plainLine, syntaxLine, enableWrap, enableHighlight, }) => {
     var _a;
     const isAdded = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Add;
     const isDelete = (diffLine === null || diffLine === void 0 ? void 0 : diffLine.type) === DiffLineType.Delete;
-    const isMaxLineLengthToIgnoreSyntax = ((_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.length) > 150;
-    return (React.createElement("div", { className: "diff-line-content-item pl-[2.0em]", 
+    const isMaxLineLengthToIgnoreSyntax = syntaxLine && ((_a = syntaxLine === null || syntaxLine === void 0 ? void 0 : syntaxLine.nodeList) === null || _a === void 0 ? void 0 : _a.length) > 150;
+    return (jsxs("div", { className: "diff-line-content-item pl-[2.0em]", 
         // data-val={rawLine}
         style: {
             whiteSpace: enableWrap ? "pre-wrap" : "pre",
             wordBreak: enableWrap ? "break-all" : "initial",
-        } },
-        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, diffFile: diffFile, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (React.createElement(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))));
+        }, children: [jsx("span", { "data-operator": isAdded ? "+" : isDelete ? "-" : undefined, className: "diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]", children: isAdded ? "+" : isDelete ? "-" : " " }), enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (jsx(DiffSyntax, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffFile: diffFile, diffLine: diffLine, syntaxLine: syntaxLine, enableWrap: enableWrap })) : (jsx(DiffString, { operator: isAdded ? "add" : isDelete ? "del" : undefined, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, enableWrap: enableWrap }))] }));
 };
 
 const DiffViewContext = createContext(null);
@@ -426,7 +384,7 @@ DiffWidgetContext.displayName = "DiffWidgetContext";
 const useDiffWidgetContext = () => useContext(DiffWidgetContext);
 
 const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
     const getCurrentPlainLine = side === SplitSide.old ? diffFile.getOldPlainLine : diffFile.getNewPlainLine;
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -443,28 +401,22 @@ const InternalDiffSplitLine$1 = ({ index, diffFile, lineNumber, side, enableAddW
     const setWidget = useWidget.getReadonlyState().setWidget;
     const contentBG = getContentBG(isAdded, isDelete, hasDiff);
     const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
-    const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
-    const plainLine = getCurrentPlainLine(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 z-[1] w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
-                backgroundColor: lineNumberBG,
-                color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
-                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%] 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 === null || currentLine === void 0 ? void 0 : currentLine.value) || "", diffLine: currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-        React.createElement("span", null, "\u2002")))));
+    const syntaxLine = getCurrentSyntaxLine((_c = currentLine.lineNumber) !== null && _c !== void 0 ? _c : -1);
+    const plainLine = getCurrentPlainLine((_d = currentLine.lineNumber) !== null && _d !== void 0 ? _d : -1);
+    return (jsx("tr", { "data-line": lineNumber, "data-state": hasDiff || !hasContent ? "diff" : "plain", "data-side": SplitSide[side], className: "diff-line" + (hasContent ? " group" : ""), children: hasContent ? (jsxs(Fragment, { children: [jsxs("td", { className: `diff-line-${SplitSide[side]}-num sticky left-0 z-[1] w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`, style: {
+                        backgroundColor: lineNumberBG,
+                        color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+                        width: `var(${diffAsideWidthName})`,
+                        minWidth: `var(${diffAsideWidthName})`,
+                        maxWidth: `var(${diffAsideWidthName})`,
+                    }, children: [hasDiff && enableAddWidget && (jsx(DiffSplitAddWidget, { index: index, lineNumber: (_e = currentLine.lineNumber) !== null && _e !== void 0 ? _e : -1, 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 }) })), jsx("span", { "data-line-num": currentLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 }, children: currentLine.lineNumber })] }), jsx("td", { className: `diff-line-${SplitSide[side]}-content pr-[10px] align-top`, style: { backgroundColor: contentBG }, children: jsx(DiffContent, { enableWrap: false, diffFile: diffFile, rawLine: (currentLine === null || currentLine === void 0 ? void 0 : currentLine.value) || "", diffLine: currentLine === null || currentLine === void 0 ? void 0 : currentLine.diff, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight }) })] })) : (jsx("td", { className: `diff-line-${SplitSide[side]}-placeholder select-none`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2, children: jsx("span", { children: "\u2002" }) })) }));
 };
 const DiffSplitContentLine$1 = ({ index, diffFile, lineNumber, side, enableAddWidget, enableHighlight, }) => {
     const getCurrentLine = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
     const currentLine = getCurrentLine(index);
     if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.isHidden)
         return null;
-    return (React.createElement(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
+    return (jsx(InternalDiffSplitLine$1, { index: index, diffFile: diffFile, lineNumber: lineNumber, side: side, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const useDomWidth = ({ selector, enable }) => {
@@ -490,10 +442,10 @@ const useDomWidth = ({ selector, enable }) => {
             };
             cb();
             const cleanCb = () => {
-                var _a;
-                typedWrapper.__observeCallback.delete(cb);
-                if (typedWrapper.__observeCallback.size === 0) {
-                    (_a = typedWrapper.__observeInstance) === null || _a === void 0 ? void 0 : _a.disconnect();
+                var _a, _b, _c;
+                (_a = typedWrapper === null || typedWrapper === void 0 ? void 0 : typedWrapper.__observeCallback) === null || _a === void 0 ? void 0 : _a.delete(cb);
+                if (((_b = typedWrapper === null || typedWrapper === void 0 ? void 0 : typedWrapper.__observeCallback) === null || _b === void 0 ? void 0 : _b.size) === 0) {
+                    (_c = typedWrapper.__observeInstance) === null || _c === void 0 ? void 0 : _c.disconnect();
                     typedWrapper.removeAttribute("data-observe");
                     delete typedWrapper.__observeCallback;
                     delete typedWrapper.__observeInstance;
@@ -505,7 +457,7 @@ const useDomWidth = ({ selector, enable }) => {
             }
             typedWrapper.__observeCallback = new Set();
             typedWrapper.__observeCallback.add(cb);
-            const observer = new ResizeObserver(() => typedWrapper.__observeCallback.forEach((cb) => cb()));
+            const observer = new ResizeObserver(() => { var _a; return (_a = typedWrapper === null || typedWrapper === void 0 ? void 0 : typedWrapper.__observeCallback) === null || _a === void 0 ? void 0 : _a.forEach((cb) => cb()); });
             typedWrapper.__observeInstance = observer;
             observer.observe(typedWrapper);
             typedWrapper.setAttribute("data-observe", "height");
@@ -548,10 +500,10 @@ const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
                 };
                 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();
+                    var _a, _b, _c;
+                    (_a = typedTarget === null || typedTarget === void 0 ? void 0 : typedTarget.__observeCallback) === null || _a === void 0 ? void 0 : _a.delete(cb);
+                    if (((_b = typedTarget === null || typedTarget === void 0 ? void 0 : typedTarget.__observeCallback) === null || _b === void 0 ? void 0 : _b.size) === 0) {
+                        (_c = typedTarget.__observeInstance) === null || _c === void 0 ? void 0 : _c.disconnect();
                         typedTarget.removeAttribute("data-observe");
                         delete typedTarget.__observeCallback;
                         delete typedTarget.__observeInstance;
@@ -563,7 +515,7 @@ const useSyncHeight = ({ selector, wrapper, side, enable, }) => {
                 }
                 typedTarget.__observeCallback = new Set();
                 typedTarget.__observeCallback.add(cb);
-                const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
+                const observer = new ResizeObserver(() => { var _a; return (_a = typedTarget === null || typedTarget === void 0 ? void 0 : typedTarget.__observeCallback) === null || _a === void 0 ? void 0 : _a.forEach((cb) => cb()); });
                 typedTarget.__observeInstance = observer;
                 observer.observe(target);
                 target.setAttribute("data-observe", "height");
@@ -588,7 +540,7 @@ const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLine
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
             side,
-            lineNumber: currentLineNumber,
+            lineNumber: currentLineNumber !== null && currentLineNumber !== void 0 ? currentLineNumber : -1,
             data: currentExtend === null || currentExtend === void 0 ? void 0 : currentExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
@@ -604,19 +556,17 @@ const InternalDiffSplitExtendLine$1 = ({ index, diffFile, oldLineExtend, newLine
     });
     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" }, 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 z-[1]", 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] })))));
+    return (jsx("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", "data-side": SplitSide[side], className: "diff-line diff-line-extend", children: currentSideHasExtend ? (jsx("td", { className: `diff-line-extend-${SplitSide[side]}-content p-0`, colSpan: 2, children: jsx("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side], className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width }, children: width > 0 && currentExtendRendered }) })) : (jsx("td", { className: `diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2, children: jsx("div", { "data-line": `${lineNumber}-extend-content`, "data-side": SplitSide[side] }) })) }));
 };
 const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const { oldLineExtend, newLineExtend } = useDiffContext(React.useCallback((s) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         return ({
-            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber],
-            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber],
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[(_c = oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber) !== null && _c !== void 0 ? _c : -1],
+            newLineExtend: (_e = (_d = s.extendData) === null || _d === void 0 ? void 0 : _d.newFile) === null || _e === void 0 ? void 0 : _e[(_f = newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber) !== null && _f !== void 0 ? _f : -1],
         });
     }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
@@ -626,20 +576,17 @@ const DiffSplitExtendLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
     if (!currentIsShow)
         return null;
-    return (React.createElement(InternalDiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (jsx(InternalDiffSplitExtendLine$1, { side: side, index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const ExpandDown = ({ className }) => {
-    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
-        React.createElement("path", { d: "m8.177 14.323 2.896-2.896a.25.25 0 0 0-.177-.427H8.75V7.764a.75.75 0 1 0-1.5 0V11H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0ZM2.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75ZM8.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
+    return (jsx("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className, children: jsx("path", { d: "m8.177 14.323 2.896-2.896a.25.25 0 0 0-.177-.427H8.75V7.764a.75.75 0 1 0-1.5 0V11H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0ZM2.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75ZM8.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" }) }));
 };
 const ExpandUp = ({ className }) => {
-    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
-        React.createElement("path", { d: "M7.823 1.677 4.927 4.573A.25.25 0 0 0 5.104 5H7.25v3.236a.75.75 0 1 0 1.5 0V5h2.146a.25.25 0 0 0 .177-.427L8.177 1.677a.25.25 0 0 0-.354 0ZM13.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Zm-3.75.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM7.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5ZM4 11.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM1.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Z" })));
+    return (jsx("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className, children: jsx("path", { d: "M7.823 1.677 4.927 4.573A.25.25 0 0 0 5.104 5H7.25v3.236a.75.75 0 1 0 1.5 0V5h2.146a.25.25 0 0 0 .177-.427L8.177 1.677a.25.25 0 0 0-.354 0ZM13.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Zm-3.75.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM7.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5ZM4 11.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM1.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Z" }) }));
 };
 const ExpandAll = ({ className }) => {
-    return (React.createElement("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className },
-        React.createElement("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" })));
+    return (jsx("svg", { "aria-hidden": "true", height: "16", viewBox: "0 0 16 16", version: "1.1", width: "16", className: className, children: jsx("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 InternalDiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
@@ -658,26 +605,15 @@ const InternalDiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, })
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk" }, enableHunkAction ? (React.createElement(React.Fragment, null,
-        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-                width: `var(${diffAsideWidthName})`,
-                minWidth: `var(${diffAsideWidthName})`,
-                maxWidth: `var(${diffAsideWidthName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)))) : (React.createElement("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` } },
-        React.createElement("div", { className: "min-h-[28px]" }, "\u2002")))));
+    return (jsx("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk", children: enableHunkAction ? (jsxs(Fragment, { children: [jsx("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
+                        backgroundColor: `var(${hunkLineNumberBGName})`,
+                        color: `var(${plainLineNumberColorName})`,
+                        width: `var(${diffAsideWidthName})`,
+                        minWidth: `var(${diffAsideWidthName})`,
+                        maxWidth: `var(${diffAsideWidthName})`,
+                    }, children: couldExpand ? (isFirstLine ? (jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })) : isLastLine ? (jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) })) : isExpandAll ? (jsx("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), children: jsx(ExpandAll, { className: "fill-current" }) })) : (jsxs(Fragment, { children: [jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) }), jsx("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index), children: jsx(ExpandUp, { className: "fill-current" }) })] }))) : (jsx("div", { className: "min-h-[28px]", children: "\u2002" })) }), jsx("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, children: jsx("div", { className: "pl-[1.5em]", style: {
+                            color: `var(${hunkContentColorName})`,
+                        }, children: ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text }) })] })) : (jsx("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` }, children: jsx("div", { className: "min-h-[28px]", children: "\u2002" }) })) }));
 };
 const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
@@ -694,25 +630,15 @@ const InternalDiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, })
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk" },
-        React.createElement("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-                width: `var(${diffAsideWidthName})`,
-                minWidth: `var(${diffAsideWidthName})`,
-                maxWidth: `var(${diffAsideWidthName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
+    return (jsxs("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": SplitSide[side], className: "diff-line diff-line-hunk", children: [jsx("td", { className: "diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]", style: {
+                    backgroundColor: `var(${hunkLineNumberBGName})`,
+                    color: `var(${plainLineNumberColorName})`,
+                    width: `var(${diffAsideWidthName})`,
+                    minWidth: `var(${diffAsideWidthName})`,
+                    maxWidth: `var(${diffAsideWidthName})`,
+                }, children: couldExpand ? (isFirstLine ? (jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })) : isLastLine ? (jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) })) : isExpandAll ? (jsx("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), children: jsx(ExpandAll, { className: "fill-current" }) })) : (jsxs(Fragment, { children: [jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) }), jsx("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index), children: jsx(ExpandUp, { className: "fill-current" }) })] }))) : (jsx("div", { className: "min-h-[28px]", children: "\u2002" })) }), jsx("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, children: jsx("div", { className: "pl-[1.5em]", style: {
+                        color: `var(${hunkContentColorName})`,
+                    }, children: ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text }) })] }));
 };
 const InternalDiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -720,10 +646,10 @@ const InternalDiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) =>
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
         diffViewMode === DiffModeEnum.Split ||
         diffViewMode === DiffModeEnum.Unified) {
-        return React.createElement(InternalDiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return jsx(InternalDiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
     else {
-        return React.createElement(InternalDiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+        return jsx(InternalDiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
     }
 };
 const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
@@ -734,10 +660,11 @@ const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(InternalDiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    return jsx(InternalDiffSplitHunkLine$1, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
 };
 
 const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
+    var _a;
     const { useWidget } = useDiffWidgetContext();
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
@@ -756,14 +683,14 @@ const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) =
         (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
             diffFile,
             side,
-            lineNumber: currentLine.lineNumber,
+            lineNumber: (_a = currentLine.lineNumber) !== null && _a !== void 0 ? _a : -1,
             onClose: () => setWidget({}),
         }));
     useSyncHeight({
         selector: `div[data-line="${lineNumber}-widget-content"]`,
         wrapper: `tr[data-line="${lineNumber}-widget"]`,
         side: SplitSide[currentHasWidget ? side : otherSide],
-        enable: hasWidget && typeof renderWidgetLine === "function",
+        enable: !!hasWidget && typeof renderWidgetLine === "function",
     });
     const width = useDomWidth({
         selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
@@ -771,9 +698,7 @@ const InternalDiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) =
     });
     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" }, 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 z-[1]", 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] })))));
+    return (jsx("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", "data-side": SplitSide[side], className: "diff-line diff-line-widget", children: currentHasWidget ? (jsx("td", { className: `diff-line-widget-${SplitSide[side]}-content p-0`, colSpan: 2, children: jsx("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side], className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width }, children: width > 0 && currentWidgetRendered }) })) : (jsx("td", { className: `diff-line-widget-${SplitSide[side]}-placeholder p-0`, style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2, children: jsx("div", { "data-line": `${lineNumber}-widget-content`, "data-side": SplitSide[side] }) })) }));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
@@ -790,38 +715,19 @@ const DiffSplitWidgetLine$1 = ({ index, side, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(InternalDiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
+    return jsx(InternalDiffSplitWidgetLine$1, { index: index, side: side, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 const DiffSplitViewTable = ({ side, diffFile, enableAddWidget, enableHighlight, onMouseDown, }) => {
     const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
     const lines = getSplitContentLines(diffFile);
-    return (React.createElement("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": SplitSide[side] },
-        React.createElement("colgroup", null,
-            React.createElement("col", { className: `diff-table-${SplitSide[side]}-num-col` }),
-            React.createElement("col", { className: `diff-table-${SplitSide[side]}-content-col` })),
-        React.createElement("thead", { className: "hidden" },
-            React.createElement("tr", null,
-                React.createElement("th", { scope: "col" },
-                    SplitSide[side],
-                    " line number"),
-                React.createElement("th", { scope: "col" },
-                    SplitSide[side],
-                    " line content"))),
-        React.createElement("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown },
-            lines.map((line) => (React.createElement(Fragment, { key: line.index },
-                React.createElement(DiffSplitHunkLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
-                React.createElement(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
-                React.createElement(DiffSplitWidgetLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }),
-                React.createElement(DiffSplitExtendLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile })))),
-            React.createElement(DiffSplitHunkLine$1, { side: side, index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))));
+    return (jsxs("table", { className: className + " w-full border-collapse border-spacing-0", "data-mode": SplitSide[side], children: [jsxs("colgroup", { children: [jsx("col", { className: `diff-table-${SplitSide[side]}-num-col` }), jsx("col", { className: `diff-table-${SplitSide[side]}-content-col` })] }), jsx("thead", { className: "hidden", children: jsxs("tr", { children: [jsxs("th", { scope: "col", children: [SplitSide[side], " line number"] }), jsxs("th", { scope: "col", children: [SplitSide[side], " line content"] })] }) }), jsxs("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown, children: [lines.map((line) => (jsxs(Fragment$1, { children: [jsx(DiffSplitHunkLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }), jsx(DiffSplitContentLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }), jsx(DiffSplitWidgetLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile }), jsx(DiffSplitExtendLine$1, { index: line.index, side: side, lineNumber: line.lineNumber, diffFile: diffFile })] }, line.index))), jsx(DiffSplitHunkLine$1, { side: side, index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile })] })] }));
 };
 const DiffSplitViewNormal = memo(({ diffFile }) => {
     const ref1 = useRef(null);
     const ref2 = useRef(null);
-    const ref = useRef();
-    const tempRef = useRef();
+    const ref = useRef(null);
+    const tempRef = useRef(undefined);
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
     const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
@@ -891,40 +797,34 @@ const DiffSplitViewNormal = memo(({ diffFile }) => {
             ele = ele.parentElement;
         }
     };
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-normal flex w-full basis-[50%]" },
-        React.createElement("style", { "data-select-style": true, ref: ref }),
-        React.createElement("div", { className: "old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref1, style: {
-                // @ts-ignore
-                [diffAsideWidthName]: `${Math.round(width)}px`,
-                overscrollBehaviorX: "none",
-                fontFamily: "Menlo, Consolas, monospace",
-                fontSize: `var(${diffFontSizeName})`,
-            } },
-            React.createElement(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown })),
-        React.createElement("div", { className: "diff-split-line w-[1.5px]", style: { backgroundColor: `var(${borderColorName})` } }),
-        React.createElement("div", { className: "new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
-                // @ts-ignore
-                [diffAsideWidthName]: `${Math.round(width)}px`,
-                overscrollBehaviorX: "none",
-                fontFamily: "Menlo, Consolas, monospace",
-                fontSize: `var(${diffFontSizeName})`,
-            } },
-            React.createElement(DiffSplitViewTable, { side: SplitSide.new, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight, onMouseDown: onMouseDown }))));
+    return (jsxs("div", { className: "split-diff-view split-diff-view-normal flex w-full basis-[50%]", children: [jsx("style", { "data-select-style": true, ref: ref }), jsx("div", { className: "old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref1, style: {
+                    // @ts-ignore
+                    [diffAsideWidthName]: `${Math.round(width)}px`,
+                    overscrollBehaviorX: "none",
+                    fontFamily: "Menlo, Consolas, monospace",
+                    fontSize: `var(${diffFontSizeName})`,
+                }, children: jsx(DiffSplitViewTable, { side: SplitSide.old, diffFile: diffFile, enableAddWidget: !!enableAddWidget, enableHighlight: !!enableHighlight, onMouseDown: onMouseDown }) }), jsx("div", { className: "diff-split-line w-[1.5px]", style: { backgroundColor: `var(${borderColorName})` } }), jsx("div", { className: "new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", ref: ref2, style: {
+                    // @ts-ignore
+                    [diffAsideWidthName]: `${Math.round(width)}px`,
+                    overscrollBehaviorX: "none",
+                    fontFamily: "Menlo, Consolas, monospace",
+                    fontSize: `var(${diffFontSizeName})`,
+                }, children: jsx(DiffSplitViewTable, { side: SplitSide.new, diffFile: diffFile, enableAddWidget: !!enableAddWidget, enableHighlight: !!enableHighlight, onMouseDown: onMouseDown }) })] }));
 });
 DiffSplitViewNormal.displayName = "DiffSplitViewNormal";
 
 const InternalDiffSplitLine = ({ index, diffFile, lineNumber, enableAddWidget, enableHighlight, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
-    const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber);
-    const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
-    const newSyntaxLine = diffFile.getNewSyntaxLine(newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber);
-    const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
+    const oldSyntaxLine = diffFile.getOldSyntaxLine((_a = oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber) !== null && _a !== void 0 ? _a : -1);
+    const oldPlainLine = diffFile.getOldPlainLine((_b = oldLine.lineNumber) !== null && _b !== void 0 ? _b : -1);
+    const newSyntaxLine = diffFile.getNewSyntaxLine((_c = newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber) !== null && _c !== void 0 ? _c : -1);
+    const newPlainLine = diffFile.getNewPlainLine((_d = newLine.lineNumber) !== null && _d !== void 0 ? _d : -1);
     const hasDiff = !!(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || !!(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
     const hasChange = checkDiffLineIncludeChange(oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) || checkDiffLineIncludeChange(newLine === null || newLine === void 0 ? void 0 : newLine.diff);
-    const oldLineIsDelete = ((_a = oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) === null || _a === void 0 ? void 0 : _a.type) === DiffLineType.Delete;
-    const newLineIsAdded = ((_b = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _b === void 0 ? void 0 : _b.type) === DiffLineType.Add;
+    const oldLineIsDelete = ((_e = oldLine === null || oldLine === void 0 ? void 0 : oldLine.diff) === null || _e === void 0 ? void 0 : _e.type) === DiffLineType.Delete;
+    const newLineIsAdded = ((_f = newLine === null || newLine === void 0 ? void 0 : newLine.diff) === null || _f === void 0 ? void 0 : _f.type) === DiffLineType.Add;
     const { useDiffContext } = useDiffViewContext();
     const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
     const { useWidget } = useDiffWidgetContext();
@@ -935,45 +835,30 @@ const InternalDiffSplitLine = ({ index, diffFile, lineNumber, enableAddWidget, e
     const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete, hasDiff);
     const newLineContentBG = getContentBG(newLineIsAdded, false, hasDiff);
     const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
-    return (React.createElement("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line" },
-        hasOldLine ? (React.createElement(React.Fragment, null,
-            React.createElement("td", { className: "diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.old], style: {
-                    backgroundColor: oldLineNumberBG,
-                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
-                } },
-                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] z-[1] translate-x-[-50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, oldLine.lineNumber)),
-            React.createElement("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineContentBG } },
-                hasDiff && enableAddWidget && (React.createElement(DiffSplitAddWidget, { index: index, lineNumber: oldLine.lineNumber, side: SplitSide.old, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] z-[1] translate-x-[50%]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, plainLine: oldPlainLine, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
-            React.createElement("span", null, "\u2002"))),
-        hasNewLine ? (React.createElement(React.Fragment, null,
-            React.createElement("td", { className: "diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.new], style: {
-                    backgroundColor: newLineNumberBG,
-                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+    return (jsxs("tr", { "data-line": lineNumber, "data-state": hasDiff ? "diff" : "plain", className: "diff-line", children: [hasOldLine ? (jsxs(Fragment, { children: [jsxs("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(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+                        }, children: [hasDiff && enableAddWidget && (jsx(DiffSplitAddWidget, { index: index, lineNumber: (_g = oldLine.lineNumber) !== null && _g !== void 0 ? _g : -1, 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 }) })), jsx("span", { "data-line-num": oldLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 }, children: oldLine.lineNumber })] }), jsxs("td", { className: "diff-line-old-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: oldLineContentBG }, children: [hasDiff && enableAddWidget && (jsx(DiffSplitAddWidget, { index: index, lineNumber: (_h = oldLine.lineNumber) !== null && _h !== void 0 ? _h : -1, 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 }) })), jsx(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value || "", diffLine: oldLine.diff, plainLine: oldPlainLine, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })] })] })) : (jsx("td", { className: "diff-line-old-placeholder select-none", "data-side": SplitSide[SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2, children: jsx("span", { children: "\u2002" }) })), hasNewLine ? (jsxs(Fragment, { children: [jsxs("td", { className: "diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top", "data-side": SplitSide[SplitSide.new], style: {
+                            backgroundColor: newLineNumberBG,
+                            color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+                            borderLeftColor: `var(${borderColorName})`,
+                            borderLeftStyle: "solid",
+                        }, children: [hasDiff && enableAddWidget && (jsx(DiffSplitAddWidget, { index: index, lineNumber: (_j = newLine.lineNumber) !== null && _j !== void 0 ? _j : -1, 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 }) })), jsx("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 }, children: newLine.lineNumber })] }), jsxs("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": SplitSide[SplitSide.new], style: { backgroundColor: newLineContentBG }, children: [hasDiff && enableAddWidget && (jsx(DiffSplitAddWidget, { index: index, lineNumber: (_k = newLine.lineNumber) !== null && _k !== void 0 ? _k : -1, 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 }) })), jsx(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, plainLine: newPlainLine, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })] })] })) : (jsx("td", { className: "diff-line-new-placeholder select-none border-l-[1px]", style: {
+                    backgroundColor: `var(${emptyBGName})`,
                     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, plainLine: newPlainLine, 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")))));
+                }, "data-side": SplitSide[SplitSide.new], colSpan: 2, children: jsx("span", { children: "\u2002" }) }))] }));
 };
 const DiffSplitContentLine = ({ index, diffFile, lineNumber, enableAddWidget, enableHighlight, }) => {
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     if ((oldLine === null || oldLine === void 0 ? void 0 : oldLine.isHidden) && (newLine === null || newLine === void 0 ? void 0 : newLine.isHidden))
         return null;
-    return (React.createElement(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
+    return (jsx(InternalDiffSplitLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }));
 };
 
 const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newLineExtend, }) => {
+    var _a, _b;
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
@@ -985,7 +870,7 @@ const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExten
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
             side: SplitSide.old,
-            lineNumber: oldLine.lineNumber,
+            lineNumber: (_a = oldLine.lineNumber) !== null && _a !== void 0 ? _a : -1,
             data: oldLineExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
@@ -993,29 +878,25 @@ const InternalDiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExten
         (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
             diffFile,
             side: SplitSide.new,
-            lineNumber: newLine.lineNumber,
+            lineNumber: (_b = newLine.lineNumber) !== null && _b !== void 0 ? _b : -1,
             data: newLineExtend.data,
             onUpdate: diffFile.notifyAll,
         }));
-    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("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 }))));
+    return (jsxs("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend", children: [oldExtendRendered ? (jsx("td", { className: "diff-line-extend-old-content p-0", colSpan: 2, children: jsx("div", { className: "diff-line-extend-wrapper", children: oldExtendRendered }) })) : (jsx("td", { className: "diff-line-extend-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })), newExtendRendered ? (jsx("td", { className: "diff-line-extend-new-content border-l-[1px] p-0", style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, colSpan: 2, children: jsx("div", { className: "diff-line-extend-wrapper", children: newExtendRendered }) })) : (jsx("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 }))] }));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
     const oldLine = diffFile.getSplitLeftLine(index);
     const newLine = diffFile.getSplitRightLine(index);
     const { oldLineExtend, newLineExtend } = useDiffContext(React.useCallback((s) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         return ({
-            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber],
-            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber],
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[(_c = oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber) !== null && _c !== void 0 ? _c : -1],
+            newLineExtend: (_e = (_d = s.extendData) === null || _d === void 0 ? void 0 : _d.newFile) === null || _e === void 0 ? void 0 : _e[(_f = newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber) !== null && _f !== void 0 ? _f : -1],
         });
     }, [oldLine === null || oldLine === void 0 ? void 0 : oldLine.lineNumber, newLine === null || newLine === void 0 ? void 0 : newLine.lineNumber]));
     const hasExtend = (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) || (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data);
@@ -1024,7 +905,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(InternalDiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (jsx(InternalDiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
@@ -1037,22 +918,12 @@ const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk" },
-        React.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, colSpan: 3 },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
+    return (jsxs("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk", children: [jsx("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]", style: {
+                    backgroundColor: `var(${hunkLineNumberBGName})`,
+                    color: `var(${plainLineNumberColorName})`,
+                }, children: couldExpand ? (isFirstLine ? (jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })) : isLastLine ? (jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) })) : isExpandAll ? (jsx("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), children: jsx(ExpandAll, { className: "fill-current" }) })) : (jsxs(Fragment, { children: [jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) }), jsx("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index), children: jsx(ExpandUp, { className: "fill-current" }) })] }))) : (jsx("div", { className: "min-h-[28px]", children: "\u2002" })) }), jsx("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, colSpan: 3, children: jsx("div", { className: "pl-[1.5em]", style: {
+                        color: `var(${hunkContentColorName})`,
+                    }, children: ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text }) })] }));
 };
 const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
     var _a, _b;
@@ -1064,39 +935,19 @@ const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
         currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
     const isFirstLine = currentHunk && currentHunk.isFirst;
     const isLastLine = currentHunk && currentHunk.isLast;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk" },
-        React.createElement("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-            } }, couldExpand ? (isFirstLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-            React.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-            React.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)),
-        React.createElement("td", { className: "diff-line-hunk-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) },
-            React.createElement(ExpandAll, { className: "fill-current" }))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
-                React.createElement(ExpandDown, { className: "fill-current" })),
-            React.createElement("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
-                React.createElement(ExpandUp, { className: "fill-current" }))))) : (React.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
-        React.createElement("td", { className: "diff-line-hunk-content relative pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
-            React.createElement("div", { className: "pl-[1.5em]", style: {
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
+    return (jsxs("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk", children: [jsx("td", { className: "diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]", style: {
+                    backgroundColor: `var(${hunkLineNumberBGName})`,
+                    color: `var(${plainLineNumberColorName})`,
+                }, children: couldExpand ? (isFirstLine ? (jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })) : isLastLine ? (jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) })) : isExpandAll ? (jsx("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), children: jsx(ExpandAll, { className: "fill-current" }) })) : (jsxs(Fragment, { children: [jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) }), jsx("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index), children: jsx(ExpandUp, { className: "fill-current" }) })] }))) : (jsx("div", { className: "min-h-[28px]", children: "\u2002" })) }), jsx("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, children: jsx("div", { className: "pl-[1.5em]", style: {
+                        color: `var(${hunkContentColorName})`,
+                    }, children: ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text }) }), jsx("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",
+                }, children: couldExpand ? (isFirstLine ? (jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })) : isLastLine ? (jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) })) : isExpandAll ? (jsx("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), children: jsx(ExpandAll, { className: "fill-current" }) })) : (jsxs(Fragment, { children: [jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) }), jsx("button", { className: "diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index), children: jsx(ExpandUp, { className: "fill-current" }) })] }))) : (jsx("div", { className: "min-h-[28px]", children: "\u2002" })) }), jsx("td", { className: "diff-line-hunk-content relative pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, children: jsx("div", { className: "pl-[1.5em]", style: {
+                        color: `var(${hunkContentColorName})`,
+                    }, children: ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text }) })] }));
 };
 const InternalDiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const { useDiffContext } = useDiffViewContext();
@@ -1104,10 +955,10 @@ const InternalDiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     if (diffViewMode === DiffModeEnum.SplitGitHub ||
         diffViewMode === DiffModeEnum.Split ||
         diffViewMode === DiffModeEnum.Unified) {
-        return React.createElement(DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+        return jsx(DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, lineNumber: lineNumber });
     }
     else {
-        return React.createElement(DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+        return jsx(DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, lineNumber: lineNumber });
     }
 };
 const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
@@ -1118,10 +969,11 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(InternalDiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return jsx(InternalDiffSplitHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
+    var _a, _b;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const { useDiffContext } = useDiffViewContext();
@@ -1133,20 +985,26 @@ const InternalDiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
     const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
     const oldWidgetRendered = oldLineWidget &&
-        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) }));
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
+            diffFile,
+            side: SplitSide.old,
+            lineNumber: (_a = oldLine.lineNumber) !== null && _a !== void 0 ? _a : -1,
+            onClose: () => setWidget({}),
+        }));
     const newWidgetRendered = newLineWidget &&
-        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.new, lineNumber: newLine.lineNumber, onClose: () => setWidget({}) }));
+        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
+            diffFile,
+            side: SplitSide.new,
+            lineNumber: (_b = newLine.lineNumber) !== null && _b !== void 0 ? _b : -1,
+            onClose: () => setWidget({}),
+        }));
     if (!renderWidgetLine)
         return null;
-    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("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 }))));
+    return (jsxs("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget", children: [oldWidgetRendered ? (jsx("td", { className: "diff-line-widget-old-content p-0", colSpan: 2, children: jsx("div", { className: "diff-line-widget-wrapper", children: oldWidgetRendered }) })) : (jsx("td", { className: "diff-line-widget-old-placeholder select-none p-0", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 })), newWidgetRendered ? (jsx("td", { className: "diff-line-widget-new-content border-l-[1px] p-0", colSpan: 2, style: { borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }, children: jsx("div", { className: "diff-line-widget-wrapper", children: newWidgetRendered }) })) : (jsx("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 }))] }));
 };
 // TODO! improve performance
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -1163,15 +1021,14 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return React.createElement(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return jsx(InternalDiffSplitWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 const DiffSplitViewWrap = memo(({ diffFile }) => {
     const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
     const { useDiffContext } = useDiffViewContext();
     const ref = useRef(null);
-    const tempRef = useRef();
+    const tempRef = useRef(undefined);
     const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
         fontSize: s.fontSize,
         enableAddWidget: s.enableAddWidget,
@@ -1234,33 +1091,12 @@ const DiffSplitViewWrap = memo(({ diffFile }) => {
             ele = ele.parentElement;
         }
     };
-    return (React.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full" },
-        React.createElement("div", { className: "diff-table-wrapper w-full", style: {
+    return (jsx("div", { className: "split-diff-view split-diff-view-wrap w-full", children: jsxs("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", { "data-select-style": true, ref: ref }),
-            React.createElement("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0" },
-                React.createElement("colgroup", null,
-                    React.createElement("col", { className: "diff-table-old-num-col", width: Math.round(width) }),
-                    React.createElement("col", { className: "diff-table-old-content-col" }),
-                    React.createElement("col", { className: "diff-table-new-num-col", width: Math.round(width) }),
-                    React.createElement("col", { className: "diff-table-new-content-col" })),
-                React.createElement("thead", { className: "hidden" },
-                    React.createElement("tr", null,
-                        React.createElement("th", { scope: "col" }, "old line number"),
-                        React.createElement("th", { scope: "col" }, "old line content"),
-                        React.createElement("th", { scope: "col" }, "new line number"),
-                        React.createElement("th", { scope: "col" }, "new line content"))),
-                React.createElement("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown },
-                    lines.map((line) => (React.createElement(Fragment, { key: line.index },
-                        React.createElement(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: enableAddWidget, enableHighlight: enableHighlight }),
-                        React.createElement(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }),
-                        React.createElement(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })))),
-                    React.createElement(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile }))))));
+            }, children: [jsx("style", { "data-select-style": true, ref: ref }), jsxs("table", { className: "diff-table w-full table-fixed border-collapse border-spacing-0", children: [jsxs("colgroup", { children: [jsx("col", { className: "diff-table-old-num-col", width: Math.round(width) }), jsx("col", { className: "diff-table-old-content-col" }), jsx("col", { className: "diff-table-new-num-col", width: Math.round(width) }), jsx("col", { className: "diff-table-new-content-col" })] }), jsx("thead", { className: "hidden", children: jsxs("tr", { children: [jsx("th", { scope: "col", children: "old line number" }), jsx("th", { scope: "col", children: "old line content" }), jsx("th", { scope: "col", children: "new line number" }), jsx("th", { scope: "col", children: "new line content" })] }) }), jsxs("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown, children: [lines.map((line) => (jsxs(Fragment$1, { children: [jsx(DiffSplitHunkLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }), jsx(DiffSplitContentLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile, enableAddWidget: !!enableAddWidget, enableHighlight: !!enableHighlight }), jsx(DiffSplitWidgetLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile }), jsx(DiffSplitExtendLine, { index: line.index, lineNumber: line.lineNumber, diffFile: diffFile })] }, line.index))), jsx(DiffSplitHunkLine, { index: diffFile.splitLineLength, lineNumber: diffFile.splitLineLength, diffFile: diffFile })] })] })] }) }));
 });
 DiffSplitViewWrap.displayName = "DiffSplitViewWrap";
 
@@ -1284,10 +1120,11 @@ const createDiffConfigStore = (props, diffFileId) => {
         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),
+            oldFile: { ...(_a = props.extendData) === null || _a === void 0 ? void 0 : _a.oldFile },
+            newFile: { ...(_b = props.extendData) === null || _b === void 0 ? void 0 : _b.newFile },
         });
-        const setExtendData = (_extendData) => {
+        const setExtendData = (__extendData) => {
+            const _extendData = __extendData || {};
             const existOldKeys = Object.keys(extendData.value.oldFile || {});
             const inComingOldKeys = Object.keys(_extendData.oldFile || {});
             for (const key of existOldKeys) {
@@ -1382,45 +1219,30 @@ const DiffSplitView = memo(({ diffFile }) => {
     useEffect(() => {
         onCreateUseWidgetHook === null || onCreateUseWidgetHook === void 0 ? void 0 : onCreateUseWidgetHook(useWidget);
     }, [useWidget, onCreateUseWidgetHook]);
-    return (React.createElement(DiffWidgetContext.Provider, { value: contextValue }, enableWrap ? React.createElement(DiffSplitViewWrap, { diffFile: diffFile }) : React.createElement(DiffSplitViewNormal, { diffFile: diffFile })));
+    return (jsx(DiffWidgetContext.Provider, { value: contextValue, children: enableWrap ? jsx(DiffSplitViewWrap, { diffFile: diffFile }) : jsx(DiffSplitViewNormal, { diffFile: diffFile }) }));
 });
 DiffSplitView.displayName = "DiffSplitView";
 
 const DiffUnifiedOldLine = ({ index, diffLine, rawLine, plainLine, 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 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                color: `var(${plainLineNumberColorName})`,
-                backgroundColor: `var(${delLineNumberBGName})`,
-                width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-            } },
-            enableAddWidget && (React.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
-            React.createElement("div", { className: "flex" },
-                React.createElement("span", { "data-line-old-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber),
-                React.createElement("span", { className: "w-[10px] shrink-0" }),
-                React.createElement("span", { className: "inline-block w-[50%]" }))),
-        React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
+    return (jsxs("tr", { "data-line": index, "data-state": "diff", className: "diff-line group", children: [jsxs("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+                    color: `var(${plainLineNumberColorName})`,
+                    backgroundColor: `var(${delLineNumberBGName})`,
+                    width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                }, children: [enableAddWidget && (jsx(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.old, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })), jsxs("div", { className: "flex", children: [jsx("span", { "data-line-old-num": lineNumber, className: "inline-block w-[50%]", children: lineNumber }), jsx("span", { className: "w-[10px] shrink-0" }), jsx("span", { className: "inline-block w-[50%]" })] })] }), jsx("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${delContentBGName})` }, children: jsx(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }) })] }));
 };
 const DiffUnifiedNewLine = ({ index, diffLine, rawLine, plainLine, 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 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                color: `var(${plainLineNumberColorName})`,
-                backgroundColor: `var(${addLineNumberBGName})`,
-                width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-            } },
-            enableAddWidget && (React.createElement(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
-            React.createElement("div", { className: "flex" },
-                React.createElement("span", { className: "inline-block w-[50%]" }),
-                React.createElement("span", { className: "w-[10px] shrink-0" }),
-                React.createElement("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]" }, lineNumber))),
-        React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` } },
-            React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
+    return (jsxs("tr", { "data-line": index, "data-state": "diff", className: "diff-line group", children: [jsxs("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+                    color: `var(${plainLineNumberColorName})`,
+                    backgroundColor: `var(${addLineNumberBGName})`,
+                    width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                }, children: [enableAddWidget && (jsx(DiffUnifiedAddWidget, { index: index - 1, lineNumber: lineNumber, diffFile: diffFile, side: SplitSide.new, onWidgetClick: onAddWidgetClick, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })), jsxs("div", { className: "flex", children: [jsx("span", { className: "inline-block w-[50%]" }), jsx("span", { className: "w-[10px] shrink-0" }), jsx("span", { "data-line-new-num": lineNumber, className: "inline-block w-[50%]", children: lineNumber })] })] }), jsx("td", { className: "diff-line-content pr-[10px] align-top", style: { backgroundColor: `var(${addContentBGName})` }, children: jsx(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }) })] }));
 };
 const InternalDiffUnifiedLine = ({ index, diffFile, lineNumber, enableWrap, enableAddWidget, enableHighlight, }) => {
+    var _a;
     const unifiedLine = diffFile.getUnifiedLine(index);
     const { useDiffContext } = useDiffViewContext();
     const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
@@ -1444,40 +1266,33 @@ const InternalDiffUnifiedLine = ({ index, diffFile, lineNumber, enableWrap, enab
             : undefined;
     if (hasChange) {
         if (unifiedLine.oldLineNumber) {
-            return (React.createElement(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+            return (jsx(DiffUnifiedOldLine, { index: lineNumber, enableWrap: enableWrap, diffFile: diffFile, rawLine: rawLine, diffLine: diffLine, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.oldLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
         else {
-            return (React.createElement(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
+            return (jsx(DiffUnifiedNewLine, { index: lineNumber, enableWrap: enableWrap, rawLine: rawLine, diffLine: diffLine, diffFile: diffFile, setWidget: setWidget, plainLine: plainLine, syntaxLine: syntaxLine, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget, lineNumber: unifiedLine.newLineNumber, onAddWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); } }));
         }
     }
     else {
-        return (React.createElement("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group" },
-            React.createElement("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
-                    color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
-                    width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                    maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                    minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-                    backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
-                } },
-                enableAddWidget && hasDiff && (React.createElement(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: unifiedLine.newLineNumber, side: SplitSide.new, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber, side }) })),
-                React.createElement("div", { className: "flex opacity-[0.5]" },
-                    React.createElement("span", { "data-line-old-num": unifiedLine.oldLineNumber, className: "inline-block w-[50%]" }, unifiedLine.oldLineNumber),
-                    React.createElement("span", { className: "w-[10px] shrink-0" }),
-                    React.createElement("span", { "data-line-new-num": unifiedLine.newLineNumber, className: "inline-block w-[50%]" }, unifiedLine.newLineNumber))),
-            React.createElement("td", { className: "diff-line-content pr-[10px] align-top", style: {
-                    backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
-                } },
-                React.createElement(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }))));
+        return (jsxs("tr", { "data-line": lineNumber, "data-state": unifiedLine.diff ? "diff" : "plain", className: "diff-line group", children: [jsxs("td", { className: "diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top", style: {
+                        color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+                        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})`,
+                    }, children: [enableAddWidget && hasDiff && (jsx(DiffUnifiedAddWidget, { index: index, diffFile: diffFile, lineNumber: (_a = unifiedLine.newLineNumber) !== null && _a !== void 0 ? _a : -1, 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 }) })), jsxs("div", { className: "flex opacity-[0.5]", children: [jsx("span", { "data-line-old-num": unifiedLine.oldLineNumber, className: "inline-block w-[50%]", children: unifiedLine.oldLineNumber }), jsx("span", { className: "w-[10px] shrink-0" }), jsx("span", { "data-line-new-num": unifiedLine.newLineNumber, className: "inline-block w-[50%]", children: unifiedLine.newLineNumber })] })] }), jsx("td", { className: "diff-line-content pr-[10px] align-top", style: {
+                        backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
+                    }, children: jsx(DiffContent, { enableWrap: enableWrap, diffFile: diffFile, enableHighlight: enableHighlight, rawLine: rawLine, diffLine: diffLine, plainLine: plainLine, syntaxLine: syntaxLine }) })] }));
     }
 };
 const DiffUnifiedContentLine = ({ index, diffFile, lineNumber, enableWrap, enableHighlight, enableAddWidget, }) => {
     const unifiedLine = diffFile.getUnifiedLine(index);
     if (unifiedLine === null || unifiedLine === void 0 ? void 0 : unifiedLine.isHidden)
         return null;
-    return (React.createElement(InternalDiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
+    return (jsx(InternalDiffUnifiedLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }));
 };
 
 const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, enableWrap, oldLineExtend, newLineExtend, }) => {
+    var _a, _b;
     const { useDiffContext } = useDiffViewContext();
     const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1488,44 +1303,40 @@ const InternalDiffUnifiedExtendLine = ({ index, diffFile, lineNumber, enableWrap
     });
     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 p-0 align-top", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width } },
-                (enableWrap ? true : width > 0) &&
-                    (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined &&
-                    (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null &&
-                    (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                        diffFile,
-                        side: SplitSide.old,
-                        lineNumber: unifiedItem.oldLineNumber,
-                        data: oldLineExtend.data,
-                        onUpdate: diffFile.notifyAll,
-                    })),
-                (enableWrap ? true : width > 0) &&
-                    (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined &&
-                    (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null &&
-                    (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
-                        diffFile,
-                        side: SplitSide.new,
-                        lineNumber: unifiedItem.newLineNumber,
-                        data: newLineExtend.data,
-                        onUpdate: diffFile.notifyAll,
-                    }))))));
+    return (jsx("tr", { "data-line": `${lineNumber}-extend`, "data-state": "extend", className: "diff-line diff-line-extend", children: jsx("td", { className: "diff-line-extend-content p-0 align-top", colSpan: 2, children: jsxs("div", { className: "diff-line-extend-wrapper sticky left-0 z-[1]", style: { width }, children: [(enableWrap ? true : width > 0) &&
+                        (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== undefined &&
+                        (oldLineExtend === null || oldLineExtend === void 0 ? void 0 : oldLineExtend.data) !== null &&
+                        (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+                            diffFile,
+                            side: SplitSide.old,
+                            lineNumber: (_a = unifiedItem.oldLineNumber) !== null && _a !== void 0 ? _a : -1,
+                            data: oldLineExtend.data,
+                            onUpdate: diffFile.notifyAll,
+                        })), (enableWrap ? true : width > 0) &&
+                        (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== undefined &&
+                        (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) !== null &&
+                        (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
+                            diffFile,
+                            side: SplitSide.new,
+                            lineNumber: (_b = unifiedItem.newLineNumber) !== null && _b !== void 0 ? _b : -1,
+                            data: newLineExtend.data,
+                            onUpdate: diffFile.notifyAll,
+                        }))] }) }) }));
 };
 const DiffUnifiedExtendLine = ({ index, diffFile, lineNumber, enableWrap, }) => {
     const { useDiffContext } = useDiffViewContext();
     const unifiedItem = diffFile.getUnifiedLine(index);
     const { oldLineExtend, newLineExtend } = useDiffContext(useCallback((s) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         return ({
-            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.oldLineNumber],
-            newLineExtend: (_d = (_c = s.extendData) === null || _c === void 0 ? void 0 : _c.newFile) === null || _d === void 0 ? void 0 : _d[unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.newLineNumber],
+            oldLineExtend: (_b = (_a = s.extendData) === null || _a === void 0 ? void 0 : _a.oldFile) === null || _b === void 0 ? void 0 : _b[(_c = unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.oldLineNumber) !== null && _c !== void 0 ? _c : -1],
+            newLineExtend: (_e = (_d = s.extendData) === null || _d === void 0 ? void 0 : _d.newFile) === null || _e === void 0 ? void 0 : _e[(_f = unifiedItem === null || unifiedItem === void 0 ? void 0 : unifiedItem.newLineNumber) !== null && _f !== void 0 ? _f : -1],
         });
     }, [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)
         return null;
-    return (React.createElement(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
+    return (jsx(InternalDiffUnifiedExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
 const InternalDiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
@@ -1540,27 +1351,17 @@ const InternalDiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
         currentHunk.unifiedInfo.endHiddenIndex - currentHunk.unifiedInfo.startHiddenIndex < composeLen;
     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 w-[1%] min-w-[100px] select-none p-[1px]", style: {
-                backgroundColor: `var(${hunkLineNumberBGName})`,
-                color: `var(${plainLineNumberColorName})`,
-                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]", 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]", 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]", 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: {
-                    whiteSpace: enableWrap ? "pre-wrap" : "pre",
-                    wordBreak: enableWrap ? "break-all" : "initial",
-                    color: `var(${hunkContentColorName})`,
-                } }, ((_a = currentHunk.unifiedInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
+    return (jsxs("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk", children: [jsx("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(${diffAsideWidthName}) + 5px) * 2)`,
+                    maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                    minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+                }, children: couldExpand ? (isFirstLine ? (jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })) : isLastLine ? (jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) })) : isExpandAll ? (jsx("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), children: jsx(ExpandAll, { className: "fill-current" }) })) : (jsxs(Fragment, { children: [jsx("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), children: jsx(ExpandDown, { className: "fill-current" }) }), jsx("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), children: jsx(ExpandUp, { className: "fill-current" }) })] }))) : (jsx("div", { className: "min-h-[28px]", children: "\u2002" })) }), jsx("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` }, children: jsx("div", { className: "pl-[1.5em]", style: {
+                        whiteSpace: enableWrap ? "pre-wrap" : "pre",
+                        wordBreak: enableWrap ? "break-all" : "initial",
+                        color: `var(${hunkContentColorName})`,
+                    }, children: ((_a = currentHunk.unifiedInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text }) })] }));
 };
 const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentHunk = diffFile.getUnifiedHunkLine(index);
@@ -1570,10 +1371,11 @@ const DiffUnifiedHunkLine = ({ index, diffFile, lineNumber, }) => {
     const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.unifiedInfo;
     if (!currentIsShow && !currentIsPureHunk)
         return null;
-    return React.createElement(InternalDiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    return jsx(InternalDiffUnifiedHunkLine, { index: index, diffFile: diffFile, lineNumber: lineNumber });
 };
 
 const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, enableWrap, }) => {
+    var _a, _b;
     const { useWidget } = useDiffWidgetContext();
     const setWidget = useWidget.getReadonlyState().setWidget;
     const unifiedItem = diffFile.getUnifiedLine(index);
@@ -1591,15 +1393,11 @@ const InternalDiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, enableWrap
     });
     if (!renderWidgetLine)
         return null;
-    return (React.createElement("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget" },
-        React.createElement("td", { className: "diff-line-widget-content p-0", colSpan: 2 },
-            React.createElement("div", { className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width } },
-                (enableWrap ? true : width > 0) &&
-                    oldWidget &&
-                    (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })),
-                (enableWrap ? true : width > 0) &&
-                    newWidget &&
-                    (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose }))))));
+    return (jsx("tr", { "data-line": `${lineNumber}-widget`, "data-state": "widget", className: "diff-line diff-line-widget", children: jsx("td", { className: "diff-line-widget-content p-0", colSpan: 2, children: jsxs("div", { className: "diff-line-widget-wrapper sticky left-0 z-[1]", style: { width }, children: [(enableWrap ? true : width > 0) &&
+                        oldWidget &&
+                        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.old, lineNumber: (_a = unifiedItem.oldLineNumber) !== null && _a !== void 0 ? _a : -1, onClose })), (enableWrap ? true : width > 0) &&
+                        newWidget &&
+                        (renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({ diffFile, side: SplitSide.new, lineNumber: (_b = unifiedItem.newLineNumber) !== null && _b !== void 0 ? _b : -1, onClose }))] }) }) }));
 };
 const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, enableWrap, }) => {
     const { useWidget } = useDiffWidgetContext();
@@ -1614,14 +1412,13 @@ const DiffUnifiedWidgetLine = ({ index, diffFile, lineNumber, enableWrap, }) =>
     }, [diffFile, index]), (p, c) => p === c);
     if (!currentIsShow)
         return null;
-    return (React.createElement(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap }));
+    return (jsx(InternalDiffUnifiedWidgetLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, enableWrap: enableWrap }));
 };
 
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 const DiffUnifiedView = memo(({ diffFile }) => {
     const { useDiffContext } = useDiffViewContext();
     const ref = useRef(null);
-    const tempRef = useRef();
+    const tempRef = useRef(undefined);
     const useDiffContextRef = useRef(useDiffContext);
     useDiffContextRef.current = useDiffContext;
     // performance optimization
@@ -1694,30 +1491,12 @@ const DiffUnifiedView = memo(({ diffFile }) => {
             ele = ele.parentElement;
         }
     };
-    return (React.createElement(DiffWidgetContext.Provider, { value: contextValue },
-        React.createElement("div", { className: `unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full` },
-            React.createElement("style", { "data-select-style": true, ref: ref }),
-            React.createElement("div", { className: "unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", style: {
-                    // @ts-ignore
-                    [diffAsideWidthName]: `${Math.round(width)}px`,
-                    fontFamily: "Menlo, Consolas, monospace",
-                    fontSize: `var(${diffFontSizeName})`,
-                } },
-                React.createElement("table", { className: `unified-diff-table w-full border-collapse border-spacing-0 ${enableWrap ? "table-fixed" : ""}` },
-                    React.createElement("colgroup", null,
-                        React.createElement("col", { className: "unified-diff-table-num-col" }),
-                        React.createElement("col", { className: "unified-diff-table-content-col" })),
-                    React.createElement("thead", { className: "hidden" },
-                        React.createElement("tr", null,
-                            React.createElement("th", { scope: "col" }, "line number"),
-                            React.createElement("th", { scope: "col" }, "line content"))),
-                    React.createElement("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown },
-                        lines.map((item) => (React.createElement(Fragment, { key: item.index },
-                            React.createElement(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }),
-                            React.createElement(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap, enableHighlight: enableHighlight, enableAddWidget: enableAddWidget }),
-                            React.createElement(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap }),
-                            React.createElement(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: enableWrap })))),
-                        React.createElement(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })))))));
+    return (jsx(DiffWidgetContext.Provider, { value: contextValue, children: jsxs("div", { className: `unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full`, children: [jsx("style", { "data-select-style": true, ref: ref }), jsx("div", { className: "unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden", style: {
+                        // @ts-ignore
+                        [diffAsideWidthName]: `${Math.round(width)}px`,
+                        fontFamily: "Menlo, Consolas, monospace",
+                        fontSize: `var(${diffFontSizeName})`,
+                    }, children: jsxs("table", { className: `unified-diff-table w-full border-collapse border-spacing-0 ${enableWrap ? "table-fixed" : ""}`, children: [jsxs("colgroup", { children: [jsx("col", { className: "unified-diff-table-num-col" }), jsx("col", { className: "unified-diff-table-content-col" })] }), jsx("thead", { className: "hidden", children: jsxs("tr", { children: [jsx("th", { scope: "col", children: "line number" }), jsx("th", { scope: "col", children: "line content" })] }) }), jsxs("tbody", { className: "diff-table-body leading-[1.6]", onMouseDownCapture: onMouseDown, children: [lines.map((item) => (jsxs(Fragment$1, { children: [jsx(DiffUnifiedHunkLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile }), jsx(DiffUnifiedContentLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: !!enableWrap, enableHighlight: !!enableHighlight, enableAddWidget: !!enableAddWidget }), jsx(DiffUnifiedWidgetLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: !!enableWrap }), jsx(DiffUnifiedExtendLine, { index: item.index, lineNumber: item.lineNumber, diffFile: diffFile, enableWrap: !!enableWrap })] }, item.index))), jsx(DiffUnifiedHunkLine, { index: diffFile.unifiedLineLength, lineNumber: diffFile.unifiedLineLength, diffFile: diffFile })] })] }) })] }) }));
 });
 DiffUnifiedView.displayName = "DiffUnifiedView";
 
@@ -1741,13 +1520,13 @@ const InternalDiffView = (props) => {
             setMounted(isMounted);
         }
         if (diffViewAddWidget !== enableAddWidget) {
-            setEnableAddWidget(diffViewAddWidget);
+            setEnableAddWidget(!!diffViewAddWidget);
         }
         if (diffViewHighlight !== enableHighlight) {
-            setEnableHighlight(diffViewHighlight);
+            setEnableHighlight(!!diffViewHighlight);
         }
         if (diffViewWrap !== enableWrap) {
-            setEnableWrap(diffViewWrap);
+            setEnableWrap(!!diffViewWrap);
         }
         if (extendData) {
             setExtendData(extendData);
@@ -1783,21 +1562,20 @@ const InternalDiffView = (props) => {
         onCreateUseWidgetHook,
     ]);
     useEffect(() => {
-        useDiffContext.getReadonlyState().setDom(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+        if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+            useDiffContext.getReadonlyState().setDom(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+        }
     }, [useDiffContext, wrapperRef]);
     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.1.3", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef },
-            React.createElement("div", { className: "diff-style-root", style: {
+    return (jsx(DiffViewContext.Provider, { value: value, children: jsx("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-theme": diffFile._getTheme() || "light", "data-version": "0.1.5", "data-highlighter": diffFile._getHighlighterName(), ref: wrapperRef, children: jsx("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
-                } },
-                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 })))))));
+                }, children: jsx("div", { id: isMounted ? `diff-root${diffFileId}` : undefined, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style, children: diffViewMode & DiffModeEnum.Split ? (jsx(DiffSplitView, { diffFile: diffFile })) : (jsx(DiffUnifiedView, { diffFile: diffFile })) }) }) }) }));
 };
 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"]);
+    const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile, ...restProps } = props;
     const diffFile = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         if (_diffFile) {
@@ -1814,8 +1592,10 @@ const DiffViewWithRef = (props, ref) => {
         return null;
     }, [data, _diffFile]);
     const diffFileRef = useRef(diffFile);
-    const wrapperRef = useRef();
+    const wrapperRef = useRef(null);
+    // eslint-disable-next-line react-hooks/refs
     if (diffFileRef.current && diffFileRef.current !== diffFile) {
+        // eslint-disable-next-line react-hooks/refs
         (_b = (_a = diffFileRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
         diffFileRef.current = diffFile;
     }
@@ -1872,12 +1652,225 @@ const DiffViewWithRef = (props, ref) => {
     useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
-    return (React.createElement(MemoedInternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, isMounted: isMounted, wrapperRef: wrapperRef, diffViewTheme: diffViewTheme, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
+    return (jsx(MemoedInternalDiffView, { ...restProps, diffFile: diffFile, isMounted: isMounted, wrapperRef: wrapperRef, diffViewTheme: diffViewTheme, diffViewMode: restProps.diffViewMode || DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 }, diffFile.getId()));
 };
 const InnerDiffView = forwardRef(DiffViewWithRef);
 InnerDiffView.displayName = "DiffView";
 const DiffView = InnerDiffView;
-const version = "0.1.3";
+const version = "0.1.5";
+
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+const useCallbackRef = (cb) => {
+    const cbRef = useRef(cb);
+    // eslint-disable-next-line react-hooks/refs
+    cbRef.current = cb;
+    return useCallback((...args) => {
+        var _a;
+        return (_a = cbRef.current) === null || _a === void 0 ? void 0 : _a.call(cbRef, ...args);
+    }, []);
+};
+
+const useUpdateEffect = (effect, deps) => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        if (isMounted.current) {
+            return effect();
+        }
+        isMounted.current = true;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};
+
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+const InternalDiffViewWithMultiSelect = (props, ref) => {
+    const { enableMultiSelect = true, extendData, onMultiSelectComplete, onMultiSelectChange, scopeMultiSelectToHunk, renderWidgetLine, onAddWidgetClick, diffViewMode = DiffModeEnum.SplitGitHub, ...restProps } = props;
+    const memoSelectChange = useCallbackRef(onMultiSelectChange);
+    const memoSelectComplete = useCallbackRef(onMultiSelectComplete);
+    const memoScopeSelectToHunk = useCallbackRef(scopeMultiSelectToHunk);
+    const containerRef = useRef(null);
+    const diffViewRef = useRef(null);
+    const managerRef = useRef(null);
+    const multiResultRef = useRef(undefined);
+    const isUnifiedMode = !(diffViewMode & DiffModeEnum.Split);
+    const updateMultiResult = useCallback((result) => {
+        var _a;
+        multiResultRef.current = result;
+        (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.setPreselectedLines(result || { old: [], new: [] });
+    }, []);
+    useUpdateEffect(() => {
+        updateMultiResult(undefined);
+    }, [props.diffViewWrap, diffViewMode]);
+    const getDiffFile = useCallback(() => {
+        var _a, _b;
+        return (_b = (_a = diffViewRef.current) === null || _a === void 0 ? void 0 : _a.getDiffFileInstance()) !== null && _b !== void 0 ? _b : null;
+    }, []);
+    useEffect(() => {
+        var _a;
+        const container = containerRef.current;
+        const diffFile = getDiffFile();
+        if (!container || !diffFile || !enableMultiSelect) {
+            (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            managerRef.current = null;
+            return;
+        }
+        const managerOptions = {
+            enabled: enableMultiSelect,
+            isUnifiedMode,
+            selectedClassName: multiSelectClassNames.selected,
+            onSelectionChange: (range, state) => {
+                var _a, _b;
+                if (state.isSelecting) {
+                    (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(multiSelectClassNames.selecting);
+                }
+                else {
+                    (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(multiSelectClassNames.selecting);
+                }
+                if (state.isSelecting && multiResultRef.current) {
+                    updateMultiResult(undefined);
+                }
+                memoSelectChange === null || memoSelectChange === void 0 ? void 0 : memoSelectChange(range, state);
+            },
+            onSelectionComplete: (result) => {
+                var _a;
+                (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(multiSelectClassNames.selecting);
+                if (result && result.lines.length > 0) {
+                    memoSelectComplete === null || memoSelectComplete === void 0 ? void 0 : memoSelectComplete(result);
+                    const finalResult = {
+                        [result.range.side]: [result.range.startLineNumber, result.range.endLineNumber],
+                    };
+                    updateMultiResult(finalResult);
+                }
+                else {
+                    updateMultiResult(undefined);
+                }
+            },
+            scopeToHunk: memoScopeSelectToHunk,
+        };
+        if (managerRef.current) {
+            managerRef.current.updateContainer(container);
+            managerRef.current.updateDiffFile(diffFile);
+            managerRef.current.updateOptions(managerOptions);
+        }
+        else {
+            managerRef.current = createDiffMultiSelectManager(container, diffFile, managerOptions);
+        }
+        return () => {
+            var _a;
+            (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            managerRef.current = null;
+        };
+    }, [
+        enableMultiSelect,
+        isUnifiedMode,
+        memoScopeSelectToHunk,
+        memoSelectChange,
+        memoSelectComplete,
+        getDiffFile,
+        updateMultiResult,
+    ]);
+    const convertedExtendData = useMemo(() => {
+        if (!extendData)
+            return undefined;
+        const result = {};
+        if (extendData.oldFile) {
+            result.oldFile = {};
+            for (const [key, value] of Object.entries(extendData.oldFile)) {
+                result.oldFile[key] = { data: value.data };
+            }
+        }
+        if (extendData.newFile) {
+            result.newFile = {};
+            for (const [key, value] of Object.entries(extendData.newFile)) {
+                result.newFile[key] = { data: value.data };
+            }
+        }
+        return result;
+    }, [extendData]);
+    const internalRenderWidgetLine = useCallback(({ lineNumber, side, diffFile, onClose, }) => {
+        var _a;
+        if (!renderWidgetLine)
+            return null;
+        const sideKey = side === SplitSide.old ? "old" : "new";
+        const multiResultItem = (_a = multiResultRef.current) === null || _a === void 0 ? void 0 : _a[sideKey];
+        const fromLineNumber = multiResultItem ? Math.min(...multiResultItem) : lineNumber;
+        const toLineNumber = multiResultItem ? Math.max(...multiResultItem) : lineNumber;
+        return renderWidgetLine({
+            lineNumber: toLineNumber,
+            fromLineNumber,
+            side,
+            diffFile,
+            onClose,
+        });
+    }, [renderWidgetLine]);
+    const getSelectionResult = useCallback(() => {
+        var _a, _b;
+        return (_b = (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.getSelectionResult()) !== null && _b !== void 0 ? _b : null;
+    }, []);
+    const getSelectionState = useCallback(() => {
+        var _a, _b;
+        return ((_b = (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.getState()) !== null && _b !== void 0 ? _b : {
+            isSelecting: false,
+            startInfo: null,
+            currentRange: null,
+        });
+    }, []);
+    const clearSelection = useCallback(() => {
+        var _a;
+        (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.clearSelection();
+    }, []);
+    const setPreselectedLines = updateMultiResult;
+    useImperativeHandle(ref, () => ({
+        getDiffFileInstance: getDiffFile,
+        getSelectionResult,
+        getSelectionState,
+        clearSelection,
+        setPreselectedLines,
+    }), [getDiffFile, getSelectionResult, getSelectionState, clearSelection, setPreselectedLines]);
+    return (jsx("div", { ref: containerRef, className: "diff-multiselect-wrapper", children: jsx(DiffView, { ref: diffViewRef, ...restProps, diffViewMode: diffViewMode, extendData: convertedExtendData, onAddWidgetClick: (lineNum, side) => {
+                var _a;
+                (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.clearSelection();
+                const multiResult = multiResultRef.current;
+                if (multiResult) {
+                    const currentSide = SplitSide[side];
+                    const currentMultiResult = multiResult[currentSide];
+                    const otherSide = currentSide === "new" ? "old" : "new";
+                    const otherMultiResult = multiResult[otherSide];
+                    if (currentMultiResult === null || currentMultiResult === void 0 ? void 0 : currentMultiResult.length) {
+                        const max = Math.max(...currentMultiResult);
+                        if (max === lineNum) {
+                            const finalResult = { [currentSide]: currentMultiResult };
+                            updateMultiResult(finalResult);
+                            onAddWidgetClick === null || onAddWidgetClick === void 0 ? void 0 : onAddWidgetClick({ lineNumber: max, fromLineNumber: Math.min(...currentMultiResult), side });
+                            return;
+                        }
+                    }
+                    if (isUnifiedMode && (otherMultiResult === null || otherMultiResult === void 0 ? void 0 : otherMultiResult.length)) {
+                        const max = Math.max(...otherMultiResult);
+                        const diffFile = getDiffFile();
+                        const index = diffFile.getUnifiedLineIndexByLineNumber(lineNum, side);
+                        const unifiedItem = diffFile.getUnifiedLine(index);
+                        const otherSideLineNum = side === SplitSide.old ? unifiedItem.newLineNumber : unifiedItem.oldLineNumber;
+                        if (max === otherSideLineNum) {
+                            const finalResult = { [otherSide]: otherMultiResult };
+                            updateMultiResult(finalResult);
+                            onAddWidgetClick === null || onAddWidgetClick === void 0 ? void 0 : onAddWidgetClick({
+                                lineNumber: max,
+                                fromLineNumber: Math.min(...otherMultiResult),
+                                side: otherSide === "old" ? SplitSide.old : SplitSide.new,
+                            });
+                            return;
+                        }
+                    }
+                    updateMultiResult(undefined);
+                    onAddWidgetClick === null || onAddWidgetClick === void 0 ? void 0 : onAddWidgetClick({ lineNumber: lineNum, fromLineNumber: lineNum, side });
+                }
+                else {
+                    updateMultiResult(undefined);
+                    onAddWidgetClick === null || onAddWidgetClick === void 0 ? void 0 : onAddWidgetClick({ lineNumber: lineNum, fromLineNumber: lineNum, side });
+                }
+            }, renderWidgetLine: renderWidgetLine ? internalRenderWidgetLine : undefined }) }));
+};
+const DiffViewWithMultiSelect = forwardRef(InternalDiffViewWithMultiSelect);
 
-export { DiffModeEnum, DiffView, version };
+export { DiffModeEnum, DiffView, DiffViewWithMultiSelect, version };
 //# sourceMappingURL=index.mjs.map