skillui 1.1.0

package/dist/extractors/ultra/pages.js

@@ -0,0 +1,231 @@
+"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.capturePageScreenshots = capturePageScreenshots;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Ultra mode — Page & Section Screenshots
+ *
+ * 1. Crawl up to `maxPages` internal links from the origin URL
+ * 2. Take a full-page screenshot for each (screens/pages/[slug].png)
+ * 3. Detect major sections (section, article, main > div, height > 300px)
+ *    and clip one screenshot per section (screens/sections/[page]-section-N.png)
+ *
+ * Requires Playwright (optional peer dependency).
+ */
+async function capturePageScreenshots(originUrl, skillDir, maxPages) {
+    let playwright;
+    try {
+        playwright = require('playwright');
+    }
+    catch {
+        return { pages: [], sections: [] };
+    }
+    const pagesDir = path.join(skillDir, 'screens', 'pages');
+    const sectionsDir = path.join(skillDir, 'screens', 'sections');
+    fs.mkdirSync(pagesDir, { recursive: true });
+    fs.mkdirSync(sectionsDir, { recursive: true });
+    const pages = [];
+    const sections = [];
+    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 origin = new URL(originUrl).origin;
+        const visited = new Set();
+        const queue = [originUrl];
+        while (queue.length > 0 && visited.size < maxPages) {
+            const url = queue.shift();
+            const normalized = normalizeUrl(url);
+            if (visited.has(normalized))
+                continue;
+            visited.add(normalized);
+            const slug = urlToSlug(url, origin);
+            const pageFile = path.join(pagesDir, `${slug}.png`);
+            try {
+                const page = await context.newPage();
+                await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
+                await page.waitForTimeout(1500);
+                // Full-page screenshot
+                await page.screenshot({ path: pageFile, fullPage: true });
+                const title = await page.title().catch(() => slug);
+                pages.push({
+                    url,
+                    slug,
+                    filePath: `screens/pages/${slug}.png`,
+                    title: title || slug,
+                });
+                // Section screenshots
+                const sectionData = await page.evaluate(() => {
+                    const SECTION_SELECTORS = [
+                        'section',
+                        'article',
+                        'header',
+                        'footer',
+                        'nav',
+                        'main > div',
+                        'main > section',
+                        '[class*="section"]',
+                        '[class*="hero"]',
+                        '[class*="features"]',
+                        '[class*="pricing"]',
+                        '[class*="testimonial"]',
+                        '[class*="faq"]',
+                        '[class*="cta"]',
+                    ];
+                    const candidates = [];
+                    for (const sel of SECTION_SELECTORS) {
+                        const els = document.querySelectorAll(sel);
+                        els.forEach((el) => {
+                            const rect = el.getBoundingClientRect();
+                            const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                            // Must be wide (>= 60% viewport) and tall (>= 200px)
+                            if (rect.width >= window.innerWidth * 0.6 && rect.height >= 200) {
+                                candidates.push({
+                                    selector: sel,
+                                    rect: {
+                                        x: Math.max(0, rect.left),
+                                        y: Math.max(0, rect.top + scrollTop),
+                                        width: Math.min(rect.width, 1440),
+                                        height: Math.min(rect.height, 1200),
+                                    },
+                                });
+                            }
+                        });
+                    }
+                    // Deduplicate: remove sections whose top is within 50px of another
+                    const deduped = [];
+                    for (const c of candidates) {
+                        const overlap = deduped.some((d) => Math.abs(d.rect.y - c.rect.y) < 50);
+                        if (!overlap)
+                            deduped.push(c);
+                    }
+                    return deduped.slice(0, 10);
+                });
+                for (let i = 0; i < sectionData.length; i++) {
+                    const sec = sectionData[i];
+                    const secFile = `${slug}-section-${i + 1}.png`;
+                    const secPath = path.join(sectionsDir, secFile);
+                    try {
+                        await page.screenshot({
+                            path: secPath,
+                            clip: {
+                                x: sec.rect.x,
+                                y: sec.rect.y,
+                                width: sec.rect.width,
+                                height: sec.rect.height,
+                            },
+                        });
+                        sections.push({
+                            page: slug,
+                            index: i + 1,
+                            filePath: `screens/sections/${secFile}`,
+                            selector: sec.selector,
+                            height: Math.round(sec.rect.height),
+                            width: Math.round(sec.rect.width),
+                        });
+                    }
+                    catch {
+                        // Section clip failed — skip
+                    }
+                }
+                // Discover internal links for queue
+                if (visited.size < maxPages) {
+                    const links = await page.evaluate((origin) => {
+                        return Array.from(document.querySelectorAll('a[href]'))
+                            .map((a) => a.href)
+                            .filter((href) => {
+                            try {
+                                const u = new URL(href);
+                                return (u.origin === origin &&
+                                    !u.pathname.match(/\.(pdf|zip|png|jpg|svg|ico|css|js|xml|json|txt)$/i) &&
+                                    !u.hash);
+                            }
+                            catch {
+                                return false;
+                            }
+                        })
+                            .slice(0, 20);
+                    }, origin);
+                    for (const link of links) {
+                        const norm = normalizeUrl(link);
+                        if (!visited.has(norm) && !queue.includes(link)) {
+                            queue.push(link);
+                        }
+                    }
+                }
+                await page.close();
+            }
+            catch (err) {
+                // Page failed — continue with next
+                try {
+                    await context.pages()[0]?.close();
+                }
+                catch { }
+            }
+        }
+    }
+    finally {
+        await browser.close().catch(() => { });
+    }
+    return { pages, sections };
+}
+function normalizeUrl(url) {
+    try {
+        const u = new URL(url);
+        return `${u.origin}${u.pathname}`.replace(/\/$/, '');
+    }
+    catch {
+        return url;
+    }
+}
+function urlToSlug(url, origin) {
+    try {
+        const u = new URL(url);
+        const rel = u.pathname.replace(/^\//, '').replace(/\/$/, '') || 'home';
+        return rel
+            .replace(/[^a-zA-Z0-9/]/g, '-')
+            .replace(/\//g, '--')
+            .replace(/-{2,}/g, '-')
+            .slice(0, 60) || 'home';
+    }
+    catch {
+        return 'home';
+    }
+}
+//# sourceMappingURL=pages.js.map

package/dist/font-resolver.d.ts

@@ -0,0 +1,10 @@
+import { FontSource } from './types';
+/**
+ * Fetch font files from Google Fonts API and bundle them into the skill directory.
+ * Downloads ALL available weights (non-italic) for each font family.
+ */
+export declare function bundleFonts(fontSources: FontSource[], fontFamilies: string[], skillDir: string, _usedWeights?: Set<string>): Promise<{
+    updatedSources: FontSource[];
+    bundledCount: number;
+}>;
+//# sourceMappingURL=font-resolver.d.ts.map

package/dist/font-resolver.js

@@ -0,0 +1,280 @@
+"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.bundleFonts = bundleFonts;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Resolve font families via the Google Fonts API.
+ *
+ * Downloads real .ttf files for each font family needed by the project.
+ * No local fonts-main/ directory required.
+ */
+const GOOGLE_FONTS_API_KEY = 'AIzaSyCETey82fDURE2zp-MPF2lb_R-9PeAcPjY';
+const GOOGLE_FONTS_API = `https://www.googleapis.com/webfonts/v1/webfonts`;
+/** Returns true for fonts that cannot or should not be downloaded (system, generic, icon). */
+function isSkippableFont(family) {
+    if (!family)
+        return true;
+    // Generic CSS families
+    if (/^(sans-serif|serif|monospace|cursive|fantasy|system-ui|ui-sans-serif|ui-serif|ui-monospace|inherit|initial|unset)$/i.test(family))
+        return true;
+    // System fonts (OS-level, not on Google Fonts)
+    if (/^(-apple-system|blinkmacsystemfont|\.sf\s*(pro|compact)|sf\s*(pro|compact)|segoe\s*ui|helvetica\s*neue|helvetica|arial)/i.test(family))
+        return true;
+    // Proprietary fonts (Google internal, etc.)
+    if (/^(google\s*sans|product\s*sans|roboto\s*flex)/i.test(family))
+        return false; // These ARE on Google Fonts
+    // Icon/symbol fonts
+    if (/^(apple\s*(icons?|legacy|sf\s*symbols?)|material\s*(icons?|symbols?)|font\s*awesome|fontawesome|glyphicons?|ionicons?)/i.test(family))
+        return true;
+    if (/^apple\s*icons?\s*\d+/i.test(family))
+        return true;
+    return false;
+}
+/**
+ * Query Google Fonts API for a specific font family.
+ * Returns download URLs for each weight variant (TTF format).
+ */
+async function fetchFontMetadata(family) {
+    // No capability param — default returns real .ttf URLs
+    const url = `${GOOGLE_FONTS_API}?key=${GOOGLE_FONTS_API_KEY}&family=${encodeURIComponent(family)}`;
+    try {
+        const res = await fetch(url);
+        if (!res.ok)
+            return [];
+        const data = await res.json();
+        if (!data.items || data.items.length === 0)
+            return [];
+        const item = data.items[0];
+        const files = [];
+        // item.files is { "regular": "url", "700": "url", "italic": "url", ... }
+        if (item.files) {
+            for (const [variant, fileUrl] of Object.entries(item.files)) {
+                // Skip italic variants to keep package small
+                if (/italic/i.test(variant))
+                    continue;
+                const weight = variantToWeight(variant);
+                const safeName = family.replace(/\s+/g, '') + '-' + weightToLabel(variant) + '.ttf';
+                files.push({
+                    family: item.family || family,
+                    weight,
+                    url: fileUrl,
+                    fileName: safeName,
+                });
+            }
+        }
+        return files;
+    }
+    catch {
+        return [];
+    }
+}
+function variantToWeight(variant) {
+    const map = {
+        '100': '100', '200': '200', '300': '300',
+        'regular': '400', '400': '400',
+        '500': '500', '600': '600',
+        '700': '700', '800': '800', '900': '900',
+    };
+    return map[variant] || '400';
+}
+function weightToLabel(variant) {
+    const map = {
+        '100': 'Thin',
+        '200': 'ExtraLight',
+        '300': 'Light',
+        'regular': 'Regular',
+        '400': 'Regular',
+        '500': 'Medium',
+        '600': 'SemiBold',
+        '700': 'Bold',
+        '800': 'ExtraBold',
+        '900': 'Black',
+    };
+    return map[variant] || variant;
+}
+/**
+ * Download a font file from a URL and save it locally.
+ * Accepts TTF, OTF, and WOFF2 formats.
+ */
+async function downloadFont(url, destPath) {
+    try {
+        const res = await fetch(url, { headers: { 'User-Agent': 'Mozilla/5.0' } });
+        if (!res.ok)
+            return false;
+        const buffer = Buffer.from(await res.arrayBuffer());
+        if (buffer.length < 4)
+            return false;
+        const magic = buffer.readUInt32BE(0);
+        // TTF: 0x00010000 or 0x74727565 ('true')
+        // OTF: 0x4F54544F ('OTTO')
+        // WOFF2: 0x774F4632
+        // WOFF:  0x774F4646
+        const validMagics = [0x00010000, 0x74727565, 0x4F54544F, 0x774F4632, 0x774F4646];
+        if (!validMagics.includes(magic))
+            return false;
+        fs.writeFileSync(destPath, buffer);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Detect the font format from magic bytes.
+ */
+function detectFontFormat(buffer) {
+    if (buffer.length < 4)
+        return 'truetype';
+    const magic = buffer.readUInt32BE(0);
+    if (magic === 0x774F4632)
+        return 'woff2';
+    if (magic === 0x774F4646)
+        return 'woff';
+    if (magic === 0x4F54544F)
+        return 'opentype';
+    return 'truetype';
+}
+/**
+ * Try to download a font directly from its source URL (for custom/proprietary fonts
+ * not available on Google Fonts API). Returns the local file path or null.
+ */
+async function downloadFontFromSource(src, fontsOutputDir) {
+    if (!src.src || !src.src.startsWith('http'))
+        return null;
+    // Build a clean filename from family + weight + format
+    const ext = src.src.includes('.woff2') ? 'woff2'
+        : src.src.includes('.woff') ? 'woff'
+            : src.src.includes('.otf') ? 'otf'
+                : 'ttf';
+    const weightLabel = src.weight === '400' || src.weight === 'regular' ? 'Regular' : (src.weight || 'Regular');
+    const safeName = (src.family || 'Font').replace(/\s+/g, '') + '-' + weightLabel + '.' + ext;
+    const destPath = path.join(fontsOutputDir, safeName);
+    if (!fs.existsSync(destPath)) {
+        const ok = await downloadFont(src.src, destPath);
+        if (!ok)
+            return null;
+    }
+    // Detect actual format from downloaded bytes
+    let format = src.format || ext;
+    try {
+        const buf = fs.readFileSync(destPath);
+        format = detectFontFormat(buf);
+    }
+    catch { }
+    return {
+        family: src.family,
+        src: `fonts/${safeName}`,
+        format,
+        weight: src.weight,
+    };
+}
+/**
+ * Fetch font files from Google Fonts API and bundle them into the skill directory.
+ * Downloads ALL available weights (non-italic) for each font family.
+ */
+async function bundleFonts(fontSources, fontFamilies, skillDir, _usedWeights) {
+    const fontsOutputDir = path.join(skillDir, 'fonts');
+    let bundledCount = 0;
+    const updatedSources = [];
+    const bundledFamilies = new Set();
+    // Collect all unique font families — skip generics, system fonts, and icon fonts
+    const allFamilies = new Set();
+    for (const src of fontSources) {
+        if (!isSkippableFont(src.family))
+            allFamilies.add(src.family);
+    }
+    for (const f of fontFamilies) {
+        if (f && !isSkippableFont(f))
+            allFamilies.add(f);
+    }
+    for (const family of allFamilies) {
+        // Try Google Fonts API first
+        const fontFiles = await fetchFontMetadata(family);
+        if (fontFiles.length > 0) {
+            // Create fonts/ directory if needed
+            if (!fs.existsSync(fontsOutputDir)) {
+                fs.mkdirSync(fontsOutputDir, { recursive: true });
+            }
+            // Download ALL available weights (non-italic already filtered)
+            for (const font of fontFiles) {
+                const destPath = path.join(fontsOutputDir, font.fileName);
+                if (!fs.existsSync(destPath)) {
+                    const ok = await downloadFont(font.url, destPath);
+                    if (!ok)
+                        continue;
+                    bundledCount++;
+                }
+                updatedSources.push({
+                    family: font.family,
+                    src: `fonts/${font.fileName}`,
+                    format: 'truetype',
+                    weight: font.weight,
+                });
+            }
+            bundledFamilies.add(family);
+        }
+        else {
+            // Not on Google Fonts — try downloading directly from fontSources URLs
+            // (handles custom/proprietary fonts like "delight", or self-hosted woff2)
+            const sourcesForFamily = fontSources.filter(s => s.family === family);
+            if (sourcesForFamily.length > 0) {
+                if (!fs.existsSync(fontsOutputDir)) {
+                    fs.mkdirSync(fontsOutputDir, { recursive: true });
+                }
+                let downloadedAny = false;
+                for (const src of sourcesForFamily) {
+                    const downloaded = await downloadFontFromSource(src, fontsOutputDir);
+                    if (downloaded) {
+                        updatedSources.push(downloaded);
+                        bundledCount++;
+                        downloadedAny = true;
+                    }
+                }
+                if (downloadedAny)
+                    bundledFamilies.add(family);
+            }
+        }
+    }
+    // Keep remote sources for fonts we couldn't download at all
+    for (const src of fontSources) {
+        if (!bundledFamilies.has(src.family)) {
+            updatedSources.push(src);
+        }
+    }
+    return { updatedSources, bundledCount };
+}
+//# sourceMappingURL=font-resolver.js.map

package/dist/modes/dir.d.ts

@@ -0,0 +1,6 @@
+import { DesignProfile } from '../types';
+/**
+ * DIR mode: scan a local project directory and extract design tokens.
+ */
+export declare function runDirMode(projectDir: string, nameOverride?: string): Promise<DesignProfile>;
+//# sourceMappingURL=dir.d.ts.map