@lewishowles/cli-style 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.4.1 - 2026-07-01
+
+### Fixed
+
+- Updated grouped reporter summaries so skipped rows outrank success rows while warnings and failures still take precedence.
+- Added the project-local vite-plus pre-commit hook setup so commits run the existing staged checks.
+
+## 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,24 +52,30 @@ const reporter = createReporter({
 	colour: false,
 });
 
-reporter.section("Setting up Claude + Codex", "(project)");
-reporter.group("Agent scripts", [
+reporter.divider("Project setup", "Claude + Codex");
+reporter.group(
+	"Agent scripts",
+	[
+		{
+			label: "project-diagnostics.py",
+			result: "unchanged",
+		},
+		{
+			label: "repo-context.py",
+			result: "unchanged",
+		},
+	],
 	{
-		label: "project-diagnostics.py",
-		result: "unchanged",
+		summary: "2 already linked",
 	},
-	{
-		label: "repo-context.py",
-		result: "unchanged",
-	},
-], {
-	summary: "2 already linked",
-});
+);
 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/examples/diagnostic.mjs

@@ -22,9 +22,11 @@ const report = {
 	title: "Diagnostics",
 };
 
-console.log(diagnosticReport(report, {
-	colour: false,
-	profile: "diagnostic",
-	unicode: true,
-	width: 80,
-}));
+console.log(
+	diagnosticReport(report, {
+		colour: false,
+		profile: "diagnostic",
+		unicode: true,
+		width: 80,
+	}),
+);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lewishowles/cli-style",
-	"version": "0.3.0",
+	"version": "0.4.1",
 	"description": "Shared terminal output styles for Lewis Howles tools, diagnostics, and package CLIs.",
 	"license": "MIT",
 	"repository": {
@@ -32,6 +32,7 @@
 		"check": "vp check --fix",
 		"cli-style:gallery": "bun ./bin/cli-style.js gallery",
 		"package:binary": "scripts/package-binary.sh",
+		"prepare": "vp config",
 		"smoke:binary": "./dist/bin/cli-style render status --plain < tests/fixtures/render/status-success.json",
 		"test:unit": "bun test"
 	},

package/src/cli/gallery-command.js

@@ -1,19 +1,10 @@
 import { spawnSync } from "node:child_process";
 
-import {
-	galleryFixtures,
-	gallerySections,
-	galleryVariants,
-} from "../gallery/render-gallery.js";
+import { galleryFixtures, gallerySections, galleryVariants } from "../gallery/render-gallery.js";
 import { isProfile, profiles } from "../profiles/profiles.js";
 
 // Global rendering flags accepted after `gallery` for focused review commands.
-const globalRenderingFlags = new Set([
-	"--no-color",
-	"--no-colour",
-	"--no-unicode",
-	"--plain",
-]);
+const globalRenderingFlags = new Set(["--no-color", "--no-colour", "--no-unicode", "--plain"]);
 
 /**
  * Parse gallery command arguments.
@@ -25,6 +16,7 @@ const globalRenderingFlags = new Set([
  */
 export function parseGalleryRequest(args = []) {
 	let hasVariant = false;
+
 	const request = {
 		fixture: undefined,
 		interactive: false,
@@ -96,15 +88,13 @@ export function selectInteractiveGalleryRequest(request) {
 		...gallerySections.map((section) => `section:${section}`),
 		...galleryFixtures.map((fixture) => `fixture:${fixture}`),
 	];
-	const selection = spawnSync("fzf", [
-		"--height=60%",
-		"--layout=reverse",
-		"--prompt=Gallery > ",
-	], {
+
+	const selection = spawnSync("fzf", ["--height=60%", "--layout=reverse", "--prompt=Gallery > "], {
 		encoding: "utf8",
 		input: choices.join("\n"),
 		stdio: ["pipe", "pipe", "inherit"],
 	});
+
 	const value = selection.status === 0 ? selection.stdout.trim() : "";
 
 	if (value === "") {

package/src/cli/render-command.js

@@ -22,73 +22,81 @@ import { isProfile, profiles } from "../profiles/profiles.js";
 const renderers = {
 	"agent-transcript": (input, options) => agentTranscript(input, options),
 	"audit-finding": (input, options) => auditFinding(input, options),
-	"bar-chart": (input, options) => barChart({
-		...input,
-		...options,
-	}),
-	chip: (input, options) => chip(input.label, input.tone, {
-		...input,
-		...options,
-	}),
+	"bar-chart": (input, options) =>
+		barChart({
+			...input,
+			...options,
+		}),
+	chip: (input, options) =>
+		chip(input.label, input.tone, {
+			...input,
+			...options,
+		}),
 	"command-result": (input, options) => commandResult(input, options),
 	"compact-data-table": (input, options) => compactDataTable(input, options),
 	"confirmation-result": (input, options) => confirmationResult(input, options),
 	"diagnostic-report": (input, options) => diagnosticReport(input, options),
-	divider: (input, options) => divider({
-		...input,
-		...options,
-	}),
-	"empty-state": (input, options) => emptyState(input.title, input.detail, {
-		...input,
-		...options,
-	}),
-	"error-block": (input, options) => errorBlock(input.title, input.lines, {
-		...input,
-		...options,
-	}),
-	hint: (input, options) => hint(input.message, {
-		...input,
-		...options,
-	}),
+	divider: (input, options) =>
+		divider({
+			...input,
+			...options,
+		}),
+	"empty-state": (input, options) =>
+		emptyState(input.title, input.detail, {
+			...input,
+			...options,
+		}),
+	"error-block": (input, options) =>
+		errorBlock(input.title, input.lines, {
+			...input,
+			...options,
+		}),
+	hint: (input, options) =>
+		hint(input.message, {
+			...input,
+			...options,
+		}),
 	"next-step-block": (input, options) => nextStepBlock(input, options),
-	panel: (input, options) => panel({
-		...input,
-		...options,
-	}),
-	"progress-bar": (input, options) => progressBar({
-		...input,
-		...options,
-	}),
-	row: (input, options) => row(input.label, input.value, {
-		...input,
-		...options,
-	}),
-	status: (input, options) => status(input.type, input.detail, {
-		...input,
-		...options,
-	}),
-	step: (input, options) => step(input.label, input.state, {
-		...input,
-		...options,
-	}),
-	"step-progress": (input, options) => stepProgress({
-		...input,
-		...options,
-	}),
-	table: (input, options) => table({
-		...input,
-		...options,
-	}),
+	panel: (input, options) =>
+		panel({
+			...input,
+			...options,
+		}),
+	"progress-bar": (input, options) =>
+		progressBar({
+			...input,
+			...options,
+		}),
+	row: (input, options) =>
+		row(input.label, input.value, {
+			...input,
+			...options,
+		}),
+	status: (input, options) =>
+		status(input.type, input.detail, {
+			...input,
+			...options,
+		}),
+	step: (input, options) =>
+		step(input.label, input.state, {
+			...input,
+			...options,
+		}),
+	"step-progress": (input, options) =>
+		stepProgress({
+			...input,
+			...options,
+		}),
+	table: (input, options) =>
+		table({
+			...input,
+			...options,
+		}),
 	"task-summary": (input, options) => taskSummary(input, options),
 };
 
 // Global rendering flags accepted after `render <renderer>`.
-const globalRenderingFlags = new Set([
-	"--no-color",
-	"--no-colour",
-	"--no-unicode",
-	"--plain",
-]);
+const globalRenderingFlags = new Set(["--no-color", "--no-colour", "--no-unicode", "--plain"]);
 
 // Renderer names exposed for help text and tests.
 export const rendererNames = Object.keys(renderers);

package/src/create-cli-style.js

@@ -28,10 +28,11 @@ export function createCliStyle(options = {}) {
 		print: (value) => {
 			console.log(value);
 		},
-		reporter: (reporterOptions = {}) => createReporter({
-			...resolvedOptions,
-			...reporterOptions,
-		}),
+		reporter: (reporterOptions = {}) =>
+			createReporter({
+				...resolvedOptions,
+				...reporterOptions,
+			}),
 		write: (value) => {
 			process.stdout.write(value);
 		},