designlang 8.0.0 → 10.0.0

package/src/classifiers/smart.js

@@ -0,0 +1,130 @@
+// Optional LLM fallback for low-confidence classifications. No SDK deps — we
+// hit the OpenAI or Anthropic REST API directly via global fetch. Runs only
+// when the user passes --smart AND an API key is available in env. Silently
+// no-ops otherwise so the core extractor stays zero-config.
+//
+// Consumers call `refineWithSmart({ pageIntent, sectionRoles, materialLanguage,
+// componentLibrary }, digest)` — we only hit the network for fields where
+// `needsSmart` is true.
+
+const TASKS = {
+  pageIntent: {
+    system: 'You classify a web page into one of these types: landing, pricing, docs, blog, blog-post, product, about, dashboard, auth, legal, unknown. Return only a JSON object {"type":"...","confidence":0.xx,"why":"one sentence"}.',
+  },
+  materialLanguage: {
+    system: 'You classify a website\'s visual material language. Choose one of: glassmorphism, neumorphism, flat, brutalist, skeuomorphic, material-you, soft-ui, mixed. Return only a JSON object {"label":"...","confidence":0.xx,"why":"one sentence"}.',
+  },
+  componentLibrary: {
+    system: 'You identify which UI component library a website most likely uses. Choose from: shadcn/ui, radix-ui, headlessui, mui, chakra-ui, mantine, ant-design, bootstrap, heroui, tailwind-ui, vuetify, tailwindcss, unknown. Return only a JSON object {"library":"...","confidence":0.xx,"why":"one sentence"}.',
+  },
+};
+
+function detectProvider() {
+  if (process.env.ANTHROPIC_API_KEY) return 'anthropic';
+  if (process.env.OPENAI_API_KEY) return 'openai';
+  return null;
+}
+
+function buildDigest({ rawData, design, pageIntent }) {
+  // A compact digest — URL, title, meta description, first 1000 chars of
+  // visible text, top classes. Keep under ~3k tokens.
+  const sections = (rawData?.light?.sections) || [];
+  const text = sections.map(s => s.text || '').join('\n').slice(0, 1500);
+  const metas = (rawData?.light?.stack?.metas || []).slice(0, 10)
+    .map(m => `${m.name || ''}: ${(m.content || '').slice(0, 120)}`).join('\n');
+  const classes = (rawData?.light?.stack?.classNameSample || []).slice(0, 60).join(' | ').slice(0, 1500);
+  return [
+    `URL: ${rawData?.url || ''}`,
+    `TITLE: ${rawData?.title || ''}`,
+    `PATH: ${pageIntent?.path || ''}`,
+    `METAS:\n${metas}`,
+    `SECTION ROLES: ${(design?.regions || []).map(r => r.role).join(',')}`,
+    `TEXT SAMPLE:\n${text}`,
+    `CLASS SAMPLE:\n${classes}`,
+  ].join('\n\n');
+}
+
+async function callAnthropic(system, user) {
+  const res = await fetch('https://api.anthropic.com/v1/messages', {
+    method: 'POST',
+    headers: {
+      'x-api-key': process.env.ANTHROPIC_API_KEY,
+      'anthropic-version': '2023-06-01',
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      model: process.env.DESIGNLANG_MODEL || 'claude-haiku-4-5-20251001',
+      max_tokens: 200,
+      system,
+      messages: [{ role: 'user', content: user }],
+    }),
+  });
+  if (!res.ok) throw new Error(`anthropic ${res.status}`);
+  const json = await res.json();
+  const text = (json.content || []).map(b => b.text || '').join('');
+  return text;
+}
+
+async function callOpenAI(system, user) {
+  const res = await fetch('https://api.openai.com/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      model: process.env.DESIGNLANG_MODEL || 'gpt-4o-mini',
+      messages: [
+        { role: 'system', content: system },
+        { role: 'user', content: user },
+      ],
+      max_tokens: 200,
+      response_format: { type: 'json_object' },
+    }),
+  });
+  if (!res.ok) throw new Error(`openai ${res.status}`);
+  const json = await res.json();
+  return json.choices?.[0]?.message?.content || '';
+}
+
+async function callLLM(provider, system, user) {
+  if (provider === 'anthropic') return callAnthropic(system, user);
+  return callOpenAI(system, user);
+}
+
+function parseJsonLoose(text) {
+  try { return JSON.parse(text); } catch { /* try to find a JSON object */ }
+  const m = text.match(/\{[\s\S]*\}/);
+  if (m) { try { return JSON.parse(m[0]); } catch {} }
+  return null;
+}
+
+export async function refineWithSmart({ enabled, rawData, design, pageIntent, sectionRoles, materialLanguage, componentLibrary }) {
+  if (!enabled) return { applied: false, reason: 'disabled' };
+  const provider = detectProvider();
+  if (!provider) return { applied: false, reason: 'no API key (set OPENAI_API_KEY or ANTHROPIC_API_KEY)' };
+
+  const digest = buildDigest({ rawData, design, pageIntent });
+  const updates = {};
+  const errors = [];
+
+  const queue = [];
+  if (pageIntent?.needsSmart) queue.push(['pageIntent', pageIntent]);
+  if (materialLanguage && (materialLanguage.confidence || 0) < 0.55) queue.push(['materialLanguage', materialLanguage]);
+  if (componentLibrary?.needsSmart) queue.push(['componentLibrary', componentLibrary]);
+
+  for (const [task, current] of queue) {
+    const spec = TASKS[task];
+    if (!spec) continue;
+    const user = `Digest:\n${digest}\n\nCurrent heuristic result:\n${JSON.stringify(current)}\n\nRespond with the requested JSON.`;
+    try {
+      const raw = await callLLM(provider, spec.system, user);
+      const parsed = parseJsonLoose(raw);
+      if (parsed) updates[task] = { ...parsed, smart: true, provider };
+    } catch (e) {
+      errors.push(`${task}: ${e.message}`);
+    }
+  }
+
+  return { applied: true, provider, updates, errors };
+}

package/src/crawler.js

@@ -559,6 +559,11 @@ async function extractPageData(page, ignoreSelectors, scopeSelector) {
         zIndex: cs.zIndex,
         transition: cs.transition,
         animation: cs.animation,
+        animationTimeline: cs.animationTimeline || cs.getPropertyValue('animation-timeline') || '',
+        animationRangeStart: cs.getPropertyValue('animation-range-start') || '',
+        animationRangeEnd: cs.getPropertyValue('animation-range-end') || '',
+        viewTimelineName: cs.getPropertyValue('view-timeline-name') || '',
+        scrollTimelineName: cs.getPropertyValue('scroll-timeline-name') || '',
         display: cs.display,
         position: cs.position,
         flexDirection: cs.flexDirection,
@@ -757,10 +762,25 @@ async function extractPageData(page, ignoreSelectors, scopeSelector) {
         parseFloat(cs.fontSize) || 0,
         parseFloat(cs.fontWeight) || 0,
       ];
+      const text = ((el.innerText || el.textContent || '') + '').trim().slice(0, 160);
+      const slots = Array.from(el.children).slice(0, 8).map(c => {
+        const tagName = c.tagName.toLowerCase();
+        let role = 'content';
+        if (tagName === 'svg' || tagName === 'img' || c.querySelector?.('svg,img')) role = 'icon';
+        else if (/badge|pill|tag|chip/i.test(c.className || '')) role = 'badge';
+        else if (/h[1-6]/.test(tagName) || /title|heading/i.test(c.className || '')) role = 'heading';
+        else if (/description|subtitle|text|body/i.test(c.className || '')) role = 'text';
+        return { tag: tagName, role, text: ((c.innerText || c.textContent || '') + '').trim().slice(0, 80) };
+      });
       results.componentCandidates.push({
         kind,
         structuralHash: structuralHashOf(el),
         styleVector,
+        text,
+        slots,
+        disabled: el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true',
+        variantHint: (cls.match(/\b(primary|secondary|tertiary|ghost|outline|solid|destructive|danger|success|warning|link|subtle)\b/) || [])[1] || '',
+        sizeHint: (cls.match(/\b(xs|sm|md|lg|xl|small|medium|large)\b/) || [])[1] || '',
         css: {
           background: cs.backgroundColor,
           color: cs.color,

package/src/drift.js

@@ -0,0 +1,137 @@
+// designlang drift <url> --tokens <file>
+// Compares local project tokens against the live site and reports what's drifted.
+// Designed for CI/CD: exits non-zero when drift exceeds the tolerance budget.
+
+import { readFileSync } from 'fs';
+import { extname } from 'path';
+import { extractDesignLanguage } from './index.js';
+
+function flattenDtcg(obj, prefix = '', out = {}) {
+  for (const [k, v] of Object.entries(obj || {})) {
+    if (k.startsWith('$')) continue;
+    if (v && typeof v === 'object') {
+      if ('$value' in v) {
+        out[prefix ? `${prefix}.${k}` : k] = v.$value;
+      } else {
+        flattenDtcg(v, prefix ? `${prefix}.${k}` : k, out);
+      }
+    }
+  }
+  return out;
+}
+
+function loadLocalTokens(file) {
+  const raw = readFileSync(file, 'utf8');
+  const ext = extname(file);
+  if (ext === '.json') {
+    const j = JSON.parse(raw);
+    const flat = flattenDtcg(j);
+    if (Object.keys(flat).length) return flat;
+    const out = {};
+    for (const [group, entries] of Object.entries(j)) {
+      if (!entries || typeof entries !== 'object') continue;
+      for (const [k, v] of Object.entries(entries)) out[`${group}.${k}`] = String(v);
+    }
+    return out;
+  }
+  if (ext === '.css') {
+    const out = {};
+    for (const m of raw.matchAll(/--([\w-]+):\s*([^;]+);/g)) out[m[1]] = m[2].trim();
+    return out;
+  }
+  throw new Error(`Unsupported token file: ${ext}`);
+}
+
+function hexToRgb(h) {
+  const m = h.replace('#', '').match(/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : null;
+}
+
+function colorDistance(a, b) {
+  const ra = hexToRgb(a), rb = hexToRgb(b);
+  if (!ra || !rb) return Infinity;
+  return Math.sqrt(ra.reduce((s, v, i) => s + (v - rb[i]) ** 2, 0));
+}
+
+function findNearest(value, palette) {
+  if (!/^#[\da-f]{6}$/i.test(value)) return null;
+  let best = { distance: Infinity, token: null };
+  for (const p of palette) {
+    if (!/^#[\da-f]{6}$/i.test(p.hex || '')) continue;
+    const d = colorDistance(value, p.hex);
+    if (d < best.distance) best = { distance: d, token: p };
+  }
+  return best;
+}
+
+export async function checkDrift(url, { tokens: tokensFile, tolerance = 8, options = {} } = {}) {
+  const local = loadLocalTokens(tokensFile);
+  const design = await extractDesignLanguage(url, options);
+  const livePalette = design.colors?.all || [];
+
+  const drifted = [];
+  const matched = [];
+  const unknown = [];
+
+  for (const [name, value] of Object.entries(local)) {
+    if (!/^#[\da-f]{3,8}$/i.test(String(value))) continue; // only color tokens for now
+    const hex = value.length === 4 ? '#' + value.slice(1).split('').map(c => c + c).join('') : value;
+    const nearest = findNearest(hex, livePalette);
+    if (!nearest || nearest.distance === Infinity) { unknown.push({ name, value: hex }); continue; }
+    if (nearest.distance > tolerance) {
+      drifted.push({
+        token: name,
+        local: hex,
+        nearestLive: nearest.token.hex,
+        distance: Math.round(nearest.distance),
+        role: nearest.token.role || 'unknown',
+      });
+    } else {
+      matched.push({ token: name, local: hex, liveMatch: nearest.token.hex, distance: Math.round(nearest.distance) });
+    }
+  }
+
+  const driftRatio = drifted.length / Math.max(1, drifted.length + matched.length);
+  const verdict = driftRatio === 0 ? 'in-sync' : driftRatio < 0.15 ? 'minor-drift' : driftRatio < 0.4 ? 'notable-drift' : 'major-drift';
+
+  return {
+    url,
+    tokensFile,
+    tolerance,
+    verdict,
+    driftRatio: +driftRatio.toFixed(3),
+    drifted,
+    matched,
+    unknown,
+    summary: {
+      total: drifted.length + matched.length,
+      drifted: drifted.length,
+      matched: matched.length,
+      unknown: unknown.length,
+    },
+  };
+}
+
+export function formatDriftMarkdown(r) {
+  const lines = [
+    `# designlang drift report`,
+    ``,
+    `**Live site:** ${r.url}`,
+    `**Local tokens:** ${r.tokensFile}`,
+    `**Verdict:** ${r.verdict} (drift ratio: ${r.driftRatio})`,
+    ``,
+    `| metric | count |`,
+    `|---|---|`,
+    `| total color tokens | ${r.summary.total} |`,
+    `| matched | ${r.summary.matched} |`,
+    `| drifted | ${r.summary.drifted} |`,
+    `| unknown | ${r.summary.unknown} |`,
+    ``,
+  ];
+  if (r.drifted.length) {
+    lines.push(`## Drifted tokens`, ``, `| token | local | nearest live | Δ |`, `|---|---|---|---|`);
+    for (const d of r.drifted) lines.push(`| \`${d.token}\` | \`${d.local}\` | \`${d.nearestLive}\` (${d.role}) | ${d.distance} |`);
+    lines.push('');
+  }
+  return lines.join('\n');
+}

package/src/extractors/component-anatomy.js

@@ -0,0 +1,123 @@
+// Component Anatomy v2 — builds per-kind anatomy trees, variant × state matrices,
+// and typed prop surfaces that downstream generators can turn into stubs.
+
+const KNOWN_VARIANTS = ['primary', 'secondary', 'tertiary', 'ghost', 'outline', 'solid', 'destructive', 'danger', 'success', 'warning', 'link', 'subtle'];
+const KNOWN_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', 'small', 'medium', 'large'];
+
+function slotFingerprint(slots = []) {
+  return slots.map(s => s.role).join('>');
+}
+
+function inferSlots(slots = [], kind) {
+  const roles = new Set(slots.map(s => s.role));
+  if (kind === 'button') {
+    return {
+      label: true,
+      icon: roles.has('icon'),
+      badge: roles.has('badge'),
+    };
+  }
+  if (kind === 'card') {
+    return {
+      heading: roles.has('heading'),
+      description: roles.has('text'),
+      media: roles.has('icon'),
+      footer: slots.length > 3,
+    };
+  }
+  if (kind === 'input') {
+    return { leading: roles.has('icon'), trailing: false };
+  }
+  return {};
+}
+
+function dominant(arr) {
+  const counts = {};
+  for (const v of arr) counts[v] = (counts[v] || 0) + 1;
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])[0]?.[0] || '';
+}
+
+export function extractComponentAnatomy(candidates = []) {
+  const byKind = {};
+  for (const c of candidates) {
+    const k = c.kind || 'other';
+    (byKind[k] ||= []).push(c);
+  }
+
+  const anatomies = [];
+  for (const [kind, items] of Object.entries(byKind)) {
+    if (items.length < 2) continue;
+
+    // Group variants by explicit class hint, fall back to style vector.
+    const variantGroups = {};
+    for (const it of items) {
+      const v = it.variantHint || 'default';
+      (variantGroups[v] ||= []).push(it);
+    }
+
+    const variants = Object.entries(variantGroups).map(([name, vs]) => {
+      const sizes = {};
+      for (const it of vs) {
+        const sz = it.sizeHint || 'default';
+        (sizes[sz] ||= []).push(it);
+      }
+      return {
+        name,
+        count: vs.length,
+        states: {
+          default: { count: vs.filter(v => !v.disabled).length, css: vs.find(v => !v.disabled)?.css || null },
+          disabled: { count: vs.filter(v => v.disabled).length, css: vs.find(v => v.disabled)?.css || null },
+        },
+        sizes: Object.entries(sizes).map(([sName, sItems]) => ({ name: sName, count: sItems.length, css: sItems[0].css })),
+        sampleText: vs.slice(0, 5).map(v => v.text).filter(Boolean),
+      };
+    }).sort((a, b) => b.count - a.count);
+
+    const slotSignatures = items.map(i => slotFingerprint(i.slots));
+    const anatomy = {
+      kind,
+      totalInstances: items.length,
+      slots: inferSlots(items[0].slots, kind),
+      dominantSlotShape: dominant(slotSignatures),
+      variants,
+      props: {
+        variant: Object.keys(variantGroups).filter(v => v !== 'default'),
+        size: [...new Set(items.map(i => i.sizeHint).filter(Boolean))],
+        disabled: items.some(i => i.disabled),
+      },
+    };
+    anatomies.push(anatomy);
+  }
+
+  return anatomies.sort((a, b) => b.totalInstances - a.totalInstances);
+}
+
+// Emit TypeScript-flavored React stub for the anatomy — includes variant/size props + slot children.
+export function formatAnatomyStubs(anatomies = []) {
+  const lines = [
+    "// Auto-generated by designlang — component anatomy v2.",
+    "// Scaffolds. Wire into your token system; not a runtime library.",
+    "",
+    "import * as React from 'react';",
+    "",
+  ];
+  for (const a of anatomies) {
+    const Name = a.kind.charAt(0).toUpperCase() + a.kind.slice(1);
+    const variantUnion = (a.props.variant.length ? a.props.variant : ['default']).map(v => `'${v}'`).join(' | ');
+    const sizeUnion = (a.props.size.length ? a.props.size : ['md']).map(v => `'${v}'`).join(' | ');
+    lines.push(`export interface ${Name}Props {`);
+    lines.push(`  variant?: ${variantUnion};`);
+    lines.push(`  size?: ${sizeUnion};`);
+    if (a.props.disabled) lines.push(`  disabled?: boolean;`);
+    if (a.slots.icon) lines.push(`  leadingIcon?: React.ReactNode;`);
+    if (a.slots.badge) lines.push(`  badge?: React.ReactNode;`);
+    lines.push(`  children?: React.ReactNode;`);
+    lines.push(`}`);
+    lines.push(``);
+    lines.push(`export function ${Name}({ variant = '${a.props.variant[0] || 'default'}', size = 'md', ...rest }: ${Name}Props) {`);
+    lines.push(`  return React.createElement('${a.kind === 'input' ? 'input' : a.kind === 'link' ? 'a' : a.kind === 'card' ? 'div' : 'button'}', { 'data-variant': variant, 'data-size': size, ...rest });`);
+    lines.push(`}`);
+    lines.push(``);
+  }
+  return lines.join('\n');
+}

package/src/extractors/component-library.js

@@ -0,0 +1,193 @@
+// Detect the component library a site is built on. Fingerprints: class-name
+// patterns, data-* attributes, script URLs, window globals. Returns the most
+// likely library with a confidence score and the evidence that supported it —
+// LLM agents consume this to pick the right scaffolding (e.g. "use shadcn/ui",
+// "use MUI v5") when rebuilding.
+
+const LIB_FINGERPRINTS = [
+  {
+    id: 'shadcn/ui',
+    score: (ctx) => {
+      let s = 0; const evidence = [];
+      // shadcn copies Radix attributes and uses Tailwind utility density.
+      if (ctx.radixAttrCount > 2 && ctx.tailwindLike > 0.4) { s += 0.5; evidence.push('radix+tailwind mix'); }
+      if (/\bbutton-primary|\bbutton-destructive/.test(ctx.classBlob) && ctx.radixAttrCount > 0) { s += 0.15; evidence.push('shadcn button tokens'); }
+      // `class="... bg-background text-foreground ..."` is a shadcn tell.
+      if (/\bbg-background\b|\btext-foreground\b|\bborder-input\b|\bring-offset-background\b/.test(ctx.classBlob)) {
+        s += 0.65; evidence.push('shadcn css tokens');
+      }
+      return { score: s, evidence };
+    },
+  },
+  {
+    id: 'radix-ui',
+    score: (ctx) => {
+      const count = ctx.radixAttrCount;
+      if (count === 0) return { score: 0, evidence: [] };
+      const score = Math.min(0.9, 0.3 + count * 0.05);
+      return { score, evidence: [`${count} radix attributes`] };
+    },
+  },
+  {
+    id: 'headlessui',
+    score: (ctx) => {
+      const m = (ctx.classSample.join(' ').match(/headlessui-[a-z]+/gi) || []).length;
+      if (m < 2) return { score: 0, evidence: [] };
+      return { score: Math.min(0.9, 0.3 + m * 0.08), evidence: [`${m} headlessui- class refs`] };
+    },
+  },
+  {
+    id: 'mui',
+    score: (ctx) => {
+      const m = (ctx.classBlob.match(/Mui[A-Z][A-Za-z]+-root/g) || []).length;
+      if (m < 2) return { score: 0, evidence: [] };
+      return { score: Math.min(0.95, 0.4 + m * 0.04), evidence: [`${m} Mui*-root classes`] };
+    },
+  },
+  {
+    id: 'chakra-ui',
+    score: (ctx) => {
+      const m = (ctx.classBlob.match(/\bchakra-[a-z]+/g) || []).length;
+      if (m < 3) return { score: 0, evidence: [] };
+      return { score: Math.min(0.95, 0.4 + m * 0.03), evidence: [`${m} chakra- classes`] };
+    },
+  },
+  {
+    id: 'mantine',
+    score: (ctx) => {
+      const m = (ctx.classBlob.match(/mantine-[A-Za-z0-9]+/g) || []).length;
+      if (m < 2) return { score: 0, evidence: [] };
+      return { score: Math.min(0.95, 0.4 + m * 0.04), evidence: [`${m} mantine- classes`] };
+    },
+  },
+  {
+    id: 'ant-design',
+    score: (ctx) => {
+      const m = (ctx.classBlob.match(/\bant-[a-z]+(-[a-z]+)*/g) || []).length;
+      if (m < 3) return { score: 0, evidence: [] };
+      return { score: Math.min(0.95, 0.4 + m * 0.03), evidence: [`${m} ant- classes`] };
+    },
+  },
+  {
+    id: 'bootstrap',
+    score: (ctx) => {
+      const hits = ['container', 'row', 'col-md-', 'btn-primary', 'navbar-nav', 'card-body']
+        .filter(k => ctx.classBlob.includes(k)).length;
+      if (hits < 3) return { score: 0, evidence: [] };
+      return { score: Math.min(0.9, 0.3 + hits * 0.1), evidence: [`bootstrap utility hits: ${hits}`] };
+    },
+  },
+  {
+    id: 'heroui',
+    score: (ctx) => {
+      const m = (ctx.classBlob.match(/\bheroui-|\bnextui-/g) || []).length;
+      if (m < 2) return { score: 0, evidence: [] };
+      return { score: Math.min(0.95, 0.4 + m * 0.05), evidence: [`${m} heroui/nextui classes`] };
+    },
+  },
+  {
+    id: 'tailwind-ui',
+    score: (ctx) => {
+      // Tailwind UI is a starter/template, not a runtime — use density of
+      // Tailwind utilities + typical Tailwind UI patterns as a weak signal.
+      if (ctx.tailwindLike < 0.6) return { score: 0, evidence: [] };
+      const patterns = ['ring-offset-', 'focus:ring-', 'hover:bg-gray-', 'prose prose-'];
+      const hits = patterns.filter(p => ctx.classBlob.includes(p)).length;
+      if (hits < 2) return { score: 0, evidence: [] };
+      return { score: 0.3 + hits * 0.12, evidence: [`tailwind density=${ctx.tailwindLike.toFixed(2)}, pattern hits=${hits}`] };
+    },
+  },
+  {
+    id: 'vuetify',
+    score: (ctx) => {
+      const m = (ctx.classBlob.match(/\bv-[a-z]+(-[a-z]+)?/g) || []).length;
+      if (m < 5) return { score: 0, evidence: [] };
+      return { score: Math.min(0.9, 0.3 + m * 0.02), evidence: [`${m} v-* classes`] };
+    },
+  },
+  {
+    id: 'tailwindcss',
+    score: (ctx) => {
+      if (ctx.tailwindLike < 0.35) return { score: 0, evidence: [] };
+      // Tailwind itself isn't a component library but we report it as a signal
+      // when no higher-level library is detected.
+      return { score: 0.3 + (ctx.tailwindLike - 0.35) * 1.2, evidence: [`tailwind-like class density ${(ctx.tailwindLike * 100).toFixed(0)}%`] };
+    },
+  },
+];
+
+function computeTailwindLike(classSample) {
+  if (!classSample.length) return 0;
+  // A rough "looks like Tailwind" metric: fraction of class tokens that match
+  // common utility shapes (pt-4, bg-slate-100, text-2xl, flex, gap-x-2, etc.).
+  const utilRe = /^(?:sm:|md:|lg:|xl:|2xl:|hover:|focus:|dark:|group-hover:)*(?:p|m|px|py|pt|pb|pl|pr|mx|my|mt|mb|ml|mr|w|h|min-w|min-h|max-w|max-h|gap|space|text|font|leading|tracking|bg|border|rounded|shadow|ring|ringed|opacity|flex|grid|items|justify|content|self|place|overflow|z|inset|top|bottom|left|right|translate|rotate|scale|skew|transition|duration|ease|delay|animate)(?:-[a-z0-9/.:\[\]%-]+)?$/i;
+  let utils = 0, total = 0;
+  for (const cls of classSample) {
+    for (const tok of cls.split(/\s+/).slice(0, 30)) {
+      if (!tok) continue;
+      total++;
+      if (utilRe.test(tok)) utils++;
+    }
+  }
+  return total > 0 ? utils / total : 0;
+}
+
+function countRadixAttrs(classSample, attrSample = []) {
+  // Radix emits attributes like data-radix-popper-content-wrapper, data-state,
+  // data-orientation, data-slot. We don't have a full attr dump, but script src
+  // for @radix-ui is also a tell.
+  let n = 0;
+  for (const a of attrSample) {
+    if (/data-radix|data-slot|data-state|data-orientation/.test(a)) n++;
+  }
+  return n;
+}
+
+export function extractComponentLibrary(stackSignals = {}) {
+  const classSample = (stackSignals.classNameSample || []).slice(0, 500);
+  const classBlob = classSample.join(' ');
+  const scripts = (stackSignals.scripts || []).join(' ');
+  const attrSample = stackSignals.attrSample || [];
+
+  const tailwindLike = computeTailwindLike(classSample);
+  let radixAttrCount = countRadixAttrs(classSample, attrSample);
+  if (/@radix-ui/.test(scripts)) radixAttrCount += 3;
+
+  const ctx = { classSample, classBlob, scripts, tailwindLike, radixAttrCount };
+
+  const ranked = [];
+  for (const lib of LIB_FINGERPRINTS) {
+    const { score, evidence } = lib.score(ctx);
+    if (score > 0) {
+      ranked.push({ id: lib.id, score: Number(score.toFixed(3)), evidence });
+    }
+  }
+  // Tailwind CSS is a styling layer, not a component library. If any
+  // higher-level library also scored, demote tailwindcss so it doesn't shadow
+  // the real answer.
+  const hasHigherLevel = ranked.some(r => r.id !== 'tailwindcss' && r.id !== 'tailwind-ui' && r.score > 0.35);
+  if (hasHigherLevel) {
+    for (const r of ranked) {
+      if (r.id === 'tailwindcss') r.score = Math.min(r.score, 0.3);
+    }
+  }
+  ranked.sort((a, b) => b.score - a.score);
+
+  const primary = ranked[0] || { id: 'unknown', score: 0, evidence: [] };
+  // If shadcn and radix both score, prefer shadcn at the top and keep radix as
+  // the underlying primitive.
+  const alternates = ranked.slice(1, 5);
+
+  return {
+    library: primary.id,
+    confidence: primary.score,
+    evidence: primary.evidence,
+    alternates,
+    signals: {
+      tailwindLike: Number(tailwindLike.toFixed(3)),
+      radixAttrCount,
+      classSampleSize: classSample.length,
+    },
+    needsSmart: primary.score < 0.55,
+  };
+}