@lewishowles/cli-style 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.18.0 - 2026-10-20
+
+### Breaking changes
+
+- BREAKING: Panels without a `width` are now 80 columns wide instead of 40. Pass `width: 40` to keep the narrower panel.
+
+### Fixed
+
+- Panels, chips, statuses, spans, feedback and labelled lines now keep their background, text colour and bold or dim text after text coloured by chalk, picocolors or `util.styleText`, which switches off one style at a time instead of resetting everything.
+
 ## 0.17.1 - 2026-10-20
 
 ### Changed

package/adapters/python/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "lewishowles-cli-style"
-version = "0.17.1"
+version = "0.18.0"
 description = "Python adapter for the shared cli-style binary."
 authors = [{ name = "Lewis Howles" }]
 license = { text = "MIT" }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lewishowles/cli-style",
-	"version": "0.17.1",
+	"version": "0.18.0",
 	"description": "Shared terminal output styles for Lewis Howles tools, diagnostics, and package CLIs.",
 	"license": "MIT",
 	"repository": {

package/src/formatters/ansi.js

@@ -29,6 +29,18 @@ const hyperlinkPattern = new RegExp(
 // The sequences that clear every colour and text style at once.
 const clearStyleCodes = [reset, "\u001b[m"];
 
+// The sequence that switches the text colour back to the terminal default.
+const foregroundClose = "\u001b[39m";
+
+// The sequence that switches the background colour back to the terminal default.
+const backgroundClose = "\u001b[49m";
+
+// The sequence that switches off both bold and dim text.
+const weightClose = "\u001b[22m";
+
+// Matches a full reset or a sequence that switches off only the text colour, background or bold and dim.
+const closingStylePattern = new RegExp(`${escapeCharacter}\\[(?:0|22|39|49)?m`, "gu");
+
 // 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" });
 
@@ -105,10 +117,12 @@ export function style(value, style, options = {}) {
 }
 
 /**
- * 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.
+ * Switch the given styles back on wherever coloured text inside switches them off, so an
+ * outer style carries on past text coloured by this package, chalk, picocolors or
+ * `util.styleText`. After a full reset, written as `\u001b[0m` or `\u001b[m`, every given
+ * style comes back on. After a sequence that ends only the text colour, the background,
+ * or bold and dim, only the given styles of that kind come back on, so other colours the
+ * inner text left on stay on.
  *
  * @param  {string}  value
  *     Text that may hold coloured parts.
@@ -116,22 +130,57 @@ export function style(value, style, options = {}) {
  *     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.
+ *     The text with each switched-off style turned back on.
  */
 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 codes that turn each style on, with its closing reset cut off.
+	const openingCodes = stylesToRestore.map((styleToRestore) =>
+		styleToRestore.slice(0, -reset.length),
+	);
+
+	// Every style, switched back on together after a full reset.
+	const allOpeningCodes = openingCodes.join("");
+
+	// The text colour styles, switched back on after a text colour close.
+	let foregroundCodes = "";
+	// The background styles, switched back on after a background close.
+	let backgroundCodes = "";
+	// The bold and dim styles, switched back on after a bold and dim close.
+	let weightCodes = "";
+
+	// Sorts each style by the number at the start of its code. The text colour and
+	// background ranges include 39 and 49 because the default colour opens with them.
+	for (const openingCode of openingCodes) {
+		// The first number after the escape and bracket, such as 31 for red text.
+		const styleNumber = Number.parseInt(openingCode.slice(2), 10);
+
+		if ((styleNumber >= 30 && styleNumber <= 39) || (styleNumber >= 90 && styleNumber <= 97)) {
+			foregroundCodes += openingCode;
+		} else if (
+			(styleNumber >= 40 && styleNumber <= 49) ||
+			(styleNumber >= 100 && styleNumber <= 107)
+		) {
+			backgroundCodes += openingCode;
+		} else if (styleNumber === 1 || styleNumber === 2) {
+			weightCodes += openingCode;
+		}
+	}
 
-	// The text with the styles switched back on after each reset form handled so far.
-	let restoredValue = value;
+	return value.replace(closingStylePattern, (closingCode) => {
+		if (closingCode === foregroundClose) {
+			return `${closingCode}${foregroundCodes}`;
+		}
 
-	for (const clearStyleCode of clearStyleCodes) {
-		restoredValue = restoredValue.replaceAll(clearStyleCode, `${clearStyleCode}${openingCodes}`);
-	}
+		if (closingCode === backgroundClose) {
+			return `${closingCode}${backgroundCodes}`;
+		}
+
+		if (closingCode === weightClose) {
+			return `${closingCode}${weightCodes}`;
+		}
 
-	return restoredValue;
+		return `${closingCode}${allOpeningCodes}`;
+	});
 }
 
 /**

package/src/gallery/render-gallery.js

@@ -1179,12 +1179,15 @@ function renderPanelExamples(options) {
 		}),
 	);
 
-	// A panel holding a coloured status line and coloured values, to show the panel
-	// background carrying on after them.
+	// A panel holding a coloured status line, coloured values and a word coloured the way
+	// chalk colours it, to show the panel background carrying on after them. The word is
+	// written out by hand because chalk ends a colour by switching off only the text
+	// colour, while this package's own colours end with a full reset.
 	const nestedStylesExample = panel({
 		...options,
 		lines: [
 			status(resultTypes.SUCCESS, "Checks passed", options),
+			options.colour === true ? "A \u001b[31mred\u001b[39m word" : "A red word",
 			rowGroup({
 				...options,
 				rows: [

package/src/primitives/panel.js

@@ -1,11 +1,9 @@
 import { background, foreground, restoreStyles, style, visibleWidth } from "../formatters/ansi.js";
+import { defaultWidth } from "../formatters/width.js";
 import { wrapText } from "../formatters/wrap.js";
 import { profiles } from "../profiles/profiles.js";
 import { panelColours } from "../theme/colours.js";
 
-// The width used when no width is given, such as a direct library call outside a terminal.
-const defaultWidth = 40;
-
 // The narrowest panel that still leaves one column for content beside the accent and padding.
 const minimumWidth = 6;
 
@@ -22,8 +20,9 @@ const defaultTone = "info";
  * @param  {string[]}  options.lines
  *     Content lines to render.
  * @param  {number}  options.width
- *     Total panel width, including the accent and padding. Widths below 6 are raised to 6,
- *     which leaves room for one character of content. Longer lines wrap to fit.
+ *     Total panel width, including the accent and padding. Defaults to 80 columns.
+ *     Widths below 6 are raised to 6, which leaves room for one character of content.
+ *     Longer lines wrap to fit.
  * @param  {string}  options.profile
  *     Active output profile.
  * @param  {string}  options.title
@@ -86,8 +85,8 @@ function renderLine(line, width, isTitle, options) {
 
 		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.
+		// The content with the panel colours switched back on wherever coloured text inside
+		// switches them off, so the panel background carries on to the right edge.
 		const restoredContent = restoreStyles(content, [
 			background("", panelColours.background, options),
 			foreground("", panelColours.body, options),