@moku-labs/web 1.12.4 → 1.13.0

package/dist/index.cjs

@@ -15,6 +15,7 @@ let preact_render_to_string = require("preact-render-to-string");
 let node_child_process = require("node:child_process");
 let node_readline = require("node:readline");
 let node_url = require("node:url");
+let _moku_labs_common_cli = require("@moku-labs/common/cli");
 let gray_matter = require("gray-matter");
 gray_matter = require_convention.__toESM(gray_matter, 1);
 let _shikijs_rehype = require("@shikijs/rehype");
@@ -8035,312 +8036,17 @@ function networkUrl(port, source = node_os.networkInterfaces) {
 	return ip === null ? null : `http://${ip}:${port}`;
 }
 //#endregion
-//#region src/plugins/cli/render/ansi.ts
-/**
-* @file cli plugin — TTY/NO_COLOR-aware ANSI color + box-drawing helpers shared by
-* the Panel renderer. Modeled on the legacy `scripts/_log.ts`: color and box glyphs
-* are emitted only on a real TTY with `NO_COLOR` unset; otherwise plain ASCII so
-* CI logs and pipes stay readable.
-*/
-/** The ANSI escape byte (ESC, `0x1b`), built so no literal control char is in source. */
-const ESC = String.fromCodePoint(27);
-/** ANSI SGR codes used by the Panel renderer (each prefixed with the ESC byte). */
-const ANSI = {
-	reset: `${ESC}[0m`,
-	bold: `${ESC}[1m`,
-	dim: `${ESC}[2m`,
-	red: `${ESC}[31m`,
-	green: `${ESC}[32m`,
-	yellow: `${ESC}[33m`,
-	blue: `${ESC}[34m`,
-	magenta: `${ESC}[35m`,
-	cyan: `${ESC}[36m`,
-	gray: `${ESC}[90m`
-};
-/**
-* The Moku brand pink (`#FF1E6F`) as an RGB triple, used for 24-bit truecolor output.
-* Degrades to {@link ANSI.magenta} on a 16-color TTY and to plain text off a TTY.
-*/
-const BRAND_PINK = {
-	r: 255,
-	g: 30,
-	b: 111
-};
-/**
-* Build a 24-bit (truecolor) SGR foreground escape for the given RGB triple.
-*
-* @param r - Red channel (0–255).
-* @param g - Green channel (0–255).
-* @param b - Blue channel (0–255).
-* @returns The `ESC[38;2;r;g;bm` foreground sequence.
-* @example
-* fg24(255, 30, 111); // "\x1b[38;2;255;30;111m"
-*/
-function fg24(r, g, b) {
-	return `${ESC}[38;2;${r};${g};${b}m`;
-}
-/** ANSI: erase the entire current line, leaving the cursor where it is. */
-const CLEAR_LINE = `${ESC}[2K`;
-/** ANSI: erase from the cursor to the end of the screen (drops stale trailing rows). */
-const CLEAR_BELOW = `${ESC}[0J`;
-/**
-* Braille spinner frames for live "working…" indicators on a TTY (advance one per tick).
-* Off a TTY the Panel never animates, so this is unused in plain/CI output.
-*/
-const SPINNER_FRAMES = [
-	"⠋",
-	"⠙",
-	"⠹",
-	"⠸",
-	"⠼",
-	"⠴",
-	"⠦",
-	"⠧",
-	"⠇",
-	"⠏"
-];
-/**
-* The ANSI sequence to move the cursor up `n` lines (empty string for `n <= 0`). The
-* Panel uses it to repaint a live block in place — move up over the previous draw, then
-* rewrite each row — so progress updates a fixed region instead of scrolling new lines.
-*
-* @param n - Number of lines to move the cursor up.
-* @returns The cursor-up escape sequence, or `""` when `n <= 0`.
-* @example
-* cursorUp(3); // "\x1b[3A"
-*/
-function cursorUp(n) {
-	return n > 0 ? `${ESC}[${n}A` : "";
-}
-/** Unicode rounded box glyphs used when output is a color-capable TTY. */
-const UNICODE_BOX = {
-	topLeft: "╭",
-	topRight: "╮",
-	bottomLeft: "╰",
-	bottomRight: "╯",
-	horizontal: "─",
-	vertical: "│"
-};
-/** ASCII box glyphs used when output is piped/CI (plain mode). */
-const ASCII_BOX = {
-	topLeft: "+",
-	topRight: "+",
-	bottomLeft: "+",
-	bottomRight: "+",
-	horizontal: "-",
-	vertical: "|"
-};
-/**
-* Matches every ANSI SGR escape sequence (used to measure visible width). Built from
-* the {@link ESC} byte so no literal control character appears in the source regex.
-*/
-const ANSI_PATTERN = new RegExp(String.raw`${ESC}\[[0-9;]*m`, "g");
-/**
-* Whether ANSI color/box glyphs should be emitted: a TTY stream with `NO_COLOR`
-* unset. Reads `process.stdout.isTTY` and `process.env.NO_COLOR` by default so the
-* renderer auto-degrades in CI and pipes, exactly like the legacy logger.
-*
-* @param stream - Stream to probe for `isTTY` (defaults to `process.stdout`).
-* @param noColor - The `NO_COLOR` value (defaults to `process.env.NO_COLOR`).
-* @returns `true` when color should be used.
-* @example
-* supportsColor(); // true in an interactive terminal
-*/
-function supportsColor(stream = process.stdout, noColor = process.env.NO_COLOR) {
-	return stream.isTTY === true && noColor === void 0;
-}
-/**
-* Whether the terminal advertises 24-bit (truecolor) support via `COLORTERM`, so the
-* renderer may emit the exact brand pink ({@link BRAND_PINK}) instead of the 16-color
-* `magenta` approximation. Always layered on top of {@link supportsColor} — truecolor
-* is never used when color itself is disabled.
-*
-* @param colorTerm - The `COLORTERM` value (defaults to `process.env.COLORTERM`).
-* @returns `true` when `COLORTERM` is `truecolor` or `24bit`.
-* @example
-* supportsTruecolor("truecolor"); // true
-*/
-function supportsTruecolor(colorTerm = process.env.COLORTERM) {
-	return colorTerm === "truecolor" || colorTerm === "24bit";
-}
-/**
-* The braille spinner glyph for a given elapsed time, advancing one frame per
-* `frameMs`. Deriving the frame from wall-clock elapsed (rather than a tick counter)
-* keeps the spinner correct even when the animation ticker is briefly starved by a
-* synchronous build phase and several ticks coalesce — the glyph still reflects real
-* elapsed time instead of freezing on a stale frame.
-*
-* @param elapsedMs - Milliseconds since the live region opened.
-* @param frameMs - Milliseconds per frame (defaults to `80`).
-* @returns The active spinner glyph.
-* @example
-* spinnerFrameAt(240); // "⠹" (the 4th frame at 80ms/frame)
-*/
-function spinnerFrameAt(elapsedMs, frameMs = 80) {
-	return SPINNER_FRAMES[Math.floor(Math.max(0, elapsedMs) / frameMs) % SPINNER_FRAMES.length] ?? "⠋";
-}
-/**
-* Select the box glyph set for the given color mode (Unicode on a TTY, ASCII off it).
-*
-* @param color - Whether color/Unicode output is enabled.
-* @returns The matching {@link BoxGlyphs} set.
-* @example
-* const glyphs = boxGlyphs(supportsColor());
-*/
-function boxGlyphs(color) {
-	return color ? UNICODE_BOX : ASCII_BOX;
-}
-/**
-* The visible width of a string, ignoring any ANSI escape sequences it contains.
-*
-* @param text - The (possibly colorized) text to measure.
-* @returns The number of visible characters.
-* @example
-* visibleWidth(`${ANSI.red}hi${ANSI.reset}`); // 2
-*/
-function visibleWidth(text) {
-	return text.replaceAll(ANSI_PATTERN, "").length;
-}
-/**
-* Build a {@link Palette} bound to a fixed color mode. When `color` is `false` every
-* helper returns its input unchanged, so the same render code path produces plain
-* output in CI/pipes.
-*
-* @param color - Whether color is enabled (typically `supportsColor()`).
-* @param truecolor - Whether 24-bit output is enabled (typically `supportsTruecolor()`);
-*   only consulted by {@link Palette.pink}. Defaults to `false` (16-color magenta).
-* @returns The bound color palette.
-* @example
-* const palette = makePalette(supportsColor(), supportsTruecolor());
-* const line = palette.green("done");
-*/
-function makePalette(color, truecolor = false) {
-	return {
-		enabled: color,
-		/**
-		* Wrap text in the given ANSI code (returns it unchanged when color is off).
-		*
-		* @param code - The ANSI SGR code to apply.
-		* @param text - The text to colorize.
-		* @returns The colorized (or unchanged) text.
-		* @example
-		* palette.paint(ANSI.green, "ok");
-		*/
-		paint(code, text) {
-			return color ? `${code}${text}${ANSI.reset}` : text;
-		},
-		/**
-		* Bold the given text (no-op in plain mode).
-		*
-		* @param text - The text to embolden.
-		* @returns The bold (or unchanged) text.
-		* @example
-		* palette.bold("title");
-		*/
-		bold(text) {
-			return this.paint(ANSI.bold, text);
-		},
-		/**
-		* Dim the given text (no-op in plain mode).
-		*
-		* @param text - The text to dim.
-		* @returns The dim (or unchanged) text.
-		* @example
-		* palette.dim("· 84ms");
-		*/
-		dim(text) {
-			return this.paint(ANSI.dim, text);
-		},
-		/**
-		* Color the given text green (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The green (or unchanged) text.
-		* @example
-		* palette.green("✓");
-		*/
-		green(text) {
-			return this.paint(ANSI.green, text);
-		},
-		/**
-		* Color the given text yellow (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The yellow (or unchanged) text.
-		* @example
-		* palette.yellow("~");
-		*/
-		yellow(text) {
-			return this.paint(ANSI.yellow, text);
-		},
-		/**
-		* Color the given text red (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The red (or unchanged) text.
-		* @example
-		* palette.red("✗");
-		*/
-		red(text) {
-			return this.paint(ANSI.red, text);
-		},
-		/**
-		* Color the given text cyan (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The cyan (or unchanged) text.
-		* @example
-		* palette.cyan("http://localhost:4173");
-		*/
-		cyan(text) {
-			return this.paint(ANSI.cyan, text);
-		},
-		/**
-		* Color the given text the Moku brand pink: exact `#FF1E6F` (24-bit) when truecolor
-		* is enabled, the 16-color `magenta` approximation otherwise, unchanged in plain mode.
-		*
-		* @param text - The text to colorize.
-		* @returns The pink (or unchanged) text.
-		* @example
-		* palette.pink("▟▙ moku web");
-		*/
-		pink(text) {
-			if (!color) return text;
-			if (truecolor) return `${fg24(BRAND_PINK.r, BRAND_PINK.g, BRAND_PINK.b)}${text}${ANSI.reset}`;
-			return this.paint(ANSI.magenta, text);
-		}
-	};
-}
+//#region src/plugins/cli/render/panel.ts
 /**
-* Frame a list of already-rendered content lines in a box, padding each line to the
-* widest visible line (or `minInnerWidth`, whichever is larger — so several boxes can be
-* forced to a shared width). Uses Unicode borders when `color` is enabled and ASCII
-* otherwise. Visible width ignores embedded ANSI so colored lines align.
-*
-* @param lines - The content lines (may contain ANSI color codes).
-* @param color - Whether to use Unicode borders (and assume color-capable output).
-* @param minInnerWidth - Minimum inner (content) width to pad every row to. Defaults to `0`.
-* @returns The boxed lines (top border, content rows, bottom border).
-* @example
-* box(["Local:   http://localhost:4173"], true, 62);
+* @file cli plugin — the Panel renderer (the "Velocity Lockup" CLI identity). Produces
+* the `▟▙ moku web` lockup + version/runtime banner, the live phase tree with an
+* animated indeterminate build bar, the BUILD summary + throughput sparkline, the
+* server-ready rail with a persistent breathing `◍ live` idle pulse, the compact
+* rebuild line, the deploy result, and diagnostic heading/check rows. TTY/`NO_COLOR`-
+* aware via {@link makePalette} (24-bit brand pink when truecolor is available, the
+* 16-color magenta approximation otherwise, plain text off a TTY); every line is
+* written through an injectable sink so tests can capture it.
 */
-function box(lines, color, minInnerWidth = 0) {
-	const glyphs = boxGlyphs(color);
-	const inner = Math.max(0, minInnerWidth, ...lines.map((line) => visibleWidth(line)));
-	const horizontal = glyphs.horizontal.repeat(inner + 2);
-	const top = `${glyphs.topLeft}${horizontal}${glyphs.topRight}`;
-	const bottom = `${glyphs.bottomLeft}${horizontal}${glyphs.bottomRight}`;
-	return [
-		top,
-		...lines.map((line) => {
-			const pad = " ".repeat(inner - visibleWidth(line));
-			return `${glyphs.vertical} ${line}${pad} ${glyphs.vertical}`;
-		}),
-		bottom
-	];
-}
-//#endregion
-//#region src/plugins/cli/render/panel.ts
 /** Per-command label shown beside the lockup wordmark. */
 const COMMAND_LABEL = {
 	build: "build",
@@ -8430,7 +8136,7 @@ function durationSuffix(palette, durationMs) {
 * railLine("  ├─ ✓ pages", "· 12ms");
 */
 function railLine(left, right, width = RAIL_WIDTH) {
-	const gap = Math.max(1, width - visibleWidth(left) - visibleWidth(right));
+	const gap = Math.max(1, width - (0, _moku_labs_common_cli.visibleWidth)(left) - (0, _moku_labs_common_cli.visibleWidth)(right));
 	return `${left}${" ".repeat(gap)}${right}`;
 }
 /**
@@ -8471,8 +8177,8 @@ function createPanelRenderer(options = {}) {
 		process.stdout.write(chunk);
 	});
 	const now = options.now ?? Date.now;
-	const color = options.color ?? supportsColor();
-	const palette = makePalette(color, options.truecolor ?? (color && supportsTruecolor()));
+	const color = options.color ?? (0, _moku_labs_common_cli.supportsColor)();
+	const palette = (0, _moku_labs_common_cli.makePalette)(color, options.truecolor ?? (color && (0, _moku_labs_common_cli.supportsTruecolor)()));
 	const version = options.version ?? "dev";
 	const coreVersion = options.coreVersion;
 	const g = glyphSet(color);
@@ -8499,7 +8205,7 @@ function createPanelRenderer(options = {}) {
 	const renderPhaseRow = (row) => {
 		const branch = palette.dim(g.tree);
 		if (row.done) return railLine(`  ${branch} ${palette.green("✓")} ${row.name}`, palette.dim(`· ${row.durationMs}ms`));
-		return `  ${branch} ${palette.cyan(spinnerFrameAt(now() - blockStartedAt, SPIN_MS))} ${palette.dim(row.name)}`;
+		return `  ${branch} ${palette.cyan((0, _moku_labs_common_cli.spinnerFrameAt)(now() - blockStartedAt, SPIN_MS))} ${palette.dim(row.name)}`;
 	};
 	/**
 	* Render the indeterminate "comet" build bar — a short pink fill window sweeping across
@@ -8530,10 +8236,10 @@ function createPanelRenderer(options = {}) {
 	* paintPhaseBlock();
 	*/
 	const paintPhaseBlock = () => {
-		let frame = cursorUp(phaseDrawn);
-		for (const row of phaseRows) frame += `${CLEAR_LINE}${renderPhaseRow(row)}\n`;
-		frame += `${CLEAR_LINE}${renderBuildBar(now() - blockStartedAt)}\n`;
-		writeRaw(frame + CLEAR_BELOW);
+		let frame = (0, _moku_labs_common_cli.cursorUp)(phaseDrawn);
+		for (const row of phaseRows) frame += `${_moku_labs_common_cli.CLEAR_LINE}${renderPhaseRow(row)}\n`;
+		frame += `${_moku_labs_common_cli.CLEAR_LINE}${renderBuildBar(now() - blockStartedAt)}\n`;
+		writeRaw(frame + _moku_labs_common_cli.CLEAR_BELOW);
 		phaseDrawn = phaseRows.length + 1;
 	};
 	/**
@@ -8543,9 +8249,9 @@ function createPanelRenderer(options = {}) {
 	* paintRebuildLine();
 	*/
 	const paintRebuildLine = () => {
-		const spinner = palette.cyan(spinnerFrameAt(now() - rebuildStartedAt, SPIN_MS));
+		const spinner = palette.cyan((0, _moku_labs_common_cli.spinnerFrameAt)(now() - rebuildStartedAt, SPIN_MS));
 		const elapsed = palette.dim(`· ${((now() - rebuildStartedAt) / 1e3).toFixed(1)}s`);
-		writeRaw(`\r${CLEAR_LINE}  ${spinner} rebuilding ${rebuildLabel} ${elapsed}`);
+		writeRaw(`\r${_moku_labs_common_cli.CLEAR_LINE}  ${spinner} rebuilding ${rebuildLabel} ${elapsed}`);
 	};
 	/**
 	* Repaint the persistent in-place `◍ live` idle pulse beneath the serve panel — the
@@ -8556,7 +8262,7 @@ function createPanelRenderer(options = {}) {
 	* paintIdleLine();
 	*/
 	const paintIdleLine = () => {
-		writeRaw(`\r${CLEAR_LINE}  ${Math.floor((now() - idleStartedAt) / 450) % 2 === 0 ? palette.pink(g.liveOn) : palette.dim(g.liveOff)} ${palette.dim("live · waiting for changes…")}`);
+		writeRaw(`\r${_moku_labs_common_cli.CLEAR_LINE}  ${Math.floor((now() - idleStartedAt) / 450) % 2 === 0 ? palette.pink(g.liveOn) : palette.dim(g.liveOff)} ${palette.dim("live · waiting for changes…")}`);
 	};
 	/**
 	* Advance whichever live region is active by one frame (driven by the shared ticker).
@@ -8683,9 +8389,9 @@ function createPanelRenderer(options = {}) {
 		built(summary) {
 			if (rebuilding) return;
 			if (color && phaseOpen) {
-				let frame = cursorUp(phaseDrawn);
-				for (const row of phaseRows) frame += `${CLEAR_LINE}${renderPhaseRow(row)}\n`;
-				writeRaw(frame + CLEAR_BELOW);
+				let frame = (0, _moku_labs_common_cli.cursorUp)(phaseDrawn);
+				for (const row of phaseRows) frame += `${_moku_labs_common_cli.CLEAR_LINE}${renderPhaseRow(row)}\n`;
+				writeRaw(frame + _moku_labs_common_cli.CLEAR_BELOW);
 			}
 			const phaseDurations = phaseRows.map((row) => row.durationMs).filter((value) => value !== void 0);
 			phaseOpen = false;
@@ -8700,7 +8406,7 @@ function createPanelRenderer(options = {}) {
 				const rateLabel = palette.dim(`${rate} pages/s`);
 				lines.push(railLine(spark, rateLabel, BOX_INNER));
 			}
-			writeBlock(box(lines, color, BOX_INNER));
+			writeBlock((0, _moku_labs_common_cli.box)(lines, color, BOX_INNER));
 		},
 		/**
 		* Render the server-ready rail (Local / Network URLs + watched dirs) and, on a TTY,
@@ -8714,7 +8420,7 @@ function createPanelRenderer(options = {}) {
 			const network = info.network ? palette.cyan(info.network) : palette.dim("unavailable");
 			const lines = [`${palette.green("➜")} ${palette.bold("Local")}    ${palette.cyan(info.local)}`, `${palette.green("➜")} ${palette.bold("Network")}  ${network}`];
 			if (info.watching && info.watching.length > 0) lines.push(`${palette.dim("watching")}   ${palette.dim(info.watching.join(", "))}`);
-			writeBlock(box(lines, color, BOX_INNER));
+			writeBlock((0, _moku_labs_common_cli.box)(lines, color, BOX_INNER));
 			if (color) {
 				serveMode = true;
 				idle = true;
@@ -8760,7 +8466,7 @@ function createPanelRenderer(options = {}) {
 			rebuilding = false;
 			const line = `  ${palette.green("✓")} rebuilt ${palette.bold(String(info.pageCount))} pages ${palette.dim(`· ${info.durationMs}ms · reloaded`)}`;
 			if (settledRebuild && color) {
-				writeRaw(`\r${CLEAR_LINE}${line}\n`);
+				writeRaw(`\r${_moku_labs_common_cli.CLEAR_LINE}${line}\n`);
 				resumeIdle();
 				return;
 			}
@@ -8785,7 +8491,7 @@ function createPanelRenderer(options = {}) {
 				const id = result.deploymentId ? ` ${dot} ${palette.dim(result.deploymentId)}` : "";
 				lines.push(`${palette.dim("→")} ${palette.cyan(result.url)}${id}`);
 			} else if (result.deploymentId) lines.push(palette.dim(`id ${result.deploymentId}`));
-			writeBlock(box(lines, color, BOX_INNER));
+			writeBlock((0, _moku_labs_common_cli.box)(lines, color, BOX_INNER));
 		},
 		/**
 		* Render a neutral informational line.
@@ -8822,7 +8528,7 @@ function createPanelRenderer(options = {}) {
 			const wasRebuilding = rebuilding;
 			if (rebuilding) {
 				rebuilding = false;
-				if (color) writeRaw(`\r${CLEAR_LINE}`);
+				if (color) writeRaw(`\r${_moku_labs_common_cli.CLEAR_LINE}`);
 			}
 			writeError(`  ${palette.red("✗")} ${message}`);
 			if (cause !== void 0) writeError(String(cause));
@@ -8883,9 +8589,9 @@ const YES_PATTERN = /^y(es)?$/i;
 /** Prompt rail width — matches the renderer's `RAIL_WIDTH` so the hint aligns with other rows. */
 const PROMPT_WIDTH = 66;
 /** Whether the interactive prompts render with the MOKU marker styling (color/TTY only). */
-const PROMPT_COLOR = supportsColor();
+const PROMPT_COLOR = (0, _moku_labs_common_cli.supportsColor)();
 /** Shared palette for the interactive prompts (same brand colors as the Panel renderer). */
-const PROMPT_PALETTE = makePalette(PROMPT_COLOR, PROMPT_COLOR && supportsTruecolor());
+const PROMPT_PALETTE = (0, _moku_labs_common_cli.makePalette)(PROMPT_COLOR, PROMPT_COLOR && (0, _moku_labs_common_cli.supportsTruecolor)());
 /**
 * Build the styled y/N confirm prompt: a brand `◆` marker + the question on the left,
 * a dim `y / N` hint + cyan `›` caret right-aligned to {@link PROMPT_WIDTH}. Falls back
@@ -8900,7 +8606,7 @@ function confirmPrompt(question) {
 	if (!PROMPT_COLOR) return `${question} [y/N] `;
 	const left = `  ${PROMPT_PALETTE.pink("◆")} ${question}`;
 	const right = `${PROMPT_PALETTE.dim("y / N")} ${PROMPT_PALETTE.cyan("›")} `;
-	const gap = Math.max(1, PROMPT_WIDTH - visibleWidth(left) - visibleWidth(right));
+	const gap = Math.max(1, PROMPT_WIDTH - (0, _moku_labs_common_cli.visibleWidth)(left) - (0, _moku_labs_common_cli.visibleWidth)(right));
 	return `${left}${" ".repeat(gap)}${right}`;
 }
 /**

package/dist/index.mjs

@@ -13,6 +13,7 @@ import { renderToString } from "preact-render-to-string";
 import { execFileSync } from "node:child_process";
 import { createInterface } from "node:readline";
 import { fileURLToPath, fileURLToPath as urlToPath } from "node:url";
+import { CLEAR_BELOW, CLEAR_LINE, box, cursorUp, makePalette, spinnerFrameAt, supportsColor, supportsTruecolor, visibleWidth } from "@moku-labs/common/cli";
 import minproc from "node:process";
 import matter from "gray-matter";
 import rehypeShiki from "@shikijs/rehype";
@@ -8022,312 +8023,17 @@ function networkUrl(port, source = networkInterfaces) {
 	return ip === null ? null : `http://${ip}:${port}`;
 }
 //#endregion
-//#region src/plugins/cli/render/ansi.ts
-/**
-* @file cli plugin — TTY/NO_COLOR-aware ANSI color + box-drawing helpers shared by
-* the Panel renderer. Modeled on the legacy `scripts/_log.ts`: color and box glyphs
-* are emitted only on a real TTY with `NO_COLOR` unset; otherwise plain ASCII so
-* CI logs and pipes stay readable.
-*/
-/** The ANSI escape byte (ESC, `0x1b`), built so no literal control char is in source. */
-const ESC = String.fromCodePoint(27);
-/** ANSI SGR codes used by the Panel renderer (each prefixed with the ESC byte). */
-const ANSI = {
-	reset: `${ESC}[0m`,
-	bold: `${ESC}[1m`,
-	dim: `${ESC}[2m`,
-	red: `${ESC}[31m`,
-	green: `${ESC}[32m`,
-	yellow: `${ESC}[33m`,
-	blue: `${ESC}[34m`,
-	magenta: `${ESC}[35m`,
-	cyan: `${ESC}[36m`,
-	gray: `${ESC}[90m`
-};
-/**
-* The Moku brand pink (`#FF1E6F`) as an RGB triple, used for 24-bit truecolor output.
-* Degrades to {@link ANSI.magenta} on a 16-color TTY and to plain text off a TTY.
-*/
-const BRAND_PINK = {
-	r: 255,
-	g: 30,
-	b: 111
-};
-/**
-* Build a 24-bit (truecolor) SGR foreground escape for the given RGB triple.
-*
-* @param r - Red channel (0–255).
-* @param g - Green channel (0–255).
-* @param b - Blue channel (0–255).
-* @returns The `ESC[38;2;r;g;bm` foreground sequence.
-* @example
-* fg24(255, 30, 111); // "\x1b[38;2;255;30;111m"
-*/
-function fg24(r, g, b) {
-	return `${ESC}[38;2;${r};${g};${b}m`;
-}
-/** ANSI: erase the entire current line, leaving the cursor where it is. */
-const CLEAR_LINE = `${ESC}[2K`;
-/** ANSI: erase from the cursor to the end of the screen (drops stale trailing rows). */
-const CLEAR_BELOW = `${ESC}[0J`;
-/**
-* Braille spinner frames for live "working…" indicators on a TTY (advance one per tick).
-* Off a TTY the Panel never animates, so this is unused in plain/CI output.
-*/
-const SPINNER_FRAMES = [
-	"⠋",
-	"⠙",
-	"⠹",
-	"⠸",
-	"⠼",
-	"⠴",
-	"⠦",
-	"⠧",
-	"⠇",
-	"⠏"
-];
-/**
-* The ANSI sequence to move the cursor up `n` lines (empty string for `n <= 0`). The
-* Panel uses it to repaint a live block in place — move up over the previous draw, then
-* rewrite each row — so progress updates a fixed region instead of scrolling new lines.
-*
-* @param n - Number of lines to move the cursor up.
-* @returns The cursor-up escape sequence, or `""` when `n <= 0`.
-* @example
-* cursorUp(3); // "\x1b[3A"
-*/
-function cursorUp(n) {
-	return n > 0 ? `${ESC}[${n}A` : "";
-}
-/** Unicode rounded box glyphs used when output is a color-capable TTY. */
-const UNICODE_BOX = {
-	topLeft: "╭",
-	topRight: "╮",
-	bottomLeft: "╰",
-	bottomRight: "╯",
-	horizontal: "─",
-	vertical: "│"
-};
-/** ASCII box glyphs used when output is piped/CI (plain mode). */
-const ASCII_BOX = {
-	topLeft: "+",
-	topRight: "+",
-	bottomLeft: "+",
-	bottomRight: "+",
-	horizontal: "-",
-	vertical: "|"
-};
-/**
-* Matches every ANSI SGR escape sequence (used to measure visible width). Built from
-* the {@link ESC} byte so no literal control character appears in the source regex.
-*/
-const ANSI_PATTERN = new RegExp(String.raw`${ESC}\[[0-9;]*m`, "g");
-/**
-* Whether ANSI color/box glyphs should be emitted: a TTY stream with `NO_COLOR`
-* unset. Reads `process.stdout.isTTY` and `process.env.NO_COLOR` by default so the
-* renderer auto-degrades in CI and pipes, exactly like the legacy logger.
-*
-* @param stream - Stream to probe for `isTTY` (defaults to `process.stdout`).
-* @param noColor - The `NO_COLOR` value (defaults to `process.env.NO_COLOR`).
-* @returns `true` when color should be used.
-* @example
-* supportsColor(); // true in an interactive terminal
-*/
-function supportsColor(stream = process.stdout, noColor = process.env.NO_COLOR) {
-	return stream.isTTY === true && noColor === void 0;
-}
-/**
-* Whether the terminal advertises 24-bit (truecolor) support via `COLORTERM`, so the
-* renderer may emit the exact brand pink ({@link BRAND_PINK}) instead of the 16-color
-* `magenta` approximation. Always layered on top of {@link supportsColor} — truecolor
-* is never used when color itself is disabled.
-*
-* @param colorTerm - The `COLORTERM` value (defaults to `process.env.COLORTERM`).
-* @returns `true` when `COLORTERM` is `truecolor` or `24bit`.
-* @example
-* supportsTruecolor("truecolor"); // true
-*/
-function supportsTruecolor(colorTerm = process.env.COLORTERM) {
-	return colorTerm === "truecolor" || colorTerm === "24bit";
-}
-/**
-* The braille spinner glyph for a given elapsed time, advancing one frame per
-* `frameMs`. Deriving the frame from wall-clock elapsed (rather than a tick counter)
-* keeps the spinner correct even when the animation ticker is briefly starved by a
-* synchronous build phase and several ticks coalesce — the glyph still reflects real
-* elapsed time instead of freezing on a stale frame.
-*
-* @param elapsedMs - Milliseconds since the live region opened.
-* @param frameMs - Milliseconds per frame (defaults to `80`).
-* @returns The active spinner glyph.
-* @example
-* spinnerFrameAt(240); // "⠹" (the 4th frame at 80ms/frame)
-*/
-function spinnerFrameAt(elapsedMs, frameMs = 80) {
-	return SPINNER_FRAMES[Math.floor(Math.max(0, elapsedMs) / frameMs) % SPINNER_FRAMES.length] ?? "⠋";
-}
-/**
-* Select the box glyph set for the given color mode (Unicode on a TTY, ASCII off it).
-*
-* @param color - Whether color/Unicode output is enabled.
-* @returns The matching {@link BoxGlyphs} set.
-* @example
-* const glyphs = boxGlyphs(supportsColor());
-*/
-function boxGlyphs(color) {
-	return color ? UNICODE_BOX : ASCII_BOX;
-}
-/**
-* The visible width of a string, ignoring any ANSI escape sequences it contains.
-*
-* @param text - The (possibly colorized) text to measure.
-* @returns The number of visible characters.
-* @example
-* visibleWidth(`${ANSI.red}hi${ANSI.reset}`); // 2
-*/
-function visibleWidth(text) {
-	return text.replaceAll(ANSI_PATTERN, "").length;
-}
-/**
-* Build a {@link Palette} bound to a fixed color mode. When `color` is `false` every
-* helper returns its input unchanged, so the same render code path produces plain
-* output in CI/pipes.
-*
-* @param color - Whether color is enabled (typically `supportsColor()`).
-* @param truecolor - Whether 24-bit output is enabled (typically `supportsTruecolor()`);
-*   only consulted by {@link Palette.pink}. Defaults to `false` (16-color magenta).
-* @returns The bound color palette.
-* @example
-* const palette = makePalette(supportsColor(), supportsTruecolor());
-* const line = palette.green("done");
-*/
-function makePalette(color, truecolor = false) {
-	return {
-		enabled: color,
-		/**
-		* Wrap text in the given ANSI code (returns it unchanged when color is off).
-		*
-		* @param code - The ANSI SGR code to apply.
-		* @param text - The text to colorize.
-		* @returns The colorized (or unchanged) text.
-		* @example
-		* palette.paint(ANSI.green, "ok");
-		*/
-		paint(code, text) {
-			return color ? `${code}${text}${ANSI.reset}` : text;
-		},
-		/**
-		* Bold the given text (no-op in plain mode).
-		*
-		* @param text - The text to embolden.
-		* @returns The bold (or unchanged) text.
-		* @example
-		* palette.bold("title");
-		*/
-		bold(text) {
-			return this.paint(ANSI.bold, text);
-		},
-		/**
-		* Dim the given text (no-op in plain mode).
-		*
-		* @param text - The text to dim.
-		* @returns The dim (or unchanged) text.
-		* @example
-		* palette.dim("· 84ms");
-		*/
-		dim(text) {
-			return this.paint(ANSI.dim, text);
-		},
-		/**
-		* Color the given text green (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The green (or unchanged) text.
-		* @example
-		* palette.green("✓");
-		*/
-		green(text) {
-			return this.paint(ANSI.green, text);
-		},
-		/**
-		* Color the given text yellow (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The yellow (or unchanged) text.
-		* @example
-		* palette.yellow("~");
-		*/
-		yellow(text) {
-			return this.paint(ANSI.yellow, text);
-		},
-		/**
-		* Color the given text red (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The red (or unchanged) text.
-		* @example
-		* palette.red("✗");
-		*/
-		red(text) {
-			return this.paint(ANSI.red, text);
-		},
-		/**
-		* Color the given text cyan (no-op in plain mode).
-		*
-		* @param text - The text to colorize.
-		* @returns The cyan (or unchanged) text.
-		* @example
-		* palette.cyan("http://localhost:4173");
-		*/
-		cyan(text) {
-			return this.paint(ANSI.cyan, text);
-		},
-		/**
-		* Color the given text the Moku brand pink: exact `#FF1E6F` (24-bit) when truecolor
-		* is enabled, the 16-color `magenta` approximation otherwise, unchanged in plain mode.
-		*
-		* @param text - The text to colorize.
-		* @returns The pink (or unchanged) text.
-		* @example
-		* palette.pink("▟▙ moku web");
-		*/
-		pink(text) {
-			if (!color) return text;
-			if (truecolor) return `${fg24(BRAND_PINK.r, BRAND_PINK.g, BRAND_PINK.b)}${text}${ANSI.reset}`;
-			return this.paint(ANSI.magenta, text);
-		}
-	};
-}
+//#region src/plugins/cli/render/panel.ts
 /**
-* Frame a list of already-rendered content lines in a box, padding each line to the
-* widest visible line (or `minInnerWidth`, whichever is larger — so several boxes can be
-* forced to a shared width). Uses Unicode borders when `color` is enabled and ASCII
-* otherwise. Visible width ignores embedded ANSI so colored lines align.
-*
-* @param lines - The content lines (may contain ANSI color codes).
-* @param color - Whether to use Unicode borders (and assume color-capable output).
-* @param minInnerWidth - Minimum inner (content) width to pad every row to. Defaults to `0`.
-* @returns The boxed lines (top border, content rows, bottom border).
-* @example
-* box(["Local:   http://localhost:4173"], true, 62);
+* @file cli plugin — the Panel renderer (the "Velocity Lockup" CLI identity). Produces
+* the `▟▙ moku web` lockup + version/runtime banner, the live phase tree with an
+* animated indeterminate build bar, the BUILD summary + throughput sparkline, the
+* server-ready rail with a persistent breathing `◍ live` idle pulse, the compact
+* rebuild line, the deploy result, and diagnostic heading/check rows. TTY/`NO_COLOR`-
+* aware via {@link makePalette} (24-bit brand pink when truecolor is available, the
+* 16-color magenta approximation otherwise, plain text off a TTY); every line is
+* written through an injectable sink so tests can capture it.
 */
-function box(lines, color, minInnerWidth = 0) {
-	const glyphs = boxGlyphs(color);
-	const inner = Math.max(0, minInnerWidth, ...lines.map((line) => visibleWidth(line)));
-	const horizontal = glyphs.horizontal.repeat(inner + 2);
-	const top = `${glyphs.topLeft}${horizontal}${glyphs.topRight}`;
-	const bottom = `${glyphs.bottomLeft}${horizontal}${glyphs.bottomRight}`;
-	return [
-		top,
-		...lines.map((line) => {
-			const pad = " ".repeat(inner - visibleWidth(line));
-			return `${glyphs.vertical} ${line}${pad} ${glyphs.vertical}`;
-		}),
-		bottom
-	];
-}
-//#endregion
-//#region src/plugins/cli/render/panel.ts
 /** Per-command label shown beside the lockup wordmark. */
 const COMMAND_LABEL = {
 	build: "build",

package/package.json

@@ -58,7 +58,7 @@
     "bun": ">=1.3.14"
   },
   "dependencies": {
-    "@moku-labs/common": "0.1.1",
+    "@moku-labs/common": "0.2.0",
     "@moku-labs/core": "0.1.4",
     "@resvg/resvg-js": "2.6.2",
     "@shikijs/rehype": "3.22.0",
@@ -126,5 +126,5 @@
     "test:build-e2e": "bun test src/plugins/build/__tests__/e2e/",
     "test:coverage": "vitest run --project unit --project integration --coverage"
   },
-  "version": "1.12.4"
+  "version": "1.13.0"
 }