fix(prompts): truncate wide-character box titles by display width

.changeset/box-wide-title-truncation.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Fix `box()` so a title wider than the box is truncated by display width instead of UTF-16 code units. A wide-character (CJK) title that overflowed the title budget previously produced ragged borders, and could throw `RangeError: Invalid count value` once the remainder passed to `'─'.repeat(...)` went negative.

packages/prompts/src/box.ts

@@ -96,6 +96,22 @@ function getPaddingForLine(
 	return [leftPadding, rightPadding];
 }
 
+function truncateToWidth(str: string, maxWidth: number): string {
+	const ellipsis = '...';
+	const target = maxWidth - stringWidth(ellipsis);
+	let result = '';
+	let width = 0;
+	for (const char of str) {
+		const charWidth = stringWidth(char);
+		if (width + charWidth > target) {
+			break;
+		}
+		result += char;
+		width += charWidth;
+	}
+	return result + ellipsis;
+}
+
 const defaultFormatBorder = (text: string) => text;
 
 /**
@@ -162,7 +178,7 @@ export const box = (message = '', title = '', opts?: BoxOptions) => {
 	const innerWidth = boxWidth - borderTotalWidth;
 	const maxTitleLength = innerWidth - titlePadding * 2;
 	const truncatedTitle =
-		titleWidth > maxTitleLength ? `${title.slice(0, maxTitleLength - 3)}...` : title;
+		titleWidth > maxTitleLength ? truncateToWidth(title, maxTitleLength) : title;
 	const [titlePaddingLeft, titlePaddingRight] = getPaddingForLine(
 		stringWidth(truncatedTitle),
 		innerWidth,

packages/prompts/test/box.test.ts

@@ -1,5 +1,6 @@
 import { styleText } from 'node:util';
 import { updateSettings } from '@clack/core';
+import stringWidth from 'fast-string-width';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 import * as prompts from '../src/index.js';
 import { MockReadable, MockWritable } from './test-utils.js';
@@ -270,4 +271,30 @@ describe.each(['true', 'false'])('box (isCI = %s)', (isCI) => {
 
 		expect(output.buffer).toMatchSnapshot();
 	});
+
+	test('truncates a wide-character title that overflows the box width', () => {
+		// '这是一个非常长的标题' is 10 wide chars = 20 display columns, which
+		// exceeds the title budget at width: 0.2. The title must be truncated by
+		// display width, not by UTF-16 code units, otherwise the trailing
+		// `'─'.repeat(...)` count goes negative and box() throws RangeError.
+		const title = '这是一个非常长的标题';
+		expect(() => {
+			prompts.box('message', title, {
+				input,
+				output,
+				width: 0.2,
+			});
+		}).not.toThrow();
+
+		const rendered = output.buffer.join('');
+		expect(rendered).toContain('...');
+
+		// Every rendered border line must occupy the same number of display
+		// columns; otherwise the box corners are ragged.
+		const lineWidths = rendered
+			.split('\n')
+			.filter((line) => line.length > 0)
+			.map((line) => stringWidth(line));
+		expect(new Set(lineWidths).size).toBe(1);
+	});
 });