import { default as React, RefObject } from 'react';
import { DOMContext, UseDOMContextReturn, LayoutAncestor } from '../types';
import { getDOMContextTracker } from '../dom-context';
/**
 * Hook to access the full DOM context.
 *
 * @remarks
 * This is the primary hook for accessing DOM context information.
 * It provides the complete context object along with utilities
 * for working with the context.
 *
 * @returns DOM context, loading state, ref, and refresh function
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { context, isLoading, ref, refresh } = useDOMContext();
 *
 *   if (isLoading) {
 *     return <Loading />;
 *   }
 *
 *   return (
 *     <div ref={ref}>
 *       Viewport: {context.viewport.width}x{context.viewport.height}
 *       <button onClick={refresh}>Refresh</button>
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useDOMContext(): UseDOMContextReturn;
/**
 * Hook to access DOM context for a specific element.
 *
 * @remarks
 * This hook is useful when you need to track a specific element
 * that may be different from the context provider's element.
 *
 * @param elementRef - Ref to the element to track
 * @returns DOM context for the element
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const myRef = useRef<HTMLDivElement>(null);
 *   const { ancestors, bounds } = useDOMContextWithElement(myRef);
 *
 *   return (
 *     <div ref={myRef}>
 *       {ancestors.length > 0 && (
 *         <span>Parent layout: {ancestors[0].layoutType}</span>
 *       )}
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useDOMContextWithElement(elementRef: RefObject<HTMLElement>): {
    ancestors: readonly LayoutAncestor[];
    bounds: ReturnType<typeof getDOMContextTracker.prototype.getBounds> | null;
    layoutType: ReturnType<typeof getDOMContextTracker.prototype.getLayoutType> | null;
    refresh: () => void;
};
/**
 * Selector function type for DOM context.
 */
export type DOMContextSelector<T> = (context: DOMContext) => T;
/**
 * Hook to select specific parts of the DOM context.
 *
 * @remarks
 * This hook optimizes re-renders by only triggering updates
 * when the selected value changes.
 *
 * @param selector - Function to select part of context
 * @returns Selected value
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   // Only re-renders when viewport width changes
 *   const width = useContextSelector((ctx) => ctx.viewport.width);
 *
 *   return <div>Width: {width}</div>;
 * }
 * ```
 */
export declare function useContextSelector<T>(selector: DOMContextSelector<T>): T;
/**
 * Hook to run effects when specific context values change.
 *
 * @remarks
 * This is similar to useEffect but with a selector for
 * DOM context changes.
 *
 * @param selector - Function to select trigger value
 * @param effect - Effect function to run
 * @param deps - Additional dependencies
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   useContextEffect(
 *     (ctx) => ctx.viewport.orientation,
 *     (orientation) => {
 *       console.log('Orientation changed:', orientation);
 *     }
 *   );
 *
 *   return <div>...</div>;
 * }
 * ```
 */
export declare function useContextEffect<T>(selector: DOMContextSelector<T>, effect: (value: T) => void | (() => void), deps?: React.DependencyList): void;