# `Fresco`
[🔗](https://github.com/alexdont/fresco/blob/v0.1.0/lib/fresco.ex#L1)

Fresco is a polished pan-zoom image viewer for Phoenix apps.

The metaphor: a *fresco* is the wet-plaster surface you paint on. Fresco
the library is the surface every layered image experience sits on top of —
the deep-zoom tile pyramid (Tessera), the annotation tools (Etcher,
forthcoming), the future ML / measurement / OCR overlays — all of them
attach to the same Fresco viewer instance.

Used on its own, Fresco is a complete viewer: pan, zoom (wheel, pinch,
buttons, keyboard), fit-to-view, fullscreen, Heroicon nav overlay,
viewport clamped so the image can't be panned off-screen, smooth
animations tuned for "snappy but not jarring".

Used as a host for extensions, Fresco exposes a coordinate adapter,
event pub/sub, and a small extension registry so peer libraries can
attach by `id` without needing to fork the viewer.

## Quick start

    <Fresco.viewer
      id="photo"
      src={~p"/uploads/photo.jpg"}
      class="w-full h-[80vh] rounded"
    />

## Extending

Extensions look up the live viewer handle by DOM id:

    // In another LiveView hook on the same page:
    window.Fresco.onViewerReady("photo", function(handle) {
      handle.on("zoom", function(e) { /* … */ });
      handle.swapSourcePreservingBounds("/path/to/different-source");
    });

Source providers transform a URL into an OpenSeadragon tile source:

    window.Fresco.registerSourceProvider(
      function(url) { return url.endsWith(".dzi"); },
      function(url) { return url; }   // OSD accepts a DZI URL directly
    );

See `Fresco.Viewer` for the component reference.

# `viewer`

---

*Consult [api-reference.md](api-reference.md) for complete listing*