For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/image-viewer.md.
A3S UI
  • English
  • next

      • Image Viewer

      Inspects image detail in a protected full-screen reading layer with zoom, rotate, reset, and an explicit close path.

      Live preview
      Image preview
      Official A3S OS mark

      Inspect without changing the source asset.

      Usage

      <dialog class="image-viewer" open data-state="open" style="position:relative;inline-size:100%;block-size:20rem;margin:0">
  <div data-image-viewer-toolbar><strong>Image preview</strong><div><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="zoom-out">Zoom out</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="zoom-in">Zoom in</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="close">Close</button></div></div><figure><img src="/logo.png" alt="Official A3S OS mark" /></figure><p data-image-viewer-caption>Inspect without changing the source asset.</p>
</dialog>

      Standalone controller

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/image-viewer";

const component = document.querySelector("dialog.image-viewer");
component.getState();

      The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

      Contract

      SurfaceValue
      Root selectordialog.image-viewer
      Native root<dialog>
      Statesopen, closed, loading, error
      Eventsa3s:image-viewer-before-open, a3s:image-viewer-change, a3s:image-viewer-open, cancel, close
      Methodsclose, getState, open, reset, rotate, zoom

      Product boundary

      The viewer never edits the source, persists transforms, or replaces gallery navigation. Authorization, download, and source trust remain with the host.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Focus enters the toolbar on open; Escape closes and returns to the opener. Zoom remains available through buttons without requiring a wheel or gesture.