@meui-creative/dev-tools/dist/index.d.ts

Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing

import React$1 from 'react';
import * as lucide_react from 'lucide-react';

interface Device {
    name: string;
    width: number;
    height: number;
    icon: React$1.ReactNode;
    category: 'phone' | 'tablet' | 'laptop' | 'desktop' | 'special';
    pixelRatio?: number;
    hasNotch?: boolean;
    statusBar?: boolean;
    browserUI?: boolean;
    os?: 'ios' | 'android' | 'macos' | 'windows';
}
interface EnhancedLighthouseMetrics {
    performance: number;
    accessibility: number;
    bestPractices: number;
    seo: number;
    pwa: number;
    loadTime: number;
    firstContentfulPaint: number;
    largestContentfulPaint: number;
    firstInputDelay: number;
    cumulativeLayoutShift: number;
    speedIndex: number;
    totalBlockingTime: number;
    timeToInteractive: number;
    maxPotentialFID: number;
    serverResponseTime: number;
    totalSize: number;
    imageOptimization: number;
    textCompression: number;
    unusedCode: number;
    renderBlocking: number;
    requestCount: number;
    cacheHitRatio: number;
    cdnUsage: boolean;
}
interface DetailedAccessibilityIssue {
    type: 'contrast' | 'alt' | 'heading' | 'focus' | 'aria' | 'keyboard' | 'labels';
    severity: 'critical' | 'serious' | 'moderate' | 'minor';
    message: string;
    element?: string;
    count?: number;
    impact: 'high' | 'medium' | 'low';
    helpUrl?: string;
}
interface ComprehensiveSEOMetrics {
    score: number;
    title: {
        exists: boolean;
        length: number;
        optimal: boolean;
    };
    metaDescription: {
        exists: boolean;
        length: number;
        optimal: boolean;
    };
    headings: {
        h1Count: number;
        structure: boolean;
        optimal: boolean;
    };
    imageAlts: {
        total: number;
        missing: number;
        percentage: number;
    };
    canonicalUrl: boolean;
    viewport: boolean;
    https: boolean;
    mobileFriendly: boolean;
    pageSpeed: number;
    wordCount: number;
    readabilityScore: number;
    internalLinks: number;
    externalLinks: number;
    structuredData: boolean;
    openGraph: boolean;
    twitterCards: boolean;
    breadcrumbs: boolean;
    xmlSitemap: boolean;
    robotsTxt: boolean;
    hreflang: boolean;
    coreWebVitals: boolean;
    issues: string[];
    recommendations: string[];
}
interface SecurityMetrics {
    score: number;
    https: boolean;
    hsts: boolean;
    contentSecurityPolicy: boolean;
    xFrameOptions: boolean;
    mixedContent: boolean;
    vulnerabilities: number;
}
interface DevToolsProps {
    url?: string;
    isOpen: boolean;
    onToggle: () => void;
}
interface PerformanceClass {
    class: string;
    color: string;
    label: string;
}
interface VitalStatus {
    color: string;
    status: string;
    icon?: React$1.ComponentType<React$1.SVGProps<SVGSVGElement>>;
}

interface DevToolsAutoProps {
    url?: string;
    hideInProduction?: boolean;
    children?: React$1.ReactNode;
}
/**
 * DevTools komponenta s automatickou detekcí development environment
 * Použití: <DevTools /> - automaticky se skryje v produkci
 */
declare function DevTools$1(props?: DevToolsAutoProps): React$1.JSX.Element | null;
/**
 * DevTools launcher komponenta - vždy viditelná wrapper
 * Použití: <DevToolsLauncher>{children}</DevToolsLauncher>
 */
declare function DevToolsLauncher({ children }: {
    children: React$1.ReactNode;
}): React$1.JSX.Element;
/**
 * Manuální DevTools komponenta - pro pokročilé použití
 * Použití: const {isOpen, toggle} = useDevTools(); <DevToolsManual isOpen={isOpen} onToggle={toggle} />
 */
declare function DevToolsManual(props: DevToolsProps): React$1.JSX.Element | null;
/**
 * Force DevTools - vždy viditelná bez kontrol
 * Použití: <DevToolsForce /> - pro testování
 */
declare function DevToolsForce(props: Omit<DevToolsAutoProps, 'hideInProduction'>): React$1.JSX.Element;

declare function DevTools({ url, isOpen, onToggle, }: DevToolsProps): React$1.JSX.Element | null;

declare function useDevTools(): {
    isOpen: boolean;
    open: () => void;
    close: () => void;
    toggle: () => void;
};

declare function DevToolsTrigger(): React$1.JSX.Element | null;
declare function withDevTools<T extends object>(Component: React$1.ComponentType<T>): (props: T) => React$1.JSX.Element;
interface DevToolsContextType {
    isOpen: boolean;
    toggle: () => void;
    open: () => void;
    close: () => void;
}
declare function DevToolsProvider({ children }: {
    children: React$1.ReactNode;
}): React$1.JSX.Element;
declare function useDevToolsContext(): DevToolsContextType;
declare function DevToolsStandalone({ url }: {
    url?: string;
}): React$1.JSX.Element | null;

declare const devices: Device[];
declare const essentialDevices: Device[];
declare const deviceCategories: {
    phone: {
        title: string;
        icon: React$1.FunctionComponentElement<lucide_react.LucideProps>;
    };
    tablet: {
        title: string;
        icon: React$1.FunctionComponentElement<lucide_react.LucideProps>;
    };
    laptop: {
        title: string;
        icon: React$1.FunctionComponentElement<lucide_react.LucideProps>;
    };
    desktop: {
        title: string;
        icon: React$1.FunctionComponentElement<lucide_react.LucideProps>;
    };
    special: {
        title: string;
        icon: React$1.FunctionComponentElement<lucide_react.LucideProps>;
    };
};

declare const useDevToolsTests: (setPerformanceData: React.Dispatch<React.SetStateAction<Map<string, EnhancedLighthouseMetrics>>>, setAccessibilityData: React.Dispatch<React.SetStateAction<Map<string, DetailedAccessibilityIssue[]>>>, setSeoData: React.Dispatch<React.SetStateAction<Map<string, ComprehensiveSEOMetrics>>>, setSecurityData: React.Dispatch<React.SetStateAction<Map<string, SecurityMetrics>>>, setRunningTests: React.Dispatch<React.SetStateAction<Set<string>>>, setActiveMetricsDevice: React.Dispatch<React.SetStateAction<string | null>>, setActiveTab: React.Dispatch<React.SetStateAction<"performance" | "accessibility" | "seo" | "security">>) => {
    runPerformanceTest: (deviceName: string) => Promise<void>;
    runAccessibilityTest: (deviceName: string) => Promise<void>;
    runSEOTest: (deviceName: string) => Promise<void>;
    runSecurityTest: (deviceName: string) => Promise<void>;
};

declare const getScaleFactor: (device: Device, deviceRotations: Map<string, boolean>) => number;
declare const getPerformanceClass: (score: number) => PerformanceClass;
declare const getVitalStatus: (metric: string, value: number) => VitalStatus;
declare const getCleanUrl: (originalUrl: string) => string;
declare const refreshAllFrames: () => void;

export { type DetailedAccessibilityIssue as AccessibilityIssue, DevTools$1 as DevTools, DevTools as DevToolsCore, DevToolsForce, DevToolsLauncher, DevToolsManual, type DevToolsProps, DevToolsProvider, DevToolsStandalone, DevToolsTrigger, type Device, type EnhancedLighthouseMetrics as LighthouseMetrics, type PerformanceClass, type ComprehensiveSEOMetrics as SEOMetrics, type SecurityMetrics, type VitalStatus, deviceCategories, devices, essentialDevices, getCleanUrl, getPerformanceClass, getScaleFactor, getVitalStatus, refreshAllFrames, useDevTools, useDevToolsContext, useDevToolsTests, withDevTools };