skillui 1.1.0

package/dist/extractors/tokens/tailwind.d.ts

@@ -0,0 +1,3 @@
+import { RawTokens } from '../../types';
+export declare function extractTailwindTokens(projectDir: string): RawTokens;
+//# sourceMappingURL=tailwind.d.ts.map

package/dist/extractors/tokens/tailwind.js

@@ -0,0 +1,353 @@
+"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.extractTailwindTokens = extractTailwindTokens;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const TAILWIND_CONFIG_FILES = [
+    'tailwind.config.js',
+    'tailwind.config.ts',
+    'tailwind.config.mjs',
+    'tailwind.config.cjs',
+];
+// Tailwind v3 default spacing scale (in rem, converted to px at 16px base)
+const TAILWIND_DEFAULT_SPACING_PX = [
+    0, 1, 2, 4, 5, 6, 7, 8, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96,
+];
+function extractTailwindTokens(projectDir) {
+    const tokens = {
+        colors: [],
+        fonts: [],
+        spacingValues: [],
+        shadows: [],
+        cssVariables: [],
+        breakpoints: [],
+        borderRadii: [],
+        gradients: [],
+        fontVarMap: {},
+        animations: [],
+        darkModeVars: [],
+        zIndexValues: [],
+        containerMaxWidth: null,
+        fontSources: [],
+        pageSections: [],
+        transitionDurations: [],
+        transitionEasings: [],
+    };
+    const configPath = findTailwindConfig(projectDir);
+    if (!configPath)
+        return tokens;
+    let config;
+    try {
+        const jiti = require('jiti')(__filename, { interopDefault: true });
+        config = jiti(configPath);
+        if (config.default)
+            config = config.default;
+    }
+    catch {
+        try {
+            config = parseConfigFallback(configPath);
+        }
+        catch {
+            // Config failed to load — still add Tailwind defaults since config exists
+            config = null;
+        }
+    }
+    // If config exists but failed to parse, still add sensible defaults
+    if (!config) {
+        tokens.spacingValues.push(...TAILWIND_DEFAULT_SPACING_PX.filter(v => v > 0));
+        tokens.breakpoints = [
+            { name: 'sm', value: '640px', source: 'tailwind' },
+            { name: 'md', value: '768px', source: 'tailwind' },
+            { name: 'lg', value: '1024px', source: 'tailwind' },
+            { name: 'xl', value: '1280px', source: 'tailwind' },
+            { name: '2xl', value: '1536px', source: 'tailwind' },
+        ];
+        // Try to extract font names from config file text as fallback
+        extractFontsFromConfigText(configPath, tokens);
+        return tokens;
+    }
+    const theme = config.theme || {};
+    const extend = theme.extend || {};
+    // Extract colors
+    const colorSources = mergeDeep(theme.colors || {}, extend.colors || {});
+    flattenColors(colorSources, '', tokens.colors);
+    // Extract fonts and build var→name map
+    const fontFamilies = mergeDeep(theme.fontFamily || {}, extend.fontFamily || {});
+    for (const [name, value] of Object.entries(fontFamilies)) {
+        const familyList = Array.isArray(value) ? value : [String(value)];
+        const primaryFamily = familyList[0];
+        // Resolve CSS var references in font values
+        const resolved = resolveFontName(primaryFamily, name);
+        // Only add as a font if the config key maps to a real font name
+        if (!isGenericConfigKey(name)) {
+            tokens.fonts.push({ family: resolved, source: 'tailwind' });
+        }
+        // Always build the var map for resolving references later
+        tokens.fontVarMap[`var(--font-${name})`] = resolved;
+        tokens.fontVarMap[name] = resolved;
+    }
+    // Extract spacing — prefer explicit config, fall back to Tailwind defaults
+    const spacing = mergeDeep(theme.spacing || {}, extend.spacing || {});
+    const spacingEntries = Object.entries(spacing);
+    if (spacingEntries.length > 0) {
+        for (const [, value] of spacingEntries) {
+            const num = parseFloat(String(value));
+            if (!isNaN(num) && num > 0) {
+                const px = String(value).includes('rem') ? num * 16 : num;
+                tokens.spacingValues.push(Math.round(px));
+            }
+        }
+    }
+    // Always include Tailwind defaults as a baseline
+    tokens.spacingValues.push(...TAILWIND_DEFAULT_SPACING_PX.filter(v => v > 0));
+    // Extract border-radius
+    const borderRadius = mergeDeep(theme.borderRadius || {}, extend.borderRadius || {});
+    for (const [name, value] of Object.entries(borderRadius)) {
+        if (typeof value === 'string') {
+            tokens.borderRadii.push(value);
+        }
+    }
+    // Extract shadows
+    const boxShadow = mergeDeep(theme.boxShadow || {}, extend.boxShadow || {});
+    for (const [name, value] of Object.entries(boxShadow)) {
+        if (typeof value === 'string') {
+            tokens.shadows.push({ value, name });
+        }
+    }
+    // Extract breakpoints
+    const screens = mergeDeep(theme.screens || {}, extend.screens || {});
+    for (const [name, value] of Object.entries(screens)) {
+        const bp = {
+            name,
+            value: typeof value === 'string' ? value : typeof value === 'object' && value !== null && 'min' in value ? value.min : String(value),
+            source: 'tailwind',
+        };
+        tokens.breakpoints.push(bp);
+    }
+    if (tokens.breakpoints.length === 0) {
+        tokens.breakpoints = [
+            { name: 'sm', value: '640px', source: 'tailwind' },
+            { name: 'md', value: '768px', source: 'tailwind' },
+            { name: 'lg', value: '1024px', source: 'tailwind' },
+            { name: 'xl', value: '1280px', source: 'tailwind' },
+            { name: '2xl', value: '1536px', source: 'tailwind' },
+        ];
+    }
+    return tokens;
+}
+/**
+ * Resolve a CSS variable font name to a human-readable name.
+ * e.g. "var(--font-exo2)" → "Exo 2", or just use the config key.
+ */
+function resolveFontName(primaryFamily, configKey) {
+    // If it's already a real font name, return it
+    if (!primaryFamily.startsWith('var(') && !primaryFamily.startsWith('--')) {
+        return primaryFamily.replace(/["']/g, '').trim();
+    }
+    // Try to derive from config key: "exo2" → "Exo 2", "jetbrains" → "JetBrains Mono"
+    return configKeyToFontName(configKey);
+}
+function configKeyToFontName(key) {
+    // Common font name mappings from Tailwind config keys
+    const known = {
+        sans: 'Sans-serif',
+        serif: 'Serif',
+        mono: 'Monospace',
+        display: 'Display',
+        body: 'Body',
+        exo2: 'Exo 2',
+        exo: 'Exo',
+        inter: 'Inter',
+        roboto: 'Roboto',
+        poppins: 'Poppins',
+        montserrat: 'Montserrat',
+        lato: 'Lato',
+        nunito: 'Nunito',
+        jetbrains: 'JetBrains Mono',
+        'fira-code': 'Fira Code',
+        'source-code': 'Source Code Pro',
+        'space-grotesk': 'Space Grotesk',
+        'space-mono': 'Space Mono',
+        doto: 'Doto',
+        geist: 'Geist',
+        'geist-mono': 'Geist Mono',
+        outfit: 'Outfit',
+        manrope: 'Manrope',
+        'dm-sans': 'DM Sans',
+        'dm-mono': 'DM Mono',
+        sora: 'Sora',
+        'ibm-plex': 'IBM Plex Sans',
+        'ibm-plex-mono': 'IBM Plex Mono',
+        raleway: 'Raleway',
+        'open-sans': 'Open Sans',
+        'source-sans': 'Source Sans Pro',
+        ubuntu: 'Ubuntu',
+        'ubuntu-mono': 'Ubuntu Mono',
+        barlow: 'Barlow',
+        overpass: 'Overpass',
+        rubik: 'Rubik',
+        karla: 'Karla',
+        cabin: 'Cabin',
+        mulish: 'Mulish',
+    };
+    const lowerKey = key.toLowerCase().replace(/_/g, '-');
+    if (known[lowerKey])
+        return known[lowerKey];
+    // Fallback: capitalize and add spaces before digits
+    return key
+        .replace(/[-_]/g, ' ')
+        .replace(/([a-z])(\d)/g, '$1 $2')
+        .replace(/(\d)([a-z])/g, '$1 $2')
+        .split(' ')
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ');
+}
+/**
+ * Check if a fontFamily config key is a generic/functional name
+ * (e.g., "sans", "heading", "body", "display") rather than an actual font name.
+ * These resolve to CSS vars whose target font we can't determine statically.
+ */
+function isGenericConfigKey(key) {
+    return /^(sans|serif|mono|heading|body|display|code|ui)$/i.test(key);
+}
+function findTailwindConfig(dir) {
+    for (const file of TAILWIND_CONFIG_FILES) {
+        const p = path.join(dir, file);
+        if (fs.existsSync(p))
+            return p;
+    }
+    return null;
+}
+function flattenColors(obj, prefix, out) {
+    for (const [key, value] of Object.entries(obj)) {
+        const name = prefix ? `${prefix}-${key}` : key;
+        if (typeof value === 'string') {
+            if (isColorValue(value)) {
+                out.push({ value: normalizeHex(value), frequency: 1, source: 'tailwind', name });
+            }
+        }
+        else if (typeof value === 'object' && value !== null) {
+            flattenColors(value, name, out);
+        }
+    }
+}
+function isColorValue(v) {
+    return /^#([0-9a-fA-F]{3,8})$/.test(v) ||
+        /^rgb/i.test(v) ||
+        /^hsl/i.test(v);
+}
+function normalizeHex(v) {
+    const match = v.match(/^#([0-9a-fA-F]{3})$/);
+    if (match) {
+        const [r, g, b] = match[1].split('');
+        return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+    }
+    return v.toLowerCase();
+}
+function mergeDeep(a, b) {
+    const result = { ...a };
+    for (const key of Object.keys(b)) {
+        if (typeof b[key] === 'object' && b[key] !== null && !Array.isArray(b[key]) &&
+            typeof a[key] === 'object' && a[key] !== null && !Array.isArray(a[key])) {
+            result[key] = mergeDeep(a[key], b[key]);
+        }
+        else {
+            result[key] = b[key];
+        }
+    }
+    return result;
+}
+/**
+ * When jiti fails, try to extract font family names from the raw config text.
+ * Only looks within fontFamily blocks to avoid false positives from content arrays etc.
+ */
+function extractFontsFromConfigText(configPath, tokens) {
+    try {
+        const content = fs.readFileSync(configPath, 'utf-8');
+        // Find the fontFamily block specifically
+        const fontFamilyBlock = content.match(/fontFamily\s*:\s*\{([^}]+)\}/s);
+        if (!fontFamilyBlock)
+            return;
+        const block = fontFamilyBlock[1];
+        // Match entries like: sans: [var(--font-inter), ...] or mono: ["JetBrains Mono", ...]
+        const entries = block.matchAll(/(\w[\w-]*)\s*:\s*\[([^\]]+)\]/g);
+        for (const entry of entries) {
+            const key = entry[1];
+            const valueList = entry[2];
+            // Check for var(--font-xxx) reference
+            const varMatch = valueList.match(/var\(--font-(\w[\w-]*)\)/);
+            if (varMatch) {
+                const varName = varMatch[1];
+                const resolved = configKeyToFontName(varName);
+                // Skip generic config key names like "heading", "body", "sans", "display"
+                // These are Tailwind key names, not font names
+                if (!isGenericConfigKey(key)) {
+                    tokens.fonts.push({ family: resolved, source: 'tailwind' });
+                }
+                tokens.fontVarMap[`var(--font-${varName})`] = resolved;
+                tokens.fontVarMap[key] = resolved;
+                continue;
+            }
+            // Check for direct font name
+            const nameMatch = valueList.match(/["']([^"']+)["']/);
+            if (nameMatch) {
+                const fontName = nameMatch[1];
+                // Filter out generic CSS families
+                if (!/^(sans-serif|serif|monospace|system-ui|ui-|inherit)/.test(fontName)) {
+                    tokens.fonts.push({ family: fontName, source: 'tailwind' });
+                    tokens.fontVarMap[key] = fontName;
+                }
+            }
+        }
+    }
+    catch {
+        // Ignore read errors
+    }
+}
+function parseConfigFallback(configPath) {
+    const content = fs.readFileSync(configPath, 'utf-8');
+    const match = content.match(/module\.exports\s*=\s*(\{[\s\S]*\})/);
+    if (match) {
+        try {
+            return Function(`"use strict"; return (${match[1]})`)();
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=tailwind.js.map

package/dist/extractors/tokens/tokens-file.d.ts

@@ -0,0 +1,3 @@
+import { RawTokens } from '../../types';
+export declare function extractTokensFile(projectDir: string): RawTokens;
+//# sourceMappingURL=tokens-file.d.ts.map

package/dist/extractors/tokens/tokens-file.js

@@ -0,0 +1,229 @@
+"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.extractTokensFile = extractTokensFile;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const TOKEN_FILE_NAMES = [
+    'tokens.json',
+    'design-tokens.json',
+    'theme.json',
+    'theme.ts',
+    'theme.js',
+    'tokens.ts',
+    'tokens.js',
+    'design-tokens.ts',
+    'design-tokens.js',
+];
+const TOKEN_DIRS = ['', 'src', 'src/styles', 'src/theme', 'styles', 'theme', 'config'];
+function extractTokensFile(projectDir) {
+    const tokens = {
+        colors: [],
+        fonts: [],
+        spacingValues: [],
+        shadows: [],
+        cssVariables: [],
+        breakpoints: [],
+        borderRadii: [],
+        gradients: [],
+        fontVarMap: {},
+        animations: [],
+        darkModeVars: [],
+        zIndexValues: [],
+        containerMaxWidth: null,
+        fontSources: [],
+        pageSections: [],
+        transitionDurations: [],
+        transitionEasings: [],
+    };
+    for (const dir of TOKEN_DIRS) {
+        for (const fileName of TOKEN_FILE_NAMES) {
+            const filePath = path.join(projectDir, dir, fileName);
+            if (fs.existsSync(filePath)) {
+                try {
+                    extractFromFile(filePath, tokens);
+                }
+                catch {
+                    // Skip unreadable files
+                }
+            }
+        }
+    }
+    return tokens;
+}
+function extractFromFile(filePath, tokens) {
+    const ext = path.extname(filePath);
+    let data;
+    if (ext === '.json') {
+        data = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+    }
+    else {
+        // Try jiti for JS/TS
+        try {
+            const jiti = require('jiti')(__filename, { interopDefault: true });
+            data = jiti(filePath);
+            if (data.default)
+                data = data.default;
+        }
+        catch {
+            // Fallback: try regex extraction
+            const content = fs.readFileSync(filePath, 'utf-8');
+            extractWithRegex(content, tokens);
+            return;
+        }
+    }
+    if (!data || typeof data !== 'object')
+        return;
+    // Recursively extract tokens from the object
+    walkTokenObject(data, '', tokens);
+}
+function walkTokenObject(obj, prefix, tokens) {
+    for (const [key, value] of Object.entries(obj)) {
+        const fullKey = prefix ? `${prefix}.${key}` : key;
+        if (typeof value === 'string') {
+            classifyValue(fullKey, value, tokens);
+        }
+        else if (typeof value === 'number') {
+            // Could be spacing
+            if (value > 0 && value <= 200) {
+                tokens.spacingValues.push(value);
+            }
+        }
+        else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+            // Design Tokens Community Group format: { value: "...", type: "..." }
+            if ('value' in value && typeof value.value === 'string') {
+                const tokenValue = value.value;
+                const tokenType = value.type || '';
+                classifyTokenValue(fullKey, tokenValue, tokenType, tokens);
+            }
+            else {
+                walkTokenObject(value, fullKey, tokens);
+            }
+        }
+        else if (Array.isArray(value)) {
+            // Font family arrays
+            if (key.toLowerCase().includes('font') && value.every(v => typeof v === 'string')) {
+                tokens.fonts.push({ family: value[0], source: 'tokens-file' });
+            }
+        }
+    }
+}
+function classifyValue(key, value, tokens) {
+    const keyLower = key.toLowerCase();
+    // Color
+    if (isColorValue(value)) {
+        const name = key.split('.').pop() || key;
+        tokens.colors.push({
+            value: normalizeHex(value),
+            frequency: 1,
+            source: 'tokens-file',
+            name,
+        });
+        return;
+    }
+    // Font
+    if (keyLower.includes('font') || keyLower.includes('family') || keyLower.includes('typeface')) {
+        tokens.fonts.push({ family: value, source: 'tokens-file' });
+        return;
+    }
+    // Shadow
+    if (keyLower.includes('shadow') || keyLower.includes('elevation')) {
+        tokens.shadows.push({ value, name: key.split('.').pop() });
+        return;
+    }
+    // Spacing
+    const pxMatch = value.match(/^(\d+(?:\.\d+)?)\s*(px|rem|em)?$/);
+    if (pxMatch && (keyLower.includes('spacing') || keyLower.includes('space') || keyLower.includes('gap') || keyLower.includes('size'))) {
+        let px = parseFloat(pxMatch[1]);
+        if (pxMatch[2] === 'rem' || pxMatch[2] === 'em')
+            px *= 16;
+        if (px > 0 && px <= 200) {
+            tokens.spacingValues.push(Math.round(px));
+        }
+    }
+}
+function classifyTokenValue(key, value, type, tokens) {
+    const typeLower = type.toLowerCase();
+    if (typeLower === 'color' || isColorValue(value)) {
+        const name = key.split('.').pop() || key;
+        tokens.colors.push({
+            value: normalizeHex(value),
+            frequency: 1,
+            source: 'tokens-file',
+            name,
+        });
+    }
+    else if (typeLower === 'fontfamily' || typeLower === 'fontfamilies') {
+        tokens.fonts.push({ family: value, source: 'tokens-file' });
+    }
+    else if (typeLower === 'fontsize' || typeLower === 'fontsizes') {
+        tokens.fonts.push({ family: '', size: value, source: 'tokens-file' });
+    }
+    else if (typeLower === 'spacing') {
+        const px = parseFloat(value);
+        if (!isNaN(px) && px > 0)
+            tokens.spacingValues.push(px);
+    }
+    else if (typeLower === 'boxshadow' || typeLower === 'shadow') {
+        tokens.shadows.push({ value, name: key.split('.').pop() });
+    }
+    else {
+        // Generic classify
+        classifyValue(key, value, tokens);
+    }
+}
+function extractWithRegex(content, tokens) {
+    // Extract hex colors
+    const hexMatches = content.matchAll(/#([0-9a-fA-F]{3,8})\b/g);
+    for (const m of hexMatches) {
+        tokens.colors.push({ value: normalizeHex(m[0]), frequency: 1, source: 'tokens-file' });
+    }
+    // Extract font strings
+    const fontMatches = content.matchAll(/['"]?(Inter|Roboto|Helvetica|Arial|Poppins|Montserrat|Open Sans|Lato|Nunito|Source Sans|JetBrains Mono|Fira Code|SF Mono|Menlo|Consolas)['"]?/gi);
+    for (const m of fontMatches) {
+        tokens.fonts.push({ family: m[1], source: 'tokens-file' });
+    }
+}
+function isColorValue(v) {
+    return /^#([0-9a-fA-F]{3,8})$/.test(v) || /^rgb/i.test(v) || /^hsl/i.test(v);
+}
+function normalizeHex(v) {
+    if (/^#([0-9a-fA-F]{3})$/.test(v)) {
+        const [r, g, b] = v.slice(1).split('');
+        return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+    }
+    return v.toLowerCase().slice(0, 7);
+}
+//# sourceMappingURL=tokens-file.js.map

package/dist/extractors/ultra/animations.d.ts

@@ -0,0 +1,21 @@
+import { FullAnimationResult } from '../../types-ultra';
+/**
+ * Ultra mode — Full Animation Extractor
+ *
+ * Extracts EVERYTHING animation-related from a live website:
+ *
+ * 1. CSS @keyframes — complete with property values, selectors that use them,
+ *    duration/easing/delay/iteration metadata
+ * 2. Scroll journey screenshots — 7 frames at 0/17/33/50/67/83/100% scroll depth,
+ *    showing the cinematic state at every point of the page
+ * 3. Animation library detection — GSAP, ScrollTrigger, Lottie, Framer Motion,
+ *    AOS, Anime.js, Three.js, Canvas, WebGL, etc.
+ * 4. Video backgrounds — src, poster, autoplay/loop/muted, first-frame capture
+ * 5. Scroll-triggered patterns — data-aos, data-scroll, IntersectionObserver-driven,
+ *    GSAP ScrollTrigger elements
+ * 6. CSS animation variables — --duration-*, --ease-*, --delay-*, etc.
+ *
+ * Requires Playwright (optional peer dependency).
+ */
+export declare function captureAnimations(url: string, skillDir: string): Promise<FullAnimationResult>;
+//# sourceMappingURL=animations.d.ts.map