Framework-agnostic core

The core owns gesture recognition, zoom / pan physics and transform rendering; an adapter owns the DOM structure. The Svelte adapter is one such adapter — you can drive the core directly, or build an adapter for any other framework on top of it.

import { createViewer } from 'picola';

const viewer = createViewer({ slides, startIndex: 0 });
viewer.attach({ viewport, track, backdrop });
viewer.on('change', ({ index }) => console.log(index));
viewer.open(0);

The Viewer instance

createViewer(options) returns a Viewer. You provide the DOM structure through attach(), and the core takes over interaction and rendering.

Member	Description
`attach({ viewport, track, backdrop })`	Connect the core to your DOM elements.
`open(index)`	Open the viewer at a slide.
`close()`	Start the close transition.
`next()` / `prev()`	Step to the adjacent slide.
`goTo(index)`	Navigate to a slide.
`updateSlide(index, patch)`	Patch a slide in place (e.g. swap in a full-resolution source).
`setSlides(slides, index?)`	Replace the slide set, preserving zoom and clamping the index.
`zoomTo(scale, center?)`	Programmatically zoom.
`toggleUi(visible?)`	Show / hide the chrome.
`setKeyboardEnabled(enabled)`	Suspend / resume key handling.
`on(name, listener)`	Subscribe to an event; returns an unsubscribe function.
`destroy()`	Tear the viewer down and release resources.

Plus the status, index, count and slides getters.

Events

Subscribe with viewer.on(name, listener). In addition to the callback-prop events exposed by the Svelte adapter, the core emits:

Event	Payload	Fires when
`opened`	`{ index }`	The opening transition finishes.
`zoom`	`{ index, scale, fitScale }`	The active slide’s zoom level changes.
`dismiss`	`{ progress, offsetY }`	Drag-to-dismiss progress updates.
`ui`	`{ visible }`	Chrome visibility toggles (tap action).
`slideupdate`	`{ index, slide }`	A slide was patched via `updateSlide`.
`slideschange`	`{ slides, index }`	The slide set was replaced via `setSlides`.
`destroy`	—	The viewer was torn down.

See the events exposed as callback props in the API reference.

Low-level primitives

The core also exports the primitives the Svelte adapter is built on, for building your own adapter: attachGestures, PanZoom, decodeImage, trapFocus, bindHistory, fitScale, panBounds, rubberBand and zoomAroundPoint, plus the full option and event types. See src/svelte in the repository for a reference adapter.