@earendil-works/pi-tui 0.84.1 → 0.84.2

package/dist/tui-alt-screen.js

@@ -1,3 +1,4 @@
+import { AltScreenSearchComponent, findAltScreenSearchMatches, getAltScreenSearchMatchKey, } from "./alt-screen-search.js";
 import { AltScreenFlashContainer } from "./components/alt-screen-flash.js";
 import { ScrollView } from "./components/scroll-view.js";
 import { getKeybindings } from "./keybindings.js";
@@ -53,12 +54,16 @@ export class TuiAltScreen extends TuiBase {
     selectionPressActive = false;
     scrollbarDrag;
     scrollbarHover;
+    activeSearch;
     pressedUrl;
     selectionDragged = false;
     wheelScrollLines;
     mouseEnabled;
+    searchMatchStyle;
+    searchCurrentMatchStyle;
     openUrl;
     onRightClickPaste;
+    copySelection;
     constructor(terminal, showHardwareCursor, logDirectory, options = {}) {
         super(terminal, showHardwareCursor, logDirectory);
         this.implicitDocument = {
@@ -72,8 +77,11 @@ export class TuiAltScreen extends TuiBase {
         this.flashes = new AltScreenFlashContainer(() => this.requestRender());
         this.wheelScrollLines = Math.max(1, Math.floor(options.wheelScrollLines ?? 1));
         this.mouseEnabled = options.mouse ?? true;
+        this.searchMatchStyle = options.searchMatchStyle ?? ((text) => `\x1b[4m${text}\x1b[24m`);
+        this.searchCurrentMatchStyle = options.searchCurrentMatchStyle ?? ((text) => `\x1b[1;7m${text}\x1b[22;27m`);
         this.openUrl = options.openUrl;
         this.onRightClickPaste = options.onRightClickPaste;
+        this.copySelection = options.copySelection;
         this.addInputListener((data) => this.handleViewportInput(data));
     }
     get viewportTop() {
@@ -135,6 +143,7 @@ export class TuiAltScreen extends TuiBase {
         this.terminal.write(`${ENTER_ALT_SCREEN}${DISABLE_AUTOWRAP}${this.mouseEnabled ? mouseSequence : ""}\x1b[2J\x1b[H\x1b[?25l`);
     }
     beforeTerminalStop(_options) {
+        this.closeSearch();
         this.stopSelectionAutoScroll();
         this.selectionPressActive = false;
         this.stopScrollbarHover();
@@ -253,13 +262,126 @@ export class TuiAltScreen extends TuiBase {
             return;
         }
     }
+    openSearch() {
+        if (this.activeSearch) {
+            this.activeSearch.overlay?.focus();
+            return;
+        }
+        const component = new AltScreenSearchComponent((query) => this.updateSearchQuery(query));
+        const search = {
+            component,
+            query: "",
+            matches: [],
+            selectedIndex: -1,
+            anchorRow: this.getPrimaryScrollView().scrollTop,
+            selectionMode: "query",
+        };
+        this.activeSearch = search;
+        search.overlay = this.showOverlay(component, {
+            anchor: "top-right",
+            width: "40%",
+            minWidth: 24,
+            margin: 1,
+        });
+    }
+    closeSearch() {
+        const search = this.activeSearch;
+        if (!search)
+            return;
+        this.activeSearch = undefined;
+        search.overlay?.hide();
+        this.requestRender();
+    }
+    updateSearchQuery(query) {
+        const search = this.activeSearch;
+        if (!search || query === search.query)
+            return;
+        const selected = search.matches[search.selectedIndex];
+        search.anchorRow = selected?.segments[0]?.row ?? this.getPrimaryScrollView().scrollTop;
+        search.query = query;
+        search.selectionMode = "query";
+        search.component.setResult(-1, 0);
+        this.requestRender();
+    }
+    navigateSearch(direction) {
+        const search = this.activeSearch;
+        if (!search?.query)
+            return;
+        search.selectionMode = direction < 0 ? "previous" : "next";
+        this.requestRender();
+    }
+    refreshSearch(layout) {
+        const search = this.activeSearch;
+        if (!search)
+            return false;
+        const scrollView = layout.primaryScrollView ?? this.implicitScrollView;
+        const box = getScrollViewBox(layout, scrollView);
+        const lines = box?.scrollContentLines;
+        if (!lines || !search.query.trim()) {
+            search.matches = [];
+            search.selectedIndex = -1;
+            search.selectedKey = undefined;
+            search.selectionMode = "retain";
+            search.component.setResult(-1, 0);
+            return false;
+        }
+        const shouldRevealSelection = search.selectionMode !== "retain";
+        const matches = findAltScreenSearchMatches(lines, search.query);
+        const exactIndex = search.selectedKey
+            ? matches.findIndex((match) => getAltScreenSearchMatchKey(match) === search.selectedKey)
+            : -1;
+        let selectedIndex = -1;
+        if (matches.length > 0) {
+            if (search.selectionMode === "query") {
+                selectedIndex = matches.findIndex((match) => (match.segments[0]?.row ?? 0) >= search.anchorRow);
+                if (selectedIndex < 0)
+                    selectedIndex = 0;
+            }
+            else if (search.selectionMode === "next") {
+                const baseIndex = exactIndex >= 0 ? exactIndex : Math.min(search.selectedIndex, matches.length - 1);
+                selectedIndex = baseIndex < 0 ? 0 : (baseIndex + 1) % matches.length;
+            }
+            else if (search.selectionMode === "previous") {
+                const baseIndex = exactIndex >= 0 ? exactIndex : Math.min(search.selectedIndex, matches.length - 1);
+                selectedIndex = baseIndex < 0 ? matches.length - 1 : (baseIndex - 1 + matches.length) % matches.length;
+            }
+            else {
+                selectedIndex =
+                    exactIndex >= 0 ? exactIndex : Math.min(Math.max(0, search.selectedIndex), matches.length - 1);
+            }
+        }
+        search.matches = matches;
+        search.selectedIndex = selectedIndex;
+        search.selectedKey = selectedIndex >= 0 ? getAltScreenSearchMatchKey(matches[selectedIndex]) : undefined;
+        search.selectionMode = "retain";
+        search.component.setResult(selectedIndex, matches.length);
+        if (!shouldRevealSelection)
+            return false;
+        const selected = matches[selectedIndex];
+        const firstSegment = selected?.segments[0];
+        const lastSegment = selected?.segments[selected.segments.length - 1];
+        if (!box || !firstSegment || !lastSegment || scrollView.viewportHeight <= 0)
+            return false;
+        const before = scrollView.scrollTop;
+        const visibleBottom = before + scrollView.viewportHeight - 1;
+        let target = before;
+        if (firstSegment.row < before || lastSegment.row > visibleBottom) {
+            target = firstSegment.row - Math.floor(scrollView.viewportHeight / 3);
+        }
+        scrollView.scrollTo(target, { disableFollow: true });
+        return scrollView.scrollTop !== before;
+    }
     /** Show a transient message in the alternate-screen flash stack. */
     flash(message, durationMs) {
         this.flashes.flash(message, durationMs);
     }
+    shouldDeferViewportInputToOverlay() {
+        return this.isOverlayFocused() && this.activeSearch?.overlay?.isFocused() !== true;
+    }
     handleViewportInput(data) {
         if (data === FOCUS_OUT) {
             const hadActiveSelection = this.selectionPressActive;
+            const hadNonEmptyActiveSelection = hadActiveSelection && this.getSelectionBounds() !== undefined;
             this.selectionPressActive = false;
             this.stopSelectionAutoScroll();
             this.stopScrollbarHover();
@@ -271,15 +393,18 @@ export class TuiAltScreen extends TuiBase {
                 this.selectionFocus = undefined;
                 this.selectionGranularity = "character";
                 this.selectionInitialRange = undefined;
+                if (hadNonEmptyActiveSelection)
+                    this.requestRender();
             }
             this.lastClick = undefined;
-            this.requestRender();
             return { consume: true };
         }
         if (data === FOCUS_IN)
             return { consume: true };
         const wheelEvent = this.parseWheelEvent(data);
         if (wheelEvent) {
+            if (this.shouldDeferViewportInputToOverlay())
+                return undefined;
             this.routeWheel(wheelEvent);
             return { consume: true };
         }
@@ -298,6 +423,30 @@ export class TuiAltScreen extends TuiBase {
             return { consume: true };
         const keybindings = getKeybindings();
         const isRelease = isKeyRelease(data);
+        if (keybindings.matches(data, "tui.altScreen.search")) {
+            if (!isRelease)
+                this.openSearch();
+            return { consume: true };
+        }
+        if (this.activeSearch?.overlay?.isFocused()) {
+            if (keybindings.matches(data, "tui.altScreen.searchNext")) {
+                if (!isRelease)
+                    this.navigateSearch(1);
+                return { consume: true };
+            }
+            if (keybindings.matches(data, "tui.altScreen.searchPrevious")) {
+                if (!isRelease)
+                    this.navigateSearch(-1);
+                return { consume: true };
+            }
+            if (keybindings.matches(data, "tui.altScreen.searchClose")) {
+                if (!isRelease)
+                    this.closeSearch();
+                return { consume: true };
+            }
+        }
+        if (this.shouldDeferViewportInputToOverlay())
+            return undefined;
         if (keybindings.matches(data, "tui.altScreen.pageUp")) {
             if (!isRelease) {
                 this.scrollBy(-Math.max(1, this.getPrimaryScrollView().viewportHeight - PAGE_SCROLL_OVERLAP));
@@ -320,6 +469,16 @@ export class TuiAltScreen extends TuiBase {
                 this.scrollBy(Math.max(1, Math.floor(this.getPrimaryScrollView().viewportHeight / 2)));
             return { consume: true };
         }
+        if (keybindings.matches(data, "tui.altScreen.lineUp")) {
+            if (!isRelease)
+                this.scrollBy(-1);
+            return { consume: true };
+        }
+        if (keybindings.matches(data, "tui.altScreen.lineDown")) {
+            if (!isRelease)
+                this.scrollBy(1);
+            return { consume: true };
+        }
         if (keybindings.matches(data, "tui.altScreen.previousPrompt")) {
             if (!isRelease)
                 this.scrollToPrompt(-1);
@@ -633,7 +792,8 @@ export class TuiAltScreen extends TuiBase {
         this.selectionDragPointer = undefined;
     }
     handleSelectionMouseEvent(event) {
-        if ((event.button & 3) !== 0)
+        const button = event.button & 3;
+        if (button !== 0 && !(event.release && button === 3))
             return;
         const anchorScrollView = this.selectionAnchor?.scrollView;
         const point = this.getSelectionPoint(event, anchorScrollView);
@@ -664,7 +824,7 @@ export class TuiAltScreen extends TuiBase {
                 this.requestRender();
                 return;
             }
-            this.copySelectionToClipboard();
+            void this.copySelectionToClipboard();
             this.requestRender();
             return;
         }
@@ -727,7 +887,7 @@ export class TuiAltScreen extends TuiBase {
         }
         return { start: Math.max(minColumn, start), end: Math.min(maxColumn, end) };
     }
-    copySelectionToClipboard() {
+    async copySelectionToClipboard() {
         const selection = this.getSelectionBounds();
         if (!selection)
             return;
@@ -749,9 +909,87 @@ export class TuiAltScreen extends TuiBase {
         const text = lines.join("\n");
         if (text.length === 0)
             return;
+        // Prefer an injected clipboard implementation (native clipboard + platform tools with a
+        // verified success path) when the host app provides one. A bare OSC 52 write can show
+        // "Copied!" while leaving the system clipboard untouched (e.g. macOS Terminal.app, tmux
+        // without OSC 52 clipboard passthrough), so only report success when it actually copies.
+        if (this.copySelection) {
+            const ok = await this.copySelection(text);
+            this.flash(ok ? "Copied!" : "Copy failed");
+            return;
+        }
         this.terminal.write(`\x1b]52;c;${Buffer.from(text).toString("base64")}\x07`);
         this.flash("Copied!");
     }
+    applySearchTextHighlight(text, current) {
+        const style = current ? this.searchCurrentMatchStyle : this.searchMatchStyle;
+        let result = "";
+        let plainStart = 0;
+        let index = 0;
+        while (index < text.length) {
+            const ansi = extractAnsiCode(text, index);
+            if (!ansi) {
+                index += 1;
+                continue;
+            }
+            if (index > plainStart)
+                result += style(text.slice(plainStart, index));
+            result += ansi.code;
+            index += ansi.length;
+            plainStart = index;
+        }
+        if (plainStart < text.length)
+            result += style(text.slice(plainStart));
+        return result;
+    }
+    applySearchHighlights(screen, layout) {
+        const search = this.activeSearch;
+        if (!search || search.selectedIndex < 0 || search.matches.length === 0)
+            return screen;
+        const scrollView = layout.primaryScrollView ?? this.implicitScrollView;
+        const box = getScrollViewBox(layout, scrollView);
+        if (!box)
+            return screen;
+        const rangesByRow = new Map();
+        const scrollbarColumn = getScrollbarGeometry(box)?.column;
+        const minRow = Math.max(0, box.rect.y, box.clip.y);
+        const maxRow = Math.min(screen.length, box.rect.y + box.rect.height, box.clip.y + box.clip.height);
+        const minColumn = Math.max(0, box.rect.x, box.clip.x);
+        const maxColumn = Math.min(this.terminal.columns, box.rect.x + box.rect.width, box.clip.x + box.clip.width, scrollbarColumn ?? Number.POSITIVE_INFINITY);
+        for (let matchIndex = 0; matchIndex < search.matches.length; matchIndex++) {
+            for (const segment of search.matches[matchIndex].segments) {
+                const row = box.rect.y + segment.row - scrollView.scrollTop;
+                if (row < minRow || row >= maxRow)
+                    continue;
+                const startCol = Math.max(minColumn, box.rect.x + segment.startCol);
+                const endCol = Math.min(maxColumn, box.rect.x + segment.endCol);
+                if (endCol <= startCol)
+                    continue;
+                const ranges = rangesByRow.get(row) ?? [];
+                ranges.push({ startCol, endCol, current: matchIndex === search.selectedIndex });
+                rangesByRow.set(row, ranges);
+            }
+        }
+        const result = [...screen];
+        for (const [row, ranges] of rangesByRow) {
+            let line = result[row] ?? "";
+            if (isImageLine(line))
+                continue;
+            const lineWidth = visibleWidth(line);
+            for (const range of ranges.sort((a, b) => b.startCol - a.startCol)) {
+                const startCol = Math.min(range.startCol, lineWidth);
+                const endCol = Math.min(range.endCol, lineWidth);
+                if (endCol <= startCol)
+                    continue;
+                const before = sliceByColumn(line, 0, startCol, true);
+                const highlighted = sliceByColumn(line, startCol, endCol - startCol, true);
+                const after = sliceByColumn(line, endCol, Math.max(0, lineWidth - endCol), true);
+                line = `${before}${this.applySearchTextHighlight(highlighted, range.current)}${after}`;
+            }
+            result[row] = line;
+        }
+        return result;
+    }
     applySelectionHighlight(text) {
         let result = "\x1b[7m";
         let index = 0;
@@ -844,8 +1082,12 @@ export class TuiAltScreen extends TuiBase {
         const width = Math.max(1, this.terminal.columns);
         const height = Math.max(1, this.terminal.rows);
         const root = this.layoutRoot ?? this.implicitScrollView;
-        const nextLayout = renderLayoutFrame(root, width, height, () => this.requestRender());
+        let nextLayout = renderLayoutFrame(root, width, height, () => this.requestRender());
+        if (this.refreshSearch(nextLayout)) {
+            nextLayout = renderLayoutFrame(root, width, height, () => this.requestRender());
+        }
         let screen = nextLayout.lines.map((line) => line.replace(OSC133_ZONE_PREFIX, ""));
+        screen = this.applySearchHighlights(screen, nextLayout);
         screen = this.compositeOverlays(screen, width, height);
         if (screen.length > height)
             screen = screen.slice(screen.length - height);