@teammates/consolonia 0.2.7 → 0.3.1

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,15 @@ 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;
+    /** Timer for auto-scrolling the feed during drag-to-select. */
+    private _selScrollTimer;
+    /** Direction of auto-scroll: -1 = up, 1 = down, 0 = none. */
+    private _selScrollDir;
+    /** 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 +244,19 @@ 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;
+    /** Start interval-based scroll during drag-to-select at feed edges. */
+    private _startSelScroll;
+    /** Stop auto-scroll timer. */
+    private _stopSelScroll;
     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,16 @@ 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;
+    /** Timer for auto-scrolling the feed during drag-to-select. */
+    _selScrollTimer = null;
+    /** Direction of auto-scroll: -1 = up, 1 = down, 0 = none. */
+    _selScrollDir = 0;
+    /** 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 +465,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 +518,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 +529,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 +566,82 @@ 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 (with auto-scroll at edges)
+            if (me.type === "move" && this._selecting) {
+                this._selEnd = { x: me.x, y: me.y };
+                const feedTop = this._feedY;
+                const feedBot = this._feedY + this._feedH;
+                if (me.y < feedTop) {
+                    this._startSelScroll(-1);
+                }
+                else if (me.y >= feedBot) {
+                    this._startSelScroll(1);
+                }
+                else {
+                    this._stopSelScroll();
+                }
+                this.invalidate();
+                return true;
+            }
+            // Text selection: finalize on release
+            if (me.type === "release" && this._selecting) {
+                this._selecting = false;
+                this._stopSelScroll();
+                // 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 +650,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 +664,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 +758,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 +1008,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,7 +1029,106 @@ 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._stopSelScroll();
+        this.invalidate();
+    }
     // ── Auto-scroll ────────────────────────────────────────────────
+    /** Start interval-based scroll during drag-to-select at feed edges. */
+    _startSelScroll(dir) {
+        if (this._selScrollDir === dir && this._selScrollTimer)
+            return;
+        this._stopSelScroll();
+        this._selScrollDir = dir;
+        this._selScrollTimer = setInterval(() => {
+            this.scrollFeed(this._selScrollDir * 3);
+            // Move selEnd to keep extending the selection while scrolling
+            if (this._selEnd) {
+                this._selEnd = {
+                    x: this._selEnd.x,
+                    y: this._selScrollDir < 0
+                        ? this._feedY
+                        : this._feedY + this._feedH - 1,
+                };
+            }
+        }, 80);
+    }
+    /** Stop auto-scroll timer. */
+    _stopSelScroll() {
+        if (this._selScrollTimer) {
+            clearInterval(this._selScrollTimer);
+            this._selScrollTimer = null;
+        }
+        this._selScrollDir = 0;
+    }
     _autoScrollToBottom() {
         // Set scroll to a very large value; it will be clamped during render
         this._feedScrollOffset = Number.MAX_SAFE_INTEGER;

package/package.json

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