@joewinke/jatui 0.33.0 → 0.34.0

package/dist/components/review/MediaZoomLightbox.svelte

@@ -0,0 +1,628 @@
+<script lang="ts">
+	/**
+	 * MediaZoomLightbox — one full-viewport viewer for images AND video
+	 * (jatui-c79nt; design: mardukos docs/review-ux/proposal.md, mos-lsmve).
+	 *
+	 * Ported from the MOS media-picker ZoomLightbox (mos-0wvol): zoom/pan that
+	 * applies to a PLAYING video (+ / − / 0, wheel, pinch, drag), frame-step
+	 * (, .), speed (< > or the chips), loop, scrub; ←/→ page the item's views,
+	 * 1–9 pick one. Images get the same zoom.
+	 *
+	 * Reviewing inside the zoom view (decision D5=A): the `footer` snippet
+	 * renders in the bottom bar, so a host drops VerdictControl + ReviewNote
+	 * there and the reviewer decides without closing. The lightbox imports
+	 * neither. Keys it doesn't own (a/x/r/u/n, [ ], ?) bubble out to the host.
+	 * `onNextItem` / `onPrevItem` let the host page to the next item while
+	 * open (j/k, ↓/↑, or ←/→ past the last/first view): the host swaps `items`
+	 * and the viewer resets to the new item's first (or, going back, last) view.
+	 *
+	 * Focus moves into the dialog on mount, Tab is trapped, Esc closes and focus
+	 * returns to whatever had it before. Mount it to open, unmount to close.
+	 * No autoplay under prefers-reduced-motion. Token-only theming.
+	 */
+	import { onMount, tick, untrack, type Snippet } from 'svelte';
+	import type { ShortcutRegistry } from '../../utils/keyboardShortcutRegistry';
+	import { isTypingTarget } from '../../utils/keyboardShortcutRegistry';
+	import {
+		DEFAULT_FPS,
+		DEFAULT_SPEEDS,
+		ZOOM_IDENTITY,
+		ZOOM_STEP,
+		clampIndex,
+		formatMediaTime,
+		mediaZoomHint,
+		panBy,
+		resolveMediaZoomKey,
+		stepFrameTime,
+		stepSpeed,
+		stepView,
+		wheelFactor,
+		zoomAt,
+		zoomTransform,
+		type MediaZoomFooterContext,
+		type MediaZoomState,
+		type MediaZoomView
+	} from './mediaZoom';
+
+	interface Props {
+		/** The views of the item being judged (one or more). */
+		items: MediaZoomView[];
+		/** Current view (bindable). Seeded from the host; clamped to `items`. */
+		index?: number;
+		/** Item name shown before the view label ("Grease trap card"). */
+		title?: string;
+		/** Extra header text after the view counter, e.g. "item 3 of 12". */
+		position?: string;
+		onClose: () => void;
+		/** Host pages to the next item. Omit (or pass undefined at the end) to disable. */
+		onNextItem?: () => void;
+		onPrevItem?: () => void;
+		/** Bottom-bar slot — VerdictControl + ReviewNote live here in review hosts. */
+		footer?: Snippet<[MediaZoomFooterContext]>;
+		/** Frame-step rate. Review loops are 30fps. */
+		fps?: number;
+		speeds?: readonly number[];
+		/** Autoplay video (always off under prefers-reduced-motion). */
+		autoplay?: boolean;
+		muted?: boolean;
+		/** Show the one-line key hint under the controls. */
+		showHint?: boolean;
+		zIndex?: string | number;
+		/** While open, push a modal context so page shortcuts don't fire behind it. */
+		shortcutRegistry?: ShortcutRegistry;
+		shortcutContext?: string;
+		class?: string;
+	}
+
+	let {
+		items,
+		index = $bindable(0),
+		title = '',
+		position = '',
+		onClose,
+		onNextItem,
+		onPrevItem,
+		footer,
+		fps = DEFAULT_FPS,
+		speeds = DEFAULT_SPEEDS,
+		autoplay = true,
+		muted = true,
+		showHint = true,
+		zIndex = 9040,
+		shortcutRegistry,
+		shortcutContext = 'media-zoom',
+		class: className = ''
+	}: Props = $props();
+
+	let zoom = $state<MediaZoomState>({ ...ZOOM_IDENTITY });
+	let paused = $state(true);
+	let looping = $state(true);
+	let speed = $state(1);
+	let time = $state(0);
+	let duration = $state(0);
+	let dialogEl = $state<HTMLElement | null>(null);
+	let stageEl = $state<HTMLElement | null>(null);
+	let videoEl = $state<HTMLVideoElement | null>(null);
+
+	const safeIndex = $derived(clampIndex(index, items.length));
+	const current = $derived(items[safeIndex]);
+	const isVideo = $derived(current?.kind === 'video');
+	const hasItems = $derived(!!onNextItem || !!onPrevItem);
+	const keyCtx = $derived({ isVideo, hasItems, viewCount: items.length });
+	const zoomPct = $derived(Math.round(zoom.scale * 100));
+	const hint = $derived(mediaZoomHint(keyCtx));
+
+	function resetView() {
+		zoom = { ...ZOOM_IDENTITY };
+		time = 0;
+		duration = 0;
+	}
+
+	// The host swapped `items` (paged to another item): land on the edge we
+	// came in from, with a fresh zoom.
+	let seenItems: MediaZoomView[] = untrack(() => items);
+	let enterAt: 'start' | 'end' | null = null;
+	$effect.pre(() => {
+		const next = items;
+		if (next === seenItems) return;
+		seenItems = next;
+		untrack(() => {
+			if (enterAt === 'end') index = Math.max(0, next.length - 1);
+			else if (enterAt === 'start') index = 0;
+			else index = clampIndex(index, next.length);
+			enterAt = null;
+			resetView();
+		});
+	});
+
+	function reducedMotion(): boolean {
+		try {
+			return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		} catch {
+			return false;
+		}
+	}
+	const shouldAutoplay = $derived(autoplay && !reducedMotion());
+
+	function stageSize(): { w: number; h: number } {
+		const r = stageEl?.getBoundingClientRect();
+		return { w: r?.width ?? 0, h: r?.height ?? 0 };
+	}
+
+	function zoomBy(factor: number, cx = 0, cy = 0) {
+		const { w, h } = stageSize();
+		zoom = zoomAt(zoom, factor, cx, cy, w, h);
+	}
+
+	function resetZoom() {
+		zoom = { ...ZOOM_IDENTITY };
+	}
+
+	function setView(i: number) {
+		if (i === safeIndex) return;
+		index = clampIndex(i, items.length);
+		resetView();
+	}
+
+	function pageItem(dir: 1 | -1) {
+		const cb = dir > 0 ? onNextItem : onPrevItem;
+		if (!cb) return;
+		enterAt = dir > 0 ? 'start' : 'end';
+		cb();
+	}
+
+	function go(delta: 1 | -1) {
+		const s = stepView(safeIndex, delta, items.length, {
+			hasNextItem: !!onNextItem,
+			hasPrevItem: !!onPrevItem
+		});
+		if (s.kind === 'view') setView(s.index);
+		else if (s.kind === 'item') pageItem(s.dir);
+	}
+
+	function togglePlay() {
+		const v = videoEl;
+		if (!v) return;
+		if (v.paused) v.play().catch(() => {});
+		else v.pause();
+	}
+
+	function step(frames: number) {
+		const v = videoEl;
+		if (!v) return;
+		v.pause();
+		v.currentTime = stepFrameTime(v.currentTime, frames, v.duration, fps);
+		time = v.currentTime;
+	}
+
+	function setSpeed(s: number) {
+		speed = s;
+		if (videoEl) videoEl.playbackRate = s;
+	}
+
+	function seek(sec: number) {
+		if (!videoEl) return;
+		videoEl.currentTime = sec;
+		time = sec;
+	}
+
+	const ARROW_OWNERS =
+		'input, select, textarea, [contenteditable], [role="radio"], [role="slider"], [role="tab"], [role="option"], [role="menuitem"], [role="radiogroup"] *, [role="listbox"] *';
+	const ACTIVATABLE = 'button, a[href], input, select, textarea, summary, [role="button"], [role="radio"], [role="checkbox"], [role="switch"], [role="tab"], [role="option"], [role="menuitem"]';
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.defaultPrevented || e.isComposing) return;
+		const k = e.key;
+		if (k === 'Tab') {
+			trapTab(e);
+			return;
+		}
+		if (e.metaKey || e.ctrlKey || e.altKey) return;
+		const target = e.target instanceof HTMLElement ? e.target : null;
+		const onDialog = target === dialogEl;
+		if (target && !onDialog && isTypingTarget(target)) {
+			// Typing in the footer's note: keys are text. Esc leaves the field
+			// (back to the viewer) instead of closing the whole lightbox.
+			if (k === 'Escape') {
+				e.preventDefault();
+				e.stopPropagation();
+				dialogEl?.focus();
+			}
+			return;
+		}
+		if (target && !onDialog) {
+			// A focused control keeps its own activation and arrow keys.
+			if ((k === ' ' || k === 'Enter') && target.matches(ACTIVATABLE)) return;
+			if (k.startsWith('Arrow') && target.closest(ARROW_OWNERS)) return;
+		}
+		const action = resolveMediaZoomKey(k, keyCtx);
+		if (!action) return; // not ours — bubbles to the host (verdict keys, ?, [ ])
+		e.preventDefault();
+		e.stopPropagation();
+		switch (action) {
+			case 'close':
+				onClose();
+				break;
+			case 'next-view':
+				go(1);
+				break;
+			case 'prev-view':
+				go(-1);
+				break;
+			case 'next-item':
+				pageItem(1);
+				break;
+			case 'prev-item':
+				pageItem(-1);
+				break;
+			case 'pick-view':
+				setView(Number(k) - 1);
+				break;
+			case 'zoom-in':
+				zoomBy(ZOOM_STEP);
+				break;
+			case 'zoom-out':
+				zoomBy(1 / ZOOM_STEP);
+				break;
+			case 'zoom-reset':
+				resetZoom();
+				break;
+			case 'play-pause':
+				togglePlay();
+				break;
+			case 'frame-back':
+				step(-1);
+				break;
+			case 'frame-forward':
+				step(1);
+				break;
+			case 'loop':
+				looping = !looping;
+				break;
+			case 'slower':
+				setSpeed(stepSpeed(speed, -1, speeds));
+				break;
+			case 'faster':
+				setSpeed(stepSpeed(speed, 1, speeds));
+				break;
+		}
+	}
+
+	function trapTab(e: KeyboardEvent) {
+		if (!dialogEl) return;
+		const f = [
+			...dialogEl.querySelectorAll<HTMLElement>(
+				'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+			)
+		].filter((el) => !el.hidden && !el.closest('[hidden], [inert]'));
+		if (f.length === 0) {
+			e.preventDefault();
+			dialogEl.focus();
+			return;
+		}
+		const first = f[0];
+		const last = f[f.length - 1];
+		const active = document.activeElement;
+		if (e.shiftKey && (active === first || active === dialogEl)) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && (active === last || !dialogEl.contains(active))) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
+
+	// --- pointer: drag to pan, pinch to zoom, click to play/pause -------------
+
+	const pointers = new Map<number, { x: number; y: number }>();
+	let moved = 0;
+	let pinchDist = 0;
+
+	function centred(clientX: number, clientY: number) {
+		const r = stageEl?.getBoundingClientRect();
+		if (!r) return { cx: 0, cy: 0 };
+		return { cx: clientX - (r.left + r.width / 2), cy: clientY - (r.top + r.height / 2) };
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+		moved = 0;
+		try {
+			stageEl?.setPointerCapture?.(e.pointerId);
+		} catch {
+			/* jsdom / detached */
+		}
+		if (pointers.size === 2) {
+			const [a, b] = [...pointers.values()];
+			pinchDist = Math.hypot(a.x - b.x, a.y - b.y);
+		}
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		const prev = pointers.get(e.pointerId);
+		if (!prev) return;
+		const next = { x: e.clientX, y: e.clientY };
+		pointers.set(e.pointerId, next);
+		const { w, h } = stageSize();
+		if (pointers.size >= 2) {
+			const [a, b] = [...pointers.values()];
+			const d = Math.hypot(a.x - b.x, a.y - b.y);
+			if (pinchDist > 0 && d > 0) {
+				const mid = centred((a.x + b.x) / 2, (a.y + b.y) / 2);
+				zoom = zoomAt(zoom, d / pinchDist, mid.cx, mid.cy, w, h);
+			}
+			pinchDist = d;
+			moved += 10;
+			return;
+		}
+		const dx = next.x - prev.x;
+		const dy = next.y - prev.y;
+		moved += Math.abs(dx) + Math.abs(dy);
+		zoom = panBy(zoom, dx, dy, w, h);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		const wasTap = pointers.size === 1 && moved < 4;
+		pointers.delete(e.pointerId);
+		if (pointers.size < 2) pinchDist = 0;
+		if (wasTap && isVideo && e.pointerType !== 'touch') togglePlay();
+	}
+
+	$effect(() => {
+		const el = stageEl;
+		if (!el) return;
+		// Non-passive: the wheel zooms the media instead of scrolling the page.
+		const onWheel = (e: WheelEvent) => {
+			e.preventDefault();
+			const { cx, cy } = centred(e.clientX, e.clientY);
+			zoomBy(wheelFactor(e.deltaY), cx, cy);
+		};
+		el.addEventListener('wheel', onWheel, { passive: false });
+		return () => el.removeEventListener('wheel', onWheel);
+	});
+
+	// Keep the element in step with the chosen speed/loop across view changes.
+	$effect(() => {
+		const v = videoEl;
+		if (!v) return;
+		v.playbackRate = speed;
+		v.loop = looping;
+	});
+
+	$effect(() => {
+		if (!shortcutRegistry) return;
+		return shortcutRegistry.pushContext(shortcutContext, {
+			modal: true,
+			label: untrack(() => title) || 'Media viewer'
+		});
+	});
+
+	onMount(() => {
+		const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		void tick().then(() => dialogEl?.focus());
+		const prevOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.body.style.overflow = prevOverflow;
+			if (previousFocus?.isConnected) previousFocus.focus();
+		};
+	});
+</script>
+
+<div
+	bind:this={dialogEl}
+	class="fixed inset-0 flex flex-col bg-base-300/95 text-base-content outline-none {className}"
+	style:z-index={zIndex}
+	role="dialog"
+	aria-modal="true"
+	aria-label="{title ? `${title}: ` : ''}{current?.label ?? 'media'}, full size"
+	tabindex="-1"
+	data-media-zoom-lightbox
+	onkeydown={onKeydown}
+>
+	<header class="flex items-center gap-2 px-3 py-2 sm:px-4">
+		<p class="min-w-0 flex-1 truncate text-sm" data-media-zoom-caption>
+			{#if title}<span class="font-semibold">{title}</span>{' · '}{/if}<span>{current?.label}</span
+			>{#if items.length > 1}<span class="tabular-nums text-base-content/70"
+					>{' · '}{safeIndex + 1} of {items.length}</span
+				>{/if}{#if position}<span class="text-base-content/70">{' · '}{position}</span>{/if}
+		</p>
+		{#if onPrevItem || onNextItem}
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm rounded-field"
+				aria-label="Previous item"
+				aria-keyshortcuts="K"
+				disabled={!onPrevItem}
+				onclick={() => pageItem(-1)}>↑</button
+			>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm rounded-field"
+				aria-label="Next item"
+				aria-keyshortcuts="J"
+				disabled={!onNextItem}
+				onclick={() => pageItem(1)}>↓</button
+			>
+		{/if}
+		{#if items.length > 1}
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm rounded-field"
+				aria-label="Previous view"
+				aria-keyshortcuts="ArrowLeft"
+				onclick={() => go(-1)}>←</button
+			>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm rounded-field"
+				aria-label="Next view"
+				aria-keyshortcuts="ArrowRight"
+				onclick={() => go(1)}>→</button
+			>
+		{/if}
+		<button
+			type="button"
+			class="btn btn-ghost btn-sm rounded-field"
+			aria-label="Close full size view"
+			aria-keyshortcuts="Escape"
+			onclick={onClose}>✕</button
+		>
+	</header>
+
+	<!-- The stage: absolute-inset media (Firefox h-full in flex chains is
+	     broken), transformed for zoom/pan. -->
+	<div
+		bind:this={stageEl}
+		data-zoom-stage
+		class="relative min-h-0 flex-1 touch-none select-none overflow-hidden {zoom.scale > 1
+			? 'cursor-grab active:cursor-grabbing'
+			: isVideo
+				? 'cursor-pointer'
+				: ''}"
+		role="presentation"
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+	>
+		{#key current}
+			<div
+				data-zoom-layer
+				class="absolute inset-0 grid place-items-center"
+				style:transform={zoomTransform(zoom)}
+			>
+				{#if current?.kind === 'video'}
+					<!-- svelte-ignore a11y_media_has_caption -->
+					<video
+						bind:this={videoEl}
+						src={current.src}
+						poster={current.poster}
+						{muted}
+						playsinline
+						loop={looping}
+						autoplay={shouldAutoplay}
+						preload="auto"
+						aria-label={current.label}
+						class="max-h-full max-w-full object-contain"
+						onplay={() => (paused = false)}
+						onpause={() => (paused = true)}
+						ontimeupdate={(e) => (time = e.currentTarget.currentTime)}
+						onloadedmetadata={(e) => {
+							duration = e.currentTarget.duration || 0;
+							e.currentTarget.playbackRate = speed;
+						}}
+					></video>
+				{:else if current}
+					<img
+						src={current.src}
+						alt={current.alt ?? current.label}
+						draggable="false"
+						class="max-h-full max-w-full object-contain"
+					/>
+				{/if}
+			</div>
+		{/key}
+	</div>
+
+	<div
+		class="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-base-content/10 bg-base-200 px-3 py-2 text-sm sm:px-4"
+		data-media-zoom-controls
+	>
+		{#if isVideo}
+			<div class="flex items-center gap-1">
+				<button
+					type="button"
+					class="btn btn-sm rounded-field"
+					aria-label={paused ? 'Play' : 'Pause'}
+					aria-keyshortcuts="Space"
+					onclick={togglePlay}>{paused ? '▶' : '❚❚'}</button
+				>
+				<button
+					type="button"
+					class="btn btn-ghost btn-sm rounded-field tabular-nums"
+					aria-label="Back one frame"
+					aria-keyshortcuts=","
+					onclick={() => step(-1)}>‹ frame</button
+				>
+				<button
+					type="button"
+					class="btn btn-ghost btn-sm rounded-field tabular-nums"
+					aria-label="Forward one frame"
+					aria-keyshortcuts="."
+					onclick={() => step(1)}>frame ›</button
+				>
+				<button
+					type="button"
+					class="btn btn-ghost btn-sm rounded-field"
+					aria-pressed={looping}
+					aria-keyshortcuts="L"
+					onclick={() => (looping = !looping)}>{looping ? 'Loop on' : 'Loop off'}</button
+				>
+			</div>
+			<label class="flex min-w-48 flex-1 items-center gap-2">
+				<span class="sr-only">Scrub</span>
+				<input
+					type="range"
+					class="range range-xs range-primary flex-1"
+					min="0"
+					max={duration || 0}
+					step="any"
+					value={time}
+					aria-valuetext="{formatMediaTime(time)} of {formatMediaTime(duration)}"
+					oninput={(e) => seek(Number(e.currentTarget.value))}
+				/>
+				<span class="text-xs tabular-nums text-base-content/70"
+					>{formatMediaTime(time)} / {formatMediaTime(duration)}</span
+				>
+			</label>
+			<div class="flex items-center gap-1" role="group" aria-label="Speed">
+				{#each speeds as s (s)}
+					<button
+						type="button"
+						class="btn btn-xs rounded-field {speed === s ? 'btn-primary' : 'btn-ghost'}"
+						aria-pressed={speed === s}
+						onclick={() => setSpeed(s)}>{s}×</button
+					>
+				{/each}
+			</div>
+		{/if}
+		<div class="ml-auto flex items-center gap-1" role="group" aria-label="Zoom">
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm rounded-field"
+				aria-label="Zoom out"
+				aria-keyshortcuts="-"
+				disabled={zoom.scale <= 1}
+				onclick={() => zoomBy(1 / ZOOM_STEP)}>−</button
+			>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm min-w-14 rounded-field tabular-nums"
+				aria-label="Reset zoom ({zoomPct}%)"
+				aria-keyshortcuts="0"
+				data-zoom-level
+				onclick={resetZoom}>{zoomPct}%</button
+			>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm rounded-field"
+				aria-label="Zoom in"
+				aria-keyshortcuts="+"
+				onclick={() => zoomBy(ZOOM_STEP)}>+</button
+			>
+		</div>
+		{#if showHint}
+			<p class="w-full text-2xs text-base-content/60" data-media-zoom-hint>{hint}</p>
+		{/if}
+	</div>
+
+	{#if footer}
+		<footer
+			class="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-base-content/10 bg-base-100 px-3 py-2 sm:px-4"
+			data-media-zoom-footer
+		>
+			{@render footer({ view: current, index: safeIndex, isVideo })}
+		</footer>
+	{/if}
+</div>

package/dist/components/review/MediaZoomLightbox.svelte.d.ts

@@ -0,0 +1,56 @@
+/**
+     * MediaZoomLightbox — one full-viewport viewer for images AND video
+     * (jatui-c79nt; design: mardukos docs/review-ux/proposal.md, mos-lsmve).
+     *
+     * Ported from the MOS media-picker ZoomLightbox (mos-0wvol): zoom/pan that
+     * applies to a PLAYING video (+ / − / 0, wheel, pinch, drag), frame-step
+     * (, .), speed (< > or the chips), loop, scrub; ←/→ page the item's views,
+     * 1–9 pick one. Images get the same zoom.
+     *
+     * Reviewing inside the zoom view (decision D5=A): the `footer` snippet
+     * renders in the bottom bar, so a host drops VerdictControl + ReviewNote
+     * there and the reviewer decides without closing. The lightbox imports
+     * neither. Keys it doesn't own (a/x/r/u/n, [ ], ?) bubble out to the host.
+     * `onNextItem` / `onPrevItem` let the host page to the next item while
+     * open (j/k, ↓/↑, or ←/→ past the last/first view): the host swaps `items`
+     * and the viewer resets to the new item's first (or, going back, last) view.
+     *
+     * Focus moves into the dialog on mount, Tab is trapped, Esc closes and focus
+     * returns to whatever had it before. Mount it to open, unmount to close.
+     * No autoplay under prefers-reduced-motion. Token-only theming.
+     */
+import { type Snippet } from 'svelte';
+import type { ShortcutRegistry } from '../../utils/keyboardShortcutRegistry';
+import { type MediaZoomFooterContext, type MediaZoomView } from './mediaZoom';
+interface Props {
+    /** The views of the item being judged (one or more). */
+    items: MediaZoomView[];
+    /** Current view (bindable). Seeded from the host; clamped to `items`. */
+    index?: number;
+    /** Item name shown before the view label ("Grease trap card"). */
+    title?: string;
+    /** Extra header text after the view counter, e.g. "item 3 of 12". */
+    position?: string;
+    onClose: () => void;
+    /** Host pages to the next item. Omit (or pass undefined at the end) to disable. */
+    onNextItem?: () => void;
+    onPrevItem?: () => void;
+    /** Bottom-bar slot — VerdictControl + ReviewNote live here in review hosts. */
+    footer?: Snippet<[MediaZoomFooterContext]>;
+    /** Frame-step rate. Review loops are 30fps. */
+    fps?: number;
+    speeds?: readonly number[];
+    /** Autoplay video (always off under prefers-reduced-motion). */
+    autoplay?: boolean;
+    muted?: boolean;
+    /** Show the one-line key hint under the controls. */
+    showHint?: boolean;
+    zIndex?: string | number;
+    /** While open, push a modal context so page shortcuts don't fire behind it. */
+    shortcutRegistry?: ShortcutRegistry;
+    shortcutContext?: string;
+    class?: string;
+}
+declare const MediaZoomLightbox: import("svelte").Component<Props, {}, "index">;
+type MediaZoomLightbox = ReturnType<typeof MediaZoomLightbox>;
+export default MediaZoomLightbox;