@teammates/consolonia 0.3.0 → 0.3.2

package/README.md

@@ -1,48 +1,48 @@
-# @teammates/consolonia
-
-> Part of the [teammates](https://github.com/Stevenic/teammates) monorepo.
-
-Terminal UI rendering engine inspired by Consolonia. Pixel-level compositing with ANSI output.
-
-## Quick Start
-
-```bash
-npm install @teammates/consolonia
-```
-
-## Features
-
-- Pixel-level terminal buffer with foreground/background compositing
-- Box-drawing character merging (single, double, mixed)
-- Layout system: Box, Row, Column, Stack with constraint-based sizing
-- Clipping regions for nested drawing contexts
-- Widget library: Border, Panel, Text, TextInput, ScrollView, ChatView, Markdown, Syntax
-- Styled text with inline markup (`*bold*`, `_italic_`, `` `code` ``, `~dim~`)
-- Input processing: keyboard, mouse, paste detection, escape sequences
-- ANSI output with dirty-region rendering (only redraws what changed)
-
-## Architecture
-
-```
-src/
-  pixel/        # Buffer, Pixel, Color, Symbol, Foreground, Background
-  layout/       # Box, Row, Column, Stack, Control (constraint solver)
-  drawing/      # DrawingContext, Clip
-  render/       # RenderTarget, Regions (dirty tracking)
-  widgets/      # Border, Panel, Text, TextInput, ScrollView, ChatView, Markdown, Syntax
-  input/        # Processor, Matchers (text, escape, mouse, paste)
-  ansi/         # Escape codes, Output, Strip
-  styled.ts     # Inline markup parser
-  app.ts        # Application lifecycle
-  index.ts      # Public API
-```
-
-## Testing
-
-```bash
-npm test
-```
-
-## Requirements
-
-- Node.js >= 20
+# @teammates/consolonia
+
+> Part of the [teammates](https://github.com/Stevenic/teammates) monorepo.
+
+Terminal UI rendering engine inspired by Consolonia. Pixel-level compositing with ANSI output.
+
+## Quick Start
+
+```bash
+npm install @teammates/consolonia
+```
+
+## Features
+
+- Pixel-level terminal buffer with foreground/background compositing
+- Box-drawing character merging (single, double, mixed)
+- Layout system: Box, Row, Column, Stack with constraint-based sizing
+- Clipping regions for nested drawing contexts
+- Widget library: Border, Panel, Text, TextInput, ScrollView, ChatView, Markdown, Syntax
+- Styled text with inline markup (`*bold*`, `_italic_`, `` `code` ``, `~dim~`)
+- Input processing: keyboard, mouse, paste detection, escape sequences
+- ANSI output with dirty-region rendering (only redraws what changed)
+
+## Architecture
+
+```
+src/
+  pixel/        # Buffer, Pixel, Color, Symbol, Foreground, Background
+  layout/       # Box, Row, Column, Stack, Control (constraint solver)
+  drawing/      # DrawingContext, Clip
+  render/       # RenderTarget, Regions (dirty tracking)
+  widgets/      # Border, Panel, Text, TextInput, ScrollView, ChatView, Markdown, Syntax
+  input/        # Processor, Matchers (text, escape, mouse, paste)
+  ansi/         # Escape codes, Output, Strip
+  styled.ts     # Inline markup parser
+  app.ts        # Application lifecycle
+  index.ts      # Public API
+```
+
+## Testing
+
+```bash
+npm test
+```
+
+## Requirements
+
+- Node.js >= 20

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

@@ -145,6 +145,10 @@ export declare class ChatView extends Control {
     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). */
@@ -250,5 +254,9 @@ export declare class ChatView extends Control {
     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

@@ -89,6 +89,10 @@ export class ChatView extends Control {
     _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). */
@@ -606,15 +610,27 @@ export class ChatView extends Control {
                     return true;
                 }
             }
-            // Text selection: extend on move
+            // 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 &&
@@ -1082,9 +1098,37 @@ export class ChatView extends Control {
         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.3.0",
+  "version": "0.3.2",
   "description": "Terminal UI rendering engine inspired by Consolonia. Pixel-level compositing with ANSI output.",
   "type": "module",
   "main": "dist/index.js",