@teammates/consolonia 0.4.0 → 0.5.0

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

@@ -33,7 +33,7 @@ import type { DrawingContext, TextStyle } from "../drawing/context.js";
 import type { InputEvent } from "../input/events.js";
 import { Control } from "../layout/control.js";
 import type { Constraint, Rect, Size } from "../layout/types.js";
-import type { StyledSpan } from "../styled.js";
+import { type StyledSpan } from "../styled.js";
 import { type StyledLine } from "./styled-text.js";
 import { type DeleteSizer, type InputColorizer, TextInput } from "./text-input.js";
 export interface DropdownItem {
@@ -93,8 +93,10 @@ export interface ChatViewOptions {
     dropdownLabelStyle?: TextStyle;
     /** Maximum number of lines the input box can grow to (default 1). */
     maxInputHeight?: number;
-    /** Footer content shown below the input (StyledLine for mixed colors). */
+    /** Footer content shown below the input (StyledLine for mixed colors). Sets the left side. */
     footer?: StyledLine;
+    /** Right-aligned footer content. */
+    footerRight?: StyledLine;
     /** Style for footer text (used as default when footer is a plain string). */
     footerStyle?: TextStyle;
     /** Command history entries. */
@@ -117,6 +119,7 @@ export declare class ChatView extends Control {
     private _input;
     private _inputSeparator;
     private _footer;
+    private _footerRight;
     private _dropdownItems;
     private _dropdownIndex;
     private _feedStyle;
@@ -166,8 +169,10 @@ export declare class ChatView extends Control {
     set bannerWidget(widget: Control);
     /** Get the current banner widget. */
     get bannerWidget(): Control;
-    /** Set footer content (plain string or StyledSpan for mixed colors). */
+    /** Set left-side footer content (plain string or StyledSpan for mixed colors). */
     setFooter(content: StyledLine): void;
+    /** Set right-side footer content (plain string or StyledSpan for mixed colors). */
+    setFooterRight(content: StyledLine): void;
     /** Append a line of plain text to the feed. Auto-scrolls to bottom. */
     appendToFeed(text: string, style?: TextStyle): void;
     /** Append a styled line (StyledSpan) to the feed. */

package/dist/widgets/chat-view.js

@@ -57,6 +57,7 @@ export class ChatView extends Control {
     _input;
     _inputSeparator;
     _footer;
+    _footerRight;
     _dropdownItems = [];
     _dropdownIndex = -1;
     // ── Configuration ──────────────────────────────────────────────
@@ -163,6 +164,13 @@ export class ChatView extends Control {
             wrap: false,
         });
         this.addChild(this._footer);
+        const footerRightLine = options.footerRight ?? "";
+        this._footerRight = new StyledText({
+            lines: [footerRightLine],
+            defaultStyle: this._footerStyle,
+            wrap: false,
+        });
+        this.addChild(this._footerRight);
         // Wire input events to ChatView events
         this._input.on("submit", (text) => this.emit("submit", text));
         this._input.on("change", (text) => this.emit("change", text));
@@ -221,11 +229,16 @@ export class ChatView extends Control {
         return this._banner;
     }
     // ── Public API: Footer ─────────────────────────────────────────
-    /** Set footer content (plain string or StyledSpan for mixed colors). */
+    /** Set left-side footer content (plain string or StyledSpan for mixed colors). */
     setFooter(content) {
         this._footer.lines = [content];
         this.invalidate();
     }
+    /** Set right-side footer content (plain string or StyledSpan for mixed colors). */
+    setFooterRight(content) {
+        this._footerRight.lines = [content];
+        this.invalidate();
+    }
     // ── Public API: Feed ───────────────────────────────────────────
     /** Append a line of plain text to the feed. Auto-scrolls to bottom. */
     appendToFeed(text, style) {
@@ -335,6 +348,10 @@ export class ChatView extends Control {
     /** Scroll the feed by a delta (positive = down, negative = up). */
     scrollFeed(delta) {
         this._feedScrollOffset = Math.max(0, this._feedScrollOffset + delta);
+        // Clear selection when scrolling (unless actively drag-selecting)
+        if (!this._selecting && this._hasSelection()) {
+            this.clearSelection();
+        }
         this.invalidate();
     }
     // ── Public API: Input ──────────────────────────────────────────
@@ -446,6 +463,7 @@ export class ChatView extends Control {
             this._input.focusable = false;
             this._inputSeparator.visible = false;
             this._footer.visible = false;
+            this._footerRight.visible = false;
         }
         else {
             // Restore normal input chrome
@@ -454,6 +472,7 @@ export class ChatView extends Control {
             this._input.onFocus();
             this._inputSeparator.visible = true;
             this._footer.visible = true;
+            this._footerRight.visible = true;
         }
         this.invalidate();
     }
@@ -547,6 +566,8 @@ export class ChatView extends Control {
                         const ratio = relY / this._feedH;
                         this._feedScrollOffset = Math.round(ratio * this._maxScroll);
                         this._feedScrollOffset = Math.max(0, Math.min(this._feedScrollOffset, this._maxScroll));
+                        if (this._hasSelection())
+                            this.clearSelection();
                         this.invalidate();
                     }
                     return true;
@@ -558,6 +579,8 @@ export class ChatView extends Control {
                     const clampedPos = Math.max(0, Math.min(newThumbPos, maxThumbPos));
                     const ratio = maxThumbPos > 0 ? clampedPos / maxThumbPos : 0;
                     this._feedScrollOffset = Math.round(ratio * this._maxScroll);
+                    if (this._hasSelection())
+                        this.clearSelection();
                     this.invalidate();
                     return true;
                 }
@@ -631,6 +654,7 @@ export class ChatView extends Control {
             if (me.type === "release" && this._selecting) {
                 this._selecting = false;
                 this._stopSelScroll();
+                this._selEnd = { x: me.x, y: me.y };
                 // If anchor == end (just a click, no drag), clear selection
                 if (this._selAnchor &&
                     this._selEnd &&
@@ -881,6 +905,7 @@ export class ChatView extends Control {
             this._renderDropdown(ctx, b.x, y, W, totalDropdownH);
         }
         else {
+            // Left footer
             this._footer.measure({
                 minWidth: 0,
                 maxWidth: W,
@@ -889,6 +914,23 @@ export class ChatView extends Control {
             });
             this._footer.arrange({ x: b.x, y, width: W, height: footerH });
             this._footer.render(ctx);
+            // Right footer (right-aligned on the same row)
+            const rightSize = this._footerRight.measure({
+                minWidth: 0,
+                maxWidth: W,
+                minHeight: 0,
+                maxHeight: 1,
+            });
+            if (rightSize.width > 0) {
+                const rightX = b.x + W - rightSize.width;
+                this._footerRight.arrange({
+                    x: rightX,
+                    y,
+                    width: rightSize.width,
+                    height: footerH,
+                });
+                this._footerRight.render(ctx);
+            }
         }
     }
     // ── Feed rendering ─────────────────────────────────────────────
@@ -983,6 +1025,9 @@ export class ChatView extends Control {
             }
             cy += item.height;
         }
+        // Always cache feed geometry for selection edge-detection
+        this._feedY = y;
+        this._feedH = height;
         // Render scrollbar and cache geometry for hit-testing
         if (height > 0 && totalContentH > height) {
             const scrollX = x + width - 1;
@@ -994,8 +1039,6 @@ export class ChatView extends Control {
             const thumbStyle = this._feedStyle;
             // Cache for mouse interaction
             this._scrollbarX = scrollX;
-            this._feedY = y;
-            this._feedH = height;
             this._thumbPos = thumbPos;
             this._thumbSize = thumbSize;
             this._maxScroll = maxScroll;

package/package.json

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