fix(box): measure display width so emoji don't break box borders

src/reporters/fancy.ts

@@ -1,11 +1,10 @@
-import _stringWidth from "string-width";
 import isUnicodeSupported from "is-unicode-supported";
 import { colors } from "../utils/color";
 import { parseStack } from "../utils/error";
 import { FormatOptions, LogObject } from "../types";
 import { LogLevel, LogType } from "../constants";
 import { BoxOpts, box } from "../utils/box";
-import { stripAnsi } from "../utils";
+import { stringWidth } from "../utils";
 import { BasicReporter } from "./basic";
 
 export const TYPE_COLOR_MAP: { [k in LogType]?: string } = {
@@ -37,15 +36,6 @@ const TYPE_ICONS: { [k in LogType]?: string } = {
   log: "",
 };
 
-function stringWidth(str: string) {
-  // https://github.com/unjs/consola/issues/204
-  const hasICU = typeof Intl === "object";
-  if (!hasICU || !Intl.Segmenter) {
-    return stripAnsi(str).length;
-  }
-  return _stringWidth(str);
-}
-
 export class FancyReporter extends BasicReporter {
   formatStack(stack: string, message: string, opts?: FormatOptions) {
     const indent = "  ".repeat((opts?.errorLevel || 0) + 1);

src/utils.ts

@@ -2,6 +2,7 @@ export * from "./utils/box";
 export * from "./utils/color";
 export {
   stripAnsi,
+  stringWidth,
   centerAlign,
   rightAlign,
   leftAlign,

src/utils/box.ts

@@ -1,5 +1,5 @@
 import { getColor } from "./color";
-import { stripAnsi } from "./string";
+import { stringWidth } from "./string";
 
 export type BoxBorderStyle = {
   /**
@@ -257,8 +257,8 @@ export function box(text: string, _opts: BoxOpts = {}) {
   const height = textLines.length + paddingOffset;
   const width =
     Math.max(
-      ...textLines.map((line) => stripAnsi(line).length),
-      opts.title ? stripAnsi(opts.title).length : 0,
+      ...textLines.map((line) => stringWidth(line)),
+      opts.title ? stringWidth(opts.title) : 0,
     ) + paddingOffset;
   const widthOffset = width + paddingOffset;
 
@@ -273,13 +273,10 @@ export function box(text: string, _opts: BoxOpts = {}) {
   if (opts.title) {
     const title = _color ? _color(opts.title) : opts.title;
     const left = borderStyle.h.repeat(
-      Math.floor((width - stripAnsi(opts.title).length) / 2),
+      Math.floor((width - stringWidth(opts.title)) / 2),
     );
     const right = borderStyle.h.repeat(
-      width -
-        stripAnsi(opts.title).length -
-        stripAnsi(left).length +
-        paddingOffset,
+      width - stringWidth(opts.title) - stringWidth(left) + paddingOffset,
     );
     boxLines.push(
       `${leftSpace}${borderStyle.tl}${left}${title}${right}${borderStyle.tr}`,
@@ -312,7 +309,7 @@ export function box(text: string, _opts: BoxOpts = {}) {
       // Text line
       const line = textLines[i - valignOffset];
       const left = " ".repeat(paddingOffset);
-      const right = " ".repeat(width - stripAnsi(line).length);
+      const right = " ".repeat(width - stringWidth(line));
       boxLines.push(
         `${leftSpace}${borderStyle.v}${left}${line}${right}${borderStyle.v}`,
       );

src/utils/string.ts

@@ -1,3 +1,5 @@
+import _stringWidth from "string-width";
+
 const ansiRegex = [
   String.raw`[\u001B\u009B][[\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\d\/#&.:=?%@~_]+)*|[a-zA-Z\d]+(?:;[-a-zA-Z\d\/#&.:=?%@~_]*)*)?\u0007)`,
   String.raw`(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))`,
@@ -15,6 +17,23 @@ export function stripAnsi(text: string) {
   return text.replace(new RegExp(ansiRegex, "g"), "");
 }
 
+/**
+ * Returns the visual width of a string in terminal columns, accounting for ANSI
+ * escape codes and wide/emoji characters. Falls back to code-unit length when
+ * `Intl.Segmenter` is unavailable.
+ *
+ * @param {string} str - The string to measure.
+ * @returns {number} The number of columns the string occupies.
+ */
+export function stringWidth(str: string): number {
+  // https://github.com/unjs/consola/issues/204
+  const hasICU = typeof Intl === "object";
+  if (!hasICU || !Intl.Segmenter) {
+    return stripAnsi(str).length;
+  }
+  return _stringWidth(str);
+}
+
 /**
  * Centers a string within a specified total width, padding it with spaces or another specified character.
  * If the string is longer than the total width, it is returned as is.

test/box.test.ts

@@ -0,0 +1,19 @@
+import { describe, test, expect } from "vitest";
+import { box } from "../src/utils/box";
+import { stringWidth } from "../src/utils/string";
+
+describe("box", () => {
+  // https://github.com/unjs/consola/issues/402
+  test("keeps borders aligned when content contains emoji", () => {
+    // "👨‍👩‍👧" is a ZWJ sequence: many code units (`.length` overcounts badly)
+    // but only 2 display columns. With `.length` the border zig-zags.
+    const rendered = box("a short line\n👨‍👩‍👧 family");
+    const widths = rendered
+      .split("\n")
+      .filter((line) => line.trim().length > 0)
+      .map((line) => stringWidth(line));
+
+    // every rendered line must share the same visual width
+    expect([...new Set(widths)]).toHaveLength(1);
+  });
+});