specsmd 0.0.3 → 0.0.5

package/lib/cli-utils.js

@@ -3,19 +3,9 @@
  */
 
 const chalk = require('chalk');
-const figlet = require('figlet');
 const gradient = require('gradient-string');
 const path = require('path');
 
-// Lazy load oh-my-logo (ESM module) via dynamic import
-let ohMyLogo = null;
-const getOhMyLogo = async () => {
-  if (!ohMyLogo) {
-    ohMyLogo = await import('oh-my-logo');
-  }
-  return ohMyLogo;
-};
-
 const { THEME_COLORS } = require('./constants');
 
 // Theme Colors (Terracotta/Orange inspired by Claude Code)
@@ -24,6 +14,16 @@ const THEME = THEME_COLORS;
 // Create gradient for logo
 const logoGradient = gradient([THEME.primary, THEME.secondary]);
 
+// Pixel-art style logo (brick blocks with 3D effect)
+const PIXEL_LOGO = `
+ ███████╗ ██████╗  ███████╗  ██████╗ ███████╗     ███╗   ███╗ ██████╗
+ ██╔════╝ ██╔══██╗ ██╔════╝ ██╔════╝ ██╔════╝     ████╗ ████║ ██╔══██╗
+ ███████╗ ██████╔╝ █████╗   ██║      ███████╗     ██╔████╔██║ ██║  ██║
+ ╚════██║ ██╔═══╝  ██╔══╝   ██║      ╚════██║     ██║╚██╔╝██║ ██║  ██║
+ ███████║ ██║      ███████╗ ╚██████╗ ███████║ ██╗ ██║ ╚═╝ ██║ ██████╔╝
+ ╚══════╝ ╚═╝      ╚══════╝  ╚═════╝ ╚══════╝ ╚═╝ ╚═╝     ╚═╝ ╚═════╝
+`;
+
 // Theme chalk instances
 const theme = {
   primary: chalk.hex(THEME.primary),
@@ -75,8 +75,7 @@ const CLIUtils = {
   },
 
   /**
-   * Display the specs.md logo with gradient ASCII art (lowercase with shadow)
-   * Uses oh-my-logo for beautiful gradient rendering
+   * Display the specs.md logo with ASCII art
    * @param {boolean} clearScreen - Whether to clear screen first
    */
   async displayLogo(clearScreen = true) {
@@ -87,32 +86,14 @@ const CLIUtils = {
     const version = this.getVersion();
 
     console.log('');
-
-    try {
-      // Use oh-my-logo with custom orange palette and Standard font (lowercase)
-      const { render } = await getOhMyLogo();
-      const logo = await render('specs.md', {
-        palette: [THEME.primary, THEME.secondary, '#ffb380'],
-        font: 'Standard',
-        direction: 'horizontal'
-      });
-
-      console.log(logo);
-    } catch (err) {
-      // Fallback to figlet + gradient-string if oh-my-logo fails
-      const figletArt = figlet.textSync('specs.md', {
-        font: 'Standard',
-        horizontalLayout: 'default'
-      });
-      console.log(logoGradient(figletArt));
-    }
+    console.log(logoGradient(PIXEL_LOGO));
 
     // Tagline with version
     console.log(theme.primary(' AI-native development orchestration') + theme.primary.bold(` v${version}`) + '\n');
   },
 
   /**
-   * Display the specsmd logo synchronously using figlet (fallback)
+   * Display the specsmd logo synchronously with ASCII art
    * @param {boolean} clearScreen - Whether to clear screen first
    */
   displayLogoSync(clearScreen = true) {
@@ -122,21 +103,15 @@ const CLIUtils = {
 
     const version = this.getVersion();
 
-    // Generate ASCII art with figlet
-    const figletArt = figlet.textSync('specs.md', {
-      font: 'Big',
-      horizontalLayout: 'default'
-    });
-
     console.log('');
-    console.log(logoGradient(figletArt));
+    console.log(logoGradient(PIXEL_LOGO));
 
     // Tagline with version
     console.log(theme.primary(' AI-native development orchestration') + theme.primary.bold(` v${version}`) + '\n');
   },
 
   /**
-   * Display the logo using figlet (alternative style)
+   * Display the logo using pixel-art style (alternative/legacy method name)
    * @param {boolean} clearScreen - Whether to clear screen first
    */
   displayFigletLogo(clearScreen = true) {
@@ -145,12 +120,8 @@ const CLIUtils = {
     }
 
     const version = this.getVersion();
-    const art = figlet.textSync('specs.md', {
-      font: 'Big',
-      horizontalLayout: 'full'
-    });
 
-    console.log(logoGradient(art));
+    console.log(logoGradient(PIXEL_LOGO));
     console.log(theme.dim(' AI-native development orchestration') + theme.primary.bold(` v${version}`) + '\n');
   },
 

package/lib/constants.js

@@ -1,13 +1,14 @@
 
-// Theme Colors (Terracotta/Orange inspired by Claude Code)
+// Theme Colors (extracted from specs.md pixel logo)
 const THEME_COLORS = {
-    primary: '#D97757',      // Terracotta
-    secondary: '#ff9966',    // Light orange
+    primary: '#C45050',      // Brick red fill
+    secondary: '#D86565',    // Coral red highlight
+    accent: '#EC8080',       // Light coral
     success: '#22c55e',      // Green
     error: '#ef4444',        // Red
     warning: '#f59e0b',      // Amber
     info: '#3b82f6',         // Blue
-    dim: '#6b7280'           // Gray
+    dim: '#2D2D32'           // Dark charcoal outline
 };
 
 const FLOWS = {

package/lib/ink-logo.mjs

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+/**
+ * specs.md Logo Component
+ *
+ * Red ASCII logo with black shadows
+ */
+
+import React from 'react';
+import { render, Text, Box } from 'ink';
+
+const { createElement: h } = React;
+
+// Colors (red)
+const LOGO_COLOR = '#CC0000';
+const VERSION_COLOR = '#FF3333';
+
+// ASCII Logo (exact from specs.md branding)
+const asciiLogoRaw = `
+                                                                    █████
+                                                                   ░░███
+  █████  ████████   ██████   ██████   █████     █████████████    ███████
+ ███░░  ░░███░░███ ███░░███ ███░░███ ███░░     ░░███░░███░░███  ███░░███
+░░█████  ░███ ░███░███████ ░███ ░░░ ░░█████     ░███ ░███ ░███ ░███ ░███
+ ░░░░███ ░███ ░███░███░░░  ░███  ███ ░░░░███    ░███ ░███ ░███ ░███ ░███
+ ██████  ░███████ ░░██████ ░░██████  ██████  ██ █████░███ █████░░████████
+░░░░░░   ░███░░░   ░░░░░░   ░░░░░░  ░░░░░░  ░░ ░░░░░ ░░░ ░░░░░  ░░░░░░░░
+         ░███
+         █████
+        ░░░░░
+`;
+
+// Process to remove shadow characters (░ becomes space for black background)
+const asciiLogo = asciiLogoRaw.replace(/░/g, ' ');
+
+// Header component
+const Header = ({ version = '0.0.3' }) => {
+    return h(Box, { flexDirection: 'column' },
+        h(Text, { color: LOGO_COLOR }, asciiLogo),
+        h(Box, { marginTop: 0 },
+            h(Text, { color: LOGO_COLOR },
+                ' AI-native development orchestration ',
+                h(Text, { bold: true, color: VERSION_COLOR }, `v${version}`)
+            )
+        )
+    );
+};
+
+// Exports for use in other modules
+export { Header, asciiLogo, LOGO_COLOR, VERSION_COLOR };
+
+// App component for standalone testing
+const App = () => {
+    const args = process.argv.slice(2);
+    const version = args[0] || '0.0.3';
+    return h(Header, { version });
+};
+
+console.clear();
+render(h(App));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specsmd",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Multi-agent orchestration system for AI-native software development. Delivers AI-DLC, Agile, and custom SDLC flows as markdown-based agent systems.",
   "main": "lib/installer.js",
   "bin": {
@@ -45,7 +45,8 @@
     "gradient-string": "^2.0.2",
     "js-yaml": "^4.1.0",
     "oh-my-logo": "^0.4.0",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "terminal-image": "^4.1.0"
   },
   "engines": {
     "node": ">=14.0.0"