@ashx-j/lunr-tui 0.1.7 → 0.2.1

package/dist/tui.js

@@ -9,7 +9,7 @@ import { isKeyRelease, matchesKey } from "./keys.js";
 import { MOUSE_TRACKING_DISABLE, MOUSE_TRACKING_ENABLE, parseMouseEvent } from "./mouse.js";
 import { isOsc11BackgroundColorResponse, parseOsc11BackgroundColor, parseTerminalColorSchemeReport, } from "./terminal-colors.js";
 import { deleteKittyImage, getCapabilities, isImageLine, setCellDimensions } from "./terminal-image.js";
-import { extractSegments, normalizeTerminalOutput, sliceByColumn, sliceWithWidth, visibleWidth } from "./utils.js";
+import { extractAnsiCode, extractSegments, normalizeTerminalOutput, sliceByColumn, sliceWithWidth, visibleWidth, } from "./utils.js";
 const KITTY_SEQUENCE_PREFIX = "\x1b_G";
 function parseKittyImageHeader(line) {
     const sequenceStart = line.indexOf(KITTY_SEQUENCE_PREFIX);
@@ -118,6 +118,8 @@ export class TUI extends Container {
     inputListeners = new Set();
     /** Global callback for debug key (Shift+Ctrl+D). Called before input is forwarded to focused component. */
     onDebug;
+    /** Called with selected user/assistant text after an in-app drag-release. */
+    onTextSelected;
     renderRequested = false;
     renderTimer;
     lastRenderAt = 0;
@@ -144,10 +146,18 @@ export class TUI extends Container {
     chatScrollOffset = 0;
     lastChatViewportHeight = 1;
     lastChatScrollMax = 0;
+    chatLaidOut = false;
+    chatUsesGutter = false;
+    /** Bumped on non-scroll `requestRender` so offset-only paints can reuse chat layout. */
+    contentEpoch = 0;
+    chatLayoutCache;
     alternateScreen = false;
     alternateScreenActive = false;
     mouseTrackingActive = false;
     static WHEEL_LINES = 3;
+    chatHitRegions = [];
+    chatScrollbar;
+    selection;
     constructor(terminal, showHardwareCursor) {
         super();
         this.terminal = terminal;
@@ -187,6 +197,9 @@ export class TUI extends Container {
      */
     pinFrom(component) {
         this.pinComponent = component;
+        this.chatLayoutCache = undefined;
+        this.chatUsesGutter = false;
+        this.chatLaidOut = false;
         if (!component) {
             this.chatScrollOffset = 0;
             this.lastChatViewportHeight = Math.max(1, this.terminal.rows);
@@ -202,16 +215,20 @@ export class TUI extends Container {
     /** `0` follows the latest chat. Larger values scroll up into history. */
     setChatScroll(offset) {
         const next = Number.isFinite(offset) ? Math.max(0, Math.floor(offset)) : 0;
-        this.chatScrollOffset = next;
-        if (this.getPinIndex() >= 0) {
-            this.render(this.terminal.columns);
-        }
-        else {
+        if (this.getPinIndex() < 0) {
+            const changed = this.chatScrollOffset !== 0 || this.lastChatScrollMax !== 0;
             this.chatScrollOffset = 0;
             this.lastChatScrollMax = 0;
+            if (changed && this.started)
+                this.requestRender();
+            return;
         }
+        const clamped = this.chatLaidOut ? Math.min(next, this.lastChatScrollMax) : next;
+        if (clamped === this.chatScrollOffset)
+            return;
+        this.chatScrollOffset = clamped;
         if (this.started)
-            this.requestRender();
+            this.requestRenderFromScroll();
     }
     /** Positive delta scrolls up (older). Negative scrolls toward the latest. */
     scrollChat(deltaLines) {
@@ -376,12 +393,26 @@ export class TUI extends Container {
             const child = this.children[i];
             if (!child)
                 continue;
-            for (const line of child.render(width)) {
-                lines.push(line);
-            }
+            this.appendRenderedChild(lines, child, width);
         }
         return lines;
     }
+    appendRenderedChild(lines, child, width) {
+        const nested = "children" in child && Array.isArray(child.children);
+        if (nested && child.children.length > 0 && child.render === Container.prototype.render) {
+            for (const nestedChild of child.children) {
+                this.appendRenderedChild(lines, nestedChild, width);
+            }
+            return;
+        }
+        const start = lines.length;
+        for (const line of child.render(width)) {
+            lines.push(line);
+        }
+        if (child.selectable && lines.length > start) {
+            this.chatHitRegions.push({ y0: start, y1: lines.length - 1, lines: lines.slice(start) });
+        }
+    }
     snapStartToKittyImageHeader(lines, start) {
         if (start <= 0 || start >= lines.length)
             return start;
@@ -403,11 +434,15 @@ export class TUI extends Container {
     render(width) {
         const pinIndex = this.getPinIndex();
         if (pinIndex < 0) {
+            this.chatHitRegions = [];
+            this.chatScrollbar = undefined;
+            this.chatLayoutCache = undefined;
+            this.chatUsesGutter = false;
+            this.chatLaidOut = false;
             return super.render(width);
         }
         const rows = Math.max(1, this.terminal.rows);
         const minView = 1;
-        const scrollLines = this.collectChildLines(0, pinIndex, width);
         let dockLines = this.collectChildLines(pinIndex, this.children.length, width);
         const maxDock = rows - minView;
         if (dockLines.length > maxDock) {
@@ -415,26 +450,99 @@ export class TUI extends Container {
         }
         const viewH = Math.max(minView, rows - dockLines.length);
         this.lastChatViewportHeight = viewH;
+        this.chatLaidOut = true;
+        let chatWidth = this.chatUsesGutter ? Math.max(1, width - 1) : width;
+        let scrollLines;
+        let fromCache = false;
+        const cache = this.chatLayoutCache;
+        if (cache && cache.epoch === this.contentEpoch && cache.chatWidth === chatWidth) {
+            scrollLines = cache.scrollLines;
+            this.chatHitRegions = this.copyHitRegions(cache.hitRegionsUnshifted);
+            fromCache = true;
+        }
+        else {
+            this.chatHitRegions = [];
+            scrollLines = this.collectChildLines(0, pinIndex, chatWidth);
+        }
+        if (this.chatUsesGutter) {
+            if (scrollLines.length <= viewH) {
+                this.chatUsesGutter = false;
+                chatWidth = width;
+                this.chatHitRegions = [];
+                scrollLines = this.collectChildLines(0, pinIndex, chatWidth);
+                fromCache = false;
+            }
+        }
+        else if (scrollLines.length > viewH) {
+            this.chatUsesGutter = true;
+            chatWidth = Math.max(1, width - 1);
+            this.chatHitRegions = [];
+            scrollLines = this.collectChildLines(0, pinIndex, chatWidth);
+            fromCache = false;
+        }
+        if (!fromCache) {
+            this.chatLayoutCache = {
+                epoch: this.contentEpoch,
+                chatWidth,
+                scrollLines,
+                hitRegionsUnshifted: this.copyHitRegions(this.chatHitRegions),
+            };
+        }
         let chatSlice;
+        let start = 0;
         if (scrollLines.length <= viewH) {
             // Content-hug: do not pin the dock to the bottom of an unfilled screen.
             this.chatScrollOffset = 0;
             this.lastChatScrollMax = 0;
-            chatSlice = scrollLines;
+            this.chatScrollbar = undefined;
+            chatSlice = scrollLines.slice();
         }
         else {
             this.lastChatScrollMax = scrollLines.length - viewH;
             this.chatScrollOffset = Math.max(0, Math.min(this.chatScrollOffset, this.lastChatScrollMax));
-            let start = scrollLines.length - viewH - this.chatScrollOffset;
+            start = scrollLines.length - viewH - this.chatScrollOffset;
             start = this.snapStartToKittyImageHeader(scrollLines, start);
             start = Math.max(0, start);
             chatSlice = scrollLines.slice(start, start + viewH);
             while (chatSlice.length < viewH) {
                 chatSlice.push("");
             }
+            this.chatScrollbar = { x: width, y0: 1, y1: viewH, viewH, scrollMax: this.lastChatScrollMax };
+            const thumbH = Math.max(1, Math.round((viewH * viewH) / scrollLines.length));
+            const travel = Math.max(0, viewH - thumbH);
+            const thumbTop = this.lastChatScrollMax === 0
+                ? viewH - thumbH
+                : Math.round(travel * (1 - this.chatScrollOffset / this.lastChatScrollMax));
+            const track = "\x1b[2m│\x1b[22m";
+            const thumb = "\x1b[1m█\x1b[22m";
+            for (let i = 0; i < chatSlice.length; i++) {
+                const glyph = i >= thumbTop && i < thumbTop + thumbH ? thumb : track;
+                chatSlice[i] = `${padToWidth(chatSlice[i] ?? "", chatWidth)}${glyph}`;
+            }
+        }
+        this.shiftHitRegions(-start);
+        if (this.selection) {
+            const lo = Math.min(this.selection.anchorY, this.selection.focusY);
+            const hi = Math.max(this.selection.anchorY, this.selection.focusY);
+            const highlightWidth = this.chatUsesGutter ? chatWidth : width;
+            for (let y = lo; y <= hi; y++) {
+                const idx = y - 1;
+                if (idx < 0 || idx >= chatSlice.length)
+                    continue;
+                chatSlice[idx] = applySelectionHighlight(chatSlice[idx] ?? "", highlightWidth);
+            }
         }
         return [...chatSlice, ...dockLines];
     }
+    copyHitRegions(regions) {
+        return regions.map((region) => ({ y0: region.y0, y1: region.y1, lines: region.lines }));
+    }
+    shiftHitRegions(delta) {
+        for (const region of this.chatHitRegions) {
+            region.y0 += delta;
+            region.y1 += delta;
+        }
+    }
     /**
      * Show an overlay component with configurable positioning and sizing.
      * Returns a handle to control the overlay's visibility.
@@ -663,6 +771,13 @@ export class TUI extends Container {
         this.terminal.stop();
     }
     requestRender(force = false) {
+        this.contentEpoch++;
+        this.queueRender(force);
+    }
+    requestRenderFromScroll() {
+        this.queueRender(false);
+    }
+    queueRender(force) {
         if (force) {
             this.previousLines = [];
             this.previousWidth = -1; // -1 triggers widthChanged, forcing a full clear
@@ -731,14 +846,75 @@ export class TUI extends Container {
         this.mouseTrackingActive = false;
     }
     handleMouseEvent(mouse) {
-        if (mouse.kind !== "wheel" || mouse.delta === 0)
-            return;
         if (!this.pinComponent || this.getPinIndex() < 0)
             return;
         if (this.hasCapturingOverlayFocus())
             return;
-        const amount = mouse.ctrl ? this.getChatViewportHeight() : TUI.WHEEL_LINES;
-        this.scrollChat(mouse.delta * amount);
+        if (mouse.kind === "wheel") {
+            if (mouse.delta === 0)
+                return;
+            const amount = mouse.ctrl ? this.getChatViewportHeight() : TUI.WHEEL_LINES;
+            this.scrollChat(mouse.delta * amount);
+            return;
+        }
+        // Shift+drag stays with the terminal's native selection.
+        if (mouse.shift)
+            return;
+        if (mouse.kind === "button" && !mouse.release && this.chatScrollbar && mouse.x === this.chatScrollbar.x) {
+            const viewH = this.chatScrollbar.viewH;
+            const y = Math.max(this.chatScrollbar.y0, Math.min(mouse.y, this.chatScrollbar.y1));
+            const rel = (y - this.chatScrollbar.y0) / Math.max(1, viewH - 1);
+            this.setChatScroll(Math.round((1 - rel) * this.chatScrollbar.scrollMax));
+            this.selection = undefined;
+            return;
+        }
+        if (mouse.kind === "button" && !mouse.release) {
+            const region = this.hitSelectable(mouse.y);
+            if (!region) {
+                this.selection = undefined;
+                return;
+            }
+            this.selection = { anchorY: mouse.y, focusY: mouse.y };
+            this.requestRender();
+            return;
+        }
+        if (!this.selection)
+            return;
+        if (mouse.kind === "move") {
+            this.selection.focusY = mouse.y;
+            this.requestRender();
+            return;
+        }
+        if (mouse.kind === "button" && mouse.release) {
+            this.selection.focusY = mouse.y;
+            const text = this.selectedText();
+            this.selection = undefined;
+            this.requestRender();
+            if (text)
+                this.onTextSelected?.(text);
+        }
+    }
+    hitSelectable(y) {
+        return this.chatHitRegions.find((region) => y >= region.y0 + 1 && y <= region.y1 + 1);
+    }
+    selectedText() {
+        if (!this.selection)
+            return undefined;
+        const lo = Math.min(this.selection.anchorY, this.selection.focusY);
+        const hi = Math.max(this.selection.anchorY, this.selection.focusY);
+        if (lo === hi)
+            return undefined;
+        const lines = [];
+        for (const region of this.chatHitRegions) {
+            for (let i = 0; i < region.lines.length; i++) {
+                const y = region.y0 + i + 1;
+                if (y < lo || y > hi)
+                    continue;
+                lines.push(stripAnsiForCopy(region.lines[i] ?? ""));
+            }
+        }
+        const text = lines.join("\n").trim();
+        return text.length > 0 ? text : undefined;
     }
     handleInput(data) {
         if (this.consumeOsc11BackgroundResponse(data)) {
@@ -1609,4 +1785,28 @@ export class TUI extends Container {
         });
     }
 }
+function padToWidth(line, width) {
+    const vis = visibleWidth(line);
+    if (vis >= width)
+        return line;
+    return line + " ".repeat(width - vis);
+}
+function applySelectionHighlight(line, width) {
+    const padded = padToWidth(line, width);
+    return `\x1b[7m${padded}\x1b[27m`;
+}
+function stripAnsiForCopy(line) {
+    let out = "";
+    let i = 0;
+    while (i < line.length) {
+        const ansi = extractAnsiCode(line, i);
+        if (ansi) {
+            i += ansi.length;
+            continue;
+        }
+        out += line[i];
+        i++;
+    }
+    return out.replace(/\s+$/, "");
+}
 //# sourceMappingURL=tui.js.map