@stacksjs/stx/dist/media/image/placeholder.d.ts

A performant UI Framework. Powered by Bun.

import type { PlaceholderOptions, PlaceholderResult } from '../types';
/**
 * Generate a placeholder for an image using the specified strategy
 *
 * @param src - Image source path
 * @param options - Placeholder options
 * @returns Placeholder result with data URL
 *
 * @example
 * ```typescript
 * const placeholder = await generatePlaceholder('/images/hero.jpg', {
 *   strategy: 'thumbhash',
 * })
 * console.log(placeholder.dataURL) // data:image/png;base64,...
 * ```
 */
export declare function generatePlaceholder(src: string, options?: Partial<PlaceholderOptions>): Promise<PlaceholderResult>;
/**
 * Generate a thumbhash placeholder specifically
 *
 * @param src - Image source path
 * @returns Thumbhash data URL
 */
export declare function generateThumbhashPlaceholder(src: string): Promise<string>;
/**
 * Decode a thumbhash string to a data URL (client-side)
 *
 * This is a minimal thumbhash decoder for client-side use
 * Based on https://github.com/evanw/thumbhash
 */
export declare function decodeThumbhash(hash: Uint8Array): string;
/**
 * Generate a low-quality image placeholder with blur
 *
 * @param src - Image source path
 * @param width - Placeholder width (default: 20)
 * @param quality - JPEG quality (default: 50)
 */
export declare function generateLQIP(src: string, width?: number, quality?: number): Promise<PlaceholderResult>;
/**
 * Extract dominant color from an image
 *
 * @param src - Image source path
 * @returns Hex color string
 */
export declare function extractDominantColor(src: string): Promise<string>;
/**
 * Generate a solid color placeholder
 */
export declare function generateColorPlaceholder(color: string, width?: number, height?: number): string;
/**
 * Generate CSS for placeholder with specific options
 */
export declare function generatePlaceholderCSS(id: string, placeholder: PlaceholderResult, options?: Partial<PlaceholderOptions>): string;
/**
 * Generate inline style for placeholder background
 */
export declare function generatePlaceholderStyle(placeholder: PlaceholderResult): string;
/**
 * Get placeholder from cache or generate new
 */
export declare function getCachedPlaceholder(src: string, options?: Partial<PlaceholderOptions>): Promise<PlaceholderResult>;
/**
 * Clear the placeholder cache
 */
export declare function clearPlaceholderCache(): void;
/**
 * Get cache statistics
 */
export declare function getPlaceholderCacheStats(): { size: number; keys: string[] };
/**
 * Default placeholder options
 */
export declare const DEFAULT_PLACEHOLDER_OPTIONS: PlaceholderOptions;
/**
 * CSS for blur-up transition
 */
export declare const BLUR_UP_CSS: unknown;