@vertaaux/cli 0.4.0 → 0.5.1

package/dist/ui/banner.js

@@ -3,10 +3,17 @@
  *
  * Displays a compact arrow wedge in teal/mint gradient.
  * Can be suppressed via --quiet, --no-banner, or non-TTY environments.
+ *
+ * animateBanner() plays a 3-frame entrance animation in TTY+color mode:
+ *   Frame 1: dim ghost outline (75ms)
+ *   Frame 2: normal teal/mint colors (75ms)
+ *   Frame 3: full lime→cyan gradient (100ms hold)
+ * Falls back to static showBanner() when --no-color, NO_COLOR, TERM=dumb,
+ * or non-TTY.
  */
-import chalk from "chalk";
+import { colorize, bold, dim, applyGradient, isColorEnabled, isTTY, supportsUnicode, cursor, screen, physicalRows, } from "@vertaaux/tui";
 import { createRequire } from "module";
-import { isTTY, shouldUseColor } from "../utils/detect-env.js";
+import { shouldUseColor } from "../utils/detect-env.js";
 // For JSON imports in ESM
 const require = createRequire(import.meta.url);
 // Arrow-mark ASCII art (compact 5-line wedge matching brand)
@@ -19,6 +26,90 @@ const ARROW_MARK = [
 ];
 const TEAL = "#5EE4C4";
 const MINT = "#90EECE";
+/** Simple sleep helper for animation timing */
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+// ── Frame builders (exported for testability) ────────────────────
+/**
+ * Frame 1: ghost/dim outline — all lines wrapped in dim().
+ * Structure: 5 content lines + "\n\n"
+ */
+export function buildFrame1(version, cwd) {
+    const lines = [
+        `${dim(ARROW_MARK[0])}  ${dim(`VertaaUX v${version}`)}`,
+        `${dim(ARROW_MARK[1])}  ${dim(cwd)}`,
+        `${dim(ARROW_MARK[2])}`,
+        `${dim(ARROW_MARK[3])}`,
+        `${dim(ARROW_MARK[4])}`,
+    ];
+    return lines.join("\n") + "\n\n";
+}
+/**
+ * Frame 2: normal colors — identical to current showBanner() color branch.
+ * TEAL art, MINT bold VertaaUX, dim cwd.
+ * Structure: 5 content lines + "\n\n"
+ */
+export function buildFrame2(version, cwd) {
+    const logo = ARROW_MARK.map((line) => colorize(line, TEAL));
+    const lines = [
+        `${logo[0]}  ${bold(colorize("VertaaUX", MINT))} v${version}`,
+        `${logo[1]}  ${dim(cwd)}`,
+        `${logo[2]}`,
+        `${logo[3]}`,
+        `${logo[4]}`,
+    ];
+    return lines.join("\n") + "\n\n";
+}
+/**
+ * Frame 3: full gradient — ARROW_MARK + "VertaaUX" with applyGradient(), dim cwd.
+ * Structure: 5 content lines + "\n\n"
+ */
+export function buildFrame3(version, cwd) {
+    const logo = ARROW_MARK.map((line) => applyGradient(line));
+    const lines = [
+        `${logo[0]}  ${bold(applyGradient("VertaaUX"))} v${version}`,
+        `${logo[1]}  ${dim(cwd)}`,
+        `${logo[2]}`,
+        `${logo[3]}`,
+        `${logo[4]}`,
+    ];
+    return lines.join("\n") + "\n\n";
+}
+// ── Animated banner ──────────────────────────────────────────────
+/**
+ * Show the arrow-mark banner with a 3-frame entrance animation.
+ *
+ * Animation plays only in TTY + color + unicode environments.
+ * Falls back to static showBanner() otherwise.
+ *
+ * All output goes to process.stderr (stdout reserved for --format json).
+ *
+ * @param options - Banner display options
+ */
+export async function animateBanner(options) {
+    const { version, quiet = false, noBanner = false } = options;
+    // Static fallback: suppressed modes, non-TTY, no-color, dumb terminal
+    if (quiet || noBanner || !isTTY() || !isColorEnabled() || !supportsUnicode()) {
+        showBanner(options);
+        return;
+    }
+    const cwd = process.cwd();
+    const termWidth = process.stderr.columns || 80;
+    // Frame 1: dim ghost
+    const f1 = buildFrame1(version, cwd);
+    process.stderr.write(f1);
+    await sleep(75);
+    // Frame 2: normal colors (overwrite in-place)
+    const rows1 = physicalRows(f1, termWidth);
+    const f2 = buildFrame2(version, cwd);
+    process.stderr.write(cursor.up(rows1) + screen.clearDown + f2);
+    await sleep(75);
+    // Frame 3: full gradient (overwrite in-place, hold 100ms)
+    const rows2 = physicalRows(f2, termWidth);
+    const f3 = buildFrame3(version, cwd);
+    process.stderr.write(cursor.up(rows2) + screen.clearDown + f3);
+    await sleep(100);
+}
+// ── Static banner ────────────────────────────────────────────────
 /**
  * Show the arrow-mark banner with version and working directory.
  *
@@ -38,10 +129,10 @@ export function showBanner(options) {
     const useColor = shouldUseColor();
     const cwd = process.cwd();
     if (useColor) {
-        const logo = ARROW_MARK.map((line) => chalk.hex(TEAL)(line));
+        const logo = ARROW_MARK.map((line) => colorize(line, TEAL));
         const lines = [
-            `${logo[0]}  ${chalk.hex(MINT).bold("VertaaUX")} v${version}`,
-            `${logo[1]}  ${chalk.dim(cwd)}`,
+            `${logo[0]}  ${bold(colorize("VertaaUX", MINT))} v${version}`,
+            `${logo[1]}  ${dim(cwd)}`,
             `${logo[2]}`,
             `${logo[3]}`,
             `${logo[4]}`,
@@ -59,6 +150,7 @@ export function showBanner(options) {
         process.stderr.write(lines.join("\n") + "\n\n");
     }
 }
+// ── Version helper ───────────────────────────────────────────────
 /**
  * Get version from package.json.
  * Falls back to "0.0.0" if unable to read.

package/dist/ui/diagnostics.d.ts

@@ -6,6 +6,9 @@
  *
  * Integrates with Commander's configureOutput({ outputError }) hook
  * to intercept and restyle all validation and argument errors.
+ *
+ * Delegates to renderError/renderWarning from @vertaaux/tui for
+ * consistent branded output across all error surfaces.
  */
 export interface ValidationErrorOptions {
     flag: string;
@@ -19,8 +22,10 @@ export interface ValidationErrorOptions {
 /**
  * Format a validation error with branded styling.
  *
- * Rich mode (TTY + color): Box-drawn frame with Unicode chars, brand colors.
- * Plain mode (non-TTY/NO_COLOR/CI): Structured indented text, no decorations.
+ * Delegates to renderError() from @vertaaux/tui for the box border,
+ * then appends flag/value details as context lines.
+ *
+ * Plain mode is evaluated at call time (isPlainMode() inside renderError).
  */
 export declare function formatValidationError(opts: ValidationErrorOptions): string;
 /**
@@ -28,12 +33,12 @@ export declare function formatValidationError(opts: ValidationErrorOptions): str
  *
  * Commander passes raw error strings to configureOutput({ outputError }).
  * This function parses them to extract flag/value information and applies
- * branded formatting.
+ * branded formatting via renderError().
  *
  * InvalidArgumentError pattern:
  *   "error: option '--flag <arg>' argument 'value' is invalid. Detail"
  *
- * Other Commander errors (missing required, etc.) get branded prefix.
+ * Other Commander errors (missing required, etc.) get renderError treatment.
  */
 export declare function formatCommanderError(rawMessage: string): string;
 //# sourceMappingURL=diagnostics.d.ts.map

package/dist/ui/diagnostics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diagnostics.d.ts","sourceRoot":"","sources":["../../src/ui/diagnostics.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAoCH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,sBAAsB,GAAG,MAAM,CAK1E;AA8ED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CA+C/D"}
+{"version":3,"file":"diagnostics.d.ts","sourceRoot":"","sources":["../../src/ui/diagnostics.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AA8BH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,sBAAsB,GAAG,MAAM,CAgC1E;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAsC/D"}

package/dist/ui/diagnostics.js

@@ -6,96 +6,54 @@
  *
  * Integrates with Commander's configureOutput({ outputError }) hook
  * to intercept and restyle all validation and argument errors.
+ *
+ * Delegates to renderError/renderWarning from @vertaaux/tui for
+ * consistent branded output across all error surfaces.
  */
-import chalk from "chalk";
-import { shouldUseColor, isTTY, getTerminalWidth, } from "../utils/detect-env.js";
-// ---------------------------------------------------------------------------
-// Brand colors (matching banner.ts gradient)
-// ---------------------------------------------------------------------------
-const BRAND_ACCENT = "#78FFB4"; // Lime
-const ERROR_COLOR = "#FF6B6B"; // Red
-const HINT_COLOR = "#78FFB4"; // Brand lime for hints/suggestions
+import { dim, isPlainMode, renderError, } from "@vertaaux/tui";
 // ---------------------------------------------------------------------------
 // Terminal capability detection
 // ---------------------------------------------------------------------------
 /**
  * Determine if box-drawing characters and colors can be used.
- * Returns false for dumb terminals, NO_COLOR, non-TTY, and CI.
+ * Returns false in plain mode (ASCII-only output).
  */
 function canUseBoxDrawing() {
-    if (process.env.TERM === "dumb")
-        return false;
-    if (!shouldUseColor())
-        return false;
-    if (!isTTY())
-        return false;
-    return true;
+    return !isPlainMode();
 }
 /**
  * Format a validation error with branded styling.
  *
- * Rich mode (TTY + color): Box-drawn frame with Unicode chars, brand colors.
- * Plain mode (non-TTY/NO_COLOR/CI): Structured indented text, no decorations.
+ * Delegates to renderError() from @vertaaux/tui for the box border,
+ * then appends flag/value details as context lines.
+ *
+ * Plain mode is evaluated at call time (isPlainMode() inside renderError).
  */
 export function formatValidationError(opts) {
-    if (canUseBoxDrawing()) {
-        return boxDrawnError(opts);
-    }
-    return plainTextError(opts);
-}
-/**
- * Rich box-drawn error frame for TTY terminals with color support.
- */
-function boxDrawnError(opts) {
-    const width = Math.min(getTerminalWidth(), 72);
-    const prefix = chalk.hex(BRAND_ACCENT).bold("vertaa");
-    const border = chalk.dim("  " + "\u2500".repeat(width - 4));
-    const pipe = chalk.dim("  \u2502");
-    const lines = [
-        `${prefix} ${chalk.hex(ERROR_COLOR).bold("error")}: ${opts.message}`,
-        border,
-        `${pipe} ${chalk.dim("flag:")} --${opts.flag}`,
-        `${pipe} ${chalk.dim("value:")} ${chalk.yellow(opts.value)}`,
+    // Build a rich context string with flag + value details
+    const contextParts = [
+        `flag: --${opts.flag}`,
+        `value: ${opts.value}`,
     ];
     if (opts.suggestion) {
-        lines.push(pipe);
-        lines.push(`${pipe} ${chalk.hex(HINT_COLOR)("hint:")} Did you mean "${opts.suggestion}"?`);
+        contextParts.push(`hint: Did you mean "${opts.suggestion}"?`);
     }
     if (opts.validValues && opts.validValues.length > 0) {
-        lines.push(`${pipe} ${chalk.dim("valid:")} ${chalk.dim(opts.validValues.join(", "))}`);
+        contextParts.push(`valid: ${opts.validValues.join(", ")}`);
     }
     if (opts.hint) {
-        lines.push(pipe);
-        lines.push(`${pipe} ${chalk.dim(opts.hint)}`);
+        contextParts.push(opts.hint);
     }
-    lines.push(border);
+    const context = contextParts.join("\n");
+    const base = renderError({
+        message: opts.message,
+        context,
+        suggestion: "vertaa <command> --help for all options",
+    });
     if (opts.moreIssues && opts.moreIssues > 0) {
-        lines.push(chalk.dim(`  ...and ${opts.moreIssues} more issues`));
+        return base + "\n" + dim(`  ...and ${opts.moreIssues} more issues`);
     }
-    return lines.join("\n");
-}
-/**
- * Plain text error for non-TTY, NO_COLOR, CI, or TERM=dumb environments.
- */
-function plainTextError(opts) {
-    const lines = [
-        `error: ${opts.message}`,
-        `  flag: --${opts.flag}`,
-        `  value: ${opts.value}`,
-    ];
-    if (opts.suggestion) {
-        lines.push(`  hint: Did you mean "${opts.suggestion}"?`);
-    }
-    if (opts.validValues && opts.validValues.length > 0) {
-        lines.push(`  valid: ${opts.validValues.join(", ")}`);
-    }
-    if (opts.hint) {
-        lines.push(`  ${opts.hint}`);
-    }
-    if (opts.moreIssues && opts.moreIssues > 0) {
-        lines.push(`  ...and ${opts.moreIssues} more issues`);
-    }
-    return lines.join("\n");
+    return base;
 }
 // ---------------------------------------------------------------------------
 // Commander error formatting
@@ -105,12 +63,12 @@ function plainTextError(opts) {
  *
  * Commander passes raw error strings to configureOutput({ outputError }).
  * This function parses them to extract flag/value information and applies
- * branded formatting.
+ * branded formatting via renderError().
  *
  * InvalidArgumentError pattern:
  *   "error: option '--flag <arg>' argument 'value' is invalid. Detail"
  *
- * Other Commander errors (missing required, etc.) get branded prefix.
+ * Other Commander errors (missing required, etc.) get renderError treatment.
  */
 export function formatCommanderError(rawMessage) {
     // Strip leading "error: " prefix that Commander adds
@@ -137,17 +95,9 @@ export function formatCommanderError(rawMessage) {
             hint: "Run vertaa <command> --help for all options",
         });
     }
-    // For other Commander errors: branded prefix with help hint
-    if (canUseBoxDrawing()) {
-        const prefix = chalk.hex(BRAND_ACCENT).bold("vertaa");
-        const errorLabel = chalk.hex(ERROR_COLOR).bold("error");
-        return [
-            `${prefix} ${errorLabel}: ${msg}`,
-            chalk.dim("  Run vertaa <command> --help for all options"),
-        ].join("\n");
-    }
-    return [
-        `vertaa error: ${msg}`,
-        "  Run vertaa <command> --help for all options",
-    ].join("\n");
+    // For other Commander errors: use renderError with a help suggestion
+    return renderError({
+        message: msg,
+        suggestion: "vertaa <command> --help for all options",
+    });
 }