/** * @fileoverview Adaptive Layout System * * A world-class Automatic Adaptive & Morphing Layouts system for React applications. * This module provides content-aware layout computation, FLIP-based morph transitions, * constraint-based layout solving, and CLS prevention. * * ## Features * * - **Content-Aware Layouts**: Automatically select optimal layout modes based on * content analysis (item count, size variance, content type) * * - **FLIP Animations**: GPU-accelerated morph transitions using the First, Last, * Invert, Play technique for smooth 60fps animations * * - **Constraint Solver**: Sophisticated constraint-based layout system with * priority-based resolution * * - **CLS Prevention**: Zero Cumulative Layout Shift through layout reservations * and skeleton placeholders * * - **Breakpoint-Free**: Content-driven responsive design without traditional * viewport breakpoints * * ## Quick Start * * ```tsx * import { * AdaptiveLayout, * AdaptiveGrid, * MorphTransition, * useAdaptiveLayout, * } from '@/lib/layouts/adaptive'; * * function Gallery({ items }) { * return ( * * * {items.map(item => ( * * {item.content} * * ))} * * * ); * } * ``` * * ## Layout Modes * * - `grid` - Multi-column grid layout * - `list` - Single-column list layout * - `compact` - Dense grid with smaller items * - `expanded` - Spacious layout with larger items * - `dense` - Maximum density layout * - `sparse` - Generous spacing for readability * * ## Architecture * * The system is composed of several key parts: * * 1. **Layout Engine** - Content analysis and layout computation * 2. **Morph Controller** - FLIP animation orchestration * 3. **Constraint Solver** - Layout constraint resolution * 4. **CLS Guard** - Layout shift prevention and monitoring * * @module layouts/adaptive * @version 1.0.0 * @license MIT */ export type { LayoutMode, TransitionDirection, ContentDensity, ConstraintPriority, EasingFunction, GPUAcceleratedProperty, Point2D, Dimensions, BoundingBox, BoxSpacing, LayoutRect, LayoutEngineConfig, ContentAnalysis, AspectRatioDistribution, LayoutState, GridLayoutConfig, ListLayoutConfig, LayoutComputeRequest, LayoutComputeResult, MorphTransitionConfig, FLIPSnapshot, Transform3D, AnimationContext, MorphState, PendingTransition, LayoutConstraint, ConstraintType, ConstraintParams, MinMaxConstraintParams, AspectRatioConstraintParams, AlignmentConstraintParams, SpacingConstraintParams, OrderConstraintParams, VisibilityConstraintParams, ContainmentConstraintParams, ConstraintSolution, ConstraintViolation, CLSGuardConfig, ReservationStrategy, LayoutReservation, CLSMeasurement, LayoutShiftEntry, AdaptiveLayoutProps, AdaptiveGridProps, AdaptiveStackProps, AdaptiveContainerProps, ContainerBreakpoints, MorphTransitionProps, UseAdaptiveLayoutReturn, UseLayoutModeReturn, UseLayoutMorphReturn, UseContentDensityReturn, UseCLSGuardReturn, AdaptiveLayoutContextValue, LayoutEngineInterface, MorphControllerInterface, CLSGuardInterface, ConstraintSolverInterface, UserLayoutPreferences, AnimationPreferences, AccessibilityPreferences, LayoutPerformanceMetrics, PerformanceBudget, } from './types'; export { DEFAULT_LAYOUT_ENGINE_CONFIG, DEFAULT_MORPH_TRANSITION_CONFIG, DEFAULT_CLS_GUARD_CONFIG, DEFAULT_PERFORMANCE_BUDGET, } from './types'; export { LayoutEngine, createLayoutEngine, getSharedLayoutEngine, resetSharedLayoutEngine, } from './layout-engine'; export { MorphController, createMorphController, createElementFLIP, performFLIP, } from './morph-transition'; export { ConstraintSolver, createConstraintSolver } from './constraint-solver'; export { CLSGuard, createCLSGuard, predictCLSImpact, createOptimizedReservations, } from './cls-guard'; export { AdaptiveLayout, AdaptiveLayoutContext, useAdaptiveLayoutContext } from './AdaptiveLayout'; export { AdaptiveGrid } from './AdaptiveGrid'; export { AdaptiveStack, HStack, VStack, ResponsiveStack } from './AdaptiveStack'; export { AdaptiveContainer, ContainerContext, useContainerContext, useContainerQuery, useContainerValue, } from './AdaptiveContainer'; export { MorphTransition, AnimatedPresence } from './MorphTransition'; export { useAdaptiveLayout, useLayoutMode, useLayoutMorph, useContentDensity, useCLSGuard, useIsLayoutMode, useLayoutModeValue, useMorphElement, useDensityThreshold, useImageReservation, useCLSMonitor, type UseAdaptiveLayoutOptions, type UseLayoutModeOptions, type UseLayoutMorphOptions, type UseContentDensityOptions, type UseCLSGuardOptions, } from './hooks/index';