<!-- source-hash: 38dbaa1fd6bace90952c3ff98f54f23a -->
A React hook that extracts the dominant edge color from an image URL for use as a background fill behind letterboxed (`object-contain`) images.

## Key Components

### `extractEdgeColor(img: HTMLImageElement): string`
Internal utility that performs canvas-based pixel analysis:
- Scales the image down to a 100×100 thumbnail for performance
- Samples a 15% border band along all four edges
- Quantizes RGB values into 32-step buckets to group similar colors
- Returns the averaged RGB of the most common bucket as a CSS `rgb(...)` string

### `useImageEdgeColor(imageUrl, fallback?): string`
Exported React hook that wraps `extractEdgeColor` with async image loading:
- Sets `crossOrigin="anonymous"` for canvas pixel access on CDN-hosted images
- Cancels stale updates via cleanup flag on unmount or URL change
- Falls back to the provided color (default `#000000`) on load error or missing URL

## Usage Example

```typescript
import { useImageEdgeColor } from './use-image-edge-color';

function ProductImage({ src }: { src: string }) {
  const bgColor = useImageEdgeColor(src, '#1a1a1a');

  return (
    <div style={{ backgroundColor: bgColor, padding: '1rem' }}>
      <img
        src={src}
        style={{ objectFit: 'contain', width: '100%', height: '300px' }}
        alt="Product"
      />
    </div>
  );
}
```

## Notes

- **CORS requirement:** The image server must return CORS headers. Supabase, Cloudflare Images, and the Flamingo image proxy all support this. If CORS fails, `onerror` fires and the fallback color is used.
- **Why bucketing vs. averaging:** Simple pixel averaging produces muddy mid-tones when edges contain distinct color regions (e.g., blue sky above tan sand). Bucketing picks the *dominant* region instead.