@teammates/consolonia 0.2.0

package/dist/widgets/text.js

@@ -0,0 +1,168 @@
+/**
+ * Static text display widget.
+ *
+ * Supports word wrapping, text alignment (left/center/right), and
+ * multi-line content. Automatically invalidates on text or style changes.
+ */
+import { Control } from "../layout/control.js";
+export class Text extends Control {
+    _text;
+    _style;
+    _wrap;
+    _align;
+    /** Cached wrapped lines from the last measure/render pass. */
+    _lines = [];
+    constructor(options = {}) {
+        super();
+        this._text = options.text ?? "";
+        this._style = options.style ?? {};
+        this._wrap = options.wrap ?? false;
+        this._align = options.align ?? "left";
+    }
+    // ── Properties ────────────────────────────────────────────────
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        if (this._text !== value) {
+            this._text = value;
+            this.invalidate();
+        }
+    }
+    get style() {
+        return this._style;
+    }
+    set style(value) {
+        this._style = value;
+        this.invalidate();
+    }
+    get wrap() {
+        return this._wrap;
+    }
+    set wrap(value) {
+        if (this._wrap !== value) {
+            this._wrap = value;
+            this.invalidate();
+        }
+    }
+    get align() {
+        return this._align;
+    }
+    set align(value) {
+        if (this._align !== value) {
+            this._align = value;
+            this.invalidate();
+        }
+    }
+    // ── Layout ────────────────────────────────────────────────────
+    measure(constraint) {
+        if (this._text.length === 0) {
+            this._lines = [];
+            return { width: 0, height: 0 };
+        }
+        const rawLines = this._text.split("\n");
+        if (!this._wrap) {
+            this._lines = rawLines;
+            const longestLine = rawLines.reduce((max, line) => Math.max(max, line.length), 0);
+            return {
+                width: Math.min(longestLine, constraint.maxWidth),
+                height: Math.min(rawLines.length, constraint.maxHeight),
+            };
+        }
+        // Word-wrap mode: wrap to maxWidth
+        const maxW = constraint.maxWidth;
+        if (maxW <= 0) {
+            this._lines = [];
+            return { width: 0, height: 0 };
+        }
+        const wrapped = wrapLines(rawLines, maxW);
+        this._lines = wrapped;
+        const longestWrapped = wrapped.reduce((max, line) => Math.max(max, line.length), 0);
+        return {
+            width: Math.min(longestWrapped, constraint.maxWidth),
+            height: Math.min(wrapped.length, constraint.maxHeight),
+        };
+    }
+    render(ctx) {
+        const bounds = this.bounds;
+        if (!bounds || this._lines.length === 0)
+            return;
+        const availW = bounds.width;
+        for (let i = 0; i < this._lines.length && i < bounds.height; i++) {
+            const line = this._lines[i];
+            const x = alignOffset(line.length, availW, this._align);
+            ctx.drawText(bounds.x + x, bounds.y + i, line, this._style);
+        }
+    }
+}
+// ── Helper: word wrapping ──────────────────────────────────────────
+/**
+ * Wrap an array of raw lines to fit within `maxWidth` columns.
+ *
+ * Rules:
+ * - Break on spaces when possible.
+ * - If a single word exceeds `maxWidth`, hard-break it at the width boundary.
+ * - Preserve explicit line breaks (already split by caller).
+ */
+function wrapLines(rawLines, maxWidth) {
+    const result = [];
+    for (const rawLine of rawLines) {
+        if (rawLine.length === 0) {
+            result.push("");
+            continue;
+        }
+        const words = rawLine.split(" ");
+        let current = "";
+        for (let wi = 0; wi < words.length; wi++) {
+            const word = words[wi];
+            if (word.length === 0) {
+                // Consecutive spaces: add a space to current if it fits
+                if (current.length < maxWidth) {
+                    current += " ";
+                }
+                continue;
+            }
+            // If the word itself exceeds maxWidth, hard-break it
+            if (word.length > maxWidth) {
+                // Flush current line first
+                if (current.length > 0) {
+                    result.push(current);
+                    current = "";
+                }
+                // Split the long word into chunks
+                for (let ci = 0; ci < word.length; ci += maxWidth) {
+                    const chunk = word.slice(ci, ci + maxWidth);
+                    if (ci + maxWidth < word.length) {
+                        result.push(chunk);
+                    }
+                    else {
+                        current = chunk;
+                    }
+                }
+                continue;
+            }
+            if (current.length === 0) {
+                current = word;
+            }
+            else if (current.length + 1 + word.length <= maxWidth) {
+                current += ` ${word}`;
+            }
+            else {
+                result.push(current);
+                current = word;
+            }
+        }
+        result.push(current);
+    }
+    return result;
+}
+// ── Helper: alignment offset ───────────────────────────────────────
+function alignOffset(textLen, availWidth, align) {
+    if (align === "center") {
+        return Math.max(0, Math.floor((availWidth - textLen) / 2));
+    }
+    if (align === "right") {
+        return Math.max(0, availWidth - textLen);
+    }
+    return 0;
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@teammates/consolonia",
+  "version": "0.2.0",
+  "description": "Terminal UI rendering engine inspired by Consolonia. Pixel-level compositing with ANSI output.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "teammates",
+    "terminal",
+    "tui",
+    "ansi",
+    "consolonia"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "typescript": "^5.5.0",
+    "vitest": "^4.1.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "marked": "^17.0.4"
+  }
+}