@travisennis/acai 0.0.5 → 0.0.7

package/dist/tui/components/markdown.js

@@ -0,0 +1,586 @@
+import { marked } from "marked";
+import { DEFAULT_HIGHLIGHT_THEME } from "../../terminal/default-theme.js";
+import { highlight, supportsLanguage } from "../../terminal/highlight/index.js";
+import { getListNumber } from "../../terminal/markdown-utils.js";
+import stripAnsi from "../../terminal/strip-ansi.js";
+import style from "../../terminal/style.js";
+import { Table } from "../../terminal/table/index.js";
+import wrapAnsi from "../../terminal/wrap-ansi.js";
+import { applyBackgroundToLine, visibleWidth } from "../utils.js";
+const DEFAULT_THEME = {
+    heading: (text) => style.bold.yellow(text),
+    paragraph: (text) => text,
+    link: (text) => style.underline.blue(text),
+    linkUrl: (text) => style.gray(text),
+    code: (text) => style.cyan(text),
+    codeBlock: (text) => style.green(text),
+    codeBlockBorder: (text) => style.gray(text),
+    quote: (text) => style.italic(text),
+    quoteBorder: (text) => style.gray(text),
+    hr: (text) => style.gray(text),
+    listBullet: (text) => style.cyan(text),
+    bold: (text) => style.bold(text),
+    italic: (text) => style.italic(text),
+    strikethrough: (text) => style.strikethrough(text),
+    underline: (text) => style.underline(text),
+};
+export class Markdown {
+    text;
+    bgColor;
+    customBgRgb;
+    paddingX; // Left/right padding
+    paddingY; // Top/bottom padding
+    theme;
+    highlightTheme;
+    // Cache for rendered output
+    cachedText;
+    cachedWidth;
+    cachedLines;
+    constructor(text, options = {}) {
+        this.text = text;
+        this.bgColor = options.bgColor;
+        this.customBgRgb = options.customBgRgb;
+        this.paddingX = options.paddingX ?? 1;
+        this.paddingY = options.paddingY ?? 1;
+        this.theme = options.theme ?? DEFAULT_THEME;
+        this.highlightTheme = options.highlightTheme ?? DEFAULT_HIGHLIGHT_THEME;
+    }
+    setText(text) {
+        this.text = text;
+        // Invalidate cache when text changes
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    setBgColor(bgColor) {
+        this.bgColor = bgColor;
+        // Invalidate cache when color changes
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    setCustomBgRgb(customBgRgb) {
+        this.customBgRgb = customBgRgb;
+        // Invalidate cache when color changes
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    invalidate() {
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    /**
+     * Get the background color function based on current configuration
+     */
+    getBackgroundFunction() {
+        if (this.customBgRgb) {
+            const { r, g, b } = this.customBgRgb;
+            return (text) => style.bgRgb(r, g, b)(text);
+        }
+        if (this.bgColor) {
+            const bgColor = this.bgColor;
+            return (text) => style[bgColor](text);
+        }
+        return undefined;
+    }
+    render(width) {
+        // Check cache
+        if (this.cachedLines &&
+            this.cachedText === this.text &&
+            this.cachedWidth === width) {
+            return this.cachedLines;
+        }
+        // Calculate available width for content (subtract horizontal padding)
+        const contentWidth = Math.max(1, width - this.paddingX * 2);
+        // Don't render anything if there's no actual text
+        if (!this.text || this.text.trim() === "") {
+            const result = [];
+            // Update cache
+            this.cachedText = this.text;
+            this.cachedWidth = width;
+            this.cachedLines = result;
+            return result;
+        }
+        // Replace tabs with 3 spaces for consistent rendering
+        const normalizedText = this.text.replace(/\t/g, "   ");
+        // Parse markdown to HTML-like tokens
+        const tokens = marked.lexer(normalizedText);
+        // Convert tokens to styled terminal output
+        const renderedLines = [];
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i];
+            const nextToken = tokens[i + 1];
+            const tokenLines = this.renderToken(token, contentWidth, nextToken?.type);
+            renderedLines.push(...tokenLines);
+        }
+        // Wrap lines (NO padding, NO background yet)
+        const wrappedLines = [];
+        for (const line of renderedLines) {
+            wrappedLines.push(...this.wrapLine(line, contentWidth));
+        }
+        // Add margins and background to each wrapped line
+        const leftMargin = " ".repeat(this.paddingX);
+        const rightMargin = " ".repeat(this.paddingX);
+        const bgFn = this.getBackgroundFunction();
+        const contentLines = [];
+        for (const line of wrappedLines) {
+            const lineWithMargins = leftMargin + line + rightMargin;
+            if (bgFn) {
+                contentLines.push(applyBackgroundToLine(lineWithMargins, width, bgFn));
+            }
+            else {
+                // No background - just pad to width
+                const visibleLen = visibleWidth(lineWithMargins);
+                const paddingNeeded = Math.max(0, width - visibleLen);
+                contentLines.push(lineWithMargins + " ".repeat(paddingNeeded));
+            }
+        }
+        // Add top/bottom padding (empty lines)
+        const emptyLine = " ".repeat(width);
+        const emptyLines = [];
+        for (let i = 0; i < this.paddingY; i++) {
+            const line = bgFn
+                ? applyBackgroundToLine(emptyLine, width, bgFn)
+                : emptyLine;
+            emptyLines.push(line);
+        }
+        const result = [...emptyLines, ...contentLines, ...emptyLines];
+        // Update cache
+        this.cachedText = this.text;
+        this.cachedWidth = width;
+        this.cachedLines = result;
+        return result.length > 0 ? result : [""];
+    }
+    renderToken(token, width, nextTokenType) {
+        const lines = [];
+        switch (token.type) {
+            case "heading": {
+                const headingLevel = token.depth;
+                const headingPrefix = `${"#".repeat(headingLevel)} `;
+                const headingText = this.renderInlineTokens(token.tokens || []);
+                if (headingLevel === 1) {
+                    lines.push(style.underline(this.theme.heading(headingText)));
+                }
+                else if (headingLevel === 2) {
+                    lines.push(this.theme.heading(headingText));
+                }
+                else {
+                    lines.push(this.theme.heading(headingPrefix + headingText));
+                }
+                lines.push(""); // Add spacing after headings
+                break;
+            }
+            case "paragraph": {
+                const paragraphText = this.renderInlineTokens(token.tokens || []);
+                lines.push(this.theme.paragraph(paragraphText));
+                // Don't add spacing if next token is space or list
+                if (nextTokenType &&
+                    nextTokenType !== "list" &&
+                    nextTokenType !== "space") {
+                    lines.push("");
+                }
+                break;
+            }
+            case "code": {
+                if (token.lang && supportsLanguage(token.lang)) {
+                    // Use syntax highlighting for supported languages
+                    const highlightedCode = highlight(token.text, {
+                        language: token.lang,
+                        theme: this.highlightTheme,
+                    });
+                    const codeLines = highlightedCode.split("\n");
+                    lines.push(this.theme.codeBlockBorder(`\`\`\`${token.lang}`));
+                    for (const codeLine of codeLines) {
+                        lines.push(style.dim("  ") + codeLine);
+                    }
+                    lines.push(this.theme.codeBlockBorder("```"));
+                }
+                else {
+                    // Fallback to basic styling for unsupported languages
+                    lines.push(this.theme.codeBlockBorder(`\`\`\`${token.lang || ""}`));
+                    const codeLines = token.text.split("\n");
+                    for (const codeLine of codeLines) {
+                        lines.push(style.dim("  ") + this.theme.codeBlock(codeLine));
+                    }
+                    lines.push(this.theme.codeBlockBorder("```"));
+                }
+                lines.push(""); // Add spacing after code blocks
+                break;
+            }
+            case "list": {
+                const listLines = this.renderList(token, 0);
+                lines.push(...listLines);
+                // Don't add spacing after lists if a space token follows
+                // (the space token will handle it)
+                break;
+            }
+            case "table": {
+                const tableLines = this.renderTable(token);
+                lines.push(...tableLines);
+                break;
+            }
+            case "blockquote": {
+                const quoteText = this.renderInlineTokens(token.tokens || []);
+                const quoteLines = quoteText.split("\n");
+                for (const quoteLine of quoteLines) {
+                    lines.push(this.theme.quoteBorder("│ ") + this.theme.quote(quoteLine));
+                }
+                lines.push(""); // Add spacing after blockquotes
+                break;
+            }
+            case "hr":
+                lines.push(this.theme.hr("─".repeat(Math.min(width, 80))));
+                lines.push(""); // Add spacing after horizontal rules
+                break;
+            case "image": {
+                const alt = (token.title ?? token.text ?? "").toString().trim();
+                if (alt.length > 0) {
+                    lines.push(`[Image: ${alt} (${token.href})]`);
+                }
+                else {
+                    lines.push(`[Image: ${token.href}]`);
+                }
+                break;
+            }
+            case "html":
+                // Render HTML tags with dim styling and content as normal text
+                lines.push(style.dim(token.text));
+                break;
+            case "space":
+                // Space tokens represent blank lines in markdown
+                lines.push("");
+                break;
+            default:
+                // Handle any other token types as plain text
+                if ("text" in token && typeof token.text === "string") {
+                    lines.push(token.text);
+                }
+        }
+        return lines;
+    }
+    renderInlineTokens(tokens) {
+        let result = "";
+        for (const token of tokens) {
+            switch (token.type) {
+                case "text":
+                    // Text tokens in list items can have nested tokens for inline formatting
+                    if (token.tokens && token.tokens.length > 0) {
+                        result += this.renderInlineTokens(token.tokens);
+                    }
+                    else {
+                        result += token.text;
+                    }
+                    break;
+                case "strong":
+                    result += this.theme.bold(this.renderInlineTokens(token.tokens || []));
+                    break;
+                case "em":
+                    result += this.theme.italic(this.renderInlineTokens(token.tokens || []));
+                    break;
+                case "codespan":
+                    result +=
+                        this.theme.codeBlockBorder("`") +
+                            this.theme.code(token.text) +
+                            this.theme.codeBlockBorder("`");
+                    break;
+                case "link": {
+                    const linkText = this.renderInlineTokens(token.tokens || []);
+                    // If link text matches href, only show the link once
+                    if (linkText === token.href) {
+                        result += this.theme.link(linkText);
+                    }
+                    else {
+                        result +=
+                            this.theme.link(linkText) +
+                                this.theme.linkUrl(` (${token.href})`);
+                    }
+                    break;
+                }
+                case "br":
+                    result += "\n";
+                    break;
+                case "del":
+                    result += this.theme.strikethrough(this.renderInlineTokens(token.tokens || []));
+                    break;
+                case "image": {
+                    const alt = (token.title ?? token.text ?? "").toString().trim();
+                    if (alt.length > 0) {
+                        result += `[Image: ${alt} (${token.href})]`;
+                    }
+                    else {
+                        result += `[Image: ${token.href}]`;
+                    }
+                    break;
+                }
+                default:
+                    // Handle any other inline token types as plain text
+                    if ("text" in token && typeof token.text === "string") {
+                        result += token.text;
+                    }
+            }
+        }
+        return result;
+    }
+    wrapLine(line, contentWidth) {
+        // Handle undefined or null lines
+        if (!line) {
+            return [""];
+        }
+        // Protect inline code spans from being split across lines
+        // by temporarily replacing them with placeholders
+        const { protectedText, codeSpans } = this.protectCodeSpans(line);
+        // Use the existing wrapAnsi function for robust ANSI-aware wrapping
+        // Use contentWidth (available width after padding) for wrapping
+        const wrappedText = wrapAnsi(protectedText, contentWidth, { trim: false });
+        const lines = wrappedText.split("\n");
+        // Restore the code spans
+        const restoredLines = this.restoreCodeSpans(lines, codeSpans);
+        return restoredLines;
+    }
+    /**
+     * Protect inline code spans by replacing them with placeholders
+     * This prevents wrapAnsi from breaking code spans across lines
+     */
+    protectCodeSpans(text) {
+        const codeSpans = [];
+        let protectedText = text;
+        let placeholderIndex = 0;
+        // Create a version of the text without ANSI codes for code span detection
+        // This allows us to reliably find code spans regardless of styling
+        const cleanText = stripAnsi(text);
+        // Use the clean text to find code spans
+        let i = 0;
+        while (i < cleanText.length) {
+            // Find the next backtick in clean text
+            const backtickIndex = cleanText.indexOf("`", i);
+            if (backtickIndex === -1)
+                break;
+            // Look for the closing backtick in clean text
+            let closingIndex = -1;
+            let depth = 1;
+            for (let j = backtickIndex + 1; j < cleanText.length; j++) {
+                if (cleanText[j] === "`") {
+                    depth--;
+                    if (depth === 0) {
+                        closingIndex = j;
+                        break;
+                    }
+                }
+            }
+            if (closingIndex !== -1) {
+                // Extract the actual code span from the original styled text
+                // We need to map the positions from clean text to styled text
+                const cleanCodeSpan = cleanText.slice(backtickIndex, closingIndex + 1);
+                // Find the corresponding span in the styled text
+                // This is complex due to ANSI codes, so we use a simpler approach:
+                // Just use the regex on the original text and validate with clean text
+                const regex = new RegExp(cleanCodeSpan.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
+                const match = regex.exec(text);
+                if (match) {
+                    const styledCodeSpan = match[0];
+                    // Check if this is an actual code span
+                    if (this.isActualCodeSpan(text, match.index, match.index + styledCodeSpan.length)) {
+                        const placeholder = `__CODE_SPAN_${placeholderIndex}__`;
+                        // Store the full styled code span for restoration
+                        codeSpans.push(styledCodeSpan);
+                        // Replace with placeholder
+                        protectedText = protectedText.replace(styledCodeSpan, placeholder);
+                        placeholderIndex++;
+                        // Move past this code span
+                        i = closingIndex + 1;
+                        continue;
+                    }
+                }
+            }
+            // Move to next character
+            i = backtickIndex + 1;
+        }
+        return { protectedText, codeSpans };
+    }
+    /**
+     * Check if a potential code span is an actual code span (not escaped backticks)
+     */
+    isActualCodeSpan(text, startIndex, endIndex) {
+        // If the text around the code span contains ANSI escape sequences,
+        // it's likely an actual code span that was processed by renderInlineTokens
+        // Look for ANSI escape sequences in the surrounding context
+        const contextStart = Math.max(0, startIndex - 10);
+        const contextEnd = Math.min(text.length, endIndex + 10);
+        const context = text.slice(contextStart, contextEnd);
+        // Check for ANSI escape sequences that would indicate styled code
+        // Use String.fromCharCode(27) to avoid control characters in regex
+        const escapeChar = String.fromCharCode(27);
+        return context.includes(`${escapeChar}[`);
+    }
+    /**
+     * Check if a line represents a nested list item
+     */
+    isNestedListLine(line, currentDepth) {
+        // A nested list line should have proper indentation for its depth
+        // and typically starts with a bullet (cyan colored number or dash)
+        const expectedIndent = "  ".repeat(currentDepth + 1);
+        const escapeChar = String.fromCharCode(27);
+        // Check if the line starts with the expected indent for a nested list
+        // and contains a cyan bullet (either number or dash) after the indent
+        if (line.startsWith(expectedIndent)) {
+            const afterIndent = line.slice(expectedIndent.length);
+            // Look for cyan-colored content at the start (bullet)
+            // Pattern: cyan escape sequence followed by content, then reset
+            const cyanPattern = `${escapeChar}[36m`;
+            const resetPattern = `${escapeChar}[39m`;
+            if (afterIndent.startsWith(cyanPattern)) {
+                const afterCyan = afterIndent.slice(cyanPattern.length);
+                const resetIndex = afterCyan.indexOf(resetPattern);
+                if (resetIndex > 0) {
+                    const bulletContent = afterCyan.slice(0, resetIndex);
+                    // Check if this looks like a list bullet (number with dot or dash)
+                    return /^(\d+\.|-)/.test(bulletContent);
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Restore code spans from placeholders after wrapping
+     */
+    restoreCodeSpans(lines, codeSpans) {
+        return lines.map((line) => {
+            let restoredLine = line;
+            // Restore each code span placeholder
+            for (let i = 0; i < codeSpans.length; i++) {
+                const placeholder = `__CODE_SPAN_${i}__`;
+                const codeSpan = codeSpans[i];
+                restoredLine = restoredLine.replace(placeholder, codeSpan);
+            }
+            return restoredLine;
+        });
+    }
+    /**
+     * Render a list with proper nesting support
+     */
+    renderList(token, depth) {
+        const lines = [];
+        const indent = "  ".repeat(depth);
+        for (let i = 0; i < token.items.length; i++) {
+            const item = token.items[i];
+            const startNumber = typeof token.start === "string"
+                ? Number.parseInt(token.start, 10)
+                : token.start;
+            const bullet = token.ordered
+                ? `${getListNumber(depth, (startNumber ?? 1) + i)}. `
+                : "- ";
+            // Process item tokens to handle nested lists
+            const itemLines = this.renderListItem(item.tokens || [], depth);
+            if (itemLines.length > 0) {
+                // First line - check if it's a nested list
+                const firstLine = itemLines[0];
+                const isNestedList = this.isNestedListLine(firstLine, depth);
+                if (isNestedList) {
+                    // This is a nested list, just add it as-is (already has full indent)
+                    lines.push(firstLine);
+                }
+                else {
+                    // Regular text content - add indent and bullet
+                    lines.push(indent + this.theme.listBullet(bullet) + firstLine);
+                }
+                // Rest of the lines
+                for (let j = 1; j < itemLines.length; j++) {
+                    const line = itemLines[j];
+                    const isNestedListLine = line.includes("\x1b[36m"); // cyan bullet color
+                    if (isNestedListLine) {
+                        // Nested list line - already has full indent
+                        lines.push(line);
+                    }
+                    else {
+                        // Regular content - add parent indent + 2 spaces for continuation
+                        lines.push(`${indent}  ${line}`);
+                    }
+                }
+            }
+            else {
+                lines.push(indent + this.theme.listBullet(bullet));
+            }
+        }
+        return lines;
+    }
+    /**
+     * Render list item tokens, handling nested lists
+     * Returns lines WITHOUT the parent indent (renderList will add it)
+     */
+    renderListItem(tokens, parentDepth) {
+        const lines = [];
+        for (const token of tokens) {
+            if (token.type === "list") {
+                // Nested list - render with one additional indent level
+                // These lines will have their own indent, so we just add them as-is
+                const nestedLines = this.renderList(token, parentDepth + 1);
+                lines.push(...nestedLines);
+            }
+            else if (token.type === "text") {
+                // Text content (may have inline tokens)
+                const text = token.tokens && token.tokens.length > 0
+                    ? this.renderInlineTokens(token.tokens)
+                    : token.text || "";
+                lines.push(text);
+            }
+            else if (token.type === "paragraph") {
+                // Paragraph in list item
+                const text = this.renderInlineTokens(token.tokens || []);
+                lines.push(text);
+            }
+            else if (token.type === "code") {
+                // Code block in list item
+                lines.push(this.theme.codeBlockBorder(`\`\`\`${token.lang || ""}`));
+                const codeLines = token.text.split("\n");
+                for (const codeLine of codeLines) {
+                    lines.push(style.dim("  ") + this.theme.codeBlock(codeLine));
+                }
+                lines.push(this.theme.codeBlockBorder("```"));
+            }
+            else {
+                // Other token types - try to render as inline
+                const text = this.renderInlineTokens([token]);
+                if (text) {
+                    lines.push(text);
+                }
+            }
+        }
+        return lines;
+    }
+    /**
+     * Render a table
+     */
+    renderTable(token) {
+        const lines = [];
+        // Extract header and row texts
+        const header = token.header.map((cell) => {
+            const headerCell = cell;
+            return this.renderInlineTokens(headerCell.tokens || []);
+        });
+        const rows = token.rows.map((row) => row.map((cell) => {
+            const rowCell = cell;
+            return this.renderInlineTokens(rowCell.tokens || []);
+        }));
+        // Calculate column widths based on available width
+        const padding = 5; // Account for table borders and padding
+        const availableWidth = Math.max(10, 80 - padding); // Use reasonable default width for TUI
+        const colCount = header?.length ?? 1;
+        const width = Math.max(10, Math.floor(availableWidth / Math.max(1, colCount)));
+        const computedColWidths = new Array(colCount).fill(width);
+        // Create table using cli-table3
+        const table = new Table({
+            head: header,
+            colWidths: computedColWidths,
+            wordWrap: true, // Enable word wrapping for the description column
+        });
+        table.push(...rows);
+        // Split table output into lines
+        const tableOutput = table.toString();
+        const tableLines = tableOutput.split("\n");
+        lines.push(...tableLines);
+        lines.push(""); // Add spacing after table
+        return lines;
+    }
+}

package/dist/tui/components/modal.d.ts

@@ -0,0 +1,29 @@
+import type { Component } from "../tui.ts";
+import { Container } from "../tui.ts";
+/**
+ * Modal component - displays content in an overlay on top of the main UI
+ */
+export declare class Modal extends Container implements Component {
+    private title;
+    backdrop: boolean;
+    private onClose?;
+    private maxWidth;
+    private maxHeight;
+    private scrollPosition;
+    constructor(title: string, content: Component, backdrop?: boolean, onClose?: () => void, maxWidth?: number, maxHeight?: number);
+    handleInput(data: string): void;
+    close(): void;
+    render(width: number): string[];
+    getCursorPosition(): [number, number] | null;
+}
+/**
+ * ModalText component - displays text content in a modal with word wrapping
+ */
+export declare class ModalText extends Container {
+    private text;
+    private paddingX;
+    private paddingY;
+    constructor(text: string, paddingX?: number, paddingY?: number);
+    render(width: number): string[];
+}
+//# sourceMappingURL=modal.d.ts.map

package/dist/tui/components/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../source/tui/components/modal.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC;;GAEG;AACH,qBAAa,KAAM,SAAQ,SAAU,YAAW,SAAS;IACvD,OAAO,CAAC,KAAK,CAAS;IACf,QAAQ,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,cAAc,CAAK;gBAGzB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,UAAO,EACf,OAAO,CAAC,EAAE,MAAM,IAAI,EACpB,QAAQ,CAAC,EAAE,MAAM,EACjB,SAAS,CAAC,EAAE,MAAM;IAYpB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAgD/B,KAAK,IAAI,IAAI;IAMJ,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAqHxC,iBAAiB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;CA2B7C;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;gBAEb,IAAI,EAAE,MAAM,EAAE,QAAQ,SAAI,EAAE,QAAQ,SAAI;IAO3C,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAkFzC"}