/**
 * @file Responsive Design Optimizer
 * @description Utilities for responsive design optimization including
 * breakpoint management, container queries, and adaptive loading.
 *
 * Features:
 * - Breakpoint management
 * - Container queries polyfill
 * - Responsive image handling
 * - Adaptive component loading
 * - Device capability detection
 * - Network-aware rendering
 */
/**
 * Breakpoint definition
 */
export interface Breakpoint {
    name: string;
    minWidth: number;
    maxWidth?: number;
}
/**
 * Device capability info
 */
export interface DeviceCapabilities {
    touchScreen: boolean;
    highDPI: boolean;
    prefersReducedMotion: boolean;
    prefersColorScheme: 'light' | 'dark' | 'no-preference';
    saveData: boolean;
    effectiveType: '4g' | '3g' | '2g' | 'slow-2g' | 'unknown';
    deviceMemory: number | null;
    hardwareConcurrency: number | null;
}
/**
 * Viewport info
 */
export interface ViewportInfo {
    width: number;
    height: number;
    orientation: 'portrait' | 'landscape';
    devicePixelRatio: number;
}
/**
 * Responsive configuration
 */
export interface ResponsiveConfig {
    /** Custom breakpoints */
    breakpoints?: Breakpoint[];
    /** Enable network-aware features */
    networkAware?: boolean;
    /** Enable device capability detection */
    detectCapabilities?: boolean;
    /** Debounce resize events (ms) */
    resizeDebounce?: number;
}
/**
 * Media query condition
 */
export type MediaQueryCondition = {
    minWidth?: number;
    maxWidth?: number;
    minHeight?: number;
    maxHeight?: number;
    orientation?: 'portrait' | 'landscape';
    prefersColorScheme?: 'light' | 'dark';
    prefersReducedMotion?: 'reduce' | 'no-preference';
    hover?: 'hover' | 'none';
    pointer?: 'fine' | 'coarse' | 'none';
};
/**
 * Responsive callback
 */
export type ResponsiveCallback = (info: {
    breakpoint: string;
    viewport: ViewportInfo;
    capabilities: DeviceCapabilities;
}) => void;
/**
 * Default breakpoints (similar to Tailwind CSS)
 */
export declare const DEFAULT_BREAKPOINTS: Breakpoint[];
/**
 * Manages responsive behavior
 */
export declare class ResponsiveManager {
    private config;
    private readonly breakpoints;
    private currentBreakpoint;
    private listeners;
    private resizeObserver;
    private resizeTimer;
    private mediaQueryLists;
    constructor(config?: ResponsiveConfig);
    /**
     * Get current breakpoint name
     */
    getBreakpoint(): string;
    /**
     * Get viewport info
     */
    getViewport(): ViewportInfo;
    /**
     * Get device capabilities
     */
    getCapabilities(): DeviceCapabilities;
    /**
     * Check if current breakpoint matches
     */
    isBreakpoint(name: string): boolean;
    /**
     * Check if current breakpoint is at least the given size
     */
    isBreakpointAtLeast(name: string): boolean;
    /**
     * Check if current breakpoint is at most the given size
     */
    isBreakpointAtMost(name: string): boolean;
    /**
     * Create a media query from conditions
     */
    createMediaQuery(conditions: MediaQueryCondition): string;
    /**
     * Match a media query
     */
    matchMedia(query: string | MediaQueryCondition): boolean;
    /**
     * Subscribe to media query changes
     */
    onMediaChange(query: string | MediaQueryCondition, callback: (matches: boolean) => void): () => void;
    /**
     * Subscribe to responsive changes
     */
    subscribe(callback: ResponsiveCallback): () => void;
    /**
     * Get responsive value based on breakpoint
     */
    getValue<T>(values: Partial<Record<string, T>>, defaultValue: T): T;
    /**
     * Destroy the manager
     */
    destroy(): void;
    /**
     * Get color scheme preference
     */
    private getColorScheme;
    private init;
    private handleResize;
    private updateBreakpoint;
    private getBreakpointForWidth;
    private notifyListeners;
}
/**
 * Container query condition
 */
export interface ContainerQueryCondition {
    minWidth?: number;
    maxWidth?: number;
    minHeight?: number;
    maxHeight?: number;
}
/**
 * Create container query observer
 */
export declare function createContainerQueryObserver(container: HTMLElement, queries: Array<{
    condition: ContainerQueryCondition;
    className: string;
}>, callback?: (matches: Map<string, boolean>) => void): {
    observe: () => void;
    disconnect: () => void;
};
/**
 * Generate srcset for responsive images
 */
export declare function generateSrcSet(baseUrl: string, widths: number[], format?: string): string;
/**
 * Generate sizes attribute for responsive images
 */
export declare function generateSizes(breakpointSizes: Array<{
    breakpoint: number;
    size: string;
}>, defaultSize: string): string;
/**
 * Get optimal image width for current viewport
 */
export declare function getOptimalImageWidth(containerWidth: number, devicePixelRatio?: number, widths?: number[]): number;
/**
 * Adaptive loading configuration
 */
export interface AdaptiveLoadingConfig {
    /** Load high quality on fast connections */
    highQualityOnFastConnection: boolean;
    /** Use lite mode on slow connections */
    liteModeOnSlowConnection: boolean;
    /** Defer non-critical on slow connections */
    deferOnSlowConnection: boolean;
    /** Reduce animations on low memory devices */
    reduceAnimationsOnLowMemory: boolean;
    /** Memory threshold for low memory (GB) */
    lowMemoryThreshold: number;
}
/**
 * Get adaptive loading recommendations
 */
export declare function getAdaptiveLoadingRecommendations(capabilities: DeviceCapabilities, config?: Partial<AdaptiveLoadingConfig>): {
    useHighQuality: boolean;
    useLiteMode: boolean;
    deferNonCritical: boolean;
    reduceAnimations: boolean;
};
/**
 * Get or create the global responsive manager
 */
export declare function getResponsiveManager(config?: ResponsiveConfig): ResponsiveManager;
/**
 * Reset the manager instance
 */
export declare function resetResponsiveManager(): void;
export declare const responsiveStyles = "\n  /* Container query support */\n  .cq-container {\n    container-type: inline-size;\n  }\n\n  /* Responsive utilities */\n  .hide-on-mobile {\n    display: none;\n  }\n\n  @media (min-width: 768px) {\n    .hide-on-mobile {\n      display: block;\n    }\n  }\n\n  .hide-on-desktop {\n    display: block;\n  }\n\n  @media (min-width: 768px) {\n    .hide-on-desktop {\n      display: none;\n    }\n  }\n\n  /* Touch-friendly spacing */\n  @media (pointer: coarse) {\n    .touch-target {\n      min-height: 44px;\n      min-width: 44px;\n    }\n  }\n\n  /* High DPI adjustments */\n  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n    .border-hairline {\n      border-width: 0.5px;\n    }\n  }\n";