skillui 1.1.2 → 1.1.3

package/dist/writers/interactions-md.d.ts

@@ -1,8 +0,0 @@
-import { InteractionRecord } from '../types-ultra';
-import { DesignProfile } from '../types';
-/**
- * Generate references/INTERACTIONS.md
- * Documents hover/focus micro-interactions with style diffs and screenshot references.
- */
-export declare function generateInteractionsMd(interactions: InteractionRecord[], profile: DesignProfile): string;
-//# sourceMappingURL=interactions-md.d.ts.map

package/dist/writers/interactions-md.js

@@ -1,146 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateInteractionsMd = generateInteractionsMd;
-/**
- * Generate references/INTERACTIONS.md
- * Documents hover/focus micro-interactions with style diffs and screenshot references.
- */
-function generateInteractionsMd(interactions, profile) {
-    let md = `# Interaction Reference\n\n`;
-    md += `> Micro-interactions extracted from live DOM. Recreate these exactly for authentic feel.\n\n`;
-    if (interactions.length === 0) {
-        md += `No interaction data extracted (Playwright required).\n`;
-        return md;
-    }
-    // ── Overview ────────────────────────────────────────────────────────
-    const byType = groupBy(interactions, i => i.componentType);
-    md += `## Coverage\n\n`;
-    md += `| Component Type | Count | States Captured |\n`;
-    md += `|----------------|-------|----------------|\n`;
-    for (const [type, records] of Object.entries(byType)) {
-        const states = new Set();
-        records.forEach(r => {
-            if (r.screenshots.default)
-                states.add('default');
-            if (r.screenshots.hover)
-                states.add('hover');
-            if (r.screenshots.focus)
-                states.add('focus');
-        });
-        md += `| ${formatType(type)} | ${records.length} | ${[...states].join(', ')} |\n`;
-    }
-    md += `\n`;
-    // ── Transition System ───────────────────────────────────────────────
-    const transitionValues = interactions
-        .map(i => i.transitionValue)
-        .filter(t => t && t !== 'all 0s ease 0s' && t !== 'none' && !t.startsWith('all 0s'));
-    const uniqueTransitions = [...new Set(transitionValues)];
-    if (uniqueTransitions.length > 0) {
-        md += `## Transition System\n\n`;
-        md += `These transition declarations were extracted from interactive elements:\n\n`;
-        md += `\`\`\`css\n`;
-        for (const t of uniqueTransitions.slice(0, 8)) {
-            md += `transition: ${t};\n`;
-        }
-        md += `\`\`\`\n\n`;
-        md += `Apply these to all interactive elements. Never invent new durations or easings.\n\n`;
-    }
-    // ── Per Component Type ─────────────────────────────────────────────
-    for (const [type, records] of Object.entries(byType)) {
-        md += `## ${formatType(type)} Interactions\n\n`;
-        for (const rec of records) {
-            md += `### ${formatType(type)} ${rec.index} — \`${rec.label}\`\n\n`;
-            // Screenshots
-            if (rec.screenshots.default || rec.screenshots.hover || rec.screenshots.focus) {
-                md += `**States:**\n\n`;
-                if (rec.screenshots.default) {
-                    md += `- Default: \`../${rec.screenshots.default}\`\n`;
-                }
-                if (rec.screenshots.hover) {
-                    md += `- Hover: \`../${rec.screenshots.hover}\`\n`;
-                }
-                if (rec.screenshots.focus) {
-                    md += `- Focus: \`../${rec.screenshots.focus}\`\n`;
-                }
-                md += `\n`;
-            }
-            // Hover changes
-            if (rec.hoverChanges.length > 0) {
-                md += `**On hover:**\n\n`;
-                md += `\`\`\`css\n`;
-                for (const diff of rec.hoverChanges) {
-                    md += `/* ${cssProperty(diff.property)}: ${diff.from} → */ ${cssProperty(diff.property)}: ${diff.to};\n`;
-                }
-                md += `\`\`\`\n\n`;
-            }
-            // Focus changes
-            if (rec.focusChanges.length > 0) {
-                md += `**On focus:**\n\n`;
-                md += `\`\`\`css\n`;
-                for (const diff of rec.focusChanges) {
-                    md += `/* ${cssProperty(diff.property)}: ${diff.from} → */ ${cssProperty(diff.property)}: ${diff.to};\n`;
-                }
-                md += `\`\`\`\n\n`;
-            }
-            // Transition
-            if (rec.transitionValue && rec.transitionValue !== 'none' && rec.transitionValue !== 'all 0s ease 0s') {
-                md += `**Transition:** \`${rec.transitionValue}\`\n\n`;
-            }
-            if (rec.hoverChanges.length === 0 && rec.focusChanges.length === 0) {
-                md += `_No visible style changes detected for this element._\n\n`;
-            }
-        }
-    }
-    // ── Interaction Rules ──────────────────────────────────────────────
-    md += `## Interaction Rules\n\n`;
-    const accent = profile.colors.find(c => c.role === 'accent');
-    if (accent) {
-        md += `- Accent color \`${accent.hex}\` is used for focus rings, active states, and hover highlights\n`;
-    }
-    const hasOpacityHover = interactions.some(i => i.hoverChanges.some(d => d.property === 'opacity'));
-    if (hasOpacityHover) {
-        md += `- Hover effects use **opacity** changes, not color shifts\n`;
-    }
-    const hasColorHover = interactions.some(i => i.hoverChanges.some(d => d.property === 'color' || d.property === 'backgroundColor'));
-    if (hasColorHover) {
-        md += `- Hover effects include **color transitions** — use the extracted values, not approximations\n`;
-    }
-    const hasFocusOutline = interactions.some(i => i.focusChanges.some(d => d.property === 'outline' || d.property === 'outlineColor'));
-    if (hasFocusOutline) {
-        md += `- Focus states use **outline** (not box-shadow) — always match the extracted focus ring\n`;
-    }
-    if (uniqueTransitions.length > 0) {
-        const durations = uniqueTransitions
-            .join(' ')
-            .match(/\d+(?:\.\d+)?(?:ms|s)/g) || [];
-        const uniqueDurations = [...new Set(durations)];
-        if (uniqueDurations.length > 0) {
-            md += `- Transition durations in use: ${uniqueDurations.map(d => `\`${d}\``).join(', ')}\n`;
-        }
-    }
-    md += `- Always respect \`prefers-reduced-motion\` — set all transitions to \`0s\` when enabled\n`;
-    md += `\n`;
-    return md;
-}
-function formatType(type) {
-    const map = {
-        button: 'Button',
-        link: 'Link',
-        input: 'Input',
-        'role-button': 'Role Button',
-    };
-    return map[type] || type;
-}
-function cssProperty(camelCase) {
-    return camelCase.replace(/([A-Z])/g, '-$1').toLowerCase();
-}
-function groupBy(arr, key) {
-    return arr.reduce((acc, item) => {
-        const k = key(item);
-        if (!acc[k])
-            acc[k] = [];
-        acc[k].push(item);
-        return acc;
-    }, {});
-}
-//# sourceMappingURL=interactions-md.js.map

package/dist/writers/layout-md.d.ts

@@ -1,8 +0,0 @@
-import { LayoutRecord } from '../types-ultra';
-import { DesignProfile } from '../types';
-/**
- * Generate references/LAYOUT.md
- * Documents DOM layout patterns, spacing relationships, and grid system.
- */
-export declare function generateLayoutMd(layouts: LayoutRecord[], profile: DesignProfile): string;
-//# sourceMappingURL=layout-md.d.ts.map

package/dist/writers/layout-md.js

@@ -1,120 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateLayoutMd = generateLayoutMd;
-/**
- * Generate references/LAYOUT.md
- * Documents DOM layout patterns, spacing relationships, and grid system.
- */
-function generateLayoutMd(layouts, profile) {
-    let md = `# Layout Reference\n\n`;
-    md += `> Auto-extracted from live DOM. Use this to understand how the site is structured spatially.\n\n`;
-    if (layouts.length === 0) {
-        md += `No layout data extracted (Playwright required).\n`;
-        return md;
-    }
-    // ── Spacing System ─────────────────────────────────────────────────
-    md += `## Spacing System\n\n`;
-    md += `**Base grid:** ${profile.spacing.base}px\n\n`;
-    if (profile.spacing.values.length > 0) {
-        md += `**Scale:** \`${profile.spacing.values.slice(0, 16).join(', ')}\` px\n\n`;
-    }
-    md += `| Spacing | Semantic Use |\n`;
-    md += `|---------|-------------|\n`;
-    const base = profile.spacing.base;
-    md += `| ${base}px | Tight — within a component |\n`;
-    md += `| ${base * 2}px | Medium — between sibling items |\n`;
-    md += `| ${base * 4}px | Wide — between sections |\n`;
-    md += `| ${base * 8}px | Vast — major section breaks |\n`;
-    md += `\n`;
-    // ── Flex Layouts ────────────────────────────────────────────────────
-    const flexLayouts = layouts.filter(l => l.display === 'flex' || l.display === 'inline-flex');
-    if (flexLayouts.length > 0) {
-        md += `## Flex Layouts\n\n`;
-        md += `| Element | Direction | Justify | Align | Gap | Children |\n`;
-        md += `|---------|-----------|---------|-------|-----|----------|\n`;
-        for (const l of flexLayouts.slice(0, 15)) {
-            const dir = l.flexDirection || 'row';
-            const justify = simplify(l.justifyContent);
-            const align = simplify(l.alignItems);
-            const gap = l.gap && l.gap !== 'normal' ? l.gap : '—';
-            md += `| \`${l.selector}\` | ${dir} | ${justify} | ${align} | ${gap} | ${l.childCount} |\n`;
-        }
-        md += `\n`;
-    }
-    // ── Grid Layouts ────────────────────────────────────────────────────
-    const gridLayouts = layouts.filter(l => l.display === 'grid' || l.display === 'inline-grid');
-    if (gridLayouts.length > 0) {
-        md += `## Grid Layouts\n\n`;
-        md += `| Element | Template Columns | Gap | Children |\n`;
-        md += `|---------|-----------------|-----|----------|\n`;
-        for (const l of gridLayouts.slice(0, 10)) {
-            const cols = l.gridTemplateColumns && l.gridTemplateColumns !== 'none'
-                ? l.gridTemplateColumns.slice(0, 50)
-                : '—';
-            const gap = l.gap && l.gap !== 'normal' ? l.gap : '—';
-            md += `| \`${l.selector}\` | \`${cols}\` | ${gap} | ${l.childCount} |\n`;
-        }
-        md += `\n`;
-    }
-    // ── Key Layout Containers ──────────────────────────────────────────
-    const structural = layouts.filter(l => ['header', 'nav', 'main', 'footer', 'section', 'article'].includes(l.tag));
-    if (structural.length > 0) {
-        md += `## Structural Containers\n\n`;
-        for (const l of structural.slice(0, 12)) {
-            md += `### \`<${l.tag}>\` ${l.selector !== l.tag ? `(\`${l.selector}\`)` : ''}\n\n`;
-            md += `\`\`\`\n`;
-            md += `display:          ${l.display}\n`;
-            if (l.display === 'flex' || l.display === 'inline-flex') {
-                md += `flex-direction:   ${l.flexDirection || 'row'}\n`;
-                md += `justify-content:  ${simplify(l.justifyContent)}\n`;
-                md += `align-items:      ${simplify(l.alignItems)}\n`;
-            }
-            if (l.display === 'grid' || l.display === 'inline-grid') {
-                if (l.gridTemplateColumns && l.gridTemplateColumns !== 'none') {
-                    md += `grid-template-columns: ${l.gridTemplateColumns.slice(0, 60)}\n`;
-                }
-            }
-            if (l.gap && l.gap !== 'normal')
-                md += `gap:              ${l.gap}\n`;
-            if (l.padding && l.padding !== '0px')
-                md += `padding:          ${l.padding}\n`;
-            if (l.maxWidth && l.maxWidth !== 'none')
-                md += `max-width:        ${l.maxWidth}\n`;
-            md += `children:         ${l.childCount}\n`;
-            md += `\`\`\`\n\n`;
-        }
-    }
-    // ── Layout Anti-Patterns ───────────────────────────────────────────
-    md += `## Layout Rules\n\n`;
-    const hasContainer = layouts.some(l => l.maxWidth && l.maxWidth !== 'none' && l.maxWidth !== '');
-    if (hasContainer) {
-        const containerEl = layouts.find(l => l.maxWidth && l.maxWidth !== 'none');
-        md += `- **Container max-width:** \`${containerEl?.maxWidth}\` — always center with \`margin: auto\`\n`;
-    }
-    const hasGrid = gridLayouts.length > 0;
-    const hasFlex = flexLayouts.length > 0;
-    if (hasFlex)
-        md += `- Primary layout system: **Flexbox**\n`;
-    if (hasGrid)
-        md += `- Secondary layout system: **CSS Grid** (used for card grids and multi-column layouts)\n`;
-    md += `- Every spacing value must be a multiple of **${base}px**\n`;
-    md += `- Never use arbitrary margin/padding values outside the spacing scale\n`;
-    md += `\n`;
-    return md;
-}
-function simplify(val) {
-    if (!val)
-        return '—';
-    const map = {
-        'flex-start': 'start',
-        'flex-end': 'end',
-        'space-between': 'space-between',
-        'space-around': 'space-around',
-        'space-evenly': 'space-evenly',
-        'center': 'center',
-        'stretch': 'stretch',
-        'normal': '—',
-    };
-    return map[val] || val;
-}
-//# sourceMappingURL=layout-md.js.map

package/dist/writers/skill.d.ts

@@ -1,12 +0,0 @@
-import { DesignProfile } from '../types';
-import { FullAnimationResult } from '../types-ultra';
-/**
- * Generate SKILL.md + references/DESIGN.md and package as .skill zip file.
- * @param screenshotPath - optional local path to homepage screenshot (relative to skillDir)
- * @param ultraResult - optional full animation/ultra data for embedding scroll journey
- */
-export declare function generateSkill(profile: DesignProfile, designMdContent: string, outputDir: string, screenshotPath?: string | null, ultraResult?: FullAnimationResult | null): Promise<{
-    skillDir: string;
-    skillFile: string;
-}>;
-//# sourceMappingURL=skill.d.ts.map