URL-synced state
Every photo in this masonry wall is its own URL, driven by a SvelteKit optional parameter: the
page lives at an [[id]] route, and the lightbox is controlled via bind:open / bind:index on
Lightbox.Root. Tapping a tile opens the viewer and pushes /examples/lightbox/url-synced-state/5
with SvelteKit shallow routing (goto with shallow: true), swiping rewrites that URL in place
(replace: true), and the browser Back button closes the viewer. Loading a photo URL cold serves
the viewer already open, straight from the server HTML with per-photo metadata: deep-link visits
render the Portal in place (container={null}) instead of moving it into document.body, and
Slides ssrSlideShift paints the right photo before hydration. Because the URL writes happen in
the gesture callbacks, trigger taps keep the view-transition morph.
See also: State & lifecycle docs