@mindfiredigital/ignix-lite-cli 1.1.0

package/src/commands/mcp.ts

@@ -0,0 +1,233 @@
+import { readFileSync, writeFileSync, mkdirSync } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { spawn } from 'child_process'
+import pc from 'picocolors'
+import ora from 'ora'
+
+function resolveMcpServerPath(): string {
+  try {
+    const resolvedUrl = import.meta.resolve('@mindfiredigital/ignix-lite-mcp')
+    return fileURLToPath(resolvedUrl)
+  } catch {
+    const thisDir = path.dirname(fileURLToPath(import.meta.url))
+    return path.resolve(thisDir, '../../mcp/dist/server.js')
+  }
+}
+
+/** Read a JSON file safely; returns {} if not found or invalid */
+function readJson(filePath: string): Record<string, unknown> {
+  try {
+    return JSON.parse(readFileSync(filePath, 'utf-8'))
+  } catch {
+    return {}
+  }
+}
+
+/** Write a JSON file, creating parent directories as needed */
+function writeJson(filePath: string, data: unknown): void {
+  mkdirSync(path.dirname(filePath), { recursive: true })
+  writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf-8')
+}
+
+/** The shared MCP server entry */
+function mcpEntry(serverPath: string) {
+  return {
+    command: 'node',
+    args: [serverPath]
+  }
+}
+
+function setupClaudeDesktop(serverPath: string): void {
+  const spinner = ora('Configuring Claude Desktop...').start()
+  try {
+    const configDir =
+      process.platform === 'win32'
+        ? path.join(process.env.APPDATA || '', 'Claude')
+        : path.join(
+            process.env.HOME || '',
+            'Library',
+            'Application Support',
+            'Claude'
+          )
+    const configPath = path.join(configDir, 'claude_desktop_config.json')
+    const config = readJson(configPath) as {
+      mcpServers?: Record<string, unknown>
+    }
+    config.mcpServers = config.mcpServers || {}
+    config.mcpServers['ignix-lite'] = mcpEntry(serverPath)
+    writeJson(configPath, config)
+    spinner.succeed(pc.green('Claude Desktop configured successfully!'))
+    console.log(pc.gray(`  Config: ${configPath}`))
+    console.log(pc.yellow('\n  ⚡ Restart Claude Desktop to apply changes.\n'))
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err)
+    spinner.fail(pc.red(`Failed to configure Claude Desktop: ${msg}`))
+  }
+}
+
+function setupClaudeCode(serverPath: string): void {
+  const spinner = ora('Configuring Claude Code (claude CLI)...').start()
+  try {
+    // User-level config: ~/.claude.json
+    const configPath =
+      process.platform === 'win32'
+        ? path.join(process.env.USERPROFILE || '', '.claude.json')
+        : path.join(process.env.HOME || '', '.claude.json')
+
+    const config = readJson(configPath) as {
+      mcpServers?: Record<string, unknown>
+    }
+    config.mcpServers = config.mcpServers || {}
+    config.mcpServers['ignix-lite'] = mcpEntry(serverPath)
+    writeJson(configPath, config)
+    spinner.succeed(pc.green('Claude Code configured successfully!'))
+    console.log(pc.gray(`  Config: ${configPath}`))
+    console.log(
+      pc.yellow(
+        '\n  ⚡ Run "claude" in any project to start using Ignix-Lite tools.\n'
+      )
+    )
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err)
+    spinner.fail(pc.red(`Failed to configure Claude Code: ${msg}`))
+  }
+}
+
+function setupGemini(serverPath: string): void {
+  const spinner = ora('Configuring Gemini CLI...').start()
+  try {
+    // Gemini CLI reads ~/.gemini/settings.json
+    const configDir =
+      process.platform === 'win32'
+        ? path.join(process.env.USERPROFILE || '', '.gemini')
+        : path.join(process.env.HOME || '', '.gemini')
+    const configPath = path.join(configDir, 'settings.json')
+
+    const config = readJson(configPath) as {
+      mcpServers?: Record<string, unknown>
+    }
+    config.mcpServers = config.mcpServers || {}
+    config.mcpServers['ignix-lite'] = mcpEntry(serverPath)
+    writeJson(configPath, config)
+    spinner.succeed(pc.green('Gemini CLI configured successfully!'))
+    console.log(pc.gray(`  Config: ${configPath}`))
+    console.log(
+      pc.yellow(
+        '\n  ⚡ Start a new Gemini CLI session to activate Ignix-Lite tools.\n'
+      )
+    )
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err)
+    spinner.fail(pc.red(`Failed to configure Gemini CLI: ${msg}`))
+  }
+}
+
+function setupCursor(serverPath: string): void {
+  const spinner = ora('Configuring Cursor...').start()
+  try {
+    // Cursor reads ~/.cursor/mcp.json (global scope)
+    const configDir =
+      process.platform === 'win32'
+        ? path.join(process.env.USERPROFILE || '', '.cursor')
+        : path.join(process.env.HOME || '', '.cursor')
+    const configPath = path.join(configDir, 'mcp.json')
+
+    const config = readJson(configPath) as {
+      mcpServers?: Record<string, unknown>
+    }
+    config.mcpServers = config.mcpServers || {}
+    config.mcpServers['ignix-lite'] = mcpEntry(serverPath)
+    writeJson(configPath, config)
+    spinner.succeed(pc.green('Cursor configured successfully!'))
+    console.log(pc.gray(`  Config: ${configPath}`))
+    console.log(
+      pc.yellow(
+        '\n  ⚡ Reload Cursor (Ctrl+Shift+P → "Reload Window") to activate Ignix-Lite tools.\n'
+      )
+    )
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err)
+    spinner.fail(pc.red(`Failed to configure Cursor: ${msg}`))
+  }
+}
+
+const SUPPORTED_CLIENTS = [
+  'claude',
+  'claude-desktop',
+  'claude-code',
+  'gemini',
+  'cursor'
+]
+
+export async function mcpSetupCommand(client?: string): Promise<void> {
+  const serverPath = resolveMcpServerPath()
+  const target = (client || '').toLowerCase().trim()
+
+  if (!target) {
+    console.log(pc.cyan('\nWhich client do you want to configure?\n'))
+    console.log(
+      `  ${pc.bold('claude')}          Claude Desktop       (auto-configure)`
+    )
+    console.log(
+      `  ${pc.bold('claude-code')}     Claude Code CLI      (auto-configure)`
+    )
+    console.log(
+      `  ${pc.bold('gemini')}          Gemini CLI           (auto-configure)`
+    )
+    console.log(
+      `  ${pc.bold('cursor')}          Cursor editor        (auto-configure)`
+    )
+    console.log()
+    console.log(
+      pc.gray(
+        'Usage: ignix-lite mcp setup <client>  (e.g. ignix-lite mcp setup cursor)'
+      )
+    )
+    console.log()
+    return
+  }
+
+  switch (target) {
+    case 'claude':
+    case 'claude-desktop':
+      setupClaudeDesktop(serverPath)
+      break
+
+    case 'claude-code':
+      setupClaudeCode(serverPath)
+      break
+
+    case 'gemini':
+      setupGemini(serverPath)
+      break
+
+    case 'cursor':
+      setupCursor(serverPath)
+      break
+
+    default:
+      console.log(pc.red(`\nUnknown client: "${client}"\n`))
+      console.log(`Supported clients: ${pc.bold(SUPPORTED_CLIENTS.join(', '))}`)
+      console.log()
+  }
+}
+
+export function mcpStartCommand(): void {
+  const serverPath = resolveMcpServerPath()
+
+  console.log(pc.cyan(`\nStarting Ignix-Lite MCP Server...`))
+  console.log(`Running: ${pc.green('node ' + serverPath)}\n`)
+
+  const child = spawn('node', [serverPath], { stdio: 'inherit' })
+
+  child.on('error', (err) => {
+    console.log(pc.red(`\nFailed to start MCP Server: ${err.message}`))
+  })
+
+  child.on('close', (code) => {
+    if (code !== 0) {
+      console.log(pc.red(`\nMCP Server exited with code ${code}`))
+    }
+  })
+}

package/src/commands/preview.ts

@@ -0,0 +1,79 @@
+import { readFileSync, existsSync, writeFileSync } from 'fs'
+import path from 'path'
+import pc from 'picocolors'
+import ora from 'ora'
+import { preview } from '@mindfiredigital/ignix-lite-engine'
+
+export async function previewCommand(
+  filePath: string,
+  options: { output: string; width: string; theme?: string }
+) {
+  const absolutePath = path.resolve(process.cwd(), filePath)
+
+  if (!existsSync(absolutePath)) {
+    console.log(pc.red(`Error: File not found at ${filePath}`))
+    process.exit(1)
+  }
+
+  const spinner = ora(
+    'Launching headless browser and rendering preview...'
+  ).start()
+
+  try {
+    const inputContent = readFileSync(absolutePath, 'utf8')
+    const widthNum = parseInt(options.width, 10) || 400
+
+    const response = await preview({
+      input: inputContent,
+      options: {
+        width: widthNum,
+        theme: options.theme
+      }
+    })
+
+    if (!response.content || response.content.length === 0) {
+      spinner.fail(
+        pc.red('Render failed: Received empty response from preview engine.')
+      )
+      return
+    }
+
+    let result: {
+      error?: string
+      png?: string
+    }
+    try {
+      result = JSON.parse(response.content[0].text)
+    } catch {
+      spinner.fail(pc.red('Render failed: Invalid JSON response from preview engine.'))
+      return
+    }
+
+    if (result.error) {
+      spinner.fail(pc.red(`Render failed: ${result.error}`))
+      return
+    }
+
+    if (!result.png || typeof result.png !== 'string') {
+      spinner.fail(
+        pc.red('Render failed: Preview engine did not return base64 PNG data.')
+      )
+      return
+    }
+
+    const base64Data = result.png.replace(/^data:image\/png;base64,/, '')
+    const buffer = Buffer.from(base64Data, 'base64')
+
+    const outputPath = path.resolve(process.cwd(), options.output)
+    writeFileSync(outputPath, buffer)
+
+    spinner.succeed(
+      pc.green(
+        `Visual preview generated successfully! Saved to ${pc.blue(options.output)}`
+      )
+    )
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error)
+    spinner.fail(pc.red(`Preview failed: ${msg}`))
+  }
+}

package/src/commands/theme.ts

@@ -0,0 +1,96 @@
+import fs from 'fs'
+import path from 'path'
+import pc from 'picocolors'
+import ora from 'ora'
+import { resolveTokens, buildCss } from '@mindfiredigital/ignix-lite-engine'
+
+export async function themeCommand(
+  prompt?: string,
+  options: { primary?: string; styleFile?: string } = {}
+) {
+  const spinner = ora('Generating theme tokens...').start()
+
+  let stylePath = options.styleFile
+
+  if (!stylePath) {
+    const configPath = 'ignix.config.json'
+    if (!fs.existsSync(configPath)) {
+      spinner.fail(
+        pc.red(
+          'ignix.config.json not found. Run "ignix-lite init" first or specify --style-file.'
+        )
+      )
+      return
+    }
+
+    try {
+      const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'))
+      stylePath = config.style
+    } catch {
+      spinner.fail(pc.red('Failed to read ignix.config.json.'))
+      return
+    }
+  }
+
+  if (!stylePath) {
+    spinner.fail(
+      pc.red('Style path not configured. Specify -s or --style-file option.')
+    )
+    return
+  }
+
+  const queryParts = [prompt || '', options.primary || ''].filter(Boolean)
+  const query = queryParts.join(' ').trim()
+
+  if (!query) {
+    spinner.fail(
+      pc.yellow(
+        'Please provide a prompt or primary color, e.g.: ignix-lite theme "dark round blue"'
+      )
+    )
+    return
+  }
+
+  try {
+    const tokens = resolveTokens(query)
+    const cssBlock = buildCss(tokens)
+
+    const absoluteStylePath = path.resolve(process.cwd(), stylePath)
+    if (!absoluteStylePath.startsWith(process.cwd())) {
+      spinner.fail(
+        pc.red('Error: Style file path must be within the project workspace.')
+      )
+      return
+    }
+
+    const cssDir = path.dirname(absoluteStylePath)
+
+    if (!fs.existsSync(cssDir)) {
+      fs.mkdirSync(cssDir, { recursive: true })
+    }
+
+    const themeRegex =
+      /\/\* Ignix-Lite Custom Theme Variables \*\/[\s\S]*?\}\n?/g
+
+    if (fs.existsSync(absoluteStylePath)) {
+      let content = fs.readFileSync(absoluteStylePath, 'utf-8')
+      if (themeRegex.test(content)) {
+        content = content.replace(themeRegex, cssBlock + '\n')
+      } else {
+        content = cssBlock + '\n\n' + content
+      }
+      fs.writeFileSync(absoluteStylePath, content)
+    } else {
+      fs.writeFileSync(absoluteStylePath, cssBlock)
+    }
+
+    spinner.succeed(
+      pc.green(`Theme successfully updated in ${pc.blue(stylePath)}`)
+    )
+    console.log(pc.gray(`Resolved primary color: ${tokens.resolvedPrimary}`))
+    console.log(pc.gray(`Mode: ${tokens.isDark ? 'Dark' : 'Light'}\n`))
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error)
+    spinner.fail(pc.red(`Failed to generate theme: ${msg}`))
+  }
+}

package/src/commands/validate.ts

@@ -0,0 +1,49 @@
+import { readFileSync, existsSync } from 'fs'
+import path from 'path'
+import pc from 'picocolors'
+import { validateHtml } from '@mindfiredigital/ignix-lite-engine'
+
+export async function validateCommand(filePath: string) {
+  const absolutePath = path.resolve(process.cwd(), filePath)
+
+  if (!existsSync(absolutePath)) {
+    console.log(pc.red(`Error: File not found at ${filePath}`))
+    process.exit(1)
+  }
+
+  const html = readFileSync(absolutePath, 'utf8')
+  const result = validateHtml(html)
+
+  console.log(pc.bold(pc.cyan(`\n🔍 Validation Report`)))
+  console.log(pc.gray('═'.repeat(60)))
+  console.log(`${pc.bold('File:')} ${pc.blue(filePath)}`)
+
+  if (result.valid) {
+    console.log(
+      pc.bold(
+        pc.green(`\n✔ PASS: All checks passed! Score: ${result.score ?? 100}/100`)
+      )
+    )
+  } else {
+    console.log(
+      pc.bold(
+        pc.red(
+          `\n✘ FAIL: Validation failed with ${result.errors.length} violation(s)`
+        )
+      )
+    )
+    console.log(`${pc.bold('Score:')} ${pc.yellow(`${result.score}/100\n`)}`)
+
+    result.errors.forEach((err, idx) => {
+      console.log(pc.bold(pc.red(`[Violation ${idx + 1}]`)))
+      console.log(`  ${pc.bold('Line:')}    ${err.line}`)
+      console.log(`  ${pc.bold('Element:')} <${err.element}>`)
+      console.log(`  ${pc.bold('Problem:')} ${pc.yellow(err.message)}`)
+      if (err.fix) {
+        console.log(`  ${pc.bold('Fix:')}     ${pc.green(err.fix)}`)
+      }
+      console.log()
+    })
+  }
+  console.log()
+}

package/src/index.ts

@@ -0,0 +1,91 @@
+import { Command } from 'commander'
+import { initCommand } from './commands/init.js'
+import { themeCommand } from './commands/theme.js'
+import { addCommand } from './commands/add.js'
+import { validateCommand } from './commands/validate.js'
+import { checkA11yCommand } from './commands/check-a11y.js'
+import { listCommand } from './commands/list.js'
+import { infoCommand } from './commands/info.js'
+import { buildCommand } from './commands/build.js'
+import { previewCommand } from './commands/preview.js'
+import { mcpSetupCommand, mcpStartCommand } from './commands/mcp.js'
+
+const program = new Command()
+
+program
+  .name('ignix-lite')
+  .description(
+    'CLI tool for project initialization, component scaffolding, and local validation in Ignix-Lite'
+  )
+  .version('1.0.0')
+
+program
+  .command('init')
+  .description('Initialize Ignix-Lite in your project')
+  .action(initCommand)
+
+program
+  .command('theme [prompt]')
+  .description(
+    'Generate theme variables based on design prompts or primary color'
+  )
+  .option('-p, --primary <color>', 'Primary color (hex/hsl) explicitly')
+  .option('-s, --style-file <path>', 'Stylesheet target path')
+  .action(themeCommand)
+
+program
+  .command('add <component>')
+  .description('Add or print an Ignix-Lite component template')
+  .action(addCommand)
+
+program
+  .command('validate <file>')
+  .description('Validate a markup file against Ignix-Lite design rules')
+  .action(validateCommand)
+
+program
+  .command('check-a11y <file>')
+  .description('Audit a local markup file for WCAG accessibility issues')
+  .action(checkA11yCommand)
+
+program
+  .command('list')
+  .description('List all available Ignix-Lite components')
+  .action(listCommand)
+program
+  .command('info <component>')
+  .description('Show detailed manifest and guidelines for a component')
+  .action(infoCommand)
+
+program
+  .command('build <prompt>')
+  .description('Generate Ignix-Lite HTML/Emmet from a natural language prompt')
+  .option('-o, --output <file>', 'Path to write the synthesized HTML output')
+  .option('-e, --emmet-only', 'Output the compiled Emmet shorthand only')
+  .action(buildCommand)
+
+program
+  .command('preview <file>')
+  .description('Generate a visual PNG preview of an HTML or Emmet file')
+  .option('-o, --output <file>', 'Output image destination', 'preview.png')
+  .option('-w, --width <pixels>', 'Viewport width', '400')
+  .option('-t, --theme <light|dark>', 'Emulated color scheme theme')
+  .action(previewCommand)
+
+const mcp = program
+  .command('mcp')
+  .description('Manage the Ignix-Lite MCP server')
+
+mcp
+  .command('setup [client]')
+  .description(
+    'Configure the MCP server for an editor/client (claude, cursor, gemini)'
+  )
+  .action(mcpSetupCommand)
+
+mcp
+  .command('start')
+  .description('Start the Ignix-Lite MCP server')
+  .action(mcpStartCommand)
+
+program.parse(process.argv)

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  clean: true,
+  dts: false,
+  banner: {
+    js: '#!/usr/bin/env node',
+  },
+})