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); /** * 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(name: string, operation: () => Promise | 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; 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): 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; cssClasses: Record; } /** * 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>; } 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); /** * Initialize and activate the grid */ activate(): void; /** * Deactivate and clean up the grid */ deactivate(): void; /** * Update grid configuration */ updateConfig(newConfig: Partial): 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; } 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>; } 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); /** * Activate the enhanced flexbox */ activate(): void; /** * Deactivate and clean up */ deactivate(): void; /** * Update flexbox configuration */ updateConfig(newConfig: Partial): 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; 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); /** * Activate the flow layout */ activate(): void; /** * Deactivate and clean up */ deactivate(): void; /** * Update flow configuration */ updateConfig(newConfig: Partial): 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>; } 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; } 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); /** * Activate the spacing system */ activate(): void; /** * Deactivate and clean up */ deactivate(): void; /** * Update spacing configuration */ updateConfig(newConfig: Partial): 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; breakpoints: Record; 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; } declare class ContentReordering { private element; private config; private state; private resizeObserver; private mutationObserver; constructor(element: Element, config?: Partial); /** * Activate content reordering */ activate(): void; /** * Deactivate and restore original order */ deactivate(): void; /** * Update reordering configuration */ updateConfig(newConfig: Partial): 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); /** * Activate responsive image system */ activate(): void; /** * Deactivate and clean up */ deactivate(): void; /** * Update image configuration */ updateConfig(newConfig: Partial): void; /** * Get current image state */ getState(): ImageState; /** * Force image load */ load(): void; /** * Preload image */ preload(): Promise; /** * 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); /** * 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 input validation */ private performInputValidation; /** * Validate input value based on type and constraints */ private validateInputValue; /** * Add progress indicators */ private addProgressIndicators; /** * Audit ARIA labels */ private auditAriaLabels; /** * Audit keyboard navigation */ private auditKeyboardNavigation; /** * Audit labels (wrapper for existing auditAriaLabels) */ private auditLabels; /** * Get maximum possible violations for score calculation */ private getMaxPossibleViolations; /** * Generate recommendations based on violations */ private generateRecommendations; /** * Fix individual violation */ private fixViolation; /** * Fix ARIA label */ private fixAriaLabel; /** * Fix keyboard access */ private fixKeyboardAccess; /** * Generate input label */ private generateInputLabel; /** * Check if content is icon-only (emojis, symbols, etc.) */ private isIconOnlyContent; /** * Check if element is interactive (clickable/focusable) */ private isInteractiveElement; /** * Check if element has meaningful text content */ private hasTextContent; /** * Calculate contrast ratio between foreground and background colors */ private calculateContrastRatio; /** * Generate button label */ private generateButtonLabel; /** * Generate image alt text */ private generateImageAlt; /** * Check if element has associated label */ private hasAssociatedLabel; /** * Check if element is interactive */ private isInteractive; /** * Count words in text */ private countWords; /** * Ensure element has ID */ private ensureId; /** * Clean up accessibility features */ private cleanupAccessibilityFeatures; /** * Create initial state */ private createInitialState; } /** * FluidTypography - Intelligent fluid typography system * Provides clamp-based scaling, container-relative typography, and accessibility compliance */ interface FluidConfig { minSize: number; maxSize: number; minViewport?: number; maxViewport?: number; scalingFunction?: 'linear' | 'exponential'; accessibility?: 'none' | 'AA' | 'AAA'; enforceAccessibility?: boolean; respectUserPreferences?: boolean; } interface ContainerBasedConfig { minSize: number; maxSize: number; containerElement?: Element; minContainerWidth?: number; maxContainerWidth?: number; accessibility?: 'none' | 'AA' | 'AAA'; } interface TextFittingConfig { maxWidth: number; minSize: number; maxSize: number; allowOverflow?: boolean; wordBreak?: 'normal' | 'break-all' | 'keep-all'; } declare class FluidTypography { private appliedElements; private resizeObserver; private containerConfigs; private performanceMonitor?; constructor(); /** * Set performance monitor for integration */ setPerformanceMonitor(monitor: PerformanceMonitor): void; /** * Generate a typographic scale */ generateTypographicScale(config: { baseSize: number; ratio: number; steps?: number; }): number[]; /** * Apply fluid scaling using CSS clamp() */ applyFluidScaling(element: Element, config: FluidConfig): void; /** * Apply container-based typography scaling */ applyContainerBasedScaling(element: Element, config: ContainerBasedConfig): void; /** * Fit text to container width */ fitTextToContainer(element: Element, config: TextFittingConfig): void; /** * Remove fluid typography from element */ removeFluidScaling(element: Element): void; /** * Clean up resources */ destroy(): void; /** * Setup ResizeObserver for container-based scaling */ private setupResizeObserver; /** * Handle container resize for container-based scaling */ private handleContainerResize; /** * Update container-based scaling when container resizes */ private updateContainerBasedScaling; /** * Generate CSS clamp() value */ private generateClampValue; /** * Generate linear clamp value */ private generateLinearClamp; /** * Generate exponential clamp value */ private generateExponentialClamp; /** * Validate that a clamp value is properly formatted */ private isValidClampValue; /** * Enforce accessibility constraints on font sizes */ private enforceAccessibilityConstraints; /** * Apply user preference scaling */ private applyUserPreferences; /** * Apply font size to element */ private applyFontSize; /** * Safely get computed font size with fallbacks */ private getComputedFontSize; /** * Find the nearest container element */ private findNearestContainer; /** * Calculate optimal text size to fit within width */ private calculateOptimalTextSize; /** * Production-grade font optimization with performance considerations */ optimizeFontPerformance(element: Element): void; /** * Enhanced line height optimization for better readability */ private optimizeLineHeightForElement; /** * Optimize font loading for performance */ private optimizeFontLoading; /** * Check if font is a system font */ private isSystemFont; /** * Add performance hints for better rendering */ private addPerformanceHints; /** * Check if element is likely to be animated */ private isAnimatedElement; /** * Apply font smoothing for better text rendering */ private applyFontSmoothing; /** * Record performance metrics for monitoring */ recordPerformanceMetrics(element: Element, clampValue: string): void; } /** * ContainerBreakpoints - Breakpoint management system for container queries * Handles breakpoint registration, monitoring, and callback execution */ interface BreakpointMap { [key: string]: string; } interface BreakpointConfig { element: Element; breakpoints: BreakpointMap; callback?: BreakpointCallback; currentBreakpoint?: string; parsedBreakpoints: ParsedBreakpoint[]; } interface ParsedBreakpoint { name: string; value: number; unit: string; type: 'min' | 'max'; originalValue: string; } interface BreakpointCallbackData { width: number; height: number; breakpoint: string; previousBreakpoint?: string; element: Element; } type BreakpointCallback = (breakpoint: string, data: BreakpointCallbackData) => void; declare class ContainerBreakpoints { private breakpoints; private observer; private idCounter; private cssRules; private performanceMonitor?; private performanceMetrics; constructor(); /** * Set performance monitor for integration */ setPerformanceMonitor(monitor: PerformanceMonitor): void; /** * Register breakpoints for a container element (alias for register) */ registerContainer(element: Element, breakpoints: BreakpointMap, callback?: BreakpointCallback): string; /** * Register breakpoints for a container element */ register(element: Element, breakpoints: BreakpointMap, callback?: BreakpointCallback): string; /** * Update container breakpoints (alias for updateElement) */ updateContainer(element: Element): void; /** * Unregister breakpoints for an element */ unregister(id: string): void; /** * Get current breakpoint for a registered element */ getCurrentBreakpoint(id: string): string | null; /** * Update breakpoints for a specific element */ updateElement(element: Element): void; /** * Get all registered breakpoint configurations */ getAllConfigs(): Map; /** * Setup ResizeObserver to monitor element size changes */ private setupResizeObserver; /** * Generate unique ID for breakpoint registration */ private generateId; /** * Parse breakpoint values into standardized format */ private parseBreakpoints; /** * Parse individual breakpoint value */ private parseBreakpointValue; /** * Update breakpoint for a specific configuration */ private updateBreakpoint; /** * Determine which breakpoint applies to the current width */ private determineBreakpoint; /** * Update CSS classes on element based on current breakpoint */ private updateBreakpointClasses; /** * Remove all breakpoint classes from element */ private removeBreakpointClasses; /** * Dispatch custom breakpoint change event */ private dispatchBreakpointEvent; /** * Get performance metrics */ getMetrics(): { totalRegistrations: number; activeElements: number; averageBreakpoints: number; breakpointDistribution: Record; }; /** * Register multiple breakpoint sets at once */ registerMultiple(registrations: Array<{ element: Element; breakpoints: BreakpointMap; callback?: BreakpointCallback; }>): string[]; /** * Unregister all breakpoints for an element */ unregisterElement(element: Element): void; /** * Get all active breakpoints across all elements */ getAllActiveBreakpoints(): Array<{ id: string; element: Element; breakpoint: string; width: number; height: number; }>; /** * Force update all breakpoints */ updateAll(): void; /** * Setup performance monitoring for container queries */ private setupPerformanceMonitoring; /** * Inject base CSS for container query functionality */ private injectBaseCSS; /** * Generate responsive CSS classes for a container */ generateResponsiveCSS(elementId: string, breakpoints: BreakpointMap): void; /** * Parse container query string */ private parseContainerQuery; /** * Inject container-specific CSS */ private injectContainerCSS; /** * Record performance metrics */ private recordPerformanceMetric; /** * Get performance metrics */ getPerformanceMetrics(): typeof this.performanceMetrics; /** * Enable debug mode for container queries */ enableDebugMode(enable?: boolean): void; /** * Cleanup resources when destroying */ destroy(): void; } /** * Comprehensive Browser Compatibility System for ProteusJS * Feature detection, polyfills, and graceful degradation */ interface BrowserInfo { name: string; version: string; engine: string; platform: string; mobile: boolean; supported: boolean; } interface FeatureSupport { containerQueries: boolean; clampFunction: boolean; customProperties: boolean; flexbox: boolean; grid: boolean; intersectionObserver: boolean; resizeObserver: boolean; mutationObserver: boolean; requestAnimationFrame: boolean; webAnimations: boolean; prefersReducedMotion: boolean; prefersColorScheme: boolean; viewportUnits: boolean; calc: boolean; transforms: boolean; transitions: boolean; animations: boolean; webFonts: boolean; fontDisplay: boolean; fontVariationSettings: boolean; } interface CompatibilityConfig { enablePolyfills: boolean; gracefulDegradation: boolean; fallbackStrategies: boolean; performanceOptimizations: boolean; legacySupport: boolean; modernFeatures: boolean; autoDetection: boolean; } interface PolyfillInfo { name: string; required: boolean; loaded: boolean; size: number; url?: string; fallback?: () => void; } declare class BrowserCompatibility { private browserInfo; private featureSupport; private config; private polyfills; private fallbacks; private modernFeatures; private legacyFeatures; constructor(config?: Partial); /** * Initialize compatibility system */ initializeCompatibility(): Promise; /** * Detect browser information */ private detectBrowser; /** * Check if browser is supported */ private isBrowserSupported; /** * Detect feature support */ private detectFeatures; /** * Check container queries support */ private supportsContainerQueries; /** * Check clamp() function support */ private supportsClamp; /** * Check CSS custom properties support */ private supportsCustomProperties; /** * Check flexbox support */ private supportsFlexbox; /** * Check CSS Grid support */ private supportsGrid; /** * Check media query support */ private supportsMediaQuery; /** * Check viewport units support */ private supportsViewportUnits; /** * Check calc() function support */ private supportsCalc; /** * Check CSS transforms support */ private supportsTransforms; /** * Check CSS transitions support */ private supportsTransitions; /** * Check CSS animations support */ private supportsAnimations; /** * Check web fonts support */ private supportsWebFonts; /** * Check font-display support */ private supportsFontDisplay; /** * Check font-variation-settings support */ private supportsFontVariationSettings; /** * Apply browser-specific fixes */ private applyBrowserFixes; /** * Apply Internet Explorer specific fixes */ private applyIEFixes; /** * Apply Safari specific fixes */ private applySafariFixes; /** * Apply Firefox specific fixes */ private applyFirefoxFixes; /** * Apply mobile browser fixes */ private applyMobileFixes; /** * Load required polyfills */ private loadPolyfills; /** * Load polyfill script */ private loadPolyfillScript; /** * Add polyfill to the system */ private addPolyfill; /** * Setup fallback strategies */ private setupFallbacks; /** * Container queries fallback */ private containerQueriesFallback; /** * Clamp function fallback */ private clampFallback; /** * Custom properties fallback */ private customPropertiesFallback; /** * Intersection Observer fallback */ private intersectionObserverFallback; /** * Viewport units fallback */ private viewportUnitsFallback; /** * Flexbox fallback */ private flexboxFallback; /** * Apply performance optimizations */ private applyPerformanceOptimizations; /** * Apply legacy browser optimizations */ private applyLegacyOptimizations; /** * Apply mobile optimizations */ private applyMobileOptimizations; /** * Apply feature-based optimizations */ private applyFeatureBasedOptimizations; /** * Setup modern features */ private setupModernFeatures; /** * Get browser information */ getBrowserInfo(): BrowserInfo; /** * Get feature support information */ getFeatureSupport(): FeatureSupport; /** * Check if specific feature is supported */ isFeatureSupported(feature: keyof FeatureSupport): boolean; /** * Get compatibility report */ getCompatibilityReport(): { browser: BrowserInfo; features: FeatureSupport; polyfills: PolyfillInfo[]; modernFeatures: string[]; legacyFeatures: string[]; recommendations: string[]; }; /** * Enable graceful degradation for specific feature */ enableGracefulDegradation(feature: string, fallback: () => void): void; /** * Cleanup compatibility system */ destroy(): void; } declare class ProteusJS { private static instance; private config; private eventSystem; private pluginSystem; private performanceMonitor; private memoryManager; private observerManager; private containerManager; private clampScaling; private typographicScale; private textFitting; private lineHeightOptimizer; private verticalRhythm; private eventHandler; private batchDOM; private lazyEvaluation; private cssOptimizer; private themeSystem; private flipAnimations; private scrollAnimations; private memoryManagement; private cacheOptimization; private zeroConfig; private browserPolyfills; private fluidTypography; private containerBreakpoints; private accessibilityEngine; private browserCompatibility; private initialized; constructor(config?: ProteusConfig); /** * Public getters for subsystems */ get typography(): FluidTypography; get containers(): ContainerBreakpoints; get performance(): PerformanceMonitor; get accessibility(): AccessibilityEngine; get compatibility(): BrowserCompatibility; /** * Get current configuration */ getConfiguration(): Required; /** * Initialize ProteusJS (async version) */ initialize(): Promise; /** * Initialize ProteusJS */ init(): this; /** * Get browser capabilities */ getBrowserCapabilities(): any; /** * Get performance metrics */ getMetrics(): any; /** * Detect browser features */ detectFeatures(): any; /** * Update live region for screen readers */ updateLiveRegion(element: Element, message: string): void; /** * Destroy ProteusJS instance and clean up resources */ destroy(): void; /** * Get current configuration */ getConfig(): Required; /** * Update configuration */ updateConfig(newConfig: Partial): this; /** * Get event system instance */ getEventSystem(): EventSystem; /** * Get plugin system instance */ getPluginSystem(): PluginSystem; /** * Get performance monitor instance */ getPerformanceMonitor(): PerformanceMonitor; /** * Get memory manager instance */ getMemoryManager(): MemoryManager; /** * Get observer manager instance */ getObserverManager(): ObserverManager; /** * Get container manager instance */ getContainerManager(): ContainerManager; /** * Create a container with responsive behavior */ container(selector: string | Element | Element[], options?: ContainerOptions$1): SmartContainer | SmartContainer[]; /** * Create fluid typography scaling */ fluidType(selector: string | Element | Element[], config?: ScalingConfig): void; /** * Generate typographic scale */ createTypeScale(config?: ScaleConfig): TypeScale | number[]; /** * Create adaptive grid layout */ createGrid(selector: string | Element, config?: Partial): AdaptiveGrid | null; /** * Apply text fitting to elements */ fitText(selector: string | Element | Element[], config?: any): void; /** * Apply vertical rhythm to elements */ applyRhythm(selector: string | Element | Element[], _config?: unknown): void; /** * Create enhanced flexbox layout */ createFlexbox(selector: string | Element, config?: any): FlexboxEnhancer | null; /** * Apply flow layout */ applyFlow(selector: string | Element, config?: any): FlowLayout | null; /** * Apply spacing system */ applySpacing(selector: string | Element, config?: any): SpacingSystem | null; /** * Enable content reordering */ enableReordering(selector: string | Element, config?: any): ContentReordering | null; /** * Enable responsive images */ responsiveImages(selector: string | Element | Element[], config?: any): ResponsiveImages | ResponsiveImages[] | undefined; /** * Enable accessibility features */ enableAccessibility(selector: string | Element, config?: any): AccessibilityEngine | null; /** * Comprehensive setup for complete ProteusJS experience */ setupComplete(config?: any): this; /** * Check if ProteusJS is initialized */ isInitialized(): boolean; /** * Get library version */ static getVersion(): string; /** * Get browser support information */ static getSupportInfo(): SupportInfo; /** * Check if browser is supported */ static isSupported(): boolean; /** * Get or create global instance */ static getInstance(config?: ProteusConfig): ProteusJS; /** * Merge configuration with defaults */ private mergeConfig; /** * Normalize selector to array of elements */ private normalizeSelector; /** * Get performance metrics from event handler */ getPerformanceMetrics(): { eventHandler: PerformanceMetrics; batchDOM: BatchMetrics; performanceMonitor: PerformanceMetrics$1; }; /** * Efficiently observe element resize with batching */ observeResize(selector: string | Element, callback: (entry: ResizeObserverEntry) => void, priority?: 'high' | 'normal' | 'low'): string | null; /** * Batch DOM style changes for performance */ batchStyles(selector: string | Element, styles: Record, priority?: 'high' | 'normal' | 'low'): Promise; /** * Batch DOM measurements for performance */ measureElement(selector: string | Element, measurements?: ('width' | 'height' | 'top' | 'left' | 'right' | 'bottom')[], priority?: 'high' | 'normal' | 'low'): Promise>; /** * Set theme scheme */ setTheme(scheme: string): this; /** * Toggle theme between light and dark */ toggleTheme(): this; /** * Animate element with FLIP technique */ animateElement(selector: string | Element, newPosition: () => void, options?: any): Promise; /** * Add micro-interactions to elements */ addMicroInteractions(selector: string | Element, type?: 'hover' | 'press' | 'focus' | 'ripple'): this; /** * Register lazy-loaded component */ lazyLoad(selector: string | Element, activator: () => Promise, options?: any): string | null; /** * Optimize CSS performance */ optimizeCSS(): Promise; /** * Get comprehensive performance metrics */ getAdvancedMetrics(): { eventHandler: PerformanceMetrics; batchDOM: BatchMetrics; lazyEvaluation: LazyMetrics; cssOptimizer: OptimizationMetrics; themeSystem: ThemeState; flipAnimations: number; performanceMonitor: PerformanceMetrics$1; }; } /** * @sc4rfurryx/proteusjs/transitions * View Transitions API wrapper with safe fallbacks * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface TransitionOptions { name?: string; duration?: number; onBefore?: () => void; onAfter?: () => void; allowInterrupt?: boolean; } interface NavigateOptions { name?: string; prerender?: boolean; } /** * One API for animating DOM state changes and cross-document navigations * using the View Transitions API with safe fallbacks. */ declare function transition(run: () => Promise | any, opts?: TransitionOptions): Promise; /** * MPA-friendly navigation with view transitions when supported */ declare function navigate(url: string, opts?: NavigateOptions): Promise; declare const _default$8: { transition: typeof transition; navigate: typeof navigate; }; type index$8_NavigateOptions = NavigateOptions; type index$8_TransitionOptions = TransitionOptions; declare const index$8_navigate: typeof navigate; declare const index$8_transition: typeof transition; declare namespace index$8 { export { _default$8 as default, index$8_navigate as navigate, index$8_transition as transition }; export type { index$8_NavigateOptions as NavigateOptions, index$8_TransitionOptions as TransitionOptions }; } /** * @sc4rfurryx/proteusjs/scroll * Scroll-driven animations with CSS Scroll-Linked Animations * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface ScrollAnimateOptions { keyframes: Keyframe[]; range?: [string, string]; timeline?: { axis?: 'block' | 'inline'; start?: string; end?: string; }; fallback?: 'io' | false; } /** * Zero-boilerplate setup for CSS Scroll-Linked Animations with fallbacks */ declare function scrollAnimate(target: Element | string, opts: ScrollAnimateOptions): void; /** * Create a scroll-triggered animation that plays once when element enters viewport */ declare function scrollTrigger(target: Element | string, keyframes: Keyframe[], options?: KeyframeAnimationOptions): void; /** * Parallax effect using scroll-driven animations */ declare function parallax(target: Element | string, speed?: number): void; /** * Cleanup function to remove scroll animations */ declare function cleanup$2(target: Element | string): void; declare const _default$7: { scrollAnimate: typeof scrollAnimate; scrollTrigger: typeof scrollTrigger; parallax: typeof parallax; cleanup: typeof cleanup$2; }; type index$7_ScrollAnimateOptions = ScrollAnimateOptions; declare const index$7_parallax: typeof parallax; declare const index$7_scrollAnimate: typeof scrollAnimate; declare const index$7_scrollTrigger: typeof scrollTrigger; declare namespace index$7 { export { cleanup$2 as cleanup, _default$7 as default, index$7_parallax as parallax, index$7_scrollAnimate as scrollAnimate, index$7_scrollTrigger as scrollTrigger }; export type { index$7_ScrollAnimateOptions as ScrollAnimateOptions }; } /** * @sc4rfurryx/proteusjs/anchor * CSS Anchor Positioning utilities with robust JS fallback * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface TetherOptions { anchor: Element | string; placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto'; align?: 'start' | 'center' | 'end'; offset?: number; strategy?: 'absolute' | 'fixed'; } interface TetherController { update(): void; destroy(): void; } /** * Declarative tethers (tooltips, callouts) via CSS Anchor Positioning when available; * robust JS fallback with flip/collision detection */ declare function tether(floating: Element | string, opts: TetherOptions): TetherController; declare const _default$6: { tether: typeof tether; }; type index$6_TetherController = TetherController; type index$6_TetherOptions = TetherOptions; declare const index$6_tether: typeof tether; declare namespace index$6 { export { _default$6 as default, index$6_tether as tether }; export type { index$6_TetherController as TetherController, index$6_TetherOptions as TetherOptions }; } /** * @sc4rfurryx/proteusjs/popover * HTML Popover API wrapper with robust focus/inert handling * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface PopoverOptions { type?: 'menu' | 'dialog' | 'tooltip'; trapFocus?: boolean; restoreFocus?: boolean; closeOnEscape?: boolean; onOpen?: () => void; onClose?: () => void; } interface PopoverController { open(): void; close(): void; toggle(): void; destroy(): void; } /** * Unified API for menus, tooltips, and dialogs using the native Popover API * with robust focus/inert handling */ declare function attach(trigger: Element | string, panel: Element | string, opts?: PopoverOptions): PopoverController; declare const _default$5: { attach: typeof attach; }; type index$5_PopoverController = PopoverController; type index$5_PopoverOptions = PopoverOptions; declare const index$5_attach: typeof attach; declare namespace index$5 { export { index$5_attach as attach, _default$5 as default }; export type { index$5_PopoverController as PopoverController, index$5_PopoverOptions as PopoverOptions }; } /** * @sc4rfurryx/proteusjs/container * Container/Style Query helpers with visualization devtools * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface ContainerOptions { type?: 'size' | 'style'; inlineSize?: boolean; } /** * Sugar on native container queries with dev visualization */ declare function defineContainer(target: Element | string, name?: string, opts?: ContainerOptions): void; /** * Helper to create container query CSS rules */ declare function createContainerQuery(containerName: string, condition: string, styles: Record): string; /** * Apply container query styles dynamically */ declare function applyContainerQuery(containerName: string, condition: string, styles: Record): void; /** * Remove container query styles */ declare function removeContainerQuery(containerName: string): void; /** * Get container size information */ declare function getContainerSize(target: Element | string): { width: number; height: number; }; /** * Check if container queries are supported */ declare function isSupported(): boolean; /** * Cleanup container overlays and observers */ declare function cleanup$1(target: Element | string): void; /** * Toggle dev overlay visibility */ declare function toggleDevOverlay(visible?: boolean): void; declare const _default$4: { defineContainer: typeof defineContainer; createContainerQuery: typeof createContainerQuery; applyContainerQuery: typeof applyContainerQuery; removeContainerQuery: typeof removeContainerQuery; getContainerSize: typeof getContainerSize; isSupported: typeof isSupported; cleanup: typeof cleanup$1; toggleDevOverlay: typeof toggleDevOverlay; }; type index$4_ContainerOptions = ContainerOptions; declare const index$4_applyContainerQuery: typeof applyContainerQuery; declare const index$4_createContainerQuery: typeof createContainerQuery; declare const index$4_defineContainer: typeof defineContainer; declare const index$4_getContainerSize: typeof getContainerSize; declare const index$4_isSupported: typeof isSupported; declare const index$4_removeContainerQuery: typeof removeContainerQuery; declare const index$4_toggleDevOverlay: typeof toggleDevOverlay; declare namespace index$4 { export { index$4_applyContainerQuery as applyContainerQuery, cleanup$1 as cleanup, index$4_createContainerQuery as createContainerQuery, _default$4 as default, index$4_defineContainer as defineContainer, index$4_getContainerSize as getContainerSize, index$4_isSupported as isSupported, index$4_removeContainerQuery as removeContainerQuery, index$4_toggleDevOverlay as toggleDevOverlay }; export type { index$4_ContainerOptions as ContainerOptions }; } /** * @sc4rfurryx/proteusjs/typography * Fluid typography with CSS-first approach * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface FluidTypeOptions { minViewportPx?: number; maxViewportPx?: number; lineHeight?: number; containerUnits?: boolean; } interface FluidTypeResult { css: string; } /** * Generate pure-CSS clamp() rules for fluid typography */ declare function fluidType(minRem: number, maxRem: number, options?: FluidTypeOptions): FluidTypeResult; /** * Apply fluid typography to elements */ declare function applyFluidType(selector: string, minRem: number, maxRem: number, options?: FluidTypeOptions): void; /** * Create a complete typographic scale */ declare function createTypographicScale(baseSize?: number, ratio?: number, steps?: number, options?: FluidTypeOptions): Record; /** * Generate CSS custom properties for a typographic scale */ declare function generateScaleCSS(scale: Record, prefix?: string): string; /** * Optimize line height for readability */ declare function optimizeLineHeight(fontSize: number, measure?: number): number; /** * Calculate optimal font size for container width */ declare function calculateOptimalSize(containerWidth: number, targetCharacters?: number, baseCharWidth?: number): number; /** * Apply responsive typography to an element */ declare function makeResponsive(target: Element | string, options?: { minSize?: number; maxSize?: number; targetCharacters?: number; autoLineHeight?: boolean; }): void; /** * Remove applied typography styles */ declare function cleanup(target?: Element | string): void; /** * Check if container query units are supported */ declare function supportsContainerUnits(): boolean; declare const _default$3: { fluidType: typeof fluidType; applyFluidType: typeof applyFluidType; createTypographicScale: typeof createTypographicScale; generateScaleCSS: typeof generateScaleCSS; optimizeLineHeight: typeof optimizeLineHeight; calculateOptimalSize: typeof calculateOptimalSize; makeResponsive: typeof makeResponsive; cleanup: typeof cleanup; supportsContainerUnits: typeof supportsContainerUnits; }; type index$3_FluidTypeOptions = FluidTypeOptions; type index$3_FluidTypeResult = FluidTypeResult; declare const index$3_applyFluidType: typeof applyFluidType; declare const index$3_calculateOptimalSize: typeof calculateOptimalSize; declare const index$3_cleanup: typeof cleanup; declare const index$3_createTypographicScale: typeof createTypographicScale; declare const index$3_fluidType: typeof fluidType; declare const index$3_generateScaleCSS: typeof generateScaleCSS; declare const index$3_makeResponsive: typeof makeResponsive; declare const index$3_optimizeLineHeight: typeof optimizeLineHeight; declare const index$3_supportsContainerUnits: typeof supportsContainerUnits; declare namespace index$3 { export { index$3_applyFluidType as applyFluidType, index$3_calculateOptimalSize as calculateOptimalSize, index$3_cleanup as cleanup, index$3_createTypographicScale as createTypographicScale, _default$3 as default, index$3_fluidType as fluidType, index$3_generateScaleCSS as generateScaleCSS, index$3_makeResponsive as makeResponsive, index$3_optimizeLineHeight as optimizeLineHeight, index$3_supportsContainerUnits as supportsContainerUnits }; export type { index$3_FluidTypeOptions as FluidTypeOptions, index$3_FluidTypeResult as FluidTypeResult }; } /** * @sc4rfurryx/proteusjs/a11y-audit * Lightweight accessibility audits for development * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface AuditOptions { rules?: string[]; format?: 'console' | 'json'; } interface AuditViolation { id: string; impact: 'minor' | 'moderate' | 'serious' | 'critical'; nodes: number; help: string; } interface AuditReport { violations: AuditViolation[]; passes: number; timestamp: number; url: string; } declare function audit(target?: Document | Element, options?: AuditOptions): Promise; declare const _default$2: { audit: typeof audit; }; type index$2_AuditOptions = AuditOptions; type index$2_AuditReport = AuditReport; type index$2_AuditViolation = AuditViolation; declare const index$2_audit: typeof audit; declare namespace index$2 { export { index$2_audit as audit, _default$2 as default }; export type { index$2_AuditOptions as AuditOptions, index$2_AuditReport as AuditReport, index$2_AuditViolation as AuditViolation }; } /** * @sc4rfurryx/proteusjs/a11y-primitives * Lightweight accessibility patterns * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface Controller { destroy(): void; } interface DialogOptions { modal?: boolean; restoreFocus?: boolean; } interface TooltipOptions { delay?: number; placement?: 'top' | 'bottom' | 'left' | 'right'; } interface FocusTrapController { activate(): void; deactivate(): void; } declare function dialog(root: Element | string, opts?: DialogOptions): Controller; declare function tooltip(trigger: Element, content: HTMLElement, opts?: TooltipOptions): Controller; declare function focusTrap(container: Element): FocusTrapController; declare function menu(container: Element): Controller; declare const _default$1: { dialog: typeof dialog; tooltip: typeof tooltip; focusTrap: typeof focusTrap; menu: typeof menu; }; type index$1_Controller = Controller; type index$1_DialogOptions = DialogOptions; type index$1_FocusTrapController = FocusTrapController; type index$1_TooltipOptions = TooltipOptions; declare const index$1_dialog: typeof dialog; declare const index$1_focusTrap: typeof focusTrap; declare const index$1_menu: typeof menu; declare const index$1_tooltip: typeof tooltip; declare namespace index$1 { export { _default$1 as default, index$1_dialog as dialog, index$1_focusTrap as focusTrap, index$1_menu as menu, index$1_tooltip as tooltip }; export type { index$1_Controller as Controller, index$1_DialogOptions as DialogOptions, index$1_FocusTrapController as FocusTrapController, index$1_TooltipOptions as TooltipOptions }; } /** * @sc4rfurryx/proteusjs/perf * Performance guardrails and CWV-friendly patterns * * @version 2.0.0 * @author sc4rfurry * @license MIT */ interface SpeculationOptions { prerender?: string[]; prefetch?: string[]; sameOriginOnly?: boolean; } interface ContentVisibilityOptions { containIntrinsicSize?: string; } /** * Apply content-visibility for performance optimization */ declare function contentVisibility(selector: string | Element, mode?: 'auto' | 'hidden', opts?: ContentVisibilityOptions): void; /** * Set fetch priority for resources */ declare function fetchPriority(selector: string | Element, priority: 'high' | 'low' | 'auto'): void; /** * Set up speculation rules for prerendering and prefetching */ declare function speculate(opts: SpeculationOptions): void; /** * Yield to browser using scheduler.yield or postTask when available */ declare function yieldToBrowser(): Promise; /** * Optimize images with loading and decoding hints */ declare function optimizeImages(selector?: string | Element): void; /** * Preload critical resources */ declare function preloadCritical(resources: Array<{ href: string; as: string; type?: string; }>): void; /** * Measure and report Core Web Vitals */ declare function measureCWV(): Promise<{ lcp?: number; fid?: number; cls?: number; }>; declare const boost: { contentVisibility: typeof contentVisibility; fetchPriority: typeof fetchPriority; speculate: typeof speculate; yieldToBrowser: typeof yieldToBrowser; optimizeImages: typeof optimizeImages; preloadCritical: typeof preloadCritical; measureCWV: typeof measureCWV; }; declare const _default: { contentVisibility: typeof contentVisibility; fetchPriority: typeof fetchPriority; speculate: typeof speculate; yieldToBrowser: typeof yieldToBrowser; optimizeImages: typeof optimizeImages; preloadCritical: typeof preloadCritical; measureCWV: typeof measureCWV; boost: { contentVisibility: typeof contentVisibility; fetchPriority: typeof fetchPriority; speculate: typeof speculate; yieldToBrowser: typeof yieldToBrowser; optimizeImages: typeof optimizeImages; preloadCritical: typeof preloadCritical; measureCWV: typeof measureCWV; }; }; type index_ContentVisibilityOptions = ContentVisibilityOptions; type index_SpeculationOptions = SpeculationOptions; declare const index_boost: typeof boost; declare const index_contentVisibility: typeof contentVisibility; declare const index_fetchPriority: typeof fetchPriority; declare const index_measureCWV: typeof measureCWV; declare const index_optimizeImages: typeof optimizeImages; declare const index_preloadCritical: typeof preloadCritical; declare const index_speculate: typeof speculate; declare const index_yieldToBrowser: typeof yieldToBrowser; declare namespace index { export { index_boost as boost, index_contentVisibility as contentVisibility, _default as default, index_fetchPriority as fetchPriority, index_measureCWV as measureCWV, index_optimizeImages as optimizeImages, index_preloadCritical as preloadCritical, index_speculate as speculate, index_yieldToBrowser as yieldToBrowser }; export type { index_ContentVisibilityOptions as ContentVisibilityOptions, index_SpeculationOptions as SpeculationOptions }; } /** * Version utilities for ProteusJS */ declare const version = "2.0.0"; /** * ProteusJS - Native-first Web Development Primitives * Shape-shifting responsive design that adapts like the sea god himself * * @version 2.0.0 * @author sc4rfurry * @license MIT */ declare const VERSION = "2.0.0"; declare const LIBRARY_NAME = "ProteusJS"; export { LIBRARY_NAME, ProteusJS, VERSION, index$2 as a11yAudit, index$1 as a11yPrimitives, index$6 as anchor, index$4 as container, ProteusJS as default, isSupported$1 as isSupported, index as perf, index$5 as popover, index$7 as scroll, index$8 as transitions, index$3 as typography, version }; export type { AccessibilityConfig$1 as AccessibilityConfig, AnimationConfig, AuditOptions, AuditReport, AuditViolation, BreakpointConfig$1 as BreakpointConfig, ContainerConfig, ContainerOptions, ContentVisibilityOptions, Controller, DialogOptions, FluidTypeOptions, FluidTypeResult, FocusTrapController, LayoutConfig, NavigateOptions, PerformanceConfig, PopoverController, PopoverOptions, ProteusConfig, ProteusPlugin, ScrollAnimateOptions, SpeculationOptions, TetherController, TetherOptions, TooltipOptions, TransitionOptions, TypographyConfig };