@teammates/consolonia 0.2.0 → 0.2.7

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.2.7",
   "description": "Terminal UI rendering engine inspired by Consolonia. Pixel-level compositing with ANSI output.",
   "type": "module",
   "main": "dist/index.js",