{"version":3,"file":"AdaptiveLayout.mjs","sources":["../../../../src/lib/layouts/adaptive/AdaptiveLayout.tsx"],"sourcesContent":["/**\n * @fileoverview AdaptiveLayout Component\n *\n * The main wrapper component for the Adaptive Layout system. Provides automatic\n * content-aware layout selection, morph transitions, and CLS prevention for\n * its children.\n *\n * @module layouts/adaptive/AdaptiveLayout\n * @version 1.0.0\n */\n\n/* eslint-disable react-refresh/only-export-components */\n\nimport {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n type RefObject,\n} from 'react';\nimport { AdaptiveLayoutContext } from '../../contexts/AdaptiveLayoutContext';\nimport type {\n AdaptiveLayoutProps,\n CLSGuardConfig,\n ContentAnalysis,\n // LayoutComputeResult,\n // LayoutConstraint,\n LayoutEngineConfig,\n LayoutMode,\n LayoutState,\n MorphTransitionConfig,\n} from './types';\nimport {\n DEFAULT_LAYOUT_ENGINE_CONFIG,\n DEFAULT_MORPH_TRANSITION_CONFIG,\n DEFAULT_CLS_GUARD_CONFIG,\n} from './types';\nimport { createLayoutEngine } from './layout-engine';\nimport { createMorphController } from './morph-transition';\nimport { createCLSGuard } from './cls-guard';\nimport { createConstraintSolver } from './constraint-solver';\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\n\n/* @refresh reset */\n\n/**\n * Context for sharing adaptive layout state and controls.\n */\ntype AdaptiveLayoutContextValue = unknown;\ntype AdaptiveLayoutContextValueInternal = unknown;\n\n/**\n * Hook to access the adaptive layout context.\n *\n * @throws Error if used outside AdaptiveLayout\n */\nexport function useAdaptiveLayoutContext(): AdaptiveLayoutContextValue {\n const context = useContext(AdaptiveLayoutContext);\n if (!context) {\n throw new Error('useAdaptiveLayoutContext must be used within an AdaptiveLayout');\n }\n return context as AdaptiveLayoutContextValueInternal;\n}\n\n// =============================================================================\n// CHILD REGISTRY\n// =============================================================================\n\n/**\n * Registry for tracking child elements.\n */\ninterface ChildRegistry {\n elements: Map>;\n register: (id: string, ref: RefObject) => void;\n unregister: (id: string) => void;\n getElements: () => Map;\n}\n\n/**\n * Creates a child registry for tracking elements.\n */\nfunction createChildRegistry(): ChildRegistry {\n const elements = new Map>();\n\n return {\n elements,\n register: (id: string, ref: RefObject) => {\n elements.set(id, ref);\n },\n unregister: (id: string) => {\n elements.delete(id);\n },\n getElements: () => {\n const result = new Map();\n for (const [id, ref] of elements) {\n if (ref.current !== null && ref.current !== undefined) {\n result.set(id, ref.current);\n }\n }\n return result;\n },\n };\n}\n\n// =============================================================================\n// ADAPTIVE LAYOUT COMPONENT\n// =============================================================================\n\n/**\n * AdaptiveLayout is the main wrapper component for the adaptive layout system.\n * It provides content-aware layout selection, smooth morph transitions, and\n * CLS prevention for its children.\n *\n * @example\n * ```tsx\n * console.log('Mode changed:', mode)}\n * >\n * \n * {items.map(item => (\n * {item.content}\n * ))}\n * \n * \n * ```\n */\nexport function AdaptiveLayout({\n children,\n initialMode = 'grid',\n config = {},\n transitionConfig = {},\n clsConfig = {},\n constraints = [],\n onModeChange,\n onLayoutComputed,\n className,\n style,\n testId,\n}: AdaptiveLayoutProps): ReactNode {\n // Refs\n const containerRef = useRef(null);\n const childRegistryRef = useRef(createChildRegistry());\n\n // Merge configurations with defaults\n const engineConfig = useMemo(\n () => ({ ...DEFAULT_LAYOUT_ENGINE_CONFIG, ...config }),\n [config]\n );\n\n const morphConfig = useMemo(\n () => ({ ...DEFAULT_MORPH_TRANSITION_CONFIG, ...transitionConfig }),\n [transitionConfig]\n );\n\n const guardConfig = useMemo(\n () => ({ ...DEFAULT_CLS_GUARD_CONFIG, ...clsConfig }),\n [clsConfig]\n );\n\n // Create instances\n const engine = useMemo(() => createLayoutEngine(engineConfig), [engineConfig]);\n const morphController = useMemo(() => createMorphController(morphConfig), [morphConfig]);\n const clsGuard = useMemo(() => createCLSGuard(guardConfig), [guardConfig]);\n const constraintSolver = useMemo(() => createConstraintSolver(), []);\n\n // State\n const [currentMode, setCurrentMode] = useState(initialMode);\n const [layoutState, setLayoutState] = useState(null);\n const [_analysis, setAnalysis] = useState(null);\n const [isComputing, setIsComputing] = useState(false);\n const [isTransitioning, setIsTransitioning] = useState(false);\n\n // Previous mode for transitions\n const previousModeRef = useRef(initialMode);\n\n // Add constraints to solver\n useEffect(() => {\n constraintSolver.clear();\n for (const constraint of constraints) {\n constraintSolver.addConstraint(constraint);\n }\n }, [constraints, constraintSolver]);\n\n // Compute layout\n const computeLayout = useCallback(async () => {\n if (!containerRef.current) return;\n\n setIsComputing(true);\n\n try {\n const container = containerRef.current;\n const contentAnalysis = engine.analyze(container);\n setAnalysis(contentAnalysis);\n\n // Select mode based on analysis and constraints\n const selectedMode = engineConfig.contentAware\n ? engine.selectMode(contentAnalysis, constraints)\n : currentMode;\n\n // Compute layout\n const rect = container.getBoundingClientRect();\n const itemIds = Array.from(childRegistryRef.current.elements.keys());\n\n const result = engine.compute({\n containerId: container.id || 'adaptive-layout',\n itemIds,\n containerDimensions: { width: rect.width, height: rect.height },\n forcedMode: selectedMode,\n });\n\n // Check if mode changed\n if (selectedMode !== previousModeRef.current) {\n // Perform morph transition\n setIsTransitioning(true);\n\n const elements = childRegistryRef.current.getElements();\n if (elements.size > 0) {\n const first = morphController.snapshotFirst(elements);\n\n // Update state\n setLayoutState(result.state);\n setCurrentMode(selectedMode);\n\n // Force reflow\n void container.offsetHeight;\n\n const last = morphController.snapshotLast(elements);\n const context = morphController.createAnimation(first, last, elements);\n\n await morphController.play(context);\n } else {\n setLayoutState(result.state);\n setCurrentMode(selectedMode);\n }\n\n setIsTransitioning(false);\n previousModeRef.current = selectedMode;\n onModeChange?.(selectedMode, contentAnalysis);\n } else {\n setLayoutState(result.state);\n }\n\n onLayoutComputed?.(result);\n } finally {\n setIsComputing(false);\n }\n }, [\n engine,\n engineConfig.contentAware,\n constraints,\n currentMode,\n morphController,\n onModeChange,\n onLayoutComputed,\n ]);\n\n // Observe container size changes\n useEffect(() => {\n if (!containerRef.current) return;\n\n const container = containerRef.current;\n let timeoutId: ReturnType;\n\n const cleanup = engine.observe(container, () => {\n // Debounce layout computation\n clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n void computeLayout();\n }, engineConfig.resizeDebounceMs);\n });\n\n // Initial computation\n void computeLayout();\n\n return () => {\n cleanup();\n clearTimeout(timeoutId);\n };\n }, [engine, engineConfig.resizeDebounceMs, computeLayout]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n engine.destroy();\n morphController.destroy();\n clsGuard.destroy();\n };\n }, [engine, morphController, clsGuard]);\n\n // Register/unregister child handlers\n const registerChild = useCallback((id: string, ref: RefObject) => {\n childRegistryRef.current.register(id, ref);\n }, []);\n\n const unregisterChild = useCallback((id: string) => {\n childRegistryRef.current.unregister(id);\n }, []);\n\n // Context value\n const contextValue = useMemo(\n () => ({\n engine,\n morphController,\n clsGuard,\n constraintSolver,\n config: engineConfig,\n layoutState,\n registerChild,\n unregisterChild,\n }),\n [\n engine,\n morphController,\n clsGuard,\n constraintSolver,\n engineConfig,\n layoutState,\n registerChild,\n unregisterChild,\n ]\n );\n\n // Container styles based on layout mode\n const containerStyles = useMemo(() => {\n const baseStyles: CSSProperties = {\n position: 'relative',\n width: '100%',\n ...style,\n };\n\n // Add mode-specific styles\n switch (currentMode) {\n case 'grid':\n return {\n ...baseStyles,\n display: 'grid',\n gridTemplateColumns: `repeat(auto-fit, minmax(${layoutState?.gridConfig?.columns !== undefined && layoutState.gridConfig.columns !== null && layoutState.gridConfig.columns !== 0 ? `calc(100% / ${layoutState.gridConfig.columns} - ${layoutState.gridConfig.gap ?? 0}px)` : '200px'}, 1fr))`,\n gap: `${layoutState?.gridConfig?.gap ?? 16}px`,\n };\n case 'list':\n return {\n ...baseStyles,\n display: 'flex',\n flexDirection: 'column',\n gap: `${layoutState?.listConfig?.gap ?? 12}px`,\n };\n case 'compact':\n return {\n ...baseStyles,\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',\n gap: '8px',\n };\n case 'expanded':\n return {\n ...baseStyles,\n display: 'flex',\n flexDirection: 'column',\n gap: '24px',\n alignItems: 'center',\n };\n case 'dense':\n return {\n ...baseStyles,\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(60px, 1fr))',\n gap: '4px',\n };\n case 'sparse':\n return {\n ...baseStyles,\n display: 'flex',\n flexDirection: 'column',\n gap: '32px',\n padding: '48px',\n alignItems: 'center',\n };\n default:\n return baseStyles;\n }\n }, [currentMode, layoutState, style]);\n\n return (\n \n \n {children}\n \n \n );\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n\nexport { AdaptiveLayoutContext };\nexport type { AdaptiveLayoutContextValueInternal as AdaptiveLayoutContextValue };\n"],"names":["useAdaptiveLayoutContext","context","useContext","AdaptiveLayoutContext","createChildRegistry","elements","id","ref","result","AdaptiveLayout","children","initialMode","config","transitionConfig","clsConfig","constraints","onModeChange","onLayoutComputed","className","style","testId","containerRef","useRef","childRegistryRef","engineConfig","useMemo","DEFAULT_LAYOUT_ENGINE_CONFIG","morphConfig","DEFAULT_MORPH_TRANSITION_CONFIG","guardConfig","DEFAULT_CLS_GUARD_CONFIG","engine","createLayoutEngine","morphController","createMorphController","clsGuard","createCLSGuard","constraintSolver","createConstraintSolver","currentMode","setCurrentMode","useState","layoutState","setLayoutState","_analysis","setAnalysis","isComputing","setIsComputing","isTransitioning","setIsTransitioning","previousModeRef","useEffect","constraint","computeLayout","useCallback","container","contentAnalysis","selectedMode","rect","itemIds","first","last","timeoutId","cleanup","registerChild","unregisterChild","contextValue","containerStyles","baseStyles","jsx"],"mappings":"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"}