@fecommunity/reactpress 4.0.0-beta.1 → 4.0.0-beta.10

package/out/ui/interactive.js

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-nocheck
-const fs = require('fs');
-const path = require('path');
 const inquirer = require('inquirer');
 const ora = require('ora');
 const open = require('open');
-const { printBanner } = require('./banner');
-const { brand, icon, label, ok, fail, sectionHeader, statusPill, padRight, } = require('./theme');
+const { refreshBannerWithStartup } = require('./banner-startup');
+const { brand, label, ok, fail, padRight, visibleLength, } = require('./theme');
 const { ensureOriginalCwd } = require('../lib/root');
 const { describeProject } = require('../lib/project-type');
 const { hasResolvableActiveTheme } = require('../lib/theme-runtime');
@@ -21,50 +19,69 @@ const { printUnifiedStatus } = require('../lib/status');
 const { runDoctor } = require('../lib/doctor');
 const { runDbBackup } = require('../lib/db-backup');
 const { runBuild, TARGETS } = require('../lib/build');
-const { loadClientSiteUrl, loadServerSiteUrl, isHttpResponding } = require('../lib/http');
-const { isDockerRunning } = require('../lib/docker');
+const { loadClientSiteUrl } = require('../lib/http');
 const { t } = require('../lib/i18n');
+const GROUP_PREFIX = '__group:';
 function menuSection(title) {
-    return new inquirer.Separator(sectionHeader(title));
+    return new inquirer.Separator(`  ${brand.border('──')} ${brand.dim(String(title).toUpperCase())}`);
 }
 function formatChoice(key, text, hint) {
-    const keyCol = key ? brand.primary(padRight(key, 2)) : '   ';
+    const keyCol = key ? brand.primary(`${key}.`) : '   ';
     const hintPart = hint ? brand.dim(`  ${hint}`) : '';
-    return `${keyCol}  ${text}${hintPart}`;
+    return `${keyCol} ${text}${hintPart}`;
 }
-function assignShortcuts(items) {
-    let n = 0;
+function choice(labelKey, value, hintKey) {
+    return {
+        _label: t(labelKey),
+        _hint: hintKey ? t(hintKey) : '',
+        value,
+    };
+}
+function toInquirerChoices(items, { start = 1, alignHints = true } = {}) {
+    const actionable = items.filter((item) => item._label);
+    const labelWidth = alignHints
+        ? Math.min(Math.max(...actionable.map((item) => visibleLength(item._label)), 0), 34)
+        : 0;
+    let n = start - 1;
     return items.map((item) => {
-        if (item instanceof inquirer.Separator || item.type === 'separator') {
+        if (item instanceof inquirer.Separator) {
             return item;
         }
+        const shortLabel = item._short || stripAnsi(item._label || item.name || item.value);
+        if (item.noShortcut) {
+            return {
+                name: item._label,
+                value: item.value,
+                short: shortLabel,
+            };
+        }
         n += 1;
         const key = n <= 9 ? String(n) : '';
+        const labelText = labelWidth ? padRight(item._label, labelWidth) : item._label;
         return {
-            ...item,
-            name: formatChoice(key, item._label || item.name, item._hint),
-            short: item.value,
+            name: formatChoice(key, labelText, item._hint),
+            value: item.value,
+            short: shortLabel,
         };
     });
 }
-function choice(labelKey, value, hintKey) {
-    return {
-        _label: t(labelKey),
-        _hint: hintKey ? t(hintKey) : '',
-        value,
-    };
+function stripAnsi(text) {
+    return String(text || '').replace(/\u001b\[[0-9;]*m/g, '');
 }
-function getMenuActions(project) {
+function buildMenuGroups(project) {
     const standalone = project.type === 'standalone';
     const monorepo = project.type === 'monorepo';
     const showTheme = hasResolvableActiveTheme(project.root);
-    const items = [
-        menuSection(t('menu.section.run')),
-        choice('menu.dev', 'dev', 'menu.hint.dev'),
-        choice('menu.init', 'init', 'menu.hint.init'),
-        choice('menu.status', 'status', 'menu.hint.status'),
-        choice('menu.doctor', 'doctor', 'menu.hint.doctor'),
-    ];
+    const run = {
+        key: 'run',
+        title: t('menu.section.run'),
+        items: [
+            choice('menu.dev', 'dev', 'menu.hint.dev'),
+            choice('menu.init', 'init', 'menu.hint.init'),
+            choice('menu.status', 'status', 'menu.hint.status'),
+            choice('menu.doctor', 'doctor', 'menu.hint.doctor'),
+        ],
+    };
     const extendItems = [];
     if (project.hasDesktop) {
         extendItems.push(choice('menu.devDesktop', 'dev:desktop', 'menu.hint.devDesktop'));
@@ -78,105 +95,116 @@ function getMenuActions(project) {
     if (monorepo && project.hasPluginsWorkspace) {
         extendItems.push(choice('menu.pluginList', 'plugin:list', 'menu.hint.pluginList'));
     }
-    if (extendItems.length > 0) {
-        items.push(menuSection(t('menu.section.extend')), ...extendItems);
-    }
-    items.push(menuSection(t('menu.section.lifecycle')), choice('menu.devApi', 'dev:api', 'menu.hint.devApi'));
+    const lifecycleItems = [choice('menu.devApi', 'dev:api', 'menu.hint.devApi')];
     if (showTheme) {
-        items.push(choice('menu.devClient', 'dev:client', 'menu.hint.devClient'));
+        lifecycleItems.push(choice('menu.devClient', 'dev:client', 'menu.hint.devClient'));
     }
-    items.push(choice('menu.serverStart', 'server:start', 'menu.hint.serverStart'), choice('menu.serverStop', 'server:stop', 'menu.hint.serverStop'), choice('menu.serverRestart', 'server:restart', 'menu.hint.serverRestart'), menuSection(t('menu.section.build')), choice('menu.build', 'build', 'menu.hint.build'));
+    lifecycleItems.push(choice('menu.serverStart', 'server:start', 'menu.hint.serverStart'), choice('menu.serverStop', 'server:stop', 'menu.hint.serverStop'), choice('menu.serverRestart', 'server:restart', 'menu.hint.serverRestart'));
+    const buildItems = [choice('menu.build', 'build', 'menu.hint.build')];
     if (monorepo) {
-        items.push(choice('menu.dockerStart', 'docker:start', 'menu.hint.dockerStart'), choice('menu.dockerUp', 'docker:up', 'menu.hint.dockerUp'), choice('menu.dockerStop', 'docker:stop', 'menu.hint.dockerStop'));
+        buildItems.push(choice('menu.dockerStart', 'docker:start', 'menu.hint.dockerStart'), choice('menu.dockerUp', 'docker:up', 'menu.hint.dockerUp'), choice('menu.dockerStop', 'docker:stop', 'menu.hint.dockerStop'));
     }
     else if (standalone) {
-        items.push(choice('menu.dockerUp', 'docker:up', 'menu.hint.dockerUp'), choice('menu.dockerStop', 'docker:stop', 'menu.hint.dockerStop'));
+        buildItems.push(choice('menu.dockerUp', 'docker:up', 'menu.hint.dockerUp'), choice('menu.dockerStop', 'docker:stop', 'menu.hint.dockerStop'));
     }
-    items.push(menuSection(t('menu.section.tools')), choice('menu.nginxUp', 'nginx:up', 'menu.hint.nginxUp'), choice('menu.nginxOpen', 'nginx:open', 'menu.hint.nginxOpen'), choice('menu.nginxReload', 'nginx:reload', 'menu.hint.nginxReload'), choice('menu.dbBackup', 'db:backup', 'menu.hint.dbBackup'), choice('menu.openAdmin', 'open:admin', 'menu.hint.openAdmin'));
     if (monorepo) {
-        items.push(choice('menu.publish', 'publish', 'menu.hint.publish'));
+        buildItems.push(choice('menu.publish', 'publish', 'menu.hint.publish'));
+    }
+    const toolItems = [
+        choice('menu.nginxUp', 'nginx:up', 'menu.hint.nginxUp'),
+        choice('menu.nginxOpen', 'nginx:open', 'menu.hint.nginxOpen'),
+        choice('menu.nginxReload', 'nginx:reload', 'menu.hint.nginxReload'),
+        choice('menu.dbBackup', 'db:backup', 'menu.hint.dbBackup'),
+        choice('menu.openAdmin', 'open:admin', 'menu.hint.openAdmin'),
+    ];
+    const groups = [run];
+    if (extendItems.length > 0) {
+        groups.push({ key: 'extend', title: t('menu.section.extend'), items: extendItems });
     }
-    items.push(new inquirer.Separator(), choice('menu.exit', 'exit', 'menu.hint.exit'));
-    return assignShortcuts(items);
+    groups.push({ key: 'lifecycle', title: t('menu.section.lifecycle'), items: lifecycleItems }, { key: 'build', title: t('menu.section.build'), items: buildItems }, { key: 'tools', title: t('menu.section.tools'), items: toolItems });
+    return groups;
 }
-function parseEnvFile(projectRoot) {
-    const envPath = path.join(projectRoot, '.env');
-    const env = {};
-    try {
-        if (!fs.existsSync(envPath))
-            return env;
-        for (const line of fs.readFileSync(envPath, 'utf8').split('\n')) {
-            const m = line.match(/^([A-Z_]+)=(.*)$/);
-            if (m)
-                env[m[1]] = m[2].trim().replace(/^['"]|['"]$/g, '');
+function getTopLevelMenu(project) {
+    const groups = buildMenuGroups(project);
+    const runGroup = groups[0];
+    const subGroups = groups.slice(1);
+    const items = [menuSection(t('menu.section.quick')), ...runGroup.items];
+    if (subGroups.length > 0) {
+        items.push(menuSection(t('menu.section.explore')));
+        for (const group of subGroups) {
+            items.push({
+                _label: t(`menu.group.${group.key}`),
+                _hint: t(`menu.groupHint.${group.key}`),
+                value: `${GROUP_PREFIX}${group.key}`,
+            });
         }
     }
-    catch {
-        // ignore
-    }
-    return env;
+    items.push(new inquirer.Separator(), { _label: brand.dim(t('menu.exit')), value: 'exit', noShortcut: true });
+    return toInquirerChoices(items, { alignHints: false });
 }
-async function probeDatabase(projectRoot) {
-    try {
-        const mysql = require('mysql2/promise');
-        const env = parseEnvFile(projectRoot);
-        const conn = await mysql.createConnection({
-            host: env.DB_HOST || '127.0.0.1',
-            port: Number(env.DB_PORT || 3306),
-            user: env.DB_USER || 'reactpress',
-            password: env.DB_PASSWD || env.DB_PASSWORD || 'reactpress',
-            database: env.DB_DATABASE || 'reactpress',
-            connectTimeout: 2000,
-        });
-        await conn.ping();
-        await conn.end();
-        return true;
-    }
-    catch {
-        return false;
-    }
+function getSubMenu(group) {
+    const items = [
+        menuSection(group.title),
+        ...group.items,
+        new inquirer.Separator(),
+        { _label: brand.dim(`← ${t('menu.backToMain')}`), value: '__back', noShortcut: true },
+    ];
+    return toInquirerChoices(items);
 }
-async function fetchContextStatus(projectRoot) {
-    const apiUrl = loadServerSiteUrl(projectRoot);
-    const [apiOk, dockerOk, dbOk] = await Promise.all([
-        isHttpResponding(apiUrl, 1500),
-        Promise.resolve(isDockerRunning()),
-        probeDatabase(projectRoot),
-    ]);
-    return { apiOk, dbOk, dockerOk };
+function getMenuActions(project) {
+    const groups = buildMenuGroups(project);
+    const items = [];
+    for (const group of groups) {
+        items.push(menuSection(group.title), ...group.items);
+    }
+    items.push(new inquirer.Separator(), choice('menu.exit', 'exit'));
+    return toInquirerChoices(items);
 }
-function printStatusPanel(status) {
-    const on = { on: t('menu.statusOn'), off: t('menu.statusOff') };
-    const db = {
-        on: t('menu.statusReady'),
-        off: t('menu.statusNotReady'),
-        pending: t('menu.statusChecking'),
-    };
-    const docker = { on: t('menu.statusYes'), off: t('menu.statusNo') };
-    console.log(sectionHeader(t('menu.statusHeader')));
-    const rows = [
-        [t('menu.statusLabelApi'), statusPill(status.apiOk, on)],
-        [t('menu.statusLabelDb'), statusPill(status.dbOk, db)],
-        [t('menu.statusLabelDocker'), statusPill(status.dockerOk, docker)],
-    ];
-    for (const [name, pill] of rows) {
-        console.log(`  ${brand.muted(padRight(name, 10))}  ${pill}`);
+async function pickMenuAction(project) {
+    const groups = buildMenuGroups(project);
+    const groupMap = Object.fromEntries(groups.map((group) => [group.key, group]));
+    while (true) {
+        const { action } = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'action',
+                message: `${brand.primary('›')} ${t('menu.prompt')}`,
+                pageSize: 14,
+                loop: false,
+                choices: getTopLevelMenu(project),
+            },
+        ]);
+        if (!action || typeof action !== 'string') {
+            continue;
+        }
+        if (!action.startsWith(GROUP_PREFIX)) {
+            return action;
+        }
+        const groupKey = action.slice(GROUP_PREFIX.length);
+        const group = groupMap[groupKey];
+        if (!group) {
+            continue;
+        }
+        const { subAction } = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'subAction',
+                message: `${brand.primary('›')} ${t('menu.subPrompt', { section: group.title })}`,
+                pageSize: 14,
+                loop: false,
+                choices: getSubMenu(group),
+            },
+        ]);
+        if (subAction !== '__back') {
+            return subAction;
+        }
     }
-    console.log('');
 }
-async function printContextStatus(projectRoot) {
-    const spinner = ora({
-        text: brand.dim(t('menu.statusChecking')),
-        color: 'magenta',
-        spinner: 'dots',
-    }).start();
-    const status = await fetchContextStatus(projectRoot);
-    spinner.stop();
-    printStatusPanel(status);
-    return status;
+async function refreshInteractiveBanner(projectRoot, project, { animated = true } = {}) {
+    return refreshBannerWithStartup(projectRoot, project, { animated });
 }
 async function withSpinner(text, fn) {
-    const spinner = ora({ text, color: 'magenta', spinner: 'dots' }).start();
+    const spinner = ora({ text, color: 'gray', spinner: 'dots' }).start();
     try {
         const result = await fn();
         spinner.succeed();
@@ -327,22 +355,12 @@ async function runMenuAction(action, projectRoot, project) {
 async function runInteractiveLoop() {
     const projectRoot = ensureOriginalCwd();
     const project = describeProject(projectRoot);
-    printBanner({ projectRoot, project });
-    await printContextStatus(projectRoot);
+    await refreshInteractiveBanner(projectRoot, project, { animated: true });
     console.log(`  ${brand.dim(t('menu.shortcuts'))}`);
     console.log('');
     let loop = true;
     while (loop) {
-        const { action } = await inquirer.prompt([
-            {
-                type: 'list',
-                name: 'action',
-                message: `${brand.primary(t('menu.actionPrefix'))}  ${brand.dim('›')}`,
-                pageSize: 20,
-                loop: false,
-                choices: getMenuActions(project),
-            },
-        ]);
+        const action = await pickMenuAction(project);
         if (action === 'exit') {
             console.log(brand.muted(t('menu.goodbye')));
             break;
@@ -353,7 +371,7 @@ async function runInteractiveLoop() {
                 break;
             if (action !== 'status' && action !== 'doctor') {
                 console.log('');
-                await printContextStatus(projectRoot);
+                await refreshInteractiveBanner(projectRoot, project, { animated: false });
             }
         }
         catch (err) {
@@ -369,10 +387,16 @@ async function runInteractiveLoop() {
             loop = retry;
             if (loop) {
                 console.log('');
-                await printContextStatus(projectRoot);
+                await refreshInteractiveBanner(projectRoot, project, { animated: false });
             }
         }
     }
 }
-module.exports = { runInteractiveLoop, runMenuAction, getMenuActions };
+module.exports = {
+    runInteractiveLoop,
+    runMenuAction,
+    getMenuActions,
+    buildMenuGroups,
+    pickMenuAction,
+};
 //# sourceMappingURL=interactive.js.map

package/out/ui/startup-splash.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
+const chalk = require('chalk');
+const { brand, palette, visibleLength, gradientText } = require('./theme');
+const { TECH_LOGO, LOGO_GRADIENTS, LOGO_WIDTH } = require('./banner');
+const { t } = require('../lib/i18n');
+const DEFAULT_SPLASH_MS = 2500;
+const FRAME_MS = 45;
+const FADE_MS = 1400;
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const DIM_BASE = '#2A2A36';
+function hex2rgb(h) {
+    const s = h.replace('#', '');
+    return {
+        r: parseInt(s.substring(0, 2), 16),
+        g: parseInt(s.substring(2, 4), 16),
+        b: parseInt(s.substring(4, 6), 16),
+    };
+}
+function rgb2hex(r, g, b) {
+    const pad = (n) => n.toString(16).padStart(2, '0');
+    return `#${pad(r)}${pad(g)}${pad(b)}`;
+}
+function mixHex(a, b, ratio) {
+    const pa = hex2rgb(a);
+    const pb = hex2rgb(b);
+    const t = Math.max(0, Math.min(1, ratio));
+    return rgb2hex(Math.round(pa.r + (pb.r - pa.r) * t), Math.round(pa.g + (pb.g - pa.g) * t), Math.round(pa.b + (pb.b - pa.b) * t));
+}
+function sampleLineGradient(line, colors) {
+    const chars = [...String(line)];
+    const n = Math.max(chars.length - 1, 1);
+    return chars.map((ch, i) => {
+        if (ch === ' ')
+            return { ch, color: null };
+        const ratio = i / n;
+        const idx = ratio * (colors.length - 1);
+        const lo = Math.floor(idx);
+        const hi = Math.min(colors.length - 1, lo + 1);
+        const local = idx - lo;
+        return { ch, color: mixHex(colors[lo], colors[hi], local) };
+    });
+}
+function shiftedColors(colors, phase) {
+    if (colors.length < 2)
+        return colors;
+    const cycle = phase % 1;
+    const scaled = cycle * (colors.length - 1);
+    const lo = Math.floor(scaled);
+    const hi = Math.min(colors.length - 1, lo + 1);
+    const local = scaled - lo;
+    const shifted = colors.map((_, i) => {
+        const from = colors[(i + lo) % colors.length];
+        const to = colors[(i + lo + 1) % colors.length];
+        return mixHex(from, to, local);
+    });
+    return [shifted[0], shifted[Math.floor(shifted.length / 2)], shifted[shifted.length - 1]];
+}
+function charFadeRatio(colIndex, totalCols, globalFade) {
+    if (totalCols <= 1)
+        return globalFade;
+    const threshold = colIndex / (totalCols - 1);
+    const wave = 0.35;
+    return Math.max(0, Math.min(1, (globalFade - threshold * wave) / (1 - wave)));
+}
+function renderAnimatedLogoLine(line, lineColors, globalFade, gradientPhase) {
+    const animated = shiftedColors(lineColors, gradientPhase);
+    const samples = sampleLineGradient(line, animated);
+    const totalCols = samples.filter((s) => s.color).length || 1;
+    let col = 0;
+    return samples
+        .map(({ ch, color }) => {
+        if (!color)
+            return ch;
+        const fade = charFadeRatio(col, totalCols, globalFade);
+        col += 1;
+        const painted = mixHex(DIM_BASE, color, fade);
+        return chalk.hex(painted)(ch);
+    })
+        .join('');
+}
+function renderWordmarkFrame(globalFade, gradientPhase) {
+    const colors = shiftedColors([palette.pink, palette.primary, palette.accent], gradientPhase);
+    const text = gradientText('ReactPress', colors, { bold: true });
+    if (globalFade >= 0.999)
+        return text;
+    const dimmed = gradientText('ReactPress', [DIM_BASE, mixHex(DIM_BASE, palette.primary, 0.35)], {
+        bold: true,
+    });
+    return globalFade < 0.5
+        ? dimmed
+        : gradientText('ReactPress', [
+            mixHex(DIM_BASE, colors[0], globalFade),
+            mixHex(DIM_BASE, colors[1] || colors[0], globalFade),
+            mixHex(DIM_BASE, colors[2] || colors[1] || colors[0], globalFade),
+        ], { bold: true });
+}
+function centerPad(line, cols) {
+    const width = visibleLength(line);
+    const pad = Math.max(0, Math.floor((cols - width) / 2));
+    return ' '.repeat(pad) + line;
+}
+function shouldPlayStartupSplash() {
+    if (process.env.REACTPRESS_NO_SPLASH === '1')
+        return false;
+    if (process.env.CI === 'true' || process.env.CI === '1')
+        return false;
+    if (!process.stdout.isTTY)
+        return false;
+    if (process.env.TERM === 'dumb')
+        return false;
+    return true;
+}
+function splashDurationMs() {
+    const raw = Number(process.env.REACTPRESS_SPLASH_MS);
+    return Number.isFinite(raw) && raw > 0 ? raw : DEFAULT_SPLASH_MS;
+}
+function renderSplashFrame({ cols, rows, elapsedMs, frameIndex }) {
+    const globalFade = Math.min(1, elapsedMs / FADE_MS);
+    const gradientPhase = (elapsedMs / splashDurationMs()) * 0.85;
+    const useAscii = cols >= LOGO_WIDTH + 8;
+    const logoLines = useAscii
+        ? TECH_LOGO.map((line, i) => renderAnimatedLogoLine(line, LOGO_GRADIENTS[i], globalFade, gradientPhase))
+        : [renderWordmarkFrame(globalFade, gradientPhase)];
+    const spin = SPINNER[frameIndex % SPINNER.length];
+    const spinnerLine = brand.accent(spin) + brand.dim(' ') + brand.dim(t('splash.starting').trim());
+    const blockHeight = logoLines.length + 2;
+    const padTop = Math.max(0, Math.floor((rows - blockHeight) / 2));
+    const lines = [];
+    for (let i = 0; i < padTop; i += 1)
+        lines.push('');
+    for (const logoLine of logoLines)
+        lines.push(centerPad(logoLine, cols));
+    lines.push('');
+    lines.push(centerPad(spinnerLine, cols));
+    return lines.join('\n');
+}
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function hideCursor() {
+    process.stdout.write('\x1B[?25l');
+}
+function showCursor() {
+    process.stdout.write('\x1B[?25h');
+}
+function clearScreen() {
+    process.stdout.write('\x1B[2J\x1B[0;0H');
+}
+async function playStartupSplash() {
+    if (!shouldPlayStartupSplash())
+        return;
+    const totalMs = splashDurationMs();
+    hideCursor();
+    const start = Date.now();
+    let frameIndex = 0;
+    try {
+        while (true) {
+            const elapsedMs = Date.now() - start;
+            if (elapsedMs >= totalMs)
+                break;
+            const cols = Math.max(48, Number(process.stdout.columns) || 80);
+            const rows = Math.max(12, Number(process.stdout.rows) || 24);
+            const frame = renderSplashFrame({ cols, rows, elapsedMs, frameIndex });
+            clearScreen();
+            process.stdout.write(frame);
+            frameIndex += 1;
+            await sleep(FRAME_MS);
+        }
+    }
+    finally {
+        clearScreen();
+        showCursor();
+    }
+}
+module.exports = {
+    shouldPlayStartupSplash,
+    splashDurationMs,
+    renderSplashFrame,
+    playStartupSplash,
+    FADE_MS,
+    DEFAULT_SPLASH_MS,
+};
+//# sourceMappingURL=startup-splash.js.map

package/out/ui/theme.js

@@ -15,6 +15,12 @@ const palette = {
     red: '#EF4444',
     gray: '#6B7280',
     dim: '#9CA3AF',
+    border: '#4A4580',
+    surface: '#12152A',
+    macRed: '#FF5F57',
+    macYellow: '#FEBC2E',
+    macGreen: '#28C840',
+    macGray: '#5C5C5C',
 };
 const brand = {
     primary: chalk.hex(palette.primary),
@@ -25,6 +31,7 @@ const brand = {
     error: chalk.hex(palette.red),
     muted: chalk.hex(palette.gray),
     dim: chalk.hex(palette.dim),
+    border: chalk.hex(palette.border),
     bold: chalk.bold,
 };
 const icon = {
@@ -115,9 +122,49 @@ function pulseBar(width = 24, filled = Math.ceil(width * 0.7)) {
     const tail = brand.muted('▱'.repeat(Math.max(0, width - f)));
     return `${head}${tail}`;
 }
+/** Single-line status probe progress: bar + percent + optional service label. */
+function statusProgressLine({ completed, total, label, barWidth = 24, filled } = {}) {
+    const safeTotal = Math.max(1, total || 1);
+    const barFilled = filled !== undefined ? filled : Math.round((completed / safeTotal) * barWidth);
+    const pct = Math.min(100, Math.round((completed / safeTotal) * 100));
+    const bar = pulseBar(barWidth, barFilled);
+    const labelPart = label ? brand.dim(`  ${label}`) : '';
+    return `${bar}  ${brand.muted(`${pct}%`)}${labelPart}`;
+}
+/**
+ * macOS Terminal-style traffic-light window controls (red · yellow · green).
+ */
+function macTrafficLights() {
+    return (chalk.hex(palette.macRed)('●') +
+        brand.dim(' ') +
+        chalk.hex(palette.macYellow)('●') +
+        brand.dim(' ') +
+        chalk.hex(palette.macGreen)('●'));
+}
+/**
+ * Unified status badge — color encodes health (online / partial / error / pending).
+ * @param {'online'|'partial'|'error'|'pending'} state
+ */
+function systemStatusBadge(state = 'pending') {
+    const { t } = require('../lib/i18n');
+    const words = {
+        online: 'banner.systemOnline',
+        partial: 'banner.systemPartial',
+        error: 'banner.systemError',
+        pending: 'banner.systemPending',
+    };
+    const painters = {
+        online: brand.success,
+        partial: brand.warn,
+        error: brand.error,
+        pending: brand.muted,
+    };
+    const key = words[state] || words.pending;
+    const paint = painters[state] || painters.pending;
+    return paint(t(key).trim());
+}
 /**
- * Three-light status indicator used in the top-right of the banner.
- * Mimics the running-light cluster you'd see on a server rack.
+ * Three-light status indicator used in status panels.
  */
 function statusLights(state = 'online') {
     if (state === 'offline') {
@@ -132,7 +179,7 @@ function statusLights(state = 'online') {
     return `${brand.success('●')} ${brand.warn('●')} ${brand.muted('○')}`;
 }
 function hex2rgb(h) {
-    const s = h.replace('#', '');
+    const s = String(h || '#000000').replace('#', '');
     return {
         r: parseInt(s.substring(0, 2), 16),
         g: parseInt(s.substring(2, 4), 16),
@@ -193,7 +240,11 @@ function info(text) {
     return `${icon.info} ${brand.accent(text)}`;
 }
 function chip(text, color = brand.primary) {
-    return color(`[ ${text} ]`);
+    return color(` ${text} `);
+}
+/** Compact pill badge for banner feature highlights. */
+function badge(text, color = palette.accent) {
+    return chalk.bgHex(palette.surface).hex(color).bold(` ${text} `);
 }
 function kv(key, value, { keyWidth = 10, valueColor = (s) => s } = {}) {
     return `${brand.muted(padRight(key, keyWidth))}  ${valueColor(value)}`;
@@ -218,12 +269,9 @@ function statusPill(state, labels = {}) {
  */
 function sectionHeader(title, { width } = {}) {
     const w = width ?? terminalWidth();
-    const prefix = brand.muted('── ');
-    const t = brand.bold(brand.primary(title));
-    const usedLen = visibleLength(prefix) + visibleLength(t) + 2;
-    const fillLen = Math.max(3, w - usedLen - 2);
-    const fill = brand.muted('─'.repeat(fillLen));
-    return ` ${prefix}${t} ${fill}`;
+    const ruleLen = Math.min(40, Math.max(12, w - visibleLength(title) - 6));
+    const rule = brand.dim('─'.repeat(ruleLen));
+    return `  ${brand.dim(title)}  ${rule}`;
 }
 module.exports = {
     palette,
@@ -235,6 +283,7 @@ module.exports = {
     warn,
     info,
     chip,
+    badge,
     kv,
     statusPill,
     sectionHeader,
@@ -245,6 +294,9 @@ module.exports = {
     divider,
     gradientText,
     pulseBar,
+    statusProgressLine,
     statusLights,
+    macTrafficLights,
+    systemStatusBadge,
 };
 //# sourceMappingURL=theme.js.map