skillui 1.1.0

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.js

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const dir_1 = require("./modes/dir");
+const repo_1 = require("./modes/repo");
+const url_1 = require("./modes/url");
+const ultra_1 = require("./modes/ultra");
+const design_md_1 = require("./writers/design-md");
+const skill_1 = require("./writers/skill");
+const VERSION = '1.1.0';
+const program = new commander_1.Command();
+program
+    .name('skillui')
+    .description('Reverse-engineer design systems from any project. Pure static analysis — no AI, no API keys.')
+    .version(VERSION)
+    .option('--dir <path>', 'Scan a local project directory')
+    .option('--repo <url>', 'Clone and scan a git repository')
+    .option('--url <url>', 'Crawl a live website')
+    .option('--out <path>', 'Output directory', './')
+    .option('--name <string>', 'Override project name')
+    .option('--no-skill', 'Output DESIGN.md only, skip .skill packaging')
+    .option('--format <format>', 'Output format: design-md | skill | both', 'both')
+    .option('--mode <mode>', 'Extraction mode: default | ultra (ultra adds multi-page screenshots, interactions, layout, DOM components)', 'default')
+    .option('--screens <number>', 'Ultra mode: max pages to crawl for screenshots (default: 5)', '5')
+    .action(async (opts) => {
+    printBanner(opts.mode);
+    // Validate: exactly one mode must be specified
+    const modes = [opts.dir, opts.repo, opts.url].filter(Boolean);
+    if (modes.length === 0) {
+        console.error('\n  Error: Specify one of --dir, --repo, or --url\n');
+        program.help();
+        return;
+    }
+    if (modes.length > 1) {
+        console.error('\n  Error: Specify only one of --dir, --repo, or --url\n');
+        process.exit(1);
+    }
+    try {
+        let profile;
+        let screenshotPath = null;
+        // ── Write outputs dir first (needed for screenshot path in URL mode) ──
+        const outputDir = path.resolve(opts.out);
+        fs.mkdirSync(outputDir, { recursive: true });
+        // ── Run the selected mode ────────────────────────────────
+        if (opts.dir) {
+            const resolvedDir = path.resolve(opts.dir);
+            if (!fs.existsSync(resolvedDir)) {
+                console.error(`\n  Error: Directory not found: ${resolvedDir}\n`);
+                process.exit(1);
+            }
+            console.log(`  Mode: dir \u2192 ${resolvedDir}`);
+            profile = await (0, dir_1.runDirMode)(resolvedDir, opts.name);
+        }
+        else if (opts.repo) {
+            console.log(`  Mode: repo \u2192 ${opts.repo}`);
+            profile = await (0, repo_1.runRepoMode)(opts.repo, opts.name);
+        }
+        else {
+            console.log(`  Mode: url \u2192 ${opts.url}`);
+            // Compute skillDir early so screenshot can be saved there
+            const safeName = (opts.name || new URL(opts.url).hostname.replace(/^www\./, '').split('.')[0])
+                .replace(/[^a-zA-Z0-9-_]/g, '-').toLowerCase();
+            const skillDir = path.join(outputDir, `${safeName}-design`);
+            fs.mkdirSync(path.join(skillDir, 'screenshots'), { recursive: true });
+            const urlResult = await (0, url_1.runUrlMode)(opts.url, opts.name, skillDir);
+            profile = urlResult.profile;
+            screenshotPath = urlResult.screenshotPath;
+        }
+        // ── Ultra mode (URL only) ────────────────────────────────
+        const isUltra = opts.mode === 'ultra' && !!opts.url;
+        let ultraAnimations = null;
+        if (isUltra) {
+            const ultraScreens = Math.max(1, Math.min(20, parseInt(opts.screens, 10) || 5));
+            const safeName = (opts.name || new URL(opts.url).hostname.replace(/^www\./, '').split('.')[0])
+                .replace(/[^a-zA-Z0-9-_]/g, '-').toLowerCase();
+            const skillDir = path.join(outputDir, `${safeName}-design`);
+            const ultraResult = await (0, ultra_1.runUltraMode)(opts.url, profile, skillDir, { screens: ultraScreens });
+            ultraAnimations = ultraResult.animations;
+        }
+        // ── Print extraction summary ─────────────────────────────
+        printSummary(profile);
+        const shouldWriteDesignMd = opts.format === 'design-md' || opts.format === 'both';
+        const shouldWriteSkill = opts.skill !== false && (opts.format === 'skill' || opts.format === 'both');
+        const designMdContent = (0, design_md_1.generateDesignMd)(profile, screenshotPath);
+        // Write DESIGN.md
+        if (shouldWriteDesignMd) {
+            const safeName = profile.projectName.replace(/[^a-zA-Z0-9-_]/g, '-').toLowerCase();
+            const designDir = path.join(outputDir, `${safeName}-design`);
+            fs.mkdirSync(designDir, { recursive: true });
+            const designMdPath = path.join(designDir, 'DESIGN.md');
+            fs.writeFileSync(designMdPath, designMdContent, 'utf-8');
+            process.stdout.write('  Writing DESIGN.md...');
+            console.log(' \u2713');
+        }
+        // Write .skill
+        let skillFilePath = '';
+        if (shouldWriteSkill) {
+            process.stdout.write('  Bundling fonts & packaging .skill...');
+            const result = await (0, skill_1.generateSkill)(profile, designMdContent, outputDir, screenshotPath, ultraAnimations);
+            skillFilePath = result.skillFile;
+            console.log(' \u2713');
+        }
+        // ── Print output paths ───────────────────────────────────
+        console.log('');
+        console.log('  Output:');
+        if (shouldWriteDesignMd) {
+            const safeName = profile.projectName.replace(/[^a-zA-Z0-9-_]/g, '-').toLowerCase();
+            const relPath = path.relative(process.cwd(), path.join(outputDir, `${safeName}-design`, 'DESIGN.md'));
+            console.log(`    ./${relPath.replace(/\\/g, '/')}`);
+        }
+        if (shouldWriteSkill && skillFilePath) {
+            const relPath = path.relative(process.cwd(), skillFilePath);
+            console.log(`    ./${relPath.replace(/\\/g, '/')}`);
+        }
+        if (shouldWriteSkill && skillFilePath) {
+            console.log('');
+            console.log('  Install skill:');
+            const relPath = path.relative(process.cwd(), skillFilePath);
+            console.log(`    claude skill install ./${relPath.replace(/\\/g, '/')}`);
+        }
+        console.log('');
+        console.log('  Or just drop DESIGN.md into your project root.');
+        console.log('');
+    }
+    catch (err) {
+        console.error(`\n  Error: ${err.message || err}\n`);
+        process.exit(1);
+    }
+});
+program.parse();
+// ── Helpers ──────────────────────────────────────────────────────────
+function printBanner(mode) {
+    console.log('');
+    const modeLabel = mode === 'ultra' ? ` (ultra mode)` : '';
+    console.log(`  skillui v${VERSION}${modeLabel}`);
+    console.log('');
+}
+function printSummary(profile) {
+    const frameworks = profile.frameworks.map(f => f.name).join(' + ') || 'No framework detected';
+    const colorCount = profile.colors.length;
+    const fontCount = new Set(profile.typography.map(t => t.fontFamily)).size;
+    const gridBase = profile.spacing.base;
+    const componentCount = profile.components.length;
+    const animCount = profile.animations.length;
+    const darkMode = profile.designTraits.hasDarkMode ? 'yes' : 'no';
+    console.log('');
+    console.log(`  Detected: ${frameworks}`);
+    console.log(`  Extracted: ${colorCount} colors \u00B7 ${fontCount} fonts \u00B7 ${gridBase}px grid \u00B7 ${componentCount} components`);
+    if (profile.iconLibrary || profile.stateLibrary) {
+        const libs = [];
+        if (profile.iconLibrary)
+            libs.push(`icons: ${profile.iconLibrary}`);
+        if (profile.stateLibrary)
+            libs.push(`state: ${profile.stateLibrary}`);
+        console.log(`  Libraries: ${libs.join(' \u00B7 ')}`);
+    }
+    if (animCount > 0 || profile.designTraits.hasDarkMode) {
+        const extras = [];
+        if (animCount > 0)
+            extras.push(`${animCount} animations`);
+        extras.push(`dark mode: ${darkMode}`);
+        console.log(`  Features: ${extras.join(' \u00B7 ')}`);
+    }
+    console.log('');
+}
+//# sourceMappingURL=cli.js.map

package/dist/extractors/components.d.ts

@@ -0,0 +1,11 @@
+import { ComponentInfo } from '../types';
+export declare function extractComponents(projectDir: string): ComponentInfo[];
+/**
+ * Detect which libraries the project uses (icons, state, animation).
+ */
+export declare function detectProjectLibraries(projectDir: string): {
+    iconLibrary: string | null;
+    stateLibrary: string | null;
+    animationLibrary: string | null;
+};
+//# sourceMappingURL=components.d.ts.map

package/dist/extractors/components.js

@@ -0,0 +1,455 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractComponents = extractComponents;
+exports.detectProjectLibraries = detectProjectLibraries;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const COMPONENT_DIRS = [
+    'src/components',
+    'components',
+    'app/components',
+    'src/app/components',
+    'src/ui',
+    'src/common',
+    'lib/components',
+    'src/lib/components',
+    'src/features',
+    'src/views',
+    'src/pages',
+    'app',
+    'pages',
+];
+const COMPONENT_EXTENSIONS = ['.tsx', '.jsx', '.vue', '.svelte'];
+const IGNORE_DIRS = ['node_modules', '.git', 'dist', 'build', '__tests__', '__mocks__', '.next', '.nuxt'];
+// Category detection keywords for component names and file paths
+const CATEGORY_PATTERNS = {
+    'layout': /^(layout|container|grid|stack|flex|page|section|wrapper|sidebar|header|footer|main|shell|frame|panel|divider|spacer|center)/i,
+    'navigation': /^(nav|navbar|menu|breadcrumb|tab|tabs|pagination|stepper|link|drawer|appbar|topbar|bottombar)/i,
+    'data-display': /^(card|list|table|avatar|badge|chip|tag|stat|metric|tooltip|accordion|collapse|timeline|tree|calendar|chart|graph|progress|indicator)/i,
+    'data-input': /^(input|form|select|checkbox|radio|switch|toggle|slider|textarea|datepicker|timepicker|upload|dropdown|combobox|autocomplete|search|filter|rating)/i,
+    'feedback': /^(alert|toast|snackbar|notification|banner|skeleton|spinner|loading|error|empty|placeholder|progress)/i,
+    'overlay': /^(modal|dialog|popover|sheet|bottomsheet|lightbox|overlay|confirm|command|commandpalette)/i,
+    'typography': /^(heading|text|title|paragraph|label|caption|code|highlight|prose|markdown|typography)/i,
+    'media': /^(image|video|icon|logo|thumbnail|gallery|carousel|slider|embed|player)/i,
+    'other': /./,
+};
+function extractComponents(projectDir) {
+    const components = [];
+    for (const dir of COMPONENT_DIRS) {
+        const fullDir = path.join(projectDir, dir);
+        if (fs.existsSync(fullDir)) {
+            scanDirectory(fullDir, components, projectDir);
+        }
+    }
+    return components;
+}
+/**
+ * Detect which libraries the project uses (icons, state, animation).
+ */
+function detectProjectLibraries(projectDir) {
+    let iconLibrary = null;
+    let stateLibrary = null;
+    let animationLibrary = null;
+    try {
+        const pkgPath = path.join(projectDir, 'package.json');
+        if (fs.existsSync(pkgPath)) {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+            const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+            // Icon libraries
+            if (allDeps['lucide-react'] || allDeps['lucide-vue-next'])
+                iconLibrary = 'Lucide';
+            else if (allDeps['@heroicons/react'] || allDeps['heroicons'])
+                iconLibrary = 'Heroicons';
+            else if (allDeps['react-icons'])
+                iconLibrary = 'React Icons';
+            else if (allDeps['@phosphor-icons/react'])
+                iconLibrary = 'Phosphor';
+            else if (allDeps['@tabler/icons-react'])
+                iconLibrary = 'Tabler Icons';
+            else if (allDeps['@radix-ui/react-icons'])
+                iconLibrary = 'Radix Icons';
+            // State management
+            if (allDeps['zustand'])
+                stateLibrary = 'Zustand';
+            else if (allDeps['@reduxjs/toolkit'] || allDeps['redux'])
+                stateLibrary = 'Redux';
+            else if (allDeps['jotai'])
+                stateLibrary = 'Jotai';
+            else if (allDeps['recoil'])
+                stateLibrary = 'Recoil';
+            else if (allDeps['valtio'])
+                stateLibrary = 'Valtio';
+            else if (allDeps['pinia'])
+                stateLibrary = 'Pinia';
+            else if (allDeps['mobx'])
+                stateLibrary = 'MobX';
+            // Animation
+            if (allDeps['framer-motion'] || allDeps['motion'])
+                animationLibrary = 'Framer Motion';
+            else if (allDeps['@react-spring/web'] || allDeps['react-spring'])
+                animationLibrary = 'React Spring';
+            else if (allDeps['gsap'])
+                animationLibrary = 'GSAP';
+            else if (allDeps['animejs'] || allDeps['anime.js'])
+                animationLibrary = 'Anime.js';
+            else if (allDeps['@formkit/auto-animate'])
+                animationLibrary = 'AutoAnimate';
+        }
+    }
+    catch {
+        // ignore
+    }
+    return { iconLibrary, stateLibrary, animationLibrary };
+}
+function scanDirectory(dir, components, rootDir) {
+    try {
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            if (IGNORE_DIRS.includes(entry.name))
+                continue;
+            const fullPath = path.join(dir, entry.name);
+            if (entry.isFile() && COMPONENT_EXTENSIONS.some(ext => entry.name.endsWith(ext))) {
+                const component = parseComponent(fullPath, rootDir);
+                if (component)
+                    components.push(component);
+            }
+            else if (entry.isDirectory()) {
+                scanDirectory(fullPath, components, rootDir);
+            }
+        }
+    }
+    catch {
+        // Permission errors
+    }
+}
+function parseComponent(filePath, rootDir) {
+    let content;
+    try {
+        content = fs.readFileSync(filePath, 'utf-8');
+    }
+    catch {
+        return null;
+    }
+    const fileName = path.basename(filePath, path.extname(filePath));
+    if (['index', 'types', 'utils', 'helpers', 'constants', 'styles', 'hooks', 'context', 'store', 'provider'].includes(fileName.toLowerCase())) {
+        if (fileName.toLowerCase() === 'index') {
+            const dirName = path.basename(path.dirname(filePath));
+            if (dirName === 'components' || dirName === 'ui' || dirName === 'lib')
+                return null;
+            return parseComponentContent(dirName, content, filePath, rootDir);
+        }
+        return null;
+    }
+    return parseComponentContent(fileName, content, filePath, rootDir);
+}
+function parseComponentContent(name, content, filePath, rootDir) {
+    const hasJSX = /<[A-Z][a-zA-Z]*[\s/>]/.test(content) || /return\s*\(?\s*</.test(content);
+    const hasExport = /export\s+(default\s+)?/.test(content);
+    if (!hasJSX && !hasExport)
+        return null;
+    const componentName = toPascalCase(name);
+    const relativePath = path.relative(rootDir, filePath).replace(/\\/g, '/');
+    const variants = extractVariants(content);
+    const cssClasses = extractCSSClasses(content);
+    const jsxSnippet = extractJSXSnippet(content);
+    const props = extractProps(content);
+    const category = categorizeComponent(componentName, relativePath, content, cssClasses);
+    const { hasAnimation, animationDetails } = detectAnimations(content);
+    const statePatterns = detectStatePatterns(content);
+    const tailwindPatterns = extractTailwindPatterns(cssClasses);
+    return {
+        name: componentName,
+        filePath: relativePath,
+        variants,
+        cssClasses,
+        jsxSnippet,
+        props,
+        category,
+        hasAnimation,
+        animationDetails,
+        statePatterns,
+        tailwindPatterns,
+    };
+}
+function categorizeComponent(name, filePath, content, classes) {
+    // Check name first
+    for (const [cat, pattern] of Object.entries(CATEGORY_PATTERNS)) {
+        if (cat === 'other')
+            continue;
+        if (pattern.test(name))
+            return cat;
+    }
+    // Check file path for hints
+    const pathLower = filePath.toLowerCase();
+    if (/\/layout[s]?\//.test(pathLower))
+        return 'layout';
+    if (/\/nav|\/menu|\/header|\/footer/.test(pathLower))
+        return 'navigation';
+    if (/\/form[s]?\/|\/input[s]?\//.test(pathLower))
+        return 'data-input';
+    if (/\/modal[s]?\/|\/dialog[s]?\/|\/overlay[s]?\//.test(pathLower))
+        return 'overlay';
+    if (/\/feedback\/|\/toast|\/alert/.test(pathLower))
+        return 'feedback';
+    // Check content for category hints
+    if (/\<form[\s>]|onSubmit|handleSubmit/i.test(content))
+        return 'data-input';
+    if (/\<table[\s>]|<thead|<tbody/i.test(content))
+        return 'data-display';
+    if (/\<nav[\s>]|useRouter|useNavigate|Link\s/i.test(content))
+        return 'navigation';
+    if (/AnimatePresence|createPortal|usePortal/i.test(content))
+        return 'overlay';
+    // Check Tailwind classes
+    const classStr = classes.join(' ');
+    if (/grid-cols|flex.*gap|justify-between|items-center/.test(classStr))
+        return 'layout';
+    return 'other';
+}
+function detectAnimations(content) {
+    const details = [];
+    // Framer Motion
+    const motionVariants = content.match(/variants\s*=\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/g);
+    if (motionVariants) {
+        for (const v of motionVariants) {
+            const trimmed = v.slice(0, 120);
+            details.push(`motion-variant: ${trimmed}`);
+        }
+    }
+    if (/motion\.|<motion\./.test(content)) {
+        details.push('framer-motion');
+        // Extract spring configs
+        const springMatch = content.match(/spring\s*:\s*\{([^}]+)\}/);
+        if (springMatch)
+            details.push(`spring: {${springMatch[1].trim()}}`);
+        // Extract transition props
+        const transitionMatch = content.match(/transition\s*=\s*\{?\{([^}]+)\}/);
+        if (transitionMatch)
+            details.push(`transition: {${transitionMatch[1].trim()}}`);
+        // Detect AnimatePresence
+        if (/AnimatePresence/.test(content))
+            details.push('animate-presence');
+        // Detect layout animations
+        if (/layoutId|layout=/.test(content))
+            details.push('layout-animation');
+        // Extract initial/animate/exit
+        const animateMatch = content.match(/animate\s*=\s*\{?\{([^}]+)\}/);
+        if (animateMatch)
+            details.push(`animate: {${animateMatch[1].trim()}}`);
+    }
+    // CSS animations
+    const animateClasses = content.match(/animate-[\w-]+/g);
+    if (animateClasses) {
+        details.push(...[...new Set(animateClasses)].map(c => `tw-${c}`));
+    }
+    // CSS transitions in Tailwind
+    const transitionClasses = content.match(/transition-[\w-]+|duration-[\w-]+|ease-[\w-]+/g);
+    if (transitionClasses) {
+        const unique = [...new Set(transitionClasses)];
+        if (unique.length > 0)
+            details.push(`tw-transitions: ${unique.join(', ')}`);
+    }
+    // Hover/focus transforms
+    if (/hover:scale|hover:translate|hover:-translate|group-hover:/.test(content)) {
+        details.push('hover-transforms');
+    }
+    return { hasAnimation: details.length > 0, animationDetails: details };
+}
+function detectStatePatterns(content) {
+    const patterns = [];
+    if (/useState/.test(content))
+        patterns.push('useState');
+    if (/useReducer/.test(content))
+        patterns.push('useReducer');
+    if (/useContext/.test(content))
+        patterns.push('useContext');
+    if (/useStore|create\(/.test(content) && /zustand/i.test(content))
+        patterns.push('zustand');
+    if (/useQuery|useMutation/.test(content))
+        patterns.push('react-query');
+    if (/useSWR/.test(content))
+        patterns.push('swr');
+    if (/useForm/.test(content))
+        patterns.push('react-hook-form');
+    if (/useRef/.test(content))
+        patterns.push('useRef');
+    if (/forwardRef/.test(content))
+        patterns.push('forwardRef');
+    if (/React\.memo|memo\(/.test(content))
+        patterns.push('memo');
+    return patterns;
+}
+function extractTailwindPatterns(classes) {
+    const pattern = {
+        backgrounds: [],
+        borders: [],
+        spacing: [],
+        typography: [],
+        effects: [],
+        layout: [],
+        interactive: [],
+    };
+    for (const cls of classes) {
+        if (/^bg-/.test(cls))
+            pattern.backgrounds.push(cls);
+        else if (/^(border|rounded|ring|outline)/.test(cls))
+            pattern.borders.push(cls);
+        else if (/^(p-|px-|py-|pt-|pb-|pl-|pr-|m-|mx-|my-|mt-|mb-|ml-|mr-|gap-|space-)/.test(cls))
+            pattern.spacing.push(cls);
+        else if (/^(text-|font-|tracking-|leading-|truncate|line-clamp)/.test(cls))
+            pattern.typography.push(cls);
+        else if (/^(shadow|opacity|blur|backdrop|ring|drop-shadow|filter)/.test(cls))
+            pattern.effects.push(cls);
+        else if (/^(flex|grid|col-|row-|justify|items-|self-|w-|h-|min-|max-|overflow|relative|absolute|fixed|sticky|z-)/.test(cls))
+            pattern.layout.push(cls);
+        else if (/^(hover:|focus:|active:|disabled:|group-|peer-|cursor-|pointer-events|select-)/.test(cls))
+            pattern.interactive.push(cls);
+    }
+    return pattern;
+}
+function extractVariants(content) {
+    const variants = [];
+    const unionMatches = content.matchAll(/['"](\w+)['"]\s*\|/g);
+    for (const m of unionMatches) {
+        if (!variants.includes(m[1]) && isLikelyVariant(m[1]))
+            variants.push(m[1]);
+    }
+    const lastUnionMatches = content.matchAll(/\|\s*['"](\w+)['"]/g);
+    for (const m of lastUnionMatches) {
+        if (!variants.includes(m[1]) && isLikelyVariant(m[1]))
+            variants.push(m[1]);
+    }
+    // CVA / class-variance-authority
+    const cvaMatches = content.matchAll(/variants?\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/gi);
+    for (const m of cvaMatches) {
+        const keys = m[1].matchAll(/(\w+)\s*:/g);
+        for (const k of keys) {
+            if (!variants.includes(k[1]) && isLikelyVariant(k[1]))
+                variants.push(k[1]);
+        }
+    }
+    return variants;
+}
+function isLikelyVariant(str) {
+    const variantKeywords = [
+        'primary', 'secondary', 'tertiary', 'ghost', 'outline', 'link',
+        'danger', 'warning', 'success', 'info', 'error',
+        'sm', 'md', 'lg', 'xl', '2xl',
+        'small', 'medium', 'large',
+        'default', 'destructive', 'subtle',
+        'solid', 'soft', 'plain', 'minimal', 'filled',
+    ];
+    return variantKeywords.includes(str.toLowerCase()) || str.length <= 15;
+}
+function extractCSSClasses(content) {
+    const classes = new Set();
+    // className="..." or class="..."
+    const classMatches = content.matchAll(/class(?:Name)?\s*=\s*["']([^"']+)["']/g);
+    for (const m of classMatches) {
+        for (const cls of m[1].split(/\s+/)) {
+            if (cls.trim())
+                classes.add(cls.trim());
+        }
+    }
+    // Template literals: className={`...`}
+    const templateMatches = content.matchAll(/class(?:Name)?\s*=\s*\{`([^`]+)`\}/g);
+    for (const m of templateMatches) {
+        const staticParts = m[1].replace(/\$\{[^}]+\}/g, ' ').split(/\s+/);
+        for (const cls of staticParts) {
+            if (cls.trim())
+                classes.add(cls.trim());
+        }
+    }
+    // cn() / clsx() / classnames() / cva()
+    const cnMatches = content.matchAll(/(?:cn|clsx|classnames|cva)\s*\(\s*["']([^"']+)["']/g);
+    for (const m of cnMatches) {
+        for (const cls of m[1].split(/\s+/)) {
+            if (cls.trim())
+                classes.add(cls.trim());
+        }
+    }
+    // Multi-line cn() calls — capture strings inside
+    const cnBlockMatches = content.matchAll(/(?:cn|clsx|classnames)\s*\(([^)]+)\)/gs);
+    for (const m of cnBlockMatches) {
+        const innerStrings = m[1].matchAll(/["']([^"']+)["']/g);
+        for (const s of innerStrings) {
+            for (const cls of s[1].split(/\s+/)) {
+                if (cls.trim() && !cls.includes('${'))
+                    classes.add(cls.trim());
+            }
+        }
+    }
+    return Array.from(classes).slice(0, 80);
+}
+function extractJSXSnippet(content) {
+    const returnMatch = content.match(/return\s*\(\s*\n?([\s\S]*?)\n?\s*\);?/);
+    if (returnMatch) {
+        const lines = returnMatch[1].split('\n').slice(0, 40);
+        return lines.join('\n').trim();
+    }
+    const arrowMatch = content.match(/=>\s*\(\s*\n?([\s\S]*?)\n?\s*\);?/);
+    if (arrowMatch) {
+        const lines = arrowMatch[1].split('\n').slice(0, 40);
+        return lines.join('\n').trim();
+    }
+    return '';
+}
+function extractProps(content) {
+    const props = [];
+    const propsMatch = content.match(/(?:interface|type)\s+\w*Props\w*\s*(?:=\s*)?\{([^}]+)\}/);
+    if (propsMatch) {
+        const propLines = propsMatch[1].matchAll(/(\w+)\s*[?:]?\s*:/g);
+        for (const m of propLines) {
+            if (!props.includes(m[1]))
+                props.push(m[1]);
+        }
+    }
+    const destructMatch = content.match(/\(\s*\{\s*([^}]+)\s*\}\s*(?::\s*\w+)?\s*\)/);
+    if (destructMatch) {
+        const parts = destructMatch[1].split(',').map(s => s.trim().split(/[\s=:]/)[0].trim());
+        for (const p of parts) {
+            if (p && !props.includes(p) && /^[a-zA-Z]/.test(p))
+                props.push(p);
+        }
+    }
+    return props;
+}
+function toPascalCase(str) {
+    return str
+        .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))
+        .replace(/^./, s => s.toUpperCase());
+}
+//# sourceMappingURL=components.js.map

package/dist/extractors/framework.d.ts

@@ -0,0 +1,4 @@
+import { Framework } from '../types';
+export declare function detectFrameworks(projectDir: string): Framework[];
+export declare function getProjectName(projectDir: string, overrideName?: string): string;
+//# sourceMappingURL=framework.d.ts.map