@git-diff-view/react 0.0.9 → 0.0.10

package/dist/cjs/index.development.js

@@ -392,7 +392,7 @@ _File_instances = new WeakSet(), _File_doCheck = function _File_doCheck() {
     }
 };
 const getFile = (raw, lang, fileName) => {
-    const key = raw + "--" + "0.0.9" + "--" + lang;
+    const key = raw + "--" + "0.0.10" + "--" + lang;
     if (map.has(key))
         return map.get(key);
     const file = new File(raw, lang, fileName);
@@ -401,6 +401,12 @@ const getFile = (raw, lang, fileName) => {
 };
 const _cacheMap = map;
 
+exports.NewLineSymbol = void 0;
+(function (NewLineSymbol) {
+    NewLineSymbol[NewLineSymbol["CRLF"] = 1] = "CRLF";
+    NewLineSymbol[NewLineSymbol["CR"] = 2] = "CR";
+    NewLineSymbol[NewLineSymbol["LF"] = 3] = "LF";
+})(exports.NewLineSymbol || (exports.NewLineSymbol = {}));
 const maxLength = 1000;
 /** Get the maximum position in the range. */
 function rangeMax(range) {
@@ -437,12 +443,12 @@ function relativeChanges(stringA, stringB) {
             stringARange: {
                 location: _stringA.length,
                 length: stringA.length - _stringA.length,
-                isNewLineSymbolChanged: true,
+                newLineSymbol: aEndStr === "\r\n" ? exports.NewLineSymbol.CRLF : aEndStr.endsWith("\r") ? exports.NewLineSymbol.CR : exports.NewLineSymbol.LF,
             },
             stringBRange: {
                 location: _stringB.length,
                 length: stringB.length - _stringB.length,
-                isNewLineSymbolChanged: true,
+                newLineSymbol: bEndStr === "\r\n" ? exports.NewLineSymbol.CRLF : bEndStr.endsWith("\r") ? exports.NewLineSymbol.CR : exports.NewLineSymbol.LF,
             },
         };
     }
@@ -1064,7 +1070,7 @@ class DiffFile {
         _DiffFile_updateCount.set(this, 0);
         _DiffFile_composeByDiff.set(this, false);
         _DiffFile_highlighterName.set(this, void 0);
-        this._version_ = "0.0.9";
+        this._version_ = "0.0.10";
         this._oldFileContent = "";
         this._oldFileLang = "";
         this._newFileContent = "";
@@ -1856,7 +1862,11 @@ _DiffFile_oldFileResult = new WeakMap(), _DiffFile_newFileResult = new WeakMap()
                 oldLineNumber = newDiffLine.oldLineNumber ? newDiffLine.oldLineNumber + 1 : oldLineNumber;
             }
             else {
-                newFileContent += __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_getOldRawLine).call(this, oldLineNumber++);
+                const oldDiffLine = __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_getOldDiffLine).call(this, oldLineNumber);
+                if (!oldDiffLine) {
+                    newFileContent += __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_getOldRawLine).call(this, oldLineNumber);
+                }
+                oldLineNumber++;
             }
         }
         if (newFileContent === this._oldFileContent)
@@ -1875,7 +1885,11 @@ _DiffFile_oldFileResult = new WeakMap(), _DiffFile_newFileResult = new WeakMap()
                 newLineNumber = oldDiffLine.newLineNumber ? oldDiffLine.newLineNumber + 1 : newLineNumber;
             }
             else {
-                oldFileContent += __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_getNewRawLine).call(this, newLineNumber++);
+                const newDiffLine = __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_getNewDiffLine).call(this, newLineNumber);
+                if (!newDiffLine) {
+                    oldFileContent += __classPrivateFieldGet(this, _DiffFile_instances, "m", _DiffFile_getNewRawLine).call(this, newLineNumber);
+                }
+                newLineNumber++;
             }
         }
         if (oldFileContent === this._newFileContent)
@@ -2076,7 +2090,7 @@ const getUnifiedContentLine = (diffFile) => {
     return lines.filter((line) => line.type === exports.DiffFileLineType.content);
 };
 
-const versions = "0.0.9";
+const versions = "0.0.10";
 
 const useUnmount = (cb, deps) => {
     const ref = React.useRef(cb);
@@ -2174,14 +2188,18 @@ const useDomWidth = ({ selector, enable }) => {
 
 exports.DiffModeEnum = void 0;
 (function (DiffModeEnum) {
-    DiffModeEnum[DiffModeEnum["Split"] = 1] = "Split";
-    DiffModeEnum[DiffModeEnum["Unified"] = 2] = "Unified";
+    // github like
+    DiffModeEnum[DiffModeEnum["SplitGitHub"] = 1] = "SplitGitHub";
+    // gitlab like
+    DiffModeEnum[DiffModeEnum["SplitGitLab"] = 2] = "SplitGitLab";
+    DiffModeEnum[DiffModeEnum["Split"] = 3] = "Split";
+    DiffModeEnum[DiffModeEnum["Unified"] = 4] = "Unified";
 })(exports.DiffModeEnum || (exports.DiffModeEnum = {}));
 const DiffViewContext = React.createContext(null);
 DiffViewContext.displayName = "DiffViewContext";
 const useDiffViewContext = () => React.useContext(DiffViewContext);
 
-const useSyncHeight = ({ selector, side, enable, }) => {
+const useSyncHeight = ({ selector, side, enable }) => {
     const { useDiffContext } = useDiffViewContext();
     const id = useDiffContext(React.useCallback((s) => s.id, []));
     useSafeLayout(() => {
@@ -2366,7 +2384,7 @@ const memoFunc = (func) => {
 };
 const asideWidth = "--diff-aside-width--";
 
-const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber, }) => {
+const _DiffSplitHunkLineGitHub = ({ index, diffFile, side, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -2405,6 +2423,50 @@ const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber, }) => {
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)))) : (React__namespace.createElement("td", { className: "diff-line-hunk-placeholder select-none", colSpan: 2, style: { backgroundColor: `var(${hunkContentBGName})` } },
         React__namespace.createElement("div", { className: "min-h-[28px]" }, "\u2002")))));
 };
+const _DiffSplitHunkLineGitLab = ({ index, diffFile, side, lineNumber, }) => {
+    var _a;
+    const currentHunk = diffFile.getSplitHunkLine(index);
+    const expandEnabled = diffFile.getExpandEnabled();
+    const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+    const isExpandAll = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+    const isFirstLine = currentHunk && currentHunk.index === 0;
+    const isLastLine = currentHunk && currentHunk.isLast;
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", "data-side": exports.SplitSide[side], className: "diff-line diff-line-hunk" },
+        React__namespace.createElement("td", { className: "diff-line-hunk-action sticky left-0 p-[1px] w-[1%] min-w-[40px] select-none", style: {
+                backgroundColor: `var(${hunkLineNumberBGName})`,
+                color: `var(${plainLineNumberColorName})`,
+                width: `var(${asideWidth})`,
+                minWidth: `var(${asideWidth})`,
+                maxWidth: `var(${asideWidth})`,
+            } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px] relative", title: "Expand Down", "data-title": "Expand Down", onClick: () => {
+                diffFile.onSplitHunkExpand("down", index);
+            } },
+            React__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            React__namespace.createElement(ExpandAll, { className: "fill-current" }))) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+                React__namespace.createElement(ExpandDown, { className: "fill-current" })),
+            React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+                React__namespace.createElement(ExpandUp, { className: "fill-current" }))))) : (React__namespace.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
+        React__namespace.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
+            React__namespace.createElement("div", { className: "pl-[1.5em]", style: {
+                    color: `var(${hunkContentColorName})`,
+                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
+};
+const _DiffSplitHunkLine = ({ index, diffFile, side, lineNumber, }) => {
+    const { useDiffContext } = useDiffViewContext();
+    const diffViewMode = useDiffContext(React__namespace.useCallback((s) => s.mode, []));
+    if (diffViewMode === exports.DiffModeEnum.SplitGitHub ||
+        diffViewMode === exports.DiffModeEnum.Split ||
+        diffViewMode === exports.DiffModeEnum.Unified) {
+        return React__namespace.createElement(_DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    }
+    else {
+        return React__namespace.createElement(_DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, side: side, lineNumber: lineNumber });
+    }
+};
 const DiffSplitHunkLine$1 = ({ index, diffFile, side, lineNumber, }) => {
     const currentHunk = diffFile.getSplitHunkLine(index);
     const currentIsShow = currentHunk &&
@@ -2477,20 +2539,20 @@ const DiffString = ({ rawLine, diffLine, operator, }) => {
         const str1 = rawLine.slice(0, range.location);
         const str2 = rawLine.slice(range.location, range.location + range.length);
         const str3 = rawLine.slice(range.location + range.length);
-        const isNewLineSymbolChanged = range.isNewLineSymbolChanged;
+        const isLast = str2.includes("\n");
+        const _str2 = isLast ? str2.replace("\n", "") : str2;
+        const isNewLineSymbolChanged = range.newLineSymbol;
         return (React__namespace.createElement("span", { className: "diff-line-content-raw" },
             React__namespace.createElement("span", { "data-range-start": range.location, "data-range-end": range.location + range.length },
                 str1,
                 React__namespace.createElement("span", { "data-diff-highlight": true, className: "rounded-[0.2em]", style: {
                         backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                    } }, isNewLineSymbolChanged
-                    ? str2 === "\r"
-                        ? "␍"
-                        : str2 === "\n"
-                            ? "␊"
-                            : str2 === "\r\n"
-                                ? "␍␊"
-                                : str2
+                    } }, isLast
+                    ? `${_str2}${isNewLineSymbolChanged === exports.NewLineSymbol.LF
+                        ? "␊"
+                        : isNewLineSymbolChanged === exports.NewLineSymbol.CR
+                            ? "␍"
+                            : "␍␊"}`
                     : str2),
                 str3)));
     }
@@ -2517,23 +2579,23 @@ const DiffSyntax = ({ rawLine, diffLine, operator, syntaxLine, }) => {
                     const str3 = node.value.slice(index1 + range.length);
                     const isStart = str1.length || range.location === node.startIndex;
                     const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
-                    const isNewLineSymbolChanged = range.isNewLineSymbolChanged;
+                    const isLast = str2.includes("\n");
+                    const _str2 = isLast ? str2.replace("\n", "") : str2;
+                    const isNewLineSymbolChanged = range.newLineSymbol;
                     return (React__namespace.createElement("span", { key: index, "data-start": node.startIndex, "data-end": node.endIndex, className: (_e = (_d = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _d === void 0 ? void 0 : _d.className) === null || _e === void 0 ? void 0 : _e.join(" "), style: getStyleObjectFromString(((_f = wrapper === null || wrapper === void 0 ? void 0 : wrapper.properties) === null || _f === void 0 ? void 0 : _f.style) || "") },
                         str1,
                         React__namespace.createElement("span", { "data-diff-highlight": true, style: {
                                 backgroundColor: operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
                                 borderTopLeftRadius: isStart ? "0.2em" : undefined,
                                 borderBottomLeftRadius: isStart ? "0.2em" : undefined,
-                                borderTopRightRadius: isEnd ? "0.2em" : undefined,
-                                borderBottomRightRadius: isEnd ? "0.2em" : undefined,
-                            } }, isNewLineSymbolChanged
-                            ? str2 === "\r"
-                                ? "␍"
-                                : str2 === "\n"
-                                    ? "␊"
-                                    : str2 === "\r\n"
-                                        ? "␍␊"
-                                        : str2
+                                borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                                borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                            } }, isLast
+                            ? `${_str2}${isNewLineSymbolChanged === exports.NewLineSymbol.LF
+                                ? "␊"
+                                : isNewLineSymbolChanged === exports.NewLineSymbol.CR
+                                    ? "␍"
+                                    : "␍␊"}`
                             : str2),
                         str3));
                 }
@@ -2698,7 +2760,7 @@ const DiffSplitViewNormal = React.memo(({ diffFile }) => {
     });
     const width = Math.max(40, _width + 25);
     return (React__namespace.createElement("div", { className: "split-diff-view split-diff-view-wrap w-full flex basis-[50%]" },
-        React__namespace.createElement("div", { className: "old-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", ref: ref1, style: {
+        React__namespace.createElement("div", { className: "old-diff-table-wrapper overflow-x-auto overflow-y-hidden w-full scrollbar-hide scrollbar-disable", ref: ref1, style: {
                 // @ts-ignore
                 [asideWidth]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
@@ -2706,8 +2768,8 @@ const DiffSplitViewNormal = React.memo(({ diffFile }) => {
                 fontSize: "var(--diff-font-size--)",
             } },
             React__namespace.createElement(DiffSplitViewTable, { side: exports.SplitSide.old, diffFile: diffFile })),
-        React__namespace.createElement("div", { className: "diff-split-line w-[1.5px] bg-[#ccc]" }),
-        React__namespace.createElement("div", { className: "new-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", ref: ref2, style: {
+        React__namespace.createElement("div", { className: "diff-split-line w-[1.5px] bg-[rgb(222,222,222)]" }),
+        React__namespace.createElement("div", { className: "new-diff-table-wrapper overflow-x-auto overflow-y-hidden w-full scrollbar-hide scrollbar-disable", ref: ref2, style: {
                 // @ts-ignore
                 [asideWidth]: `${Math.round(width)}px`,
                 overscrollBehaviorX: "none",
@@ -2737,7 +2799,7 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
                     onUpdate: diffFile.notifyAll,
                 }))))) : (React__namespace.createElement("td", { className: "diff-line-extend-old-placeholder p-0 select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002"))),
-        newLineExtend ? (React__namespace.createElement("td", { className: "diff-line-extend-new-content p-0 border-l-[1px] border-l-[#ccc]", colSpan: 2 },
+        newLineExtend ? (React__namespace.createElement("td", { className: "diff-line-extend-new-content p-0 border-l-[1px] border-l-[rgb(222,222,222)]", colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-extend-wrapper" }, (newLineExtend === null || newLineExtend === void 0 ? void 0 : newLineExtend.data) &&
                 (renderExtendLine === null || renderExtendLine === void 0 ? void 0 : renderExtendLine({
                     diffFile,
@@ -2745,7 +2807,7 @@ const _DiffSplitExtendLine = ({ index, diffFile, lineNumber, oldLineExtend, newL
                     lineNumber: newLine.lineNumber,
                     data: newLineExtend.data,
                     onUpdate: diffFile.notifyAll,
-                }))))) : (React__namespace.createElement("td", { className: "diff-line-extend-new-placeholder p-0 border-l-[1px] border-l-[#ccc] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+                }))))) : (React__namespace.createElement("td", { className: "diff-line-extend-new-placeholder p-0 border-l-[1px] border-l-[rgb(222,222,222)] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002")))));
 };
 const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
@@ -2768,7 +2830,7 @@ const DiffSplitExtendLine = ({ index, diffFile, lineNumber, }) => {
     return (React__namespace.createElement(_DiffSplitExtendLine, { index: index, diffFile: diffFile, lineNumber: lineNumber, oldLineExtend: oldLineExtend, newLineExtend: newLineExtend }));
 };
 
-const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+const DiffSplitHunkLineGitHub = ({ index, diffFile, lineNumber, }) => {
     var _a;
     const currentHunk = diffFile.getSplitHunkLine(index);
     const expandEnabled = diffFile.getExpandEnabled();
@@ -2801,6 +2863,66 @@ const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
                     color: `var(${hunkContentColorName})`,
                 } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text))));
 };
+const DiffSplitHunkLineGitLab = ({ index, diffFile, lineNumber, }) => {
+    var _a, _b;
+    const currentHunk = diffFile.getSplitHunkLine(index);
+    const expandEnabled = diffFile.getExpandEnabled();
+    const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+    const isExpandAll = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+    const currentIsShow = currentHunk &&
+        currentHunk.splitInfo &&
+        currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
+    const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
+    const isFirstLine = currentHunk && currentHunk.index === 0;
+    const isLastLine = currentHunk && currentHunk.isLast;
+    if (!currentIsShow && !currentIsPureHunk)
+        return null;
+    return (React__namespace.createElement("tr", { "data-line": `${lineNumber}-hunk`, "data-state": "hunk", className: "diff-line diff-line-hunk" },
+        React__namespace.createElement("td", { className: "diff-line-hunk-action p-[1px] w-[1%] min-w-[40px] select-none relative", style: {
+                backgroundColor: `var(${hunkLineNumberBGName})`,
+                color: `var(${plainLineNumberColorName})`,
+            } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            React__namespace.createElement(ExpandAll, { className: "fill-current" }))) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+                React__namespace.createElement(ExpandDown, { className: "fill-current" })),
+            React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+                React__namespace.createElement(ExpandUp, { className: "fill-current" }))))) : (React__namespace.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
+        React__namespace.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
+            React__namespace.createElement("div", { className: "pl-[1.5em]", style: {
+                    color: `var(${hunkContentColorName})`,
+                } }, ((_a = currentHunk.splitInfo) === null || _a === void 0 ? void 0 : _a.plainText) || currentHunk.text)),
+        React__namespace.createElement("td", { className: "diff-line-hunk-action p-[1px] w-[1%] min-w-[40px] select-none relative border-l-[1px] border-l-[rgb(222,222,222)]", style: {
+                backgroundColor: `var(${hunkLineNumberBGName})`,
+                color: `var(${plainLineNumberColorName})`,
+            } }, couldExpand ? (isFirstLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+            React__namespace.createElement(ExpandUp, { className: "fill-current" }))) : isLastLine ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+            React__namespace.createElement(ExpandDown, { className: "fill-current" }))) : isExpandAll ? (React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]", title: "Expand All", "data-title": "Expand All", onClick: () => diffFile.onSplitHunkExpand("all", index) },
+            React__namespace.createElement(ExpandAll, { className: "fill-current" }))) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", title: "Expand Down", "data-title": "Expand Down", onClick: () => diffFile.onSplitHunkExpand("down", index) },
+                React__namespace.createElement(ExpandDown, { className: "fill-current" })),
+            React__namespace.createElement("button", { className: "w-full diff-widget-tooltip hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]", title: "Expand Up", "data-title": "Expand Up", onClick: () => diffFile.onSplitHunkExpand("up", index) },
+                React__namespace.createElement(ExpandUp, { className: "fill-current" }))))) : (React__namespace.createElement("div", { className: "min-h-[28px]" }, "\u2002"))),
+        React__namespace.createElement("td", { className: "diff-line-hunk-content pr-[10px] align-middle", style: { backgroundColor: `var(${hunkContentBGName})` } },
+            React__namespace.createElement("div", { className: "pl-[1.5em]", style: {
+                    color: `var(${hunkContentColorName})`,
+                } }, ((_b = currentHunk.splitInfo) === null || _b === void 0 ? void 0 : _b.plainText) || currentHunk.text))));
+};
+const DiffSplitHunkLine = ({ index, diffFile, lineNumber, }) => {
+    const { useDiffContext } = useDiffViewContext();
+    const diffViewMode = useDiffContext(React__namespace.useCallback((s) => s.mode, []));
+    if (diffViewMode === exports.DiffModeEnum.SplitGitHub ||
+        diffViewMode === exports.DiffModeEnum.Split ||
+        diffViewMode === exports.DiffModeEnum.Unified) {
+        return React__namespace.createElement(DiffSplitHunkLineGitHub, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    }
+    else {
+        return React__namespace.createElement(DiffSplitHunkLineGitLab, { index: index, diffFile: diffFile, lineNumber: lineNumber });
+    }
+};
 
 const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
     var _a, _b;
@@ -2836,12 +2958,12 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }) => {
                 React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: oldLine.value, diffLine: oldLine.diff, syntaxLine: oldSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-old-placeholder select-none", "data-side": exports.SplitSide[exports.SplitSide.old], style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002"))),
         hasNewLine ? (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("td", { className: "diff-line-new-num group relative pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px] border-l-[1px] border-l-[#ccc]", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineNumberBG, color: `var(${plainLineNumberColorName})` } },
+            React__namespace.createElement("td", { className: "diff-line-new-num group relative pl-[10px] pr-[10px] text-right align-top select-none w-[1%] min-w-[40px] border-l-[1px] border-l-[rgb(222,222,222)]", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineNumberBG, color: `var(${plainLineNumberColorName})` } },
                 hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute left-[100%] translate-x-[-50%] z-[1]", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
                 React__namespace.createElement("span", { "data-line-num": newLine.lineNumber, style: { opacity: hasChange ? undefined : 0.5 } }, newLine.lineNumber)),
             React__namespace.createElement("td", { className: "diff-line-new-content group relative pr-[10px] align-top", "data-side": exports.SplitSide[exports.SplitSide.new], style: { backgroundColor: newLineContentBG } },
                 hasDiff && enableAddWidget && (React__namespace.createElement(DiffSplitAddWidget, { index: index, lineNumber: newLine.lineNumber, side: exports.SplitSide.new, diffFile: diffFile, onWidgetClick: (...props) => { var _a; return (_a = onAddWidgetClick.current) === null || _a === void 0 ? void 0 : _a.call(onAddWidgetClick, ...props); }, className: "absolute right-[100%] translate-x-[50%] z-[1] select-none", onOpenAddWidget: (lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side }) })),
-                React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px] border-l-[#ccc]", style: { backgroundColor: `var(${emptyBGName})` }, "data-side": exports.SplitSide[exports.SplitSide.new], colSpan: 2 },
+                React__namespace.createElement(DiffContent, { enableWrap: true, diffFile: diffFile, rawLine: newLine.value || "", diffLine: newLine.diff, syntaxLine: newSyntaxLine, enableHighlight: enableHighlight })))) : (React__namespace.createElement("td", { className: "diff-line-new-placeholder select-none border-l-[1px] border-l-[rgb(222,222,222)]", style: { backgroundColor: `var(${emptyBGName})` }, "data-side": exports.SplitSide[exports.SplitSide.new], colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002")))));
 };
 const DiffSplitLine = ({ index, diffFile, lineNumber, }) => {
@@ -2870,13 +2992,13 @@ const _DiffSplitWidgetLine = ({ index, diffFile, lineNumber, oldLineWidget, newL
                 onClose: () => setWidget({}),
             })))) : (React__namespace.createElement("td", { className: "diff-line-widget-old-placeholder p-0 select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002"))),
-        newLineWidget ? (React__namespace.createElement("td", { className: "diff-line-widget-new-content p-0 border-l-[1px] border-l-[#ccc]", colSpan: 2 },
+        newLineWidget ? (React__namespace.createElement("td", { className: "diff-line-widget-new-content p-0 border-l-[1px] border-l-[rgb(222,222,222)]", colSpan: 2 },
             React__namespace.createElement("div", { className: "diff-line-widget-wrapper" }, renderWidgetLine === null || renderWidgetLine === void 0 ? void 0 : renderWidgetLine({
                 diffFile,
                 side: exports.SplitSide.new,
                 lineNumber: newLine.lineNumber,
                 onClose: () => setWidget({}),
-            })))) : (React__namespace.createElement("td", { className: "diff-line-widget-new-placeholder p-0 border-l-[1px] border-l-[#ccc] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
+            })))) : (React__namespace.createElement("td", { className: "diff-line-widget-new-placeholder p-0 border-l-[1px] border-l-[rgb(222,222,222)] select-none", style: { backgroundColor: `var(${emptyBGName})` }, colSpan: 2 },
             React__namespace.createElement("span", null, "\u2002")))));
 };
 const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
@@ -2894,7 +3016,7 @@ const DiffSplitWidgetLine = ({ index, diffFile, lineNumber, }) => {
 
 const Style = ({ useSelector, id, }) => {
     const splitRef = useSelector((s) => s.splitRef);
-    return (React__namespace.createElement("style", null, splitRef === exports.SplitSide.old
+    return (React__namespace.createElement("style", { "data-select-style": true }, splitRef === exports.SplitSide.old
         ? `#${id} td[data-side="${exports.SplitSide[exports.SplitSide.new]}"] {user-select: none}`
         : splitRef === exports.SplitSide.new
             ? `#${id} td[data-side="${exports.SplitSide[exports.SplitSide.old]}"] {user-select: none}`
@@ -3252,7 +3374,7 @@ const DiffUnifiedView = React.memo(({ diffFile }) => {
     const lines = getUnifiedContentLine(diffFile);
     return (React__namespace.createElement(DiffWidgetContext.Provider, { value: contextValue },
         React__namespace.createElement("div", { className: "unified-diff-view w-full" },
-            React__namespace.createElement("div", { className: "unified-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable", style: {
+            React__namespace.createElement("div", { className: "unified-diff-table-wrapper overflow-x-auto overflow-y-hidden w-full scrollbar-hide scrollbar-disable", style: {
                     // @ts-ignore
                     [asideWidth]: `${Math.round(width)}px`,
                     fontFamily: "Menlo, Consolas, monospace",
@@ -3386,12 +3508,12 @@ const _InternalDiffView = (props) => {
     ]);
     const value = React.useMemo(() => ({ useDiffContext }), [useDiffContext]);
     return (React__namespace.createElement(DiffViewContext.Provider, { value: value },
-        React__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-version": `${"0.0.9"}`, "data-highlighter": diffFile._getHighlighterName() },
+        React__namespace.createElement("div", { className: "diff-tailwindcss-wrapper", "data-component": "git-diff-view", "data-version": `${"0.0.10"}`, "data-highlighter": diffFile._getHighlighterName() },
             React__namespace.createElement("div", { className: "diff-style-root", style: {
                     // @ts-ignore
                     [diffFontSizeName]: diffViewFontSize + "px",
                 } },
-                React__namespace.createElement("div", { id: `diff-root${diffFileId}`, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode === exports.DiffModeEnum.Split ? (React__namespace.createElement(DiffSplitView, { diffFile: diffFile })) : (React__namespace.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
+                React__namespace.createElement("div", { id: `diff-root${diffFileId}`, className: "diff-view-wrapper" + (className ? ` ${className}` : ""), style: style }, diffViewMode & exports.DiffModeEnum.Split ? (React__namespace.createElement(DiffSplitView, { diffFile: diffFile })) : (React__namespace.createElement(DiffUnifiedView, { diffFile: diffFile })))))));
 };
 const InternalDiffView = React.memo(_InternalDiffView);
 const DiffViewWithRef = (props, ref) => {
@@ -3435,11 +3557,11 @@ const DiffViewWithRef = (props, ref) => {
     React.useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
     if (!diffFile)
         return null;
-    return (React__namespace.createElement(InternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, diffViewFontSize: restProps.diffViewFontSize || 14 })));
+    return (React__namespace.createElement(InternalDiffView, Object.assign({ key: diffFile.getId() }, restProps, { diffFile: diffFile, diffViewMode: restProps.diffViewMode || exports.DiffModeEnum.SplitGitHub, diffViewFontSize: restProps.diffViewFontSize || 14 })));
 };
 const DiffView = React.forwardRef(DiffViewWithRef);
 DiffView.displayName = "DiffView";
-const version = "0.0.9";
+const version = "0.0.10";
 
 exports.DefaultDiffExpansionStep = DefaultDiffExpansionStep;
 exports.DiffFile = DiffFile;