@pierre/diffs 1.3.0-beta.2 → 1.3.0-beta.3

package/dist/editor/editor.js

@@ -1,13 +1,14 @@
 import { getFiletypeFromFileName } from "../utils/getFiletypeFromFileName.js";
 import { isMoveCursorShortcut, isPrimaryModifier, isSafari } from "./platform.js";
 import { resolveEditorCommandFromKeyboardEvent } from "./command.js";
-import { editorCSS, editorGlobalCSS } from "./css.js";
+import editor_default from "./editor2.js";
 import { applyDocumentChangeToLineAnnotations } from "./lineAnnotations.js";
-import { DirectionBackward, DirectionForward, DirectionNone, applyDeleteHardLineForwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, resolveIndentEdits, selectionIntersects } from "./selection.js";
-import { TextDocument } from "./textDocument.js";
+import { SVGSpriteSheet } from "./sprite.js";
 import { addEventListener, debounce, extend, h, round } from "./utils.js";
 import { QuickEditWidget } from "./quickEdit.js";
 import { SearchPanelWidget } from "./searchPanel.js";
+import { DirectionBackward, DirectionForward, DirectionNone, applyDeleteHardLineForwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, resolveIndentEdits, selectionIntersects } from "./selection.js";
+import { TextDocument } from "./textDocument.js";
 import { Metrics, getExpandedAsciiTextColumns, getUnicodeMeasurementOffsets, snapTextOffsetToUnicodeBoundary } from "./textMeasure.js";
 import { EditorTokenizer, renderLineTokens } from "./tokenzier.js";
 
@@ -22,7 +23,6 @@ function clampDomOffset(node, offset) {
 }
 var Editor = class {
 	#options;
-	#editMode = "simple";
 	#wrap = false;
 	#metrics = new Metrics();
 	#tokenizer;
@@ -30,7 +30,8 @@ var Editor = class {
 	#globalEventDisposes;
 	#mouseUpDisposes;
 	#detach;
-	#component;
+	#fileInstance;
+	#fileInstanceType;
 	#fileContents;
 	#lineAnnotations;
 	#textDocument;
@@ -44,7 +45,8 @@ var Editor = class {
 	#globalStyleElement;
 	#editorStyleElement;
 	#themeStyleElement;
-	#componentContainer;
+	#spriteElement;
+	#fileContainer;
 	#contentElement;
 	#overlayElement;
 	#primaryCaretElement;
@@ -60,14 +62,16 @@ var Editor = class {
 	#reservedSelections;
 	#selections;
 	#initSelections;
+	#matches;
 	#scrollingToLine;
 	#scrollingToLineChar;
+	#scrollingToLineNoFocus = false;
 	#retainSearchPanelFocus = false;
 	#emitChange = debounce((fileContents, lineAnnotations) => {
 		this.#options.onChange?.(fileContents, lineAnnotations);
 	}, 500);
 	#onDeferTokenize = (lines, themeType) => {
-		this.#component?.applyLineChange?.(lines, themeType);
+		this.#fileInstance?.applyLineChange?.(lines, themeType);
 		if (this.#renderRange !== void 0 && this.#renderRange.totalLines !== Infinity) {
 			const { startingLine, totalLines } = this.#renderRange;
 			const endLine = Math.min(startingLine + totalLines, this.#textDocument?.lineCount ?? 0);
@@ -93,83 +97,12 @@ var Editor = class {
 			});
 			component.rerender();
 		}
-		this.#component = component;
+		this.#fileInstance = component;
 		this.#initialize();
 		this.#detach = component.attachEditor(this);
 		return () => this.cleanUp();
 	}
-	setSelections(selections) {
-		const textDocument = this.#textDocument;
-		if (textDocument !== void 0) {
-			const resolvedSelections = selections.map((selection) => {
-				const start = textDocument.normalizePosition(selection.start);
-				const end = textDocument.normalizePosition(selection.end);
-				return {
-					direction: selection.direction === "none" ? DirectionNone : selection.direction === "backward" ? DirectionBackward : DirectionForward,
-					start,
-					end
-				};
-			});
-			this.#updateSelections(resolvedSelections);
-			this.#scrollToPrimaryCaret();
-		} else this.#initSelections = selections;
-	}
-	focus(options) {
-		const preventScroll = options?.preventScroll ?? false;
-		const primarySelection = this.#selections?.at(-1);
-		if (primarySelection !== void 0) {
-			const pos = primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start;
-			this.#focus(pos, preventScroll);
-		} else this.#focus(void 0, preventScroll);
-	}
-	cleanUp() {
-		this.#tokenizer?.cleanUp();
-		this.#tokenizer = void 0;
-		this.#globalEventDisposes?.forEach((dispose) => dispose());
-		this.#globalEventDisposes = void 0;
-		this.#editorEventDisposes?.forEach((dispose) => dispose());
-		this.#editorEventDisposes = void 0;
-		this.#detach?.();
-		this.#detach = void 0;
-		this.#component?.setSelectedLines(null);
-		this.#component = void 0;
-		this.#fileContents = void 0;
-		this.#lineAnnotations = void 0;
-		this.#textDocument = void 0;
-		this.#renderRange = void 0;
-		this.#gutterWidthCache = void 0;
-		this.#contentWidthCache = void 0;
-		this.#lineYCache.clear();
-		this.#wrapLineOffsetsCache.clear();
-		this.#lastCharX = void 0;
-		this.#globalStyleElement?.remove();
-		this.#globalStyleElement = void 0;
-		this.#editorStyleElement?.remove();
-		this.#editorStyleElement = void 0;
-		this.#themeStyleElement?.remove();
-		this.#themeStyleElement = void 0;
-		this.#componentContainer = void 0;
-		this.#contentElement?.removeAttribute("contentEditable");
-		this.#contentElement = void 0;
-		this.#overlayElement?.remove();
-		this.#overlayElement = void 0;
-		this.#primaryCaretElement?.remove();
-		this.#primaryCaretElement = void 0;
-		this.#selectionElements?.forEach((el) => el.remove());
-		this.#selectionElements?.clear();
-		this.#selectionElements = void 0;
-		this.#searchPanel?.cleanup();
-		this.#searchPanel = void 0;
-		this.#quickEdit?.cleanup();
-		this.#quickEdit = void 0;
-		this.#resizeObserver?.disconnect();
-		this.#resizeObserver = void 0;
-		this.#shouldIgnoreSelectionChange = false;
-		this.#selectionStart = void 0;
-		this.#selections = void 0;
-		this.#reservedSelections = void 0;
-	}
-	syncWithRender(highlighter, fileContainer, fileContents, lineAnnotations, renderRange, editMode) {
+	syncToRenderedView(highlighter, fileInstanceType, fileContainer, fileContents, lineAnnotations, renderRange) {
 		const shadowRoot = fileContainer.shadowRoot;
 		if (shadowRoot == null) {
 			console.error("[editor] Could not find the shadow root.");
@@ -182,10 +115,10 @@ var Editor = class {
 		}
 		if (codeElement === void 0) return;
 		const contentEl = codeElement.children[1];
-		if (contentEl === void 0) return;
-		this.#editMode = editMode ?? "simple";
-		this.#wrap = this.#component?.options.overflow === "wrap";
-		if (editMode === "advanced" || (lineAnnotations?.length ?? 0) > 0) {
+		if (contentEl === void 0 || contentEl.dataset.content === void 0) return;
+		this.#fileInstanceType = fileInstanceType;
+		this.#wrap = this.#fileInstance?.options.overflow === "wrap";
+		if (fileInstanceType === "diff" || lineAnnotations !== void 0 && lineAnnotations.length > 0) {
 			let startingLine;
 			let endLine;
 			for (const child of contentEl.children) {
@@ -193,9 +126,12 @@ var Editor = class {
 				const line = el.dataset.line;
 				const lineType = el.dataset.lineType;
 				if (line !== void 0) {
-					const lineIndex = Number(line) - 1;
-					startingLine ??= lineIndex;
-					endLine = lineIndex;
+					const lineNumber = parseInt(line, 10);
+					if (!Number.isNaN(lineNumber)) {
+						const lineIndex = lineNumber - 1;
+						startingLine ??= lineIndex;
+						endLine = lineIndex;
+					}
 				}
 				if (lineType === void 0 || !isLineEditable(lineType)) el.contentEditable = "false";
 			}
@@ -210,14 +146,15 @@ var Editor = class {
 				bufferAfter: 0
 			};
 		}
-		if (this.#componentContainer !== fileContainer) {
-			this.#componentContainer = fileContainer;
-			this.#codePaddingTop = Number(getComputedStyle(codeElement).paddingTop.slice(0, -2));
+		if (this.#fileContainer !== fileContainer) {
+			this.#fileContainer = fileContainer;
+			const codePaddingTop = parseInt(getComputedStyle(codeElement).paddingTop.slice(0, -2), 10);
+			this.#codePaddingTop = Number.isNaN(codePaddingTop) ? 0 : codePaddingTop;
 			if (this.#globalStyleElement !== void 0) fileContainer.appendChild(this.#globalStyleElement);
 			if (this.#editorStyleElement !== void 0) shadowRoot.appendChild(this.#editorStyleElement);
 			if (this.#themeStyleElement !== void 0) shadowRoot.appendChild(this.#themeStyleElement);
 		}
-		if (this.#textDocument === void 0 || this.#fileContents === void 0 || this.#fileContents.name !== fileContents.name) {
+		if (this.#textDocument === void 0 || this.#fileContents === void 0 || this.#fileContents.name !== fileContents.name || this.#fileContents.lang !== fileContents.lang) {
 			const textDocument = new TextDocument(fileContents.name, fileContents.contents, fileContents.lang ?? getFiletypeFromFileName(fileContents.name));
 			this.#fileContents = fileContents;
 			this.#textDocument = textDocument;
@@ -225,16 +162,17 @@ var Editor = class {
 			this.#tokenizer = new EditorTokenizer({
 				highlighter,
 				textDocument,
-				codeOptions: this.#component?.options ?? {},
+				codeOptions: this.#fileInstance?.options ?? {},
 				onDeferTokenize: this.#onDeferTokenize,
 				setStyle: (css) => {
 					this.#themeStyleElement.textContent = css;
-				}
+				},
+				__debug: this.#options.__debug
 			});
 			this.#shouldIgnoreSelectionChange = false;
 			this.#selectionElements?.forEach((el) => el.remove());
 			this.#selectionElements?.clear();
-			this.#component?.setSelectedLines(null);
+			this.#fileInstance?.setSelectedLines(null);
 			this.#selectionElements = void 0;
 			this.#selections = void 0;
 			this.#scrollingToLine = void 0;
@@ -245,11 +183,6 @@ var Editor = class {
 			this.#quickEdit = void 0;
 		}
 		if (this.#contentElement !== contentEl) {
-			const guttterEl = contentEl.previousElementSibling;
-			const targetIsContentElement = (e) => {
-				const target = e.composedPath()[0];
-				return target === contentEl || contentEl.contains(target);
-			};
 			this.#metrics.init(contentEl);
 			this.#contentElement = extend(contentEl, {
 				contentEditable: "true",
@@ -262,167 +195,14 @@ var Editor = class {
 				translate: false
 			});
 			if (this.#overlayElement !== void 0) contentEl.after(this.#overlayElement);
-			this.#editorEventDisposes?.forEach((dispose) => dispose());
-			this.#editorEventDisposes = [
-				addEventListener(contentEl, "pointerdown", (e) => {
-					if (e.pointerType !== "mouse") return;
-					if (isSafari() && this.#lineAnnotations !== void 0 && this.#lineAnnotations.length > 0) this.#mouseUpDisposes = [...contentEl.querySelectorAll("[data-line-annotation]")].map((el) => [addEventListener(el, "mouseenter", () => {
-						this.#shouldIgnoreSelectionChange = true;
-					}), addEventListener(el, "mouseleave", () => {
-						this.#shouldIgnoreSelectionChange = false;
-					})]).flat();
-					this.#isContentMouseDown = true;
-					this.#selectionStart = void 0;
-					if (e.button === 0 && isPrimaryModifier(e)) this.#reservedSelections = this.#selections?.map((selection) => ({ ...selection }));
-					if (e.shiftKey) {
-						const primarySelection = this.#selections?.at(-1);
-						if (primarySelection !== void 0) {
-							const pos = primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start;
-							this.#updateWindowSelection({
-								start: pos,
-								end: pos,
-								direction: DirectionNone
-							});
-						}
-						this.#shiftKeyPressed = true;
-					}
-				}, { passive: true }),
-				addEventListener(contentEl, "keydown", (e) => {
-					if (e.key === "Escape") {
-						e.preventDefault();
-						this.#searchPanel?.cleanup();
-						this.#searchPanel = void 0;
-						this.#retainSearchPanelFocus = false;
-						this.#quickEdit?.cleanup();
-						this.#quickEdit = void 0;
-						if (this.#selections !== void 0 && this.#selections.length > 0) {
-							const primarySelection = this.#selections.at(-1);
-							if (!isCollapsedSelection(primarySelection) || this.#selections.length > 1) {
-								const pos = getCaretPosition(primarySelection);
-								this.#updateSelections([{
-									start: pos,
-									end: pos,
-									direction: DirectionNone
-								}]);
-								this.#focus(pos);
-							}
-						}
-						return;
-					}
-					if (!targetIsContentElement(e)) return;
-					const mvShortcut = isMoveCursorShortcut(e);
-					const textDocument = this.#textDocument;
-					if (this.#selections !== void 0 && this.#selections.length > 0 && mvShortcut !== void 0 && textDocument !== void 0) {
-						if (e.shiftKey) this.#updateSelections(mapSelectionShift(textDocument, this.#selections, mvShortcut));
-						else this.#updateSelections(mapCursorMove(textDocument, this.#selections, mvShortcut));
-						this.#scrollToPrimaryCaret();
-						e.preventDefault();
-						return;
-					}
-					const command = resolveEditorCommandFromKeyboardEvent(e);
-					if (command !== void 0) {
-						e.preventDefault();
-						this.#runCommand(command);
-					}
-				}),
-				addEventListener(contentEl, "copy", (e) => {
-					if (!targetIsContentElement(e)) return;
-					e.preventDefault();
-					e.clipboardData?.setData("text", this.#getSelectionText());
-				}),
-				addEventListener(contentEl, "cut", (e) => {
-					if (!targetIsContentElement(e)) return;
-					e.preventDefault();
-					e.clipboardData?.setData("text", this.#getSelectionText());
-					this.#replaceSelectionText("");
-				}),
-				addEventListener(contentEl, "paste", (e) => {
-					if (!targetIsContentElement(e)) return;
-					e.preventDefault();
-					const text = e.clipboardData?.getData("text");
-					if (text !== void 0) this.#replaceSelectionText(text);
-				}),
-				addEventListener(contentEl, "beforeinput", (e) => {
-					if (!targetIsContentElement(e)) return;
-					e.preventDefault();
-					this.#handleInput(e.inputType, e.data);
-				}),
-				addEventListener(contentEl, "compositionstart", (e) => {
-					if (!targetIsContentElement(e)) return;
-					this.#shouldIgnoreSelectionChange = true;
-				}, { passive: true }),
-				addEventListener(contentEl, "compositionend", (e) => {
-					if (!targetIsContentElement(e)) return;
-					this.#shouldIgnoreSelectionChange = false;
-					this.#handleInput("insertText", e.data);
-				}, { passive: true })
-			];
-			if (guttterEl !== null && guttterEl.dataset.gutter !== void 0) this.#editorEventDisposes.push(addEventListener(guttterEl, "pointerdown", (e) => {
-				let target = e.composedPath()[0];
-				if (target?.dataset.lineNumberContent !== void 0) target = target.parentElement ?? void 0;
-				const textDocument = this.#textDocument;
-				if (target === void 0 || textDocument === void 0) return;
-				const lineNumber = target.dataset.columnNumber;
-				const lineType = target.dataset.lineType;
-				if (lineNumber === void 0 || lineType === void 0 || !isLineEditable(lineType)) return;
-				const lineIndex = Number(lineNumber) - 1;
-				const selection = {
-					start: {
-						line: lineIndex,
-						character: 0
-					},
-					end: {
-						line: lineIndex,
-						character: textDocument.getLineText(lineIndex).length
-					},
-					direction: DirectionForward
-				};
-				this.#isGutterMouseDown = true;
-				this.#selectionStart = selection;
-				this.#updateSelections([selection]);
-				this.#focus(selection.end);
-				this.#mouseUpDisposes = [addEventListener(document, "mousemove", (e$1) => {
-					let target$1 = e$1.composedPath()[0];
-					if (target$1?.dataset.lineNumberContent !== void 0) target$1 = target$1?.parentElement ?? void 0;
-					else if (target$1?.tagName === "SPAN") target$1 = target$1?.closest("[data-line]");
-					if (target$1 === void 0) return;
-					const lineNumber$1 = target$1.dataset.columnNumber ?? target$1.dataset.line;
-					const lineType$1 = target$1.dataset.lineType;
-					if (this.#isGutterMouseDown && this.#textDocument !== void 0 && lineNumber$1 !== void 0 && lineType$1 !== void 0 && isLineEditable(lineType$1)) {
-						const lineIndex$1 = Number(lineNumber$1) - 1;
-						let selection$1 = {
-							start: {
-								line: lineIndex$1,
-								character: 0
-							},
-							end: {
-								line: lineIndex$1,
-								character: this.#textDocument.getLineText(lineIndex$1).length
-							},
-							direction: DirectionForward
-						};
-						if (this.#selectionStart !== void 0) selection$1 = createSelectionFrom(this.#selectionStart, selection$1);
-						else this.#selectionStart = selection$1;
-						this.#updateSelections([selection$1]);
-						this.#focus(selection$1.end);
-					}
-				}, { passive: true })];
-			}, { passive: true }));
-			this.#resizeObserver?.disconnect();
-			this.#resizeObserver = new ResizeObserver(() => {
-				requestAnimationFrame(() => {
-					this.#handleLayoutResize();
-				});
-			});
-			this.#resizeObserver.observe(contentEl);
-			this.#resizeObserver.observe(contentEl.parentElement);
+			this.#listenContentElement(contentEl);
 		}
 		this.#lineYCache.clear();
 		this.#wrapLineOffsetsCache.clear();
 		this.#lastCharX = void 0;
 		this.#lineAnnotations = lineAnnotations;
 		this.#renderRange = renderRange;
-		this.#tokenizer?.prebuildStateStackMap(renderRange);
+		this.#tokenizer?.prebuildStateStack(renderRange);
 		if (this.#initSelections !== void 0) {
 			this.setSelections(this.#initSelections);
 			this.#scrollToPrimaryCaret();
@@ -433,33 +213,121 @@ var Editor = class {
 			console.log("[diffs/editor] render file:", fileContents.name, "RenderRange:", startingLine + "-" + (startingLine + totalLines), "of", this.#textDocument.lineCount, "lines");
 		}
 		if (this.#scrollingToLine !== void 0) {
-			this.#scrollToLine(this.#scrollingToLine, this.#scrollingToLineChar);
+			this.#scrollToLine(this.#scrollingToLine, this.#scrollingToLineChar, this.#scrollingToLineNoFocus);
 			this.#scrollingToLine = void 0;
 			this.#scrollingToLineChar = void 0;
-		} else if (this.#selections !== void 0 && this.#selections.length > 0) this.focus({ preventScroll: true });
-		if (this.#retainSearchPanelFocus) {
-			this.#retainSearchPanelFocus = false;
+			this.#scrollingToLineNoFocus = false;
+		} else if (this.#selections !== void 0 && this.#selections.length > 0 && !this.#retainSearchPanelFocus) this.focus({ preventScroll: true });
+		if (this.#retainSearchPanelFocus) this.#searchPanel?.focus();
+		if (this.#quickEdit !== void 0 && this.#isLineVisible(this.#quickEdit.line) && this.#contentElement !== void 0) this.#quickEdit.render(this.#contentElement);
+	}
+	postponeBackgroundTokenizeToNextFrame() {
+		const tokenizer = this.#tokenizer;
+		if (tokenizer !== void 0) {
+			tokenizer.pauseBackgroundTokenize();
 			requestAnimationFrame(() => {
-				this.#searchPanel?.focus();
+				tokenizer.resumeBackgroundTokenize();
 			});
 		}
-		if (this.#quickEdit !== void 0 && this.#isLineVisible(this.#quickEdit.line) && this.#contentElement !== void 0) this.#quickEdit.render(this.#contentElement);
+	}
+	setSelections(selections) {
+		const textDocument = this.#textDocument;
+		if (textDocument !== void 0) {
+			const resolvedSelections = selections.map((selection) => {
+				const start = textDocument.normalizePosition(selection.start);
+				const end = textDocument.normalizePosition(selection.end);
+				return {
+					direction: selection.direction === "none" ? DirectionNone : selection.direction === "backward" ? DirectionBackward : DirectionForward,
+					start,
+					end
+				};
+			});
+			this.#updateSelections(resolvedSelections);
+			this.#scrollToPrimaryCaret();
+		} else this.#initSelections = selections;
+	}
+	focus(options) {
+		const preventScroll = options?.preventScroll ?? false;
+		const primarySelection = this.#selections?.at(-1);
+		if (primarySelection !== void 0) {
+			const pos = primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start;
+			this.#focus(pos, preventScroll);
+		} else this.#focus(void 0, preventScroll);
+	}
+	cleanUp() {
+		this.#tokenizer?.cleanUp();
+		this.#tokenizer = void 0;
+		this.#globalEventDisposes?.forEach((dispose) => dispose());
+		this.#globalEventDisposes = void 0;
+		this.#editorEventDisposes?.forEach((dispose) => dispose());
+		this.#editorEventDisposes = void 0;
+		this.#detach?.();
+		this.#detach = void 0;
+		this.#fileInstance?.setSelectedLines(null);
+		this.#fileInstance = void 0;
+		this.#fileContents = void 0;
+		this.#lineAnnotations = void 0;
+		this.#textDocument = void 0;
+		this.#renderRange = void 0;
+		this.#gutterWidthCache = void 0;
+		this.#contentWidthCache = void 0;
+		this.#lineYCache.clear();
+		this.#wrapLineOffsetsCache.clear();
+		this.#lastCharX = void 0;
+		this.#globalStyleElement?.remove();
+		this.#globalStyleElement = void 0;
+		this.#editorStyleElement?.remove();
+		this.#editorStyleElement = void 0;
+		this.#themeStyleElement?.remove();
+		this.#themeStyleElement = void 0;
+		this.#spriteElement?.remove();
+		this.#spriteElement = void 0;
+		this.#fileContainer = void 0;
+		this.#contentElement?.removeAttribute("contentEditable");
+		this.#contentElement = void 0;
+		this.#overlayElement?.remove();
+		this.#overlayElement = void 0;
+		this.#primaryCaretElement?.remove();
+		this.#primaryCaretElement = void 0;
+		this.#selectionElements?.forEach((el) => el.remove());
+		this.#selectionElements?.clear();
+		this.#selectionElements = void 0;
+		this.#searchPanel?.cleanup();
+		this.#searchPanel = void 0;
+		this.#quickEdit?.cleanup();
+		this.#quickEdit = void 0;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#shouldIgnoreSelectionChange = false;
+		this.#selectionStart = void 0;
+		this.#selections = void 0;
+		this.#reservedSelections = void 0;
 	}
 	#initialize() {
+		this.#globalStyleElement = h("style", {
+			dataset: "editorGlobalCss",
+			textContent: `
+        [data-annotation-slot] {
+          user-select: none;
+          -webkit-user-select: none;
+        }
+      `
+		});
 		this.#editorStyleElement = h("style", {
 			dataset: "editorCss",
-			textContent: editorCSS
+			textContent: editor_default
 		});
 		this.#themeStyleElement = h("style", { dataset: "editorThemeCss" });
-		this.#globalStyleElement = h("style", {
-			dataset: "editorGlobalCss",
-			textContent: editorGlobalCSS
-		});
+		const fragment = document.createElement("div");
+		fragment.innerHTML = SVGSpriteSheet;
+		const sprite = fragment.firstElementChild;
+		this.#spriteElement = sprite instanceof SVGSVGElement ? sprite : void 0;
 		this.#overlayElement = h("div", { dataset: "editorOverlay" });
 		this.#globalEventDisposes = [
 			addEventListener(document, "selectionchange", () => {
-				const shadowRoot = this.#componentContainer?.shadowRoot;
+				const shadowRoot = this.#fileContainer?.shadowRoot;
 				if (this.#shouldIgnoreSelectionChange || shadowRoot == null) return;
+				if (this.#selections !== void 0 && this.#selections.length > 1 && !this.#isContentMouseDown) return;
 				const composedRange = document.getSelection()?.getComposedRanges({ shadowRoots: [shadowRoot] })?.[0];
 				if (composedRange === void 0 || !this.#rangeBelongsToEditor(composedRange)) return;
 				let selection = convertSelection(composedRange, DirectionNone);
@@ -500,6 +368,169 @@ var Editor = class {
 			}, { passive: true })
 		];
 	}
+	#listenContentElement(contentEl) {
+		const gutterEl = contentEl.previousElementSibling;
+		const targetIsContentElement = (e) => {
+			const target = e.composedPath()[0];
+			return target === contentEl || contentEl.contains(target);
+		};
+		this.#editorEventDisposes?.forEach((dispose) => dispose());
+		this.#editorEventDisposes = [
+			addEventListener(contentEl, "pointerdown", (e) => {
+				if (e.pointerType !== "mouse") return;
+				if (isSafari() && this.#lineAnnotations !== void 0 && this.#lineAnnotations.length > 0) this.#mouseUpDisposes = [...contentEl.querySelectorAll("[data-line-annotation]")].map((el) => [addEventListener(el, "mouseenter", () => {
+					this.#shouldIgnoreSelectionChange = true;
+				}), addEventListener(el, "mouseleave", () => {
+					this.#shouldIgnoreSelectionChange = false;
+				})]).flat();
+				this.#isContentMouseDown = true;
+				this.#selectionStart = void 0;
+				if (e.button === 0 && isPrimaryModifier(e)) this.#reservedSelections = this.#selections?.map((selection) => ({ ...selection }));
+				if (e.shiftKey) {
+					const primarySelection = this.#selections?.at(-1);
+					if (primarySelection !== void 0) {
+						const pos = primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start;
+						this.#setWindowSelection({
+							start: pos,
+							end: pos,
+							direction: DirectionNone
+						});
+					}
+					this.#shiftKeyPressed = true;
+				}
+			}, { passive: true }),
+			addEventListener(contentEl, "keydown", (e) => {
+				if (e.key === "Escape") {
+					e.preventDefault();
+					this.#searchPanel?.cleanup();
+					this.#searchPanel = void 0;
+					this.#retainSearchPanelFocus = false;
+					this.#quickEdit?.cleanup();
+					this.#quickEdit = void 0;
+					if (this.#selections !== void 0 && this.#selections.length > 0) {
+						const primarySelection = this.#selections.at(-1);
+						if (!isCollapsedSelection(primarySelection) || this.#selections.length > 1) {
+							const pos = getCaretPosition(primarySelection);
+							this.#updateSelections([{
+								start: pos,
+								end: pos,
+								direction: DirectionNone
+							}]);
+							this.#focus(pos);
+						}
+					}
+					return;
+				}
+				if (!targetIsContentElement(e)) return;
+				const mvShortcut = isMoveCursorShortcut(e);
+				const textDocument = this.#textDocument;
+				if (this.#selections !== void 0 && this.#selections.length > 0 && mvShortcut !== void 0 && textDocument !== void 0) {
+					if (e.shiftKey) this.#updateSelections(mapSelectionShift(textDocument, this.#selections, mvShortcut));
+					else this.#updateSelections(mapCursorMove(textDocument, this.#selections, mvShortcut));
+					this.#scrollToPrimaryCaret();
+					e.preventDefault();
+					return;
+				}
+				const command = resolveEditorCommandFromKeyboardEvent(e);
+				if (command !== void 0) {
+					e.preventDefault();
+					this.#runCommand(command);
+				}
+			}),
+			addEventListener(contentEl, "copy", (e) => {
+				if (!targetIsContentElement(e)) return;
+				e.preventDefault();
+				e.clipboardData?.setData("text", this.#getSelectionText());
+			}),
+			addEventListener(contentEl, "cut", (e) => {
+				if (!targetIsContentElement(e)) return;
+				e.preventDefault();
+				e.clipboardData?.setData("text", this.#getSelectionText());
+				this.#replaceSelectionText("");
+			}),
+			addEventListener(contentEl, "paste", (e) => {
+				if (!targetIsContentElement(e)) return;
+				e.preventDefault();
+				const text = e.clipboardData?.getData("text");
+				if (text !== void 0) this.#replaceSelectionText(text);
+			}),
+			addEventListener(contentEl, "beforeinput", (e) => {
+				if (!targetIsContentElement(e)) return;
+				e.preventDefault();
+				this.#handleInput(e.inputType, e.data);
+			}),
+			addEventListener(contentEl, "compositionstart", (e) => {
+				if (!targetIsContentElement(e)) return;
+				this.#shouldIgnoreSelectionChange = true;
+			}, { passive: true }),
+			addEventListener(contentEl, "compositionend", (e) => {
+				if (!targetIsContentElement(e)) return;
+				this.#shouldIgnoreSelectionChange = false;
+				this.#handleInput("insertText", e.data);
+			}, { passive: true })
+		];
+		if (gutterEl !== null && gutterEl.dataset.gutter !== void 0) this.#editorEventDisposes.push(addEventListener(gutterEl, "pointerdown", (e) => {
+			let target = e.composedPath()[0];
+			if (target?.dataset.lineNumberContent !== void 0) target = target.parentElement ?? void 0;
+			const textDocument = this.#textDocument;
+			if (target === void 0 || textDocument === void 0) return;
+			const columnNumber = target.dataset.columnNumber;
+			const lineType = target.dataset.lineType;
+			if (columnNumber === void 0 || lineType === void 0 || !isLineEditable(lineType)) return;
+			const lineNumber = parseInt(columnNumber, 10);
+			if (Number.isNaN(lineNumber)) return;
+			const line = lineNumber - 1;
+			const selection = {
+				start: {
+					line,
+					character: 0
+				},
+				end: {
+					line,
+					character: textDocument.getLineText(line).length
+				},
+				direction: DirectionForward
+			};
+			this.#isGutterMouseDown = true;
+			this.#selectionStart = selection;
+			this.#updateSelections([selection]);
+			this.#focus(selection.end);
+			this.#mouseUpDisposes = [addEventListener(document, "mousemove", (e$1) => {
+				let target$1 = e$1.composedPath()[0];
+				if (target$1?.dataset.lineNumberContent !== void 0) target$1 = target$1?.parentElement ?? void 0;
+				else if (target$1?.tagName === "SPAN") target$1 = target$1?.closest("[data-line]");
+				if (target$1 === void 0) return;
+				const line$1 = target$1.dataset.columnNumber ?? target$1.dataset.line;
+				const lineType$1 = target$1.dataset.lineType;
+				if (this.#isGutterMouseDown && this.#textDocument !== void 0 && line$1 !== void 0 && lineType$1 !== void 0 && isLineEditable(lineType$1)) {
+					const lineNumber$1 = parseInt(line$1, 10);
+					if (Number.isNaN(lineNumber$1)) return;
+					const lineIndex = lineNumber$1 - 1;
+					let selection$1 = {
+						start: {
+							line: lineIndex,
+							character: 0
+						},
+						end: {
+							line: lineIndex,
+							character: this.#textDocument.getLineText(lineIndex).length
+						},
+						direction: DirectionForward
+					};
+					if (this.#selectionStart !== void 0) selection$1 = createSelectionFrom(this.#selectionStart, selection$1);
+					else this.#selectionStart = selection$1;
+					this.#updateSelections([selection$1]);
+					this.#focus(selection$1.end);
+				}
+			}, { passive: true })];
+		}, { passive: true }));
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = new ResizeObserver(() => {
+			this.#handleLayoutResize();
+		});
+		this.#resizeObserver.observe(contentEl);
+		this.#resizeObserver.observe(contentEl.parentElement);
+	}
 	#runCommand(command) {
 		const textDocument = this.#textDocument;
 		if (textDocument === void 0) return;
@@ -609,7 +640,7 @@ var Editor = class {
 	}
 	#rerender(change, newLineAnnotations, renderRange = this.#renderRange, shouldUpdateBuffer) {
 		const tokenizer = this.#tokenizer;
-		const component = this.#component;
+		const component = this.#fileInstance;
 		const fileContents = this.#fileContents;
 		const textDocument = this.#textDocument;
 		const contentEl = this.#contentElement;
@@ -617,21 +648,25 @@ var Editor = class {
 		if (tokenizer === void 0 || component === void 0 || fileContents === void 0 || textDocument === void 0 || contentEl === void 0 || gutterEl === void 0 || !(gutterEl instanceof HTMLElement) || gutterEl.dataset.gutter === void 0) return;
 		tokenizer.stopBackgroundTokenize();
 		const t = performance.now();
-		const isAdvancedMode = this.#editMode === "advanced";
+		const isFileDiff = this.#fileInstanceType === "diff";
 		const dirtyLines = tokenizer.tokenize(change, renderRange);
 		const t2 = performance.now();
 		if (dirtyLines.size > 0) {
 			const children = contentEl.children;
 			const dirtyLineIndexes = new Set(dirtyLines.keys());
-			if (isAdvancedMode) for (const child of children) {
+			if (isFileDiff) for (const child of children) {
 				const el = child;
-				if (el.dataset.line !== void 0) {
-					const lineIndex = Number(el.dataset.line) - 1;
-					const tokens = dirtyLines.get(lineIndex);
-					if (tokens !== void 0) {
-						el.replaceChildren(...renderLineTokens(tokens, tokenizer.themeType));
-						dirtyLineIndexes.delete(lineIndex);
-						if (dirtyLineIndexes.size === 0) break;
+				const line = el.dataset.line;
+				if (line !== void 0) {
+					const lineNumber = parseInt(line, 10);
+					if (!Number.isNaN(lineNumber)) {
+						const lineIndex = lineNumber - 1;
+						const tokens = dirtyLines.get(lineIndex);
+						if (tokens !== void 0) {
+							el.replaceChildren(...renderLineTokens(tokens, tokenizer.themeType));
+							dirtyLineIndexes.delete(lineIndex);
+							if (dirtyLineIndexes.size === 0) break;
+						}
 					}
 				}
 			}
@@ -639,13 +674,16 @@ var Editor = class {
 				const startingLine = renderRange?.startingLine ?? 0;
 				for (let i = change.startLine - startingLine; i < children.length; i++) {
 					const child = children[i];
-					if (child?.dataset.line !== void 0) {
-						const lineIndex = Number(child.dataset.line) - 1;
-						if (dirtyLines.has(lineIndex)) {
-							const tokens = dirtyLines.get(lineIndex);
-							child.replaceChildren(...renderLineTokens(tokens, tokenizer.themeType));
-							dirtyLineIndexes.delete(lineIndex);
-							if (dirtyLineIndexes.size === 0) break;
+					if (child !== void 0 && child.dataset.line !== void 0) {
+						const lineNumber = parseInt(child.dataset.line, 10);
+						if (!Number.isNaN(lineNumber)) {
+							const lineIndex = lineNumber - 1;
+							if (dirtyLines.has(lineIndex)) {
+								const tokens = dirtyLines.get(lineIndex);
+								child.replaceChildren(...renderLineTokens(tokens, tokenizer.themeType));
+								dirtyLineIndexes.delete(lineIndex);
+								if (dirtyLineIndexes.size === 0) break;
+							}
 						}
 					}
 				}
@@ -678,11 +716,12 @@ var Editor = class {
 			const children = parent.children;
 			for (let i = children.length - 1; i >= 0; i--) {
 				const child = children[i];
-				const { lineIndex, lineAnnotation } = child.dataset;
-				if (lineIndex !== void 0 || lineAnnotation !== void 0) {
-					if (Number(lineAnnotation !== void 0 ? lineAnnotation.split(",")[1] : lineIndex) < change.lineCount) break;
-					child.remove();
-				}
+				const { line, columnNumber, lineAnnotation } = child.dataset;
+				if (line === void 0 && columnNumber === void 0 && lineAnnotation === void 0) continue;
+				const lineIndex = lineAnnotation !== void 0 ? parseInt(lineAnnotation.split(",")[1], 10) : parseInt(line ?? columnNumber, 10) - 1;
+				if (Number.isNaN(lineIndex)) continue;
+				if (lineIndex < change.lineCount) break;
+				child.remove();
 			}
 		}
 		if (change.lineDelta !== 0) {
@@ -690,7 +729,8 @@ var Editor = class {
 			contentEl.style.gridRow = "span " + contentEl.children.length;
 		}
 		component.applyLineChange?.(dirtyLines, tokenizer.themeType);
-		if (change.lineDelta !== 0 || isAdvancedMode) component.applyLayoutChange(textDocument, newLineAnnotations, shouldUpdateBuffer);
+		if (change.lineDelta !== 0 || isFileDiff) component.applyLayoutChange(textDocument, newLineAnnotations, shouldUpdateBuffer);
+		if (isFileDiff) this.#tokenizer?.stopBackgroundTokenize();
 		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)`);
 	}
 	#handleInput(inputType, data) {
@@ -719,40 +759,64 @@ var Editor = class {
 		}
 	}
 	#updateSelections(selections) {
-		if (selections.length === 0) return;
+		this.postponeBackgroundTokenizeToNextFrame();
 		const gutterBuffer = this.#contentElement?.previousElementSibling;
-		const normalizedSelections = mergeOverlappingSelections(selections);
-		const primarySelection = normalizedSelections.at(-1);
-		this.#selections = normalizedSelections;
 		this.#primaryCaretElement = void 0;
-		this.#component?.setSelectedLines(null);
+		this.#fileInstance?.setSelectedLines(null);
 		gutterBuffer?.querySelectorAll("[data-active]").forEach((el) => el.removeAttribute("data-active"));
-		if (isCollapsedSelection(primarySelection)) {
-			const line = primarySelection.start.line + 1;
-			this.#component?.setSelectedLines({
-				start: line,
-				end: line
-			});
-		} else if (gutterBuffer !== void 0 && gutterBuffer instanceof HTMLElement) {
-			const pos = getCaretPosition(primarySelection);
-			gutterBuffer.querySelector(`[data-column-number="${pos.line + 1}"]`)?.setAttribute("data-active", "");
+		if (selections.length === 0 && this.#matches === void 0) {
+			this.#selections = void 0;
+			this.#matches = void 0;
+			this.#selectionElements?.forEach((el) => el.remove());
+			this.#selectionElements?.clear();
+			return;
 		}
 		const fragment = document.createDocumentFragment();
 		const renderCtx = {
 			fragment,
 			elements: /* @__PURE__ */ new Map()
 		};
-		for (const selection of normalizedSelections) {
-			if (!isCollapsedSelection(selection)) this.#renderSelection(renderCtx, selection);
-			this.#renderCaret(renderCtx, selection, selection === primarySelection);
+		if (selections.length > 0) {
+			const normalizedSelections = mergeOverlappingSelections(selections);
+			const primarySelection = normalizedSelections.at(-1);
+			this.#selections = normalizedSelections;
+			if (isCollapsedSelection(primarySelection)) {
+				const line = primarySelection.start.line + 1;
+				this.#fileInstance?.setSelectedLines({
+					start: line,
+					end: line
+				});
+			} else if (gutterBuffer !== void 0 && gutterBuffer instanceof HTMLElement) {
+				const pos = getCaretPosition(primarySelection);
+				gutterBuffer.querySelector(`[data-column-number="${pos.line + 1}"]`)?.setAttribute("data-active", "");
+			}
+			for (const selection of normalizedSelections) {
+				if (!isCollapsedSelection(selection)) this.#renderSelection(renderCtx, selection, "selection");
+				this.#renderCaret(renderCtx, selection, selection === primarySelection);
+			}
+			if (this.#options.enabledQuickEdit === true && !isCollapsedSelection(primarySelection)) this.#renderQuickEditIcon(renderCtx, primarySelection);
+		}
+		const textDocument = this.#textDocument;
+		if (this.#matches !== void 0 && textDocument !== void 0) {
+			const primarySelection = this.#selections?.at(-1);
+			const primaryStartOffset = primarySelection !== void 0 ? textDocument.offsetAt(primarySelection.start) : -1;
+			const primaryEndOffset = primarySelection !== void 0 ? textDocument.offsetAt(primarySelection.end) : -1;
+			for (const [startOffset, endOffset] of this.#matches) {
+				const selection = {
+					start: textDocument.positionAt(startOffset),
+					end: textDocument.positionAt(endOffset),
+					direction: DirectionNone
+				};
+				const isFocused = primaryStartOffset === startOffset && primaryEndOffset === endOffset;
+				this.#renderSelection(renderCtx, selection, "match", isFocused);
+			}
 		}
-		if (this.#options.enabledQuickEdit === true && !isCollapsedSelection(primarySelection)) this.#renderQuickEditIcon(renderCtx, primarySelection);
 		this.#overlayElement?.appendChild(fragment);
 		this.#selectionElements?.forEach((el) => el.remove());
 		this.#selectionElements?.clear();
 		this.#selectionElements = renderCtx.elements;
 	}
-	#updateWindowSelection(selection) {
+	#setWindowSelection(selection) {
 		const winSelection = window.getSelection();
 		if (winSelection === null) return;
 		let { start, end, direction } = selection;
@@ -777,7 +841,7 @@ var Editor = class {
 	#focus(position, preventScroll = true) {
 		if (position !== void 0) {
 			this.#shouldIgnoreSelectionChange = true;
-			this.#updateWindowSelection({
+			this.#setWindowSelection({
 				start: position,
 				end: position,
 				direction: DirectionNone
@@ -788,11 +852,9 @@ var Editor = class {
 					this.#shouldIgnoreSelectionChange = false;
 				});
 			});
-		} else requestAnimationFrame(() => {
-			this.#contentElement?.focus({ preventScroll });
-		});
+		} else this.#contentElement?.focus({ preventScroll });
 	}
-	#scrollToPrimaryCaret() {
+	#scrollToPrimaryCaret(noFocus = false) {
 		const primaryCaretElement = this.#primaryCaretElement;
 		const primarySelection = this.#selections?.at(-1);
 		if (primarySelection === void 0) return;
@@ -801,20 +863,21 @@ var Editor = class {
 				block: "nearest",
 				inline: "nearest"
 			});
-			this.#focus(primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start);
+			if (!noFocus) this.#focus(primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start);
 		} else {
 			const pos = getCaretPosition(primarySelection);
-			this.#scrollToLine(pos.line, pos.character);
+			this.#scrollToLine(pos.line, pos.character, noFocus);
 		}
 	}
 	#getScrollMargin() {
-		const componentTop = this.#component?.top ?? 0;
+		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`;
 	}
-	#scrollToLine(line, char = 0) {
+	#scrollToLine(line, char = 0, noFocus = false) {
+		this.postponeBackgroundTokenizeToNextFrame();
 		const virtualCaret = h("div", { style: {
 			position: "absolute",
 			left: "0",
@@ -832,111 +895,183 @@ var Editor = class {
 				block: "center",
 				inline: "nearest"
 			});
-			this.#focus({
+			if (!noFocus) this.#focus({
 				line,
 				character: char
 			});
-			requestAnimationFrame(() => virtualCaret.remove());
 		} else {
 			const approximateLineY = ((this.#lineAnnotations ?? []).filter((annotation) => annotation.lineNumber < line).length + line) * this.#metrics.lineHeight;
 			virtualCaret.style.top = approximateLineY + "px";
-			this.#componentContainer?.shadowRoot?.appendChild(virtualCaret);
+			this.#fileContainer?.shadowRoot?.appendChild(virtualCaret);
 			this.#scrollingToLine = line;
 			this.#scrollingToLineChar = char;
+			this.#scrollingToLineNoFocus = noFocus;
 			virtualCaret.scrollIntoView({
 				block: "center",
 				inline: "nearest"
 			});
-			requestAnimationFrame(() => virtualCaret.remove());
 		}
+		virtualCaret.remove();
 	}
-	#renderSelection(renderCtx, selection) {
+	#renderSelection(renderCtx, selection, type, isFocused) {
 		if (this.#textDocument === void 0) return;
 		const { start, end } = selection;
-		for (let ln = start.line; ln <= end.line; ln++) {
-			if (!this.#isLineVisible(ln)) continue;
-			const lineText = this.#textDocument.getLineText(ln);
-			const startChar = ln === start.line ? start.character : 0;
-			const endChar = ln === end.line ? end.character : lineText.length;
+		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;
 			if (this.#wrap) {
-				const paddingInline = this.#metrics.ch;
 				const contentWidth = this.#getContentWidth();
-				if (2 * paddingInline + this.#metrics.measureTextWidth(lineText) > contentWidth) {
-					this.#renderWrappedSelection(renderCtx, selection, ln, lineText, startChar, endChar, paddingInline);
+				if (2 * this.#metrics.ch + this.#metrics.measureTextWidth(lineText) > contentWidth) {
+					this.#renderWrappedSelection(renderCtx, line, lineText, startChar, endChar, isLastLine, type, isFocused);
 					continue;
 				}
 			}
 			let left = 0;
 			let width = 0;
-			if (startChar === endChar && startChar === 0) {
-				left = this.#getGutterWidth() + this.#metrics.ch;
-				width = ln === end.line ? 0 : this.#metrics.ch;
-			} else {
-				left = this.#getCharX(ln, startChar)[0];
-				width = endChar === startChar ? 0 : this.#getCharX(ln, endChar)[0] - left;
-			}
-			this.#renderSelectionRange(renderCtx, selection, ln, 0, startChar, endChar, width, left);
+			if (startChar === 0) left = this.#getGutterWidth() + this.#metrics.ch;
+			else left = this.#getCharX(line, startChar)[0];
+			if (startChar === endChar) width = isLastLine ? 0 : this.#metrics.ch;
+			else width = this.#getCharX(line, endChar)[0] - left + (isLastLine ? 0 : this.#metrics.ch);
+			this.#renderSelectionBlock(renderCtx, line, 0, left, width, type, isFocused);
 		}
 	}
-	#renderWrappedSelection(renderCtx, selection, line, lineText, startChar, endChar, paddingInline) {
+	#renderWrappedSelection(renderCtx, line, lineText, startChar, endChar, isLastLine, type, isFocused = false) {
 		const wrapOffsets = this.#wrapLineText(line);
 		const segmentCount = wrapOffsets.length - 1;
-		const lastSegmentIndex = segmentCount - 1;
-		const offsetLeft = this.#getGutterWidth() + paddingInline;
-		for (let w = 0; w < segmentCount; w++) {
-			const segmentStart = wrapOffsets[w];
-			const segmentEnd = wrapOffsets[w + 1];
+		const offsetLeft = this.#getGutterWidth() + this.#metrics.ch;
+		for (let wrapLine = 0; wrapLine < segmentCount; wrapLine++) {
+			const segmentStart = wrapOffsets[wrapLine];
+			const segmentEnd = wrapOffsets[wrapLine + 1];
 			const wrapStartChar = Math.max(startChar, segmentStart);
 			const wrapEndChar = Math.min(endChar, segmentEnd);
 			if (wrapStartChar > wrapEndChar) continue;
-			if (wrapStartChar === wrapEndChar) {
-				const isAtLineStart = wrapStartChar === 0 && w === 0;
-				const isAtLineEnd = wrapEndChar === lineText.length && w === lastSegmentIndex;
-				if (!isAtLineStart && !isAtLineEnd) continue;
-			}
 			let segmentLeft;
 			let segmentWidth;
-			if (wrapStartChar === 0 && wrapEndChar === 0) {
-				segmentLeft = offsetLeft;
-				segmentWidth = line === selection.end.line ? 0 : paddingInline;
-			} else {
+			if (wrapStartChar === 0) segmentLeft = offsetLeft;
+			else {
 				const prefixInSegment = lineText.slice(segmentStart, wrapStartChar);
 				const prefixAsciiColumns = getExpandedAsciiTextColumns(prefixInSegment, this.#metrics.tabSize);
 				segmentLeft = offsetLeft + (prefixAsciiColumns !== -1 ? prefixAsciiColumns * this.#metrics.ch : this.#metrics.measureTextWidth(prefixInSegment));
-				if (wrapStartChar === wrapEndChar) segmentWidth = 0;
-				else {
-					const selectionInSegment = lineText.slice(wrapStartChar, wrapEndChar);
-					const selectionAsciiWidth = getExpandedAsciiTextColumns(selectionInSegment, this.#metrics.tabSize);
-					segmentWidth = selectionAsciiWidth !== -1 ? selectionAsciiWidth * this.#metrics.ch : this.#metrics.measureTextWidth(selectionInSegment);
-				}
 			}
-			this.#renderSelectionRange(renderCtx, selection, line, w, wrapStartChar, wrapEndChar, segmentWidth, segmentLeft, w === lastSegmentIndex);
+			if (wrapStartChar === wrapEndChar) segmentWidth = wrapLine === segmentCount - 1 ? 0 : this.#metrics.ch;
+			else {
+				const selectionInSegment = lineText.slice(wrapStartChar, wrapEndChar);
+				const selectionAsciiWidth = getExpandedAsciiTextColumns(selectionInSegment, this.#metrics.tabSize);
+				segmentWidth = selectionAsciiWidth !== -1 ? selectionAsciiWidth * this.#metrics.ch : this.#metrics.measureTextWidth(selectionInSegment);
+				if (!isLastLine && wrapLine === segmentCount - 1) segmentWidth += this.#metrics.ch;
+			}
+			this.#renderSelectionBlock(renderCtx, line, wrapLine, segmentLeft, segmentWidth, type, isFocused);
 		}
 	}
-	#renderSelectionRange(renderCtx, selection, ln, wrapLine, startChar, endChar, width, left, applyEolSpacing = true) {
-		const css = `width:${width + (!applyEolSpacing || selection.end.line === ln || startChar === endChar && ln !== selection.start.line ? 0 : this.#metrics.ch)}px;transform:translateY(${this.#getLineY(ln) + wrapLine * this.#metrics.lineHeight}px) translateX(${left}px);`;
-		const cacheKey = "selection-range-" + css;
+	#renderSelectionBlock(renderCtx, line, wrapLine, left, width, type, isFocused = false) {
+		if (width === 0) return;
+		const { ch, lineHeight } = this.#metrics;
+		const y = this.#getLineY(line) + wrapLine * lineHeight;
+		const css = `width:${width}px;transform:translateX(${left}px) translateY(${y}px);`;
+		const cacheKey = `${type}-block-${left}-${y}-${width}-${isFocused ? "f" : ""}`;
 		const selectionEls = this.#selectionElements;
-		if (renderCtx.elements.has(cacheKey)) return;
-		let rangeEl;
+		const rounded = (this.#options.roundedSelection ?? true) && type === "selection";
+		const addRoundedCorner = (line$1, wrapLine$1, left$1, radius) => {
+			const top = this.#getLineY(line$1) + wrapLine$1 * lineHeight;
+			const css$1 = `width:${ch}px;transform:translateX(${left$1}px) translateY(${top}px);`;
+			const dataset = {
+				selectionCorner: "",
+				[radius]: ""
+			};
+			const cacheKeyPrefix = `${type}-block-${left$1}-${top}-1ch`;
+			let cacheKey$1 = cacheKeyPrefix + "-" + radius;
+			if (radius === "rbl") {
+				const prevCornerKey = cacheKeyPrefix + "-rtl";
+				const prevCorner = renderCtx.elements.get(prevCornerKey);
+				if (prevCorner !== void 0) {
+					prevCorner.remove();
+					renderCtx.elements.delete(prevCornerKey);
+					cacheKey$1 += "-rtl";
+					dataset.rtl = "";
+				}
+			}
+			let cornerEl = renderCtx.elements.get(cacheKey$1);
+			if (cornerEl !== void 0) return;
+			if (selectionEls?.has(cacheKey$1) === true) {
+				cornerEl = selectionEls.get(cacheKey$1);
+				selectionEls.delete(cacheKey$1);
+			} else cornerEl = h("div", {
+				dataset: "selectionRange",
+				style: { cssText: css$1 },
+				children: [h("div", { dataset })]
+			}, renderCtx.fragment);
+			renderCtx.elements.set(cacheKey$1, cornerEl);
+		};
+		const addRadiusStyle = (element) => {
+			const end = left + width;
+			const dataset = element.dataset;
+			const previousSelectionRange = renderCtx.previousSelectionRange;
+			if (previousSelectionRange === void 0 || previousSelectionRange.line !== line || previousSelectionRange.wrapLine !== wrapLine) renderCtx.previousSelectionRange = {
+				element,
+				line,
+				wrapLine,
+				left,
+				width
+			};
+			if (previousSelectionRange === void 0 || end <= previousSelectionRange.left) [
+				"rtl",
+				"rtr",
+				"rbl",
+				"rbr"
+			].forEach((key) => {
+				dataset[key] = "";
+			});
+			else {
+				const prevLine = previousSelectionRange.line;
+				const prevWrapLine = previousSelectionRange.wrapLine;
+				const prevLeft = previousSelectionRange.left;
+				const prevDataset = previousSelectionRange.element.dataset;
+				const prevEnd = prevLeft + previousSelectionRange.width;
+				if (prevLeft > left) addRoundedCorner(prevLine, prevWrapLine, prevLeft - ch, "rbr");
+				delete prevDataset.rbl;
+				delete dataset.rtl;
+				delete dataset.rtr;
+				if (end >= prevEnd) delete prevDataset.rbr;
+				if (end > prevEnd) {
+					addRoundedCorner(prevLine, prevWrapLine, prevEnd, "rbl");
+					dataset.rtr = "";
+				}
+				if (end < prevEnd) addRoundedCorner(line, wrapLine, end, "rtl");
+				if (left < prevLeft) dataset.rtl = "";
+				dataset.rbl = "";
+				dataset.rbr = "";
+			}
+		};
+		let rangeEl = renderCtx.elements.get(cacheKey);
+		if (rangeEl !== void 0) {
+			if (rounded) addRadiusStyle(rangeEl);
+			return;
+		}
 		if (selectionEls?.has(cacheKey) === true) {
 			rangeEl = selectionEls.get(cacheKey);
 			selectionEls.delete(cacheKey);
-		} else rangeEl = h("div", {
-			dataset: "selectionRange",
-			style: { cssText: css }
-		}, renderCtx.fragment);
+		} else {
+			rangeEl = h("div", {
+				dataset: type + "Range",
+				style: { cssText: css }
+			}, renderCtx.fragment);
+			if (type === "match" && isFocused === true) rangeEl.dataset.focus = "";
+		}
+		if (rounded) addRadiusStyle(rangeEl);
 		renderCtx.elements.set(cacheKey, rangeEl);
 	}
 	#renderCaret(renderCtx, selection, isPrimary) {
 		const { line, character } = getCaretPosition(selection);
 		if (!this.#isLineVisible(line)) return;
 		const [left, wrapLine] = this.#getCharX(line, character);
-		const cacheKey = "caret-" + line + "(" + wrapLine + ")-" + character;
+		const cacheKey = "caret-" + line + "/" + wrapLine + ":" + character;
 		if (renderCtx.elements.has(cacheKey)) return;
 		const caretEl = h("div", {
 			dataset: "caret",
-			style: { transform: `translateY(${this.#getLineY(line) + wrapLine * this.#metrics.lineHeight}px) translateX(${left - 1}px)` }
+			style: { transform: `translateX(${left - 1}px) translateY(${this.#getLineY(line) + wrapLine * this.#metrics.lineHeight}px)` }
 		}, renderCtx.fragment);
 		renderCtx.elements.set(cacheKey, caretEl);
 		if (isPrimary) {
@@ -962,7 +1097,7 @@ var Editor = class {
 			cleanUpQuickEdit();
 			const textDocument = this.#textDocument;
 			const renderQuickEdit = this.#options.renderQuickEdit;
-			const fileContainer = this.#componentContainer;
+			const fileContainer = this.#fileContainer;
 			if (textDocument === void 0 || renderQuickEdit === void 0 || fileContainer == null) return;
 			const line$1 = selection.end.line;
 			const lineText = textDocument.getLineText(line$1);
@@ -1001,48 +1136,60 @@ var Editor = class {
 	#renderSearchPanel() {
 		this.#searchPanel?.cleanup();
 		const textDocument = this.#textDocument;
-		const preElement = this.#componentContainer?.shadowRoot?.querySelector("pre");
+		const preElement = this.#fileContainer?.shadowRoot?.querySelector("pre");
+		const selections = this.#selections;
 		if (textDocument === void 0 || preElement == null) return;
 		let defaultQuery = "";
 		let initialMatch = void 0;
-		const selections = this.#selections;
 		if (selections !== void 0 && selections.length > 0) {
 			let primarySelection = selections.at(-1);
 			if (isCollapsedSelection(primarySelection)) {
 				primarySelection = expandCollapsedSelectionToWord(textDocument, primarySelection);
 				this.#updateSelections([...selections.slice(0, -1), primarySelection]);
 				const selectionText = textDocument.getText(primarySelection);
-				if (!selectionText.includes("\n")) {
+				if (selectionText !== "" && !selectionText.includes("\n")) {
 					defaultQuery = selectionText;
 					initialMatch = [textDocument.offsetAt(primarySelection.start), textDocument.offsetAt(primarySelection.end)];
 				}
 			}
 		}
+		const scrollToMatch = ([startOffset, endOffset], retainFocus) => {
+			const nextSelection = createSelectionFromAnchorAndFocusOffsets(textDocument, startOffset, endOffset);
+			this.#updateSelections([nextSelection]);
+			this.#scrollToPrimaryCaret(true);
+			this.#retainSearchPanelFocus = retainFocus;
+		};
 		this.#searchPanel = new SearchPanelWidget({
 			textDocument,
 			containerElement: preElement,
 			defaultQuery,
 			initialMatch,
-			getCurrentSearchRange: () => this.#selections?.at(-1),
-			postSearch: (kind, [startOffset, endOffset], retainFocus) => {
-				if (kind === "findNext" || kind === "findPrevious" || kind === "replace") {
-					const nextSelection = createSelectionFromAnchorAndFocusOffsets(textDocument, startOffset, endOffset);
-					this.#updateSelections([nextSelection]);
-					this.#scrollToPrimaryCaret();
-					if (retainFocus === true) {
-						this.#retainSearchPanelFocus = true;
-						requestAnimationFrame(() => {
-							this.#searchPanel?.focus();
-						});
-					}
-				} else if (kind === "findAll" || kind === "replaceAll") {
-					const { line, character } = textDocument.positionAt(startOffset);
-					this.#scrollToLine(line, character);
+			scrollToMatch,
+			onUpdate: (allMatches) => {
+				if (allMatches.length === 0) {
+					this.#matches = void 0;
+					this.#updateSelections(this.#selections ?? []);
+					return;
+				}
+				this.#matches = allMatches;
+				const primarySelection = this.#selections?.at(-1);
+				let searchOffset = 0;
+				let nextMatch;
+				if (primarySelection !== void 0) searchOffset = textDocument.offsetAt(primarySelection.start);
+				for (const m of allMatches) if (m[0] >= searchOffset) {
+					nextMatch = m;
+					break;
 				}
+				if (nextMatch !== void 0) scrollToMatch(nextMatch, true);
+				this.#matches = allMatches;
+				this.#updateSelections(this.#selections ?? []);
+				return nextMatch;
 			},
 			onClose: () => {
 				this.#searchPanel = void 0;
 				this.#retainSearchPanelFocus = false;
+				this.#matches = void 0;
+				this.#updateSelections(this.#selections ?? []);
 			}
 		});
 		this.#retainSearchPanelFocus = false;
@@ -1137,17 +1284,15 @@ var Editor = class {
 		this.#rerender(change, newLineAnnotations, renderRange, shouldUpdateBuffer);
 		if (selections !== void 0) {
 			this.#updateSelections(selections);
-			this.focus({ preventScroll: true });
-			requestAnimationFrame(() => {
-				if (this.#primaryCaretElement !== void 0) this.#primaryCaretElement.scrollIntoView({
-					block: "nearest",
-					inline: "nearest"
-				});
-				else if (selections.length > 0) {
-					const pos = getCaretPosition(selections.at(-1));
-					this.#scrollToLine(pos.line, pos.character);
-				}
+			if (this.#primaryCaretElement !== void 0) this.#primaryCaretElement.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
 			});
+			else if (selections.length > 0) {
+				const pos = getCaretPosition(selections.at(-1));
+				this.#scrollToLine(pos.line, pos.character);
+			}
+			this.focus({ preventScroll: true });
 		}
 	}
 	#applyChangeToLineAnnotations(change) {
@@ -1162,17 +1307,17 @@ var Editor = class {
 	#getLineElement(line) {
 		const contentElement = this.#contentElement;
 		if (contentElement === void 0) return;
-		if (this.#renderRange !== void 0 && this.#editMode === "simple") {
+		if (this.#renderRange !== void 0 && this.#fileInstanceType === "file") {
 			const { startingLine } = this.#renderRange;
 			const { children } = contentElement;
 			for (let i = line - startingLine; i <= children.length; i++) {
 				const child = children[i];
 				const lineNumber = child?.dataset.line;
 				const lineType = child?.dataset.lineType;
-				if (lineNumber !== void 0 && lineType !== void 0 && isLineEditable(lineType) && Number(lineNumber) === line + 1) return child;
+				if (lineNumber !== void 0 && lineType !== void 0 && isLineEditable(lineType) && parseInt(lineNumber, 10) === line + 1) return child;
 			}
 		}
-		if (this.#editMode === "advanced") return contentElement.querySelector(`[data-line="${line + 1}"]:not([data-line-type="change-deletion"])`) ?? void 0;
+		if (this.#fileInstanceType === "diff") return contentElement.querySelector(`[data-line="${line + 1}"]:not([data-line-type="change-deletion"])`) ?? void 0;
 		return contentElement.querySelector(`[data-line="${line + 1}"]`) ?? void 0;
 	}
 	#getGutterWidth() {
@@ -1180,7 +1325,7 @@ var Editor = class {
 		if (gutterElement == null || !(gutterElement instanceof HTMLElement) || !gutterElement.hasAttribute("data-gutter")) return 0;
 		if (this.#gutterWidthCache === void 0) {
 			const diffsColumnNumberWidth = this.#contentElement?.parentElement?.style.getPropertyValue("--diffs-column-number-width");
-			if (diffsColumnNumberWidth !== void 0 && diffsColumnNumberWidth.length > 2 && diffsColumnNumberWidth.endsWith("px")) this.#gutterWidthCache = Number(diffsColumnNumberWidth.slice(0, -2));
+			if (diffsColumnNumberWidth !== void 0 && diffsColumnNumberWidth.length > 2 && diffsColumnNumberWidth.endsWith("px")) this.#gutterWidthCache = parseInt(diffsColumnNumberWidth.slice(0, -2), 10);
 			else this.#gutterWidthCache = gutterElement.offsetWidth;
 		}
 		return this.#gutterWidthCache;
@@ -1189,7 +1334,7 @@ var Editor = class {
 		if (this.#contentElement === void 0) return 0;
 		if (this.#contentWidthCache === void 0) {
 			const diffsColumnContentWidth = this.#contentElement.parentElement?.style.getPropertyValue("--diffs-column-content-width");
-			if (diffsColumnContentWidth !== void 0 && diffsColumnContentWidth.length > 2 && diffsColumnContentWidth.endsWith("px")) this.#contentWidthCache = Number(diffsColumnContentWidth.slice(0, -2));
+			if (diffsColumnContentWidth !== void 0 && diffsColumnContentWidth.length > 2 && diffsColumnContentWidth.endsWith("px")) this.#contentWidthCache = parseFloat(diffsColumnContentWidth.slice(0, -2));
 			else this.#contentWidthCache = this.#contentElement.offsetWidth;
 		}
 		return this.#contentWidthCache;