@pierre/diffs 1.3.0-beta.6 → 1.3.0-beta.8

package/dist/editor/editor.js

@@ -6,8 +6,10 @@ import { EditStack } from "./editStack.js";
 import editor_default from "./editor2.js";
 import { addEventListener, clampDomOffset, extend, getLineNumberAttr, h, round } from "./utils.js";
 import { applyDocumentChangeToLineAnnotations, renderLineAnnotations } from "./lineAnnotations.js";
-import { applyDeleteCharacterToSelections, applyDeleteHardLineForwardToSelections, applyDeleteSoftLineBackwardToSelections, applyDeleteWordBackwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getAutoSurroundReplacementTexts, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, remapSelectionsAfterEdits, resolveIndentEdits, resolveSelectionCut, selectionIntersects } from "./selection.js";
+import { PopoverManager } from "./popover.js";
+import { applyDeleteCharacterToSelections, applyDeleteHardLineForwardToSelections, applyDeleteSoftLineBackwardToSelections, applyDeleteWordBackwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getAutoSurroundReplacementTexts, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectedLineBlocks, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, remapSelectionsAfterEdits, resolveIndentEdits, resolveSelectionCut, selectionIntersects, shiftSelectionLines } from "./selection.js";
 import { MarkerRenderer, markerSeverityDatasetKey } from "./marker.js";
+import { findBracketMatchRanges } from "./matchBrackets.js";
 import { createSpriteElement } from "./sprite.js";
 import { SearchPanelWidget } from "./searchPanel.js";
 import { SelectionActionWidget } from "./selectionAction.js";
@@ -20,6 +22,7 @@ var Editor = class {
 	#options;
 	#metrics = new Metrics();
 	#tokenizer;
+	#popoverManager;
 	#editorEventDisposes;
 	#globalEventDisposes;
 	#selectEventDisposes;
@@ -29,7 +32,7 @@ var Editor = class {
 	#contentWidthCache;
 	#lineYCache = /* @__PURE__ */ new Map();
 	#wrapLineOffsetsCache = /* @__PURE__ */ new Map();
-	#lastAccessedLineElement;
+	#lineElementsCache = /* @__PURE__ */ new Map();
 	#lastAccessedCharX;
 	#globalStyleElement;
 	#editorStyleElement;
@@ -52,6 +55,7 @@ var Editor = class {
 	#searchPanel;
 	#selectionAction;
 	#shouldIgnoreSelectionChange = false;
+	#suppressNativeSelectionSync = false;
 	#contentHasFocus = false;
 	#isComposing = false;
 	#isGutterMouseDown = false;
@@ -65,11 +69,13 @@ var Editor = class {
 	#matches;
 	#scrollingToLine;
 	#scrollingToLineChar;
+	#scrollingToLineFixed = false;
 	#scrollingToLineNoFocus = false;
 	#retainSearchPanelFocus = false;
 	#fontRemeasureScheduled = false;
+	#themeSelectionRefreshFrame;
 	#onDeferTokenize = (lines, themeType) => {
-		this.#fileInstance?.updateRenderCache(lines, themeType);
+		this.#fileInstance?.updateRenderCache(lines, themeType, false);
 		if (this.#renderRange !== void 0 && this.#renderRange.totalLines !== Infinity) {
 			const { startingLine, totalLines } = this.#renderRange;
 			const endLine = Math.min(startingLine + totalLines, this.#textDocument?.lineCount ?? 0);
@@ -82,11 +88,16 @@ var Editor = class {
 	constructor(options = {}) {
 		this.#options = options;
 	}
-	edit(component) {
-		const { useTokenTransformer, enableGutterUtility, enableLineSelection, expandUnchanged, lineHoverHighlight, ...rest } = component.options;
-		const isDiff = component.type === "file-diff";
-		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || expandUnchanged !== true && isDiff || lineHoverHighlight !== "disabled") {
-			component.setOptions({
+	setOptions(options) {
+		this.#options = {
+			...this.#options,
+			...options
+		};
+	}
+	edit(fileInstance) {
+		const { useTokenTransformer, enableGutterUtility, enableLineSelection, expandUnchanged, lineHoverHighlight = "disabled", ...rest } = fileInstance.options;
+		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || expandUnchanged !== true && fileInstance.type === "file-diff" || lineHoverHighlight !== "disabled") {
+			fileInstance.setOptions({
 				...rest,
 				useTokenTransformer: true,
 				enableGutterUtility: false,
@@ -94,11 +105,11 @@ var Editor = class {
 				expandUnchanged: true,
 				lineHoverHighlight: "disabled"
 			});
-			component.rerender();
+			fileInstance.rerender();
 		}
-		this.#fileInstance = component;
+		this.#fileInstance = fileInstance;
 		this.#initialize();
-		this.#detach = component.attachEditor(this);
+		this.#detach = fileInstance.attachEditor(this);
 		return () => this.cleanUp();
 	}
 	/**
@@ -183,7 +194,7 @@ var Editor = class {
 			};
 		});
 		this.#updateSelections(resolvedSelections);
-		this.#scrollToPrimaryCaret(false, "center");
+		this.#scrollToPrimaryCaret();
 	}
 	setMarkers(markers) {
 		const textDocument = this.#textDocument;
@@ -195,6 +206,7 @@ var Editor = class {
 			return;
 		}
 		this.#markerRenderer ??= new MarkerRenderer({
+			popoverManager: this.#getPopoverManager(),
 			getLineHeight: () => this.#metrics.lineHeight,
 			getOverlayElement: () => this.#overlayElement,
 			getGutterWidth: () => this.#getGutterWidth(),
@@ -217,9 +229,13 @@ var Editor = class {
 	blur() {
 		this.#contentElement?.blur();
 	}
-	cleanUp() {
+	cleanUp(recycle = false) {
 		this.#tokenizer?.cleanUp();
 		this.#tokenizer = void 0;
+		if (!recycle) {
+			this.#textDocument = void 0;
+			this.#fileInfo = void 0;
+		}
 		this.#globalEventDisposes?.forEach((dispose) => dispose());
 		this.#globalEventDisposes = void 0;
 		this.#editorEventDisposes?.forEach((dispose) => dispose());
@@ -232,7 +248,7 @@ var Editor = class {
 		this.#contentWidthCache = void 0;
 		this.#lineYCache.clear();
 		this.#wrapLineOffsetsCache.clear();
-		this.#lastAccessedLineElement = void 0;
+		this.#lineElementsCache.clear();
 		this.#lastAccessedCharX = void 0;
 		this.#globalStyleElement?.remove();
 		this.#globalStyleElement = void 0;
@@ -243,6 +259,8 @@ var Editor = class {
 		this.#spriteElement?.remove();
 		this.#spriteElement = void 0;
 		this.#fileContainer = void 0;
+		this.#popoverManager?.cleanUp();
+		this.#popoverManager = void 0;
 		this.#gutterElement = void 0;
 		this.#contentElement?.removeAttribute("contentEditable");
 		this.#contentElement = void 0;
@@ -252,10 +270,14 @@ var Editor = class {
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
 		this.#fontRemeasureScheduled = false;
+		if (this.#themeSelectionRefreshFrame !== void 0) {
+			cancelAnimationFrame(this.#themeSelectionRefreshFrame);
+			this.#themeSelectionRefreshFrame = void 0;
+		}
 		this.#resetState();
 	}
 	/** @internal */
-	__postponeBackgroundTokenizeToNextFrame() {
+	__postponeBgTokenizeToNextFrame() {
 		const tokenizer = this.#tokenizer;
 		if (tokenizer !== void 0) {
 			tokenizer.pauseBackgroundTokenize();
@@ -285,6 +307,7 @@ var Editor = class {
 			break;
 		}
 		if (codeElement === void 0 || contentEl === void 0) return;
+		this.#getPopoverManager().setViewportElements(fileContainer, codeElement);
 		if (this.#fileContainer !== fileContainer) {
 			this.#fileContainer = fileContainer;
 			if (this.#globalStyleElement !== void 0) fileContainer.appendChild(this.#globalStyleElement);
@@ -292,8 +315,7 @@ var Editor = class {
 			if (this.#themeStyleElement !== void 0) shadowRoot.appendChild(this.#themeStyleElement);
 			if (this.#spriteElement !== void 0) shadowRoot.prepend(this.#spriteElement);
 		}
-		const documentReplaced = this.#textDocument === void 0 || this.#fileInfo === void 0 || this.#fileInfo.name !== fileOrDiff.name || this.#fileInfo.lang !== fileOrDiff.lang || this.#fileInfo.cacheKey !== fileOrDiff.cacheKey;
-		if (documentReplaced) {
+		if (this.#textDocument === void 0 || this.#fileInfo === void 0 || this.#fileInfo.name !== fileOrDiff.name || this.#fileInfo.lang !== fileOrDiff.lang || this.#fileInfo.cacheKey !== fileOrDiff.cacheKey) {
 			let contents = "";
 			if ("contents" in fileOrDiff) contents = fileOrDiff.contents;
 			else contents = fileOrDiff.additionLines.join("");
@@ -307,26 +329,28 @@ var Editor = class {
 			};
 			this.#textDocument = textDocument;
 			this.#tokenizer?.cleanUp();
-			this.#tokenizer = new EditorTokenizer({
-				highlighter,
-				textDocument,
-				codeOptions: this.#fileInstance?.options ?? {},
-				onDeferTokenize: this.#onDeferTokenize,
-				setStyle: (css) => {
-					this.#themeStyleElement.textContent = css;
-				},
-				__debug: this.#options.__debug
-			});
+			this.#tokenizer = void 0;
 			this.#resetState();
 			this.#selections = this.#initSelections;
 			requestAnimationFrame(() => {
 				this.#options.onAttach?.(this, this.#fileInstance);
 			});
-			if (this.#textDocument !== void 0 && this.#options.__debug === true) console.log("[diffs/editor] text document changed !!!");
+			if (this.#textDocument !== void 0 && this.#options.__debug === true) console.log("[diffs/editor] text document rebuilt from", fileOrDiff.name);
 		}
-		let fullRerender = false;
+		const textDocument = this.#textDocument;
+		if (this.#tokenizer == null && textDocument != null) this.#tokenizer = new EditorTokenizer({
+			highlighter,
+			textDocument,
+			codeOptions: this.#fileInstance?.options ?? {},
+			matchBrackets: this.#options.matchBrackets,
+			onDeferTokenize: this.#onDeferTokenize,
+			onThemeChange: () => this.#scheduleThemeSelectionRefresh(),
+			setStyle: (css) => {
+				this.#themeStyleElement.textContent = css;
+			},
+			__debug: this.#options.__debug
+		});
 		if (this.#contentElement !== contentEl) {
-			fullRerender = true;
 			this.#gutterElement = gutterEl;
 			this.#contentElement = extend(contentEl, {
 				contentEditable: "true",
@@ -356,12 +380,6 @@ var Editor = class {
 		this.#renderRange = renderRange;
 		this.#viewportWindowLines = renderRange?.totalLines;
 		this.#tokenizer?.prebuildStateStack(renderRange);
-		const fileInstance = this.#fileInstance;
-		const textDocument = this.#textDocument;
-		if (!documentReplaced && fullRerender && fileInstance?.rerenderFromDocument !== void 0 && textDocument !== void 0 && this.#shouldRenderDivergeFromDocument(textDocument)) {
-			fileInstance.rerenderFromDocument(textDocument);
-			return;
-		}
 		this.#markerRenderer?.removePopup();
 		if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerRenderer !== void 0) this.#updateSelections(this.#selections ?? []);
 		if (this.#initSelections !== void 0 && this.#primaryCaretElement !== void 0) {
@@ -384,10 +402,16 @@ var Editor = class {
 	get #isWrap() {
 		return this.#fileInstance?.options.overflow === "wrap";
 	}
+	#getPopoverManager() {
+		return this.#popoverManager ??= new PopoverManager({
+			hasActivePopover: () => this.#selectionAction !== void 0,
+			updateActivePopover: () => this.#updateSelectionActionPopover()
+		});
+	}
 	#resetCache() {
 		this.#lineYCache.clear();
 		this.#wrapLineOffsetsCache.clear();
-		this.#lastAccessedLineElement = void 0;
+		this.#lineElementsCache.clear();
 		this.#lastAccessedCharX = void 0;
 	}
 	#resetState() {
@@ -427,7 +451,7 @@ var Editor = class {
 		this.#globalEventDisposes = [
 			addEventListener(document, "selectionchange", () => {
 				const shadowRoot = this.#fileContainer?.shadowRoot;
-				if (this.#shouldIgnoreSelectionChange || shadowRoot == null || !this.#contentHasFocus) return;
+				if (this.#shouldIgnoreSelectionChange || this.#suppressNativeSelectionSync || shadowRoot == null || !this.#contentHasFocus) return;
 				if (this.#selections !== void 0 && this.#selections.length > 1 && !this.#isContentMouseDown) return;
 				const selectionRaw = document.getSelection();
 				if (selectionRaw == null || typeof selectionRaw.getComposedRanges !== "function") return;
@@ -443,6 +467,10 @@ var Editor = class {
 				if (this.#isContentMouseDown) if (this.#selectionStart !== void 0) selection = createSelectionFrom(this.#selectionStart, selection);
 				else this.#selectionStart = selection;
 				else if (this.#selectionStart !== void 0) selection.direction = createSelectionFrom(this.#selectionStart, selection).direction;
+				else if (this.#selections !== void 0 && this.#selections.length === 1) {
+					const previous = this.#selections[0];
+					if (comparePosition(previous.start, selection.start) === 0 && comparePosition(previous.end, selection.end) === 0) selection.direction = previous.direction;
+				}
 				if (this.#reservedSelections !== void 0) this.#updateSelections([...this.#reservedSelections.filter((reservedSelection) => !selectionIntersects(reservedSelection, selection)), selection]);
 				else this.#updateSelections([selection]);
 			}, { passive: true }),
@@ -474,6 +502,7 @@ var Editor = class {
 		this.#selectEventDisposes = disposes;
 	}
 	#listenContentElement(contentEl, gutterEl) {
+		const { onFocus, onBlur } = this.#options;
 		const targetIsContentElement = (e) => {
 			const target = e.composedPath()[0];
 			return target !== void 0 && (target === contentEl || contentEl.contains(target));
@@ -482,12 +511,15 @@ var Editor = class {
 		this.#editorEventDisposes = [
 			addEventListener(contentEl, "focus", () => {
 				this.#contentHasFocus = true;
+				onFocus?.();
 				if (!this.#isContentMouseDown && !this.#shouldIgnoreSelectionChange && this.#selections !== void 0 && this.#selections.length > 0) this.#setWindowSelection(this.#selections.at(-1));
 			}, { passive: true }),
 			addEventListener(contentEl, "blur", () => {
 				this.#contentHasFocus = false;
+				onBlur?.();
 			}, { passive: true }),
 			addEventListener(contentEl, "pointerdown", (e) => {
+				this.#suppressNativeSelectionSync = false;
 				if (e.pointerType !== "mouse") return;
 				if (this.#isDeletedLineTarget(e)) {
 					this.#setDeletedTextSelectionActive(true);
@@ -543,6 +575,7 @@ var Editor = class {
 					return;
 				}
 				if (!targetIsContentElement(e)) return;
+				this.#suppressNativeSelectionSync = false;
 				const mvShortcut = isMoveCursorShortcut(e);
 				const textDocument = this.#textDocument;
 				if (this.#selections !== void 0 && this.#selections.length > 0 && mvShortcut !== void 0 && textDocument !== void 0) {
@@ -552,10 +585,16 @@ var Editor = class {
 					e.preventDefault();
 					return;
 				}
-				if (e.key === "v" && isPrimaryModifier(e) && this.#options.clipboard !== void 0) {
-					e.preventDefault();
-					queueRender(this.#handleCustomPasteEvent);
-					return;
+				if ((e.key.length === 1 ? e.key.toLowerCase() : e.key) === "v" && isPrimaryModifier(e)) {
+					if (e.repeat && this.#isDiff) {
+						e.preventDefault();
+						return;
+					}
+					if (this.#options.clipboard !== void 0) {
+						e.preventDefault();
+						queueRender(this.#handleCustomPasteEvent);
+						return;
+					}
 				}
 				if (this.#searchPanel !== void 0) {
 					const findAgain = resolveFindAgainShortcut(e);
@@ -719,6 +758,10 @@ var Editor = class {
 				}
 				break;
 			}
+			case "moveLineUp":
+			case "moveLineDown":
+				this.#moveSelectedLines(command === "moveLineUp" ? -1 : 1);
+				break;
 			case "indent":
 			case "outdent":
 				if (this.#selections !== void 0) {
@@ -778,15 +821,32 @@ var Editor = class {
 					if (change !== void 0) this.#applyChange(change, nextSelections);
 				}
 				break;
-			case "selectAll":
-				this.#updateSelections([getDocumentFullSelection(textDocument)]);
+			case "selectAll": {
+				const fullSelection = getDocumentFullSelection(textDocument);
+				this.#updateSelections([fullSelection]);
 				this.focus();
+				const renderedLines = this.#getRenderedEditableLineRange();
+				if (renderedLines !== void 0) {
+					this.#suppressNativeSelectionSync = true;
+					this.#setWindowSelection({
+						start: {
+							line: renderedLines.first,
+							character: 0
+						},
+						end: {
+							line: renderedLines.last,
+							character: textDocument.getLineLength(renderedLines.last)
+						},
+						direction: 1
+					});
+				}
 				break;
+			}
 			case "moveCursorToDocStart":
 			case "moveCursorToDocEnd":
 				{
 					const atEnd = command === "moveCursorToDocEnd";
-					this.#updateSelections([getDocumentBoundarySelection(textDocument, atEnd)]);
+					this.#updateSelections([getDocumentBoundarySelection(textDocument, atEnd, this.#isDiff)]);
 					this.#scrollToPrimaryCaret();
 				}
 				break;
@@ -796,7 +856,7 @@ var Editor = class {
 					const atEnd = command === "expandSelectionDocEnd";
 					const selections = this.#selections;
 					if (selections !== void 0) {
-						this.#updateSelections(extendSelections(selections, getDocumentBoundarySelection(textDocument, atEnd)));
+						this.#updateSelections(extendSelections(selections, getDocumentBoundarySelection(textDocument, atEnd, this.#isDiff)));
 						this.#scrollToPrimaryCaret();
 					}
 				}
@@ -815,6 +875,62 @@ var Editor = class {
 				break;
 		}
 	}
+	#moveSelectedLines(direction) {
+		const textDocument = this.#textDocument;
+		const selections = this.#selections;
+		if (textDocument === void 0 || selections === void 0) return;
+		const blocks = getSelectedLineBlocks(selections);
+		if (blocks.length === 0 || direction < 0 && blocks[0].startLine === 0 || direction > 0 && blocks.at(-1).endLine >= textDocument.lineCount - 1) return;
+		const lineCount = textDocument.lineCount;
+		const lineRangeEnd = (line) => line < lineCount - 1 ? {
+			line: line + 1,
+			character: 0
+		} : {
+			line,
+			character: textDocument.getLineLength(line)
+		};
+		const getLinesText = (lines, appendFinalLineBreak) => {
+			const text = lines.map((line) => textDocument.getLineText(line)).join(textDocument.eol);
+			return appendFinalLineBreak ? text + textDocument.eol : text;
+		};
+		const edits = [];
+		if (direction < 0) for (const block of blocks) {
+			const previousLine = block.startLine - 1;
+			const blockLines = [];
+			for (let line = block.startLine; line <= block.endLine; line++) blockLines.push(line);
+			edits.push({
+				range: {
+					start: {
+						line: previousLine,
+						character: 0
+					},
+					end: lineRangeEnd(block.endLine)
+				},
+				newText: getLinesText([...blockLines, previousLine], block.endLine < lineCount - 1)
+			});
+		}
+		else for (let index = blocks.length - 1; index >= 0; index--) {
+			const block = blocks[index];
+			const nextLine = block.endLine + 1;
+			const blockLines = [];
+			for (let line = block.startLine; line <= block.endLine; line++) blockLines.push(line);
+			edits.push({
+				range: {
+					start: {
+						line: block.startLine,
+						character: 0
+					},
+					end: lineRangeEnd(nextLine)
+				},
+				newText: getLinesText([nextLine, ...blockLines], nextLine < lineCount - 1)
+			});
+		}
+		const lastBlock = blocks.at(-1);
+		const lastLineLengthAfterMove = direction > 0 && lastBlock.endLine === lineCount - 2 ? textDocument.getLineLength(lastBlock.endLine) : textDocument.getLineLength(lineCount - 1);
+		const nextSelections = selections.map((selection) => shiftSelectionLines(selection, direction, lineCount, (line) => line === lineCount - 1 ? lastLineLengthAfterMove : textDocument.getLineLength(line)));
+		const change = textDocument.applyEdits(edits, true, selections, nextSelections, true);
+		if (change !== void 0) this.#applyChange(change, nextSelections);
+	}
 	#handleLayoutResize = () => {
 		const lineAnnotations = this.#lineAnnotations?.length ?? 0;
 		const prevGutterWidth = this.#gutterWidthCache;
@@ -824,7 +940,7 @@ var Editor = class {
 		const gutterWidthChanged = this.#getGutterWidth() !== prevGutterWidth;
 		const contentWidthChanged = this.#getContentWidth() !== prevContentWidth;
 		if (!gutterWidthChanged && !contentWidthChanged) return;
-		this.#lastAccessedLineElement = void 0;
+		this.#lineElementsCache.clear();
 		this.#lastAccessedCharX = void 0;
 		this.#metrics.clearTextWidthCache();
 		if (contentWidthChanged && (this.#isWrap || lineAnnotations > 0)) {
@@ -924,27 +1040,15 @@ var Editor = class {
 			contentEl.style.gridRow = "span " + gridRow;
 			if (gutterEl !== void 0) gutterEl.style.gridRow = "span " + gridRow;
 		}
-		fileInstance.updateRenderCache(dirtyLines, tokenizer.themeType, this.#isDiff && !didLineCountChange, didLineCountChange);
+		fileInstance.updateRenderCache(dirtyLines, tokenizer.themeType, !didLineCountChange);
 		if (didLineCountChange) fileInstance.applyDocumentChange(textDocument, newLineAnnotations, shouldUpdateBuffer);
+		if (this.#isDiff && (this.#diffSyle === "unified" || didLineCountChange)) this.#resetCache();
 		if (newLineAnnotations !== void 0) {
 			this.#lineAnnotations = newLineAnnotations;
 			renderLineAnnotations(newLineAnnotations, contentEl, gutterEl);
 		}
 		if (this.#options.__debug === true) console.log(`[diffs/editor] re-render in: ${round(performance.now() - t2)}ms,`, `tokenize in: ${round(t2 - t)}ms (${dirtyLines.size} dirty lines)`);
 	}
-	#shouldRenderDivergeFromDocument(textDocument) {
-		const contentEl = this.#contentElement;
-		if (contentEl === void 0) return false;
-		for (const child of contentEl.children) {
-			const el = child;
-			const lineType = el.dataset.lineType;
-			const lineNumber = getLineNumberAttr(el);
-			if (lineNumber === void 0 || lineType === void 0 || !isLineEditable(lineType)) continue;
-			const lineIndex = lineNumber - 1;
-			if (lineIndex >= textDocument.lineCount || el.textContent !== textDocument.getLineText(lineIndex)) return true;
-		}
-		return false;
-	}
 	#handleInput(inputType, data) {
 		switch (inputType) {
 			case "insertText": {
@@ -967,6 +1071,7 @@ var Editor = class {
 				this.#deleteSelectionText(true);
 				break;
 			case "deleteSoftLineBackward":
+			case "deleteHardLineBackward":
 				this.#deleteSoftLineBackward();
 				break;
 			case "deleteHardLineForward":
@@ -1038,14 +1143,12 @@ var Editor = class {
 		}
 	}
 	#getScrollMargin() {
-		const componentTop = this.#fileInstance?.top ?? 0;
 		const top = this.#searchPanel !== void 0 ? 48 : 0;
 		const start = this.#getGutterWidth() + this.#metrics.ch;
-		const end = this.#metrics.ch;
-		return `${componentTop + top}px ${end}px 0 ${start}px`;
+		return `${top}px ${this.#metrics.ch}px 0 ${start}px`;
 	}
 	#scrollToLine(line, char = 0, noFocus = false) {
-		this.__postponeBackgroundTokenizeToNextFrame();
+		this.__postponeBgTokenizeToNextFrame();
 		const virtualCaret = h("div", { style: {
 			position: "absolute",
 			left: "0",
@@ -1069,33 +1172,55 @@ var Editor = class {
 			});
 			this.#scrollingToLine = void 0;
 			this.#scrollingToLineChar = void 0;
+			this.#scrollingToLineFixed = false;
 			this.#scrollingToLineNoFocus = false;
 		} else {
-			let yFix = 0;
-			if (this.#scrollingToLine === line && this.#contentElement !== void 0) for (let i = this.#contentElement.childElementCount - 1; i >= 0; i--) {
-				const child = this.#contentElement.children[i];
-				const lineType = child.dataset.lineType;
-				const lineNumber = getLineNumberAttr(child);
-				if (lineType !== void 0 && isLineEditable(lineType) && lineNumber !== void 0) {
-					yFix = (line - lineNumber) * this.#metrics.lineHeight;
-					break;
+			const modelLinePosition = this.#fileInstance?.getLinePosition?.(line + 1);
+			if (modelLinePosition !== void 0) {
+				virtualCaret.style.top = modelLinePosition.top + "px";
+				this.#fileContainer?.shadowRoot?.appendChild(virtualCaret);
+				virtualCaret.scrollIntoView({
+					block: "center",
+					inline: "nearest"
+				});
+				if (modelLinePosition.height > 0) {
+					this.#scrollingToLine = line;
+					this.#scrollingToLineChar = char;
+					this.#scrollingToLineNoFocus = noFocus;
+				} else {
+					this.#scrollingToLine = void 0;
+					this.#scrollingToLineChar = void 0;
+					this.#scrollingToLineNoFocus = false;
 				}
-			}
-			const approximateLineY = ((this.#lineAnnotations ?? []).filter((annotation) => annotation.lineNumber < line).length + line) * this.#metrics.lineHeight + yFix;
-			virtualCaret.style.top = approximateLineY + "px";
-			this.#fileContainer?.shadowRoot?.appendChild(virtualCaret);
-			virtualCaret.scrollIntoView({
-				block: "center",
-				inline: "nearest"
-			});
-			if (this.#scrollingToLine === line && yFix === 0) {
-				this.#scrollingToLine = void 0;
-				this.#scrollingToLineChar = void 0;
-				this.#scrollingToLineNoFocus = false;
 			} else {
-				this.#scrollingToLine = line;
-				this.#scrollingToLineChar = char;
-				this.#scrollingToLineNoFocus = noFocus;
+				let yFix = 0;
+				if (this.#scrollingToLine === line && this.#contentElement !== void 0) for (let i = this.#contentElement.childElementCount - 1; i >= 0; i--) {
+					const child = this.#contentElement.children[i];
+					const lineType = child.dataset.lineType;
+					const lineNumber = getLineNumberAttr(child);
+					if (lineType !== void 0 && isLineEditable(lineType) && lineNumber !== void 0) {
+						yFix = (line - (lineNumber - 1)) * this.#metrics.lineHeight;
+						break;
+					}
+				}
+				const approximateLineY = ((this.#lineAnnotations ?? []).filter((annotation) => annotation.lineNumber < line).length + line) * this.#metrics.lineHeight + yFix;
+				virtualCaret.style.top = approximateLineY + "px";
+				this.#fileContainer?.shadowRoot?.appendChild(virtualCaret);
+				virtualCaret.scrollIntoView({
+					block: "center",
+					inline: "nearest"
+				});
+				if (this.#scrollingToLine === line && (yFix === 0 || this.#scrollingToLineFixed)) {
+					this.#scrollingToLine = void 0;
+					this.#scrollingToLineChar = void 0;
+					this.#scrollingToLineFixed = false;
+					this.#scrollingToLineNoFocus = false;
+				} else {
+					this.#scrollingToLine = line;
+					this.#scrollingToLineChar = char;
+					this.#scrollingToLineFixed = yFix !== 0;
+					this.#scrollingToLineNoFocus = noFocus;
+				}
 			}
 		}
 		virtualCaret.remove();
@@ -1193,8 +1318,15 @@ var Editor = class {
 			});
 		} catch {}
 	}
+	#scheduleThemeSelectionRefresh() {
+		if (this.#themeSelectionRefreshFrame !== void 0) return;
+		this.#themeSelectionRefreshFrame = requestAnimationFrame(() => {
+			this.#themeSelectionRefreshFrame = void 0;
+			if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerRenderer !== void 0) this.#updateSelections(this.#selections ?? []);
+		});
+	}
 	#updateSelections(selections) {
-		this.__postponeBackgroundTokenizeToNextFrame();
+		this.__postponeBgTokenizeToNextFrame();
 		this.#primaryCaretElement = void 0;
 		this.#setSelectedLinesSafe(null);
 		if (selections.length === 0 && this.#matches === void 0 && this.#markerRenderer === void 0) {
@@ -1224,6 +1356,8 @@ var Editor = class {
 				if (!isCollapsedSelection(selection)) this.#renderSelection(renderCtx, "selection", selection);
 				this.#renderCaret(renderCtx, selection, selection === primarySelection);
 			}
+			const bracketMatchRanges = this.#options.matchBrackets !== false && this.#textDocument !== void 0 && this.#tokenizer !== void 0 && isCollapsedSelection(primarySelection) ? findBracketMatchRanges(this.#textDocument, this.#tokenizer, primarySelection.start) : void 0;
+			if (bracketMatchRanges !== void 0) for (const range of bracketMatchRanges) this.#renderSelection(renderCtx, "bracketMatch", range);
 		}
 		const textDocument = this.#textDocument;
 		if (this.#matches !== void 0 && textDocument !== void 0) {
@@ -1252,11 +1386,11 @@ var Editor = class {
 		for (let line = start.line; line <= end.line; line++) {
 			if (!this.#isLineVisible(line)) continue;
 			const isLastLine = line === end.line;
-			const lineText = this.#textDocument.getLineText(line);
 			const startChar = line === start.line ? start.character : 0;
-			const endChar = isLastLine ? end.character : lineText.length;
+			const endChar = isLastLine ? end.character : this.#textDocument.getLineLength(line);
 			if (this.#isWrap) {
 				const contentWidth = this.#getContentWidth();
+				const lineText = this.#textDocument.getLineText(line);
 				if (2 * this.#metrics.ch + this.#metrics.measureTextWidth(lineText) > contentWidth) {
 					this.#renderWrappedSelection(renderCtx, line, lineText, startChar, endChar, isLastLine, type, extraDataset);
 					continue;
@@ -1305,7 +1439,9 @@ var Editor = class {
 		const overlayEls = this.#overlayElements;
 		const rounded = (this.#options.roundedSelection ?? true) && type === "selection";
 		const addRoundedCorner = (line, wrapLine, left, radius) => {
-			const css = `width:${ch}px;transform:translateX(${left}px) translateY(${this.#getLineY(line) + wrapLine * lineHeight}px);`;
+			const top = this.#getLineY(line) + wrapLine * lineHeight;
+			const cornerBg = this.#lineBackgroundColor(line);
+			const css = `width:${ch}px;transform:translateX(${left}px) translateY(${top}px);` + (cornerBg !== void 0 ? `--diffs-selection-corner-bg:${cornerBg};` : "");
 			const dataset = {
 				selectionCorner: "",
 				[radius]: ""
@@ -1395,14 +1531,10 @@ var Editor = class {
 		const [left, wrapLine] = this.#getCharX(line, character);
 		const cacheKey = "caret-" + line + "/" + wrapLine + ":" + character;
 		if (renderCtx.elements.has(cacheKey)) return;
-		const x = left - 1;
-		const y = this.#getLineY(line) + wrapLine * this.#metrics.lineHeight;
-		let caretEl;
-		if (this.#overlayElements?.has(cacheKey) === true) {
-			caretEl = this.#overlayElements.get(cacheKey);
-			this.#overlayElements.delete(cacheKey);
-		} else caretEl = h("div", { dataset: "caret" }, renderCtx.fragment);
-		caretEl.style.transform = `translateX(${x}px) translateY(${y}px)`;
+		const caretEl = h("div", {
+			dataset: "caret",
+			style: { transform: `translateX(${left - 1}px) translateY(${this.#getLineY(line) + wrapLine * this.#metrics.lineHeight}px)` }
+		}, renderCtx.fragment);
 		renderCtx.elements.set(cacheKey, caretEl);
 		if (isPrimary) {
 			caretEl.style.scrollMargin = this.#getScrollMargin();
@@ -1414,15 +1546,17 @@ var Editor = class {
 		const overlayElement = this.#overlayElement;
 		const textDocument = this.#textDocument;
 		const renderSelectionAction = this.#options.renderSelectionAction;
-		if (this.#options.enabledSelectionAction !== true || renderSelectionAction === void 0 || primarySelection === void 0 || isCollapsedSelection(primarySelection) || this.#isContentMouseDown || overlayElement === void 0 || textDocument === void 0) {
+		const cleanup = () => {
 			this.#selectionAction?.cleanup();
 			this.#selectionAction = void 0;
+		};
+		if (this.#options.enabledSelectionAction !== true || renderSelectionAction === void 0 || primarySelection === void 0 || isCollapsedSelection(primarySelection) || this.#isContentMouseDown || overlayElement === void 0 || textDocument === void 0) {
+			cleanup();
 			return;
 		}
 		const head = getCaretPosition(primarySelection);
 		if (!this.#isLineVisible(head.line)) {
-			this.#selectionAction?.cleanup();
-			this.#selectionAction = void 0;
+			cleanup();
 			return;
 		}
 		if (this.#selectionAction === void 0) {
@@ -1438,18 +1572,56 @@ var Editor = class {
 					this.#replaceSelectionText(text, [getActiveSelection()]);
 				},
 				close: () => {
-					this.#selectionAction?.cleanup();
-					this.#selectionAction = void 0;
+					cleanup();
 					this.#scrollToPrimaryCaret();
 				}
 			});
-			this.#selectionAction = new SelectionActionWidget(head.line, selectionActionElement, overlayElement);
+			this.#selectionAction = new SelectionActionWidget(selectionActionElement, overlayElement, () => this.#updateSelectionActionPopover());
+			this.#getPopoverManager().resetPlacement();
 		}
-		const [left, wrapLine] = this.#getCharX(head.line, head.character);
 		const lineHeight = this.#metrics.lineHeight;
-		const top = this.#getLineY(head.line) + wrapLine * lineHeight + lineHeight;
-		this.#selectionAction.line = head.line;
-		this.#selectionAction.reposition(left, top, this.#getGutterWidth());
+		const isBackward = primarySelection.direction === -1;
+		const preferred = {
+			placeAbove: isBackward,
+			anchor: head
+		};
+		const fallback = isBackward ? {
+			placeAbove: false,
+			anchor: primarySelection.end
+		} : {
+			placeAbove: true,
+			anchor: primarySelection.start
+		};
+		const popoverHeight = this.#selectionAction.height;
+		const candidateGeometry = (candidate) => {
+			const [left, candidateWrapLine] = this.#getCharX(candidate.anchor.line, candidate.anchor.character);
+			const rowTop = this.#getLineY(candidate.anchor.line) + candidateWrapLine * lineHeight;
+			const anchorTop = candidate.placeAbove ? rowTop : rowTop + lineHeight;
+			const top = candidate.placeAbove ? anchorTop - popoverHeight : anchorTop;
+			return {
+				top,
+				bottom: top + popoverHeight,
+				left,
+				anchorTop
+			};
+		};
+		const preferredGeometry = candidateGeometry(preferred);
+		const fallbackGeometry = candidateGeometry(fallback);
+		const lineCount = textDocument.lineCount;
+		const atDocumentEdge = isBackward ? head.line < 3 : head.line >= lineCount - 3;
+		const canUseFallback = this.#isLineVisible(fallback.anchor.line);
+		const popoverManager = this.#getPopoverManager();
+		const useFallback = canUseFallback && popoverManager.choosePlacement({
+			preferred: preferredGeometry,
+			fallback: fallbackGeometry,
+			viewport: popoverManager.getPlacementBounds(),
+			popoverHeight,
+			atDocumentEdge
+		}) === "fallback";
+		if (!canUseFallback) popoverManager.setPlacement("preferred");
+		const { placeAbove } = useFallback ? fallback : preferred;
+		const { left, anchorTop } = useFallback ? fallbackGeometry : preferredGeometry;
+		this.#selectionAction.reposition(left, anchorTop, this.#getGutterWidth(), placeAbove);
 	}
 	#openSearchPanel(mode) {
 		if (this.#searchPanel !== void 0) {
@@ -1643,7 +1815,7 @@ var Editor = class {
 		});
 		return file;
 	}
-	#applyChange(change, selections, newLineAnnotations, options) {
+	#applyChange(change, newSelections, newLineAnnotations, options) {
 		const fileRef = this.#getFileRef();
 		const onChange = this.#options.onChange;
 		if (fileRef !== void 0 && onChange !== void 0) onChange(fileRef, newLineAnnotations ?? this.#lineAnnotations);
@@ -1656,8 +1828,8 @@ var Editor = class {
 		this.#lastAccessedCharX = void 0;
 		let renderRange = this.#renderRange;
 		let shouldUpdateBuffer;
-		if (renderRange !== void 0 && selections !== void 0 && selections.length > 0) {
-			const primarySelection = selections.at(-1);
+		if (renderRange !== void 0 && newSelections !== void 0 && newSelections.length > 0) {
+			const primarySelection = newSelections.at(-1);
 			const renderRangeEndLine = renderRange.startingLine + renderRange.totalLines;
 			if (primarySelection.end.line >= renderRangeEndLine) {
 				const widenedTotalLines = primarySelection.end.line - renderRange.startingLine + 1;
@@ -1674,15 +1846,17 @@ var Editor = class {
 		}
 		this.#rerender(change, newLineAnnotations, renderRange, shouldUpdateBuffer);
 		if (options?.skipSearchRefresh !== true && this.#searchPanel !== void 0 && this.#matches !== void 0) this.#searchPanel.updateMatches({ syncSelection: false });
-		if (selections !== void 0) {
-			this.#updateSelections(selections);
+		if (newSelections !== void 0) {
+			this.#updateSelections(newSelections);
 			if (options?.skipFocus !== true) {
-				if (this.#primaryCaretElement !== void 0) this.#primaryCaretElement.scrollIntoView({
-					block: "nearest",
-					inline: "nearest"
+				if (this.#primaryCaretElement !== void 0) requestAnimationFrame(() => {
+					this.#primaryCaretElement?.scrollIntoView({
+						block: "nearest",
+						inline: "nearest"
+					});
 				});
-				else if (selections.length > 0) {
-					const pos = getCaretPosition(selections.at(-1));
+				else if (newSelections.length > 0) {
+					const pos = getCaretPosition(newSelections.at(-1));
 					this.#scrollToLine(pos.line, pos.character);
 				}
 				this.focus({ preventScroll: true });
@@ -1698,12 +1872,37 @@ var Editor = class {
 			}
 		}
 	}
+	#lineBackgroundColor(line) {
+		const lineElement = this.#getLineElement(line);
+		if (lineElement === void 0) return;
+		if (navigator.userAgent.includes("jsdom")) return;
+		const backgroundColor = getComputedStyle(lineElement, "::after").backgroundColor;
+		return backgroundColor === "" || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)" ? void 0 : backgroundColor;
+	}
+	#getRenderedEditableLineRange() {
+		const contentElement = this.#contentElement;
+		if (contentElement === void 0) return;
+		let first;
+		let last;
+		for (const child of contentElement.children) {
+			const el = child;
+			const lineType = el.dataset.lineType;
+			const lineNumber = getLineNumberAttr(el);
+			if (lineNumber === void 0 || lineType === void 0 || !isLineEditable(lineType)) continue;
+			const line = lineNumber - 1;
+			if (first === void 0 || line < first) first = line;
+			if (last === void 0 || line > last) last = line;
+		}
+		return first === void 0 || last === void 0 ? void 0 : {
+			first,
+			last
+		};
+	}
 	#getLineElement(line) {
-		const lastAccessed = this.#lastAccessedLineElement;
-		if (lastAccessed !== void 0 && lastAccessed[0] === line) return lastAccessed[1];
+		let lineElement = this.#lineElementsCache.get(line);
+		if (lineElement !== void 0) return lineElement ?? void 0;
 		const contentElement = this.#contentElement;
 		if (contentElement === void 0) return;
-		let lineElement = null;
 		if (this.#renderRange !== void 0) {
 			const { startingLine } = this.#renderRange;
 			const { children } = contentElement;
@@ -1719,13 +1918,8 @@ var Editor = class {
 			}
 		}
 		lineElement ??= contentElement.querySelector(`[data-line="${line + 1}"]` + (this.#diffSyle === "unified" ? ":not([data-line-type=\"change-deletion\"])" : ""));
-		if (lineElement !== null) {
-			if (lastAccessed !== void 0) {
-				lastAccessed[0] = line;
-				lastAccessed[1] = lineElement;
-			} else this.#lastAccessedLineElement = [line, lineElement];
-			return lineElement;
-		}
+		if (lineElement !== void 0) this.#lineElementsCache.set(line, lineElement);
+		return lineElement ?? void 0;
 	}
 	#getGutterWidth() {
 		if (this.#gutterElement === void 0) return 0;
@@ -1863,11 +2057,7 @@ var Editor = class {
 	#isLineVisible(line) {
 		const lineCount = this.#textDocument?.lineCount ?? 0;
 		if (line < 0 || line >= lineCount) return false;
-		if (this.#renderRange === void 0) return true;
-		const { startingLine, totalLines } = this.#renderRange;
-		if (line < startingLine) return false;
-		if (totalLines === Infinity) return true;
-		return line < startingLine + totalLines;
+		return this.#getLineElement(line) !== void 0;
 	}
 };
 //#endregion