v0-ui-reviewer/dist/style-extractor.d.ts

Next-gen UI/UX reviewer with multi-model AI support (OpenAI, Claude, v0), style extraction, and live preview sandbox

import { Page } from 'puppeteer';
export interface ExtractedStyle {
    x: number;
    y: number;
    element: {
        tagName: string;
        className: string;
        id: string;
    };
    computed: {
        backgroundColor: string;
        color: string;
        borderColor: string;
        borderTopColor: string;
        borderRightColor: string;
        borderBottomColor: string;
        borderLeftColor: string;
        fontFamily: string;
        fontSize: string;
        fontWeight: string;
        lineHeight: string;
        letterSpacing: string;
        textAlign: string;
        padding: string;
        paddingTop: string;
        paddingRight: string;
        paddingBottom: string;
        paddingLeft: string;
        margin: string;
        marginTop: string;
        marginRight: string;
        marginBottom: string;
        marginLeft: string;
        borderRadius: string;
        borderTopLeftRadius: string;
        borderTopRightRadius: string;
        borderBottomRightRadius: string;
        borderBottomLeftRadius: string;
        borderWidth: string;
        borderStyle: string;
        boxShadow: string;
        opacity: string;
        display: string;
        position: string;
        width: string;
        height: string;
    };
}
export interface DesignTokens {
    colors: {
        primary: Set<string>;
        secondary: Set<string>;
        background: Set<string>;
        text: Set<string>;
        border: Set<string>;
    };
    typography: {
        fontFamilies: Set<string>;
        fontSizes: Set<string>;
        fontWeights: Set<string>;
        lineHeights: Set<string>;
    };
    spacing: {
        padding: Set<string>;
        margin: Set<string>;
    };
    borders: {
        radius: Set<string>;
        width: Set<string>;
    };
    effects: {
        shadows: Set<string>;
    };
}
export declare class StyleExtractor {
    private page;
    constructor(page: Page);
    /**
     * Extract computed styles from a specific coordinate
     */
    extractStyleAtPoint(x: number, y: number): Promise<ExtractedStyle | null>;
    /**
     * Extract styles from multiple points
     */
    extractStylesFromPoints(points: Array<{
        x: number;
        y: number;
    }>): Promise<ExtractedStyle[]>;
    /**
     * Extract styles from a grid pattern across the page
     */
    extractStylesFromGrid(gridSize?: number): Promise<ExtractedStyle[]>;
    /**
     * Create design tokens from extracted styles
     */
    createDesignTokens(styles: ExtractedStyle[]): DesignTokens;
    /**
     * Export styles as CSS variables
     */
    exportAsCSSVariables(tokens: DesignTokens): string;
    /**
     * Export styles as Tailwind config
     */
    exportAsTailwindConfig(tokens: DesignTokens): string;
    /**
     * Export styles as JSON
     */
    exportAsJSON(styles: ExtractedStyle[], tokens: DesignTokens): string;
}