@mindfiredigital/ignix-lite-engine 1.1.0

package/src/tools/intent-engine.ts

@@ -0,0 +1,215 @@
+import { searchIndex } from './search-index.js'
+import { getIntentEntries, scoreEntry } from '../utils/intent-parser.js'
+import { getTokenCount } from '../utils/tokenizer.js'
+import { tokenise } from '../utils/intent-helpers.js'
+import {
+  expandEmmet,
+  extractComponents,
+  interpolateEmmet
+} from '../utils/emmet-helpers.js'
+
+import type { IntentEntry } from '../utils/intent-parser.js'
+import type { MCPResponse } from '../types.js'
+
+
+type IntentMatch = {
+  name: string
+  emmet: string
+  score: number
+  source: 'intent-table' | 'vector-index'
+}
+
+const LAYER1_THRESHOLD = 15 // minimum score to trust an intent-table hit
+
+function searchIntentTable(description: string): IntentMatch | null {
+  const entries = getIntentEntries()
+  if (entries.length === 0) return null
+
+  const isStitchRequested =
+    /\b(and|plus|\+)\b/i.test(description) || description.includes(',')
+
+  const queryWords = tokenise(description)
+
+  const candidates: {
+    entry: IntentEntry
+    score: number
+    density: number
+    components: string[]
+  }[] = []
+  let bestSingle: (IntentMatch & { density: number }) | null = null
+
+  for (const entry of entries) {
+    const { score, density } = scoreEntry(entry, queryWords)
+    if (score >= LAYER1_THRESHOLD) {
+      const components = extractComponents(entry.emmet)
+      candidates.push({ entry, score, density, components })
+
+      const isBetter =
+        !bestSingle ||
+        score > bestSingle.score ||
+        (score === bestSingle.score && density > bestSingle.density)
+      if (isBetter) {
+        bestSingle = {
+          name: entry.name,
+          emmet: entry.emmet,
+          score,
+          density,
+          source: 'intent-table'
+        }
+      }
+    }
+  }
+
+  if (bestSingle && bestSingle.score >= 18) {
+    if (!isStitchRequested || bestSingle.score >= 25) {
+      return bestSingle
+    }
+  }
+
+  if (isStitchRequested && candidates.length >= 2) {
+    candidates.sort((a, b) => b.score - a.score || b.density - a.density)
+
+    const selected: typeof candidates = []
+    const usedComponents = new Set<string>()
+
+    for (const c of candidates) {
+      const hasOverlap = c.components.some((comp) => usedComponents.has(comp))
+      if (!hasOverlap) {
+        selected.push(c)
+        c.components.forEach((comp) => usedComponents.add(comp))
+      }
+    }
+
+    if (selected.length >= 2) {
+      selected.sort((a, b) => {
+        const indexA = description
+          .toLowerCase()
+          .indexOf(tokenise(a.entry.name)[0])
+        const indexB = description
+          .toLowerCase()
+          .indexOf(tokenise(b.entry.name)[0])
+        return indexA - indexB
+      })
+
+      const combinedEmmet = selected.map((s) => s.entry.emmet).join('+')
+      const totalScore = selected.reduce((sum, s) => sum + s.score, 0)
+
+      return {
+        name: selected.map((s) => s.entry.name).join(' and '),
+        emmet: combinedEmmet,
+        score: totalScore,
+        source: 'intent-table'
+      }
+    }
+  }
+
+  if (bestSingle && bestSingle.score >= 18) {
+    if (!isStitchRequested || bestSingle.score >= 25) {
+      return bestSingle
+    }
+  }
+  return null
+}
+
+
+function searchVectorLayer(description: string): IntentMatch | null {
+  const results = searchIndex(description)
+  if (results.length === 0) return null
+
+  const isStitchRequested =
+    /\b(and|plus|\+)\b/i.test(description) || description.includes(',')
+
+  if (isStitchRequested && results.length >= 2) {
+    const top = results[0]
+    const second = results[1]
+    if (top.name !== second.name && top.score >= 2.0 && second.score >= 2.0) {
+      const indexA = description.toLowerCase().indexOf(top.name.toLowerCase())
+      const indexB = description.toLowerCase().indexOf(second.name.toLowerCase())
+      const firstItem = indexA < indexB ? top : second
+      const secondItem = indexA < indexB ? second : top
+      return {
+        name: `${firstItem.name} and ${secondItem.name}`,
+        emmet: `${firstItem.emmet}+${secondItem.emmet}`,
+        score: (top.score + second.score) / 2,
+        source: 'vector-index'
+      }
+    }
+  }
+
+  const top = results[0]
+  return {
+    name: top.name,
+    emmet: top.emmet,
+    score: top.score,
+    source: 'vector-index'
+  }
+}
+
+
+export async function howToBuild(description: string): Promise<MCPResponse> {
+  let cleanDesc = description.trim()
+  if (cleanDesc.startsWith('{') && cleanDesc.endsWith('}')) {
+    try {
+      const parsed = JSON.parse(cleanDesc)
+      if (parsed && typeof parsed.description === 'string') {
+        cleanDesc = parsed.description
+      } else if (parsed && typeof parsed.text === 'string') {
+        cleanDesc = parsed.text
+      }
+    } catch {
+      // Ignore parsing errors, keep original string
+    }
+  }
+
+  // Layer 1 - fast, deterministic, hand-crafted intent table
+  let match = searchIntentTable(cleanDesc)
+
+  // Layer 2 - vector index fallback for novel / unknown queries
+  if (!match) {
+    match = searchVectorLayer(cleanDesc)
+  }
+
+  if (!match) {
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            emmet: '',
+            html: '',
+            components_used: [],
+            confidence: 0,
+            tokens: 0,
+            tokens_used: 15,
+            source: 'no-match',
+            suggestion:
+              'Call list_components() to see all available components, or try a different description.'
+          })
+        }
+      ]
+    }
+  }
+
+  // Apply dynamic interpolation to customize labels, types, and colors on the fly
+  const emmet = interpolateEmmet(match.emmet, cleanDesc)
+  const components_used = extractComponents(emmet)
+
+  const confidence = Math.min(1, match.score / 40)
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({
+          emmet,
+          html: expandEmmet(emmet),
+          components_used,
+          confidence: Number(confidence.toFixed(2)),
+          tokens: getTokenCount(emmet),
+          tokens_used: 15,
+          source: match.source // tells caller which layer matched
+        })
+      }
+    ]
+  }
+}

package/src/tools/list-components.ts

@@ -0,0 +1,20 @@
+import { manifests } from '../manifests/index.js'
+
+import type { MCPResponse } from '../types.js'
+
+export function listComponents(): MCPResponse {
+  const components = Object.keys(manifests).sort()
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({
+          components,
+          count: components.length,
+          tokens_used: components.length
+        })
+      }
+    ]
+  }
+}

package/src/tools/preview.ts

@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { chromium, webkit } from 'playwright'
+import { readFileSync, existsSync } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { expandEmmet } from '../utils/emmet-helpers.js'
+import type { MCPResponse } from '../types.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export type PreviewOptions = {
+  width?: number
+  theme?: string
+  scale?: number
+}
+
+export type PreviewArgs = {
+  input: string
+  options?: PreviewOptions
+}
+
+export async function preview(args: PreviewArgs): Promise<MCPResponse> {
+  const start = Date.now()
+  const { input, options = {} } = args
+  const { width = 400, scale = 2, theme } = options
+
+  // Sanitize width and scale to prevent emulation protocol crashes on non-positive values
+  const sanitizedWidth = typeof width === 'number' && width > 0 ? width : 400
+  const sanitizedScale = typeof scale === 'number' && scale > 0 ? scale : 2
+
+  // Expand Emmet to HTML if it doesn't look like standard HTML
+  const html = input.trim().startsWith('<') ? input : expandEmmet(input)
+
+  // Resolve CSS path by searching upwards for workspace root directory
+  let currentDir = __dirname
+  let rootDir = ''
+  for (let i = 0; i < 6; i++) {
+    if (
+      existsSync(path.join(currentDir, 'pnpm-workspace.yaml')) ||
+      (existsSync(path.join(currentDir, 'package.json')) &&
+        existsSync(path.join(currentDir, 'packages')))
+    ) {
+      rootDir = currentDir
+      break
+    }
+    const parent = path.dirname(currentDir)
+    if (parent === currentDir) break
+    currentDir = parent
+  }
+
+  let cssPath = ''
+  if (rootDir) {
+    cssPath = path.join(rootDir, 'packages/core/dist/ignix-lite.min.css')
+  }
+
+  // Fallback options
+  if (!cssPath || !existsSync(cssPath)) {
+    cssPath = path.resolve(
+      process.cwd(),
+      'packages/core/dist/ignix-lite.min.css'
+    )
+  }
+  if (!existsSync(cssPath)) {
+    cssPath = path.resolve(process.cwd(), '../core/dist/ignix-lite.min.css')
+  }
+  if (!existsSync(cssPath)) {
+    cssPath = path.resolve(__dirname, '../../../core/dist/ignix-lite.min.css')
+  }
+
+  let cssContent = ''
+  if (existsSync(cssPath)) {
+    cssContent = readFileSync(cssPath, 'utf8')
+  } else {
+    console.warn(`[preview] CSS file not found at: ${cssPath}`)
+  }
+
+  let browser
+  try {
+    browser = await webkit.launch({
+      headless: true
+    })
+
+    const context = await browser.newContext({
+      javaScriptEnabled: false,
+      viewport: {
+        width: sanitizedWidth,
+        height: 600
+      },
+      deviceScaleFactor: sanitizedScale,
+      colorScheme: (theme === 'dark' || theme === 'light') ? theme : undefined
+    })
+
+    const page = await context.newPage()
+
+    // Route interception (SSRF Mitigation & Sandbox Hardening)
+    // Only allow data URIs and about:blank. Block all outgoing HTTP/HTTPS traffic.
+    await page.route('**/*', (route) => {
+      const url = route.request().url()
+      if (url.startsWith('data:') || url === 'about:blank') {
+        route.continue()
+      } else {
+        route.abort()
+      }
+    })
+
+    // Set page content with Ignix-Lite styles injected
+    const pageContent = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:;">
+          <style>
+            body {
+              margin: 0;
+              padding: 16px;
+              background-color: var(--ix-surface, #f9fafb);
+              font-family: var(--ix-font, sans-serif);
+            }
+            #preview-container {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-wrap: wrap;
+              gap: 16px;
+              width: 100%;
+              box-sizing: border-box;
+            }
+            ${cssContent}
+          </style>
+        </head>
+        <body>
+          <div id="preview-container">${html}</div>
+        </body>
+      </html>
+    `
+    await page.setContent(pageContent, { waitUntil: 'load' })
+
+    // Take screenshot of container
+    const container = page.locator('#preview-container')
+    let base64Png = ''
+    try {
+      const buffer = await container.screenshot()
+      base64Png = buffer.toString('base64')
+    } catch (error) {
+      // Fallback to taking a full page screenshot if container has 0 size or fails
+      const buffer = await page.screenshot()
+      base64Png = buffer.toString('base64')
+    }
+
+    const duration = Date.now() - start
+
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            png: `data:image/png;base64,${base64Png}`,
+            width: sanitizedWidth,
+            render_ms: duration,
+            tokens_used: 5
+          })
+        }
+      ]
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    console.error('[preview] Render failed:', error)
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify({
+            error: `Preview render failed: ${errorMessage}`,
+            tokens_used: 5
+          })
+        }
+      ]
+    }
+  } finally {
+    if (browser) {
+      await browser.close()
+    }
+  }
+}

package/src/tools/search-index.ts

@@ -0,0 +1,82 @@
+import path from 'path'
+import { readFileSync, existsSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { embedText } from './embedder.js'
+import { cosineSimilarity } from '../utils/cosine.js'
+import { STOP_WORDS } from '../utils/intent-helpers.js'
+
+type IndexItem = {
+  name: string
+  emmet: string
+  searchable: string
+  embedding: number[]
+}
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+let _index: IndexItem[] | null = null
+
+function loadIndex(): IndexItem[] {
+  if (_index) return _index
+  const paths = [
+    path.resolve(__dirname, '../../dist/vector-index.json'),
+    path.resolve(__dirname, './vector-index.json'),
+    path.resolve(__dirname, '../vector-index.json')
+  ]
+  let indexPath = paths[0]
+  for (const p of paths) {
+    if (existsSync(p)) {
+      indexPath = p
+      break
+    }
+  }
+  if (!existsSync(indexPath)) {
+    console.warn(
+      `[search-index] dist/vector-index.json not found at: ${indexPath} - run pnpm build:index`
+    )
+    _index = []
+    return _index
+  }
+  try {
+    _index = JSON.parse(readFileSync(indexPath, 'utf8'))
+  } catch (err) {
+    console.error(`[search-index] Failed to load index from ${indexPath}:`, err)
+    _index = []
+  }
+  return _index!
+}
+
+export function searchIndex(description: string) {
+  const index = loadIndex()
+  const queryEmbedding = embedText(description)
+
+  const words = description.toLowerCase().split(/\s+/)
+  const ranked = index
+    .map((item) => {
+      const similarity = cosineSimilarity(queryEmbedding, item.embedding)
+      let boost = 0
+      const searchable = item.searchable.toLowerCase()
+
+      words.forEach((word) => {
+        if (STOP_WORDS.has(word) || word.length < 3) {
+          return
+        }
+        if (item.name.toLowerCase() === word) {
+          boost += 2
+        } else if (item.name.toLowerCase().includes(word)) {
+          boost += 1
+        }
+        if (searchable.includes(word)) {
+          boost += 0.3
+        }
+      })
+      return {
+        ...item,
+        score: similarity + boost
+      }
+    })
+    .sort((a, b) => b.score - a.score)
+  return ranked.slice(0, 3)
+}
+

package/src/tools/theme-palette.ts

@@ -0,0 +1,65 @@
+export interface ColorEntry {
+  primary: string
+  contrast: string
+}
+
+export const PALETTE: Record<string, ColorEntry> = {
+  red: { primary: '#ef4444', contrast: '#ffffff' },
+  orange: { primary: '#f97316', contrast: '#ffffff' },
+  amber: { primary: '#f59e0b', contrast: '#111827' },
+  yellow: { primary: '#eab308', contrast: '#111827' },
+  lime: { primary: '#84cc16', contrast: '#111827' },
+  green: { primary: '#22c55e', contrast: '#ffffff' },
+  emerald: { primary: '#10b981', contrast: '#ffffff' },
+  teal: { primary: '#14b8a6', contrast: '#ffffff' },
+  cyan: { primary: '#06b6d4', contrast: '#111827' },
+  sky: { primary: '#0ea5e9', contrast: '#111827' },
+  blue: { primary: '#3b82f6', contrast: '#ffffff' },
+  indigo: { primary: '#6366f1', contrast: '#ffffff' },
+  violet: { primary: '#8b5cf6', contrast: '#ffffff' },
+  purple: { primary: '#a855f7', contrast: '#ffffff' },
+  fuchsia: { primary: '#d946ef', contrast: '#ffffff' },
+  pink: { primary: '#ec4899', contrast: '#ffffff' },
+  rose: { primary: '#f43f5e', contrast: '#ffffff' },
+  cyberpunk: { primary: '#ec4899', contrast: '#ffffff' },
+  neon: { primary: '#d946ef', contrast: '#ffffff' },
+  eco: { primary: '#10b981', contrast: '#ffffff' },
+  forest: { primary: '#0f766e', contrast: '#ffffff' },
+  coffee: { primary: '#78350f', contrast: '#ffffff' },
+  ocean: { primary: '#0284c7', contrast: '#ffffff' },
+  sunset: { primary: '#f97316', contrast: '#ffffff' },
+  midnight: { primary: '#3730a3', contrast: '#ffffff' },
+  lavender: { primary: '#8b5cf6', contrast: '#ffffff' },
+  coral: { primary: '#f43f5e', contrast: '#ffffff' },
+  slate: { primary: '#64748b', contrast: '#ffffff' },
+  gold: { primary: '#d97706', contrast: '#111827' },
+  silver: { primary: '#94a3b8', contrast: '#111827' }
+}
+
+export function expandHex(hex: string): string {
+  const h = hex.replace('#', '')
+  return h.length === 3 ? '#' + h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : hex
+}
+
+export function contrastFor(hex6: string): string {
+  const h = hex6.replace('#', '')
+  const r = parseInt(h.substring(0, 2), 16)
+  const g = parseInt(h.substring(2, 4), 16)
+  const b = parseInt(h.substring(4, 6), 16)
+  return (r * 299 + g * 587 + b * 114) / 1000 > 165 ? '#111827' : '#ffffff'
+}
+
+export function resolveColor(query: string): ColorEntry {
+  const hexMatch = query.match(/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/)
+  if (hexMatch) {
+    const primary = expandHex(hexMatch[0])
+    return { primary, contrast: contrastFor(primary) }
+  }
+
+  const sorted = Object.keys(PALETTE).sort((a, b) => b.length - a.length)
+  for (const name of sorted) {
+    if (query.includes(name)) return PALETTE[name]
+  }
+
+  return { primary: '#6366f1', contrast: '#ffffff' }
+}