cli-browser 1.0.0

package/src/themes.js

@@ -0,0 +1,137 @@
+import chalk from 'chalk';
+import config from './config.js';
+
+const THEMES = {
+  dark: {
+    primary: 'cyan',
+    secondary: 'white',
+    accent: 'yellow',
+    success: 'green',
+    error: 'red',
+    warning: 'yellow',
+    info: 'blue',
+    muted: 'gray',
+    link: 'cyan',
+    title: 'greenBright',
+    url: 'gray',
+    border: 'white',
+    highlight: 'yellowBright',
+    bg: null,
+    headerBg: 'bgBlue',
+  },
+  hacker: {
+    primary: 'green',
+    secondary: 'greenBright',
+    accent: 'green',
+    success: 'greenBright',
+    error: 'red',
+    warning: 'yellow',
+    info: 'green',
+    muted: 'green',
+    link: 'greenBright',
+    title: 'greenBright',
+    url: 'green',
+    border: 'green',
+    highlight: 'greenBright',
+    bg: null,
+    headerBg: 'bgGreen',
+  },
+  minimal: {
+    primary: 'white',
+    secondary: 'gray',
+    accent: 'white',
+    success: 'white',
+    error: 'red',
+    warning: 'yellow',
+    info: 'white',
+    muted: 'gray',
+    link: 'white',
+    title: 'white',
+    url: 'gray',
+    border: 'gray',
+    highlight: 'whiteBright',
+    bg: null,
+    headerBg: 'bgGray',
+  },
+  ocean: {
+    primary: 'blueBright',
+    secondary: 'cyanBright',
+    accent: 'magentaBright',
+    success: 'greenBright',
+    error: 'redBright',
+    warning: 'yellowBright',
+    info: 'blueBright',
+    muted: 'gray',
+    link: 'cyanBright',
+    title: 'blueBright',
+    url: 'cyan',
+    border: 'blue',
+    highlight: 'magentaBright',
+    bg: null,
+    headerBg: 'bgBlue',
+  },
+  sunset: {
+    primary: 'redBright',
+    secondary: 'yellowBright',
+    accent: 'magenta',
+    success: 'green',
+    error: 'red',
+    warning: 'yellow',
+    info: 'magenta',
+    muted: 'gray',
+    link: 'yellowBright',
+    title: 'redBright',
+    url: 'yellow',
+    border: 'red',
+    highlight: 'magentaBright',
+    bg: null,
+    headerBg: 'bgRed',
+  },
+};
+
+class ThemeManager {
+  constructor() {
+    this.currentTheme = config.get('theme') || 'dark';
+  }
+
+  getTheme() {
+    return THEMES[this.currentTheme] || THEMES.dark;
+  }
+
+  setTheme(name) {
+    if (THEMES[name]) {
+      this.currentTheme = name;
+      config.set('theme', name);
+      return true;
+    }
+    return false;
+  }
+
+  listThemes() {
+    return Object.keys(THEMES);
+  }
+
+  c(colorName) {
+    const theme = this.getTheme();
+    const color = theme[colorName] || colorName;
+    return chalk[color] || chalk.white;
+  }
+
+  // Shorthand color methods
+  primary(text) { return this.c('primary')(text); }
+  secondary(text) { return this.c('secondary')(text); }
+  accent(text) { return this.c('accent')(text); }
+  success(text) { return this.c('success')(text); }
+  error(text) { return this.c('error')(text); }
+  warning(text) { return this.c('warning')(text); }
+  info(text) { return this.c('info')(text); }
+  muted(text) { return this.c('muted')(text); }
+  link(text) { return this.c('link')(text); }
+  title(text) { return chalk.bold(this.c('title')(text)); }
+  url(text) { return this.c('url')(text); }
+  border(text) { return this.c('border')(text); }
+  highlight(text) { return this.c('highlight')(text); }
+}
+
+export const theme = new ThemeManager();
+export { THEMES };

package/src/ui.js

@@ -0,0 +1,202 @@
+import chalk from 'chalk';
+import boxen from 'boxen';
+import Table from 'cli-table3';
+import figures from 'figures';
+import { theme } from './themes.js';
+
+export function banner() {
+  const t = theme.getTheme();
+  const logo = `
+   ██████╗██╗     ██╗    ██████╗ ██████╗  ██████╗ ██╗    ██╗███████╗███████╗██████╗ 
+  ██╔════╝██║     ██║    ██╔══██╗██╔══██╗██╔═══██╗██║    ██║██╔════╝██╔════╝██╔══██╗
+  ██║     ██║     ██║    ██████╔╝██████╔╝██║   ██║██║ █╗ ██║█████╗  █████╗  ██████╔╝
+  ██║     ██║     ██║    ██╔══██╗██╔══██╗██║   ██║██║███╗██║██╔══╝  ██╔══╝  ██╔══██╗
+  ╚██████╗███████╗██║    ██████╔╝██║  ██║╚██████╔╝╚███╔███╔╝███████╗███████╗██║  ██║
+   ╚═════╝╚══════╝╚═╝    ╚═════╝ ╚═╝  ╚═╝ ╚═════╝  ╚══╝╚══╝ ╚══════╝╚══════╝╚═╝  ╚═╝`;
+
+  console.log(theme.primary(logo));
+  console.log();
+  console.log(
+    boxen(
+      theme.accent('  Terminal Internet  ') + '\n' +
+      theme.muted('  Browse the web from your terminal  '),
+      {
+        padding: { top: 0, bottom: 0, left: 1, right: 1 },
+        borderStyle: 'round',
+        borderColor: t.primary,
+        textAlignment: 'center',
+      }
+    )
+  );
+  console.log();
+}
+
+export function divider(char = '─', width = process.stdout.columns || 80) {
+  console.log(theme.muted(char.repeat(Math.min(width, 120))));
+}
+
+export function header(text) {
+  console.log();
+  divider();
+  console.log(theme.title(`  ${figures.pointer} ${text}`));
+  divider();
+}
+
+export function subheader(text) {
+  console.log(theme.accent(`\n  ${text}`));
+}
+
+export function success(text) {
+  console.log(theme.success(`  ${figures.tick} ${text}`));
+}
+
+export function error(text) {
+  console.log(theme.error(`  ${figures.cross} ${text}`));
+}
+
+export function warn(text) {
+  console.log(theme.warning(`  ${figures.warning} ${text}`));
+}
+
+export function info(text) {
+  console.log(theme.info(`  ${figures.info} ${text}`));
+}
+
+export function bullet(text, indent = 2) {
+  console.log(' '.repeat(indent) + theme.muted(figures.pointer) + ' ' + text);
+}
+
+export function numberedList(items, startIdx = 1) {
+  items.forEach((item, i) => {
+    const num = theme.accent(`  [${startIdx + i}] `);
+    if (typeof item === 'string') {
+      console.log(num + item);
+    } else {
+      // item has .title, .url, .description
+      console.log(num + theme.title(item.title || ''));
+      if (item.url) {
+        console.log('       ' + theme.url(item.url));
+      }
+      if (item.description) {
+        console.log('       ' + theme.muted(truncate(item.description, 100)));
+      }
+    }
+  });
+}
+
+export function keyValue(key, value, indent = 4) {
+  console.log(
+    ' '.repeat(indent) +
+    theme.accent(key.padEnd(18)) +
+    theme.secondary(value)
+  );
+}
+
+export function createTable(headers, rows, options = {}) {
+  const t = theme.getTheme();
+  const table = new Table({
+    head: headers.map(h => theme.accent(h)),
+    style: {
+      head: [],
+      border: [t.border],
+    },
+    chars: {
+      'top': '─', 'top-mid': '┬', 'top-left': '┌', 'top-right': '┐',
+      'bottom': '─', 'bottom-mid': '┴', 'bottom-left': '└', 'bottom-right': '┘',
+      'left': '│', 'left-mid': '├', 'mid': '─', 'mid-mid': '┼',
+      'right': '│', 'right-mid': '┤', 'middle': '│',
+    },
+    ...options,
+  });
+  rows.forEach(row => table.push(row));
+  console.log(table.toString());
+}
+
+export function searchResult(idx, result) {
+  const num = theme.accent(`  [${idx}] `);
+  console.log(num + theme.title(result.title || 'Untitled'));
+  if (result.url) {
+    console.log('       ' + theme.url(result.url));
+  }
+  if (result.content || result.description) {
+    const desc = result.content || result.description;
+    console.log('       ' + theme.muted(truncate(desc, 120)));
+  }
+  if (result.engine) {
+    console.log('       ' + theme.muted(`via ${result.engine}`));
+  }
+  console.log();
+}
+
+export function pageView(title, content, links = []) {
+  console.log();
+  divider('═');
+  console.log(theme.title(`  ${title}`));
+  divider('═');
+  console.log();
+  console.log(content);
+  
+  if (links.length > 0) {
+    console.log();
+    divider();
+    console.log(theme.accent('  Links:'));
+    links.forEach((link, i) => {
+      console.log(
+        theme.accent(`  [${i + 1}] `) +
+        theme.link(link.text || link.url) +
+        (link.url !== link.text ? ' ' + theme.url(link.url) : '')
+      );
+    });
+  }
+}
+
+export function statusBar(tabs, currentTab, url) {
+  const t = theme.getTheme();
+  const tabStr = tabs.map((tab, i) => {
+    const label = ` ${i + 1}:${truncate(tab.title || 'New Tab', 12)} `;
+    return i === currentTab
+      ? chalk.inverse(theme.accent(label))
+      : theme.muted(label);
+  }).join(theme.muted('│'));
+
+  const bar = theme.muted('┌') + theme.muted('─'.repeat(Math.min(process.stdout.columns - 2, 118) || 78)) + theme.muted('┐');
+  const bottom = theme.muted('└') + theme.muted('─'.repeat(Math.min(process.stdout.columns - 2, 118) || 78)) + theme.muted('┘');
+  
+  console.log(bar);
+  console.log(theme.muted('│') + ' ' + tabStr);
+  if (url) {
+    console.log(theme.muted('│') + ' ' + theme.url(figures.arrowRight + ' ' + url));
+  }
+  console.log(bottom);
+}
+
+export function prompt() {
+  const t = theme.getTheme();
+  return theme.accent(`${figures.pointer} `) + theme.primary('cli-browser') + theme.muted(' > ');
+}
+
+export function helpBox(title, commands) {
+  console.log();
+  console.log(theme.title(`  ${figures.pointer} ${title}`));
+  divider();
+  commands.forEach(([cmd, desc]) => {
+    console.log(
+      '  ' + theme.accent(cmd.padEnd(35)) + theme.muted(desc)
+    );
+  });
+  console.log();
+}
+
+function truncate(str, max) {
+  if (!str) return '';
+  str = str.replace(/\n/g, ' ').trim();
+  return str.length > max ? str.slice(0, max - 3) + '...' : str;
+}
+
+export function progressBar(current, total, width = 30) {
+  const pct = Math.round((current / total) * 100);
+  const filled = Math.round((current / total) * width);
+  const empty = width - filled;
+  const bar = theme.accent('█'.repeat(filled)) + theme.muted('░'.repeat(empty));
+  return `${bar} ${theme.secondary(pct + '%')}`;
+}