@sc4rfurryx/proteusjs/dist/proteus.d.ts

The Modern Web Development Framework for Accessible, Responsive, and High-Performance Applications. Intelligent container queries, fluid typography, WCAG compliance, and performance optimization.

interface ThemeState {
    currentScheme: string;
    systemPreference: 'light' | 'dark';
    userPreference: string | null;
    contrastLevel: 'normal' | 'high' | 'low';
    reducedMotion: boolean;
    highContrast: boolean;
}

interface LazyMetrics {
    totalComponents: number;
    activatedComponents: number;
    pendingComponents: number;
    cacheHits: number;
    cacheMisses: number;
    averageActivationTime: number;
    idleCallbacksUsed: number;
}

interface OptimizationMetrics {
    originalSize: number;
    optimizedSize: number;
    compressionRatio: number;
    rulesRemoved: number;
    duplicatesFound: number;
    customPropertiesOptimized: number;
    criticalRulesExtracted: number;
}

/**
 * PerformanceMonitor - Comprehensive performance monitoring and optimization
 * Tracks frame rates, memory usage, and provides optimization recommendations
 */
interface PerformanceMetrics$1 {
    frameRate: number;
    averageFPS: number;
    averageFrameTime: number;
    memoryUsage: {
        used: number;
        total: number;
        percentage: number;
    };
    domNodes: number;
    eventListeners: number;
    observers: number;
    cacheHitRate: number;
    operationsPerSecond: number;
    lastMeasurement: number;
}
interface PerformanceThresholds {
    minFrameRate: number;
    maxFrameTime: number;
    maxMemoryUsage: number;
    maxDOMNodes: number;
    maxEventListeners: number;
}
interface PerformanceAlert {
    type: 'warning' | 'critical';
    metric: string;
    value: number;
    threshold: number;
    message: string;
    timestamp: number;
    suggestions: string[];
}
interface PerformanceSnapshot {
    timestamp: number;
    metrics: PerformanceMetrics$1;
    bottlenecks: string[];
    memoryLeaks: boolean;
}
interface BottleneckInfo {
    type: 'dom' | 'memory' | 'cpu' | 'network';
    severity: 'low' | 'medium' | 'high';
    description: string;
    impact: number;
    suggestions: string[];
}
declare class PerformanceMonitor {
    private metrics;
    private thresholds;
    private alerts;
    private isMonitoring;
    private rafId;
    private lastFrameTime;
    private frameCount;
    private bottleneckDetector;
    private memoryOptimizer;
    private performanceHistory;
    private callbacks;
    private measurementInterval;
    private detailedProfiling;
    private frameTimes;
    private operationCount;
    private lastOperationTime;
    constructor(thresholds?: Partial<PerformanceThresholds>);
    /**
     * Start performance monitoring (alias for start)
     */
    startMonitoring(): void;
    /**
     * Start performance monitoring
     */
    start(): void;
    /**
     * Stop performance monitoring
     */
    stop(): void;
    /**
     * Destroy the performance monitor and clean up all resources
     */
    destroy(): void;
    /**
     * Start frame rate monitoring
     */
    startFrameRateMonitoring(): void;
    /**
     * Stop frame rate monitoring
     */
    stopFrameRateMonitoring(): void;
    /**
     * Measure operation performance
     */
    measureOperation<T>(name: string, operation: () => Promise<T> | T): Promise<{
        result: T;
        duration: number;
        name: string;
    }>;
    /**
     * Detect performance bottlenecks
     */
    detectBottlenecks(): Array<{
        type: string;
        severity: 'low' | 'medium' | 'high';
        description: string;
    }>;
    /**
     * Get current performance metrics
     */
    getMetrics(): PerformanceMetrics$1;
    /**
     * Get performance alerts
     */
    getAlerts(): PerformanceAlert[];
    /**
     * Clear performance alerts
     */
    clearAlerts(): void;
    /**
     * Add performance monitoring callback
     */
    addCallback(id: string, callback: (metrics: PerformanceMetrics$1) => void): void;
    /**
     * Remove performance monitoring callback
     */
    removeCallback(id: string): void;
    /**
     * Record an operation for performance tracking
     */
    recordOperation(): void;
    /**
     * Update cache hit rate
     */
    updateCacheHitRate(hits: number, total: number): void;
    /**
     * Force immediate metrics update
     */
    updateMetrics(): void;
    /**
     * Get performance recommendations
     */
    getRecommendations(): string[];
    /**
     * Start frame rate monitoring
     */
    private startFrameMonitoring;
    /**
     * Start memory monitoring
     */
    private startMemoryMonitoring;
    /**
     * Update frame-related metrics
     */
    private updateFrameMetrics;
    /**
     * Update memory-related metrics
     */
    private updateMemoryMetrics;
    /**
     * Update DOM-related metrics
     */
    private updateDOMMetrics;
    /**
     * Update operation metrics
     */
    private updateOperationMetrics;
    /**
     * Estimate number of event listeners
     */
    private estimateEventListeners;
    /**
     * Count active observers
     */
    private countObservers;
    /**
     * Check performance thresholds and generate alerts
     */
    private checkThresholds;
    /**
     * Add performance alert
     */
    private addAlert;
    /**
     * Notify callbacks of metrics update
     */
    private notifyCallbacks;
    /**
     * Create initial metrics object
     */
    private createInitialMetrics;
    /**
     * Advanced performance monitoring methods
     */
    /**
     * Enable detailed profiling with comprehensive metrics
     */
    enableDetailedProfiling(enable?: boolean): void;
    /**
     * Start advanced monitoring with bottleneck detection
     */
    private startAdvancedMonitoring;
    /**
     * Stop advanced monitoring
     */
    private stopAdvancedMonitoring;
    /**
     * Get comprehensive performance snapshot
     */
    getPerformanceSnapshot(): PerformanceSnapshot;
    /**
     * Get performance history for analysis
     */
    getPerformanceHistory(): PerformanceSnapshot[];
    /**
     * Analyze performance trends
     */
    analyzePerformanceTrends(): {
        frameRateTrend: 'improving' | 'degrading' | 'stable';
        memoryTrend: 'improving' | 'degrading' | 'stable';
        overallHealth: 'good' | 'warning' | 'critical';
    };
    /**
     * Calculate trend slope for a series of values
     */
    private calculateTrend;
    /**
     * Optimize performance based on current metrics
     */
    optimizePerformance(): void;
    /**
     * Optimize DOM performance
     */
    private optimizeDOM;
    /**
     * Generate performance report
     */
    generatePerformanceReport(): {
        summary: string;
        metrics: PerformanceMetrics$1;
        bottlenecks: BottleneckInfo[];
        trends: {
            frameRateTrend: 'improving' | 'degrading' | 'stable';
            memoryTrend: 'improving' | 'degrading' | 'stable';
            overallHealth: 'good' | 'warning' | 'critical';
        };
        recommendations: string[];
    };
}

interface BatchMetrics {
    totalOperations: number;
    readOperations: number;
    writeOperations: number;
    batchesProcessed: number;
    averageBatchTime: number;
    layoutThrashes: number;
    preventedThrashes: number;
}

interface PerformanceMetrics {
    frameTime: number;
    fps: number;
    operationsPerFrame: number;
    queueSize: number;
    droppedFrames: number;
    averageLatency: number;
}

/**
 * Browser support detection utilities
 */
interface SupportInfo {
    resizeObserver: boolean;
    intersectionObserver: boolean;
    containerQueries: boolean;
    cssClamp: boolean;
    cssCustomProperties: boolean;
    webWorkers: boolean;
    requestAnimationFrame: boolean;
    passiveEventListeners: boolean;
}
/**
 * Check if the current environment supports ProteusJS features
 */
declare function isSupported$1(): boolean;

/**
 * Core type definitions for ProteusJS
 */
interface ProteusConfig {
    debug?: boolean;
    performance?: 'low' | 'medium' | 'high';
    accessibility?: boolean;
    autoInit?: boolean;
    containers?: ContainerConfig;
    typography?: TypographyConfig;
    layout?: LayoutConfig;
    animations?: AnimationConfig;
    theming?: ThemingConfig;
}
interface ContainerConfig {
    autoDetect?: boolean;
    breakpoints?: Record<string, string>;
    units?: boolean;
    isolation?: boolean;
    polyfill?: boolean;
}
interface BreakpointConfig$1 {
    [key: string]: string | number;
}
interface TypographyConfig {
    fluidScaling?: boolean;
    autoOptimize?: boolean;
    accessibility?: boolean;
    scale?: {
        ratio?: number;
        base?: string;
        levels?: number;
    };
    lineHeight?: {
        auto?: boolean;
        density?: 'compact' | 'comfortable' | 'spacious';
    };
}
interface LayoutConfig {
    grid?: {
        auto?: boolean;
        masonry?: boolean;
        gap?: 'fluid' | string;
    };
    flexbox?: {
        enhanced?: boolean;
        autoWrap?: boolean;
    };
    spacing?: {
        scale?: 'minor-third' | 'major-third' | 'perfect-fourth' | 'golden-ratio';
        density?: 'compact' | 'comfortable' | 'spacious';
    };
}
interface AnimationConfig {
    enabled?: boolean;
    respectMotionPreferences?: boolean;
    duration?: number;
    easing?: string;
    flip?: boolean;
    microInteractions?: boolean;
}
interface ThemingConfig {
    darkMode?: {
        auto?: boolean;
        schedule?: string;
        transition?: 'instant' | 'smooth';
    };
    contrast?: {
        adaptive?: boolean;
        level?: 'AA' | 'AAA';
    };
}
interface AccessibilityConfig$1 {
    screenReader?: boolean;
    keyboardNavigation?: boolean;
    colorCompliance?: 'AA' | 'AAA';
    motionPreferences?: boolean;
    announcements?: boolean;
}
interface PerformanceConfig {
    targetFrameRate?: number;
    memoryManagement?: boolean;
    lazyEvaluation?: boolean;
    caching?: boolean;
    monitoring?: boolean;
}
interface ProteusEvent {
    type: string;
    target: Element;
    detail?: any;
    timestamp: number;
}
type ResizeCallback = (entry: ResizeObserverEntry) => void;
type IntersectionCallback = (entry: IntersectionObserverEntry) => void;

/**
 * Observer Manager for ProteusJS
 * Manages ResizeObserver and IntersectionObserver instances efficiently
 */

declare class ObserverManager {
    private resizeObservers;
    private intersectionObservers;
    private resizeEntries;
    private intersectionEntries;
    private isPolyfillMode;
    constructor();
    /**
     * Observe element for resize changes
     */
    observeResize(element: Element, callback: ResizeCallback, options?: ResizeObserverOptions): () => void;
    /**
     * Observe element for intersection changes
     */
    observeIntersection(element: Element, callback: IntersectionCallback, options?: IntersectionObserverInit): () => void;
    /**
     * Stop observing element for resize changes
     */
    unobserveResize(element: Element): void;
    /**
     * Stop observing element for intersection changes
     */
    unobserveIntersection(element: Element): void;
    /**
     * Get total number of observed elements
     */
    getObservedElementCount(): number;
    /**
     * Get number of active observers
     */
    getObserverCount(): number;
    /**
     * Check if element is being observed for resize
     */
    isObservingResize(element: Element): boolean;
    /**
     * Check if element is being observed for intersection
     */
    isObservingIntersection(element: Element): boolean;
    /**
     * Disconnect all observers and clean up
     */
    destroy(): void;
    /**
     * Get debug information
     */
    getDebugInfo(): object;
    /**
     * Check if polyfills are needed and set up accordingly
     */
    private checkPolyfillNeeds;
    /**
     * Set up ResizeObserver polyfill
     */
    private setupResizeObserverPolyfill;
    /**
     * Set up IntersectionObserver polyfill
     */
    private setupIntersectionObserverPolyfill;
    /**
     * Create a new ResizeObserver instance
     */
    private createResizeObserver;
    /**
     * Create a new IntersectionObserver instance
     */
    private createIntersectionObserver;
    /**
     * Generate key for ResizeObserver based on options
     */
    private getResizeObserverKey;
    /**
     * Generate key for IntersectionObserver based on options
     */
    private getIntersectionObserverKey;
    /**
     * Clean up ResizeObserver if no longer needed
     */
    private cleanupResizeObserver;
    /**
     * Clean up IntersectionObserver if no longer needed
     */
    private cleanupIntersectionObserver;
}

/**
 * Memory Manager for ProteusJS
 * Prevents memory leaks and manages resource cleanup
 */
interface ManagedResource {
    id: string;
    type: 'observer' | 'listener' | 'timer' | 'animation' | 'cache';
    cleanup: () => void;
    element?: Element;
    timestamp: number;
}
declare class MemoryManager {
    private resources;
    private elementResources;
    private mutationObserver;
    private cleanupInterval;
    private isMonitoring;
    constructor();
    /**
     * Register a resource for automatic cleanup
     */
    register(resource: Omit<ManagedResource, 'timestamp'>): string;
    /**
     * Unregister and cleanup a resource
     */
    unregister(resourceId: string): boolean;
    /**
     * Cleanup all resources associated with an element
     */
    cleanupElement(element: Element): number;
    /**
     * Cleanup resources by type
     */
    cleanupByType(type: ManagedResource['type']): number;
    /**
     * Cleanup old resources based on age
     */
    cleanupOldResources(maxAge?: number): number;
    /**
     * Force garbage collection if available
     */
    forceGarbageCollection(): void;
    /**
     * Get memory usage information
     */
    getMemoryInfo(): object;
    /**
     * Check for potential memory leaks
     */
    detectLeaks(): string[];
    /**
     * Cleanup all resources and stop monitoring
     */
    destroy(): void;
    /**
     * Start monitoring for memory leaks
     */
    startMonitoring(): void;
    /**
     * Stop monitoring
     */
    stopMonitoring(): void;
    /**
     * Setup DOM mutation observer to detect removed elements
     */
    private setupDOMObserver;
    /**
     * Handle element removal from DOM
     */
    private handleElementRemoval;
    /**
     * Start periodic cleanup
     */
    private startPeriodicCleanup;
}

/**
 * SmartContainer - Intelligent container management for ProteusJS
 * Automatically detects and manages container-aware responsive behavior
 */

interface ContainerState {
    width: number;
    height: number;
    aspectRatio: number;
    containerType: 'inline-size' | 'size' | 'block-size';
    activeBreakpoints: string[];
    lastUpdate: number;
}
interface ContainerOptions$1 {
    breakpoints?: BreakpointConfig$1;
    containerType?: 'inline-size' | 'size' | 'block-size' | 'auto';
    debounceMs?: number;
    callbacks?: {
        resize?: (state: ContainerState) => void;
        breakpointChange?: (breakpoint: string, active: boolean) => void;
    };
    cssClasses?: boolean;
    units?: boolean;
    announceChanges?: boolean;
}
declare class SmartContainer {
    private element;
    private options;
    private state;
    private observerManager;
    private memoryManager;
    private unobserveResize;
    private debouncedUpdate;
    private isActive;
    private liveRegion;
    constructor(element: Element, options: ContainerOptions$1 | undefined, observerManager: ObserverManager, memoryManager: MemoryManager);
    /**
     * Start observing the container
     */
    activate(): void;
    /**
     * Stop observing the container
     */
    deactivate(): void;
    /**
     * Get current container state
     */
    getState(): ContainerState;
    /**
     * Get container element
     */
    getElement(): Element;
    /**
     * Update breakpoints configuration
     */
    updateBreakpoints(breakpoints: BreakpointConfig$1): void;
    /**
     * Check if a breakpoint is currently active
     */
    isBreakpointActive(breakpoint: string): boolean;
    /**
     * Get container dimensions in various units
     */
    getDimensions(): {
        px: {
            width: number;
            height: number;
        };
        cw: {
            width: number;
            height: number;
        };
        ch: {
            width: number;
            height: number;
        };
        cmin: number;
        cmax: number;
    };
    /**
     * Handle resize events
     */
    private handleResize;
    /**
     * Update container state
     */
    private updateState;
    /**
     * Create initial container state
     */
    private createInitialState;
    /**
     * Auto-detect optimal container type
     */
    private detectContainerType;
    /**
     * Set up native container query support if available
     */
    private setupContainerQuery;
    /**
     * Calculate active breakpoints based on current dimensions
     */
    private calculateActiveBreakpoints;
    /**
     * Get relevant dimension based on container type
     */
    private getRelevantDimension;
    /**
     * Parse breakpoint value to pixels
     */
    private parseBreakpointValue;
    /**
     * Update CSS classes for breakpoints
     */
    private updateCSSClasses;
    /**
     * Remove all CSS classes
     */
    private removeCSSClasses;
    /**
     * Update container units as CSS custom properties
     */
    private updateContainerUnits;
    /**
     * Notify breakpoint changes
     */
    private notifyBreakpointChanges;
    /**
     * Generate unique container name
     */
    private generateContainerName;
    /**
     * Get CSS class prefix
     */
    private getClassPrefix;
    /**
     * Get unique element identifier
     */
    private getElementId;
    /**
     * Setup announcement functionality for breakpoint changes
     */
    private setupAnnouncements;
    /**
     * Announce a message to screen readers
     */
    private announce;
    /**
     * Announce breakpoint changes to screen readers
     */
    private announceBreakpointChanges;
}

/**
 * Clamp-Based Scaling System for ProteusJS
 * Implements intelligent font scaling using CSS clamp() with JavaScript fallbacks
 */
interface ScalingConfig {
    minSize: number;
    maxSize: number;
    minContainer: number;
    maxContainer: number;
    unit: 'px' | 'rem' | 'em';
    containerUnit: 'px' | 'cw' | 'ch' | 'cmin' | 'cmax';
    curve: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'custom';
    customCurve?: (progress: number) => number;
}

/**
 * Typographic Scale Generator for ProteusJS
 * Creates harmonious type scales with mathematical ratios and baseline grid alignment
 */
interface ScaleConfig {
    ratio: number | string;
    baseSize: number;
    baseUnit?: 'px' | 'rem' | 'em';
    levels?: number;
    steps?: number;
    direction?: 'up' | 'down' | 'both';
    roundToGrid?: boolean;
    gridSize?: number;
    reverse?: boolean;
}
interface ScaleLevel {
    level: number;
    size: number;
    ratio: number;
    cssValue: string;
    name?: string;
}
interface TypeScale {
    config: ScaleConfig;
    levels: ScaleLevel[];
    cssCustomProperties: Record<string, string>;
    cssClasses: Record<string, string>;
}

/**
 * Adaptive Grid System for ProteusJS
 * Container-aware CSS Grid with auto-column calculation and masonry support
 */
interface GridConfig {
    minColumnWidth: number;
    maxColumns: number;
    gap: number | 'fluid';
    aspectRatio?: number;
    masonry: boolean;
    autoFlow: 'row' | 'column' | 'row dense' | 'column dense';
    alignment: {
        justify: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
        align: 'start' | 'end' | 'center' | 'stretch';
    };
    responsive: boolean;
    breakpoints?: Record<string, Partial<GridConfig>>;
}
interface GridState {
    columns: number;
    rows: number;
    gap: number;
    itemWidth: number;
    itemHeight: number;
    containerWidth: number;
    containerHeight: number;
}
declare class AdaptiveGrid {
    private element;
    private config;
    private state;
    private resizeObserver;
    private mutationObserver;
    constructor(element: Element, config?: Partial<GridConfig>);
    /**
     * Initialize and activate the grid
     */
    activate(): void;
    /**
     * Deactivate and clean up the grid
     */
    deactivate(): void;
    /**
     * Update grid configuration
     */
    updateConfig(newConfig: Partial<GridConfig>): void;
    /**
     * Get current grid state
     */
    getState(): GridState;
    /**
     * Force grid recalculation
     */
    recalculate(): void;
    /**
     * Add items to the grid
     */
    addItems(items: Element[]): void;
    /**
     * Remove items from the grid
     */
    removeItems(items: Element[]): void;
    /**
     * Get optimal column count for container width
     */
    calculateOptimalColumns(containerWidth: number): number;
    /**
     * Setup initial grid styles
     */
    private setupGrid;
    /**
     * Setup regular CSS Grid
     */
    private setupRegularGrid;
    /**
     * Setup masonry grid using CSS Grid Level 3 or fallback
     */
    private setupMasonryGrid;
    /**
     * Update grid layout
     */
    private updateGrid;
    /**
     * Apply calculated grid styles
     */
    private applyGridStyles;
    /**
     * Prepare individual grid item
     */
    private prepareGridItem;
    /**
     * Implement JavaScript masonry layout
     */
    private implementJavaScriptMasonry;
    /**
     * Update masonry layout
     */
    private updateMasonryLayout;
    /**
     * Setup observers for responsive behavior
     */
    private setupObservers;
    /**
     * Clean up observers
     */
    private cleanupObservers;
    /**
     * Remove grid styles
     */
    private removeGridStyles;
    /**
     * Get active configuration based on container width
     */
    private getActiveConfig;
    /**
     * Get gap value in pixels
     */
    private getGapValue;
    /**
     * Get number of grid items
     */
    private getItemCount;
    /**
     * Check if native masonry is supported
     */
    private supportsMasonry;
    /**
     * Create initial state
     */
    private createInitialState;
}

/**
 * Event System for ProteusJS
 * Handles all internal and external events
 */

type EventCallback = (event: ProteusEvent) => void;
declare class EventSystem {
    private listeners;
    private initialized;
    /**
     * Initialize the event system
     */
    init(): void;
    /**
     * Add event listener
     */
    on(eventType: string, callback: EventCallback): () => void;
    /**
     * Add one-time event listener
     */
    once(eventType: string, callback: EventCallback): () => void;
    /**
     * Remove event listener
     */
    off(eventType: string, callback?: EventCallback): void;
    /**
     * Emit event
     */
    emit(eventType: string, detail?: any, target?: Element): void;
    /**
     * Get all event types with listeners
     */
    getEventTypes(): string[];
    /**
     * Get listener count for event type
     */
    getListenerCount(eventType: string): number;
    /**
     * Check if event type has listeners
     */
    hasListeners(eventType: string): boolean;
    /**
     * Clear all listeners
     */
    clear(): void;
    /**
     * Destroy the event system
     */
    destroy(): void;
    /**
     * Get debug information
     */
    getDebugInfo(): object;
}

/**
 * Plugin System for ProteusJS
 * Enables extensibility and modular architecture
 */
interface ProteusPlugin {
    name: string;
    version: string;
    dependencies?: string[];
    install: (proteus: any) => void;
    uninstall?: (proteus: any) => void;
    config?: Record<string, any>;
}
declare class PluginSystem {
    private plugins;
    private installedPlugins;
    private proteus;
    private initialized;
    constructor(proteus: any);
    /**
     * Initialize the plugin system
     */
    init(): void;
    /**
     * Register a plugin
     */
    register(plugin: ProteusPlugin): this;
    /**
     * Install a plugin
     */
    install(pluginName: string): this;
    /**
     * Uninstall a plugin
     */
    uninstall(pluginName: string): this;
    /**
     * Check if a plugin is installed
     */
    isInstalled(pluginName: string): boolean;
    /**
     * Get list of registered plugins
     */
    getRegisteredPlugins(): string[];
    /**
     * Get list of installed plugins
     */
    getInstalledPlugins(): string[];
    /**
     * Get plugin information
     */
    getPluginInfo(pluginName: string): ProteusPlugin | undefined;
    /**
     * Install multiple plugins in dependency order
     */
    installMany(pluginNames: string[]): this;
    /**
     * Destroy the plugin system
     */
    destroy(): void;
    /**
     * Validate plugin structure
     */
    private validatePlugin;
    /**
     * Get plugins that depend on the given plugin
     */
    private getDependents;
    /**
     * Sort plugins by dependency order
     */
    private sortByDependencies;
}

/**
 * Container Manager for ProteusJS
 * Manages multiple SmartContainer instances and provides the main API
 */

declare class ContainerManager {
    private containers;
    private observerManager;
    private memoryManager;
    private eventSystem;
    private config;
    private autoDetectionEnabled;
    constructor(config: ContainerConfig, observerManager: ObserverManager, memoryManager: MemoryManager, eventSystem: EventSystem);
    /**
     * Create and manage a container
     */
    container(selector: string | Element | Element[], options?: ContainerOptions$1): SmartContainer | SmartContainer[];
    /**
     * Remove container management from element(s)
     */
    removeContainer(selector: string | Element | Element[]): boolean;
    /**
     * Get container instance for element
     */
    getContainer(element: Element): SmartContainer | undefined;
    /**
     * Get all managed containers
     */
    getAllContainers(): SmartContainer[];
    /**
     * Get containers by breakpoint
     */
    getContainersByBreakpoint(breakpoint: string): SmartContainer[];
    /**
     * Update global breakpoints
     */
    updateGlobalBreakpoints(breakpoints: BreakpointConfig$1): void;
    /**
     * Enable automatic container detection
     */
    enableAutoDetection(): void;
    /**
     * Disable automatic container detection
     */
    disableAutoDetection(): void;
    /**
     * Manually scan for containers
     */
    scanForContainers(): void;
    /**
     * Get container statistics
     */
    getStats(): object;
    /**
     * Destroy all containers and clean up
     */
    destroy(): void;
    /**
     * Normalize selector to array of elements
     */
    private normalizeSelector;
    /**
     * Find potential container elements
     */
    private findContainerCandidates;
    /**
     * Extract container options from element attributes
     */
    private extractOptionsFromElement;
    /**
     * Set up mutation observer for auto-detection
     */
    private setupMutationObserver;
}

/**
 * Enhanced Flexbox System for ProteusJS
 * Container query integration with intelligent flex calculations
 */
interface FlexboxConfig {
    direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    wrap: 'nowrap' | 'wrap' | 'wrap-reverse' | 'auto';
    justify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
    align: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    gap: number | 'fluid';
    responsive: boolean;
    autoWrap: boolean;
    minItemWidth?: number;
    maxItemWidth?: number;
    itemGrowRatio?: number;
    itemShrinkRatio?: number;
    breakpoints?: Record<string, Partial<FlexboxConfig>>;
}
interface FlexItemConfig {
    grow: number;
    shrink: number;
    basis: string | number;
    order?: number;
    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    responsive?: boolean;
}
interface FlexboxState {
    containerWidth: number;
    containerHeight: number;
    itemCount: number;
    wrappedLines: number;
    optimalItemWidth: number;
    actualGap: number;
    overflow: boolean;
}
declare class FlexboxEnhancer {
    private element;
    private config;
    private state;
    private resizeObserver;
    private mutationObserver;
    constructor(element: Element, config?: Partial<FlexboxConfig>);
    /**
     * Activate the enhanced flexbox
     */
    activate(): void;
    /**
     * Deactivate and clean up
     */
    deactivate(): void;
    /**
     * Update flexbox configuration
     */
    updateConfig(newConfig: Partial<FlexboxConfig>): void;
    /**
     * Get current flexbox state
     */
    getState(): FlexboxState;
    /**
     * Configure individual flex item
     */
    configureItem(item: Element, config: FlexItemConfig): void;
    /**
     * Auto-configure all flex items
     */
    autoConfigureItems(): void;
    /**
     * Detect if wrapping is needed
     */
    shouldWrap(): boolean;
    /**
     * Calculate optimal space distribution
     */
    calculateSpaceDistribution(): {
        itemWidth: number;
        gap: number;
        remainingSpace: number;
    };
    /**
     * Calculate items per line for wrapped layout
     */
    calculateItemsPerLine(): number;
    /**
     * Setup initial flexbox styles
     */
    private setupFlexbox;
    /**
     * Update flexbox layout
     */
    private updateFlexbox;
    /**
     * Apply flexbox styles
     */
    private applyFlexboxStyles;
    /**
     * Calculate optimal item configuration
     */
    private calculateOptimalItemConfig;
    /**
     * Calculate number of wrapped lines
     */
    private calculateWrappedLines;
    /**
     * Check if content overflows
     */
    private checkOverflow;
    /**
     * Get active configuration based on container width
     */
    private getActiveConfig;
    /**
     * Get gap value in pixels
     */
    private getGapValue;
    /**
     * Setup observers for responsive behavior
     */
    private setupObservers;
    /**
     * Clean up observers
     */
    private cleanupObservers;
    /**
     * Remove flexbox styles
     */
    private removeFlexboxStyles;
    /**
     * Create initial state
     */
    private createInitialState;
}

/**
 * Flow Layout Engine for ProteusJS
 * Natural content flow with reading pattern optimization
 */
interface FlowConfig {
    pattern: 'z-pattern' | 'f-pattern' | 'gutenberg' | 'natural' | 'custom' | 'auto';
    direction: 'ltr' | 'rtl' | 'auto';
    language: string;
    accessibility: boolean;
    focusManagement: boolean;
    skipLinks: boolean;
    landmarks: boolean;
    readingOrder: 'visual' | 'logical' | 'auto';
    customFlow?: FlowStep[];
}
interface FlowStep {
    selector: string;
    priority: number;
    region: 'header' | 'main' | 'content' | 'footer' | 'navigation' | 'sidebar';
    tabIndex?: number;
    ariaLabel?: string;
    landmark?: string;
}
interface FlowState {
    currentPattern: string;
    direction: 'ltr' | 'rtl';
    focusableElements: Element[];
    tabOrder: Element[];
    landmarks: Map<string, Element>;
    skipTargets: Element[];
}
declare class FlowLayout {
    private element;
    private config;
    private state;
    private mutationObserver;
    private static readonly READING_PATTERNS;
    private static readonly RTL_LANGUAGES;
    constructor(element: Element, config?: Partial<FlowConfig>);
    /**
     * Activate the flow layout
     */
    activate(): void;
    /**
     * Deactivate and clean up
     */
    deactivate(): void;
    /**
     * Update flow configuration
     */
    updateConfig(newConfig: Partial<FlowConfig>): void;
    /**
     * Get current flow state
     */
    getState(): FlowState;
    /**
     * Manually set tab order
     */
    setTabOrder(elements: Element[]): void;
    /**
     * Add skip link
     */
    addSkipLink(target: Element, label: string): void;
    /**
     * Analyze content structure
     */
    private analyzeContent;
    /**
     * Apply flow pattern
     */
    private applyFlowPattern;
    /**
     * Setup accessibility features
     */
    private setupAccessibility;
    /**
     * Detect reading direction
     */
    private detectReadingDirection;
    /**
     * Find all focusable elements
     */
    private findFocusableElements;
    /**
     * Identify semantic landmarks
     */
    private identifyLandmarks;
    /**
     * Determine optimal reading pattern
     */
    private determineOptimalPattern;
    /**
     * Sort elements by pattern priority
     */
    private sortElementsByPattern;
    /**
     * Apply visual flow styles
     */
    private applyVisualFlow;
    /**
     * Set logical tab order
     */
    private setLogicalTabOrder;
    /**
     * Add landmark roles and labels
     */
    private addLandmarks;
    /**
     * Add default skip links
     */
    private addDefaultSkipLinks;
    /**
     * Set reading order for screen readers
     */
    private setReadingOrder;
    /**
     * Generate landmark label
     */
    private generateLandmarkLabel;
    /**
     * Add CSS for flow layout
     */
    private addFlowCSS;
    /**
     * Ensure element has an ID
     */
    private ensureId;
    /**
     * Setup observers
     */
    private setupObservers;
    /**
     * Clean up observers
     */
    private cleanupObservers;
    /**
     * Remove flow styles
     */
    private removeFlowStyles;
    /**
     * Remove accessibility features
     */
    private removeAccessibilityFeatures;
    /**
     * Create initial state
     */
    private createInitialState;
}

/**
 * Responsive Spacing System for ProteusJS
 * Fluid spacing with proportional scaling and accessibility compliance
 */
interface SpacingConfig {
    baseSize: number;
    scale: 'minor-second' | 'major-second' | 'minor-third' | 'major-third' | 'perfect-fourth' | 'golden-ratio' | number;
    density: 'compact' | 'comfortable' | 'spacious';
    containerAware: boolean;
    accessibility: boolean;
    touchTargets: boolean;
    minTouchSize: number;
    maxSpacing: number;
    responsive: boolean;
    breakpoints?: Record<string, Partial<SpacingConfig>>;
}
interface SpacingScale {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    xxl: number;
}
interface SpacingState {
    currentScale: SpacingScale;
    containerSize: number;
    scaleFactor: number;
    touchCompliant: boolean;
    appliedSpacing: Map<Element, string>;
}
declare class SpacingSystem {
    private element;
    private config;
    private state;
    private resizeObserver;
    private static readonly SCALE_RATIOS;
    private static readonly DENSITY_MULTIPLIERS;
    private static readonly WCAG_MIN_TOUCH_SIZE;
    constructor(element: Element, config?: Partial<SpacingConfig>);
    /**
     * Activate the spacing system
     */
    activate(): void;
    /**
     * Deactivate and clean up
     */
    deactivate(): void;
    /**
     * Update spacing configuration
     */
    updateConfig(newConfig: Partial<SpacingConfig>): void;
    /**
     * Get current spacing state
     */
    getState(): SpacingState;
    /**
     * Apply spacing to specific element
     */
    applyToElement(element: Element, spacingType: keyof SpacingScale): void;
    /**
     * Apply margin spacing
     */
    applyMargin(element: Element, spacing: keyof SpacingScale | number): void;
    /**
     * Apply padding spacing
     */
    applyPadding(element: Element, spacing: keyof SpacingScale | number): void;
    /**
     * Apply gap spacing (for flex/grid)
     */
    applyGap(element: Element, spacing: keyof SpacingScale | number): void;
    /**
     * Ensure touch target compliance
     */
    ensureTouchTargets(): void;
    /**
     * Generate spacing scale
     */
    generateScale(): SpacingScale;
    /**
     * Calculate optimal spacing for content
     */
    calculateOptimalSpacing(contentType: 'text' | 'interactive' | 'layout' | 'component'): keyof SpacingScale;
    /**
     * Validate accessibility compliance
     */
    validateAccessibility(): {
        compliant: boolean;
        issues: string[];
    };
    /**
     * Setup initial spacing
     */
    private setupSpacing;
    /**
     * Calculate spacing values
     */
    private calculateSpacing;
    /**
     * Apply spacing to elements
     */
    private applySpacing;
    /**
     * Calculate container-based multiplier
     */
    private calculateContainerMultiplier;
    /**
     * Get active configuration based on container width
     */
    private getActiveConfig;
    /**
     * Find interactive elements
     */
    private findInteractiveElements;
    /**
     * Make element touch compliant
     */
    private makeTouchCompliant;
    /**
     * Validate touch compliance
     */
    private validateTouchCompliance;
    /**
     * Add spacing CSS utilities
     */
    private addSpacingCSS;
    /**
     * Setup observers
     */
    private setupObservers;
    /**
     * Clean up observers
     */
    private cleanupObservers;
    /**
     * Remove spacing
     */
    private removeSpacing;
    /**
     * Create initial state
     */
    private createInitialState;
}

/**
 * Smart Content Reordering for ProteusJS
 * Priority-based reordering with accessibility and FLIP animations
 */
interface ReorderConfig {
    priorities: Map<Element, number>;
    breakpoints: Record<string, ReorderRule[]>;
    accessibility: boolean;
    animations: boolean;
    focusManagement: boolean;
    preserveTabOrder: boolean;
    animationDuration: number;
    easing: string;
}
interface ReorderRule {
    selector: string;
    priority: number;
    condition?: 'min-width' | 'max-width' | 'aspect-ratio';
    value?: number;
    action: 'move-first' | 'move-last' | 'move-before' | 'move-after' | 'hide' | 'show';
    target?: string;
}
interface FLIPState {
    element: Element;
    first: DOMRect;
    last: DOMRect;
    invert: {
        x: number;
        y: number;
    };
    play: boolean;
}
interface ReorderState {
    originalOrder: Element[];
    currentOrder: Element[];
    activeRules: ReorderRule[];
    focusedElement: Element | null;
    animating: boolean;
    flipStates: Map<Element, FLIPState>;
}
declare class ContentReordering {
    private element;
    private config;
    private state;
    private resizeObserver;
    private mutationObserver;
    constructor(element: Element, config?: Partial<ReorderConfig>);
    /**
     * Activate content reordering
     */
    activate(): void;
    /**
     * Deactivate and restore original order
     */
    deactivate(): void;
    /**
     * Update reordering configuration
     */
    updateConfig(newConfig: Partial<ReorderConfig>): void;
    /**
     * Set element priority
     */
    setPriority(element: Element, priority: number): void;
    /**
     * Add reorder rule
     */
    addRule(breakpoint: string, rule: ReorderRule): void;
    /**
     * Get current reorder state
     */
    getState(): ReorderState;
    /**
     * Manually reorder elements
     */
    reorder(newOrder: Element[]): void;
    /**
     * Restore original order
     */
    restoreOriginalOrder(): void;
    /**
     * Setup initial reordering
     */
    private setupReordering;
    /**
     * Capture the original DOM order
     */
    private captureOriginalOrder;
    /**
     * Apply reordering based on current configuration
     */
    private applyReordering;
    /**
     * Get active rules for current container width
     */
    private getActiveRules;
    /**
     * Calculate new element order
     */
    private calculateNewOrder;
    /**
     * Check if rule should be applied
     */
    private shouldApplyRule;
    /**
     * Apply a single reorder rule
     */
    private applyRule;
    /**
     * Animate reordering using FLIP technique
     */
    private animateReorder;
    /**
     * Apply new order without animation
     */
    private applyOrder;
    /**
     * Preserve focus during reordering
     */
    private preserveFocus;
    /**
     * Restore focus after reordering
     */
    private restoreFocus;
    /**
     * Update accessibility attributes
     */
    private updateAccessibility;
    /**
     * Update tab order to match visual order
     */
    private updateTabOrder;
    /**
     * Check if element is focusable
     */
    private isFocusable;
    /**
     * Announce changes to screen readers
     */
    private announceChanges;
    /**
     * Check if two arrays are equal
     */
    private arraysEqual;
    /**
     * Setup observers
     */
    private setupObservers;
    /**
     * Clean up observers
     */
    private cleanupObservers;
    /**
     * Create initial state
     */
    private createInitialState;
}

/**
 * Responsive Images System for ProteusJS
 * Next-generation image optimization with container-based sizing
 */
interface ImageConfig {
    formats: ('webp' | 'avif' | 'jpeg' | 'png')[];
    sizes: number[];
    quality: number;
    lazyLoading: boolean;
    artDirection: boolean;
    containerBased: boolean;
    placeholder: 'blur' | 'color' | 'svg' | 'none';
    placeholderColor?: string;
    fadeInDuration: number;
    retina: boolean;
    progressive: boolean;
}
interface ImageSource {
    src: string;
    format: string;
    width: number;
    height: number;
    quality: number;
    media?: string;
}
interface ImageState {
    loaded: boolean;
    loading: boolean;
    error: boolean;
    currentSrc: string;
    containerSize: {
        width: number;
        height: number;
    };
    optimalSource: ImageSource | null;
    intersecting: boolean;
}
declare class ResponsiveImages {
    private element;
    private config;
    private state;
    private resizeObserver;
    private intersectionObserver;
    private sources;
    private static readonly FORMAT_SUPPORT;
    private static readonly MIME_TYPES;
    constructor(element: Element, config?: Partial<ImageConfig>);
    /**
     * Activate responsive image system
     */
    activate(): void;
    /**
     * Deactivate and clean up
     */
    deactivate(): void;
    /**
     * Update image configuration
     */
    updateConfig(newConfig: Partial<ImageConfig>): void;
    /**
     * Get current image state
     */
    getState(): ImageState;
    /**
     * Force image load
     */
    load(): void;
    /**
     * Preload image
     */
    preload(): Promise<void>;
    /**
     * Setup initial image
     */
    private setupImage;
    /**
     * Detect browser format support
     */
    private detectFormatSupport;
    /**
     * Test if browser supports image format
     */
    private testFormatSupport;
    /**
     * Generate image sources
     */
    private generateSources;
    /**
     * Get optimal image source
     */
    private getOptimalSource;
    /**
     * Load image
     */
    private loadImage;
    /**
     * Apply loaded image
     */
    private applyImage;
    /**
     * Add placeholder
     */
    private addPlaceholder;
    /**
     * Add blur placeholder
     */
    private addBlurPlaceholder;
    /**
     * Add SVG placeholder
     */
    private addSvgPlaceholder;
    /**
     * Remove placeholder
     */
    private removePlaceholder;
    /**
     * Handle image loading error
     */
    private handleImageError;
    /**
     * Setup image element
     */
    private setupImageElement;
    /**
     * Update image based on container size
     */
    private updateImage;
    /**
     * Get base source URL
     */
    private getBaseSrc;
    /**
     * Generate source URL with format and size
     */
    private generateSrcUrl;
    /**
     * Calculate height based on width (maintaining aspect ratio)
     */
    private calculateHeight;
    /**
     * Check if format is supported
     */
    private isFormatSupported;
    /**
     * Setup observers
     */
    private setupObservers;
    /**
     * Clean up observers
     */
    private cleanupObservers;
    /**
     * Remove image features
     */
    private removeImageFeatures;
    /**
     * Create initial state
     */
    private createInitialState;
}

/**
 * Comprehensive Accessibility Engine for ProteusJS
 * WCAG compliance, screen reader support, and cognitive accessibility
 */
interface AccessibilityConfig {
    wcagLevel: 'AA' | 'AAA';
    screenReader: boolean;
    keyboardNavigation: boolean;
    motionPreferences: boolean;
    colorCompliance: boolean;
    cognitiveAccessibility: boolean;
    announcements: boolean;
    focusManagement: boolean;
    skipLinks: boolean;
    landmarks: boolean;
    autoLabeling: boolean;
    enhanceErrorMessages: boolean;
    showReadingTime: boolean;
    simplifyContent: boolean;
    readingLevel: 'elementary' | 'middle' | 'high' | 'college';
}
interface AccessibilityState {
    prefersReducedMotion: boolean;
    prefersHighContrast: boolean;
    screenReaderActive: boolean;
    keyboardUser: boolean;
    focusVisible: boolean;
    currentFocus: Element | null;
    announcements: string[];
    violations: AccessibilityViolation[];
}
interface AccessibilityViolation {
    type: 'color-contrast' | 'focus-management' | 'aria-labels' | 'keyboard-navigation' | 'motion-sensitivity' | 'text-alternatives' | 'semantic-structure' | 'timing' | 'seizures';
    element: Element;
    description: string;
    severity: 'error' | 'warning' | 'info';
    wcagCriterion: string;
    impact: 'minor' | 'moderate' | 'serious' | 'critical';
    helpUrl?: string;
    suggestions: string[];
}
interface AccessibilityReport {
    score: number;
    level: 'AA' | 'AAA';
    violations: AccessibilityViolation[];
    passes: number;
    incomplete: number;
    summary: {
        total: number;
        errors: number;
        warnings: number;
        info: number;
    };
    recommendations: string[];
}
declare class AccessibilityEngine {
    private element;
    private config;
    private state;
    private liveRegion;
    private focusTracker;
    private colorAnalyzer;
    private motionManager;
    constructor(element: Element, config?: Partial<AccessibilityConfig>);
    /**
     * Activate accessibility features
     */
    activate(): void;
    /**
     * Validate a single element for accessibility issues
     */
    validateElement(element: Element, options?: {
        level?: 'A' | 'AA' | 'AAA';
    }): any;
    /**
     * Validate a container for accessibility issues
     */
    validateContainer(container: Element): any;
    /**
     * Audit an entire page for accessibility
     */
    auditPage(page: Element): any;
    /**
     * Setup responsive breakpoint announcements
     */
    private setupResponsiveAnnouncements;
    /**
     * Get current breakpoint based on viewport width
     */
    private getCurrentBreakpoint;
    /**
     * Get breakpoint name from width
     */
    private getBreakpointFromWidth;
    /**
     * Add content simplification indicators and tools
     */
    private addContentSimplification;
    /**
     * Toggle between original and simplified content
     */
    private toggleContentSimplification;
    /**
     * Simplify text based on reading level
     */
    private simplifyText;
    /**
     * Generate audit recommendations based on issues
     */
    private generateAuditRecommendations;
    /**
     * Destroy the accessibility engine
     */
    destroy(): void;
    /**
     * Deactivate and clean up
     */
    deactivate(): void;
    /**
     * Get accessibility state
     */
    getState(): AccessibilityState;
    /**
     * Auto-fix common accessibility issues
     */
    autoFixIssues(): void;
    /**
     * Fix heading hierarchy issues
     */
    private fixHeadingHierarchy;
    /**
     * Fix color contrast issues
     */
    private fixColorContrastIssues;
    /**
     * Generate comprehensive WCAG compliance report
     */
    generateComplianceReport(): AccessibilityReport;
    /**
     * Audit semantic structure (headings, landmarks, etc.)
     */
    private auditSemanticStructure;
    /**
     * Audit text alternatives for images and media
     */
    private auditTextAlternatives;
    /**
     * Audit timing and time limits
     */
    private auditTiming;
    /**
     * Announce message to screen readers
     */
    announce(message: string, priority?: 'polite' | 'assertive'): void;
    /**
     * Audit accessibility compliance
     */
    auditAccessibility(): AccessibilityViolation[];
    /**
     * Fix accessibility violations automatically
     */
    fixViolations(): void;
    /**
     * Detect user preferences
     */
    private detectUserPreferences;
    /**
     * Setup screen reader support
     */
    private setupScreenReaderSupport;
    /**
     * Setup keyboard navigation
     */
    private setupKeyboardNavigation;
    /**
     * Setup motion preferences
     */
    private setupMotionPreferences;
    /**
     * Setup color compliance
     */
    private setupColorCompliance;
    /**
     * Setup cognitive accessibility
     */
    private setupCognitiveAccessibility;
    /**
     * Detect screen reader
     */
    private detectScreenReader;
    /**
     * Generate ARIA labels automatically
     */
    private generateAriaLabels;
    /**
     * Setup semantic landmarks
     */
    private setupLandmarks;
    /**
     * Add skip links
     */
    private addSkipLinks;
    /**
     * Add individual skip link
     */
    private addSkipLink;
    /**
     * Enhance focus visibility
     */
    private enhanceFocusVisibility;
    /**
     * Add reading time estimates
     */
    private addReadingTimeEstimates;
    /**
     * Enhance form validation
     */
    private enhanceFormValidation;
    /**
     * Link input to error message using aria-describedby
     */
    private linkInputToErrorMessage;
    /**
     * Set up comprehensive error message linking for an input
     */
    private setupErrorMessageLinking;
    /**
     * Find error messages associated with an input
     */
    private findErrorMessagesForInput;
    /**
     * Perform comprehensive inpu