Editorial

The viewer newsrooms use for article figures: a near-black surface in both color schemes, a typography-forward caption and credit block under the media, and ghost controls. Keyboard-first, no zoom: a reading context, not an inspection one. Copy the Package files (index.ts, the .svelte parts and lightbox.css) into your design system, then wire triggers in your app. The Example tab shows an article excerpt whose inline figures open the viewer with their caption and credit.

The last fishermen of the northern coast

By Anna Beck · 8 min read

The village wakes before the light does. For sixty years the boats went out whatever the weather; now, on most mornings, only three engines cough to life along the whole quay.

The old harbor at dawn, boats resting in still water — The old harbor at dawn. Most of the fleet has not left the quay in a decade. Photograph: Anna Beck

Ask anyone here when it changed and they will not name a year. The harbor emptied the way harbors do — one retirement at a time, one son who moved to the city, one quota that made a small boat pointless.

Fishing nets stacked on the pier — Nets stacked on the pier — mended each winter, used less each spring. Photograph: Anna Beck

The near-empty fish market hall in the early morning — The market hall opens at five. By seven, the day’s catch is gone. Photograph: Jonas Ravn

import { Lightbox as Primitives } from '@ramka/svelte';
import Backdrop from './Backdrop.svelte';
import Caption from './Caption.svelte';
import Close from './Close.svelte';
import Content from './Content.svelte';
import Counter from './Counter.svelte';
import Gallery from './Gallery.svelte';
import Item from './Item.svelte';
import Media from './Media.svelte';
import Next from './Next.svelte';
import Portal from './Portal.svelte';
import Previous from './Previous.svelte';
import Slide from './Slide.svelte';
import Slides from './Slides.svelte';
import Trigger from './Trigger.svelte';

export type { LightboxItem } from './Gallery.svelte';

/** Editorial skin: newsroom figure viewer with styled parts and the composed Gallery. */
export const Lightbox = {
	Root: Primitives.Root,
	Trigger,
	Portal,
	Backdrop,
	Content,
	Close,
	Slides,
	Slide,
	Item,
	Media,
	Counter,
	Caption,
	Previous,
	Next,
	Gallery
};