@mindfiredigital/ignix-lite-engine 1.1.0

package/src/tools/theme-tokens.ts

@@ -0,0 +1,176 @@
+import { resolveColor } from './theme-palette.js'
+
+export interface ThemeTokens {
+  primary: string
+  primaryHover: string
+  primaryContrast: string
+  primaryBg: string
+
+  danger: string
+  dangerText: string
+  dangerBg: string
+
+  warning: string
+  warningBg: string
+
+  success: string
+  successBg: string
+
+  infoBg: string
+  neutral: string
+  divider: string
+
+  surface: string
+  surfaceRaised: string
+
+  text: string
+  textMuted: string
+  border: string
+
+  radius: string
+  radiusLg: string
+  badgeRadius: string
+
+  skeletonBg: string
+  skeletonShimmer: string
+
+  gradientStart: string
+  gradientEnd: string
+  gradientBgEnd: string
+
+  isDark: boolean
+  resolvedPrimary: string
+  resolvedContrast: string
+}
+
+export function resolveTokens(query: string): ThemeTokens {
+  const { primary, contrast } = resolveColor(query)
+
+  const isDark =
+    query.includes('dark') ||
+    query.includes('night') ||
+    query.includes('midnight') ||
+    query.includes('cyberpunk') ||
+    query.includes('dim')
+
+  const sharp =
+    query.includes('sharp') ||
+    query.includes('flat') ||
+    query.includes('square')
+  const round =
+    query.includes('round') || query.includes('pill') || query.includes('soft')
+
+  return {
+    resolvedPrimary: primary,
+    resolvedContrast: contrast,
+    isDark,
+
+    primary,
+    primaryHover: isDark
+      ? 'color-mix(in srgb, var(--ix-primary) 75%, white)'
+      : 'color-mix(in srgb, var(--ix-primary) 85%, black)',
+    primaryContrast: isDark
+      ? 'color-mix(in srgb, var(--ix-primary) 40%, white)'
+      : contrast,
+    primaryBg: isDark
+      ? 'color-mix(in srgb, var(--ix-primary) 20%, #0f172a)'
+      : 'color-mix(in srgb, var(--ix-primary) 15%, white)',
+
+    danger: '#ef4444',
+    dangerText: isDark ? '#f87171' : '#ef4444',
+    dangerBg: isDark ? '#3f1d1d' : '#fee2e2',
+
+    warning: isDark ? '#fbbf24' : '#f59e0b',
+    warningBg: isDark ? '#3f2e05' : '#fef3c7',
+
+    success: '#22c55e',
+    successBg: isDark ? '#052e16' : '#dcfce7',
+
+    infoBg: isDark ? '#1e293b' : '#f3f4f6',
+    neutral: isDark ? '#9ca3af' : '#6b7280',
+    divider: isDark ? '#475569' : '#9ca3af',
+
+    surface: isDark ? '#0f172a' : '#f9fafb',
+    surfaceRaised: isDark ? '#1e293b' : '#ffffff',
+
+    text: isDark ? '#f9fafb' : '#111827',
+    textMuted: isDark ? '#94a3b8' : '#6b7280',
+    border: isDark ? '#334155' : '#e5e7eb',
+
+    radius: sharp ? '0px' : round ? '0.75rem' : '0.375rem',
+    radiusLg: sharp ? '0px' : round ? '1rem' : '0.5rem',
+    badgeRadius: '999px',
+
+    skeletonBg: isDark ? '#1e293b' : '#e5e7eb',
+    skeletonShimmer: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.6)',
+
+    gradientStart: primary,
+    gradientEnd: '#fffbd5',
+    gradientBgEnd: isDark ? '#aba67a' : '#d7d4bc'
+  }
+}
+
+export function buildCss(t: ThemeTokens): string {
+  return `:root {
+  --ix-primary:          ${t.primary};
+  --ix-primary-hover:    ${t.primaryHover};
+  --ix-primary-contrast: ${t.primaryContrast};
+
+  --ix-danger:      ${t.danger};
+  --ix-danger-text: ${t.dangerText};
+
+  --ix-warning: ${t.warning};
+  --ix-success: ${t.success};
+  --ix-neutral: ${t.neutral};
+  --ix-ghost:   transparent;
+
+  --ix-primary-bg: ${t.primaryBg};
+  --ix-danger-bg:  ${t.dangerBg};
+  --ix-warning-bg: ${t.warningBg};
+  --ix-success-bg: ${t.successBg};
+  --ix-info-bg:    ${t.infoBg};
+
+  --ix-on-danger:  #ffffff;
+  --ix-on-warning: #000000;
+  --ix-on-success: #ffffff;
+  --ix-on-primary: ${t.resolvedContrast};
+
+  --ix-divider: ${t.divider};
+
+  --ix-surface:        ${t.surface};
+  --ix-surface-raised: ${t.surfaceRaised};
+
+  --ix-text:       ${t.text};
+  --ix-text-muted: ${t.textMuted};
+
+  --ix-border: ${t.border};
+  --ix-focus:  2px solid var(--ix-primary);
+
+  --ix-font: 'Segoe UI Variable', 'Segoe UI', 'Roboto', 'Noto Sans', system-ui, sans-serif;
+  --ix-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
+
+  --ix-size-xs: 0.75rem;
+  --ix-size-sm: 0.875rem;
+  --ix-size-md: 1rem;
+  --ix-size-lg: 1.125rem;
+  --ix-size-xl: 1.25rem;
+
+  --ix-line-height: 1.5;
+
+  --ix-space-sm: 0.5rem;
+  --ix-space-md: 1rem;
+  --ix-space-lg: 1.5rem;
+
+  --ix-radius:       ${t.radius};
+  --ix-radius-lg:    ${t.radiusLg};
+  --ix-badge-radius: ${t.badgeRadius};
+
+  --ix-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  --ix-gradient:    linear-gradient(to right, ${t.gradientStart}, ${t.gradientEnd});
+  --ix-gradient-bg: linear-gradient(to right, ${t.gradientStart}, ${t.gradientBgEnd});
+
+  --ix-skeleton-bg:      ${t.skeletonBg};
+  --ix-skeleton-shimmer: ${t.skeletonShimmer};
+}`
+}

package/src/tools/token-counter.ts

@@ -0,0 +1,59 @@
+import type { MCPResponse } from '../types.js'
+
+export type CallRecord = {
+  tool: string
+  tokens_used: number
+  timestamp: number
+}
+
+let totalTokensUsed = 0
+const calls: CallRecord[] = []
+const sessionId = Math.random().toString(36).substring(2, 15)
+
+const MAX_CALL_HISTORY = 1000
+
+export function recordCall(toolName: string, tokensUsed: number): void {
+  const parsedTokens = Number(tokensUsed)
+  const validTokens =
+    isNaN(parsedTokens) || parsedTokens < 0 || !isFinite(parsedTokens)
+      ? 0
+      : parsedTokens
+
+  if (calls.length >= MAX_CALL_HISTORY) {
+    calls.shift()
+  }
+  calls.push({
+    tool: toolName,
+    tokens_used: validTokens,
+    timestamp: Date.now()
+  })
+  totalTokensUsed += validTokens
+}
+
+export function getTokenSummary(
+  args: { context_window?: number } = {}
+): MCPResponse {
+  const contextWindowInput = args.context_window || 128000
+  const parsedWindow = Number(contextWindowInput)
+  const contextWindow =
+    isNaN(parsedWindow) || parsedWindow <= 0 || !isFinite(parsedWindow)
+      ? 128000
+      : parsedWindow
+
+  const pct = Number(((totalTokensUsed / contextWindow) * 100).toFixed(4))
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({
+          session_id: sessionId,
+          calls,
+          total_tokens_used: totalTokensUsed,
+          estimated_context_pct: pct,
+          tokens_used: 20
+        })
+      }
+    ]
+  }
+}

package/src/tools/validator.ts

@@ -0,0 +1,353 @@
+import { parse } from 'node-html-parser'
+import { manifests } from '../manifests/index.js'
+import type { ManifestSlot } from '../types.js'
+
+type ErrorType =
+    | 'UNKNOWN_ATTRIBUTE'
+    | 'INVALID_VALUE'
+    | 'FORBIDDEN_CLASS'
+    | 'MISSING_REQUIRED'
+    | 'WRONG_ELEMENT'
+    | 'PROP_EXPLOSION'
+    | 'JS_ON_CSS_COMPONENT'
+    | 'MISSING_SLOT'
+
+export type ValidationError = {
+    element: string
+    prop: string
+    type: ErrorType
+    message: string
+    suggestion?: string
+    valid_values?: string[]
+    fix: string
+    confidence: number
+    line: number
+}
+
+function getLineNumber(html: string, index: number): number {
+    if (index === undefined || index === null) return 1
+    return html.substring(0, index).split('\n').length
+}
+
+export function validateHtml(html: string): { valid: boolean, score: number, errors: ValidationError[] } {
+    const root = parse(html)
+    const errors: ValidationError[] = []
+    const elements = root.querySelectorAll('*')
+
+    const allowedWrappers = [
+        'label',
+        'span',
+        'p',
+        'img',
+        'small',
+        'h1',
+        'h2',
+        'h3',
+        'a',
+        'button',
+        'ul',
+        'li',
+        'thead',
+        'tbody',
+        'tr',
+        'td',
+        'th',
+        'summary',
+        'strong',
+        'code',
+        'em',
+        'b',
+        'i',
+        'time'
+    ]
+
+    const nativeAttributes = new Set([
+        'id',
+        'role',
+        'slot',
+        'tabindex',
+        'aria-label',
+        'aria-live',
+        'aria-hidden',
+        'aria-expanded',
+        'aria-selected',
+        'aria-current',
+        'aria-sort',
+        'aria-invalid',
+        'aria-describedby',
+        'aria-labelledby',
+        'aria-haspopup',
+        'aria-busy',
+        'disabled',
+        'required',
+        'checked',
+        'multiple',
+        'readonly',
+        'type',
+        'value',
+        'placeholder',
+        'name',
+        'autocomplete',
+        'min',
+        'max',
+        'low',
+        'high',
+        'optimum',
+        'rows',
+        'open',
+        'hidden',
+        'href',
+        'content',
+        'is',
+        'src',
+        'alt',
+        'data-intent',
+        'data-position',
+        'data-variant',
+        'data-shape',
+        'data-sortable',
+        'data-open',
+        'data-lines',
+        'data-grid',
+        'data-gap',
+        'data-align',
+        'data-justify',
+        'data-col',
+        'data-row',
+        'data-dense',
+        'data-ix-manifest'
+    ])
+
+    for (const el of elements) {
+        const tag = el.tagName.toLowerCase()
+        const attrs = el.attributes
+        const startIdx = el.range ? el.range[0] : 0
+        const line = getLineNumber(html, startIdx)
+
+        const dataIxManifest = el.getAttribute('data-ix-manifest')
+        let manifestKey = dataIxManifest || (tag.startsWith('ix-') ? tag.slice(3) : tag)
+
+        if (tag === 'table' && attrs.is === 'ix-table') {
+            manifestKey = 'table'
+        }
+
+        if (tag === 'nav') {
+            manifestKey = 'navigation'
+        }
+
+        if (tag === 'article' && el.querySelector('[slot]')) {
+            manifestKey = 'card'
+        }
+
+        if (tag === 'aside') {
+            manifestKey = 'alert'
+        }
+
+        if (tag === 'details') {
+            manifestKey = 'accordion'
+        }
+
+        if (tag === 'hr') {
+            manifestKey = 'divider'
+        }
+
+        let manifest = manifests[manifestKey]
+
+        if (!manifest) {
+            if (tag === 'mark') {
+                manifest = manifests.badge
+            }
+            if (tag === 'span' && attrs.role === 'status') {
+                manifest = manifests.badge
+            }
+        }
+
+        if (!manifest && !allowedWrappers.includes(tag)) {
+            errors.push({
+                element: tag,
+                prop: '',
+                type: 'WRONG_ELEMENT',
+                message: `<${tag}> is not a valid ignix-lite component`,
+                fix: `<button>Fix me</button>`,
+                confidence: 0.7,
+                line
+            })
+            continue
+        }
+
+        if (!manifest) continue
+
+        const elementName = tag.startsWith('ix-') ? tag : manifest.element || tag
+
+        if (manifest.required_wrapper) {
+            const parent = el.parentNode as unknown as { tagName?: string }
+            if (!parent || parent.tagName?.toLowerCase() !== manifest.required_wrapper) {
+                errors.push({
+                    element: tag,
+                    prop: 'wrapper',
+                    type: 'MISSING_REQUIRED',
+                    message: `<${tag}> must be inside <${manifest.required_wrapper}>`,
+                    fix: `<${manifest.required_wrapper}><${elementName}></${elementName}></${manifest.required_wrapper}>`,
+                    confidence: 0.95,
+                    line
+                })
+            }
+        }
+
+        if (tag === 'span' && manifest.component === 'badge' && attrs.role !== 'status') {
+            errors.push({
+                element: tag,
+                prop: 'role',
+                type: 'INVALID_VALUE',
+                message: 'span badge must have role=status',
+                fix: `<span role="status">${el.innerText}</span>`,
+                confidence: 0.9,
+                line
+            })
+        }
+
+        if ('class' in attrs) {
+            errors.push({
+                element: tag,
+                prop: 'class',
+                type: 'FORBIDDEN_CLASS',
+                message: 'class attribute not allowed',
+                fix: `<${elementName}>${el.innerText}</${elementName}>`,
+                confidence: 0.99,
+                line
+            })
+        }
+
+        const nonFreeAttrs = Object.keys(attrs).filter(
+            (key) => key !== 'id' && key !== 'role' && !key.startsWith('aria-')
+        )
+        if (nonFreeAttrs.length > 4) {
+            errors.push({
+                element: tag,
+                prop: 'multiple',
+                type: 'PROP_EXPLOSION',
+                message: 'Too many props',
+                fix: `<${elementName}></${elementName}>`,
+                confidence: 0.85,
+                line
+            })
+        }
+
+        for (const attr of Object.keys(attrs)) {
+            if (attr.startsWith('on')) {
+                errors.push({
+                    element: tag,
+                    prop: attr,
+                    type: 'JS_ON_CSS_COMPONENT',
+                    message: 'JS handlers forbidden',
+                    fix: `<${elementName}></${elementName}>`,
+                    confidence: 0.95,
+                    line
+                })
+            }
+        }
+
+        for (const attr of Object.keys(attrs)) {
+            if (manifest.forbidden_props?.includes(attr)) {
+                errors.push({
+                    element: tag,
+                    prop: attr,
+                    type: 'UNKNOWN_ATTRIBUTE',
+                    message: `'${attr}' forbidden`,
+                    fix: `<${elementName}></${elementName}>`,
+                    confidence: 0.98,
+                    line
+                })
+                continue
+            }
+
+            if (!manifest.props?.[attr] && !nativeAttributes.has(attr)) {
+                errors.push({
+                    element: tag,
+                    prop: attr,
+                    type: 'UNKNOWN_ATTRIBUTE',
+                    message: `'${attr}' invalid`,
+                    fix: `<${elementName}></${elementName}>`,
+                    confidence: 0.95,
+                    line
+                })
+            }
+        }
+
+        for (const attr of Object.keys(attrs)) {
+            const def = manifest.props?.[attr]
+            if (def?.values) {
+                const value = attrs[attr]
+                if (!def.values.includes(value)) {
+                    errors.push({
+                        element: tag,
+                        prop: attr,
+                        type: 'INVALID_VALUE',
+                        message: `'${value}' invalid`,
+                        valid_values: def.values,
+                        fix: `<${elementName} ${attr}="${def.values[0]}"></${elementName}>`,
+                        confidence: 0.97,
+                        line
+                    })
+                }
+            }
+        }
+
+        for (const req of manifest.required_props || []) {
+            if (!(req in attrs)) {
+                errors.push({
+                    element: tag,
+                    prop: req,
+                    type: 'MISSING_REQUIRED',
+                    message: `Missing ${req}`,
+                    fix: `<${elementName} ${req}=""></${elementName}>`,
+                    confidence: 0.9,
+                    line
+                })
+            }
+        }
+
+        const slots = manifest.slots ?? {}
+        for (const [slotName, slotDefVal] of Object.entries(slots)) {
+            const slotDef = slotDefVal as ManifestSlot
+            const child = el.querySelector(`[slot="${slotName}"]`)
+
+            if (slotDef.required && !child) {
+                errors.push({
+                    element: tag,
+                    prop: slotName,
+                    type: 'MISSING_SLOT',
+                    message: `Missing slot ${slotName}`,
+                    fix: `<${elementName}><span slot="${slotName}"></span></${elementName}>`,
+                    confidence: 0.95,
+                    line
+                })
+            }
+
+            if (child && slotDef.element) {
+                const childTag = child.tagName.toLowerCase()
+                if (!slotDef.element.includes(childTag)) {
+                    errors.push({
+                        element: childTag,
+                        prop: slotName,
+                        type: 'INVALID_VALUE',
+                        message: `${childTag} invalid for slot ${slotName}`,
+                        valid_values: slotDef.element,
+                        fix: `<${slotDef.element[0]} slot="${slotName}"></${slotDef.element[0]}>`,
+                        confidence: 0.95,
+                        line
+                    })
+                }
+            }
+        }
+    }
+
+    const valid = errors.length === 0
+    const score = valid ? 100 : Math.max(0, 100 - errors.length * 10)
+
+    return {
+        valid,
+        score,
+        errors
+    }
+}

package/src/types.ts

@@ -0,0 +1,63 @@
+export type ToolName =
+  | 'list_components'
+  | 'get_manifest'
+  | 'get_emmet'
+  | 'validate'
+
+export type ToolRequest = {
+  params: {
+    name: ToolName
+
+    arguments?: unknown
+  }
+}
+
+export type MCPResponse = {
+  content: {
+    type: 'text'
+    text: string
+
+  }[]
+}
+
+export type ManifestProp = {
+  type: string
+  values?: string[]
+  default?: string | boolean
+  native?: boolean
+  agent_hint?: string
+}
+
+export type ManifestSlot = {
+  required: boolean
+  element: string[]
+  agent_hint?: string
+}
+
+export type ManifestExample = {
+  label: string
+  emmet: string
+  html: string
+}
+
+export type Manifest = {
+  component: string
+  version: string
+  description: string
+  element: string
+  emmet: string
+  tokens: number
+  props: Record<string, ManifestProp>
+  slots?: Record<string, ManifestSlot>
+  states?: string[]
+  forbidden_props?: string[]
+  required_props?: string[]
+  required_slots?: string[]
+  required_wrapper?: string
+  methods?: string[]
+  do?: string[]
+  dont?: string[]
+  examples?: ManifestExample[]
+  extends?: string
+  
+}