import { CLSGuardConfig, CLSMeasurement, Dimensions, LayoutReservation, UseCLSGuardReturn } from '../types';
/**
 * Options for useCLSGuard hook.
 */
export interface UseCLSGuardOptions {
    /** CLS guard configuration */
    config?: Partial<CLSGuardConfig>;
    /** Callback when CLS threshold is exceeded */
    onThresholdExceeded?: (score: number) => void;
    /** Callback when CLS is measured */
    onMeasurement?: (measurement: CLSMeasurement) => void;
}
/**
 * Hook for preventing and monitoring Cumulative Layout Shift.
 *
 * @param options - Hook configuration options
 * @returns CLS guard controls and metrics
 *
 * @example
 * ```tsx
 * function ImageGallery({ images }: { images: Image[] }) {
 *   const {
 *     clsScore,
 *     thresholdExceeded,
 *     reserve,
 *     release,
 *     reservations
 *   } = useCLSGuard({
 *     config: { maxCLS: 0.05 },
 *     onThresholdExceeded: (score) => {
 *       console.warn('CLS threshold exceeded:', score);
 *     }
 *   });
 *
 *   // Reserve space for images before they load
 *   useEffect(() => {
 *     for (const image of images) {
 *       reserve(image.id, { width: image.width, height: image.height });
 *     }
 *
 *     return () => {
 *       for (const image of images) {
 *         release(image.id);
 *       }
 *     };
 *   }, [images, reserve, release]);
 *
 *   return (
 *     <div>
 *       {thresholdExceeded && (
 *         <Warning>Layout shift detected! Score: {clsScore.toFixed(3)}</Warning>
 *       )}
 *       {images.map(image => (
 *         <img
 *           key={image.id}
 *           src={image.src}
 *           width={image.width}
 *           height={image.height}
 *           onLoad={() => release(image.id)}
 *         />
 *       ))}
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useCLSGuard(options?: UseCLSGuardOptions): UseCLSGuardReturn;
/**
 * Hook for reserving layout space for an image.
 *
 * @param id - Unique identifier for the image
 * @param src - Image source URL
 * @param dimensions - Known dimensions (if available)
 * @returns Loading state and reservation info
 *
 * @example
 * ```tsx
 * function ReservedImage({ id, src, width, height }: ImageProps) {
 *   const { isLoading, reservation } = useImageReservation(id, src, { width, height });
 *
 *   return (
 *     <div style={{ width, height }}>
 *       {isLoading && <Skeleton />}
 *       <img
 *         src={src}
 *         width={width}
 *         height={height}
 *         style={{ opacity: isLoading ? 0 : 1 }}
 *       />
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useImageReservation(id: string, src: string, dimensions?: Dimensions): {
    isLoading: boolean;
    reservation: LayoutReservation | null;
    intrinsicDimensions: Dimensions | null;
};
/**
 * Hook for monitoring CLS and triggering optimization actions.
 *
 * @param threshold - CLS threshold to monitor
 * @param onExceeded - Callback when threshold is exceeded
 *
 * @example
 * ```tsx
 * function PerformanceMonitor() {
 *   useCLSMonitor(0.1, () => {
 *     // Disable animations to prevent further shifts
 *     document.body.classList.add('reduce-motion');
 *   });
 *
 *   return null;
 * }
 * ```
 */
export declare function useCLSMonitor(threshold: number, onExceeded: (score: number) => void): void;
export type { UseCLSGuardReturn };