@oxecli/oxe 1.0.114 → 1.0.116

package/dist/ui.js

@@ -116,8 +116,10 @@ export function clearScreen() {
 export function terminalWidth() {
     return process.stdout.columns || 80;
 }
-/** Minimum width for boxes/cards so they don't collapse to nothing. */
-const MIN_BOX_WIDTH = 52;
+/** Minimum width for boxes/cards so they don't collapse to nothing. Kept
+ *  well below the smallest terminal width so a card can keep scaling down
+ *  (it never forces a box wider than the terminal). */
+const MIN_BOX_WIDTH = 30;
 /** Horizontal margin reserved on each side of a box/card from the terminal edge. */
 const BOX_MARGIN = 4;
 /**
@@ -138,11 +140,85 @@ export const ANSI_RE = /\x1b\[[0-9;]*[a-zA-Z]|\x1b\].*?\x07|\x1b[()][AB012]|\x1b
 export function stripAnsi(s) {
     return s.replace(ANSI_RE, "");
 }
+// ---------------------------------------------------------------------------
+// Display width (wcwidth-style) helpers
+//
+// plainLen() historically counted JS characters, but wide characters (CJK,
+// fullwidth forms, emoji) occupy two terminal columns while counting as one
+// string character. That made table columns, panel borders, wrapping and
+// truncation overflow by the number of wide glyphs. These helpers measure
+// real terminal display width so every frame stays aligned.
+// ---------------------------------------------------------------------------
+/** Wide (double-width) code-point ranges. */
+const WIDE_RANGES = [
+    [0x1100, 0x115f], // Hangul Jamo
+    [0x2e80, 0xa4cf], // CJK radicals, Kangxi, CJK symbols, Hiragana/Katakana, Yi
+    [0xac00, 0xd7a3], // Hangul syllables
+    [0xf900, 0xfaff], // CJK compatibility
+    [0xfe30, 0xfe4f], // CJK compatibility forms
+    [0xff00, 0xff60], // fullwidth forms
+    [0xffe0, 0xffe6], // fullwidth signs
+    [0x1f300, 0x1f64f], // emoji / misc pictographs
+    [0x1f680, 0x1f6ff], // transport & map symbols
+    [0x1f900, 0x1f9ff], // supplemental symbols & pictographs
+    [0x1fa70, 0x1faff], // symbols & pictographs extended-A
+    [0x20000, 0x3fffd], // CJK extension B+ (astral)
+];
+const WIDE_POINTS = new Set([
+    0x231a, 0x231b, 0x23e9, 0x23ea, 0x23eb, 0x23ec, 0x23f0, 0x23f3, 0x25fd,
+    0x25fe, 0x2614, 0x2615, 0x2648, 0x2649, 0x264a, 0x264b, 0x264c, 0x264d,
+    0x264e, 0x264f, 0x2650, 0x2651, 0x2652, 0x2653, 0x267f, 0x2693, 0x26a1,
+    0x26aa, 0x26ab, 0x26bd, 0x26be, 0x26c4, 0x26c5, 0x26ce, 0x26d4, 0x26ea,
+    0x26f2, 0x26f3, 0x26f5, 0x26fa, 0x26fd, 0x2705, 0x270a, 0x270b, 0x2728,
+    0x274c, 0x274e, 0x2753, 0x2754, 0x2755, 0x2757, 0x2795, 0x2796, 0x2797,
+    0x27b0, 0x27bf, 0x2b1b, 0x2b1c, 0x2b50, 0x2b55, 0x2329, 0x232a, 0x303f,
+]);
+/** Terminal columns occupied by a single character (0 combining, 1 normal,
+ *  2 wide). */
+export function charWidth(ch) {
+    const c = ch.codePointAt(0);
+    if (c == null)
+        return 0;
+    // Combining marks occupy no columns of their own.
+    if ((c >= 0x0300 && c <= 0x036f) ||
+        (c >= 0x1ab0 && c <= 0x1aff) ||
+        (c >= 0x1dc0 && c <= 0x1dff) ||
+        (c >= 0x20d0 && c <= 0x20ff) ||
+        (c >= 0xfe20 && c <= 0xfe2f))
+        return 0;
+    for (const [lo, hi] of WIDE_RANGES)
+        if (c >= lo && c <= hi)
+            return 2;
+    if (WIDE_POINTS.has(c))
+        return 2;
+    return 1;
+}
+/** Terminal display width of a plain (ANSI-stripped) string. */
+export function dispLen(s) {
+    let w = 0;
+    for (const ch of s)
+        w += charWidth(ch);
+    return w;
+}
 export function plainLen(s) {
-    return stripAnsi(s).length;
+    return dispLen(stripAnsi(s));
 }
-// Truncate styled text to a max number of visible characters while keeping
-// ANSI escape sequences intact (never cut mid-sequence).
+/** Take as many characters as fit within maxW terminal columns, never cutting a
+ *  wide glyph in half. */
+function takeVisible(s, maxW) {
+    let w = 0;
+    let out = "";
+    for (const ch of s) {
+        const cw = charWidth(ch);
+        if (w + cw > maxW)
+            break;
+        out += ch;
+        w += cw;
+    }
+    return out;
+}
+// Truncate styled text to a max number of visible terminal columns while
+// keeping ANSI escape sequences intact (never cut mid-sequence).
 export function truncateStyled(text, maxVisible) {
     if (maxVisible <= 0)
         return "";
@@ -157,11 +233,9 @@ export function truncateStyled(text, maxVisible) {
     while ((m = re.exec(text)) !== null) {
         if (m.index > last) {
             const seg = text.slice(last, m.index);
-            const room = maxVisible - visible;
-            if (room <= 0)
-                return out;
-            out += seg.slice(0, room);
-            visible += Math.min(seg.length, room);
+            const taken = takeVisible(seg, maxVisible - visible);
+            out += taken;
+            visible += dispLen(taken);
             if (visible >= maxVisible)
                 return out;
         }
@@ -169,7 +243,7 @@ export function truncateStyled(text, maxVisible) {
         last = m.index + m[0].length;
     }
     if (visible < maxVisible) {
-        out += text.slice(last, last + (maxVisible - visible));
+        out += takeVisible(text.slice(last), maxVisible - visible);
     }
     return out;
 }
@@ -232,11 +306,11 @@ function wrapStyledToWidth(line, width) {
         const isSpace = /\s/.test(a.ch);
         if (isSpace) {
             cur.push(a);
-            curLen++;
+            curLen += charWidth(a.ch);
             breakAt = cur.length - 1;
             continue;
         }
-        if (curLen + 1 > width) {
+        if (curLen + charWidth(a.ch) > width) {
             if (breakAt >= 0) {
                 // Break after the whitespace at breakAt: keep the whitespace's ANSI
                 // prefix (often a reset) so style never leaks onto the continuation.
@@ -258,7 +332,7 @@ function wrapStyledToWidth(line, width) {
             }
         }
         cur.push(a);
-        curLen++;
+        curLen += charWidth(a.ch);
     }
     if (cur.length)
         rows.push(cur);
@@ -563,7 +637,7 @@ function panelString(content, title = "", subtitle = "", expand = true, borderSt
     const plainLines = styledLines.map((l) => stripAnsi(l));
     let maxLineW = 0;
     for (const p of plainLines)
-        maxLineW = Math.max(maxLineW, p.length);
+        maxLineW = Math.max(maxLineW, plainLen(p));
     if (title)
         maxLineW = Math.max(maxLineW, plainLen(title) + 4);
     if (subtitle)
@@ -597,8 +671,8 @@ function panelString(content, title = "", subtitle = "", expand = true, borderSt
     for (let i = 0; i < styledLines.length; i++) {
         const line = styledLines[i];
         const plain = plainLines[i] ?? "";
-        const pad = Math.max(innerW - plain.length, 0);
-        const display = plain.length > innerW ? truncateStyled(line, innerW) : line;
+        const pad = Math.max(innerW - plainLen(plain), 0);
+        const display = plainLen(plain) > innerW ? truncateStyled(line, innerW) : line;
         out.push(`\x1b[${borderStyle}m│\x1b[0m ${display}${" ".repeat(pad)} \x1b[${borderStyle}m│\x1b[0m`);
     }
     const bottom = `╰${embed(subtitle, "center")}╯`;
@@ -713,7 +787,7 @@ export function displayRows(text) {
     if (!lines.length)
         return 1;
     for (const line of lines) {
-        rows += Math.max(1, Math.ceil(line.length / width));
+        rows += Math.max(1, Math.ceil(dispLen(line) / width));
     }
     return rows;
 }
@@ -1082,12 +1156,12 @@ export class Spinner {
         const first = parts[0];
         const rest = parts.slice(1);
         const plain = stripAnsi(first);
-        const pad = Math.max(0, this.lastLen - plain.length);
+        const pad = Math.max(0, this.lastLen - plainLen(plain));
         process.stdout.write("\r" + first + " ".repeat(pad) + "\r\n");
         if (rest.length)
             process.stdout.write(rest.join("\n") + "\n");
         this.rows = 0;
-        this.lastLen = plain.length;
+        this.lastLen = plainLen(plain);
     }
     update(text) {
         if (this.timer) {
@@ -1111,9 +1185,9 @@ export class Spinner {
             // cells (spinner frame, trailing timer) actually change on screen. Pad
             // with spaces so a shorter line clears any previously longer text.
             const plain = stripAnsi(rendered);
-            const pad = Math.max(0, this.lastLen - plain.length);
+            const pad = Math.max(0, this.lastLen - plainLen(plain));
             process.stdout.write("\r" + rendered + " ".repeat(pad) + "\r");
-            this.lastLen = plain.length;
+            this.lastLen = plainLen(plain);
         }
         else {
             // Multi-row wrapped text: fall back to an erase-based redraw.
@@ -1336,69 +1410,137 @@ export function splitBlocks(buffer, pasteSpans) {
 }
 const PROMPT_CARET = "\u0000";
 function wrapRuns(runs, width) {
+    const units = [];
+    for (const run of runs) {
+        if (run.text === PROMPT_CARET) {
+            units.push({ ch: PROMPT_CARET, style: run.style, caret: true });
+        }
+        else {
+            for (const ch of run.text) {
+                units.push({ ch, style: run.style, caret: false });
+            }
+        }
+    }
+    if (units.length === 0)
+        units.push({ ch: "", style: "", caret: false });
     const rows = [];
-    let cur = "";
-    let curLen = 0;
+    let line = [];
+    let lineLen = 0;
     let caretRow = -1;
     let caretCol = -1;
-    const flush = () => {
-        rows.push(cur);
-        cur = "";
-        curLen = 0;
+    const flushLine = () => {
+        if (line.length === 0)
+            return;
+        let out = "";
+        for (const u of line) {
+            if (u.caret)
+                out += u.style + "▏" + "\x1b[0m";
+            else if (u.style)
+                out += u.style + u.ch + "\x1b[0m";
+            else
+                out += u.ch;
+        }
+        rows.push(out);
+        line = [];
+        lineLen = 0;
     };
-    for (const run of runs) {
-        if (run.text === PROMPT_CARET) {
-            if (curLen >= width)
-                flush();
+    const isWs = (u) => !u.caret && /\s/.test(u.ch);
+    const addUnit = (u) => {
+        if (u.caret) {
             caretRow = rows.length;
-            caretCol = curLen;
-            cur += run.style + "▏" + "\x1b[0m";
-            curLen += 1;
+            caretCol = lineLen;
+        }
+        line.push(u);
+        lineLen += charWidth(u.ch);
+    };
+    let i = 0;
+    while (i < units.length) {
+        const u = units[i];
+        if (u.caret) {
+            if (lineLen >= width)
+                flushLine();
+            addUnit(u);
+            i++;
             continue;
         }
-        let text = run.text;
-        while (text) {
-            const nl = text.indexOf("\n");
-            const seg = nl === -1 ? text : text.slice(0, nl);
-            let rest = seg;
-            while (rest.length > 0) {
-                if (curLen >= width)
-                    flush();
-                let take;
-                if (curLen === 0) {
-                    // Start of a line: take a whole word (or one char for a lone space,
-                    // or a full-width chunk for an overlong word).
-                    const sp = rest.indexOf(" ");
-                    take = sp === -1 ? rest.length : sp;
-                    if (take === 0)
-                        take = 1;
-                    take = Math.min(take, width);
-                }
-                else {
-                    // Mid-line: append the next whole word (plus its trailing space) only
-                    // if it fits; otherwise move the entire word to the next line.
-                    const sp = rest.indexOf(" ");
-                    take = sp === -1 ? rest.length : sp + 1;
-                    if (take > width - curLen) {
-                        flush();
-                        continue;
+        if (u.ch === "\n") {
+            // Hard line break: end the current row and start a fresh one.
+            flushLine();
+            i++;
+            continue;
+        }
+        if (isWs(u)) {
+            const w = charWidth(u.ch);
+            if (lineLen + w > width)
+                flushLine();
+            // Never start a line with whitespace: if the space lands at the start of
+            // a fresh line, drop it (it was the fill of the previous full line).
+            if (lineLen === 0) {
+                i++;
+                continue;
+            }
+            addUnit(u);
+            i++;
+            continue;
+        }
+        // Start of a word (which may contain the caret). Find its full extent in
+        // the flattened stream so we never wrap mid-word.
+        let j = i;
+        let wordW = 0; // display width of the whole word
+        while (j < units.length && !isWs(units[j])) {
+            wordW += charWidth(units[j].ch);
+            j++;
+        }
+        if (wordW === 0) {
+            i++;
+            continue;
+        }
+        if (lineLen === 0) {
+            if (wordW > width) {
+                // Overlong word: split into width-sized chunks, keeping the caret in
+                // the chunk that contains it.
+                let from = i;
+                let used = 0;
+                while (used < wordW) {
+                    let n = 0;
+                    let chunkW = 0;
+                    while (from + n < j && chunkW + charWidth(units[from + n].ch) <= width) {
+                        chunkW += charWidth(units[from + n].ch);
+                        n++;
+                    }
+                    if (n === 0) {
+                        // A single glyph is wider than the line; emit it alone.
+                        n = 1;
+                        chunkW = charWidth(units[from].ch);
                     }
+                    for (let k = 0; k < n; k++)
+                        addUnit(units[from + k]);
+                    flushLine();
+                    from += n;
+                    used += chunkW;
                 }
-                const chunk = rest.slice(0, take);
-                cur += run.style ? run.style + chunk + "\x1b[0m" : chunk;
-                curLen += take;
-                rest = rest.slice(take);
-            }
-            if (nl !== -1) {
-                flush();
-                text = text.slice(nl + 1);
             }
             else {
-                break;
+                for (let k = i; k < j; k++)
+                    addUnit(units[k]);
+            }
+            i = j;
+        }
+        else {
+            if (lineLen + wordW > width) {
+                // Word doesn't fit on the current line; move the whole word to a new
+                // line (leaving any trailing space from the previous word behind).
+                flushLine();
+                continue;
             }
+            for (let k = i; k < j; k++)
+                addUnit(units[k]);
+            i = j;
         }
     }
-    flush();
+    flushLine();
+    if (rows.length === 0)
+        rows.push("");
     return { rows, caretRow, caretCol };
 }
 export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor, hints) {
@@ -1490,12 +1632,23 @@ export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor
     }
     const { rows, caretRow, caretCol } = wrapRuns(runs, innerW);
     const labelLen = plainLen(label);
-    const topPad = Math.max(0, boxW - labelLen - 7);
-    const top = `\x1b[90m╭─── \x1b[1m\x1b[36m${label}\x1b[0m\x1b[90m ${"─".repeat(topPad)}╮\x1b[0m`;
+    // Truncate the label so the top border never exceeds the box width — a long
+    // label used to push past `boxW` and wrap onto its own row, breaking the box
+    // on narrow/scaled terminals. Reserve room for "╭─── ", the two spaces and
+    // "╮" (7 cols) plus at least one dash.
+    let topLabel = label;
+    let topLabelLen = labelLen;
+    const topRoom = Math.max(0, boxW - 8);
+    if (topLabelLen > topRoom) {
+        topLabel = truncateStyledEllipsis(label, topRoom);
+        topLabelLen = plainLen(topLabel);
+    }
+    const topPad = Math.max(0, boxW - topLabelLen - 7);
+    const top = `\x1b[90m╭─── \x1b[1m\x1b[36m${topLabel}\x1b[0m\x1b[90m ${"─".repeat(topPad)}╮\x1b[0m`;
     const body = [];
     for (const l of rows) {
         const plain = stripAnsi(l);
-        const pad = Math.max(0, innerW - plain.length);
+        const pad = Math.max(0, innerW - plainLen(plain));
         body.push(`\x1b[90m│\x1b[0m ${l}${" ".repeat(pad)} \x1b[90m│\x1b[0m`);
     }
     const bottom = `\x1b[90m╰${"─".repeat(Math.max(0, boxW - 2))}╯\x1b[0m`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxecli/oxe",
-  "version": "1.0.114",
+  "version": "1.0.116",
   "publishConfig": {
     "access": "public"
   },