@lewishowles/cli-style 0.16.0 → 0.17.1

package/CHANGELOG.md

@@ -1,6 +1,30 @@
 # Changelog
 
-## Unreleased
+## 0.17.1 - 2026-10-20
+
+### Changed
+
+- The package now depends on `get-east-asian-width` to measure wide characters.
+
+### Fixed
+
+- Spans, chips, status lines and empty states now keep their own colour, weight and chip background after caller-coloured text.
+- Labelled lines now keep their bold prefix and tone colour after a caller-coloured icon or label.
+- Panels now keep their background, text colour and bold title to the end of a line that holds coloured text.
+- Panels now fill every line to the panel width when it holds coloured text or wide characters.
+- Text wrapping now measures coloured text, wide characters, and joined emoji by the columns they fill. It keeps joined emoji and accented letters whole, and wraps before a wide character would pass the limit.
+- `stripAnsi()` now removes terminal hyperlinks and other terminal control sequences as well as colours.
+- Tables now line up columns when values contain coloured or wide text.
+- Tables now cut overflowing cells by visible columns while keeping colours and terminal links.
+- Rows, row groups and labelled lines now line up when labels contain coloured or wide text.
+- Dividers and bar charts now line up when labels contain coloured or wide text.
+
+## 0.17.0 - 2026-10-03
+
+### Added
+
+- Added `quoteBlock()` (`quote-block` for `cli-style render`, `quote_block()` in Python, and `CliStyle.quoteBlock` in Swift) to show another program's output with a visible marker and optional heading.
+- Python `row()` and `row_group()`, and Swift `CliStyle.row` and `CliStyle.rowGroup`, can now wrap long values with the `wrap` and `wrap_width` options (`wrapWidth` in Swift). The row group functions also accept colour and separator defaults, which each row can override.
 
 ## 0.16.0 - 2026-09-21
 

package/README.md

@@ -63,6 +63,8 @@ The package contains `bin/cli-style` and `adapters/`.
 
 All renderers return text. JavaScript imports functions directly. CLI, Bash, Python, and Swift integrations pass JSON-compatible data to a named renderer.
 
+Callers add any blank lines around rendered blocks. Renderers return strings without a trailing newline, and the CLI ends its output with one newline.
+
 ### JavaScript
 
 Create the `ui` instance at the CLI entrypoint, then pass `ui.options` to renderers. That keeps flag, environment, stream, colour, Unicode, and width detection in one place.
@@ -280,6 +282,7 @@ Renderer names are stable for `cli-style render`, `cli_style_render`, and Python
 | `empty-state`         | `emptyState(title, detail, options)`  | Use `cli_style_render`               | Use `render("empty-state", ...)`   | Use `CliStyle.render`                  | Empty result message.                                           |
 | `error-block`         | `errorBlock(title, lines, options)`   | Use `cli_style_render`               | Use `render("error-block", ...)`   | Use `CliStyle.render`                  | Structured error block.                                         |
 | `diff-block`          | `diffBlock(diff, options)`            | Use `cli_style_render`               | Use `render("diff-block", ...)`    | Use `CliStyle.render`                  | Structured added, removed, context, and header lines.           |
+| `quote-block`         | `quoteBlock(quote, options)`          | Use `cli_style_render`               | `quote_block(lines, title, width)` | `CliStyle.quoteBlock(...)`             | Output lines with a left marker and optional heading.           |
 
 Use `render("<renderer>", data, ...)` (Python) or `CliStyle.render(_:data:options:)` (Swift) for aggregate patterns (`diagnostic-report`, `agent-transcript`, `compact-data-table`) or any renderer with multi-item fields.
 
@@ -317,6 +320,8 @@ Use these shapes with `cli-style render`, `cli_style_render`, or Python `render(
 - `result`: optional result type for a symbol and tone
 - `labelWidth`: optional minimum label width
 - `labelColour`, `valueColour`, `separator`: optional presentation overrides
+- `wrap`: set to `false` to keep the value on one line
+- `wrapWidth`: optional value width when wrapping is enabled
 
 ### `row-group`
 
@@ -337,7 +342,10 @@ Use these shapes with `cli-style render`, `cli_style_render`, or Python `render(
 
 - `rows`: labelled values to align and render
 - `labelWidth`: optional minimum width for every label
-- Per-row fields match `row`, including `label`, `value`, `result`, `labelColour`, `valueColour`, and `separator`
+- `labelColour`, `valueColour`, `separator`: optional defaults for every row
+- `wrap`: set to `false` to keep every value on one line
+- `wrapWidth`: optional value width when wrapping is enabled
+- Each row takes the same fields as `row`. Row options other than `labelWidth` override the group defaults
 
 ### `bullet-list`
 
@@ -447,6 +455,19 @@ Patterns are built-in composite renderers for common report shapes. They use the
 | `next-step-block`     | `nextStepBlock(nextStep, options)`          | Next-step guidance.                   | `title`, `next`, `reason`, `commands`, `alternatives`                                |
 | `compact-data-table`  | `compactDataTable(data, options)`           | Titled compact data table.            | `title`, `summary`, `columns`, `rows`                                                |
 | `diff-block`          | `diffBlock(diff, options)`                  | Structured diff presentation.         | `title`, `path`, `lines`                                                             |
+| `quote-block`         | `quoteBlock(quote, options)`                | Quoted output with a visible marker.  | `lines`, `title`, `width`                                                            |
+
+### `quote-block`
+
+Pass output lines with an optional title and total width. Long lines wrap with a marker beside every continuation line, and empty lines are kept. The marker is `│`, or `|` when Unicode is off, and it is muted when colour is enabled. Plain and CI output always use an uncoloured `|`. ANSI colour codes in the title and lines are removed. The `json` profile returns the input unchanged.
+
+```js
+quoteBlock({
+	lines: ["The command returned this explanation.", "A second output line."],
+	title: "Command output",
+	width: 48,
+});
+```
 
 ### `diff-block`
 

package/adapters/python/README.md

@@ -22,6 +22,20 @@ print(render("status", {"type": "success", "label": "Build passed"}))
 
 If the `cli-style` binary is not available, `render()` returns sorted plain `key: value` text by default. Pass `raise_on_missing=True` to raise `CliStyleNotFoundError` instead.
 
+Use `row()` for one labelled value or `row_group()` to align several values. Both accept `wrap=False` to keep values on one line and `wrap_width` to set the width used when wrapping. `row_group()` also accepts `label_colour`, `value_colour`, and `separator` as defaults for its rows:
+
+```python
+from cli_style import row_group
+
+print(row_group(
+    [{"label": "Command", "value": "python -m pip install lewishowles-cli-style"}],
+    wrap=False,
+    label_colour="muted",
+))
+```
+
+Each row has `label`, `value`, and an optional `result`. It can override the group defaults with `label_colour`, `value_colour`, `separator`, `wrap`, or `wrap_width`. The JavaScript spellings, such as `labelColour` and `wrapWidth`, also work in row dictionaries. Callers add any blank lines around rendered blocks. Python `render()` removes trailing newlines from rendered strings.
+
 ## More information
 
 - [Repository](https://github.com/lewishowles/cli-style)

package/adapters/python/cli_style/__init__.py

@@ -19,6 +19,7 @@ from ._wrappers import (
 	next_step_block,
 	panel,
 	progress_bar,
+	quote_block,
 	row,
 	row_group,
 	sparkline,
@@ -59,6 +60,7 @@ __all__ = [
 	"next_step_block",
 	"panel",
 	"progress_bar",
+	"quote_block",
 	"render",
 	"resolve_binary",
 	"row",

package/adapters/python/cli_style/_wrappers.py

@@ -6,6 +6,22 @@ from typing import Any
 
 from .core import render
 
+
+def _camel_case_row(row: Any) -> Any:
+	"""Return a copy of a row with Python option names, such as label_colour, renamed to the camelCase names the renderer reads. Keys already in camelCase are kept, and a value that is not a dictionary is returned unchanged for the renderer to filter."""
+	if not isinstance(row, dict):
+		return row
+
+	converted_row = {}
+
+	for key, value in row.items():
+		parts = key.split("_")
+		camel_case_key = parts[0] + "".join(part.capitalize() for part in parts[1:])
+		converted_row[camel_case_key] = value
+
+	return converted_row
+
+
 def agent_transcript(
 	entries: list[dict[str, Any]] | None = None,
 	title: str | None = None,
@@ -334,6 +350,25 @@ def progress_bar(
 	return render("progress-bar", data, **kwargs)
 
 
+def quote_block(
+	lines: list[str] | None = None,
+	title: str | None = None,
+	width: int | float | None = None,
+	**kwargs: Any,
+) -> str:
+	"""Return quote-block output; extra keyword arguments go to render()."""
+	data = {
+		"lines": [] if lines is None else lines,
+	}
+
+	if title is not None:
+		data["title"] = title
+	if width is not None:
+		data["width"] = width
+
+	return render("quote-block", data, **kwargs)
+
+
 def row(
 	label: str,
 	value: str,
@@ -342,6 +377,8 @@ def row(
 	label_colour: str | None = None,
 	value_colour: str | None = None,
 	separator: str | None = None,
+	wrap: bool = True,
+	wrap_width: int | float | None = None,
 	**kwargs: Any,
 ) -> str:
 	"""Return row output; extra keyword arguments go to render()."""
@@ -349,6 +386,7 @@ def row(
 		"label": label,
 		"value": value,
 		"result": result,
+		"wrap": wrap,
 	}
 
 	if label_width is not None:
@@ -359,6 +397,8 @@ def row(
 		data["valueColour"] = value_colour
 	if separator is not None:
 		data["separator"] = separator
+	if wrap_width is not None:
+		data["wrapWidth"] = wrap_width
 
 	return render("row", data, **kwargs)
 
@@ -366,15 +406,29 @@ def row(
 def row_group(
 	rows: list[dict[str, Any]],
 	label_width: int | float | None = None,
+	label_colour: str | None = None,
+	value_colour: str | None = None,
+	separator: str | None = None,
+	wrap: bool = True,
+	wrap_width: int | float | None = None,
 	**kwargs: Any,
 ) -> str:
 	"""Return row-group output; extra keyword arguments go to render()."""
 	data = {
-		"rows": rows,
+		"rows": [_camel_case_row(row) for row in rows],
+		"wrap": wrap,
 	}
 
 	if label_width is not None:
 		data["labelWidth"] = label_width
+	if label_colour is not None:
+		data["labelColour"] = label_colour
+	if value_colour is not None:
+		data["valueColour"] = value_colour
+	if separator is not None:
+		data["separator"] = separator
+	if wrap_width is not None:
+		data["wrapWidth"] = wrap_width
 
 	return render("row-group", data, **kwargs)
 

package/adapters/python/pyproject.toml

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

package/adapters/swift/Sources/CliStyle/Wrappers.swift

@@ -382,6 +382,29 @@ extension CliStyle {
 		return try render("progress-bar", data: data, options: options)
 	}
 
+	/**
+	 * Return quote-block output from the cli-style binary; `options` sets the profile, width, and binary.
+	 */
+	public static func quoteBlock(
+		lines: [String]? = nil,
+		title: String? = nil,
+		width: Int? = nil,
+		options: CliStyleOptions = .init()
+	) throws -> String {
+		var data: [String: Any] = [
+			"lines": lines ?? [],
+		]
+
+		if let title = title {
+			data["title"] = title
+		}
+		if let width = width {
+			data["width"] = width
+		}
+
+		return try render("quote-block", data: data, options: options)
+	}
+
 	/**
 	 * Return row output from the cli-style binary; `options` sets the profile, width, and binary.
 	 */
@@ -393,12 +416,15 @@ extension CliStyle {
 		labelColour: String? = nil,
 		valueColour: String? = nil,
 		separator: String? = nil,
+		wrap: Bool = true,
+		wrapWidth: Int? = nil,
 		options: CliStyleOptions = .init()
 	) throws -> String {
 		var data: [String: Any] = [
 			"label": label,
 			"value": value,
 			"result": result,
+			"wrap": wrap,
 		]
 
 		if let labelWidth = labelWidth {
@@ -413,6 +439,9 @@ extension CliStyle {
 		if let separator = separator {
 			data["separator"] = separator
 		}
+		if let wrapWidth = wrapWidth {
+			data["wrapWidth"] = wrapWidth
+		}
 
 		return try render("row", data: data, options: options)
 	}
@@ -423,15 +452,33 @@ extension CliStyle {
 	public static func rowGroup(
 		rows: [[String: Any]],
 		labelWidth: Int? = nil,
+		labelColour: String? = nil,
+		valueColour: String? = nil,
+		separator: String? = nil,
+		wrap: Bool = true,
+		wrapWidth: Int? = nil,
 		options: CliStyleOptions = .init()
 	) throws -> String {
 		var data: [String: Any] = [
 			"rows": rows,
+			"wrap": wrap,
 		]
 
 		if let labelWidth = labelWidth {
 			data["labelWidth"] = labelWidth
 		}
+		if let labelColour = labelColour {
+			data["labelColour"] = labelColour
+		}
+		if let valueColour = valueColour {
+			data["valueColour"] = valueColour
+		}
+		if let separator = separator {
+			data["separator"] = separator
+		}
+		if let wrapWidth = wrapWidth {
+			data["wrapWidth"] = wrapWidth
+		}
 
 		return try render("row-group", data: data, options: options)
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lewishowles/cli-style",
-	"version": "0.16.0",
+	"version": "0.17.1",
 	"description": "Shared terminal output styles for Lewis Howles tools, diagnostics, and package CLIs.",
 	"license": "MIT",
 	"repository": {
@@ -38,6 +38,9 @@
 		"smoke:binary": "./dist/bin/cli-style render status --plain < tests/fixtures/render/status-success.json",
 		"test:unit": "bun test"
 	},
+	"dependencies": {
+		"get-east-asian-width": "^1.7.0"
+	},
 	"devDependencies": {
 		"@stylistic/eslint-plugin": "^5.10.0",
 		"vite": "npm:@voidzero-dev/vite-plus-core@0.2.8",

package/scripts/generate-adapters.js

@@ -235,10 +235,15 @@ function renderWrapper(renderer) {
 		(parameter) => !isRequiredParameter(parameter) && parameter.default === null,
 	);
 
-	const payloadLines = payloadParameters.map(
-		(parameter) =>
-			`\t\t${JSON.stringify(parameter.name)}: ${renderPayloadValue(parameter, descriptor)},`,
-	);
+	const payloadLines = payloadParameters.map((parameter) => {
+		const isRowGroupRows = renderer.name === "row-group" && parameter.name === "rows";
+
+		const payloadValue = isRowGroupRows
+			? "[_camel_case_row(row) for row in rows]"
+			: renderPayloadValue(parameter, descriptor);
+
+		return `\t\t${JSON.stringify(parameter.name)}: ${payloadValue},`;
+	});
 
 	const nullablePayloadLines = nullableParameters.flatMap((parameter) => {
 		const name = descriptor.parameterName(parameter);
@@ -279,6 +284,22 @@ function renderWrappers() {
 		"",
 		"from .core import render",
 		"",
+		"",
+		"def _camel_case_row(row: Any) -> Any:",
+		'\t"""Return a copy of a row with Python option names, such as label_colour, renamed to the camelCase names the renderer reads. Keys already in camelCase are kept, and a value that is not a dictionary is returned unchanged for the renderer to filter."""',
+		"\tif not isinstance(row, dict):",
+		"\t\treturn row",
+		"",
+		"\tconverted_row = {}",
+		"",
+		"\tfor key, value in row.items():",
+		'\t\tparts = key.split("_")',
+		'\t\tcamel_case_key = parts[0] + "".join(part.capitalize() for part in parts[1:])',
+		"\t\tconverted_row[camel_case_key] = value",
+		"",
+		"\treturn converted_row",
+		"",
+		"",
 		wrappers,
 		"",
 	].join("\n");

package/src/catalogue/renderer-catalogue.js

@@ -635,6 +635,32 @@ const rendererDefinitions = [
 		],
 		fixture: undefined,
 	},
+	{
+		name: "quote-block",
+		category: "pattern",
+		api: "quoteBlock",
+		params: [
+			{
+				name: "lines",
+				type: "string[]",
+				required: false,
+				default: [],
+			},
+			{
+				name: "title",
+				type: "string",
+				required: false,
+				default: null,
+			},
+			{
+				name: "width",
+				type: "number",
+				required: false,
+				default: null,
+			},
+		],
+		fixture: "quote-block",
+	},
 	{
 		name: "row",
 		category: "primitive",
@@ -689,14 +715,12 @@ const rendererDefinitions = [
 				type: "boolean",
 				required: false,
 				default: true,
-				adapterOmit: true,
 			},
 			{
 				name: "wrapWidth",
 				type: "number",
 				required: false,
 				default: null,
-				adapterOmit: true,
 			},
 		],
 		fixture: undefined,
@@ -719,19 +743,35 @@ const rendererDefinitions = [
 				required: false,
 				default: null,
 			},
+			{
+				name: "labelColour",
+				type: "string",
+				required: false,
+				default: null,
+			},
+			{
+				name: "valueColour",
+				type: "string",
+				required: false,
+				default: null,
+			},
+			{
+				name: "separator",
+				type: "string",
+				required: false,
+				default: null,
+			},
 			{
 				name: "wrap",
 				type: "boolean",
 				required: false,
 				default: true,
-				adapterOmit: true,
 			},
 			{
 				name: "wrapWidth",
 				type: "number",
 				required: false,
 				default: null,
-				adapterOmit: true,
 			},
 		],
 		fixture: undefined,

package/src/cli/render-command.js

@@ -6,6 +6,7 @@ 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 { barChart } from "../primitives/bar-chart.js";
 import { bulletList } from "../primitives/bullet-list.js";
@@ -78,6 +79,7 @@ const renderers = {
 			width: input.width ?? options.width,
 		}),
 	"next-step-block": (input, options) => nextStepBlock(input, options),
+	"quote-block": (input, options) => quoteBlock(input, options),
 	panel: (input, options) =>
 		panel({
 			...input,