@lewishowles/cli-style 0.16.0 → 0.17.1

package/src/formatters/ansi.js

@@ -1,11 +1,42 @@
+import { eastAsianWidth } from "get-east-asian-width";
+
 import { resolveColourValue } from "../theme/colours.js";
 
 // ANSI reset sequence used after coloured output.
 const reset = "\u001b[0m";
 
-// Matches simple SGR ANSI sequences used by this package.
+// The escape character that starts every ANSI sequence.
 const escapeCharacter = String.fromCharCode(27);
-const ansiPattern = new RegExp(`${escapeCharacter}\\[[\\d;]*m`, "gu");
+
+// The bell character that can end an OSC sequence, such as a terminal hyperlink.
+const bellCharacter = String.fromCharCode(7);
+
+// Matches ANSI CSI sequences, such as colours, and OSC sequences, such as hyperlinks, which take up no columns on screen.
+export const ansiPattern = new RegExp(
+	`${escapeCharacter}(?:\\[[0-?]*[ -/]*[@-~]|\\][^${bellCharacter}${escapeCharacter}]*(?:${bellCharacter}|${escapeCharacter}\\\\))`,
+	"gu",
+);
+
+// Matches the same sequences as a captured group, so splitting text on it keeps each sequence as its own piece.
+const ansiSplitPattern = new RegExp(`(${ansiPattern.source})`, "u");
+
+// Matches a terminal link sequence and captures its address, which is empty when the sequence ends a link.
+const hyperlinkPattern = new RegExp(
+	`^${escapeCharacter}\\]8;[^;]*;([^${bellCharacter}${escapeCharacter}]*)`,
+	"u",
+);
+
+// The sequences that clear every colour and text style at once.
+const clearStyleCodes = [reset, "\u001b[m"];
+
+// Splits text into the characters people see, so a joined emoji or an accented letter counts as one.
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+// Matches emoji presentation characters or the selector that requests emoji presentation.
+const emojiPattern = /[\p{Emoji_Presentation}\uFE0F]/u;
+
+// Matches a cluster made only of combining marks or invisible characters, such as a lone joiner, which take no columns.
+const zeroWidthPattern = /^[\p{Mark}\p{Default_Ignorable_Code_Point}]+$/u;
 
 // ANSI style sequences supported before primitive renderers exist.
 const styleCodes = {
@@ -73,6 +104,36 @@ export function style(value, style, options = {}) {
 	return `${styleCode}${value}${reset}`;
 }
 
+/**
+ * Switch the given styles back on after every full reset inside text, so an outer style
+ * carries on past coloured text placed inside it. Coloured text ends with a full reset,
+ * written as `\u001b[0m` or the shorter `\u001b[m`, which would otherwise turn the outer
+ * style off as well.
+ *
+ * @param  {string}  value
+ *     Text that may hold coloured parts.
+ * @param  {string[]}  stylesToRestore
+ *     The styles to switch back on, each rendered on an empty string, such as
+ *     `style("", "bold", options)`. An empty entry adds nothing.
+ * @returns  {string}
+ *     The text with the styles switched back on after each full reset.
+ */
+export function restoreStyles(value, stylesToRestore) {
+	// The codes that turn the styles on, with each closing reset cut off.
+	const openingCodes = stylesToRestore
+		.map((styleToRestore) => styleToRestore.slice(0, -reset.length))
+		.join("");
+
+	// The text with the styles switched back on after each reset form handled so far.
+	let restoredValue = value;
+
+	for (const clearStyleCode of clearStyleCodes) {
+		restoredValue = restoredValue.replaceAll(clearStyleCode, `${clearStyleCode}${openingCodes}`);
+	}
+
+	return restoredValue;
+}
+
 /**
  * Remove ANSI escape sequences from text.
  *
@@ -85,6 +146,130 @@ export function stripAnsi(value) {
 	return value.replace(ansiPattern, "");
 }
 
+/**
+ * Count the terminal columns that text fills on screen. ANSI sequences take no
+ * columns, and East Asian wide characters and emoji take two.
+ *
+ * @param  {string}  value
+ *     The text to measure, which may contain ANSI sequences.
+ * @returns  {number}
+ *     The number of columns the text fills.
+ */
+export function visibleWidth(value) {
+	let width = 0;
+
+	for (const { segment } of graphemeSegmenter.segment(stripAnsi(value))) {
+		if (zeroWidthPattern.test(segment)) {
+			continue;
+		}
+
+		if (eastAsianWidth(segment.codePointAt(0)) === 2 || emojiPattern.test(segment)) {
+			width += 2;
+			continue;
+		}
+
+		width += 1;
+	}
+
+	return width;
+}
+
+/**
+ * Add trailing spaces until text fills a number of terminal columns. Colour
+ * codes take no space and wide characters take two, so coloured and wide text
+ * pads to the same width as plain text.
+ *
+ * @param  {string}  value
+ *     The text to pad, which may contain ANSI colour codes.
+ * @param  {number}  width
+ *     The number of columns the text should fill.
+ * @returns  {string}
+ *     The padded text, or the text unchanged when it already fills the width.
+ */
+export function padVisible(value, width) {
+	return value + " ".repeat(Math.max(0, width - visibleWidth(value)));
+}
+
+/**
+ * Split text at a terminal column without breaking a colour code, a link or a
+ * character. A character that would cross the column, such as a two-column 界
+ * at the edge, starts the remaining text instead.
+ *
+ * When the cut falls inside coloured or linked text, the first piece ends by
+ * closing the colour and the link, and the remaining text starts by reopening
+ * them, so each piece can be printed on a line of its own.
+ *
+ * @param  {string}  value
+ *     The text to split, which may contain ANSI colour codes and terminal links.
+ * @param  {number}  width
+ *     The most columns the first piece may fill.
+ * @returns  {{ head: string, tail: string }}
+ *     The first piece and the remaining text, which is empty when the whole
+ *     value fits.
+ */
+export function sliceVisible(value, width) {
+	// Splitting on a captured pattern puts plain text at even indexes and ANSI sequences at odd ones.
+	const parts = value.split(ansiSplitPattern);
+
+	// The link open at the current position, with the sequences that close and reopen it.
+	let activeLink = null;
+	// The colour and style codes in effect at the current position, in the order they were set.
+	let activeStyles = [];
+	// The columns filled so far.
+	let columns = 0;
+	// The position in the original value reached so far.
+	let cursor = 0;
+
+	for (const [index, part] of parts.entries()) {
+		if (index % 2 === 0) {
+			for (const { segment } of graphemeSegmenter.segment(part)) {
+				const segmentWidth = visibleWidth(segment);
+
+				if (columns + segmentWidth > width) {
+					const head =
+						value.slice(0, cursor) +
+						(activeLink?.closer ?? "") +
+						(activeStyles.length > 0 ? reset : "");
+
+					const tail = activeStyles.join("") + (activeLink?.opener ?? "") + value.slice(cursor);
+
+					return { head, tail };
+				}
+
+				columns += segmentWidth;
+				cursor += segment.length;
+			}
+
+			continue;
+		}
+
+		if (clearStyleCodes.includes(part)) {
+			activeStyles = [];
+		} else if (part.startsWith(`${escapeCharacter}[`) && part.endsWith("m")) {
+			activeStyles.push(part);
+		}
+
+		const hyperlink = part.match(hyperlinkPattern);
+
+		if (hyperlink !== null) {
+			// The closing sequence ends the same way as the opening one, with a bell or an escape and backslash.
+			const terminator = part.endsWith(bellCharacter) ? bellCharacter : `${escapeCharacter}\\`;
+
+			activeLink =
+				hyperlink[1] === ""
+					? null
+					: {
+							closer: `${escapeCharacter}]8;;${terminator}`,
+							opener: part,
+						};
+		}
+
+		cursor += part.length;
+	}
+
+	return { head: value, tail: "" };
+}
+
 /**
  * Wrap text in ANSI colour codes.
  *

package/src/formatters/wrap.js

@@ -1,13 +1,14 @@
+import { ansiPattern, visibleWidth } from "./ansi.js";
+
 // Width used when a caller doesn't provide one.
 const defaultWrapWidth = 64;
-const escapeCharacter = String.fromCharCode(27);
-const bellCharacter = String.fromCharCode(7);
 
-// Matches ANSI CSI and OSC escape sequences so they can be measured as zero-width.
-const ansiEscapePattern = new RegExp(
-	`${escapeCharacter}(?:\\[[0-?]*[ -/]*[@-~]|\\][^${bellCharacter}]*(?:${bellCharacter}|${escapeCharacter}\\\\))`,
-	"gu",
-);
+// Splits text into the characters people see, so wrapping never breaks a joined emoji apart.
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+// Line breaks end the current wrapped line and take no columns. Windows CR+LF arrives from the
+// segmenter as one character.
+const lineBreaks = new Set(["\n", "\r\n"]);
 
 /**
  * Wrap text to a maximum visible width, treating ANSI escape sequences as zero-width.
@@ -27,7 +28,7 @@ export function wrapText(text, width = defaultWrapWidth) {
 	let line = [];
 
 	for (const token of tokens) {
-		if (token.value === "\n") {
+		if (lineBreaks.has(token.value)) {
 			lines.push(renderTokens(line));
 			line = [];
 			continue;
@@ -35,7 +36,7 @@ export function wrapText(text, width = defaultWrapWidth) {
 
 		line.push(token);
 
-		while (visibleWidth(line) > wrapWidth) {
+		while (tokensWidth(line) > wrapWidth) {
 			const whitespaceIndex = findLastWhitespace(line);
 
 			if (whitespaceIndex > 0) {
@@ -77,7 +78,7 @@ function resolveWrapWidth(width) {
 }
 
 /**
- * Split text into visible characters and ANSI escape sequences.
+ * Split text into the characters people see and ANSI escape sequences.
  *
  * @param  {string}  text
  *     Text to tokenise.
@@ -89,7 +90,7 @@ function tokenise(text) {
 
 	let textStart = 0;
 
-	for (const match of text.matchAll(ansiEscapePattern)) {
+	for (const match of text.matchAll(ansiPattern)) {
 		appendTextTokens(tokens, text.slice(textStart, match.index));
 		tokens.push({
 			value: match[0],
@@ -104,7 +105,9 @@ function tokenise(text) {
 }
 
 /**
- * Append one token per character of plain text to a token list.
+ * Append one token per visible character of plain text to a token list, keeping
+ * joined emoji and accented letters whole. Line breaks, including Windows CR+LF,
+ * take no columns.
  *
  * @param  {object[]}  tokens
  *     Token list to append to.
@@ -113,10 +116,10 @@ function tokenise(text) {
  * @returns  {void}
  */
 function appendTextTokens(tokens, text) {
-	for (const value of text) {
+	for (const { segment: value } of graphemeSegmenter.segment(text)) {
 		tokens.push({
 			value,
-			visibleWidth: value === "\n" ? 0 : 1,
+			visibleWidth: lineBreaks.has(value) ? 0 : visibleWidth(value),
 		});
 	}
 }
@@ -129,7 +132,7 @@ function appendTextTokens(tokens, text) {
  * @returns  {number}
  *     Total visible width.
  */
-function visibleWidth(tokens) {
+function tokensWidth(tokens) {
 	return tokens.reduce((width, token) => width + token.visibleWidth, 0);
 }
 
@@ -155,6 +158,7 @@ function findLastWhitespace(tokens) {
 
 /**
  * Find the index to split at when a line has no whitespace to break on.
+ * A single character wider than the limit stays whole on its own line.
  *
  * @param  {object[]}  tokens
  *     Tokens to search.
@@ -167,11 +171,13 @@ function findHardSplitIndex(tokens, width) {
 	let currentWidth = 0;
 
 	for (let index = 0; index < tokens.length; index += 1) {
-		currentWidth += tokens[index].visibleWidth;
+		const nextWidth = currentWidth + tokens[index].visibleWidth;
 
-		if (currentWidth >= width) {
-			return index + 1;
+		if (nextWidth > width && currentWidth > 0) {
+			return index;
 		}
+
+		currentWidth = nextWidth;
 	}
 
 	return tokens.length;

package/src/gallery/render-gallery.js

@@ -6,8 +6,9 @@ import { confirmationResult } from "../patterns/confirmation-result.js";
 import { diagnosticReport } from "../patterns/diagnostic-report.js";
 import { diffBlock } from "../patterns/diff-block.js";
 import { nextStepBlock } from "../patterns/next-step-block.js";
+import { quoteBlock } from "../patterns/quote-block.js";
 import { taskSummary } from "../patterns/task-summary.js";
-import { stripAnsi } from "../formatters/ansi.js";
+import { foreground, sliceVisible, visibleWidth } from "../formatters/ansi.js";
 import { renderSpinnerFrame } from "../interactive/spinner.js";
 import { barChart } from "../primitives/bar-chart.js";
 import { bulletList } from "../primitives/bullet-list.js";
@@ -133,6 +134,7 @@ export const galleryFixtures = [
 	"confirmation-result",
 	"next-step-block",
 	"diff-block",
+	"quote-block",
 	"sparkline",
 	"spinner",
 ];
@@ -301,27 +303,26 @@ function clampGalleryOutput(output, width) {
 }
 
 /**
- * Truncate one line to a visible width.
+ * Cut one gallery line to the gallery width, measured in screen columns.
  *
  * @param  {string}  line
- *     Output line.
+ *     The output line, which may contain colour codes and wide characters.
  * @param  {number}  width
- *     Requested visible width.
+ *     The most columns the line may fill.
  * @returns  {string}
- *     Truncated line.
+ *     The line unchanged when it fits, or cut with a trailing `~` that marks
+ *     the cut. Colour codes and links stay whole and are closed before the `~`.
  */
 function clampLine(line, width) {
-	const plainLine = stripAnsi(line);
-
-	if (plainLine.length <= width) {
+	if (visibleWidth(line) <= width) {
 		return line;
 	}
 
 	if (width <= 1) {
-		return plainLine.slice(0, width);
+		return sliceVisible(line, width).head;
 	}
 
-	return `${plainLine.slice(0, width - 1)}~`;
+	return `${sliceVisible(line, width - 1).head}~`;
 }
 
 /**
@@ -600,6 +601,19 @@ function renderPatterns(options, fixture) {
 		"diagnostic-report": ["Diagnostic report", report],
 		"diff-block": ["Diff block", diff],
 		"next-step-block": ["Next-step block", nextStep],
+		"quote-block": [
+			"Quote block",
+			quoteBlock(
+				{
+					lines: [
+						"A command can return a long explanation that wraps while the marker stays beside each continuation line.",
+						"A second line keeps the same marker.",
+					],
+					title: "Command output",
+				},
+				options,
+			),
+		],
 		reporter: ["Reporter", reporterOutput],
 		"task-summary": ["Task summary", summary],
 	};
@@ -635,6 +649,9 @@ function renderPatterns(options, fixture) {
 		"Diff block",
 		frameExample(diff, options),
 		"",
+		"Quote block",
+		frameExample(fixtures["quote-block"][1], options),
+		"",
 		"Compact data table",
 		frameExample(compactTable, options),
 		"",
@@ -742,9 +759,21 @@ function renderPrimitives(options) {
 		"",
 		"Chips",
 		renderChipExamples(options),
+		chip(`${foreground("coloured", "danger", options)} label`, "success", options),
 		"",
 		"Statuses",
 		...renderStatusExamples(options),
+		status(resultTypes.SUCCESS, "caller-coloured label", {
+			...options,
+			label: `${foreground("Coloured", "danger", options)} status`,
+		}),
+		"",
+		"Dividers",
+		divider({
+			...options,
+			dividerWidth: 32,
+			label: foreground("界面", "info", options),
+		}),
 		"",
 		"Panels",
 		...renderPanelExamples(options),
@@ -786,6 +815,15 @@ function renderPrimitives(options) {
 			icon: "!",
 			tone: "warning",
 		}),
+		labelledLine(
+			foreground("界面", "info", options),
+			"Coloured wide labels keep wrapped text aligned.",
+			{
+				...options,
+				icon: foreground("界", "warning", options),
+				width: 32,
+			},
+		),
 		emptyState("No results", "tone: muted", options),
 		errorBlock("Failed", ["tone: danger"], {
 			...options,
@@ -818,6 +856,16 @@ function renderPrimitives(options) {
 			...options,
 			labelWidth: 8,
 		}),
+		row(
+			foreground("界面", "info", options),
+			"Coloured wide labels and separators align wrapped text.",
+			{
+				...options,
+				labelWidth: 8,
+				separator: foreground(" => ", "warning", options),
+				width: 36,
+			},
+		),
 		row("Bundle", "is 22.3 KB, above the 12.0 KB budget", {
 			...options,
 			labelWidth: 8,
@@ -861,6 +909,10 @@ function renderPrimitives(options) {
 					label: "Checks",
 					value: "type-check, unit, build",
 				},
+				{
+					label: foreground("界面", "info", options),
+					value: "Coloured wide labels share the value column",
+				},
 				{
 					label: "Bundle",
 					result: resultTypes.FAILED,
@@ -886,6 +938,10 @@ function renderPrimitives(options) {
 function renderBulletListExamples(options) {
 	return [
 		bulletList(["Install dependencies", "Run the unit tests", "Review the output"], options),
+		bulletList([foreground("界面 item wraps beside its bullet", "info", options)], {
+			...options,
+			width: 18,
+		}),
 		bulletList(["This item wraps so continuation lines stay aligned with the item text."], {
 			...options,
 			width: 40,
@@ -941,6 +997,10 @@ function renderTableExample(options) {
 				check: "unit",
 				result: "warning",
 			},
+			{
+				check: "界面",
+				result: foreground("passed", "success", options),
+			},
 		],
 	});
 }
@@ -972,7 +1032,7 @@ function renderOverflowTableExample(options, overflow) {
 		],
 		rows: [
 			{
-				detail: "packages/cli-style/src/primitives/table.js",
+				detail: foreground("界面/packages/cli-style/src/primitives/table.js", "success", options),
 				source: "Table",
 			},
 		],
@@ -991,6 +1051,10 @@ function renderBarChartExample(options) {
 	return barChart({
 		...options,
 		rows: [
+			{
+				label: foreground("界面", "info", options),
+				value: 8,
+			},
 			{
 				label: "positive",
 				value: 10,
@@ -1097,7 +1161,7 @@ function renderProgressExamples(options) {
 }
 
 /**
- * Render all panel tone examples.
+ * Render one panel for each tone, then a panel holding coloured output.
  *
  * @param  {object}  options
  *     Rendering options.
@@ -1105,7 +1169,8 @@ function renderProgressExamples(options) {
  *     Panel examples.
  */
 function renderPanelExamples(options) {
-	return panelToneExamples.map((tone) =>
+	// One panel for each tone.
+	const toneExamples = panelToneExamples.map((tone) =>
 		panel({
 			...options,
 			lines: [`tone: ${tone}`],
@@ -1113,6 +1178,25 @@ function renderPanelExamples(options) {
 			tone,
 		}),
 	);
+
+	// A panel holding a coloured status line and coloured values, to show the panel
+	// background carrying on after them.
+	const nestedStylesExample = panel({
+		...options,
+		lines: [
+			status(resultTypes.SUCCESS, "Checks passed", options),
+			rowGroup({
+				...options,
+				rows: [
+					{ label: "Source", value: "main", valueColour: "success" },
+					{ label: "Checks", value: "unit", valueColour: "success" },
+				],
+			}),
+		],
+		title: "Nested styles",
+	});
+
+	return [...toneExamples, nestedStylesExample];
 }
 
 /**

package/src/index.js

@@ -38,6 +38,7 @@ export { confirmationResult } from "./patterns/confirmation-result.js";
 export { diagnosticReport } from "./patterns/diagnostic-report.js";
 export { diffBlock } from "./patterns/diff-block.js";
 export { nextStepBlock } from "./patterns/next-step-block.js";
+export { quoteBlock } from "./patterns/quote-block.js";
 export { taskSummary } from "./patterns/task-summary.js";
 export { barChart } from "./primitives/bar-chart.js";
 export { bulletList } from "./primitives/bullet-list.js";

package/src/patterns/quote-block.js

@@ -0,0 +1,70 @@
+import { foreground, stripAnsi } from "../formatters/ansi.js";
+import { wrapText } from "../formatters/wrap.js";
+import { profiles } from "../profiles/profiles.js";
+import { isNonEmptyString, isRecord, renderSection } from "./helpers.js";
+
+// The total width, including the marker and its space, used when no width is given.
+const defaultWidth = 66;
+
+/**
+ * Render another program's output with a marker beside each line, under an optional heading.
+ *
+ * @param  {object}  quote
+ *     Quoted output to show.
+ * @param  {string[]}  quote.lines
+ *     Output lines, including any blank lines to preserve.
+ * @param  {string}  quote.title
+ *     Optional heading above the output.
+ * @param  {number}  quote.width
+ *     Optional total width, including the marker and its space.
+ * @param  {object}  options
+ *     Rendering options, such as the profile, Unicode support, and a fallback width.
+ * @returns  {object|string}
+ *     The quote unchanged for the json profile. Otherwise the marked lines as one string,
+ *     or an empty string when there are no lines to show.
+ */
+export function quoteBlock(quote, options = {}) {
+	if (options.profile === profiles.JSON) {
+		return quote;
+	}
+
+	if (!isRecord(quote) || !Array.isArray(quote.lines)) {
+		return "";
+	}
+
+	// Lines that are not strings are skipped so one bad entry does not hide the rest.
+	const lines = quote.lines.filter((line) => typeof line === "string");
+
+	if (lines.length === 0) {
+		return "";
+	}
+
+	// The width from the quote wins over the options, and an invalid width falls back to the default.
+	const requestedWidth = quote.width ?? options.width ?? defaultWidth;
+
+	const width =
+		Number.isInteger(requestedWidth) && requestedWidth > 0 ? requestedWidth : defaultWidth;
+
+	// The room left for text once the marker and its space are drawn.
+	const contentWidth = Math.max(width - 2, 1);
+
+	// Plain and CI output are written for logs and searches, so they get no colour and the ASCII marker.
+	const isPlainOutput = options.profile === profiles.CI || options.profile === profiles.PLAIN;
+
+	// The ASCII marker is also used whenever Unicode is off.
+	const marker = options.unicode === false || isPlainOutput ? "|" : "│";
+
+	// The marker is muted wherever colour is allowed.
+	const renderedMarker = isPlainOutput ? marker : foreground(marker, "muted", options);
+
+	// Each wrapped part gets its own marker, so continuation lines stay visibly quoted.
+	const renderedLines = lines.flatMap((line) =>
+		wrapText(stripAnsi(line), contentWidth).map((part) => `${renderedMarker} ${part}`),
+	);
+
+	if (!isNonEmptyString(quote.title)) {
+		return renderedLines.join("\n");
+	}
+
+	return renderSection(stripAnsi(quote.title), renderedLines, options, false);
+}

package/src/primitives/bar-chart.js

@@ -1,4 +1,4 @@
-import { foreground } from "../formatters/ansi.js";
+import { foreground, padVisible, visibleWidth } from "../formatters/ansi.js";
 import { chartColours } from "../theme/colours.js";
 
 // Chart bars use the same compact default width as progress bars.
@@ -27,7 +27,7 @@ export function barChart(options = {}) {
 		return "";
 	}
 
-	const labelWidth = Math.max(...rows.map((row) => row.label.length));
+	const labelWidth = Math.max(...rows.map((row) => visibleWidth(row.label)));
 	const maximum = Math.max(...rows.map((row) => Math.abs(row.value)), 1);
 	const width = normaliseWidth(options.barWidth);
 
@@ -93,7 +93,7 @@ function renderRow(row, labelWidth, maximum, width, options) {
 	const barWidth = Math.round((Math.abs(row.value) / maximum) * width);
 	const symbol = options.unicode === false ? "#" : "█";
 	const bar = symbol.repeat(barWidth).padEnd(width, " ");
-	const label = row.label.padEnd(labelWidth, " ");
+	const label = padVisible(row.label, labelWidth);
 
 	if (options.colour !== true) {
 		return `${label}  ${bar} ${row.value}`;

package/src/primitives/chip.js

@@ -1,4 +1,4 @@
-import { background, foreground, style } from "../formatters/ansi.js";
+import { background, foreground, restoreStyles, style } from "../formatters/ansi.js";
 import { chipColours } from "../theme/colours.js";
 
 // Chip style used when the requested tone is not configured.
@@ -25,7 +25,15 @@ export function chip(label, tone = fallbackTone, options = {}) {
 		return `[${label}]`;
 	}
 
-	const paddedLabel = ` ${label} `;
+	// The label with the chip's fill, bold and tone switched back on after any coloured text,
+	// so the rest of the chip keeps its look.
+	const restoredLabel = restoreStyles(label, [
+		background("", token.background, options),
+		style("", "bold", options),
+		foreground("", token.foreground, options),
+	]);
+
+	const paddedLabel = ` ${restoredLabel} `;
 	const colouredLabel = foreground(paddedLabel, token.foreground, options);
 	const boldLabel = style(colouredLabel, "bold", options);