@git-diff-view/react 0.0.26 → 0.0.27

package/index.d.ts

@@ -1,6 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
-import { CSSProperties, ForwardedRef, ReactNode } from 'react';
+import { CSSProperties, ForwardedRef, ReactNode, RefObject } from 'react';
 
 declare class Cache$1<K, V> extends Map<K, V> {
 	name: string;
@@ -9,14 +9,18 @@ declare class Cache$1<K, V> extends Map<K, V> {
 	set(key: K, value: V): this;
 }
 declare class File$1 {
-	readonly raw: string;
+	raw: string;
 	readonly lang: DiffHighlighterLang | string;
 	readonly fileName?: string;
 	ast?: DiffAST;
 	rawFile: Record<number, string>;
 	hasDoRaw: boolean;
 	rawLength?: number;
-	syntaxFile: Record<number, SyntaxLine>;
+	syntaxFile: Record<number, SyntaxLineWithTemplate>;
+	plainFile: Record<number, {
+		value: string;
+		template?: string;
+	}>;
 	hasDoSyntax: boolean;
 	syntaxLength?: number;
 	highlighterName?: DiffHighlighter["name"];
@@ -78,10 +82,14 @@ export declare class DiffFile {
 	buildSplitDiffLines(): void;
 	buildUnifiedDiffLines(): void;
 	getSplitLeftLine: (index: number) => SplitLineItem;
+	getSplitLineByLineNumber: (lineNumber: number, side: SplitSide) => SplitLineItem;
+	getSplitLineIndexByLineNumber: (lineNumber: number, side: SplitSide) => number;
 	getSplitRightLine: (index: number) => SplitLineItem;
 	getSplitHunkLine: (index: number) => DiffHunkItem;
 	onSplitHunkExpand: (dir: "up" | "down" | "all", index: number, needTrigger?: boolean) => void;
 	getUnifiedLine: (index: number) => UnifiedLineItem;
+	getUnifiedLineByLineNumber: (lienNumber: number, side: SplitSide) => UnifiedLineItem;
+	getUnifiedLineIndexByLineNumber: (lineNumber: number, side: SplitSide) => number;
 	getUnifiedHunkLine: (index: number) => DiffHunkItem;
 	onUnifiedHunkExpand: (dir: "up" | "down" | "all", index: number, needTrigger?: boolean) => void;
 	onAllExpand: (mode: "split" | "unified") => void;
@@ -90,8 +98,16 @@ export declare class DiffFile {
 	onAllCollapse: (mode: "split" | "unified") => void;
 	getOldFileContent: () => string;
 	getNewFileContent: () => string;
-	getOldSyntaxLine: (lineNumber: number) => SyntaxLine;
-	getNewSyntaxLine: (lineNumber: number) => SyntaxLine;
+	getOldPlainLine: (lineNumber: number) => {
+		value: string;
+		template?: string;
+	};
+	getOldSyntaxLine: (lineNumber: number) => SyntaxLineWithTemplate;
+	getNewPlainLine: (lineNumber: number) => {
+		value: string;
+		template?: string;
+	};
+	getNewSyntaxLine: (lineNumber: number) => SyntaxLineWithTemplate;
 	subscribe: (listener: (() => void) & {
 		isSyncExternal?: boolean;
 	}) => () => void;
@@ -105,11 +121,19 @@ export declare class DiffFile {
 		hasBuildUnified: boolean;
 		oldFileLines: Record<number, string>;
 		oldFileDiffLines: Record<string, DiffLineItem>;
-		oldFileSyntaxLines: Record<number, SyntaxLine>;
+		oldFilePlainLines: Record<number, {
+			value: string;
+			template?: string;
+		}>;
+		oldFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		oldFilePlaceholderLines: Record<string, boolean>;
 		newFileLines: Record<number, string>;
 		newFileDiffLines: Record<string, DiffLineItem>;
-		newFileSyntaxLines: Record<number, SyntaxLine>;
+		newFilePlainLines: Record<number, {
+			value: string;
+			template?: string;
+		}>;
+		newFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		newFilePlaceholderLines: Record<string, boolean>;
 		splitLineLength: number;
 		unifiedLineLength: number;
@@ -154,11 +178,19 @@ export declare class DiffFile {
 		hasBuildUnified: boolean;
 		oldFileLines: Record<number, string>;
 		oldFileDiffLines: Record<string, DiffLineItem>;
-		oldFileSyntaxLines: Record<number, SyntaxLine>;
+		oldFilePlainLines: Record<number, {
+			value: string;
+			template?: string;
+		}>;
+		oldFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		oldFilePlaceholderLines: Record<string, boolean>;
 		newFileLines: Record<number, string>;
 		newFileDiffLines: Record<string, DiffLineItem>;
-		newFileSyntaxLines: Record<number, SyntaxLine>;
+		newFilePlainLines: Record<number, {
+			value: string;
+			template?: string;
+		}>;
+		newFileSyntaxLines: Record<number, SyntaxLineWithTemplate>;
 		newFilePlaceholderLines: Record<string, boolean>;
 		splitLineLength: number;
 		unifiedLineLength: number;
@@ -229,7 +261,9 @@ export declare class DiffLine {
 	readonly noTrailingNewLine: boolean;
 	changes?: IRange;
 	diffChanges?: DiffRange;
-	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange);
+	plainTemplate?: string;
+	syntaxTemplate?: string;
+	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, syntaxTemplate?: string);
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -372,25 +406,120 @@ export declare const DefaultDiffExpansionStep = 40;
  */
 export declare const HiddenBidiCharsRegex: RegExp;
 export declare const _cacheMap: Cache$1<string, File$1>;
+export declare const changeDefaultComposeLength: (compose: number) => void;
+export declare const checkCurrentLineIsHidden: (diffFile: DiffFile, lineNumber: number, side: SplitSide) => {
+	split: boolean;
+	unified: boolean;
+};
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
-export declare const composeLen = 40;
 export declare const disableCache: () => void;
-export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, }: {
+export declare const getCurrentComposeLength: () => number;
+export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, getAdditionSyntax, getDeletionSyntax, }: {
 	getAdditionRaw: (lineNumber: number) => string;
 	getDeletionRaw: (lineNumber: number) => string;
+	getAdditionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
+	getDeletionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 }) => void;
 export declare const getLang: (fileName: string) => string;
+export declare const getPlainDiffTemplate: ({ diffLine, rawLine, operator, }: {
+	diffLine: DiffLine;
+	rawLine: string;
+	operator: "add" | "del";
+}) => void;
+export declare const getPlainLineTemplate: (line: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
+export declare const getSyntaxDiffTemplate: ({ diffLine, syntaxLine, operator, }: {
+	diffLine: DiffLine;
+	syntaxLine: SyntaxLineWithTemplate;
+	operator: "add" | "del";
+}) => void;
+export declare const getSyntaxLineTemplate: (line: SyntaxLine) => string;
 export declare const getUnifiedContentLine: (diffFile: DiffFile) => DiffUnifiedContentLineItem[];
 export declare const getUnifiedLines: (diffFile: DiffFile) => DiffUnifiedLineItem[];
 export declare const highlighter: DiffHighlighter;
+/**
+ * Checks whether content transformation is currently enabled.
+ *
+ * @returns {boolean} True if transformation is enabled, false otherwise
+ *
+ * @example
+ * ```typescript
+ * if (isTransformEnabled()) {
+ *   console.log('Transformations are active');
+ * }
+ * ```
+ */
+export declare const isTransformEnabled: () => boolean;
 export declare const numIterator: <T>(num: number, cb: (index: number) => T) => T[];
 export declare const parseInstance: DiffParser;
 export declare const processAST: (ast: DiffAST) => {
 	syntaxFileObject: Record<number, SyntaxLine>;
 	syntaxFileLineNumber: number;
 };
+/**
+ * Applies the file transformation function to the provided content if transformation is enabled.
+ *
+ * @param content - The content string to transform
+ * @returns {string} The transformed content if transformation is enabled and configured, otherwise the original content
+ *
+ * @example
+ * ```typescript
+ * const transformed = doTransformFile('some file content');
+ * ```
+ */
+export declare const processTransformForFile: (content: string) => string;
+/**
+ * Applies the transformation function to the provided content if transformation is enabled.
+ *
+ * @param content - The content string to transform
+ * @returns {string} The transformed content if transformation is enabled and configured, otherwise the original content
+ *
+ * @example
+ * ```typescript
+ * const transformed = processTransformTemplateContent('  hello world  ');
+ * ```
+ */
+export declare const processTransformTemplateContent: (content: string) => string;
+export declare const resetDefaultComposeLength: () => void;
+/**
+ * Resets all transformation functions to their default state and disables transformation.
+ *
+ * @example
+ * ```typescript
+ * resetTransform(); // Clears all transformations
+ * ```
+ */
+export declare const resetTransform: () => void;
+/**
+ * ⚠️ **WARNING: DANGEROUS OPERATION** ⚠️
+ *
+ * @param fn - The transformation function to apply to file content
+ * @throws {Error} Throws an error if the provided parameter is not a function
+ *
+ * @example
+ * ```typescript
+ * // Use with caution - this affects global behavior
+ * setTransformFile((content) => content.toUpperCase());
+ * ```
+ */
+export declare const setTransformForFile: (fn: (content: string) => string) => void;
+/**
+ * ⚠️ **WARNING: DANGEROUS OPERATION** ⚠️
+ *
+ * This function modifies global state and may cause unexpected side effects.
+ * You may also need escapeHTML for the content.
+ *
+ * @param fn - The transformation function to help transform template content
+ * @throws {Error} Throws an error if the provided parameter is not a function
+ *
+ * @example
+ * ```typescript
+ * // Use with caution - this affects global behavior
+ * setTransformForTemplateContent((content) => content.trim());
+ * ```
+ */
+export declare const setTransformForTemplateContent: (fn: (content: string) => string) => void;
 export declare const versions: string;
 export declare enum DiffFileLineType {
 	hunk = 1,
@@ -434,6 +563,10 @@ export declare enum NewLineSymbol {
 	NORMAL = 5,
 	NULL = 6
 }
+export declare enum SplitSide {
+	old = 1,
+	new = 2
+}
 export declare function _getAST(raw: string, fileName?: string, lang?: DiffHighlighterLang, theme?: "light" | "dark"): DiffAST;
 export declare function _getAST(raw: string, fileName?: string, lang?: string, theme?: "light" | "dark"): DiffAST;
 export declare function assertNever(_: never, message: string): never;
@@ -441,6 +574,7 @@ export declare function diffChanges(addition: DiffLine, deletion: DiffLine): {
 	addRange: DiffRange;
 	delRange: DiffRange;
 };
+export declare function escapeHtml(string: unknown): string;
 export declare function getFile(raw: string, lang: DiffHighlighterLang, theme: "light" | "dark", fileName?: string, uuid?: string): File$1;
 export declare function getFile(raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string): File$1;
 /**
@@ -461,6 +595,7 @@ export declare function relativeChanges(addition: DiffLine, deletion: DiffLine):
 	addRange: IRange;
 	delRange: IRange;
 };
+export declare let composeLen: number;
 export interface DiffHunkItem extends DiffLineItem {
 	isFirst: boolean;
 	isLast: boolean;
@@ -636,6 +771,9 @@ export type SyntaxLine = {
 		wrapper?: SyntaxNode;
 	}[];
 };
+export type SyntaxLineWithTemplate = SyntaxLine & {
+	template?: string;
+};
 // Generated by dts-bundle-generator v9.5.1
 export type SyntaxNode = {
 	type: string;
@@ -649,10 +787,151 @@ export type SyntaxNode = {
 	};
 	children?: SyntaxNode[];
 };
-export declare enum SplitSide {
-	old = 1,
-	new = 2
-}
+declare const createDiffConfigStore: (props: DiffViewProps<any> & {
+	isMounted: boolean;
+}, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
+	id: import("reactivity-store").Ref<string, string>;
+	setId: (_id: string) => string;
+	mode: import("reactivity-store").Ref<DiffModeEnum, DiffModeEnum>;
+	setMode: (_mode: DiffModeEnum) => DiffModeEnum;
+	mounted: import("reactivity-store").Ref<boolean, boolean>;
+	setMounted: (_mounted: boolean) => boolean;
+	enableWrap: import("reactivity-store").Ref<boolean, boolean>;
+	setEnableWrap: (_enableWrap: boolean) => boolean;
+	enableAddWidget: import("reactivity-store").Ref<boolean, boolean>;
+	setEnableAddWidget: (_enableAddWidget: boolean) => boolean;
+	enableHighlight: import("reactivity-store").Ref<boolean, boolean>;
+	setEnableHighlight: (_enableHighlight: boolean) => boolean;
+	fontSize: import("reactivity-store").Ref<number, number>;
+	setFontSize: (_fontSize: number) => number;
+	extendData: import("reactivity-store").Ref<{
+		oldFile: {
+			[x: string]: {
+				data: any;
+			};
+		};
+		newFile: {
+			[x: string]: {
+				data: any;
+			};
+		};
+	}, {
+		oldFile: {
+			[x: string]: {
+				data: any;
+			};
+		};
+		newFile: {
+			[x: string]: {
+				data: any;
+			};
+		};
+	} | {
+		oldFile: {
+			[x: string]: {
+				data: any;
+			};
+		};
+		newFile: {
+			[x: string]: {
+				data: any;
+			};
+		};
+	}>;
+	setExtendData: (_extendData: DiffViewProps<any>["extendData"]) => void;
+	renderWidgetLine: import("reactivity-store").Ref<({ diffFile, side, lineNumber, onClose, }: {
+		lineNumber: number;
+		side: SplitSide;
+		diffFile: DiffFile;
+		onClose: () => void;
+	}) => import("react").ReactNode, ({ diffFile, side, lineNumber, onClose, }: {
+		lineNumber: number;
+		side: SplitSide;
+		diffFile: DiffFile;
+		onClose: () => void;
+	}) => import("react").ReactNode>;
+	setRenderWidgetLine: (_renderWidgetLine: ({ diffFile, side, lineNumber, onClose, }: {
+		lineNumber: number;
+		side: SplitSide;
+		diffFile: DiffFile;
+		onClose: () => void;
+	}) => import("react").ReactNode) => ({ diffFile, side, lineNumber, onClose, }: {
+		lineNumber: number;
+		side: SplitSide;
+		diffFile: DiffFile;
+		onClose: () => void;
+	}) => import("react").ReactNode;
+	renderExtendLine: import("reactivity-store").Ref<({ diffFile, side, data, lineNumber, onUpdate, }: {
+		lineNumber: number;
+		side: SplitSide;
+		data: any;
+		diffFile: DiffFile;
+		onUpdate: () => void;
+	}) => import("react").ReactNode, ({ diffFile, side, data, lineNumber, onUpdate, }: {
+		lineNumber: number;
+		side: SplitSide;
+		data: any;
+		diffFile: DiffFile;
+		onUpdate: () => void;
+	}) => import("react").ReactNode>;
+	setRenderExtendLine: (_renderExtendLine: ({ diffFile, side, data, lineNumber, onUpdate, }: {
+		lineNumber: number;
+		side: SplitSide;
+		data: any;
+		diffFile: DiffFile;
+		onUpdate: () => void;
+	}) => import("react").ReactNode) => ({ diffFile, side, data, lineNumber, onUpdate, }: {
+		lineNumber: number;
+		side: SplitSide;
+		data: any;
+		diffFile: DiffFile;
+		onUpdate: () => void;
+	}) => import("react").ReactNode;
+	onAddWidgetClick: {
+		current: (lineNumber: number, side: SplitSide) => void;
+	};
+	setOnAddWidgetClick: (_onAddWidgetClick: {
+		current: (lineNumber: number, side: SplitSide) => void;
+	}) => (lineNumber: number, side: SplitSide) => void;
+	onCreateUseWidgetHook: import("reactivity-store").Ref<(hook: import("reactivity-store").UseSelectorWithStore<{
+		widgetSide: import("reactivity-store").Ref<SplitSide, SplitSide>;
+		widgetLineNumber: import("reactivity-store").Ref<number, number>;
+		setWidget: ({ side, lineNumber }: {
+			side?: SplitSide;
+			lineNumber?: number;
+		}) => void;
+	}>) => void, (hook: import("reactivity-store").UseSelectorWithStore<{
+		widgetSide: import("reactivity-store").Ref<SplitSide, SplitSide>;
+		widgetLineNumber: import("reactivity-store").Ref<number, number>;
+		setWidget: ({ side, lineNumber }: {
+			side?: SplitSide;
+			lineNumber?: number;
+		}) => void;
+	}>) => void>;
+	setOnCreateUseWidgetHook: (_onCreateUseWidgetHook: (hook: import("reactivity-store").UseSelectorWithStore<{
+		widgetSide: import("reactivity-store").Ref<SplitSide, SplitSide>;
+		widgetLineNumber: import("reactivity-store").Ref<number, number>;
+		setWidget: ({ side, lineNumber }: {
+			side?: SplitSide;
+			lineNumber?: number;
+		}) => void;
+	}>) => void) => (hook: import("reactivity-store").UseSelectorWithStore<{
+		widgetSide: import("reactivity-store").Ref<SplitSide, SplitSide>;
+		widgetLineNumber: import("reactivity-store").Ref<number, number>;
+		setWidget: ({ side, lineNumber }: {
+			side?: SplitSide;
+			lineNumber?: number;
+		}) => void;
+	}>) => void;
+}>;
+declare const createDiffWidgetStore: (useDiffContextRef: RefObject<ReturnType<typeof createDiffConfigStore>>) => import("reactivity-store").UseSelectorWithStore<{
+	widgetSide: import("reactivity-store").Ref<SplitSide, SplitSide>;
+	widgetLineNumber: import("reactivity-store").Ref<number, number>;
+	setWidget: ({ side, lineNumber }: {
+		side?: SplitSide;
+		lineNumber?: number;
+	}) => void;
+}>;
 export declare enum DiffModeEnum {
 	SplitGitHub = 1,
 	SplitGitLab = 2,
@@ -709,6 +988,7 @@ export type DiffViewProps<T> = {
 		onUpdate: () => void;
 	}) => ReactNode;
 	onAddWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+	onCreateUseWidgetHook?: (hook: ReturnType<typeof createDiffWidgetStore>) => void;
 };
 export type DiffViewProps_1<T> = Omit<DiffViewProps<T>, "data"> & {
 	data?: {

package/package.json

@@ -3,10 +3,11 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
+    "src",
     "dist",
     "styles",
     "index.js",
@@ -60,12 +61,12 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.0.26",
+    "@git-diff-view/core": "^0.0.27",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",
     "lowlight": "^3.3.0",
-    "reactivity-store": "^0.3.9",
+    "reactivity-store": "^0.3.10",
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {

package/src/_base.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/_base_pure.css

@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;

package/src/_com.css

@@ -0,0 +1,172 @@
+* {
+  box-sizing: border-box;
+}
+
+[data-theme="light"] .diff-style-root {
+  --diff-border--: #dedede;
+  --diff-add-content--: #e6ffec;
+  --diff-del-content--: #ffebe9;
+  --diff-add-lineNumber--: #ccffd8;
+  --diff-del-lineNumber--: #ffd7d5;
+  --diff-plain-content--: #ffffff;
+  --diff-expand-content--: #fafafa;
+  --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
+  --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
+  --diff-hunk-content--: #ddf4ff;
+  --diff-hunk-lineNumber--: #c7ecff;
+  --diff-hunk-lineNumber-hover--: #0969da;
+  --diff-add-content-highlight--: #abf2bc;
+  --diff-del-content-highlight--: #ffb3ad;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #fafafa;
+  --diff-hunk-content-color--: #777777;
+
+  color: black;
+}
+
+.diff-style-root .diff-line-syntax-raw *,
+[data-theme="light"] .diff-line-syntax-raw * {
+  color: var(--diff-view-light, inherit);
+  font-weight: var(--diff-view-light-font-weight, inherit);
+}
+
+[data-theme="dark"] .diff-style-root {
+  --diff-border--: #3d444d;
+  --diff-add-content--: #14261f;
+  --diff-del-content--: #311b1f;
+  --diff-add-lineNumber--: #1f4429;
+  --diff-del-lineNumber--: #552527;
+  --diff-plain-content--: #0d1117;
+  --diff-expand-content--: #161b22;
+  --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
+  --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
+  --diff-hunk-content--: #131d2e;
+  --diff-hunk-lineNumber--: #204274;
+  --diff-hunk-lineNumber-hover--: #1f6feb;
+  --diff-add-content-highlight--: #1f572d;
+  --diff-del-content-highlight--: #80312f;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #161b22;
+  --diff-hunk-content-color--: #9298a0;
+
+  color: white;
+}
+
+[data-theme="dark"] .diff-line-syntax-raw * {
+  color: var(--diff-view-dark, inherit);
+  font-weight: var(--diff-view-dark-font-weight, inherit);
+}
+
+table,
+tr,
+td {
+  border-color: transparent;
+  border-width: 0px;
+  text-align: left;
+}
+
+.diff-line-old-num,
+.diff-line-new-num,
+.diff-line-num {
+  text-align: right;
+}
+
+.diff-style-root tr {
+  content-visibility: auto;
+}
+
+.diff-add-widget-wrapper {
+  transform-origin: center;
+  transform: translateX(-50%) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper,
+.diff-line-new-content .diff-add-widget-wrapper {
+  transform: translateX(50%) !important;
+}
+
+.diff-add-widget-wrapper:hover {
+  transform: translateX(-50%) scale(1.1) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper:hover,
+.diff-line-new-content .diff-add-widget-wrapper:hover {
+  transform: translateX(50%) scale(1.1) !important;
+}
+
+.diff-widget-tooltip {
+  position: relative;
+}
+
+.diff-add-widget,
+.diff-widget-tooltip {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  text-transform: none;
+  border-width: 0px;
+  background-color: transparent;
+  background-image: none;
+}
+
+.diff-widget-tooltip::after {
+  display: none;
+  box-sizing: border-box;
+  background-color: #555555;
+  position: absolute;
+  content: attr(data-title);
+  font-size: 11px;
+  padding: 1px 2px;
+  border-radius: 4px;
+  overflow: hidden;
+  top: 50%;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  left: calc(100% + 8px);
+  color: #ffffff;
+}
+
+.diff-widget-tooltip::before {
+  display: none;
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: calc(100% - 2px);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: #555555;
+}
+
+.diff-widget-tooltip:hover {
+  background-color: var(--diff-hunk-lineNumber-hover--);
+  color: white;
+}
+
+.diff-widget-tooltip:hover::before {
+  display: block;
+}
+
+.diff-widget-tooltip:hover::after {
+  display: block;
+}
+
+.diff-line-extend-wrapper * {
+  color: initial;
+}
+
+.diff-line-widget-wrapper * {
+  color: initial;
+}

package/src/_theme.css

@@ -0,0 +1,2 @@
+@import url(highlight.js/styles/github.css);
+@import url(highlight.js/styles/github-dark.css);