skillui 1.1.2 → 1.1.4

package/dist/extractors/ultra/components-dom.js

@@ -1,149 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.detectDOMComponents = detectDOMComponents;
-const playwright_loader_1 = require("../../playwright-loader");
-/**
- * Ultra mode — DOM Component Detector
- *
- * Detects repeated UI components by analyzing DOM structure:
- * - Elements with the same class pattern appearing 3+ times → component
- * - Groups by normalized class fingerprint
- * - Extracts representative HTML snippet
- *
- * Requires Playwright (optional peer dependency).
- */
-async function detectDOMComponents(url) {
-    const playwright = (0, playwright_loader_1.loadPlaywright)();
-    if (!playwright)
-        return [];
-    const browser = await playwright.chromium.launch({ headless: true });
-    try {
-        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',
-        });
-        const page = await context.newPage();
-        await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
-        await page.waitForTimeout(1000);
-        const components = await page.evaluate(() => {
-            // ── Fingerprint an element by its structure ───────────────────────
-            function fingerprint(el) {
-                const tag = el.tagName.toLowerCase();
-                // Normalize class names: remove dynamic/utility classes, sort
-                const stableClasses = Array.from(el.classList)
-                    .filter(c => {
-                    // Skip Tailwind utility classes, JS hooks, state classes
-                    if (/^(js-|is-|has-|data-|aria-)/.test(c))
-                        return false;
-                    if (/^(hover:|focus:|active:|sm:|md:|lg:|xl:|2xl:)/.test(c))
-                        return false;
-                    // Keep semantic/BEM-like classes
-                    return c.length >= 3 && c.length <= 40 && /^[a-zA-Z]/.test(c);
-                })
-                    .sort()
-                    .slice(0, 4);
-                const childTags = Array.from(el.children)
-                    .slice(0, 4)
-                    .map(c => c.tagName.toLowerCase())
-                    .join(',');
-                return `${tag}[${stableClasses.join('.')}](${childTags})`;
-            }
-            // ── Serialize HTML snippet (truncated) ─────────────────────────────
-            function htmlSnippet(el) {
-                const clone = el.cloneNode(true);
-                // Remove deeply nested children to keep snippet readable
-                const children = clone.querySelectorAll('*');
-                if (children.length > 12) {
-                    Array.from(children).slice(12).forEach(c => c.remove());
-                }
-                // Truncate text nodes
-                clone.querySelectorAll('*').forEach(n => {
-                    if (n.children.length === 0 && n.textContent && n.textContent.length > 40) {
-                        n.textContent = n.textContent.slice(0, 40) + '…';
-                    }
-                });
-                return clone.outerHTML.replace(/\s+/g, ' ').slice(0, 600);
-            }
-            // ── Categorize a component ────────────────────────────────────────
-            function categorize(el, classes) {
-                const tag = el.tagName.toLowerCase();
-                const classStr = classes.join(' ').toLowerCase();
-                if (/card|tile|item|product|post/.test(classStr))
-                    return 'card';
-                if (/nav.*item|menu.*item|tab/.test(classStr))
-                    return 'nav-item';
-                if (tag === 'li' || /list.*item/.test(classStr))
-                    return 'list-item';
-                if (tag === 'button' || /btn|button/.test(classStr))
-                    return 'button';
-                if (/badge|tag|chip|label/.test(classStr))
-                    return 'badge';
-                if (/field|input|form/.test(classStr))
-                    return 'form-field';
-                return 'unknown';
-            }
-            // ── Walk all elements with 1+ class ─────────────────────────────────
-            const allElements = document.querySelectorAll('[class]');
-            const groups = new Map();
-            allElements.forEach(el => {
-                const rect = el.getBoundingClientRect();
-                // Must be visible and reasonably sized
-                if (rect.width < 40 || rect.height < 20)
-                    return;
-                // Skip wrapper-only elements (body, html, main, etc.)
-                const tag = el.tagName.toLowerCase();
-                if (['html', 'body', 'main', 'head', 'script', 'style', 'link', 'meta'].includes(tag))
-                    return;
-                const fp = fingerprint(el);
-                if (!groups.has(fp))
-                    groups.set(fp, []);
-                groups.get(fp).push(el);
-            });
-            // ── Filter to repeated components (3+ instances) ──────────────────
-            const results = [];
-            for (const [fp, els] of groups.entries()) {
-                if (els.length < 3)
-                    continue;
-                const representative = els[0];
-                const stableClasses = Array.from(representative.classList)
-                    .filter(c => {
-                    if (/^(js-|is-|has-)/.test(c))
-                        return false;
-                    if (/^(hover:|focus:|sm:|md:|lg:)/.test(c))
-                        return false;
-                    return c.length >= 3;
-                })
-                    .sort()
-                    .slice(0, 6);
-                // Generate a human-readable component name
-                const tag = representative.tagName.toLowerCase();
-                const mainClass = stableClasses[0] || tag;
-                const name = mainClass
-                    .replace(/[-_]/g, ' ')
-                    .replace(/\b\w/g, l => l.toUpperCase())
-                    .trim() || tag;
-                const category = categorize(representative, stableClasses);
-                results.push({
-                    name,
-                    pattern: fp,
-                    instances: els.length,
-                    commonClasses: stableClasses,
-                    htmlSnippet: htmlSnippet(representative),
-                    category,
-                });
-                if (results.length >= 20)
-                    break;
-            }
-            // Sort by instance count descending
-            return results.sort((a, b) => b.instances - a.instances);
-        });
-        await page.close();
-        await browser.close();
-        return components;
-    }
-    catch {
-        await browser.close().catch(() => { });
-        return [];
-    }
-}
-//# sourceMappingURL=components-dom.js.map

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

@@ -1,14 +0,0 @@
-import { InteractionRecord } from '../../types-ultra';
-/**
- * Ultra mode — Micro-Interaction Extractor
- *
- * For each interactive element type (button, link, input, role-button):
- * - Capture default screenshot
- * - Simulate hover → capture screenshot + diff computed styles
- * - Simulate focus → capture screenshot + diff computed styles
- *
- * Saves screenshots to screens/states/
- * Returns InteractionRecord[] for INTERACTIONS.md generation.
- */
-export declare function captureInteractions(url: string, skillDir: string): Promise<InteractionRecord[]>;
-//# sourceMappingURL=interactions.d.ts.map

package/dist/extractors/ultra/interactions.js

@@ -1,222 +0,0 @@
-"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.captureInteractions = captureInteractions;
-const fs = __importStar(require("fs"));
-const path = __importStar(require("path"));
-const playwright_loader_1 = require("../../playwright-loader");
-const TRACKED_PROPS = [
-    'backgroundColor',
-    'color',
-    'borderColor',
-    'borderWidth',
-    'boxShadow',
-    'opacity',
-    'transform',
-    'outline',
-    'outlineColor',
-    'textDecoration',
-    'transition',
-];
-const INTERACTIVE_SELECTORS = [
-    { type: 'button', selector: 'button:not([disabled])' },
-    { type: 'role-button', selector: '[role="button"]:not([disabled])' },
-    { type: 'link', selector: 'a[href]:not([href^="#"]):not([href^="mailto"])' },
-    { type: 'input', selector: 'input:not([type="hidden"]):not([disabled])' },
-];
-/**
- * Ultra mode — Micro-Interaction Extractor
- *
- * For each interactive element type (button, link, input, role-button):
- * - Capture default screenshot
- * - Simulate hover → capture screenshot + diff computed styles
- * - Simulate focus → capture screenshot + diff computed styles
- *
- * Saves screenshots to screens/states/
- * Returns InteractionRecord[] for INTERACTIONS.md generation.
- */
-async function captureInteractions(url, skillDir) {
-    const playwright = (0, playwright_loader_1.loadPlaywright)();
-    if (!playwright)
-        return [];
-    const statesDir = path.join(skillDir, 'screens', 'states');
-    fs.mkdirSync(statesDir, { recursive: true });
-    const records = [];
-    const browser = await playwright.chromium.launch({ headless: true });
-    try {
-        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',
-        });
-        const page = await context.newPage();
-        await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
-        await page.waitForTimeout(1500);
-        for (const { type, selector } of INTERACTIVE_SELECTORS) {
-            try {
-                // Find up to 3 visible elements of this type
-                const elements = await page.locator(selector).all();
-                const visible = [];
-                for (const el of elements) {
-                    try {
-                        const box = await el.boundingBox();
-                        if (box && box.width > 0 && box.height > 0 && box.width < 800) {
-                            visible.push(el);
-                            if (visible.length >= 3)
-                                break;
-                        }
-                    }
-                    catch { /* skip */ }
-                }
-                for (let i = 0; i < visible.length; i++) {
-                    const el = visible[i];
-                    const prefix = `${type}-${i + 1}`;
-                    try {
-                        // Get label text
-                        const label = await el.evaluate((node) => {
-                            const text = node.innerText?.trim() ||
-                                node.getAttribute('aria-label') ||
-                                node.getAttribute('placeholder') ||
-                                node.getAttribute('type') ||
-                                node.tagName.toLowerCase();
-                            return text.slice(0, 40);
-                        });
-                        // ── Default state ─────────────────────────────────────
-                        const defaultStyles = await getStyles(el);
-                        const defaultFile = `${prefix}-default.png`;
-                        await screenshotElement(el, path.join(statesDir, defaultFile));
-                        // ── Hover state ───────────────────────────────────────
-                        let hoverStyles = null;
-                        let hoverFile;
-                        try {
-                            await el.hover({ force: true, timeout: 3000 });
-                            await page.waitForTimeout(300);
-                            hoverStyles = await getStyles(el);
-                            hoverFile = `${prefix}-hover.png`;
-                            await screenshotElement(el, path.join(statesDir, hoverFile));
-                            // Move away
-                            await page.mouse.move(0, 0);
-                            await page.waitForTimeout(200);
-                        }
-                        catch { /* hover not supported */ }
-                        // ── Focus state ───────────────────────────────────────
-                        let focusStyles = null;
-                        let focusFile;
-                        try {
-                            await el.focus({ timeout: 3000 });
-                            await page.waitForTimeout(300);
-                            focusStyles = await getStyles(el);
-                            focusFile = `${prefix}-focus.png`;
-                            await screenshotElement(el, path.join(statesDir, focusFile));
-                            // Blur
-                            await page.evaluate(() => document.activeElement?.blur?.());
-                            await page.waitForTimeout(200);
-                        }
-                        catch { /* focus not supported */ }
-                        const hoverChanges = hoverStyles
-                            ? diffStyles(defaultStyles, hoverStyles)
-                            : [];
-                        const focusChanges = focusStyles
-                            ? diffStyles(defaultStyles, focusStyles)
-                            : [];
-                        // Only record if there are actual visual changes
-                        if (hoverChanges.length > 0 ||
-                            focusChanges.length > 0 ||
-                            defaultFile) {
-                            records.push({
-                                componentType: type,
-                                label: label || type,
-                                selector: `${selector}:nth-of-type(${i + 1})`,
-                                index: i + 1,
-                                screenshots: {
-                                    default: `screens/states/${defaultFile}`,
-                                    hover: hoverFile ? `screens/states/${hoverFile}` : undefined,
-                                    focus: focusFile ? `screens/states/${focusFile}` : undefined,
-                                },
-                                hoverChanges,
-                                focusChanges,
-                                transitionValue: defaultStyles.transition,
-                            });
-                        }
-                    }
-                    catch { /* element failed — skip */ }
-                }
-            }
-            catch { /* selector failed — skip */ }
-        }
-        await page.close();
-    }
-    finally {
-        await browser.close().catch(() => { });
-    }
-    return records;
-}
-async function getStyles(el) {
-    return el.evaluate((node) => {
-        const s = window.getComputedStyle(node);
-        return {
-            backgroundColor: s.backgroundColor,
-            color: s.color,
-            borderColor: s.borderColor,
-            borderWidth: s.borderWidth,
-            boxShadow: s.boxShadow,
-            opacity: s.opacity,
-            transform: s.transform,
-            outline: s.outline,
-            outlineColor: s.outlineColor,
-            textDecoration: s.textDecoration,
-            transition: s.transition,
-        };
-    });
-}
-async function screenshotElement(el, filePath) {
-    try {
-        await el.screenshot({ path: filePath });
-    }
-    catch {
-        // Element screenshot failed — ignore
-    }
-}
-function diffStyles(before, after) {
-    const diffs = [];
-    for (const prop of TRACKED_PROPS) {
-        const b = before[prop] || '';
-        const a = after[prop] || '';
-        if (b !== a && a !== '' && a !== 'none' && a !== 'normal') {
-            diffs.push({ property: prop, from: b, to: a });
-        }
-    }
-    return diffs;
-}
-//# sourceMappingURL=interactions.js.map

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

@@ -1,14 +0,0 @@
-import { LayoutRecord } from '../../types-ultra';
-/**
- * Ultra mode — DOM Layout Extractor
- *
- * Crawls the page DOM and extracts layout information from significant containers:
- * - flex/grid parents
- * - section-level wrappers
- * - nav/header/footer
- *
- * Returns LayoutRecord[] for LAYOUT.md generation.
- * Requires Playwright (optional peer dependency).
- */
-export declare function extractLayouts(url: string): Promise<LayoutRecord[]>;
-//# sourceMappingURL=layout.d.ts.map

package/dist/extractors/ultra/layout.js

@@ -1,123 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractLayouts = extractLayouts;
-const playwright_loader_1 = require("../../playwright-loader");
-/**
- * Ultra mode — DOM Layout Extractor
- *
- * Crawls the page DOM and extracts layout information from significant containers:
- * - flex/grid parents
- * - section-level wrappers
- * - nav/header/footer
- *
- * Returns LayoutRecord[] for LAYOUT.md generation.
- * Requires Playwright (optional peer dependency).
- */
-async function extractLayouts(url) {
-    const playwright = (0, playwright_loader_1.loadPlaywright)();
-    if (!playwright)
-        return [];
-    const browser = await playwright.chromium.launch({ headless: true });
-    try {
-        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',
-        });
-        const page = await context.newPage();
-        await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
-        await page.waitForTimeout(1000);
-        const records = await page.evaluate(() => {
-            const LAYOUT_SELECTORS = [
-                'header',
-                'nav',
-                'main',
-                'footer',
-                'section',
-                'article',
-                '[class*="container"]',
-                '[class*="wrapper"]',
-                '[class*="layout"]',
-                '[class*="grid"]',
-                '[class*="flex"]',
-                '[class*="row"]',
-                '[class*="col"]',
-                '[class*="hero"]',
-                '[class*="card"]',
-            ];
-            function getDepth(el) {
-                let depth = 0;
-                let node = el.parentElement;
-                while (node) {
-                    depth++;
-                    node = node.parentElement;
-                }
-                return depth;
-            }
-            function buildSelector(el) {
-                const tag = el.tagName.toLowerCase();
-                const id = el.id ? `#${el.id}` : '';
-                const classes = Array.from(el.classList)
-                    .filter(c => !/^(js-|is-|has-)/.test(c))
-                    .slice(0, 2)
-                    .map(c => `.${c}`)
-                    .join('');
-                return `${tag}${id}${classes}`.slice(0, 60);
-            }
-            const seen = new WeakSet();
-            const results = [];
-            for (const sel of LAYOUT_SELECTORS) {
-                const elements = document.querySelectorAll(sel);
-                elements.forEach((el) => {
-                    if (seen.has(el))
-                        return;
-                    seen.add(el);
-                    const s = window.getComputedStyle(el);
-                    const display = s.display;
-                    // Only capture flex/grid/block containers with children
-                    if (!['flex', 'grid', 'block', 'inline-flex', 'inline-grid'].includes(display))
-                        return;
-                    const rect = el.getBoundingClientRect();
-                    if (rect.width < 100 || rect.height < 30)
-                        return;
-                    const childCount = el.children.length;
-                    if (childCount === 0)
-                        return;
-                    results.push({
-                        tag: el.tagName.toLowerCase(),
-                        selector: buildSelector(el),
-                        display,
-                        flexDirection: s.flexDirection || '',
-                        flexWrap: s.flexWrap || '',
-                        justifyContent: s.justifyContent || '',
-                        alignItems: s.alignItems || '',
-                        gap: s.gap || '',
-                        rowGap: s.rowGap || '',
-                        columnGap: s.columnGap || '',
-                        padding: s.padding || '',
-                        margin: s.margin || '',
-                        gridTemplateColumns: s.gridTemplateColumns || '',
-                        gridTemplateRows: s.gridTemplateRows || '',
-                        maxWidth: s.maxWidth || '',
-                        width: s.width || '',
-                        height: s.height || '',
-                        position: s.position || '',
-                        childCount,
-                        depth: getDepth(el),
-                    });
-                    if (results.length >= 60)
-                        return;
-                });
-            }
-            // Sort by depth (shallower = more structural)
-            return results.sort((a, b) => a.depth - b.depth).slice(0, 40);
-        });
-        await page.close();
-        await browser.close();
-        return records;
-    }
-    catch {
-        await browser.close().catch(() => { });
-        return [];
-    }
-}
-//# sourceMappingURL=layout.js.map

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

@@ -1,16 +0,0 @@
-import { PageScreenshot, SectionScreenshot } from '../../types-ultra';
-/**
- * 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).
- */
-export declare function capturePageScreenshots(originUrl: string, skillDir: string, maxPages: number): Promise<{
-    pages: PageScreenshot[];
-    sections: SectionScreenshot[];
-}>;
-//# sourceMappingURL=pages.d.ts.map