export type ScrolledIntoViewCallback = () => void;
export interface ScrolledIntoViewOptions {
    /**
     * Margin around the viewport in CSS syntax (e.g. `"200px"` or `"10%"`).
     * Positive values trigger the callback before the element is fully visible.
     * Default: `"0px"`
     */
    rootMargin?: string;
    /**
     * Intersection ratio threshold (0–1) at which the callback fires.
     * Default: `0`
     */
    threshold?: number;
}
/** @deprecated Use `ScrolledIntoViewCallback` instead. */
export type LazyLoadCallback = ScrolledIntoViewCallback;
/** @deprecated Use `ScrolledIntoViewOptions` instead. */
export type LazyLoadOptions = ScrolledIntoViewOptions;
/**
 * Fires `callback` each time the element transitions from hidden to visible
 * in the viewport (a genuine invisible → visible crossing).
 *
 * - Does **not** fire on mount if the element is already in view.
 * - Fires **again** every time the element re-enters the viewport after
 *   having left it — useful for infinite scroll, repeat animations, etc.
 * - The `IntersectionObserver` is torn down automatically when the element
 *   disconnects from the DOM — no manual cleanup needed.
 * - `options` are fixed at creation time and cannot change between renders;
 *   only the `callback` reference is updated on re-renders.
 *
 * @param callback - Called whenever the element scrolls into view.
 * @param options  - Optional `IntersectionObserver` tuning.
 *
 * @example
 * ```ts
 * // Infinite scroll — load next page when sentinel enters the viewport
 * html`<div ${onScrolledIntoView(() => loadNextPage())}></div>`
 *
 * // Animate on enter
 * html`<section ${onScrolledIntoView(() => el.classList.add("fade-in"))}></section>`
 *
 * // Lazy-load a heavy image
 * html`<img ${onScrolledIntoView(() => { img.src = img.dataset.src!; })}
 *      data-src="/heavy.jpg" />`
 *
 * // Prefetch 300px before the element becomes visible
 * html`<div ${onScrolledIntoView(() => prefetch(), { rootMargin: "300px" })}></div>`
 *
 * // Fire only when at least 50% of the element is visible
 * html`<div ${onScrolledIntoView(() => trackImpression(), { threshold: 0.5 })}></div>`
 * ```
 */
export declare function onScrolledIntoView(callback: ScrolledIntoViewCallback, options?: ScrolledIntoViewOptions): import("lit-html/directive").DirectiveResult<import("lit-html/directive").DirectiveClass>;
/**
 * @deprecated Use `onScrolledIntoView()` instead.
 *
 * ```ts
 * // Before
 * html`<div ${lazyLoad(() => loadMore())}></div>`
 *
 * // After
 * html`<div ${onScrolledIntoView(() => loadMore())}></div>`
 * ```
 */
export declare function lazyLoad(callback: LazyLoadCallback, options?: LazyLoadOptions): import("lit-html/directive").DirectiveResult<import("lit-html/directive").DirectiveClass>;
//# sourceMappingURL=lazyLoadDirective.d.ts.map