@mindfiredigital/ignix-lite-cli 1.1.0

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@mindfiredigital/ignix-lite-cli",
+  "version": "1.1.0",
+  "description": "CLI tool for Ignix-Lite project scaffolding, validation, and theming",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "ignix-lite": "./dist/index.js"
+  },
+  "dependencies": {
+    "commander": "^13.1.0",
+    "node-html-parser": "^7.1.0",
+    "ora": "^9.4.0",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2",
+    "zod": "^3.24.2",
+    "@mindfiredigital/ignix-lite-engine": "1.1.0",
+    "@mindfiredigital/ignix-lite-mcp": "1.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.8.0",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.5.1",
+    "typescript": "^5.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --no-error-on-unmatched-pattern",
+    "format": "prettier --write ."
+  }
+}

package/src/commands/add.ts

@@ -0,0 +1,146 @@
+import pc from 'picocolors'
+
+const COMPONENT_TEMPLATES: Record<string, string> = {
+  accordion: `<details>
+                    <summary>Accordion Title</summary>
+                    <p>Accordion contents goes here...</p>
+                </details>`,
+  alert: `<aside data-intent="info">
+                <strong>Head's up!</strong>
+                <span>This is a semantic alert component</span>
+            </aside>`,
+  avatar: `<span data-size="md">JD</span>`,
+  badge: `<mark data-intent="success">Saved</mark>`,
+  breadcrumb: `<nav aria-label="Breadcrumb">
+                    <ol>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="/docs" aria-current="page">Docs</a></li>
+                    </ol>
+                </nav>`,
+  button: `<button data-intent="primary">Save</button>`,
+  card: `<article>
+            <h2 slot="title">Card Title</h2>
+            <p slot="body">
+                This is the main card body content.
+            </p>
+        </article>`,
+  checkbox: `<label>
+                <input type="checkbox" />
+                Remember me
+            </label>`,
+  codeblock: `<pre><code data-lang="typescript">const greet = () => "Hello World";</code></pre>`,
+  combobox: `<ix-combobox>
+                    <label slot="control">
+                        Search
+                        <input type="text" placeholder="Search options..." />
+                    </label>
+                    <ul hidden>
+                        <li data-value="1">Option A</li>
+                        <li data-value="2">Option B</li>
+                    </ul>
+                </ix-combobox>`,
+  dialog: `<dialog id="confirm-modal" data-intent="danger">
+                <h2>Confirm Action</h2>
+                <p>Are you sure you want to proceed?</p>
+                <button>Cancel</button>
+                <button>Delete</button>
+            </dialog>`,
+  divider: `<hr />`,
+  dropdown: `<ix-dropdown>
+                <button slot="trigger">Options ▾</button>
+                <ul slot="menu" hidden>
+                    <li><button>Profile</button></li>
+                    <li><button>Settings</button></li>
+                </ul>
+            </ix-dropdown>`,
+  form: `<form>
+            <label>
+                Name
+                <input type="text" required />
+            </label>
+            <button type="submit" data-intent="primary">Submit</button>
+            </form>`,
+  grid: `<section data-grid="3">
+            <section>Column 1</section>
+            <section>Column 2</section>
+            <section>Column 3</section>
+            </section>`,
+
+  input: `<label>
+                Username
+            <input type="text" required placeholder="Enter Username..." />
+            </label>`,
+  meter: `<meter value="70" min="0" max="100" low="30" high="70" optimum="100"></meter>`,
+  navigation: `<nav aria-label="Main Navigation">
+                    <ul>
+                        <li><a href="/" aria-current="page">Home</a></li>
+                        <li><a href="/docs">Docs</a></li>
+                        <li><a href="/blog">Blog</a></li>
+                    </ul>
+                </nav>`,
+  progress: `<progress value="50" max="100"></progress>`,
+  radio: `<label>
+                <input type="radio" name="options" value="a" />
+                Option A
+            </label>`,
+  select: `<label>
+                Options
+                <select data-intent="primary">
+                    <option value="1">Option 1</option>
+                    <option value="2">Option 2</option>
+                </select>
+            </label>`,
+  skeleton: `<span aria-busy="true" data-shape="text"></span>`,
+  tabs: `<ix-tabs>
+                <button slot="tab" aria-selected="true">Tab 1</button>
+                <button slot="tab">Tab 2</button>
+                <section slot="panel">Content for Tab 1</section>
+                <section slot="panel" hidden>Content for Tab 2</section>
+            </ix-tabs>`,
+  table: `<table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Role</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Alice</td>
+                    <td>Developer</td>
+                </tr>
+            </tbody>
+            </table>`,
+  textarea: `<label>
+                Message
+                <textarea data-intent="primary" placeholder="Enter your message..."></textarea>
+              </label>`,
+  toast: `<ix-toast>
+                <aside data-intent="success" data-open="true">
+                    <strong>Success!</strong>
+                    <span>Action completed.</span>
+                </aside>
+            </ix-toast>`,
+  tooltip: `<ix-tooltip content="Helpful information">
+                <span>Hover me</span>
+            </ix-tooltip>`
+}
+
+export async function addCommand(component: string) {
+  const normalized = component.toLowerCase().trim()
+  const template = COMPONENT_TEMPLATES[normalized]
+
+  if (!template) {
+    console.log(pc.red(`Component "${component}" not found.`))
+
+    console.log(
+      pc.yellow(
+        `Available components : ${Object.keys(COMPONENT_TEMPLATES).join(', ')}`
+      )
+    )
+    return
+  }
+  console.log(pc.cyan(`\nTemplate for <${component}>:\n`))
+  console.log(template)
+  console.log('\n')
+}

package/src/commands/build.ts

@@ -0,0 +1,66 @@
+import { writeFileSync } from 'fs'
+import path from 'path'
+import pc from 'picocolors'
+import { howToBuild } from '@mindfiredigital/ignix-lite-engine'
+
+export async function buildCommand(
+  prompt: string,
+  options: {
+    output?: string
+    emmetOnly?: boolean
+  }
+) {
+  const response = await howToBuild(prompt)
+  if (!response.content || response.content.length === 0) {
+    console.log(
+      pc.red('Error: Intent synthesis engine returned an empty response.')
+    )
+    return
+  }
+
+  let data: {
+    source: string
+    suggestion?: string
+    emmet?: string
+    html?: string
+  }
+  try {
+    data = JSON.parse(response.content[0].text)
+  } catch {
+    console.log(
+      pc.red('Error: Failed to parse response from intent synthesis engine.')
+    )
+    return
+  }
+
+  if (!data || data.source === 'no-match') {
+    console.log(pc.red(`\nCould not synthesize UI for: "${prompt}"`))
+    console.log(pc.yellow(`Suggestion: ${data?.suggestion || 'Try clarifying your request.'}\n`))
+    return
+  }
+
+  const outputContent = options.emmetOnly ? data.emmet : data.html
+  if (!outputContent) {
+    console.log(pc.red('Error: Response does not contain any synthesized code.'))
+    return
+  }
+
+  if (options.output) {
+    try {
+      const absolutePath = path.resolve(process.cwd(), options.output)
+      writeFileSync(absolutePath, outputContent, 'utf8')
+      console.log(
+        pc.green(`\nSuccessfully wrote output to ${pc.blue(options.output)}\n`)
+      )
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err)
+      console.log(
+        pc.red(`Error: Failed to write output to file. ${msg}`)
+      )
+    }
+  } else {
+    console.log(pc.cyan('\nSynthesized Output:'))
+    console.log(outputContent)
+    console.log()
+  }
+}

package/src/commands/check-a11y.ts

@@ -0,0 +1,61 @@
+import { readFileSync, existsSync } from 'fs'
+import path from 'path'
+import pc from 'picocolors'
+import { auditA11y } from '@mindfiredigital/ignix-lite-engine'
+
+export async function checkA11yCommand(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 = auditA11y(html)
+
+  console.log(pc.bold(pc.cyan(`\n♿ Accessibility Audit Report`)))
+  console.log(pc.gray('═'.repeat(60)))
+  console.log(`${pc.bold('File:')}       ${pc.blue(filePath)}`)
+  console.log(`${pc.bold('Standards:')}  WCAG 2.2 ${pc.bold(result.wcag)}`)
+  console.log(
+    `${pc.bold('Summary:')}    Passed ${result.passes.length} rules, Found ${result.issues.length} issue(s)`
+  )
+
+  if (result.issues.length === 0) {
+    console.log(
+      pc.bold(
+        pc.green(`\n✔ PASS: No accessibility issues found! Score: 100/100`)
+      )
+    )
+  } else {
+    console.log(
+      pc.bold(
+        pc.red(
+          `\n✘ FAIL: Accessibility check failed. Score: ${result.score}/100\n`
+        )
+      )
+    )
+
+    result.issues.forEach((issue, idx) => {
+      const isError = issue.type === 'error'
+      const labelColor = isError ? pc.red : pc.yellow
+      const borderChar = isError ? '✘' : '⚠'
+
+      console.log(
+        pc.bold(
+          labelColor(
+            `[Issue ${idx + 1}] ${borderChar} ${issue.rule} (${issue.type.toUpperCase()})`
+          )
+        )
+      )
+      console.log(`  ${pc.bold('Element:')} ${issue.element}`)
+      console.log(`  ${pc.bold('Message:')} ${issue.message}`)
+      if (issue.fix) {
+        console.log(`  ${pc.bold('Fix:')}     ${pc.green(issue.fix)}`)
+      }
+      console.log()
+    })
+  }
+  console.log()
+}

package/src/commands/info.ts

@@ -0,0 +1,66 @@
+import pc from 'picocolors'
+import { manifests } from '@mindfiredigital/ignix-lite-engine'
+
+export function infoCommand(component: string) {
+  const name = component.toLowerCase().trim()
+  const manifest = manifests[name]
+
+  if (!manifest) {
+    console.log(pc.red(`\nError: Component "${component}" does not exist.`))
+    console.log(
+      `Run ${pc.yellow('ignix-lite list')} to see all available components.\n`
+    )
+    process.exit(1)
+  }
+
+  console.log(pc.bold(pc.cyan(`\n📦 Component: <${name.toUpperCase()}>`)))
+  console.log(pc.gray('═'.repeat(60)))
+  console.log(`${pc.bold('Description:')}    ${manifest.description}`)
+  console.log(
+    `${pc.bold('HTML Wrapper:')}   ${pc.yellow(`<${manifest.element}>`)}`
+  )
+  console.log(`${pc.bold('Default Emmet:')}  ${pc.green(manifest.emmet)}`)
+
+  if (manifest.props && Object.keys(manifest.props).length > 0) {
+    console.log(pc.bold(pc.blue('\n⚙  Attributes & Options:')))
+    console.log(pc.gray('  ' + '─'.repeat(56)))
+    Object.entries(manifest.props).forEach(([propName, propDef]) => {
+      const typeStr = pc.magenta(propDef.type)
+      const valuesStr = propDef.values
+        ? pc.dim(` [${propDef.values.join(', ')}]`)
+        : ''
+      const defaultStr =
+        propDef.default !== undefined
+          ? ` (default: ${pc.bold(String(propDef.default))})`
+          : ''
+      console.log(
+        `  ${pc.cyan('•')} ${pc.bold(propName.padEnd(15))} ${typeStr}${valuesStr}${defaultStr}`
+      )
+    })
+  }
+
+  if (manifest.slots && Object.keys(manifest.slots).length > 0) {
+    console.log(pc.bold(pc.blue('\n📥 Slots:')))
+    console.log(pc.gray('  ' + '─'.repeat(56)))
+    Object.entries(manifest.slots).forEach(([slotName, slotDef]) => {
+      const elementsStr = slotDef.element
+        ? pc.dim(` (tags: ${slotDef.element.join(', ')})`)
+        : ''
+      const requiredStr = slotDef.required ? pc.bold(pc.red(' (required)')) : ''
+      console.log(
+        `  ${pc.cyan('•')} ${pc.bold(slotName.padEnd(15))} ${requiredStr}${elementsStr}`
+      )
+    })
+  }
+
+  if (manifest.do && manifest.do.length > 0) {
+    console.log(pc.bold(pc.green('\n✔ Best Practices (Do):')))
+    manifest.do.forEach((rule) => console.log(`  ${pc.green('+')} ${rule}`))
+  }
+  if (manifest.dont && manifest.dont.length > 0) {
+    console.log(pc.bold(pc.red("\n✘ Avoid (Don't):")))
+    manifest.dont.forEach((rule) => console.log(`  ${pc.red('-')} ${rule}`))
+  }
+
+  console.log()
+}

package/src/commands/init.ts

@@ -0,0 +1,91 @@
+import fs from 'fs'
+import path from 'path'
+import prompts from 'prompts'
+import pc from 'picocolors'
+import ora from 'ora'
+
+export async function initCommand() {
+  console.log(
+    pc.cyan("Welcome to Ignix-Lite! Let's get your project set up.\n")
+  )
+
+  const response = await prompts([
+    {
+      type: 'select',
+      name: 'framework',
+      message: 'Which framework are you using?',
+      choices: [
+        { title: 'React', value: 'react' },
+        { title: 'Vue', value: 'vue' },
+        { title: 'Svelte', value: 'svelte' },
+        { title: 'Vanilla HTML', value: 'vanilla' }
+      ]
+    },
+    {
+      type: 'text',
+      name: 'stylePath',
+      message:
+        'Path to your main CSS file (where Ignix-Lite variables will be added):',
+      initial: 'src/index.css'
+    },
+    {
+      type: 'text',
+      name: 'primaryColor',
+      message: 'Default primary theme color (hex):',
+      initial: '#6366f1',
+      validate: (value: string) => {
+        const hexRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/
+        return hexRegex.test(value)
+          ? true
+          : 'Please enter a valid hex color code (e.g. #6366f1 or #fff)'
+      }
+    }
+  ])
+
+  if (!response.framework || !response.stylePath) {
+    console.log(pc.red('\nSetup cancelled.'))
+    return
+  }
+
+  const spinner = ora('Initializing project...').start()
+
+  // 1. Create ignix.config.json
+  const config = {
+    framework: response.framework,
+    style: response.stylePath,
+    theme: {
+      primary: response.primaryColor
+    }
+  }
+
+  fs.writeFileSync('ignix.config.json', JSON.stringify(config, null, 2))
+
+  // 2. Ensure CSS file exists and add initial theme block
+  const cssDir = path.dirname(response.stylePath)
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true })
+  }
+
+  const defaultThemeVars = `/* Ignix-Lite Custom Theme Variables */
+:root {
+  --ix-primary: ${response.primaryColor};
+  --ix-primary-hover: ${response.primaryColor}d0;
+  --ix-primary-contrast: #ffffff;
+  --ix-primary-bg: ${response.primaryColor}1a;
+}
+`
+
+  if (fs.existsSync(response.stylePath)) {
+    let content = fs.readFileSync(response.stylePath, 'utf-8')
+    if (!content.includes('--ix-primary')) {
+      content = defaultThemeVars + '\n' + content
+      fs.writeFileSync(response.stylePath, content)
+    }
+  } else {
+    fs.writeFileSync(response.stylePath, defaultThemeVars)
+  }
+
+  spinner.succeed(pc.green('Ignix-Lite initialized successfully!'))
+  console.log(`\nCreated ${pc.blue('ignix.config.json')}`)
+  console.log(`Updated theme variables in ${pc.blue(response.stylePath)}`)
+}

package/src/commands/list.ts

@@ -0,0 +1,22 @@
+import pc from 'picocolors'
+import { manifests } from '@mindfiredigital/ignix-lite-engine'
+
+export function listCommand() {
+  const components = Object.keys(manifests).sort()
+
+  console.log(pc.bold(pc.cyan('\n🔥 Ignix-Lite Components Catalog')))
+  console.log(pc.gray('═'.repeat(70)))
+
+  components.forEach((name) => {
+    const desc =
+      manifests[name].description || pc.gray('No description available')
+    console.log(
+      `  ${pc.bold(pc.green('●'))} ${pc.bold(name.padEnd(15))} ${pc.dim('→')} ${desc}`
+    )
+  })
+
+  console.log(pc.gray('═'.repeat(70)))
+  console.log(
+    pc.cyan(`Total: ${pc.bold(components.length)} components ready to use!\n`)
+  )
+}