@youwen/ai-design-system/dist/validation/validation-architecture.d.ts

Enterprise AI-driven design system with comprehensive design tokens

/**
 * 企业级多层次Validation架构
 * 基于Zod + 分层验证 + 视觉回归的综合验证系统
 */
import { z } from 'zod';
export interface ValidationResult {
    isValid: boolean;
    level: 'error' | 'warning' | 'info';
    message: string;
    suggestion?: string;
    code: string;
    context?: Record<string, any>;
}
export interface ValidationSummary {
    isValid: boolean;
    errors: ValidationResult[];
    warnings: ValidationResult[];
    infos: ValidationResult[];
    passedRules: string[];
    failedRules: string[];
    score: number;
}
export interface ValidationRule {
    id: string;
    name: string;
    description: string;
    category: 'design' | 'layout' | 'accessibility' | 'performance' | 'responsive';
    severity: 'error' | 'warning' | 'info';
    validate: (target: any, context?: any) => ValidationResult[];
}
export declare const ColorTokenSchema: z.ZodObject<{
    color: z.ZodString;
    contrast: z.ZodOptional<z.ZodNumber>;
    usage: z.ZodEnum<["background", "foreground", "border", "accent", "functional"]>;
    themes: z.ZodArray<z.ZodEnum<["blue", "green", "purple", "amber"]>, "many">;
}, "strip", z.ZodTypeAny, {
    color: string;
    themes: ("blue" | "green" | "purple" | "amber")[];
    usage: "border" | "background" | "foreground" | "accent" | "functional";
    contrast?: number | undefined;
}, {
    color: string;
    themes: ("blue" | "green" | "purple" | "amber")[];
    usage: "border" | "background" | "foreground" | "accent" | "functional";
    contrast?: number | undefined;
}>;
export declare const TypographyTokenSchema: z.ZodObject<{
    fontFamily: z.ZodString;
    fontSize: z.ZodString;
    lineHeight: z.ZodString;
    fontWeight: z.ZodEnum<["400", "500", "600", "700"]>;
    minSize: z.ZodNumber;
    lineHeightRatio: z.ZodNumber;
}, "strip", z.ZodTypeAny, {
    fontSize: string;
    lineHeight: string;
    fontWeight: "700" | "400" | "500" | "600";
    fontFamily: string;
    minSize: number;
    lineHeightRatio: number;
}, {
    fontSize: string;
    lineHeight: string;
    fontWeight: "700" | "400" | "500" | "600";
    fontFamily: string;
    minSize: number;
    lineHeightRatio: number;
}>;
export declare const SpacingTokenSchema: z.ZodObject<{
    value: z.ZodString;
    category: z.ZodEnum<["padding", "margin", "gap", "offset"]>;
    usage: z.ZodEnum<["widget", "layout", "component", "global"]>;
    alignsToGrid: z.ZodOptional<z.ZodBoolean>;
}, "strip", z.ZodTypeAny, {
    value: string;
    usage: "layout" | "component" | "widget" | "global";
    category: "padding" | "margin" | "gap" | "offset";
    alignsToGrid?: boolean | undefined;
}, {
    value: string;
    usage: "layout" | "component" | "widget" | "global";
    category: "padding" | "margin" | "gap" | "offset";
    alignsToGrid?: boolean | undefined;
}>;
export declare const SizeTokenSchema: z.ZodObject<{
    width: z.ZodString;
    height: z.ZodString;
    aspectRatio: z.ZodOptional<z.ZodNumber>;
    isTouchTarget: z.ZodOptional<z.ZodBoolean>;
    minTouchSize: z.ZodOptional<z.ZodNumber>;
}, "strip", z.ZodTypeAny, {
    width: string;
    height: string;
    aspectRatio?: number | undefined;
    isTouchTarget?: boolean | undefined;
    minTouchSize?: number | undefined;
}, {
    width: string;
    height: string;
    aspectRatio?: number | undefined;
    isTouchTarget?: boolean | undefined;
    minTouchSize?: number | undefined;
}>;
export declare const WidgetComponentSchema: z.ZodObject<{
    type: z.ZodEnum<["ThreeElementLayout", "TwoLinesBigMedium", "TwoLinesMediumSmall", "TwoLinesSmallMini", "OneLineMediumSmall", "OneLineSmallMini", "ModuleList", "ModuleDivider", "ControlButton", "GraphPlaceholder", "GraphDefault", "WidgetCard", "WidgetGeneral", "SingleElement"]>;
    layout: z.ZodEnum<["leftTop", "rightTop", "leftBottom", "rightBottom", "leftTop,rightTop", "leftTop,leftBottom", "leftTop,rightBottom", "rightTop,leftBottom", "rightTop,rightBottom", "leftBottom,rightBottom", "leftTop,rightTop,leftBottom", "leftTop,rightTop,rightBottom", "leftTop,leftBottom,rightBottom", "rightTop,leftBottom,rightBottom", "all"]>;
    content: z.ZodObject<{
        big: z.ZodOptional<z.ZodString>;
        medium: z.ZodOptional<z.ZodString>;
        small: z.ZodOptional<z.ZodString>;
        mini: z.ZodOptional<z.ZodString>;
    }, "strip", z.ZodTypeAny, {
        big?: string | undefined;
        small?: string | undefined;
        mini?: string | undefined;
        medium?: string | undefined;
    }, {
        big?: string | undefined;
        small?: string | undefined;
        mini?: string | undefined;
        medium?: string | undefined;
    }>;
    theme: z.ZodEnum<["blue", "green", "purple", "amber"]>;
    mode: z.ZodEnum<["light", "dark"]>;
    responsive: z.ZodOptional<z.ZodObject<{
        mobile: z.ZodBoolean;
        tablet: z.ZodBoolean;
        desktop: z.ZodBoolean;
    }, "strip", z.ZodTypeAny, {
        mobile: boolean;
        tablet: boolean;
        desktop: boolean;
    }, {
        mobile: boolean;
        tablet: boolean;
        desktop: boolean;
    }>>;
}, "strip", z.ZodTypeAny, {
    type: "ThreeElementLayout" | "WidgetCard" | "WidgetGeneral" | "TwoLinesBigMedium" | "TwoLinesMediumSmall" | "TwoLinesSmallMini" | "OneLineMediumSmall" | "OneLineSmallMini" | "ModuleList" | "ModuleDivider" | "ControlButton" | "GraphPlaceholder" | "GraphDefault" | "SingleElement";
    content: {
        big?: string | undefined;
        small?: string | undefined;
        mini?: string | undefined;
        medium?: string | undefined;
    };
    theme: "blue" | "green" | "purple" | "amber";
    layout: "leftTop" | "rightTop" | "leftBottom" | "rightBottom" | "leftTop,rightTop" | "leftTop,leftBottom" | "leftTop,rightBottom" | "rightTop,leftBottom" | "rightTop,rightBottom" | "leftBottom,rightBottom" | "leftTop,rightTop,leftBottom" | "leftTop,rightTop,rightBottom" | "leftTop,leftBottom,rightBottom" | "rightTop,leftBottom,rightBottom" | "all";
    mode: "dark" | "light";
    responsive?: {
        mobile: boolean;
        tablet: boolean;
        desktop: boolean;
    } | undefined;
}, {
    type: "ThreeElementLayout" | "WidgetCard" | "WidgetGeneral" | "TwoLinesBigMedium" | "TwoLinesMediumSmall" | "TwoLinesSmallMini" | "OneLineMediumSmall" | "OneLineSmallMini" | "ModuleList" | "ModuleDivider" | "ControlButton" | "GraphPlaceholder" | "GraphDefault" | "SingleElement";
    content: {
        big?: string | undefined;
        small?: string | undefined;
        mini?: string | undefined;
        medium?: string | undefined;
    };
    theme: "blue" | "green" | "purple" | "amber";
    layout: "leftTop" | "rightTop" | "leftBottom" | "rightBottom" | "leftTop,rightTop" | "leftTop,leftBottom" | "leftTop,rightBottom" | "rightTop,leftBottom" | "rightTop,rightBottom" | "leftBottom,rightBottom" | "leftTop,rightTop,leftBottom" | "leftTop,rightTop,rightBottom" | "leftTop,leftBottom,rightBottom" | "rightTop,leftBottom,rightBottom" | "all";
    mode: "dark" | "light";
    responsive?: {
        mobile: boolean;
        tablet: boolean;
        desktop: boolean;
    } | undefined;
}>;
export declare const PageCompositionSchema: z.ZodObject<{
    components: z.ZodArray<z.ZodObject<{
        type: z.ZodEnum<["ThreeElementLayout", "TwoLinesBigMedium", "TwoLinesMediumSmall", "TwoLinesSmallMini", "OneLineMediumSmall", "OneLineSmallMini", "ModuleList", "ModuleDivider", "ControlButton", "GraphPlaceholder", "GraphDefault", "WidgetCard", "WidgetGeneral", "SingleElement"]>;
        layout: z.ZodEnum<["leftTop", "rightTop", "leftBottom", "rightBottom", "leftTop,rightTop", "leftTop,leftBottom", "leftTop,rightBottom", "rightTop,leftBottom", "rightTop,rightBottom", "leftBottom,rightBottom", "leftTop,rightTop,leftBottom", "leftTop,rightTop,rightBottom", "leftTop,leftBottom,rightBottom", "rightTop,leftBottom,rightBottom", "all"]>;
        content: z.ZodObject<{
            big: z.ZodOptional<z.ZodString>;
            medium: z.ZodOptional<z.ZodString>;
            small: z.ZodOptional<z.ZodString>;
            mini: z.ZodOptional<z.ZodString>;
        }, "strip", z.ZodTypeAny, {
            big?: string | undefined;
            small?: string | undefined;
            mini?: string | undefined;
            medium?: string | undefined;
        }, {
            big?: string | undefined;
            small?: string | undefined;
            mini?: string | undefined;
            medium?: string | undefined;
        }>;
        theme: z.ZodEnum<["blue", "green", "purple", "amber"]>;
        mode: z.ZodEnum<["light", "dark"]>;
        responsive: z.ZodOptional<z.ZodObject<{
            mobile: z.ZodBoolean;
            tablet: z.ZodBoolean;
            desktop: z.ZodBoolean;
        }, "strip", z.ZodTypeAny, {
            mobile: boolean;
            tablet: boolean;
            desktop: boolean;
        }, {
            mobile: boolean;
            tablet: boolean;
            desktop: boolean;
        }>>;
    }, "strip", z.ZodTypeAny, {
        type: "ThreeElementLayout" | "WidgetCard" | "WidgetGeneral" | "TwoLinesBigMedium" | "TwoLinesMediumSmall" | "TwoLinesSmallMini" | "OneLineMediumSmall" | "OneLineSmallMini" | "ModuleList" | "ModuleDivider" | "ControlButton" | "GraphPlaceholder" | "GraphDefault" | "SingleElement";
        content: {
            big?: string | undefined;
            small?: string | undefined;
            mini?: string | undefined;
            medium?: string | undefined;
        };
        theme: "blue" | "green" | "purple" | "amber";
        layout: "leftTop" | "rightTop" | "leftBottom" | "rightBottom" | "leftTop,rightTop" | "leftTop,leftBottom" | "leftTop,rightBottom" | "rightTop,leftBottom" | "rightTop,rightBottom" | "leftBottom,rightBottom" | "leftTop,rightTop,leftBottom" | "leftTop,rightTop,rightBottom" | "leftTop,leftBottom,rightBottom" | "rightTop,leftBottom,rightBottom" | "all";
        mode: "dark" | "light";
        responsive?: {
            mobile: boolean;
            tablet: boolean;
            desktop: boolean;
        } | undefined;
    }, {
        type: "ThreeElementLayout" | "WidgetCard" | "WidgetGeneral" | "TwoLinesBigMedium" | "TwoLinesMediumSmall" | "TwoLinesSmallMini" | "OneLineMediumSmall" | "OneLineSmallMini" | "ModuleList" | "ModuleDivider" | "ControlButton" | "GraphPlaceholder" | "GraphDefault" | "SingleElement";
        content: {
            big?: string | undefined;
            small?: string | undefined;
            mini?: string | undefined;
            medium?: string | undefined;
        };
        theme: "blue" | "green" | "purple" | "amber";
        layout: "leftTop" | "rightTop" | "leftBottom" | "rightBottom" | "leftTop,rightTop" | "leftTop,leftBottom" | "leftTop,rightBottom" | "rightTop,leftBottom" | "rightTop,rightBottom" | "leftBottom,rightBottom" | "leftTop,rightTop,leftBottom" | "leftTop,rightTop,rightBottom" | "leftTop,leftBottom,rightBottom" | "rightTop,leftBottom,rightBottom" | "all";
        mode: "dark" | "light";
        responsive?: {
            mobile: boolean;
            tablet: boolean;
            desktop: boolean;
        } | undefined;
    }>, "many">;
    layout: z.ZodEnum<["grid", "flex", "masonry"]>;
    breakpoints: z.ZodArray<z.ZodEnum<["mobile", "tablet", "desktop"]>, "many">;
    theme: z.ZodEnum<["blue", "green", "purple", "amber"]>;
    maxComponents: z.ZodNumber;
    hasSkipLink: z.ZodBoolean;
    hasLandmarks: z.ZodBoolean;
}, "strip", z.ZodTypeAny, {
    theme: "blue" | "green" | "purple" | "amber";
    layout: "grid" | "flex" | "masonry";
    components: {
        type: "ThreeElementLayout" | "WidgetCard" | "WidgetGeneral" | "TwoLinesBigMedium" | "TwoLinesMediumSmall" | "TwoLinesSmallMini" | "OneLineMediumSmall" | "OneLineSmallMini" | "ModuleList" | "ModuleDivider" | "ControlButton" | "GraphPlaceholder" | "GraphDefault" | "SingleElement";
        content: {
            big?: string | undefined;
            small?: string | undefined;
            mini?: string | undefined;
            medium?: string | undefined;
        };
        theme: "blue" | "green" | "purple" | "amber";
        layout: "leftTop" | "rightTop" | "leftBottom" | "rightBottom" | "leftTop,rightTop" | "leftTop,leftBottom" | "leftTop,rightBottom" | "rightTop,leftBottom" | "rightTop,rightBottom" | "leftBottom,rightBottom" | "leftTop,rightTop,leftBottom" | "leftTop,rightTop,rightBottom" | "leftTop,leftBottom,rightBottom" | "rightTop,leftBottom,rightBottom" | "all";
        mode: "dark" | "light";
        responsive?: {
            mobile: boolean;
            tablet: boolean;
            desktop: boolean;
        } | undefined;
    }[];
    breakpoints: ("mobile" | "tablet" | "desktop")[];
    maxComponents: number;
    hasSkipLink: boolean;
    hasLandmarks: boolean;
}, {
    theme: "blue" | "green" | "purple" | "amber";
    layout: "grid" | "flex" | "masonry";
    components: {
        type: "ThreeElementLayout" | "WidgetCard" | "WidgetGeneral" | "TwoLinesBigMedium" | "TwoLinesMediumSmall" | "TwoLinesSmallMini" | "OneLineMediumSmall" | "OneLineSmallMini" | "ModuleList" | "ModuleDivider" | "ControlButton" | "GraphPlaceholder" | "GraphDefault" | "SingleElement";
        content: {
            big?: string | undefined;
            small?: string | undefined;
            mini?: string | undefined;
            medium?: string | undefined;
        };
        theme: "blue" | "green" | "purple" | "amber";
        layout: "leftTop" | "rightTop" | "leftBottom" | "rightBottom" | "leftTop,rightTop" | "leftTop,leftBottom" | "leftTop,rightBottom" | "rightTop,leftBottom" | "rightTop,rightBottom" | "leftBottom,rightBottom" | "leftTop,rightTop,leftBottom" | "leftTop,rightTop,rightBottom" | "leftTop,leftBottom,rightBottom" | "rightTop,leftBottom,rightBottom" | "all";
        mode: "dark" | "light";
        responsive?: {
            mobile: boolean;
            tablet: boolean;
            desktop: boolean;
        } | undefined;
    }[];
    breakpoints: ("mobile" | "tablet" | "desktop")[];
    maxComponents: number;
    hasSkipLink: boolean;
    hasLandmarks: boolean;
}>;
export declare class ValidationEngine {
    private rules;
    constructor();
    private initializeRules;
    addRule(rule: ValidationRule): void;
    validateToken(type: 'color' | 'typography' | 'spacing' | 'size', token: any): ValidationSummary;
    validateComponent(component: any): ValidationSummary;
    validatePage(page: any): ValidationSummary;
    validateDesignSystem(tokens: any[], components: any[], pages: any[]): ValidationSummary;
    private getTokenSchema;
    private createSummaryFromZodError;
    private createSummary;
    private runValidationRules;
    private validateColorContrast;
    private validateFontAccessibility;
    private validateWidgetLayout;
    private validateResponsiveSupport;
    private validateBundleSize;
}
export declare const defaultValidationEngine: ValidationEngine;
export declare const validate: {
    token: (type: 'color' | 'typography' | 'spacing' | 'size', token: any) => ValidationSummary;
    component: (component: any) => ValidationSummary;
    page: (page: any) => ValidationSummary;
    designSystem: (tokens: any[], components: any[], pages: any[]) => ValidationSummary;
};