@joewinke/jatui 0.33.0 → 0.34.1

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

@@ -0,0 +1,32 @@
+/**
+     * ReviewProgress (jatui-xmrod) — one horizontal tone bar plus a sentence:
+     * "12 of 19 decided · 9 pass · 2 fail · 1 blocked · 4 to retest".
+     *
+     * Generic over verdicts: pass the block's `{id, label, tone}` list and a
+     * count per verdict id. The same component serves one block AND the page
+     * Finish bar — for the page, sum the blocks with `mergeReviewCounts()` and
+     * pass the summed item total. Purely presentational; the host counts.
+     */
+import { type ReviewCounts, type ReviewVerdictDef } from './reviewSummary';
+interface Props {
+    verdicts: ReviewVerdictDef[];
+    /** Decided items per verdict id. */
+    counts: ReviewCounts;
+    /** Items under review (decided + undecided). */
+    total: number;
+    /** Items in an open retest round — appended as "N to retest". */
+    retest?: number;
+    /** Word after "N of M" (default "decided"). */
+    decidedWord?: string;
+    /** Accessible name of the bar. */
+    label?: string;
+    size?: 'xs' | 'sm' | 'md';
+    /** Hide the sentence (bar only; the sentence stays the bar's aria-valuetext). */
+    hideSentence?: boolean;
+    /** Announce sentence changes politely to screen readers. Default true. */
+    live?: boolean;
+    class?: string;
+}
+declare const ReviewProgress: import("svelte").Component<Props, {}, "">;
+type ReviewProgress = ReturnType<typeof ReviewProgress>;
+export default ReviewProgress;

package/dist/components/review/ReviewShortcuts.svelte

@@ -0,0 +1,80 @@
+<!--
+  ReviewShortcuts — the review surfaces' keyboard help (mos-z8vgx; replaces
+  MOS ShortcutsModal and the checklist's footer hint).
+
+  Renders FROM the same key table reviewKeys() dispatches from: pass the
+  SAME config object you give `use:reviewKeys` and the rows are
+  `reviewKeyRows(config)` — only the actions that surface wired, verdict
+  rows from its own `verdicts`. The help can't drift from the behaviour.
+  `extraRows` appends surface-specific rows the table doesn't own.
+
+  jatui Modal owns focus-in, the focus trap, Escape and focus return; while
+  open its trapKeys stops the page's reviewKeys from seeing j/k/a/x….
+-->
+<script lang="ts">
+	import Modal from '../Modal.svelte';
+	import type { ShortcutRegistry } from '../../utils/keyboardShortcutRegistry';
+	import { reviewKeyRows, type ReviewKeyRow, type ReviewKeysOptions } from '../../actions/reviewKeys';
+
+	interface Props {
+		open?: boolean;
+		/** The reviewKeys() config of the surface (only its handler presence + verdicts are read). */
+		config: ReviewKeysOptions;
+		extraRows?: ReviewKeyRow[];
+		title?: string;
+		footnote?: string;
+		shortcutRegistry?: ShortcutRegistry;
+		onclose?: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		config,
+		extraRows = [],
+		title = 'Keyboard shortcuts',
+		footnote,
+		shortcutRegistry,
+		onclose
+	}: Props = $props();
+
+	const rows = $derived([...reviewKeyRows(config), ...extraRows]);
+
+	const sections = $derived.by(() => {
+		const out: { group: string; rows: ReviewKeyRow[] }[] = [];
+		for (const row of rows) {
+			let s = out.find((x) => x.group === row.group);
+			if (!s) out.push((s = { group: row.group, rows: [] }));
+			s.rows.push(row);
+		}
+		return out;
+	});
+</script>
+
+<Modal bind:open {title} size="sm" {shortcutRegistry} {onclose}>
+	<div class="flex flex-col gap-4" data-review-shortcuts>
+		{#each sections as section (section.group)}
+			<section>
+				<h3 class="mb-1 text-xs font-semibold tracking-wide text-base-content/60 uppercase">{section.group}</h3>
+				<table class="w-full text-sm">
+					<tbody>
+						{#each section.rows as row (row.keys.join(' ') + row.description)}
+							<tr>
+								<td class="w-24 py-1 align-top whitespace-nowrap">
+									{#each row.keys as k, i (k)}
+										{#if i > 0}<span class="mx-0.5 text-base-content/50" aria-hidden="true">/</span>{/if}<kbd
+											class="kbd kbd-sm">{k}</kbd
+										>
+									{/each}
+								</td>
+								<td class="py-1 text-base-content/80">{row.description}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/each}
+		{#if footnote}
+			<p class="text-xs text-base-content/70">{footnote}</p>
+		{/if}
+	</div>
+</Modal>

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

@@ -0,0 +1,15 @@
+import type { ShortcutRegistry } from '../../utils/keyboardShortcutRegistry';
+import { type ReviewKeyRow, type ReviewKeysOptions } from '../../actions/reviewKeys';
+interface Props {
+    open?: boolean;
+    /** The reviewKeys() config of the surface (only its handler presence + verdicts are read). */
+    config: ReviewKeysOptions;
+    extraRows?: ReviewKeyRow[];
+    title?: string;
+    footnote?: string;
+    shortcutRegistry?: ShortcutRegistry;
+    onclose?: () => void;
+}
+declare const ReviewShortcuts: import("svelte").Component<Props, {}, "open">;
+type ReviewShortcuts = ReturnType<typeof ReviewShortcuts>;
+export default ReviewShortcuts;

package/dist/components/review/RoundHistory.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	/**
+	 * RoundHistory (jatui-xmrod) — the locked, read-only rounds of one review
+	 * item: "▸ Round 2 · Oct 10 · Fail · "drain cleaning still doubling up"".
+	 *
+	 * Collapsed by default behind a "▸ N earlier" toggle; open, lines are newest
+	 * first. Each line is one button: pressing it selects that round (and shows
+	 * its full note); pressing the selected line again deselects it. `selected`
+	 * is bindable so the list pairs with a version switcher — set it from the
+	 * switcher and the list opens and expands that line.
+	 *
+	 * The current round is NOT part of `rounds` — pass history only.
+	 */
+	import {
+		formatRoundDate,
+		orderRounds,
+		TONE_BG,
+		TONE_TEXT,
+		type ReviewRound,
+		type ReviewVerdictDef
+	} from './reviewSummary';
+
+	interface Props {
+		/** Locked earlier rounds (any order — see orderRounds). */
+		rounds: ReviewRound[];
+		/** Verdict definitions, to label and colour each line's verdict id. */
+		verdicts?: ReviewVerdictDef[];
+		/** Selected round key (bindable). Pairs with a version switcher. */
+		selected?: string | null;
+		/** Whether the list is expanded (bindable). Default false (collapsed). */
+		open?: boolean;
+		/** Called when a line is (de)selected — null when deselected. */
+		onSelect?: (round: string | null) => void;
+		/** Label for a line without an explicit `label`. Default `Round ${n}`. */
+		roundLabel?: (entry: ReviewRound, n: number) => string;
+		/** Toggle text. Default "N earlier". */
+		toggleLabel?: (count: number) => string;
+		/** Text for a round that closed with no verdict. */
+		undecidedLabel?: string;
+		class?: string;
+	}
+
+	let {
+		rounds,
+		verdicts = [],
+		selected = $bindable(null),
+		open = $bindable(false),
+		onSelect,
+		roundLabel = (_e: ReviewRound, n: number) => `Round ${n}`,
+		toggleLabel = (count: number) => `${count} earlier`,
+		undecidedLabel = 'Undecided',
+		class: className = ''
+	}: Props = $props();
+
+	const ordered = $derived(orderRounds(rounds));
+	const verdictById = $derived(new Map(verdicts.map((v) => [v.id, v])));
+	const uid = $props.id();
+	const listId = `round-history-${uid}`;
+
+	// A selection made from outside (the version switcher) opens the list.
+	$effect(() => {
+		if (selected != null && ordered.some((r) => r.entry.round === selected)) open = true;
+	});
+
+	function pick(round: string) {
+		selected = selected === round ? null : round;
+		onSelect?.(selected);
+	}
+</script>
+
+{#if ordered.length}
+	<div class="round-history min-w-0 text-xs {className}">
+		<button
+			type="button"
+			class="round-history-toggle text-base-content/70 hover:text-base-content inline-flex items-center gap-1 font-medium"
+			aria-expanded={open}
+			aria-controls={listId}
+			onclick={() => (open = !open)}
+		>
+			<svg
+				class="round-history-chevron size-3 shrink-0"
+				class:rotate-90={open}
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				aria-hidden="true"
+			>
+				<path d="M6 3.5 10.5 8 6 12.5z" />
+			</svg>
+			{toggleLabel(ordered.length)}
+		</button>
+
+		{#if open}
+			<ol id={listId} class="mt-1 flex flex-col gap-0.5" aria-label="Earlier rounds, newest first">
+				{#each ordered as { entry, n } (entry.round)}
+					{@const v = entry.verdict ? verdictById.get(entry.verdict) : undefined}
+					{@const isSel = selected === entry.round}
+					{@const date = formatRoundDate(entry.at)}
+					<li>
+						<button
+							type="button"
+							class="round-history-line text-base-content/75 hover:bg-base-content/5 flex w-full min-w-0 items-start gap-1.5 px-1.5 py-1 text-left"
+							class:round-history-line-selected={isSel}
+							aria-pressed={isSel}
+							data-round={entry.round}
+							onclick={() => pick(entry.round)}
+						>
+							<span
+								class="mt-1.5 size-1.5 shrink-0 rounded-full {v ? TONE_BG[v.tone] : 'bg-base-content/30'}"
+								aria-hidden="true"
+							></span>
+							<span class="min-w-0 flex-1" class:truncate={!isSel}>
+								<span class="text-base-content font-medium">{entry.label ?? roundLabel(entry, n)}</span
+								>{date ? ` · ${date}` : ''}{' · '}<span class={v ? TONE_TEXT[v.tone] : ''}
+									>{v?.label ?? entry.verdict ?? undecidedLabel}</span
+								>{#if entry.note}<span class:whitespace-pre-wrap={isSel}>{` · “${entry.note}”`}</span>{/if}
+							</span>
+							<svg
+								class="text-base-content/40 mt-0.5 size-3 shrink-0"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								role="img"
+								aria-label="locked"
+							>
+								<path
+									d="M5 7V5a3 3 0 1 1 6 0v2h.5A1.5 1.5 0 0 1 13 8.5v4a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 12.5v-4A1.5 1.5 0 0 1 4.5 7zm1.5 0h3V5a1.5 1.5 0 0 0-3 0z"
+								/>
+							</svg>
+						</button>
+					</li>
+				{/each}
+			</ol>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.round-history-chevron {
+		transition: transform var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.round-history-line {
+		border-radius: var(--jatui-radius-field, 0.25rem);
+	}
+	.round-history-line-selected {
+		background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.round-history-chevron {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,35 @@
+/**
+     * RoundHistory (jatui-xmrod) — the locked, read-only rounds of one review
+     * item: "▸ Round 2 · Oct 10 · Fail · "drain cleaning still doubling up"".
+     *
+     * Collapsed by default behind a "▸ N earlier" toggle; open, lines are newest
+     * first. Each line is one button: pressing it selects that round (and shows
+     * its full note); pressing the selected line again deselects it. `selected`
+     * is bindable so the list pairs with a version switcher — set it from the
+     * switcher and the list opens and expands that line.
+     *
+     * The current round is NOT part of `rounds` — pass history only.
+     */
+import { type ReviewRound, type ReviewVerdictDef } from './reviewSummary';
+interface Props {
+    /** Locked earlier rounds (any order — see orderRounds). */
+    rounds: ReviewRound[];
+    /** Verdict definitions, to label and colour each line's verdict id. */
+    verdicts?: ReviewVerdictDef[];
+    /** Selected round key (bindable). Pairs with a version switcher. */
+    selected?: string | null;
+    /** Whether the list is expanded (bindable). Default false (collapsed). */
+    open?: boolean;
+    /** Called when a line is (de)selected — null when deselected. */
+    onSelect?: (round: string | null) => void;
+    /** Label for a line without an explicit `label`. Default `Round ${n}`. */
+    roundLabel?: (entry: ReviewRound, n: number) => string;
+    /** Toggle text. Default "N earlier". */
+    toggleLabel?: (count: number) => string;
+    /** Text for a round that closed with no verdict. */
+    undecidedLabel?: string;
+    class?: string;
+}
+declare const RoundHistory: import("svelte").Component<Props, {}, "open" | "selected">;
+type RoundHistory = ReturnType<typeof RoundHistory>;
+export default RoundHistory;

package/dist/components/review/VerdictControl.svelte

@@ -0,0 +1,163 @@
+<!--
+  VerdictControl — one review item's verdict: a joined row of always-labelled
+  verdict buttons (the active one filled in its tone) plus an explicit Undo
+  (mos-z8vgx "Shared primitives"; replaces MOS VerdictBar, the checklist radio
+  segment and BlockVerdict's buttons).
+
+  - A repeat press of the active verdict is a NO-OP (mos-yntqm: a second
+    press used to silently clear an approve). Clearing lives on Undo only.
+  - Radio semantics: role=radiogroup, roving tabindex, ←/→/↑/↓/Home/End move
+    focus between options. Arrows do NOT cast a verdict — passing through
+    "Needs work" on the way to "Reject" would save it and pop its note open —
+    Space/Enter or the option's hotkey decides.
+  - One-key hotkeys from `options[].key` (and `u` = Undo) while focus is in
+    the control. Handled keys are preventDefault-ed so a page-level
+    reviewKeys() handler skips them.
+  - Sizes: `sm` (cards, default) and `xs` (inline strips).
+
+  The `options` array is the same one ReviewNote (`opensNote`) and
+  reviewKeys (`key`) take.
+-->
+<script lang="ts">
+	import type { VerdictOption, VerdictTone } from '../../actions/reviewKeys';
+
+	interface Props {
+		options: readonly VerdictOption[];
+		/** Current-round verdict id, or null when undecided. */
+		value?: string | null;
+		/** Called with a NEW verdict only — never for the active one. */
+		onVerdict?: (id: string) => void;
+		/** Called by the Undo button / `u`. Undo shows only when a verdict is set. */
+		onUndo?: () => void;
+		size?: 'sm' | 'xs';
+		/** Accessible name of the group, e.g. "Verdict for Drain cleaning page". */
+		label?: string;
+		undoLabel?: string;
+		/** Show each option's hotkey as a keycap inside its button. */
+		showKeys?: boolean;
+		/** Local hotkeys while focus is inside the control. Default true. */
+		hotkeys?: boolean;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		options,
+		value = null,
+		onVerdict,
+		onUndo,
+		size = 'sm',
+		label = 'Verdict',
+		undoLabel = 'Undo',
+		showKeys = false,
+		hotkeys = true,
+		disabled = false,
+		class: className = ''
+	}: Props = $props();
+
+	/** Literal class names so Tailwind sees every tone. */
+	const FILLED: Record<VerdictTone, string> = {
+		success: 'btn-success',
+		warning: 'btn-warning',
+		error: 'btn-error',
+		info: 'btn-info',
+		neutral: 'btn-neutral'
+	};
+
+	const sizeClass = $derived(size === 'xs' ? 'btn-xs' : 'btn-sm');
+
+	let group: HTMLDivElement | undefined = $state();
+
+	/** The option that holds the roving tab stop: the active one, else the first. */
+	const tabStop = $derived(options.some((o) => o.id === value) ? value : (options[0]?.id ?? null));
+
+	function choose(id: string) {
+		if (disabled || id === value) return;
+		onVerdict?.(id);
+	}
+
+	function radios(): HTMLButtonElement[] {
+		return group ? Array.from(group.querySelectorAll<HTMLButtonElement>('[role="radio"]')) : [];
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+		const list = radios();
+		const at = list.indexOf(document.activeElement as HTMLButtonElement);
+
+		let next = -1;
+		if (at >= 0) {
+			if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (at + 1) % list.length;
+			else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (at - 1 + list.length) % list.length;
+			else if (e.key === 'Home') next = 0;
+			else if (e.key === 'End') next = list.length - 1;
+		}
+		if (next >= 0) {
+			e.preventDefault();
+			list[next]?.focus();
+			return;
+		}
+
+		if (!hotkeys) return;
+		const hit = options.find((o) => o.key && o.key === e.key);
+		if (hit) {
+			e.preventDefault();
+			choose(hit.id);
+			return;
+		}
+		if (e.key === 'u' && value && onUndo) {
+			e.preventDefault();
+			onUndo();
+		}
+	}
+</script>
+
+<div class="flex flex-wrap items-center gap-2 {className}">
+	<!-- Roving tabindex: focus lives on the radios, never on the group itself. -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		bind:this={group}
+		class="join"
+		role="radiogroup"
+		aria-label={label}
+		aria-disabled={disabled || undefined}
+		onkeydown={onKeydown}
+	>
+		{#each options as o (o.id)}
+			{@const active = value === o.id}
+			<button
+				type="button"
+				role="radio"
+				aria-checked={active}
+				tabindex={o.id === tabStop ? 0 : -1}
+				aria-keyshortcuts={o.key || undefined}
+				data-verdict={o.id}
+				{disabled}
+				class="btn join-item {sizeClass} {active
+					? FILLED[o.tone]
+					: 'border-base-content/15 bg-base-100 text-base-content/80 hover:text-base-content'}"
+				onclick={() => choose(o.id)}
+			>
+				{o.label}
+				{#if showKeys && o.key}
+					<kbd class="kbd kbd-xs opacity-70" aria-hidden="true">{o.key}</kbd>
+				{/if}
+			</button>
+		{/each}
+	</div>
+	{#if value && onUndo}
+		<button
+			type="button"
+			class="btn btn-ghost {sizeClass} gap-1 px-2 text-base-content/75 hover:text-base-content"
+			aria-label="{undoLabel} — {label}"
+			aria-keyshortcuts="u"
+			{disabled}
+			onclick={() => onUndo?.()}
+		>
+			<svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />
+			</svg>
+			{undoLabel}
+		</button>
+	{/if}
+</div>

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

@@ -0,0 +1,23 @@
+import type { VerdictOption } from '../../actions/reviewKeys';
+interface Props {
+    options: readonly VerdictOption[];
+    /** Current-round verdict id, or null when undecided. */
+    value?: string | null;
+    /** Called with a NEW verdict only — never for the active one. */
+    onVerdict?: (id: string) => void;
+    /** Called by the Undo button / `u`. Undo shows only when a verdict is set. */
+    onUndo?: () => void;
+    size?: 'sm' | 'xs';
+    /** Accessible name of the group, e.g. "Verdict for Drain cleaning page". */
+    label?: string;
+    undoLabel?: string;
+    /** Show each option's hotkey as a keycap inside its button. */
+    showKeys?: boolean;
+    /** Local hotkeys while focus is inside the control. Default true. */
+    hotkeys?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+declare const VerdictControl: import("svelte").Component<Props, {}, "">;
+type VerdictControl = ReturnType<typeof VerdictControl>;
+export default VerdictControl;

package/dist/components/review/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Review primitives (MOS epic mos-lsmve, design mos-z8vgx) — the building
+ * blocks of an item-by-item review surface: a verdict per item, an optional
+ * note, a keyboard table, round history, progress, filters and a zoomable
+ * media lightbox with a verdict slot.
+ *
+ * Importable as `jatui/review` (everything below) or from the `jatui` root
+ * (components, the keyboard layer, the summary helpers and every type; the
+ * zoom/pan math and tone class maps stay on this subpath only).
+ */
+export { default as VerdictControl } from './VerdictControl.svelte';
+export { default as ReviewNote, NOTE_HINT } from './ReviewNote.svelte';
+export type { ReviewNoteSaveState } from './ReviewNote.svelte';
+export { default as ReviewShortcuts } from './ReviewShortcuts.svelte';
+export { reviewKeys, createReviewKeys, reviewKeyRows, resolveReviewKey, REVIEW_KEY_TABLE } from '../../actions/reviewKeys';
+export type { VerdictTone, VerdictOption, NeedsYou, ReviewKeyAction, ReviewKeyEntry, ReviewKeysOptions, ReviewKeyRow, ReviewKeysController } from '../../actions/reviewKeys';
+export { default as RoundHistory } from './RoundHistory.svelte';
+export { default as ReviewProgress } from './ReviewProgress.svelte';
+export { default as ReviewFilterBar } from './ReviewFilterBar.svelte';
+export { mergeReviewCounts, summarizeReview, reviewSentence, buildReviewFilters, orderRounds, formatRoundDate, TONE_BG, TONE_TEXT } from './reviewSummary';
+export type { ReviewTone, ReviewVerdictDef, ReviewCounts, ReviewRound, ReviewFilterChip, ReviewSummary, BuildFiltersInput } from './reviewSummary';
+export { default as MediaZoomLightbox } from './MediaZoomLightbox.svelte';
+export { MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, ZOOM_IDENTITY, DEFAULT_FPS, DEFAULT_SPEEDS, MEDIA_ZOOM_KEYS, clampScale, clampPan, zoomAt, panBy, wheelFactor, zoomTransform, formatMediaTime, stepFrameTime, clampIndex, stepView, stepSpeed, resolveMediaZoomKey, mediaZoomKeys, mediaZoomHint } from './mediaZoom';
+export type { MediaZoomState, MediaZoomView, MediaZoomFooterContext, ViewStep, MediaZoomAction, MediaZoomKeyDef, MediaZoomKeyContext } from './mediaZoom';

package/dist/components/review/index.js

@@ -0,0 +1,23 @@
+/**
+ * Review primitives (MOS epic mos-lsmve, design mos-z8vgx) — the building
+ * blocks of an item-by-item review surface: a verdict per item, an optional
+ * note, a keyboard table, round history, progress, filters and a zoomable
+ * media lightbox with a verdict slot.
+ *
+ * Importable as `jatui/review` (everything below) or from the `jatui` root
+ * (components, the keyboard layer, the summary helpers and every type; the
+ * zoom/pan math and tone class maps stay on this subpath only).
+ */
+// J1 — verdicts, notes and the review keyboard layer (jatui-et7pm)
+export { default as VerdictControl } from './VerdictControl.svelte';
+export { default as ReviewNote, NOTE_HINT } from './ReviewNote.svelte';
+export { default as ReviewShortcuts } from './ReviewShortcuts.svelte';
+export { reviewKeys, createReviewKeys, reviewKeyRows, resolveReviewKey, REVIEW_KEY_TABLE } from '../../actions/reviewKeys';
+// J2 — round history, progress and filters (jatui-xmrod)
+export { default as RoundHistory } from './RoundHistory.svelte';
+export { default as ReviewProgress } from './ReviewProgress.svelte';
+export { default as ReviewFilterBar } from './ReviewFilterBar.svelte';
+export { mergeReviewCounts, summarizeReview, reviewSentence, buildReviewFilters, orderRounds, formatRoundDate, TONE_BG, TONE_TEXT } from './reviewSummary';
+// J3 — zoomable image/video lightbox with a verdict footer slot (jatui-c79nt)
+export { default as MediaZoomLightbox } from './MediaZoomLightbox.svelte';
+export { MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, ZOOM_IDENTITY, DEFAULT_FPS, DEFAULT_SPEEDS, MEDIA_ZOOM_KEYS, clampScale, clampPan, zoomAt, panBy, wheelFactor, zoomTransform, formatMediaTime, stepFrameTime, clampIndex, stepView, stepSpeed, resolveMediaZoomKey, mediaZoomKeys, mediaZoomHint } from './mediaZoom';

package/dist/components/review/mediaZoom.d.ts

@@ -0,0 +1,115 @@
+/**
+ * mediaZoom — the pure core of MediaZoomLightbox (jatui-c79nt, ported from
+ * mardukos media-picker/zoom.ts, mos-0wvol).
+ *
+ * Zoom/pan math, frame stepping, view/item paging and the key table. The
+ * transform is `translate(x, y) scale(s)` on a wrapper whose origin is the
+ * stage centre, so every geometry helper works in stage-centred pixels.
+ * No DOM — every helper here is unit-tested in isolation.
+ *
+ * The key table (`MEDIA_ZOOM_KEYS`) is the single source for BOTH the
+ * keydown handler (`resolveMediaZoomKey`) and the on-screen hint
+ * (`mediaZoomHint`), so the documented keys can't drift from the behaviour
+ * (docs/review-ux/proposal.md → "One keyboard map").
+ */
+export type MediaZoomState = {
+    scale: number;
+    x: number;
+    y: number;
+};
+/** One page of the lightbox: a view of the item being judged. */
+export type MediaZoomView = {
+    src: string;
+    kind: 'image' | 'video';
+    /** Accessible name / caption ("Loop", "Still", "v8 · front"). */
+    label: string;
+    poster?: string | undefined;
+    /** Image alt text; defaults to `label`. */
+    alt?: string | undefined;
+};
+/** What the lightbox hands its `footer` snippet. */
+export type MediaZoomFooterContext = {
+    view: MediaZoomView | undefined;
+    index: number;
+    isVideo: boolean;
+};
+export declare const MIN_ZOOM = 1;
+export declare const MAX_ZOOM = 8;
+export declare const ZOOM_STEP = 1.25;
+export declare const ZOOM_IDENTITY: Readonly<MediaZoomState>;
+/** Frame step: the asset's fps is unknown to the page; review loops are 30fps. */
+export declare const DEFAULT_FPS = 30;
+export declare const DEFAULT_SPEEDS: readonly number[];
+export declare function clampScale(s: number): number;
+/** Keep the content covering the stage: at scale s the slack is (s-1)·w/2. */
+export declare function clampPan(z: MediaZoomState, w: number, h: number): MediaZoomState;
+/**
+ * Zoom by `factor` keeping the point (cx, cy) — stage-centred px — fixed
+ * under the pointer. Back at scale 1 the pan resets.
+ */
+export declare function zoomAt(z: MediaZoomState, factor: number, cx: number, cy: number, w: number, h: number): MediaZoomState;
+export declare function panBy(z: MediaZoomState, dx: number, dy: number, w: number, h: number): MediaZoomState;
+/** Wheel delta → multiplicative zoom factor (smooth on trackpads too). */
+export declare function wheelFactor(deltaY: number): number;
+export declare function zoomTransform(z: MediaZoomState): string;
+/** `m:ss.cc` — sub-second precision because frame-stepping is the point. */
+export declare function formatMediaTime(sec: number): string;
+/** Move `frames` frames from `time`, clamped to [0, duration]. */
+export declare function stepFrameTime(time: number, frames: number, duration: number, fps?: number): number;
+export declare function clampIndex(i: number, length: number): number;
+/**
+ * Where a ←/→ press goes. Inside the item's views it moves one view. At an
+ * edge it hands off to the host's item paging when the host offers it
+ * (`hasNextItem` / `hasPrevItem` — the legacy review-kit flow: decide, →,
+ * next item), and otherwise wraps around the views.
+ */
+export type ViewStep = {
+    kind: 'view';
+    index: number;
+} | {
+    kind: 'item';
+    dir: 1 | -1;
+} | {
+    kind: 'none';
+};
+export declare function stepView(index: number, delta: 1 | -1, length: number, opts?: {
+    hasNextItem?: boolean;
+    hasPrevItem?: boolean;
+}): ViewStep;
+export type MediaZoomAction = 'close' | 'prev-view' | 'next-view' | 'prev-item' | 'next-item' | 'pick-view' | 'zoom-in' | 'zoom-out' | 'zoom-reset' | 'play-pause' | 'frame-back' | 'frame-forward' | 'loop' | 'slower' | 'faster';
+export type MediaZoomKeyDef = {
+    action: MediaZoomAction;
+    /** `KeyboardEvent.key` values that trigger it. */
+    keys: readonly string[];
+    /** Keycap text for the hint. */
+    label: string;
+    /** Hint text. */
+    description: string;
+    /** Only meaningful while a video view is showing. */
+    video?: boolean;
+    /** Only meaningful when the host pages items (onNextItem / onPrevItem). */
+    items?: boolean;
+    /** Only meaningful with more than one view. */
+    views?: boolean;
+};
+/**
+ * j/k and ↓/↑ page ITEMS (the review-wide "next / previous item" keys), ←/→
+ * page VIEWS and spill into items at an edge, 1–9 pick a view. Verdict keys
+ * (a/x/r/b/u/n), rounds ([ / ]) and `?` are deliberately absent: they bubble
+ * out to the host, which owns them (the footer snippet renders VerdictControl).
+ * `k` is NOT play/pause here (it was in the MOS port) — it is "previous item".
+ */
+export declare const MEDIA_ZOOM_KEYS: readonly MediaZoomKeyDef[];
+export type MediaZoomKeyContext = {
+    isVideo: boolean;
+    hasItems: boolean;
+    viewCount: number;
+};
+/** keydown `key` → the action it triggers in this context, or null (let it bubble). */
+export declare function resolveMediaZoomKey(key: string, ctx: MediaZoomKeyContext): MediaZoomAction | null;
+/** The keys that work right now, for the on-screen hint. */
+export declare function mediaZoomKeys(ctx: MediaZoomKeyContext): MediaZoomKeyDef[];
+/** One-line hint built from the key table: "Space play/pause · , frame back · …". */
+export declare function mediaZoomHint(ctx: MediaZoomKeyContext): string;
+/** The next/previous entry in `speeds` from `current` (clamped at the ends). */
+export declare function stepSpeed(current: number, dir: 1 | -1, speeds?: readonly number[]): number;