@pierre/diffs 1.3.0-beta.1 → 1.3.0-beta.10

package/dist/editor/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["#hasActivePopover","#updateActivePopover","#fileContainer","#codeElement","#viewportRectsDirty","#viewportRectListenersDisposes","#scrollContainer","#scrollContainerSource","#cachedCodeRect","#cachedScrollContainerRect","#cachedCodeScrollLeft","#cachedCodeScrollTop","#cachedCodeClientWidth","#placements","#getCodeRect","#getScrollContainerRect","#ensureViewportRectListeners","#getScrollContainer","#refreshViewportRectsIfNeeded"],"sources":["../../src/editor/popover.ts"],"sourcesContent":["import { addEventListener } from './utils';\n\n// Lines from the document edge at which the no-viewport fallback heuristic\n// (see `atDocumentEdge` below) flips placement.\nexport const POPOVER_BOUNDARY_LINES = 3;\n\n// Extra clearance (px) `preferred` must regain before a popover that flipped\n// to `fallback` flips back, so an anchor sitting right at the flip boundary\n// doesn't flicker between sides on every recompute.\nexport const POPOVER_FLIP_HYSTERESIS_PX = 4;\n\n/**\n * The visible scroll viewport expressed in the overlay's coordinate space (the\n * same space --popover-y uses), or undefined when no usable layout geometry\n * exists (e.g. a detached unit-test DOM, where every rect is zero).\n */\nexport interface PopoverPlacementBounds {\n  /** The top of the popover in overlay coordinate space. */\n  top: number;\n  /** The bottom of the popover in overlay coordinate space. */\n  bottom: number;\n}\n\nexport interface PopoverViewportBounds extends PopoverPlacementBounds {\n  /** The left edge of the visible viewport in overlay coordinate space. */\n  left: number;\n  /** The right edge of the visible viewport in overlay coordinate space. */\n  right: number;\n}\n\nexport interface PopoverManagerOptions {\n  hasActivePopover: () => boolean;\n  updateActivePopover: () => void;\n}\n\n/**\n * Shared placement logic for the editor's overlay popovers: each anchors below\n * or above a document position, flipping to the opposite side only when the\n * preferred side would be clipped by the visible scrollport.\n */\nexport class PopoverManager {\n  #fileContainer?: HTMLElement;\n  #codeElement?: HTMLElement;\n  #scrollContainer?: HTMLElement;\n  #scrollContainerSource?: HTMLElement;\n  #cachedCodeRect?: DOMRect;\n  #cachedScrollContainerRect?: DOMRect;\n  #cachedCodeScrollLeft = 0;\n  #cachedCodeScrollTop = 0;\n  #cachedCodeClientWidth = 0;\n  #viewportRectsDirty = true;\n  #viewportRectListenersDisposes?: (() => void)[];\n  #placements = new Map<string, 'preferred' | 'fallback'>();\n\n  readonly #hasActivePopover: () => boolean;\n  readonly #updateActivePopover: () => void;\n\n  constructor(options: PopoverManagerOptions) {\n    this.#hasActivePopover = options.hasActivePopover;\n    this.#updateActivePopover = options.updateActivePopover;\n  }\n\n  setViewportElements(\n    fileContainer: HTMLElement,\n    codeElement: HTMLElement\n  ): void {\n    const viewportElementChanged =\n      this.#fileContainer !== fileContainer ||\n      this.#codeElement !== codeElement;\n    this.#fileContainer = fileContainer;\n    if (!viewportElementChanged) {\n      return;\n    }\n    this.#codeElement = codeElement;\n    // A new [data-code] element invalidates the cached viewport rects (e.g. a\n    // full re-render loaded a different file, possibly at a different on-screen\n    // position) even without an intervening scroll/resize event.\n    this.#viewportRectsDirty = true;\n    this.#viewportRectListenersDisposes?.forEach((dispose) => dispose());\n    this.#viewportRectListenersDisposes = undefined;\n  }\n\n  cleanUp(): void {\n    this.#codeElement = undefined;\n    this.#fileContainer = undefined;\n    this.#scrollContainer = undefined;\n    this.#scrollContainerSource = undefined;\n    this.#cachedCodeRect = undefined;\n    this.#cachedScrollContainerRect = undefined;\n    this.#cachedCodeScrollLeft = 0;\n    this.#cachedCodeScrollTop = 0;\n    this.#cachedCodeClientWidth = 0;\n    this.#viewportRectsDirty = true;\n    this.#viewportRectListenersDisposes?.forEach((dispose) => dispose());\n    this.#viewportRectListenersDisposes = undefined;\n    this.#placements.clear();\n  }\n\n  resetPlacement(placementKey = 'default'): void {\n    this.#placements.delete(placementKey);\n  }\n\n  setPlacement(\n    placement: 'preferred' | 'fallback',\n    placementKey = 'default'\n  ): void {\n    this.#placements.set(placementKey, placement);\n  }\n\n  // Flips to the opposite side only when the preferred side would be clipped by\n  // the real scrollport and the fallback side fits; without viewport geometry,\n  // falls back to the document-edge signal so the first/last rows still flip.\n  choosePlacement(input: {\n    /** Bounds for the anchor's preferred side (e.g. above for backward, below for forward). */\n    preferred: PopoverPlacementBounds;\n    /** Bounds for the opposite edge we flip to when the preferred side has no room. */\n    fallback: PopoverPlacementBounds;\n    /** The visible scrollport in overlay coordinate space, or undefined without layout geometry (e.g. a detached test DOM). */\n    viewport: PopoverPlacementBounds | undefined;\n    /** The popover's measured height; 0 before it has laid out. */\n    popoverHeight: number;\n    /** Whether the anchor is within the document's first/last rows; only used as a fallback signal when `viewport` is unavailable. */\n    atDocumentEdge: boolean;\n    /** Keeps hysteresis independent when more than one popover kind is active. */\n    placementKey?: string;\n  }): 'preferred' | 'fallback' {\n    const {\n      preferred,\n      fallback,\n      viewport,\n      popoverHeight,\n      atDocumentEdge,\n      placementKey = 'default',\n    } = input;\n    const previousPlacement = this.#placements.get(placementKey);\n    let placement: 'preferred' | 'fallback';\n    if (viewport !== undefined && popoverHeight > 0) {\n      const fits = (bounds: PopoverPlacementBounds, margin = 0): boolean =>\n        bounds.top >= viewport.top + margin &&\n        bounds.bottom <= viewport.bottom - margin;\n      if (\n        previousPlacement === 'fallback' &&\n        fits(fallback) &&\n        !fits(preferred, POPOVER_FLIP_HYSTERESIS_PX)\n      ) {\n        placement = 'fallback';\n      } else if (!fits(preferred) && fits(fallback)) {\n        placement = 'fallback';\n      } else {\n        placement = 'preferred';\n      }\n    } else {\n      placement = atDocumentEdge ? 'fallback' : 'preferred';\n    }\n    this.#placements.set(placementKey, placement);\n    return placement;\n  }\n\n  /**\n   * Returns the bounds of the popover in overlay coordinate space.\n   */\n  getPlacementBounds(): PopoverViewportBounds | undefined {\n    const codeRect = this.#getCodeRect();\n    if (codeRect === undefined) {\n      return undefined;\n    }\n    const scrollContainerRect = this.#getScrollContainerRect();\n    let topScreen: number;\n    let bottomScreen: number;\n    if (scrollContainerRect !== undefined) {\n      topScreen = scrollContainerRect.top;\n      bottomScreen = scrollContainerRect.bottom;\n    } else {\n      // No scrollable ancestor: the page itself scrolls, so the window is the\n      // clip region.\n      topScreen = 0;\n      bottomScreen = window.innerHeight;\n    }\n    // The overlay that hosts the popover lives inside `[data-code]`, which uses\n    // `overflow-y: clip` (see style.css). A short file smaller than the\n    // scrollport therefore clips the popover at its own top/bottom even when the\n    // window/scroll container still has room beyond those edges. Intersect the\n    // scrollport with the code element's own box so a first/last-line popover\n    // flips to the side that actually fits within that clip, not just within the\n    // outer viewport.\n    topScreen = Math.max(topScreen, codeRect.top);\n    bottomScreen = Math.min(bottomScreen, codeRect.bottom);\n    if (bottomScreen <= topScreen) {\n      return undefined;\n    }\n    const codeScrollLeft = this.#cachedCodeScrollLeft;\n    const codeScrollTop = this.#cachedCodeScrollTop;\n    const codeViewportWidth =\n      this.#cachedCodeClientWidth > 0\n        ? this.#cachedCodeClientWidth\n        : codeRect.width;\n    const leftScreen =\n      scrollContainerRect !== undefined ? scrollContainerRect.left : 0;\n    const rightScreen =\n      scrollContainerRect !== undefined\n        ? scrollContainerRect.right\n        : window.innerWidth;\n    const codeViewportLeft = codeScrollLeft;\n    const codeViewportRight = codeScrollLeft + codeViewportWidth;\n    const visibleLeft = Math.max(\n      codeViewportLeft,\n      leftScreen - codeRect.left + codeScrollLeft\n    );\n    const visibleRight = Math.min(\n      codeViewportRight,\n      rightScreen - codeRect.left + codeScrollLeft\n    );\n    return {\n      top: topScreen - codeRect.top + codeScrollTop,\n      bottom: bottomScreen - codeRect.top + codeScrollTop,\n      left: visibleLeft,\n      right: Math.max(visibleLeft, visibleRight),\n    };\n  }\n\n  // The nearest scrollable ancestor of the file container -- the element whose\n  // overflow clips overlay widgets. Walks the light-DOM ancestor chain (the\n  // overlay lives in the file container's shadow root) and caches the result per\n  // file container so it is not re-resolved on every render.\n  //\n  // Known limitations: this only inspects light-DOM ancestors outside the\n  // shadow root, so it cannot see arbitrary clip boundaries inside it and cannot\n  // cross into an outer shadow root if the file container is itself nested in\n  // another web component. It also only considers the *nearest* scrollable\n  // ancestor, not the intersection of every clipping ancestor, so a popover\n  // could still be clipped by an outer scroll context even when it fits within\n  // this nearer one. The `[data-code]` element's own `overflow-y: clip` box is\n  // handled separately in getPlacementBounds, which intersects it with whatever\n  // scrollport this method resolves.\n  #getScrollContainer(): HTMLElement | undefined {\n    const fileContainer = this.#fileContainer;\n    if (fileContainer === undefined) {\n      return undefined;\n    }\n    if (this.#scrollContainerSource === fileContainer) {\n      // A cached element can detach across re-mounts; re-resolve in that case\n      // but otherwise trust the cache (including a cached \"no scroller\" result).\n      if (\n        this.#scrollContainer === undefined ||\n        this.#scrollContainer.isConnected\n      ) {\n        return this.#scrollContainer;\n      }\n    }\n    let element: HTMLElement | null = fileContainer.parentElement;\n    while (element !== null) {\n      const overflowY = getComputedStyle(element).overflowY;\n      if (\n        overflowY === 'auto' ||\n        overflowY === 'scroll' ||\n        overflowY === 'overlay'\n      ) {\n        this.#scrollContainer = element;\n        this.#scrollContainerSource = fileContainer;\n        return element;\n      }\n      element = element.parentElement;\n    }\n    this.#scrollContainer = undefined;\n    this.#scrollContainerSource = fileContainer;\n    return undefined;\n  }\n\n  // Lazily measures and caches the screen-space rects getOverlayViewport needs,\n  // refreshing only when a scroll or resize event marks them dirty rather than\n  // on every call. Selection-action placement can run once per keystroke while a\n  // ranged selection stays open, so re-measuring via getBoundingClientRect on\n  // every call would force a synchronous layout reflow on that hot path.\n  #refreshViewportRectsIfNeeded(): void {\n    if (!this.#viewportRectsDirty) {\n      return;\n    }\n    this.#ensureViewportRectListeners();\n    const codeElement = this.#codeElement;\n    this.#cachedCodeRect = codeElement?.getBoundingClientRect();\n    this.#cachedCodeScrollLeft = codeElement?.scrollLeft ?? 0;\n    this.#cachedCodeScrollTop = codeElement?.scrollTop ?? 0;\n    this.#cachedCodeClientWidth = codeElement?.clientWidth ?? 0;\n    this.#cachedScrollContainerRect =\n      this.#getScrollContainer()?.getBoundingClientRect();\n    this.#viewportRectsDirty = false;\n  }\n\n  #getCodeRect(): DOMRect | undefined {\n    this.#refreshViewportRectsIfNeeded();\n    return this.#cachedCodeRect;\n  }\n\n  #getScrollContainerRect(): DOMRect | undefined {\n    this.#refreshViewportRectsIfNeeded();\n    return this.#cachedScrollContainerRect;\n  }\n\n  // Subscribes once to events that can move or resize the cached rects: a scroll\n  // on the resolved scroll container (or the window, when the page itself\n  // scrolls) and a window resize. Scrolling/resizing can change whether the open\n  // popover still fits, so this re-runs placement rAF-throttled.\n  #ensureViewportRectListeners(): void {\n    if (this.#viewportRectListenersDisposes !== undefined) {\n      return;\n    }\n    let repositionRafId: number | undefined;\n    const markDirty = () => {\n      this.#viewportRectsDirty = true;\n      if (!this.#hasActivePopover() || repositionRafId !== undefined) {\n        return;\n      }\n      repositionRafId = requestAnimationFrame(() => {\n        repositionRafId = undefined;\n        this.#updateActivePopover();\n      });\n    };\n    const scroller = this.#getScrollContainer();\n    const codeElement = this.#codeElement;\n    this.#viewportRectListenersDisposes = [\n      scroller !== undefined\n        ? addEventListener(scroller, 'scroll', markDirty, { passive: true })\n        : addEventListener(window, 'scroll', markDirty, { passive: true }),\n      ...(codeElement !== undefined\n        ? [\n            addEventListener(codeElement, 'scroll', markDirty, {\n              passive: true,\n            }),\n          ]\n        : []),\n      addEventListener(window, 'resize', markDirty, { passive: true }),\n      () => {\n        if (repositionRafId !== undefined) {\n          cancelAnimationFrame(repositionRafId);\n          repositionRafId = undefined;\n        }\n      },\n    ];\n  }\n}\n\nexport function setPopoverPositionStyles(\n  popover: HTMLElement,\n  {\n    gutterWidth,\n    placeAbove,\n    viewport,\n    x,\n    y,\n  }: {\n    gutterWidth: number;\n    placeAbove: boolean;\n    viewport: PopoverViewportBounds | undefined;\n    x: number;\n    y: number;\n  }\n): void {\n  popover.style.setProperty('--gutter-width', gutterWidth + 'px');\n  popover.style.setProperty('--popover-x', x + 'px');\n  popover.style.setProperty('--popover-y', y + 'px');\n  popover.style.setProperty('--popover-y-shift', placeAbove ? '-100%' : '0px');\n  if (viewport === undefined) {\n    popover.style.removeProperty('--popover-viewport-left');\n    popover.style.removeProperty('--popover-viewport-right');\n    return;\n  }\n  popover.style.setProperty('--popover-viewport-left', viewport.left + 'px');\n  popover.style.setProperty('--popover-viewport-right', viewport.right + 'px');\n}\n"],"mappings":"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"}

package/dist/editor/searchPanel.d.ts

@@ -1,7 +1,8 @@
-import { Range, TextDocument } from "./textDocument.js";
+import { ResolvedTextEdit, TextDocument } from "./textDocument.js";
 
 //#region src/editor/searchPanel.d.ts
-type SearchKind = 'findNext' | 'findPrevious' | 'findAll' | 'replace' | 'replaceAll';
+type MatchRange = [startOffset: number, endOffset: number];
+type SearchPanelMode = 'find' | 'replace';
 interface SearchParams {
   text: string;
   replaceText: string;
@@ -13,18 +14,27 @@ interface SearchPanelOptions {
   textDocument: TextDocument<unknown>;
   containerElement: HTMLElement;
   defaultQuery: string;
-  initialMatch?: [number, number];
-  postSearch: (kind: SearchKind, match: [number, number], retainFocus?: boolean) => void;
-  getCurrentSearchRange: () => Range | undefined;
+  mode?: SearchPanelMode;
+  initialMatch?: MatchRange;
+  scrollToMatch: (nextMatch: MatchRange, retainFocus: boolean) => void;
+  applyReplace: (edits: ResolvedTextEdit[]) => void;
+  onUpdate: (matches: MatchRange[], options?: {
+    syncSelection?: boolean;
+  }) => MatchRange | undefined;
   onClose: () => void;
 }
 declare class SearchPanelWidget {
   #private;
   constructor(options: SearchPanelOptions);
-  updateMatches(currentMatch?: [number, number]): void;
   focus(): void;
+  navigate(findPrevious: boolean): void;
+  updateMatches(options?: {
+    syncSelection?: boolean;
+  }): void;
+  setMode(mode: SearchPanelMode): void;
+  close(): void;
   cleanup(): void;
 }
 //#endregion
-export { SearchKind, SearchPanelOptions, SearchPanelWidget, SearchParams };
+export { MatchRange, SearchPanelMode, SearchPanelOptions, SearchPanelWidget, SearchParams };
 //# sourceMappingURL=searchPanel.d.ts.map

package/dist/editor/searchPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchPanel.d.ts","names":["Range","TextDocument","SearchKind","SearchParams","SearchPanelOptions","HTMLElement","SearchPanelWidget"],"sources":["../../src/editor/searchPanel.d.ts"],"sourcesContent":["import type { Range, TextDocument } from './textDocument';\nexport type SearchKind = 'findNext' | 'findPrevious' | 'findAll' | 'replace' | 'replaceAll';\nexport interface SearchParams {\n    text: string;\n    replaceText: string;\n    caseSensitive: boolean;\n    wholeWord: boolean;\n    regex: boolean;\n}\nexport interface SearchPanelOptions {\n    textDocument: TextDocument<unknown>;\n    containerElement: HTMLElement;\n    defaultQuery: string;\n    initialMatch?: [number, number];\n    postSearch: (kind: SearchKind, match: [number, number], retainFocus?: boolean) => void;\n    getCurrentSearchRange: () => Range | undefined;\n    onClose: () => void;\n}\nexport declare class SearchPanelWidget {\n    #private;\n    constructor(options: SearchPanelOptions);\n    updateMatches(currentMatch?: [number, number]): void;\n    focus(): void;\n    cleanup(): void;\n}\n//# sourceMappingURL=searchPanel.d.ts.map"],"mappings":";;;KACYE,UAAAA;UACKC,YAAAA;EADLD,IAAAA,EAAAA,MAAAA;EACKC,WAAAA,EAAAA,MAAY;EAOZC,aAAAA,EAAAA,OAAkB;EACjBH,SAAAA,EAAAA,OAAAA;EACII,KAAAA,EAAAA,OAAAA;;AAIWL,UANhBI,kBAAAA,CAMgBJ;EAAK,YAAA,EALpBC,YAKoB,CAAA,OAAA,CAAA;EAGjBK,gBAAAA,EAPCD,WAOgB;;;qBAJfH;+BACUF;;;cAGZM,iBAAAA;;uBAEIF"}
+{"version":3,"file":"searchPanel.d.ts","names":[],"sources":["../../src/editor/searchPanel.ts"],"mappings":";;;KAOY,UAAA,IAAc,WAAA,UAAqB,SAAS;AAAA,KAE5C,eAAA;AAAA,UAEK,YAAA;EACf,IAAA;EACA,WAAA;EACA,aAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,UAGe,kBAAA;EACf,YAAA,EAAc,YAAA;EACd,gBAAA,EAAkB,WAAA;EAClB,YAAA;EACA,IAAA,GAAO,eAAA;EACP,YAAA,GAAe,UAAA;EACf,aAAA,GAAgB,SAAA,EAAW,UAAA,EAAY,WAAA;EACvC,YAAA,GAAe,KAAA,EAAO,gBAAA;EACtB,QAAA,GACE,OAAA,EAAS,UAAA,IACT,OAAA;IAAY,aAAA;EAAA,MACT,UAAA;EACL,OAAA;AAAA;AAAA,cAGW,iBAAA;EAAA;EAQX,WAAA,CAAY,OAAA,EAAS,kBAAA;EA8YrB,KAAA;EAIA,QAAA,CAAS,YAAA;EAIT,aAAA,CAAc,OAAA;IAAY,aAAA;EAAA;EAI1B,OAAA,CAAQ,IAAA,EAAM,eAAe;EAO7B,KAAA;EAOA,OAAA;AAAA"}

package/dist/editor/searchPanel.js

@@ -1,219 +1,318 @@
 import { isPrimaryModifier } from "./platform.js";
+import { resolveFindAgainShortcut } from "./command.js";
 import { h } from "./utils.js";
-
+import { buildSearchReplacementText } from "./pieceTable.js";
+import { getEditorIconSvg } from "./sprite.js";
 //#region src/editor/searchPanel.ts
 var SearchPanelWidget = class {
-	#textDocument;
 	#container;
 	#inputElement;
-	#matchesElement;
-	#searchParams = {
-		text: "",
-		replaceText: "",
-		caseSensitive: false,
-		wholeWord: false,
-		regex: false
-	};
-	#allMatches = [];
+	#updateMatches;
+	#applyMode;
+	#navigate;
+	#close;
 	constructor(options) {
-		const { textDocument, containerElement, defaultQuery, initialMatch, postSearch, getCurrentSearchRange, onClose } = options;
-		const close = () => {
-			this.cleanup();
-			onClose();
+		const { textDocument, containerElement, defaultQuery, mode = "find", initialMatch, scrollToMatch, applyReplace, onUpdate, onClose } = options;
+		const searchParams = {
+			text: defaultQuery,
+			replaceText: "",
+			caseSensitive: false,
+			wholeWord: false,
+			regex: false
 		};
-		const updateSearchParam = (key, value) => {
-			this.#searchParams[key] = value;
-			updateAllMatches();
-			this.updateMatches();
+		const matches = {
+			all: [],
+			current: void 0
 		};
-		const updateAllMatches = () => {
-			this.#allMatches = this.#searchParams.text !== "" ? this.#textDocument.search("findAll", this.#searchParams) : [];
-			this.#container.querySelectorAll("[data-disabled]").forEach((element) => {
-				element.dataset.disabled = String(this.#allMatches.length === 0);
-			});
+		const matchResultElement = h("div", {
+			dataset: {
+				matches: "",
+				noMatches: ""
+			},
+			textContent: "No results"
+		});
+		const updateMatches = (options) => {
+			matches.all = searchParams.text !== "" ? textDocument.search(searchParams) : [];
+			const noMatches = matches.all.length === 0;
+			prevButton.disabled = noMatches;
+			nextButton.disabled = noMatches;
+			if (noMatches) {
+				matchResultElement.textContent = "No results";
+				matchResultElement.dataset.noMatches = "";
+				matches.current = void 0;
+				onUpdate([]);
+				return;
+			}
+			delete matchResultElement.dataset.noMatches;
+			if (options?.syncSelection === false) {
+				updateCurrentMatch(onUpdate(matches.all, { syncSelection: false }));
+				return;
+			}
+			updateCurrentMatch(onUpdate(matches.all));
+		};
+		this.#updateMatches = updateMatches;
+		const updateCurrentMatch = (currentMatch) => {
+			if (currentMatch === void 0) matchResultElement.textContent = `${matches.all.length} results`;
+			else {
+				const [start, end] = currentMatch;
+				matchResultElement.textContent = `${matches.all.findIndex((m) => m[0] === start && m[1] === end) + 1} of ${matches.all.length}`;
+			}
+			matches.current = currentMatch;
 		};
-		const search = (kind, retainFocus) => {
-			const matches = this.#textDocument.search(kind, this.#searchParams, getCurrentSearchRange());
-			if (matches.length === 0) return;
-			const firstMatch = matches[0];
-			this.updateMatches(firstMatch);
-			postSearch(kind, firstMatch, retainFocus);
+		const updateSearchParam = (key, value) => {
+			searchParams[key] = value;
+			updateMatches();
 		};
-		const settingsSwitch = h("div", {
-			dataset: { icon: "settings" },
-			title: "Settings",
-			innerHTML: `<svg width="16" height="16" viewBox="0 0 20 20">
-      <line x1="3" y1="6" x2="10" y2="6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-      <circle cx="12.5" cy="6" r="2.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
-      <line x1="15" y1="6" x2="17" y2="6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-      <line x1="17" y1="14" x2="10" y2="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-      <circle cx="7.5" cy="14" r="2.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
-      <line x1="5" y1="14" x2="3" y2="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-    </svg>
-    `,
-			onclick: () => {
-				settingsSwitch.replaceWith(settingsPanel);
+		const findNextMatch = (findPrevious = false, retainFocus = false) => {
+			const allMatches = matches.all;
+			let nextMatch = allMatches[0];
+			if (allMatches.length > 0) if (findPrevious) {
+				const searchOffset = matches.current?.[0] ?? 0;
+				nextMatch = allMatches.at(-1);
+				for (const m of allMatches) if (m[1] <= searchOffset) nextMatch = m;
+				else break;
+			} else {
+				const searchOffset = matches.current?.[1] ?? 0;
+				for (const m of allMatches) if (m[0] >= searchOffset) {
+					nextMatch = m;
+					break;
+				}
 			}
+			if (nextMatch !== void 0) {
+				updateCurrentMatch(nextMatch);
+				scrollToMatch(nextMatch, retainFocus);
+			}
+			matches.current = nextMatch;
+		};
+		this.#navigate = (findPrevious) => findNextMatch(findPrevious, true);
+		const buildReplacementEdit = (matchStart, matchEnd) => ({
+			start: matchStart,
+			end: matchEnd,
+			text: buildSearchReplacementText((offset) => textDocument.positionAt(offset), (position) => textDocument.offsetAt(position), (line) => textDocument.getLineText(line), searchParams, matchStart, matchEnd)
 		});
-		const settingsPanel = h("div", {
-			dataset: "settings",
-			children: [
-				h("label", {
-					dataset: "checkbox",
-					children: [h("input", {
-						type: "checkbox",
-						checked: this.#searchParams.caseSensitive,
-						onchange: (e) => {
-							updateSearchParam("caseSensitive", e.target.checked);
-						}
-					}), "Match Case"]
-				}),
-				h("label", {
-					dataset: "checkbox",
-					children: [h("input", {
-						type: "checkbox",
-						checked: this.#searchParams.wholeWord,
-						onchange: (e) => {
-							updateSearchParam("wholeWord", e.target.checked);
-						}
-					}), "Whole Word"]
-				}),
-				h("label", {
-					dataset: "checkbox",
-					children: [h("input", {
-						type: "checkbox",
-						checked: this.#searchParams.regex,
-						onchange: (e) => {
-							updateSearchParam("regex", e.target.checked);
-						}
-					}), "Regexp"]
-				})
-			],
-			onmouseleave: () => {
-				closeSettingsPanelTimeout = setTimeout(() => {
-					settingsPanel.replaceWith(settingsSwitch);
-				}, 500);
+		const replace = () => {
+			if (searchParams.text === "" || matches.all.length === 0) return;
+			let currentMatch = matches.current;
+			if (currentMatch === void 0) {
+				findNextMatch(false, true);
+				currentMatch = matches.current;
+				if (currentMatch === void 0) return;
+			}
+			const [start, end] = currentMatch;
+			const edit = buildReplacementEdit(start, end);
+			applyReplace([edit]);
+			scrollToMatch([start + edit.text.length, start + edit.text.length], true);
+			matches.current = void 0;
+			updateMatches();
+		};
+		const replaceAll = () => {
+			if (searchParams.text === "" || matches.all.length === 0) return;
+			applyReplace(matches.all.map(([start, end]) => buildReplacementEdit(start, end)));
+			matches.current = void 0;
+			updateMatches();
+		};
+		const close = () => {
+			this.cleanup();
+			onClose();
+		};
+		this.#close = close;
+		const iconButton = (opts) => h("button", {
+			type: "button",
+			title: opts.label,
+			ariaLabel: opts.label,
+			dataset: {
+				searchIcon: "",
+				...opts.dataset
+			},
+			innerHTML: getEditorIconSvg(opts.icon, opts.size ?? 16),
+			onclick: opts.onClick
+		});
+		const makeToggle = (icon, title, key) => {
+			const button = iconButton({
+				icon,
+				label: title,
+				size: 14,
+				onClick: () => {
+					const next = !searchParams[key];
+					button.ariaPressed = String(next);
+					updateSearchParam(key, next);
+				}
+			});
+			button.ariaPressed = String(searchParams[key]);
+			return button;
+		};
+		const caseSensitiveToggle = makeToggle("case", "Match Case", "caseSensitive");
+		const wholeWordToggle = makeToggle("whole-word", "Whole Word", "wholeWord");
+		const regexToggle = makeToggle("regex", "Regexp", "regex");
+		const replaceInputElement = h("input", {
+			type: "text",
+			placeholder: "Replace",
+			dataset: "replace",
+			value: "",
+			oninput: (e) => {
+				searchParams.replaceText = e.target.value;
 			},
-			onmouseenter: () => {
-				clearTimeout(closeSettingsPanelTimeout);
-				closeSettingsPanelTimeout = void 0;
+			onkeydown: (e) => {
+				if (e.isComposing) return;
+				const findAgain = resolveFindAgainShortcut(e);
+				if (e.key === "Escape") {
+					e.preventDefault();
+					close();
+				} else if (e.key === "Enter") {
+					e.preventDefault();
+					replace();
+				} else if (findAgain !== void 0) {
+					e.preventDefault();
+					findNextMatch(findAgain === "previous", true);
+				}
 			}
 		});
-		let closeSettingsPanelTimeout;
-		this.#textDocument = textDocument;
-		this.#searchParams.text = defaultQuery;
 		this.#inputElement = h("input", {
 			type: "text",
 			placeholder: "Search",
 			dataset: "search",
 			value: defaultQuery,
 			oninput: (e) => {
-				this.#searchParams.text = e.target.value;
-				updateAllMatches();
-				this.updateMatches();
+				searchParams.text = e.target.value;
+				matches.current = void 0;
+				updateMatches();
 			},
 			onkeydown: (e) => {
+				const findAgain = resolveFindAgainShortcut(e);
 				if (e.key === "Escape") {
 					e.preventDefault();
 					close();
 				} else if (e.key === "Enter") {
 					e.preventDefault();
-					search("findNext", true);
-				} else if (e.key === "f" && isPrimaryModifier(e)) e.preventDefault();
+					findNextMatch(e.shiftKey, true);
+				} else if (findAgain !== void 0) {
+					e.preventDefault();
+					findNextMatch(findAgain === "previous", true);
+				} else if (isPrimaryModifier(e) && (e.key === "f" || e.code === "KeyF")) {
+					e.preventDefault();
+					applyMode(e.altKey ? "replace" : "find");
+				}
 			}
 		});
-		this.#matchesElement = h("div", { dataset: "matches" });
+		const searchTogglesElement = h("div", {
+			dataset: "searchToggles",
+			children: [
+				caseSensitiveToggle,
+				wholeWordToggle,
+				regexToggle
+			]
+		});
+		const findInputBox = h("div", {
+			dataset: {
+				inputBox: "",
+				find: ""
+			},
+			children: [this.#inputElement, searchTogglesElement]
+		});
+		const replaceInputBox = h("div", {
+			dataset: {
+				inputBox: "",
+				replace: "",
+				replaceCell: ""
+			},
+			children: [replaceInputElement]
+		});
+		const replaceActionsElement = h("div", {
+			dataset: {
+				replaceActions: "",
+				replaceCell: ""
+			},
+			children: [iconButton({
+				icon: "replace",
+				label: "Replace",
+				onClick: replace
+			}), iconButton({
+				icon: "replace-all",
+				label: "Replace All",
+				onClick: replaceAll
+			})]
+		});
+		const prevButton = iconButton({
+			icon: "arrow-up",
+			label: "Previous",
+			onClick: () => {
+				findNextMatch(true);
+			}
+		});
+		const nextButton = iconButton({
+			icon: "arrow-down",
+			label: "Next",
+			onClick: () => {
+				findNextMatch();
+			}
+		});
+		prevButton.disabled = true;
+		nextButton.disabled = true;
+		const navElement = h("div", {
+			dataset: "searchNav",
+			children: [prevButton, nextButton]
+		});
+		const closeElement = iconButton({
+			icon: "close",
+			label: "Close",
+			onClick: close,
+			dataset: { searchClose: "" }
+		});
+		const gridElement = h("div", {
+			dataset: {
+				searchGrid: "",
+				mode
+			},
+			children: [
+				findInputBox,
+				replaceInputBox,
+				replaceActionsElement,
+				matchResultElement,
+				navElement,
+				closeElement
+			]
+		});
+		const applyMode = (next) => {
+			gridElement.dataset.mode = next;
+			this.#inputElement.focus();
+			this.#inputElement.select();
+		};
+		this.#applyMode = applyMode;
 		this.#container = h("div", {
 			dataset: "searchPanel",
 			children: [h("div", {
-				dataset: "searchPanelRow",
-				children: [
-					h("div", {
-						dataset: { icon: "search" },
-						innerHTML: `<svg width="16" height="16" viewBox="0 0 20 20">
-                <line x1="16.5" y1="16.5" x2="12.0355" y2="12.0355" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-                <circle cx="8.5" cy="8.5" r="5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
-                </svg>
-              `
-					}),
-					this.#inputElement,
-					this.#matchesElement,
-					h("div", {
-						dataset: {
-							icon: "arrow-up",
-							disabled: "true"
-						},
-						title: "Previous",
-						innerHTML: `<svg width="14" height="14" viewBox="0 0 20 20">
-                <polyline points="12.5 3.5 6 10 12.5 16.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
-                </svg>
-              `,
-						onclick: () => {
-							search("findPrevious");
-						}
-					}),
-					h("div", {
-						dataset: {
-							icon: "arrow-down",
-							disabled: "true"
-						},
-						title: "Next",
-						innerHTML: `<svg width="14" height="14" viewBox="0 0 20 20">
-                <polyline points="7.5 16.5 14 10 7.5 3.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
-                </svg>
-              `,
-						onclick: () => {
-							search("findNext");
-						}
-					}),
-					h("div", { dataset: "spacer" }),
-					settingsSwitch,
-					h("div", {
-						dataset: { icon: "close" },
-						title: "Close",
-						innerHTML: `<svg width="16" height="16" viewBox="0 0 20 20">
-                <line x1="5" y1="5" x2="15" y2="15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-                <line x1="5" y1="15" x2="15" y2="5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-                </svg>
-              `,
-						onclick: close
-					})
-				]
+				dataset: "editorWidget",
+				children: [gridElement]
 			})]
 		});
+		matches.current = initialMatch;
 		containerElement.before(this.#container);
 		requestAnimationFrame(() => {
-			if (initialMatch !== void 0) {
-				updateAllMatches();
-				this.updateMatches(initialMatch);
-			}
+			if (initialMatch !== void 0) updateMatches();
+			else onUpdate([]);
 			this.#inputElement.select();
 		});
 	}
-	updateMatches(currentMatch = this.#allMatches[0]) {
-		const allMatches = this.#allMatches;
-		if (this.#searchParams.text === "") {
-			this.#matchesElement.textContent = "";
-			delete this.#matchesElement.dataset.noMatches;
-			return;
-		}
-		if (allMatches.length === 0) {
-			this.#matchesElement.textContent = "No results";
-			this.#matchesElement.dataset.noMatches = "";
-		} else {
-			delete this.#matchesElement.dataset.noMatches;
-			const index = allMatches.findIndex((m) => m[0] === currentMatch[0] && m[1] === currentMatch[1]);
-			this.#matchesElement.textContent = index !== -1 ? `${index + 1} of ${allMatches.length}` : "No results";
-		}
-	}
 	focus() {
-		this.#inputElement.select();
+		this.#inputElement.focus();
+	}
+	navigate(findPrevious) {
+		this.#navigate?.(findPrevious);
+	}
+	updateMatches(options) {
+		this.#updateMatches?.(options);
+	}
+	setMode(mode) {
+		this.#applyMode?.(mode);
+	}
+	close() {
+		this.#close?.();
 	}
 	cleanup() {
 		this.#container.remove();
 	}
 };
-
 //#endregion
 export { SearchPanelWidget };
+
 //# sourceMappingURL=searchPanel.js.map