@lewishowles/cli-style 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.4.0 - 2026-06-30
+
+### Added
+
+- Added `reporter.divider()` for compact phase headings in grouped CLI output.
+- Added `renderReporterDivider()` for rendering reporter phase dividers without a reporter instance.
+
+### Changed
+
+- Updated reporter docs and gallery examples to use dividers for major phases and reserve panels for framed content blocks.
+
 ## 0.3.0 - 2026-06-29
 
 ### Added

package/README.md

@@ -52,7 +52,7 @@ const reporter = createReporter({
 	colour: false,
 });
 
-reporter.section("Setting up Claude + Codex", "(project)");
+reporter.divider("Project setup", "Claude + Codex");
 reporter.group("Agent scripts", [
 	{
 		label: "project-diagnostics.py",
@@ -70,6 +70,8 @@ reporter.status("success", "Done.");
 console.log(reporter.render());
 ```
 
+Use `reporter.divider()` for major phases. Use `reporter.section()` when you want a normal `info` status row inside a phase. Panels are for framed content blocks, not headings.
+
 Groups can include verbose detail rows when a caller opts in:
 
 ```js

package/package.json

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

package/src/gallery/render-gallery.js

@@ -439,7 +439,7 @@ function renderPatterns(options, fixture) {
 	}, options);
 	const reporter = createReporter(options);
 
-	reporter.section("Setting up Claude + Codex", "(project)");
+	reporter.divider("Project setup", "Claude + Codex");
 	reporter.group("Project files", [
 		{
 			detail: "already exists",

package/src/index.js

@@ -45,6 +45,7 @@ export { table } from "./primitives/table.js";
 export {
 	createReporter,
 	renderGroup,
+	renderReporterDivider,
 	renderReporterStatus,
 	renderSection,
 } from "./reporters/create-reporter.js";

package/src/reporters/create-reporter.js

@@ -1,4 +1,5 @@
 import { isNonEmptyString } from "../patterns/helpers.js";
+import { divider } from "../primitives/divider.js";
 import { status as renderStatus } from "../primitives/status.js";
 import {
 	getHighestSeverityResult,
@@ -32,6 +33,10 @@ export function createReporter(options = {}) {
 	const lines = [];
 
 	return {
+		divider: (label, detail = "", dividerOptions = {}) => append(lines, renderReporterDivider(label, detail, {
+			...reporterOptions,
+			...dividerOptions,
+		})),
 		group: (label, items = [], groupOptions = {}) => append(lines, renderGroup(label, items, {
 			...reporterOptions,
 			...groupOptions,
@@ -49,6 +54,25 @@ export function createReporter(options = {}) {
 	};
 }
 
+/**
+ * Render a reporter phase divider.
+ *
+ * @param  {string}  label
+ *     Divider label.
+ * @param  {string}  detail
+ *     Optional supporting detail.
+ * @param  {object}  options
+ *     Rendering options.
+ * @returns  {string}
+ *     Rendered divider.
+ */
+export function renderReporterDivider(label, detail = "", options = {}) {
+	return divider({
+		...options,
+		label: formatLabel(label, detail),
+	});
+}
+
 /**
  * Render a reporter group without mutating a reporter instance.
  *
@@ -133,6 +157,24 @@ function append(lines, value) {
 	return value;
 }
 
+/**
+ * Combine a label and optional detail for compact phase dividers.
+ *
+ * @param  {string}  label
+ *     Main label.
+ * @param  {string}  detail
+ *     Optional supporting detail.
+ * @returns  {string}
+ *     Combined label.
+ */
+function formatLabel(label, detail) {
+	if (!isNonEmptyString(detail)) {
+		return label;
+	}
+
+	return `${label} · ${detail}`;
+}
+
 /**
  * Keep only rows that can render useful output.
  *