fix(box): use string-width for correct emoji and CJK alignment

src/utils/box.ts

@@ -1,6 +1,15 @@
+import _stringWidth from "string-width";
 import { getColor } from "./color";
 import { stripAnsi } from "./string";
 
+function stringWidth(str: string) {
+  const hasICU = typeof Intl === "object";
+  if (!hasICU || !Intl.Segmenter) {
+    return stripAnsi(str).length;
+  }
+  return _stringWidth(str);
+}
+
 export type BoxBorderStyle = {
   /**
    * Top left corner
@@ -257,8 +266,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 +282,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) - stripAnsi(left).length + paddingOffset,
     );
     boxLines.push(
       `${leftSpace}${borderStyle.tl}${left}${title}${right}${borderStyle.tr}`,
@@ -312,7 +318,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}`,
       );

test/box.test.ts

@@ -0,0 +1,37 @@
+import { describe, test, expect } from "vitest";
+import stringWidth from "string-width";
+import { box } from "../src/utils/box";
+
+describe("box", () => {
+  test("renders a basic box", () => {
+    const result = box("Hello");
+    const lines = result.split("\n").filter(Boolean);
+    const widths = lines.map((line) => stringWidth(line));
+    const uniqueWidths = [...new Set(widths)];
+    expect(uniqueWidths.length).toBe(1);
+  });
+
+  test("aligns box edges with emoji content", () => {
+    const result = box("Hello 🌍 World");
+    const lines = result.split("\n").filter(Boolean);
+    const widths = lines.map((line) => stringWidth(line));
+    const uniqueWidths = [...new Set(widths)];
+    expect(uniqueWidths.length).toBe(1);
+  });
+
+  test("aligns box edges with CJK characters", () => {
+    const result = box("こんにちは");
+    const lines = result.split("\n").filter(Boolean);
+    const widths = lines.map((line) => stringWidth(line));
+    const uniqueWidths = [...new Set(widths)];
+    expect(uniqueWidths.length).toBe(1);
+  });
+
+  test("aligns box edges with multiple emoji lines", () => {
+    const result = box("Line 1 🎉\nLine 2 🚀\nLine 3");
+    const lines = result.split("\n").filter(Boolean);
+    const widths = lines.map((line) => stringWidth(line));
+    const uniqueWidths = [...new Set(widths)];
+    expect(uniqueWidths.length).toBe(1);
+  });
+});