@jrichman/ink 6.4.11 → 6.4.12

package/build/output.js

@@ -1,49 +1,207 @@
 import { styledCharsToString } from '@alcalzone/ansi-tokenize';
-import { toStyledCharacters, inkCharacterWidth, styledCharsWidth, splitStyledCharsByNewline, getPositionAtOffset, } from './measure-text.js';
+import { toStyledCharacters, inkCharacterWidth, styledCharsWidth, } from './measure-text.js';
+import { calculateScrollbarLayout } from './measure-element.js';
+import { renderScrollbar } from './render-scrollbar.js';
+/**
+"Virtual" output class
+
+Handles the positioning and saving of the output of each node in the tree. Also responsible for applying transformations to each character of the output.
+
+Used to generate the final output of all nodes before writing it to actual output stream (e.g. stdout)
+*/
+export function clampCursorColumn(line, col) {
+    let currentLineCol = 0;
+    let lastContentCol = 0;
+    for (const char of line) {
+        const charWidth = char.fullWidth ? 2 : 1;
+        if (char.value !== ' ' || char.styles.length > 0) {
+            lastContentCol = currentLineCol + charWidth;
+        }
+        currentLineCol += charWidth;
+    }
+    return col > lastContentCol ? lastContentCol : col;
+}
+export function intersectRect(a, b) {
+    const x1 = Math.max(a.x, b.x);
+    const y1 = Math.max(a.y, b.y);
+    const x2 = Math.min(a.x + a.w, b.x + b.w);
+    const y2 = Math.min(a.y + a.h, b.y + b.h);
+    if (x2 <= x1 || y2 <= y1) {
+        return undefined;
+    }
+    return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
+}
+export function isRectIntersectingClip(rect, clip) {
+    const clipLeft = clip.x1 ?? -Infinity;
+    const clipRight = clip.x2 ?? Infinity;
+    const clipTop = clip.y1 ?? -Infinity;
+    const clipBottom = clip.y2 ?? Infinity;
+    return (rect.x2 > clipLeft &&
+        rect.x1 < clipRight &&
+        rect.y2 > clipTop &&
+        rect.y1 < clipBottom);
+}
+export const regionLayoutProperties = [
+    'x',
+    'y',
+    'width',
+    'height',
+    'scrollTop',
+    'scrollLeft',
+    'scrollHeight',
+    'scrollWidth',
+    'isScrollable',
+    'isVerticallyScrollable',
+    'isHorizontallyScrollable',
+    'scrollbarVisible',
+    'overflowToBackbuffer',
+    'marginRight',
+    'marginBottom',
+    'scrollbarThumbColor',
+    'backgroundColor',
+    'opaque',
+    'borderTop',
+    'borderBottom',
+];
+export function copyRegionProperty(target, source, key) {
+    const value = source[key];
+    if (value !== undefined) {
+        target[key] = value;
+    }
+}
 export default class Output {
     width;
     height;
-    operations = [];
-    cursorFocusInfo = undefined;
+    // The root region represents the main screen area (non-scrollable background)
+    root;
+    activeRegionStack = [];
     clips = [];
     constructor(options) {
-        const { width, height } = options;
+        const { width, height, node, id = 'root' } = options;
         this.width = width;
         this.height = height;
+        this.root = {
+            id,
+            x: 0,
+            y: 0,
+            width,
+            height,
+            lines: [],
+            styledOutput: [],
+            isScrollable: false,
+            stickyHeaders: [],
+            children: [],
+            node,
+            selectableSpans: [],
+        };
+        this.initLines(this.root, width, height);
+        this.activeRegionStack.push(this.root);
     }
     getCurrentClip() {
         return this.clips.at(-1);
     }
+    getActiveRegion() {
+        return this.activeRegionStack.at(-1);
+    }
+    getRegionAbsoluteOffset() {
+        let x = 0;
+        let y = 0;
+        for (const region of this.activeRegionStack) {
+            x += region.x - (region.scrollLeft ?? 0);
+            y += region.y - (region.scrollTop ?? 0);
+        }
+        return { x, y };
+    }
+    startChildRegion(options) {
+        const { id, x, y, width, height, isScrollable, isVerticallyScrollable, isHorizontallyScrollable, scrollState, scrollbarVisible, overflowToBackbuffer, marginRight, marginBottom, scrollbarThumbColor, backgroundColor, opaque, nodeId, stableScrollback, borderTop, borderBottom, } = options;
+        // Create new region
+        // The buffer size should match scrollDimensions if scrollable, or bounds if not.
+        // If scrollable, we want to capture the FULL content.
+        const bufferWidth = scrollState?.scrollWidth ?? width;
+        const bufferHeight = scrollState?.scrollHeight ?? height;
+        const activeRegion = this.getActiveRegion();
+        const inheritedOverflowToBackbuffer = isScrollable
+            ? overflowToBackbuffer
+            : (overflowToBackbuffer ?? activeRegion.overflowToBackbuffer);
+        const region = {
+            id,
+            x,
+            y,
+            width,
+            height,
+            lines: [],
+            styledOutput: [],
+            isScrollable,
+            isVerticallyScrollable,
+            isHorizontallyScrollable,
+            scrollTop: scrollState?.scrollTop,
+            scrollLeft: scrollState?.scrollLeft,
+            scrollHeight: scrollState?.scrollHeight,
+            scrollWidth: scrollState?.scrollWidth,
+            scrollbarVisible,
+            overflowToBackbuffer: inheritedOverflowToBackbuffer,
+            marginRight,
+            marginBottom,
+            scrollbarThumbColor,
+            backgroundColor,
+            opaque,
+            borderTop,
+            borderBottom,
+            stickyHeaders: [],
+            children: [],
+            nodeId,
+            stableScrollback,
+            selectableSpans: [],
+        };
+        this.initLines(region, bufferWidth, bufferHeight);
+        // Add to current active region's children
+        this.getActiveRegion().children.push(region);
+        // Push to stack
+        this.activeRegionStack.push(region);
+    }
+    endChildRegion() {
+        if (this.activeRegionStack.length > 1) {
+            this.activeRegionStack.pop();
+        }
+    }
+    addStickyHeader(header) {
+        this.getActiveRegion().stickyHeaders.push(header);
+    }
     write(x, y, items, options) {
-        const { transformers, lineIndex, preserveBackgroundColor, isTerminalCursorFocused, terminalCursorPosition, } = options;
-        // Track cursor target position for terminal cursor synchronization
+        const { transformers = [], lineIndex = 0, preserveBackgroundColor = false, isTerminalCursorFocused = false, terminalCursorPosition, isSelectable = false, } = options;
+        if (items.length === 0 && !isTerminalCursorFocused) {
+            return;
+        }
         if (isTerminalCursorFocused) {
-            const styledChars = typeof items === 'string' ? toStyledCharacters(items) : items;
-            this.cursorFocusInfo = {
-                x,
-                y,
-                styledChars,
-                terminalCursorPosition,
+            const region = this.getActiveRegion();
+            let col = 0;
+            let row = 0;
+            const chars = typeof items === 'string' ? toStyledCharacters(items) : items;
+            let charOffset = 0;
+            const targetOffset = terminalCursorPosition ?? Number.POSITIVE_INFINITY;
+            for (const char of chars) {
+                if (charOffset >= targetOffset) {
+                    break;
+                }
+                if (char.value === '\n') {
+                    row++;
+                    col = 0;
+                }
+                else {
+                    col += inkCharacterWidth(char.value);
+                }
+                charOffset += char.value.length;
+            }
+            region.cursorPosition = {
+                row: y + row,
+                col: x + col,
             };
         }
-        if (items.length === 0) {
-            return;
+        if (items.length > 0) {
+            this.applyWrite(x, y, items, transformers, lineIndex, preserveBackgroundColor, isSelectable);
         }
-        this.operations.push({
-            type: 'write',
-            x,
-            y,
-            items,
-            transformers,
-            lineIndex,
-            preserveBackgroundColor,
-        });
     }
     clip(clip) {
-        this.operations.push({
-            type: 'clip',
-            clip,
-        });
         const previousClip = this.clips.at(-1);
         const nextClip = { ...clip };
         if (previousClip) {
@@ -75,149 +233,105 @@ export default class Output {
         this.clips.push(nextClip);
     }
     unclip() {
-        this.operations.push({
-            type: 'unclip',
-        });
         this.clips.pop();
     }
     get() {
-        // Initialize output array with a specific set of rows, so that margin/padding at the bottom is preserved
-        const output = [];
-        for (let y = 0; y < this.height; y++) {
-            const row = [];
-            for (let x = 0; x < this.width; x++) {
-                row.push({
-                    type: 'char',
-                    value: ' ',
-                    fullWidth: false,
-                    styles: [],
-                });
-            }
-            output.push(row);
-        }
-        const clips = [];
-        for (const operation of this.operations) {
-            if (operation.type === 'clip') {
-                const previousClip = clips.at(-1);
-                const nextClip = { ...operation.clip };
-                if (previousClip) {
-                    nextClip.x1 =
-                        previousClip.x1 === undefined
-                            ? nextClip.x1
-                            : nextClip.x1 === undefined
-                                ? previousClip.x1
-                                : Math.max(previousClip.x1, nextClip.x1);
-                    nextClip.x2 =
-                        previousClip.x2 === undefined
-                            ? nextClip.x2
-                            : nextClip.x2 === undefined
-                                ? previousClip.x2
-                                : Math.min(previousClip.x2, nextClip.x2);
-                    nextClip.y1 =
-                        previousClip.y1 === undefined
-                            ? nextClip.y1
-                            : nextClip.y1 === undefined
-                                ? previousClip.y1
-                                : Math.max(previousClip.y1, nextClip.y1);
-                    nextClip.y2 =
-                        previousClip.y2 === undefined
-                            ? nextClip.y2
-                            : nextClip.y2 === undefined
-                                ? previousClip.y2
-                                : Math.min(previousClip.y2, nextClip.y2);
+        this.clampCursorPosition(this.root);
+        this.trimRegionLines(this.root);
+        return this.root;
+    }
+    addRegionTree(region, x, y) {
+        const activeRegion = this.getActiveRegion();
+        const clonedRegion = this.cloneRegion(region, x, y, activeRegion.overflowToBackbuffer);
+        activeRegion.children.push(clonedRegion);
+    }
+    cloneRegion(region, x, y, inheritedOverflowToBackbuffer) {
+        const overflowToBackbuffer = region.isScrollable
+            ? region.overflowToBackbuffer
+            : (region.overflowToBackbuffer ?? inheritedOverflowToBackbuffer);
+        const cloned = {
+            ...region,
+            overflowToBackbuffer,
+            x: region.x + x,
+            y: region.y + y,
+            lines: region.lines.map(line => line.map(char => ({ ...char, styles: [...char.styles] }))),
+            selectableSpans: region.selectableSpans.map(span => ({ ...span })),
+            stickyHeaders: region.stickyHeaders.map(header => ({
+                ...header,
+                x: header.x,
+                y: header.y,
+            })),
+            children: region.children.map(child => this.cloneRegion(child, 0, 0, overflowToBackbuffer)),
+        };
+        return cloned;
+    }
+    trimRegionLines(region) {
+        for (let y = 0; y < region.lines.length; y++) {
+            const line = region.lines[y];
+            let lastNonSpace = -1;
+            for (let i = line.length - 1; i >= 0; i--) {
+                const char = line[i];
+                if (char.value !== ' ' || char.styles.length > 0) {
+                    lastNonSpace = i;
+                    break;
                 }
-                clips.push(nextClip);
-                continue;
-            }
-            if (operation.type === 'unclip') {
-                clips.pop();
-                continue;
-            }
-            if (operation.type === 'write') {
-                this.applyWriteOperation(output, clips, operation);
             }
+            region.styledOutput[y] = line.slice(0, lastNonSpace + 1);
         }
-        // Calculate cursor position from cursor target (if exists)
-        let cursorPosition;
-        if (this.cursorFocusInfo) {
-            const { x, y, styledChars, terminalCursorPosition: charIndex, } = this.cursorFocusInfo;
-            if (charIndex === undefined) {
-                // Use text end (backward compatible)
-                const lines = splitStyledCharsByNewline(styledChars);
-                const lastLineIndex = lines.length - 1;
-                const lastLine = lines[lastLineIndex] ?? [];
-                cursorPosition = {
-                    row: y + lastLineIndex,
-                    col: lastLineIndex === 0
-                        ? x + styledCharsWidth(lastLine)
-                        : styledCharsWidth(lastLine),
-                };
-            }
-            else {
-                // Use character index to calculate cursor position using StyledChar[]
-                const { row, col } = getPositionAtOffset(styledChars, charIndex);
-                cursorPosition = {
-                    row: y + row,
-                    col: x + col,
-                };
-            }
+        for (const child of region.children) {
+            this.trimRegionLines(child);
         }
-        const generatedOutput = output
-            .map(line => {
-            // See https://github.com/vadimdemedes/ink/pull/564#issuecomment-1637022742
-            const lineWithoutEmptyItems = line.filter(item => item !== undefined);
-            return styledCharsToString(lineWithoutEmptyItems).trimEnd();
-        })
-            .join('\n');
-        // Adjust cursor position based on actual output (after trimEnd)
-        if (cursorPosition) {
-            const lines = generatedOutput.split('\n');
-            const cursorLine = lines[cursorPosition.row];
-            if (cursorLine !== undefined) {
-                const actualLineWidth = styledCharsWidth(toStyledCharacters(cursorLine));
-                // Cursor should not go beyond the actual trimmed line width
-                cursorPosition.col = Math.min(cursorPosition.col, actualLineWidth);
+    }
+    clampCursorPosition(region) {
+        if (region.cursorPosition) {
+            const { row, col } = region.cursorPosition;
+            const line = region.lines[row];
+            if (line) {
+                region.cursorPosition.col = clampCursorColumn(line, col);
             }
         }
-        return {
-            output: generatedOutput,
-            height: output.length,
-            styledOutput: output,
-            cursorPosition,
-        };
+        for (const child of region.children) {
+            this.clampCursorPosition(child);
+        }
     }
-    clearRange(currentLine, range, styles, value = ' ') {
-        for (let offset = range.start; offset < range.end; offset++) {
-            if (offset >= 0 && offset < this.width) {
-                currentLine[offset] = {
+    initLines(region, width, height) {
+        for (let y = 0; y < height; y++) {
+            const row = [];
+            for (let x = 0; x < width; x++) {
+                row.push({
                     type: 'char',
-                    value,
+                    value: ' ',
                     fullWidth: false,
-                    styles,
-                };
+                    styles: [],
+                });
             }
+            region.lines.push(row);
+            region.styledOutput.push(row);
         }
     }
-    applyWriteOperation(output, clips, operation) {
-        const { transformers, lineIndex = 0 } = operation;
-        let { x, y, items } = operation;
+    // Helper to apply write immediately
+    // eslint-disable-next-line max-params
+    applyWrite(x, y, items, transformers, lineIndex, _preserveBackgroundColor, isSelectable) {
+        const region = this.getActiveRegion();
+        const { lines } = region;
+        const bufferWidth = lines[0]?.length ?? 0;
         let chars = typeof items === 'string' ? toStyledCharacters(items) : items;
-        const clip = clips.at(-1);
+        const clip = this.getCurrentClip();
         let fromX;
         let toX;
         if (clip) {
-            const clipResult = this.clipChars(chars, x, y, clip);
+            const regionOffset = this.getRegionAbsoluteOffset();
+            const clipResult = this.clipChars(chars, x + regionOffset.x, y + regionOffset.y, clip);
             if (!clipResult) {
                 return;
             }
-            chars = clipResult.chars;
-            x = clipResult.x;
-            y = clipResult.y;
-            fromX = clipResult.fromX;
-            toX = clipResult.toX;
+            let absoluteX;
+            let absoluteY;
+            ({ chars, x: absoluteX, y: absoluteY, fromX, toX } = clipResult);
+            x = absoluteX - regionOffset.x;
+            y = absoluteY - regionOffset.y;
         }
-        const currentLine = output[y];
-        // Line can be missing if `text` is taller than height of pre-initialized `this.output`
+        const currentLine = lines[y];
         if (!currentLine) {
             return;
         }
@@ -230,18 +344,25 @@ export default class Output {
         }
         let offsetX = x;
         let relativeX = 0;
+        let spanStartX = -1;
+        let spanText = '';
         for (const character of chars) {
             const characterWidth = inkCharacterWidth(character.value);
             if (toX !== undefined && relativeX >= toX) {
                 break;
             }
             if (fromX === undefined || relativeX >= fromX) {
-                if (offsetX >= this.width) {
+                if (offsetX >= bufferWidth) {
                     break;
                 }
                 currentLine[offsetX] = character;
+                if (isSelectable) {
+                    if (spanStartX === -1)
+                        spanStartX = offsetX;
+                    spanText += character.value;
+                }
                 if (characterWidth > 1) {
-                    this.clearRange(currentLine, { start: offsetX + 1, end: offsetX + characterWidth }, character.styles, '');
+                    this.clearRange(currentLine, { start: offsetX + 1, end: offsetX + characterWidth }, character.styles, '', bufferWidth);
                 }
                 offsetX += characterWidth;
             }
@@ -250,27 +371,45 @@ export default class Output {
                 relativeX < fromX &&
                 relativeX + characterWidth > fromX) {
                 const clearLength = relativeX + characterWidth - fromX;
-                this.clearRange(currentLine, { start: offsetX, end: offsetX + clearLength }, character.styles, ' ');
+                this.clearRange(currentLine, { start: offsetX, end: offsetX + clearLength }, character.styles, ' ', bufferWidth);
                 offsetX += clearLength;
             }
             relativeX += characterWidth;
         }
+        if (isSelectable && spanStartX !== -1) {
+            region.selectableSpans.push({
+                y,
+                startX: spanStartX,
+                endX: offsetX,
+                text: spanText,
+            });
+        }
         if (toX !== undefined) {
             const absoluteToX = x - (fromX ?? 0) + toX;
-            this.clearRange(currentLine, { start: offsetX, end: absoluteToX }, [], ' ');
+            this.clearRange(currentLine, { start: offsetX, end: absoluteToX }, [], ' ', bufferWidth);
         }
     }
-    clipChars(chars, x, y, clip) {
-        const { x1, x2, y1, y2 } = clip;
-        const clipHorizontally = typeof x1 === 'number' && typeof x2 === 'number';
-        const clipVertically = typeof y1 === 'number' && typeof y2 === 'number';
-        if (clipHorizontally) {
-            const width = styledCharsWidth(chars);
-            if (x + width < clip.x1 || x > clip.x2) {
-                return undefined;
+    // eslint-disable-next-line max-params
+    clearRange(currentLine, range, styles, value, maxWidth) {
+        for (let offset = range.start; offset < range.end; offset++) {
+            if (offset >= 0 && offset < maxWidth) {
+                currentLine[offset] = {
+                    type: 'char',
+                    value,
+                    fullWidth: false,
+                    styles,
+                };
             }
         }
-        if (clipVertically && (y < clip.y1 || y >= clip.y2)) {
+    }
+    clipChars(chars, x, y, clip) {
+        const { x1, x2 } = clip;
+        const clipHorizontally = typeof x1 === 'number' && typeof x2 === 'number';
+        const width = styledCharsWidth(chars);
+        const effectiveY1 = this.getActiveRegion().overflowToBackbuffer
+            ? -Infinity
+            : (clip.y1 ?? -Infinity);
+        if (!isRectIntersectingClip({ x1: x, y1: y, x2: x + width, y2: y + 1 }, { ...clip, y1: effectiveY1 })) {
             return undefined;
         }
         let fromX;
@@ -286,4 +425,199 @@ export default class Output {
         return { chars, x, y, fromX, toX };
     }
 }
+/**
+ * Flattens a hierarchy of nested regions into a single 2D array of styled characters
+ * that represents the final visual output to be written to the terminal.
+ * This effectively renders the nested region tree (much like compositing layers
+ * in a web browser) into a single screen buffer.
+ */
+export function flattenRegion(root, options) {
+    const { width, height } = root;
+    const lines = Array.from({ length: height }, () => Array.from({ length: width }, () => ({
+        type: 'char',
+        value: ' ',
+        fullWidth: false,
+        styles: [],
+    })));
+    composeRegion(root, lines, {
+        clip: { x: 0, y: 0, w: width, h: height },
+    }, options);
+    return lines;
+}
+/**
+ * Recursively traverses a Region and its children, drawing its content
+ * into the given `targetLines` buffer while applying coordinate offsets
+ * and clipping boundaries. Handles scroll offsets, scrollbars, and floating
+ * elements like sticky headers.
+ */
+function composeRegion(region, targetLines, { clip, offsetX = 0, offsetY = 0, }, options) {
+    const { x, y, width, height, lines, children, stickyHeaders, scrollTop: regionScrollTop, scrollLeft: regionScrollLeft, cursorPosition: regionCursorPosition, } = region;
+    const absX = x + offsetX;
+    const absY = y + offsetY;
+    const myClip = intersectRect(clip, { x: absX, y: absY, w: width, h: height });
+    if (!myClip) {
+        return;
+    }
+    const scrollTop = regionScrollTop ?? 0;
+    const scrollLeft = regionScrollLeft ?? 0;
+    if (regionCursorPosition && options?.context) {
+        const cursorX = absX + regionCursorPosition.col - scrollLeft;
+        const cursorY = absY + regionCursorPosition.row - scrollTop;
+        if (cursorX >= myClip.x &&
+            cursorX <= myClip.x + myClip.w &&
+            cursorY >= myClip.y &&
+            cursorY <= myClip.y + myClip.h) {
+            options.context.cursorPosition = { row: cursorY, col: cursorX };
+        }
+    }
+    const { x: myClipX, y: myClipY, w: myClipW, h: myClipH } = myClip;
+    for (let sy = myClipY; sy < myClipY + myClipH; sy++) {
+        const row = targetLines[sy];
+        if (!row) {
+            continue;
+        }
+        const localY = sy - absY + scrollTop;
+        const sourceLine = lines[localY];
+        if (!sourceLine) {
+            continue;
+        }
+        for (let sx = myClipX; sx < myClipX + myClipW; sx++) {
+            const localX = sx - absX + scrollLeft;
+            const char = sourceLine[localX];
+            if (char) {
+                row[sx] = char;
+            }
+        }
+    }
+    for (const child of children) {
+        composeRegion(child, targetLines, {
+            clip: myClip,
+            offsetX: absX - scrollLeft,
+            offsetY: absY - scrollTop,
+        }, options);
+    }
+    if (!options?.skipStickyHeaders) {
+        for (const header of stickyHeaders) {
+            const headerY = header.y + absY; // Absolute Y
+            const headerH = header.styledOutput.length;
+            for (let i = 0; i < headerH; i++) {
+                const sy = headerY + i;
+                if (sy < myClipY || sy >= myClipY + myClipH) {
+                    continue;
+                }
+                const row = targetLines[sy];
+                if (!row) {
+                    continue;
+                }
+                const line = header.styledOutput[i];
+                if (!line) {
+                    continue;
+                }
+                const headerX = header.x + absX;
+                const headerW = line.length;
+                const hx1 = Math.max(headerX, myClipX);
+                const hx2 = Math.min(headerX + headerW, myClipX + myClipW);
+                for (let sx = hx1; sx < hx2; sx++) {
+                    const cx = sx - headerX;
+                    const char = line[cx];
+                    if (char) {
+                        row[sx] = char;
+                    }
+                }
+            }
+        }
+    }
+    if (!options?.skipScrollbars &&
+        region.isScrollable &&
+        (region.scrollbarVisible ?? true)) {
+        const scrollHeight = region.scrollHeight ?? 0;
+        const scrollWidth = region.scrollWidth ?? 0;
+        const isVerticalScrollbarVisible = (region.isVerticallyScrollable ?? false) && scrollHeight > region.height;
+        const isHorizontalScrollbarVisible = (region.isHorizontallyScrollable ?? false) && scrollWidth > region.width;
+        if (isVerticalScrollbarVisible) {
+            const verticalLayout = calculateScrollbarLayout({
+                x: absX,
+                y: absY,
+                width: region.width,
+                height: region.height,
+                marginRight: region.marginRight ?? 0,
+                marginBottom: region.marginBottom ?? 0,
+                clientDimension: region.height,
+                scrollDimension: scrollHeight,
+                scrollPosition: scrollTop,
+                hasOppositeScrollbar: false,
+                axis: 'vertical',
+            });
+            if (verticalLayout) {
+                renderScrollbar({
+                    layout: verticalLayout,
+                    clip: myClip,
+                    axis: 'vertical',
+                    color: region.scrollbarThumbColor,
+                    setChar(x, y, char) {
+                        if (y >= 0 &&
+                            y < targetLines.length &&
+                            x >= 0 &&
+                            x < targetLines[0].length) {
+                            targetLines[y][x] = char;
+                        }
+                    },
+                });
+            }
+        }
+        if (isHorizontalScrollbarVisible) {
+            const horizontalLayout = calculateScrollbarLayout({
+                x: absX,
+                y: absY,
+                width: region.width,
+                height: region.height,
+                marginRight: region.marginRight ?? 0,
+                marginBottom: region.marginBottom ?? 0,
+                clientDimension: region.width,
+                scrollDimension: scrollWidth,
+                scrollPosition: scrollLeft,
+                hasOppositeScrollbar: isVerticalScrollbarVisible,
+                axis: 'horizontal',
+            });
+            if (horizontalLayout) {
+                renderScrollbar({
+                    layout: horizontalLayout,
+                    clip: myClip,
+                    axis: 'horizontal',
+                    color: region.scrollbarThumbColor,
+                    setChar(x, y, char) {
+                        if (y >= 0 &&
+                            y < targetLines.length &&
+                            x >= 0 &&
+                            x < targetLines[0].length) {
+                            targetLines[y][x] = char;
+                        }
+                    },
+                });
+            }
+        }
+    }
+}
+export const extractSelectableText = (spans) => {
+    if (spans.length === 0) {
+        return '';
+    }
+    const sortedSpans = [...spans].sort((a, b) => a.y === b.y ? a.startX - b.startX : a.y - b.y);
+    let selectableText = '';
+    let currentY = sortedSpans[0]?.y ?? 0;
+    let currentX = sortedSpans[0]?.startX ?? 0;
+    for (const span of sortedSpans) {
+        if (span.y > currentY) {
+            selectableText += '\n'.repeat(span.y - currentY);
+            currentX = 0;
+            currentY = span.y;
+        }
+        if (span.startX > currentX) {
+            selectableText += ' '.repeat(span.startX - currentX);
+        }
+        selectableText += span.text;
+        currentX = span.endX;
+    }
+    return selectableText;
+};
 //# sourceMappingURL=output.js.map