erosolar-cli 1.0.1

package/dist/ui/designSystem.js

@@ -0,0 +1,98 @@
+import { icons, theme } from './theme.js';
+import { getContentWidth, normalizePanelWidth, renderPanel, wrapParagraph, measure, } from './layout.js';
+const toneColors = {
+    neutral: theme.ui.text,
+    info: theme.info,
+    success: theme.success,
+    warning: theme.warning,
+    danger: theme.error,
+    accent: theme.secondary,
+};
+export function renderStatusBar(segments, options = {}) {
+    if (!segments.length) {
+        return '';
+    }
+    const width = clampWidth(options.width ?? getContentWidth());
+    const divider = theme.ui.muted(` ${icons.bullet} `);
+    const chunks = segments
+        .filter((segment) => Boolean(segment.label?.trim() && segment.value?.trim()))
+        .map((segment) => formatStatusChunk(segment));
+    if (!chunks.length) {
+        return '';
+    }
+    const lines = [];
+    let current = '';
+    const pushChunk = (chunk) => {
+        if (!current) {
+            current = chunk;
+            return;
+        }
+        const candidate = `${current}${divider}${chunk}`;
+        if (measure(candidate) > width) {
+            lines.push(padLine(current, width));
+            current = chunk;
+        }
+        else {
+            current = candidate;
+        }
+    };
+    chunks.forEach(pushChunk);
+    if (current) {
+        lines.push(padLine(current, width));
+    }
+    return lines.join('\n');
+}
+export function renderCallout(message, options = {}) {
+    const width = options.width ?? getContentWidth();
+    const tone = options.tone ?? 'info';
+    const icon = options.icon ?? icons.info;
+    const title = options.title ?? capitalize(tone);
+    const accent = toneColors[tone] ?? toneColors.info;
+    const paragraphs = wrapParagraph(message, Math.max(24, normalizePanelWidth(width) - 4));
+    return renderPanel(paragraphs, {
+        icon,
+        title,
+        accentColor: accent,
+        borderColor: accent,
+        width,
+    });
+}
+export function renderSectionHeading(title, options = {}) {
+    const width = clampWidth(options.width ?? getContentWidth());
+    const accent = toneColors[options.tone ?? 'accent'] ?? toneColors.accent;
+    const icon = options.icon ? `${options.icon} ` : '';
+    const label = `${icon}${title}`.toUpperCase();
+    const underline = accent('━'.repeat(width));
+    const subtitle = options.subtitle?.trim()
+        ? `${theme.ui.muted(options.subtitle.trim())}`
+        : '';
+    const lines = [underline, accent(padLine(label, width))];
+    if (subtitle) {
+        lines.push(padLine(subtitle, width));
+    }
+    return lines.join('\n');
+}
+function formatStatusChunk(segment) {
+    const tone = toneColors[segment.tone ?? 'neutral'] ?? toneColors.neutral;
+    const icon = segment.icon ? `${tone(segment.icon)} ` : '';
+    const label = theme.ui.muted(segment.label.trim().toUpperCase());
+    const value = tone(segment.value.trim());
+    return `${icon}${label} ${value}`;
+}
+function padLine(text, width) {
+    const visible = measure(text);
+    if (visible >= width) {
+        return text;
+    }
+    return `${text}${' '.repeat(width - visible)}`;
+}
+function clampWidth(value) {
+    const normalized = Math.max(32, Math.floor(value));
+    return Math.min(120, normalized);
+}
+function capitalize(value) {
+    if (!value) {
+        return '';
+    }
+    return value.slice(0, 1).toUpperCase() + value.slice(1);
+}