@lewishowles/cli-style 0.16.0 → 0.17.1

package/src/primitives/divider.js

@@ -1,4 +1,4 @@
-import { foreground } from "../formatters/ansi.js";
+import { foreground, visibleWidth } from "../formatters/ansi.js";
 
 // Dividers use enough width to read as a section break in compact output.
 const defaultWidth = 40;
@@ -33,7 +33,7 @@ export function divider(options = {}) {
 	const character = options.character ?? defaultCharacter;
 	const label = options.label ?? "";
 	const width = options.dividerWidth ?? defaultWidth;
-	const lineWidth = Math.max(width - label.length - labelGap(label), 0);
+	const lineWidth = Math.max(width - visibleWidth(label) - labelGap(label), 0);
 	const line = character.repeat(lineWidth);
 	const output = label === "" ? line : `${label} ${line}`;
 

package/src/primitives/feedback.js

@@ -1,4 +1,4 @@
-import { foreground, style } from "../formatters/ansi.js";
+import { foreground, restoreStyles, style } from "../formatters/ansi.js";
 import { getResultSymbol, resultTypes } from "../theme/results.js";
 import { labelledLine } from "./labelled-line.js";
 import { panel } from "./panel.js";
@@ -48,7 +48,13 @@ export function emptyState(title = "No results", detail = "", options = {}) {
 		return `${prefix}${detailText}`;
 	}
 
-	const renderedPrefix = style(foreground(prefix, "muted", options), "bold", options);
+	// The prefix with its bold and muted tone switched back on after a coloured title.
+	const restoredPrefix = restoreStyles(prefix, [
+		style("", "bold", options),
+		foreground("", "muted", options),
+	]);
+
+	const renderedPrefix = style(foreground(restoredPrefix, "muted", options), "bold", options);
 
 	return `${renderedPrefix}${detailText}`;
 }

package/src/primitives/labelled-line.js

@@ -1,4 +1,4 @@
-import { foreground, style } from "../formatters/ansi.js";
+import { foreground, restoreStyles, style, visibleWidth } from "../formatters/ansi.js";
 import { wrapText } from "../formatters/wrap.js";
 
 // Falls back to the informational tone when no colour token is given.
@@ -44,20 +44,19 @@ export function labelledLine(label = "", message = "", options = {}) {
 		return `${prefix}${messageSeparator}${messageText}`;
 	}
 
-	const wrapWidth = resolveWrapWidth(prefixText, options);
+	const wrapWidth = resolveWrapWidth(prefix, options);
 	const messageLines = wrapText(messageText, wrapWidth);
-	const continuationIndent = " ".repeat(prefixText.length + messageSeparator.length);
+	const continuationIndent = " ".repeat(visibleWidth(prefix) + visibleWidth(messageSeparator));
 	const wrappedMessage = messageLines.join(`\n${continuationIndent}`);
 
 	return `${prefix}${messageSeparator}${wrappedMessage}`;
 }
 
 /**
- * Colour the icon/label prefix, sized from its plain-text length so the
- * continuation indent lines up whether or not colour is applied.
+ * Colour the icon and label prefix in the line's tone when colour is on.
  *
  * @param  {string}  prefix
- *     Plain-text icon and label prefix.
+ *     Icon and label prefix. The icon or label may already hold colour.
  * @param  {object}  options
  *     Rendering options.
  * @returns  {string}
@@ -72,13 +71,24 @@ function renderPrefix(prefix, options) {
 		return prefix;
 	}
 
-	const colouredPrefix = foreground(prefix, resolveColour(options), options);
+	// The caller's tone, or "info" when none is given.
+	const tone = resolveColour(options);
+
+	// The prefix with bold and the line's colour switched back on after a coloured icon or
+	// label, so the rest of the prefix keeps them.
+	const restoredPrefix = restoreStyles(prefix, [
+		style("", "bold", options),
+		foreground("", tone, options),
+	]);
+
+	// The whole prefix in the line's colour, ready to be made bold.
+	const colouredPrefix = foreground(restoredPrefix, tone, options);
 
 	return style(colouredPrefix, "bold", options);
 }
 
 /**
- * Build the plain-text icon and label prefix.
+ * Build the icon and label prefix. The icon or label may already hold colour.
  *
  * @param  {string}  label
  *     Label text.
@@ -115,7 +125,7 @@ function resolveColour(options) {
  * Work out how wide the message can be before it wraps.
  *
  * @param  {string}  prefix
- *     Plain-text icon and label prefix, used to size the continuation indent.
+ *     The icon and label prefix as it will be printed, including any colour.
  * @param  {object}  options
  *     Rendering options.
  * @returns  {number|undefined}
@@ -127,7 +137,7 @@ function resolveWrapWidth(prefix, options) {
 	}
 
 	if (Number.isFinite(options.width)) {
-		return Math.max(1, options.width - prefix.length - messageSeparator.length);
+		return Math.max(1, options.width - visibleWidth(prefix) - visibleWidth(messageSeparator));
 	}
 
 	return undefined;

package/src/primitives/panel.js

@@ -1,4 +1,4 @@
-import { background, foreground, style } from "../formatters/ansi.js";
+import { background, foreground, restoreStyles, style, visibleWidth } from "../formatters/ansi.js";
 import { wrapText } from "../formatters/wrap.js";
 import { profiles } from "../profiles/profiles.js";
 import { panelColours } from "../theme/colours.js";
@@ -64,23 +64,38 @@ export function panel(options = {}) {
  * @param  {object}  options
  *     Rendering options.
  * @returns  {string[]}
- *     The panel lines, each exactly `width` columns wide.
+ *     The panel lines, each exactly `width` columns wide, unless a wide character
+ *     does not fit in a panel at its minimum width.
  */
 function renderLine(line, width, isTitle, options) {
 	const accent = options.unicode === false ? "|" : "▌";
 	const contentWidth = width - 5;
+	// Whether this line is drawn with ANSI colour.
+	const useColour = options.colour === true;
 
 	return wrapText(line, contentWidth).map((visibleLine) => {
-		const content = `  ${visibleLine.padEnd(contentWidth, " ")}  `;
+		// Spaces that fill the line to the content width on screen. A wide character can
+		// overflow a very narrow panel, so the count never drops below zero.
+		const padding = " ".repeat(Math.max(0, contentWidth - visibleWidth(visibleLine)));
+		// The line with its inner margins, ready for the panel colours.
+		const content = `  ${visibleLine}${padding}  `;
 
-		if (options.colour !== true) {
+		if (!useColour) {
 			return `${accent}${content}`;
 		}
 
 		const renderedAccent = renderPanelColour(accent, options);
 
+		// The content with the panel colours switched back on after each reset inside it, so
+		// the panel background carries on to the right edge.
+		const restoredContent = restoreStyles(content, [
+			background("", panelColours.background, options),
+			foreground("", panelColours.body, options),
+			isTitle ? style("", "bold", options) : "",
+		]);
+
 		const renderedContent = foreground(
-			background(content, panelColours.background, options),
+			background(restoredContent, panelColours.background, options),
 			panelColours.body,
 			options,
 		);

package/src/primitives/row-group.js

@@ -1,3 +1,4 @@
+import { visibleWidth } from "../formatters/ansi.js";
 import { getResultSymbol } from "../theme/results.js";
 import { row } from "./row.js";
 
@@ -21,7 +22,7 @@ export function rowGroup(options = {}) {
 	}
 
 	const labelWidth = Math.max(
-		...rows.map((entry) => displayedLabelLength(entry, options)),
+		...rows.map((entry) => displayedLabelWidth(entry, options)),
 		options.labelWidth ?? 0,
 	);
 
@@ -59,18 +60,19 @@ function normaliseRows(rows) {
 }
 
 /**
- * Return the visible width of a row label.
+ * Count the columns a row's label fills, including its result symbol when it
+ * has one.
  *
  * @param  {object}  entry
  *     Row entry.
  * @param  {object}  options
  *     Group rendering options.
  * @returns  {number}
- *     Displayed label length.
+ *     The number of terminal columns the label takes up.
  */
-function displayedLabelLength(entry, options) {
+function displayedLabelWidth(entry, options) {
 	if (typeof entry.result !== "string" || entry.result === "") {
-		return entry.label.length;
+		return visibleWidth(entry.label);
 	}
 
 	const entryOptions = {
@@ -80,5 +82,5 @@ function displayedLabelLength(entry, options) {
 
 	const symbol = getResultSymbol(entry.result, entryOptions);
 
-	return [symbol, entry.label].join(" ").length;
+	return visibleWidth([symbol, entry.label].join(" "));
 }

package/src/primitives/row.js

@@ -1,4 +1,4 @@
-import { foreground } from "../formatters/ansi.js";
+import { foreground, padVisible, visibleWidth } from "../formatters/ansi.js";
 import { wrapText } from "../formatters/wrap.js";
 import { getResultSymbol, getResultToken } from "../theme/results.js";
 
@@ -49,8 +49,8 @@ const minimumWrapWidth = 10;
 export function row(label, value = "", options = {}) {
 	const resultToken = resolveResultToken(options);
 	const displayLabel = renderDisplayLabel(label, resultToken, options);
-	const labelWidth = Math.max(displayLabel.length, options.labelWidth ?? 0);
-	const labelText = displayLabel.padEnd(labelWidth, " ");
+	const labelWidth = Math.max(visibleWidth(displayLabel), options.labelWidth ?? 0);
+	const labelText = padVisible(displayLabel, labelWidth);
 	const renderedLabel = renderLabel(labelText, options);
 
 	if (value === "") {
@@ -66,7 +66,7 @@ export function row(label, value = "", options = {}) {
 	}
 
 	const availableWrapWidth = Number.isFinite(options.width)
-		? options.width - labelWidth - separator.length
+		? options.width - labelWidth - visibleWidth(separator)
 		: defaultWrapWidth;
 
 	const hasExplicitWrapWidth = options.wrapWidth !== undefined && options.wrapWidth !== null;
@@ -78,7 +78,7 @@ export function row(label, value = "", options = {}) {
 	const wrapWidth = options.wrapWidth ?? availableWrapWidth;
 
 	const valueLines = wrapText(value, wrapWidth);
-	const continuationIndent = " ".repeat(labelWidth + separator.length);
+	const continuationIndent = " ".repeat(labelWidth + visibleWidth(separator));
 	const renderedValueLines = valueLines.map((line) => renderValue(line, options));
 	const wrappedValue = renderedValueLines.join(`\n${continuationIndent}`);
 

package/src/primitives/span.js

@@ -1,4 +1,4 @@
-import { foreground, style } from "../formatters/ansi.js";
+import { foreground, restoreStyles, style } from "../formatters/ansi.js";
 
 // Inline spans use the same informational tone as hints by default.
 const defaultTone = "info";
@@ -27,7 +27,16 @@ export function span(value = "", tone = defaultTone, options = {}) {
 		return value;
 	}
 
-	const renderedValue = foreground(value, tone, options);
+	// The text weight, bold unless the options ask for another.
+	const weight = options.weight ?? defaultWeight;
 
-	return style(renderedValue, options.weight ?? defaultWeight, options);
+	// The text with the span's weight and tone switched back on after any coloured text.
+	const restoredValue = restoreStyles(value, [
+		style("", weight, options),
+		foreground("", tone, options),
+	]);
+
+	const renderedValue = foreground(restoredValue, tone, options);
+
+	return style(renderedValue, weight, options);
 }

package/src/primitives/status.js

@@ -1,4 +1,4 @@
-import { foreground, style } from "../formatters/ansi.js";
+import { foreground, restoreStyles, style } from "../formatters/ansi.js";
 import { getResultSymbol, getResultToken, resultTypes } from "../theme/results.js";
 
 /**
@@ -33,7 +33,13 @@ export function status(resultType = resultTypes.UNKNOWN, detail = "", options =
 		return `${prefix}${detailText}`;
 	}
 
-	const colouredPrefix = foreground(prefix, token.tone, options);
+	// The prefix with its bold and tone switched back on after a coloured label.
+	const restoredPrefix = restoreStyles(prefix, [
+		style("", "bold", options),
+		foreground("", token.tone, options),
+	]);
+
+	const colouredPrefix = foreground(restoredPrefix, token.tone, options);
 	const boldPrefix = style(colouredPrefix, "bold", options);
 
 	return `${boldPrefix}${detailText}`;

package/src/primitives/table.js

@@ -1,4 +1,4 @@
-import { foreground } from "../formatters/ansi.js";
+import { foreground, padVisible, sliceVisible, visibleWidth } from "../formatters/ansi.js";
 import { defaultWidth, minimumWidth, normaliseWidth } from "../formatters/width.js";
 import { tableColours } from "../theme/colours.js";
 
@@ -112,8 +112,8 @@ function normaliseRows(rows) {
 function columnWidths(columns, rows) {
 	return columns.map((column) => {
 		const naturalWidth = Math.max(
-			column.label.length,
-			...rows.map((row) => cellValue(row[column.key]).length),
+			visibleWidth(column.label),
+			...rows.map((row) => visibleWidth(cellValue(row[column.key]))),
 		);
 
 		const maxWidth = columnMaxWidth(column);
@@ -151,24 +151,38 @@ function columnMaxWidth(column) {
  * @param  {number}  width
  *     Column width.
  * @returns  {string[]}
- *     Lines the cell renders as; truncated to one line with a trailing
- *     ellipsis unless the column's overflow is 'wrap'.
+ *     Lines the cell renders as, each no wider on screen than the column
+ *     unless one character is wider than the whole column. A value that does
+ *     not fit is cut to one line with a trailing ellipsis, or split across
+ *     lines when the column's overflow is 'wrap'. Coloured text keeps its
+ *     colour on every line.
  */
 function columnLines(value, column, width) {
-	if (value.length <= width) {
+	if (visibleWidth(value) <= width) {
 		return [value];
 	}
 
 	if (column.overflow === "wrap") {
-		return Array.from(
-			{
-				length: Math.ceil(value.length / width),
-			},
-			(_, index) => value.slice(index * width, (index + 1) * width),
-		);
+		const lines = [];
+
+		let remaining = value;
+
+		while (remaining !== "") {
+			let { head, tail } = sliceVisible(remaining, width);
+
+			if (visibleWidth(head) === 0 && tail !== "") {
+				// In a one-column cell, a two-column character gets a line of its own so wrapping always moves forward.
+				({ head, tail } = sliceVisible(remaining, 2));
+			}
+
+			lines.push(head);
+			remaining = tail;
+		}
+
+		return lines;
 	}
 
-	return [`${value.slice(0, width - 1)}…`];
+	return [`${sliceVisible(value, width - 1).head}…`];
 }
 
 /**
@@ -242,7 +256,7 @@ function renderTable(columns, rows, widths, options) {
  *     Padded column text.
  */
 function padColumn(value, width, index, columnCount) {
-	return index === columnCount - 1 ? value : value.padEnd(width, " ");
+	return index === columnCount - 1 ? value : padVisible(value, width);
 }
 
 /**
@@ -258,13 +272,13 @@ function padColumn(value, width, index, columnCount) {
  *     Rendered key/value blocks.
  */
 function renderBlocks(columns, rows, options) {
-	const labelWidth = Math.max(...columns.map((column) => column.label.length));
+	const labelWidth = Math.max(...columns.map((column) => visibleWidth(column.label)));
 
 	return rows
 		.map((row) =>
 			columns
 				.map((column) => {
-					const label = renderHeader(column.label.padEnd(labelWidth, " "), options);
+					const label = renderHeader(padVisible(column.label, labelWidth), options);
 					const value = renderCell(cellValue(row[column.key]), 0, options);
 
 					return `${label}${columnSeparator}${value}`;