skillui 1.1.0

package/dist/extractors/framework.js

@@ -0,0 +1,126 @@
+"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.detectFrameworks = detectFrameworks;
+exports.getProjectName = getProjectName;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const DEP_MAP = [
+    { pkg: 'tailwindcss', id: 'tailwind', name: 'Tailwind CSS' },
+    { pkg: 'react', id: 'react', name: 'React' },
+    { pkg: 'vue', id: 'vue', name: 'Vue' },
+    { pkg: 'next', id: 'next', name: 'Next.js' },
+    { pkg: 'nuxt', id: 'nuxt', name: 'Nuxt' },
+    { pkg: 'svelte', id: 'svelte', name: 'Svelte' },
+    { pkg: '@angular/core', id: 'angular', name: 'Angular' },
+    { pkg: 'styled-components', id: 'css-in-js', name: 'CSS-in-JS (styled-components)' },
+    { pkg: '@emotion/react', id: 'css-in-js', name: 'CSS-in-JS (Emotion)' },
+    { pkg: '@emotion/styled', id: 'css-in-js', name: 'CSS-in-JS (Emotion)' },
+];
+function detectFrameworks(projectDir) {
+    const frameworks = [];
+    const seen = new Set();
+    // Read package.json
+    const pkgPath = path.join(projectDir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+            const allDeps = {
+                ...pkg.dependencies,
+                ...pkg.devDependencies,
+            };
+            for (const mapping of DEP_MAP) {
+                if (allDeps[mapping.pkg] && !seen.has(mapping.id)) {
+                    seen.add(mapping.id);
+                    frameworks.push({
+                        id: mapping.id,
+                        name: mapping.name,
+                        version: allDeps[mapping.pkg].replace(/[\^~>=<]/g, ''),
+                    });
+                }
+            }
+        }
+        catch {
+            // Ignore malformed package.json
+        }
+    }
+    // Check for CSS Modules
+    if (!seen.has('css-modules')) {
+        if (hasCSSModules(projectDir)) {
+            seen.add('css-modules');
+            frameworks.push({ id: 'css-modules', name: 'CSS Modules' });
+        }
+    }
+    return frameworks;
+}
+function hasCSSModules(dir, depth = 0) {
+    if (depth > 4)
+        return false;
+    try {
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            if (entry.name === 'node_modules' || entry.name === '.git')
+                continue;
+            if (entry.isFile() && /\.module\.(css|scss|less)$/.test(entry.name)) {
+                return true;
+            }
+            if (entry.isDirectory() && depth < 4) {
+                if (hasCSSModules(path.join(dir, entry.name), depth + 1))
+                    return true;
+            }
+        }
+    }
+    catch {
+        // Permission errors etc.
+    }
+    return false;
+}
+function getProjectName(projectDir, overrideName) {
+    if (overrideName)
+        return overrideName;
+    const pkgPath = path.join(projectDir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+            if (pkg.name)
+                return pkg.name;
+        }
+        catch {
+            // Ignore
+        }
+    }
+    return path.basename(path.resolve(projectDir));
+}
+//# sourceMappingURL=framework.js.map

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

@@ -0,0 +1,7 @@
+import { RawTokens } from '../../types';
+/**
+ * URL mode: Extract computed styles from live DOM using Playwright.
+ * Playwright is an optional peer dependency.
+ */
+export declare function extractComputedTokens(url: string, maxPages?: number): Promise<RawTokens>;
+//# sourceMappingURL=computed.d.ts.map

package/dist/extractors/tokens/computed.js

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractComputedTokens = extractComputedTokens;
+/**
+ * URL mode: Extract computed styles from live DOM using Playwright.
+ * Playwright is an optional peer dependency.
+ */
+async function extractComputedTokens(url, maxPages = 5) {
+    const tokens = {
+        colors: [],
+        fonts: [],
+        spacingValues: [],
+        shadows: [],
+        cssVariables: [],
+        breakpoints: [],
+        borderRadii: [],
+        gradients: [],
+        fontVarMap: {},
+        animations: [],
+        darkModeVars: [],
+        zIndexValues: [],
+        containerMaxWidth: null,
+        fontSources: [],
+        pageSections: [],
+        transitionDurations: [],
+        transitionEasings: [],
+    };
+    let playwright;
+    try {
+        playwright = require('playwright');
+    }
+    catch {
+        // Playwright not installed — caller should handle this
+        return tokens;
+    }
+    const browser = await playwright.chromium.launch({ headless: true });
+    const context = await browser.newContext({
+        viewport: { width: 1440, height: 900 },
+        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+    });
+    try {
+        const visited = new Set();
+        const toVisit = [url];
+        while (toVisit.length > 0 && visited.size < maxPages) {
+            const currentUrl = toVisit.shift();
+            if (visited.has(currentUrl))
+                continue;
+            visited.add(currentUrl);
+            try {
+                const page = await context.newPage();
+                await page.goto(currentUrl, { waitUntil: 'networkidle', timeout: 20000 });
+                // Wait a moment for any JS-rendered content
+                await page.waitForTimeout(1500);
+                // Extract comprehensive styles from the page
+                const pageTokens = await page.evaluate(() => {
+                    const colors = [];
+                    const fonts = [];
+                    const spacingValues = [];
+                    const shadows = [];
+                    const cssVars = [];
+                    const borderRadii = [];
+                    // ── Extract CSS custom properties from all stylesheets ──
+                    try {
+                        const sheets = document.styleSheets;
+                        for (let i = 0; i < sheets.length; i++) {
+                            try {
+                                const rules = sheets[i].cssRules;
+                                for (let j = 0; j < rules.length; j++) {
+                                    const rule = rules[j];
+                                    if (rule instanceof CSSStyleRule) {
+                                        // Get CSS variables from :root, body, html, .dark, etc.
+                                        if (/^(:root|html|body|\.dark)/.test(rule.selectorText)) {
+                                            for (let k = 0; k < rule.style.length; k++) {
+                                                const prop = rule.style[k];
+                                                if (prop.startsWith('--')) {
+                                                    cssVars.push({
+                                                        name: prop,
+                                                        value: rule.style.getPropertyValue(prop).trim(),
+                                                    });
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            catch {
+                                // Cross-origin stylesheets
+                            }
+                        }
+                    }
+                    catch {
+                        // Ignore
+                    }
+                    // ── Sample elements for computed styles ──
+                    // Target semantically meaningful elements
+                    const selectors = [
+                        'body',
+                        'header', 'nav', 'main', 'footer', 'aside',
+                        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+                        'p', 'a', 'span',
+                        'button', 'input', 'select', 'textarea',
+                        'table', 'th', 'td',
+                        'img', 'svg',
+                        '[class*="card"]', '[class*="modal"]', '[class*="dialog"]',
+                        '[class*="badge"]', '[class*="chip"]', '[class*="tag"]',
+                        '[class*="btn"]', '[class*="button"]',
+                        '[class*="nav"]', '[class*="menu"]',
+                        '[class*="hero"]', '[class*="banner"]',
+                        '[class*="container"]', '[class*="wrapper"]',
+                        'section', 'article', 'div',
+                    ];
+                    const allElements = new Set();
+                    for (const sel of selectors) {
+                        try {
+                            const els = document.querySelectorAll(sel);
+                            els.forEach(el => allElements.add(el));
+                        }
+                        catch {
+                            // Invalid selector
+                        }
+                    }
+                    const colorMap = new Map();
+                    const fontMap = new Map();
+                    const sampleSize = Math.min(allElements.size, 500);
+                    let count = 0;
+                    for (const el of allElements) {
+                        if (count++ >= sampleSize)
+                            break;
+                        const style = getComputedStyle(el);
+                        // ── Colors ──
+                        for (const prop of ['color', 'backgroundColor', 'borderColor', 'outlineColor']) {
+                            const val = style[prop];
+                            if (val && val !== 'rgba(0, 0, 0, 0)' && val !== 'transparent' && val !== 'inherit') {
+                                colorMap.set(val, (colorMap.get(val) || 0) + 1);
+                            }
+                        }
+                        // ── Fonts ──
+                        const family = style.fontFamily.split(',')[0].replace(/["']/g, '').trim();
+                        if (family && family !== 'inherit') {
+                            if (!fontMap.has(family)) {
+                                fontMap.set(family, {
+                                    size: style.fontSize,
+                                    weight: style.fontWeight,
+                                });
+                            }
+                        }
+                        // ── Spacing ──
+                        for (const prop of [
+                            'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
+                            'marginTop', 'marginBottom', 'marginLeft', 'marginRight',
+                            'gap', 'rowGap', 'columnGap',
+                        ]) {
+                            const val = parseFloat(style[prop]);
+                            if (val > 0 && val <= 200)
+                                spacingValues.push(Math.round(val));
+                        }
+                        // ── Shadows ──
+                        const shadow = style.boxShadow;
+                        if (shadow && shadow !== 'none') {
+                            shadows.push({ value: shadow });
+                        }
+                        // ── Border Radius ──
+                        const radius = style.borderRadius;
+                        if (radius && radius !== '0px') {
+                            borderRadii.push(radius);
+                        }
+                    }
+                    // Convert color map
+                    for (const [val, freq] of colorMap.entries()) {
+                        colors.push({ value: val, frequency: freq });
+                    }
+                    // Convert font map
+                    for (const [family, info] of fontMap.entries()) {
+                        fonts.push({ family, size: info.size, weight: info.weight });
+                    }
+                    return { colors, fonts, spacingValues, shadows, cssVars, borderRadii };
+                });
+                // Convert rgb() colors to hex
+                for (const color of pageTokens.colors) {
+                    const hex = rgbStringToHex(color.value);
+                    if (hex) {
+                        const existing = tokens.colors.find(c => c.value === hex);
+                        if (existing) {
+                            existing.frequency += color.frequency;
+                        }
+                        else {
+                            tokens.colors.push({ value: hex, frequency: color.frequency, source: 'computed' });
+                        }
+                    }
+                }
+                for (const font of pageTokens.fonts) {
+                    if (font.family && !tokens.fonts.find(f => f.family === font.family)) {
+                        tokens.fonts.push({ ...font, source: 'computed' });
+                    }
+                }
+                tokens.spacingValues.push(...pageTokens.spacingValues);
+                for (const shadow of pageTokens.shadows) {
+                    if (!tokens.shadows.find(s => s.value === shadow.value)) {
+                        tokens.shadows.push(shadow);
+                    }
+                }
+                for (const cssVar of pageTokens.cssVars) {
+                    if (!tokens.cssVariables.find(v => v.name === cssVar.name)) {
+                        tokens.cssVariables.push({ name: cssVar.name, value: cssVar.value });
+                    }
+                }
+                for (const radius of pageTokens.borderRadii) {
+                    if (!tokens.borderRadii.includes(radius)) {
+                        tokens.borderRadii.push(radius);
+                    }
+                }
+                // Find links for crawling
+                const links = await page.evaluate((baseUrl) => {
+                    const origin = new URL(baseUrl).origin;
+                    return Array.from(document.querySelectorAll('a[href]'))
+                        .map(a => {
+                        try {
+                            return new URL(a.href, baseUrl).href;
+                        }
+                        catch {
+                            return '';
+                        }
+                    })
+                        .filter(href => href.startsWith(origin) && !href.includes('#'));
+                }, currentUrl);
+                for (const link of links.slice(0, 10)) {
+                    if (!visited.has(link))
+                        toVisit.push(link);
+                }
+                await page.close();
+            }
+            catch {
+                // Skip pages that fail to load
+            }
+        }
+    }
+    finally {
+        await browser.close();
+    }
+    return tokens;
+}
+function rgbStringToHex(rgb) {
+    const match = rgb.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (!match)
+        return null;
+    const [, r, g, b] = match;
+    return '#' + [r, g, b].map(c => parseInt(c).toString(16).padStart(2, '0')).join('').toLowerCase();
+}
+//# sourceMappingURL=computed.js.map

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

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