@teammates/consolonia 0.2.0 → 0.3.0

package/dist/drawing/context.d.ts

@@ -74,4 +74,8 @@ export declare class DrawingContext {
     setPixel(x: number, y: number, pixel: Pixel): void;
     /** Blend a pixel at (x, y) with what's already there. Respects clip. */
     blendPixel(x: number, y: number, pixel: Pixel): void;
+    /** Replace the background color of an existing cell. Respects clip. */
+    highlightCell(x: number, y: number, bgColor: Color): void;
+    /** Read the character at absolute buffer coordinates (ignores translate). */
+    readCharAbsolute(x: number, y: number): string;
 }

package/dist/drawing/context.js

@@ -272,4 +272,17 @@ export class DrawingContext {
             return;
         this.bufSet(x, y, blendPixel(pixel, this.bufGet(x, y)));
     }
+    // ── Selection helpers ─────────────────────────────────────────
+    /** Replace the background color of an existing cell. Respects clip. */
+    highlightCell(x, y, bgColor) {
+        if (!this.isVisible(x, y))
+            return;
+        const existing = this.bufGet(x, y);
+        const newBg = background(bgColor);
+        this.bufSet(x, y, { foreground: existing.foreground, background: newBg });
+    }
+    /** Read the character at absolute buffer coordinates (ignores translate). */
+    readCharAbsolute(x, y) {
+        return this.buffer.get(x, y).foreground.symbol.text;
+    }
 }

package/dist/widgets/chat-view.d.ts

@@ -142,6 +142,11 @@ export declare class ChatView extends Control {
     private _dragging;
     /** The Y offset within the thumb where the drag started. */
     private _dragOffsetY;
+    private _selAnchor;
+    private _selEnd;
+    private _selecting;
+    /** DrawingContext reference from the last render (for text extraction). */
+    private _ctx;
     /** Optional widget that replaces the input area (e.g. Interview). */
     private _inputOverride;
     constructor(options?: ChatViewOptions);
@@ -235,5 +240,15 @@ export declare class ChatView extends Control {
     render(ctx: DrawingContext): void;
     private _renderFeed;
     private _renderDropdown;
+    /** Whether a non-zero text selection is active. */
+    private _hasSelection;
+    /** Copy the selected text and clear the selection. */
+    private _copySelection;
+    /** Extract the plain text within the current selection from the pixel buffer. */
+    private _getSelectedText;
+    /** Render the selection highlight overlay within the feed area. */
+    private _renderSelection;
+    /** Clear any active text selection. */
+    clearSelection(): void;
     private _autoScrollToBottom;
 }

package/dist/widgets/chat-view.js

@@ -33,8 +33,11 @@ import { Control } from "../layout/control.js";
 import { StyledText } from "./styled-text.js";
 import { Text } from "./text.js";
 import { TextInput, } from "./text-input.js";
-// ── URL detection ──────────────────────────────────────────────────
+// ── URL / file path detection ───────────────────────────────────────
 const URL_REGEX = /https?:\/\/[^\s)>\]]+/g;
+const FILE_PATH_REGEX = /(?:[A-Za-z]:[/\\]|\/)[^\s:*?"<>|)>\]]*[^\s:*?"<>|)>\].,:;!]/g;
+// ── Selection highlight color ─────────────────────────────────────
+const SELECTION_BG = { r: 60, g: 100, b: 180, a: 255 };
 // ── ChatView ───────────────────────────────────────────────────────
 export class ChatView extends Control {
     // ── Child controls ─────────────────────────────────────────────
@@ -82,6 +85,12 @@ export class ChatView extends Control {
     _dragging = false;
     /** The Y offset within the thumb where the drag started. */
     _dragOffsetY = 0;
+    // ── Selection state ──────────────────────────────────────────
+    _selAnchor = null;
+    _selEnd = null;
+    _selecting = false;
+    /** DrawingContext reference from the last render (for text extraction). */
+    _ctx = null;
     /** Optional widget that replaces the input area (e.g. Interview). */
     _inputOverride = null;
     constructor(options = {}) {
@@ -452,11 +461,24 @@ export class ChatView extends Control {
     handleInput(event) {
         if (event.type === "key") {
             const ke = event.event;
-            // Ctrl+C → emit for the app to handle
+            // Ctrl+C: if selection active, copy; otherwise emit for the app
             if (ke.key === "c" && ke.ctrl && !ke.alt && !ke.shift) {
+                if (this._hasSelection()) {
+                    this._copySelection();
+                    return true;
+                }
                 this.emit("ctrlc");
                 return true;
             }
+            // Enter: if selection active, copy; otherwise fall through
+            if (ke.key === "enter" && this._hasSelection()) {
+                this._copySelection();
+                return true;
+            }
+            // Any key clears active selection
+            if (this._hasSelection()) {
+                this.clearSelection();
+            }
             // Dropdown navigation
             if (this._dropdownItems.length > 0) {
                 if (ke.key === "up")
@@ -492,7 +514,7 @@ export class ChatView extends Control {
                 return true;
             }
         }
-        // Mouse events: wheel scrolling + scrollbar drag
+        // Mouse events: wheel scrolling, scrollbar drag, selection, actions
         if (event.type === "mouse") {
             const me = event.event;
             if (me.type === "wheelup") {
@@ -503,21 +525,21 @@ export class ChatView extends Control {
                 this.scrollFeed(3);
                 return true;
             }
+            // Precompute scrollbar hit for reuse
+            const onScrollbar = this._scrollbarVisible &&
+                me.x === this._scrollbarX &&
+                me.y >= this._feedY &&
+                me.y < this._feedY + this._feedH;
             // Scrollbar drag
             if (this._scrollbarVisible) {
-                const onScrollbar = me.x === this._scrollbarX &&
-                    me.y >= this._feedY &&
-                    me.y < this._feedY + this._feedH;
                 if (me.type === "press" && me.button === "left" && onScrollbar) {
                     const relY = me.y - this._feedY;
                     if (relY >= this._thumbPos &&
                         relY < this._thumbPos + this._thumbSize) {
-                        // Clicked on thumb — start dragging
                         this._dragging = true;
                         this._dragOffsetY = relY - this._thumbPos;
                     }
                     else {
-                        // Clicked on track — jump to that position
                         const ratio = relY / this._feedH;
                         this._feedScrollOffset = Math.round(ratio * this._maxScroll);
                         this._feedScrollOffset = Math.max(0, Math.min(this._feedScrollOffset, this._maxScroll));
@@ -540,28 +562,70 @@ export class ChatView extends Control {
                     return true;
                 }
             }
-            // Ctrl+click to open URLs in browser
+            // Ctrl+click to open URLs or file paths
             if (me.type === "press" && me.button === "left" && me.ctrl) {
                 const feedLineIdx = this._screenToFeedLine.get(me.y) ?? -1;
                 if (feedLineIdx >= 0) {
                     const text = this._extractFeedLineText(feedLineIdx);
+                    // Collect all clickable targets: URLs and absolute file paths
                     URL_REGEX.lastIndex = 0;
+                    FILE_PATH_REGEX.lastIndex = 0;
                     const urls = [...text.matchAll(URL_REGEX)];
-                    if (urls.length === 1) {
-                        this.emit("link", urls[0][0]);
+                    const paths = [...text.matchAll(FILE_PATH_REGEX)];
+                    const allTargets = [
+                        ...urls.map((m) => ({ index: m.index, text: m[0], type: "link" })),
+                        ...paths.map((m) => ({ index: m.index, text: m[0], type: "file" })),
+                    ].sort((a, b) => a.index - b.index);
+                    if (allTargets.length === 1) {
+                        this.emit(allTargets[0].type, allTargets[0].text);
                         return true;
                     }
-                    if (urls.length > 1) {
-                        // Try to resolve which URL based on click position
+                    if (allTargets.length > 1) {
                         const row = this._screenToFeedRow.get(me.y) ?? 0;
                         const col = me.x - this._feedX;
                         const charOffset = row * this._contentWidth + col;
-                        const hit = this._findUrlAtOffset(text, charOffset);
-                        this.emit("link", hit ?? urls[0][0]);
+                        const hit = allTargets.find((t) => charOffset >= t.index && charOffset < t.index + t.text.length);
+                        const target = hit ?? allTargets[0];
+                        this.emit(target.type, target.text);
                         return true;
                     }
                 }
             }
+            // Text selection: start on left press in feed area
+            if (me.type === "press" &&
+                me.button === "left" &&
+                !me.ctrl &&
+                !onScrollbar) {
+                const feedLineIdx = this._screenToFeedLine.get(me.y) ?? -1;
+                const isAction = feedLineIdx >= 0 && this._feedActions.has(feedLineIdx);
+                if (!isAction) {
+                    this._selAnchor = { x: me.x, y: me.y };
+                    this._selEnd = { x: me.x, y: me.y };
+                    this._selecting = true;
+                    this.invalidate();
+                    return true;
+                }
+            }
+            // Text selection: extend on move
+            if (me.type === "move" && this._selecting) {
+                this._selEnd = { x: me.x, y: me.y };
+                this.invalidate();
+                return true;
+            }
+            // Text selection: finalize on release
+            if (me.type === "release" && this._selecting) {
+                this._selecting = false;
+                // If anchor == end (just a click, no drag), clear selection
+                if (this._selAnchor &&
+                    this._selEnd &&
+                    this._selAnchor.x === this._selEnd.x &&
+                    this._selAnchor.y === this._selEnd.y) {
+                    this._selAnchor = null;
+                    this._selEnd = null;
+                }
+                this.invalidate();
+                return true;
+            }
             // Action hover/click in feed area
             if (this._feedActions.size > 0) {
                 const feedLineIdx = this._screenToFeedLine.get(me.y) ?? -1;
@@ -570,14 +634,12 @@ export class ChatView extends Control {
                     const newHover = entry ? feedLineIdx : -1;
                     if (newHover !== this._hoveredAction ||
                         (entry && entry.items.length > 1)) {
-                        // Restore previous hover
                         if (this._hoveredAction >= 0) {
                             const prev = this._feedActions.get(this._hoveredAction);
                             if (prev) {
                                 this._feedLines[this._hoveredAction].lines = [prev.normalStyle];
                             }
                         }
-                        // Apply new hover — highlight only the hovered action item
                         if (entry && newHover >= 0) {
                             const hitItem = this._resolveActionItem(entry, me.x);
                             const hoverLine = this._buildHoverLine(entry, hitItem);
@@ -586,7 +648,6 @@ export class ChatView extends Control {
                         this._hoveredAction = newHover;
                         this.invalidate();
                     }
-                    // Don't consume — let other handlers run too
                 }
                 if (me.type === "press" && me.button === "left" && entry) {
                     const hitItem = this._resolveActionItem(entry, me.x);
@@ -681,6 +742,7 @@ export class ChatView extends Control {
     }
     // ── Render ─────────────────────────────────────────────────────
     render(ctx) {
+        this._ctx = ctx;
         const b = this.bounds;
         if (!b || b.width < 1 || b.height < 3)
             return;
@@ -930,6 +992,10 @@ export class ChatView extends Control {
         else {
             this._scrollbarVisible = false;
         }
+        // Render selection highlight overlay
+        if (this._selAnchor && this._selEnd) {
+            this._renderSelection(ctx, x, y, width, height);
+        }
         ctx.popClip();
     }
     // ── Dropdown rendering ─────────────────────────────────────────
@@ -947,6 +1013,77 @@ export class ChatView extends Control {
             ctx.drawText(x, y + i, truncated, style);
         }
     }
+    // ── Selection ──────────────────────────────────────────────────
+    /** Whether a non-zero text selection is active. */
+    _hasSelection() {
+        return (this._selAnchor !== null &&
+            this._selEnd !== null &&
+            (this._selAnchor.x !== this._selEnd.x ||
+                this._selAnchor.y !== this._selEnd.y));
+    }
+    /** Copy the selected text and clear the selection. */
+    _copySelection() {
+        const text = this._getSelectedText();
+        if (text) {
+            this.emit("copy", text);
+        }
+        this.clearSelection();
+    }
+    /** Extract the plain text within the current selection from the pixel buffer. */
+    _getSelectedText() {
+        if (!this._selAnchor || !this._selEnd || !this._ctx)
+            return "";
+        let startY = this._selAnchor.y;
+        let startX = this._selAnchor.x;
+        let endY = this._selEnd.y;
+        let endX = this._selEnd.x;
+        if (startY > endY || (startY === endY && startX > endX)) {
+            [startY, endY] = [endY, startY];
+            [startX, endX] = [endX, startX];
+        }
+        const lines = [];
+        for (let row = startY; row <= endY; row++) {
+            const colStart = row === startY ? startX : this._feedX;
+            const colEnd = row === endY ? endX : this._feedX + this._contentWidth - 1;
+            let line = "";
+            for (let col = colStart; col <= colEnd; col++) {
+                const ch = this._ctx.readCharAbsolute(col, row);
+                line += ch || " ";
+            }
+            lines.push(line.trimEnd());
+        }
+        return lines.join("\n");
+    }
+    /** Render the selection highlight overlay within the feed area. */
+    _renderSelection(ctx, feedX, feedY, feedW, feedH) {
+        if (!this._selAnchor || !this._selEnd)
+            return;
+        let startY = this._selAnchor.y;
+        let startX = this._selAnchor.x;
+        let endY = this._selEnd.y;
+        let endX = this._selEnd.x;
+        if (startY > endY || (startY === endY && startX > endX)) {
+            [startY, endY] = [endY, startY];
+            [startX, endX] = [endX, startX];
+        }
+        // Clamp to feed area
+        startY = Math.max(startY, feedY);
+        endY = Math.min(endY, feedY + feedH - 1);
+        for (let row = startY; row <= endY; row++) {
+            const colStart = row === startY ? startX : feedX;
+            const colEnd = row === endY ? endX : feedX + feedW - 2;
+            for (let col = colStart; col <= colEnd; col++) {
+                ctx.highlightCell(col, row, SELECTION_BG);
+            }
+        }
+    }
+    /** Clear any active text selection. */
+    clearSelection() {
+        this._selAnchor = null;
+        this._selEnd = null;
+        this._selecting = false;
+        this.invalidate();
+    }
     // ── Auto-scroll ────────────────────────────────────────────────
     _autoScrollToBottom() {
         // Set scroll to a very large value; it will be clamped during render

package/dist/widgets/markdown.js

@@ -297,9 +297,10 @@ function renderList(token, lines, theme, synTheme, width, indent, ctx) {
     lines.push([{ text: indent, style: theme.text }]);
 }
 // ── Tables ───────────────────────────────────────────────────────
-function renderTable(token, lines, theme, _width, indent) {
+function renderTable(token, lines, theme, width, indent) {
     const numCols = token.header.length;
-    // Compute column widths from content
+    const avail = width - indent.length;
+    // Compute natural column widths from content
     const colWidths = token.header.map((h) => plainText(h.tokens).length);
     for (const row of token.rows) {
         for (let c = 0; c < numCols; c++) {
@@ -312,42 +313,132 @@ function renderTable(token, lines, theme, _width, indent) {
     for (let c = 0; c < numCols; c++) {
         colWidths[c] = Math.max(3, colWidths[c]) + 2;
     }
+    // Shrink columns if total table width exceeds available width
+    // Total = sum(colWidths) + numCols + 1 (for │ borders)
+    const MIN_COL = 6; // minimum inner width to be readable
+    const totalBorders = numCols + 1;
+    const totalNatural = colWidths.reduce((a, b) => a + b, 0) + totalBorders;
+    if (totalNatural > avail && avail > totalBorders + numCols * MIN_COL) {
+        const budgetForCols = avail - totalBorders;
+        // Proportional shrink, respecting minimum
+        let remaining = budgetForCols;
+        const fixed = new Array(numCols).fill(false);
+        // First pass: lock columns that are already small (at or below fair share)
+        // so they keep their natural width instead of being shrunk further
+        const fairShare = Math.floor(budgetForCols / numCols);
+        for (let c = 0; c < numCols; c++) {
+            if (colWidths[c] <= fairShare) {
+                fixed[c] = true;
+                remaining -= colWidths[c];
+            }
+        }
+        // Second pass: distribute remaining budget proportionally among shrinkable columns
+        const shrinkSum = colWidths
+            .filter((_w, i) => !fixed[i])
+            .reduce((a, b) => a + b, 0);
+        if (shrinkSum > 0) {
+            let distributed = 0;
+            const shrinkable = colWidths.map((_w, i) => !fixed[i]);
+            for (let c = 0; c < numCols; c++) {
+                if (shrinkable[c]) {
+                    const share = Math.max(MIN_COL, Math.floor((colWidths[c] / shrinkSum) * remaining));
+                    colWidths[c] = share;
+                    distributed += share;
+                }
+            }
+            // Give any leftover pixels to the last shrinkable column
+            const leftover = remaining - distributed;
+            if (leftover !== 0) {
+                for (let c = numCols - 1; c >= 0; c--) {
+                    if (shrinkable[c]) {
+                        colWidths[c] += leftover;
+                        break;
+                    }
+                }
+            }
+        }
+    }
     const border = theme.tableBorder;
     // Helper to build a horizontal rule
     const hRule = (left, mid, right) => {
         const parts = colWidths.map((w) => "─".repeat(w));
         return left + parts.join(mid) + right;
     };
-    // Helper to build a data row
-    const dataRow = (cells, style) => {
-        const segs = [
-            { text: indent, style: theme.text },
-            { text: "│", style: border },
-        ];
+    // Word-wrap text to fit within a column width (breaks on spaces)
+    const wrapCellText = (text, maxW) => {
+        if (maxW <= 0)
+            return [text];
+        if (text.length <= maxW)
+            return [text];
+        const wrapped = [];
+        let rest = text;
+        while (rest.length > maxW) {
+            // Find last space within the limit
+            let breakAt = rest.lastIndexOf(" ", maxW);
+            if (breakAt <= 0) {
+                // No space — hard break
+                breakAt = maxW;
+                wrapped.push(rest.slice(0, breakAt));
+                rest = rest.slice(breakAt);
+            }
+            else {
+                wrapped.push(rest.slice(0, breakAt));
+                rest = rest.slice(breakAt + 1); // skip the space
+            }
+        }
+        if (rest.length > 0)
+            wrapped.push(rest);
+        return wrapped;
+    };
+    // Helper to build a (possibly multi-line) data row
+    const dataRows = (cells, style) => {
+        // Get wrapped lines for each cell
+        const cellLines = [];
+        let maxLines = 1;
         for (let c = 0; c < numCols; c++) {
             const cellText = cells[c] ? plainText(cells[c].tokens) : "";
-            const align = token.header[c]?.align;
-            const padded = padCell(cellText, colWidths[c], align);
-            segs.push({ text: padded, style });
-            segs.push({ text: "│", style: border });
+            const innerW = colWidths[c] - 2; // 1 char padding each side
+            const wrapped = wrapCellText(cellText, innerW);
+            cellLines.push(wrapped);
+            if (wrapped.length > maxLines)
+                maxLines = wrapped.length;
         }
-        return segs;
+        const result = [];
+        for (let row = 0; row < maxLines; row++) {
+            const segs = [
+                { text: indent, style: theme.text },
+                { text: "│", style: border },
+            ];
+            for (let c = 0; c < numCols; c++) {
+                const lineText = row < cellLines[c].length ? cellLines[c][row] : "";
+                const align = token.header[c]?.align;
+                const padded = padCell(lineText, colWidths[c], align);
+                segs.push({ text: padded, style });
+                segs.push({ text: "│", style: border });
+            }
+            result.push(segs);
+        }
+        return result;
     };
     // Top border
     lines.push([
         { text: indent, style: theme.text },
         { text: hRule("┌", "┬", "┐"), style: border },
     ]);
-    // Header row
-    lines.push(dataRow(token.header, theme.tableHeader));
+    // Header row (may be multi-line)
+    for (const line of dataRows(token.header, theme.tableHeader)) {
+        lines.push(line);
+    }
     // Header separator
     lines.push([
         { text: indent, style: theme.text },
         { text: hRule("├", "┼", "┤"), style: border },
     ]);
-    // Data rows
+    // Data rows (may be multi-line each)
     for (const row of token.rows) {
-        lines.push(dataRow(row, theme.text));
+        for (const line of dataRows(row, theme.text)) {
+            lines.push(line);
+        }
     }
     // Bottom border
     lines.push([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammates/consolonia",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Terminal UI rendering engine inspired by Consolonia. Pixel-level compositing with ANSI output.",
   "type": "module",
   "main": "dist/index.js",