@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/media-picker/MediaPickerBlock.svelte

@@ -0,0 +1,2112 @@
+<script lang="ts">
+  /**
+   * MediaPickerBlock — the Gallery review archetype (docs/review-ux/
+   * proposal.md): a grid of media cards where the asset is primary, each
+   * decided Approve / Needs work / Reject with an optional note. Ported from
+   * scripts/review-kit/lib/page.mjs behaviour (mos-nj3am, mos-vzame), built
+   * on the shared jatui review primitives since mos-lsmve.6 (M2):
+   * VerdictControl, ReviewNote, RoundHistory, ReviewProgress,
+   * ReviewFilterBar, ReviewShortcuts, reviewKeys() and MediaZoomLightbox.
+   *
+   * Viewer decisions persist through ctx.saveState as
+   * `{ [itemId]: { verdict, variant, note, at, round?, history? } }`
+   * (./decisions.ts). The flat fields are the CURRENT round; when saveState
+   * is undefined (public link, print, tests) the grid stays interactive but
+   * nothing persists. A failed save shows in the block with a Retry.
+   *
+   * Rounds (Joe D1/D2/D7 = A): a round is the version under review
+   * (`currentVersion`), or — when the team marks the item ready — that
+   * `team.readySince`. The first save in a new round locks the previous
+   * verdict + note into history and starts blank (../../review/rounds.ts);
+   * older versions are read-only and their locked line shows in RoundHistory.
+   *
+   * Campaign-blocks Gate A still holds: the asset is shown WHOLE
+   * (object-contain), views are one snapping filmstrip, the filter row is
+   * not sticky and scrolls sideways on a phone, columns come from a
+   * container query, rejects dim + sink (hover/focus restores them).
+   *
+   * D5 = A: images AND video open MediaZoomLightbox with the verdict control
+   * and note in its footer, and ←/→ (past the last view) or j/k page to the
+   * next card — decide without closing.
+   *
+   * mos-bk1k8 (Joe 2026-10-19: "I have to traverse the longest part of the
+   * screen to progress"): in the zoom an approve / pick moves on to the next
+   * OPEN card after a short confirm beat (instant under reduced motion), with
+   * a "Saved · next" cue and an Undo; Needs work / Reject stay put for the
+   * note. Previous / Next / Next open sit beside the verdict row, and the
+   * footer says "card 5 of 30 · 4 decided". `kind: "text"` cards drop the
+   * zoom chrome and render their words on a themed surface.
+   */
+  import MediaZoomLightbox from "../../../components/review/MediaZoomLightbox.svelte"
+  import type {
+    MediaZoomFooterContext,
+    MediaZoomView,
+  } from "../../../components/review/mediaZoom"
+  import ReviewFilterBar from "../../../components/review/ReviewFilterBar.svelte"
+  import ReviewProgress from "../../../components/review/ReviewProgress.svelte"
+  import ReviewShortcuts from "../../../components/review/ReviewShortcuts.svelte"
+  import RoundHistory from "../../../components/review/RoundHistory.svelte"
+  import VerdictControl from "../../../components/review/VerdictControl.svelte"
+  import { buildReviewFilters } from "../../../components/review/reviewSummary"
+  import { isTypingTarget } from "../../../utils/keyboardShortcutRegistry"
+  import {
+    reviewKeys,
+    type NeedsYou,
+    type ReviewKeyRow,
+    type ReviewKeysOptions,
+    type VerdictOption,
+  } from "../../../actions/reviewKeys"
+  import { showConfirm } from "../../../stores/confirmDialog"
+  import ItemNote from "../../review/ItemNote.svelte"
+  import type { NoteAttachment } from "../../review/attachments.js"
+  import { onDestroy, tick, untrack } from "svelte"
+  import type { BlockProps } from "../../types.js"
+  import BulkRejectForm from "../../review/BulkRejectForm.svelte"
+  import BulkUndoBar from "../../review/BulkUndoBar.svelte"
+  import { decideMany, undoMany, type BulkUndo } from "../../review/bulk.js"
+  import NoteToggle from "../../review/NoteToggle.svelte"
+  import TeamChip from "../../review/TeamChip.svelte"
+  import { looksLikeMarkdown, renderBlockMarkdown } from "../markdown/render.js"
+  import { historyRounds } from "../../review/roundLines.js"
+  import type { RoundView } from "../../review/rounds.js"
+  import { createStateSaver } from "../../review/saver.js"
+  import { teamRound } from "../../review/team.js"
+  import {
+    isTextTarget,
+    sortRanks,
+    visualItems,
+  } from "../../review/visualOrder.js"
+  import {
+    isEmptyDecision,
+    mediaRounds,
+    parseDecisions,
+    type MediaDecision,
+    type MediaVerdict,
+  } from "./decisions.js"
+  import { choiceLabelOf, choicesOf, isPick } from "./choices.js"
+  import type { MediaItem, MediaPickerParams, MediaVariant } from "./types.js"
+  import {
+    captionFor,
+    currentVersionOf,
+    historyLine,
+    versionOfVariant,
+    versionsOf,
+    viewLabel,
+    viewsOf,
+  } from "./versions.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<MediaPickerParams> = $props()
+
+  /**
+   * The intro renders through the shared sanitized markdown renderer when it
+   * carries obvious markdown syntax (mos-8vdg9): paragraphs, lists, bold,
+   * links. Plain-text intros render unchanged — whitespace and line breaks
+   * exactly as authored (the sniff is conservative on purpose; see
+   * looksLikeMarkdown).
+   */
+  const introIsMarkdown = $derived(
+    Boolean(params.intro && looksLikeMarkdown(params.intro)),
+  )
+  const introHtml = $derived(
+    introIsMarkdown ? renderBlockMarkdown(params.intro) : null,
+  )
+
+  const VERDICTS: VerdictOption[] = [
+    { id: "approve", label: "Approve", tone: "success", key: "a" },
+    {
+      id: "redo",
+      label: "Needs work",
+      tone: "warning",
+      key: "x",
+      opensNote: true,
+    },
+    { id: "reject", label: "Reject", tone: "error", key: "r", opensNote: true },
+  ]
+  const VERDICT_WORD: Record<MediaVerdict, string> = {
+    approve: "approved",
+    redo: "needs work",
+    reject: "rejected",
+  }
+
+  /** Stored entries — seeded ONCE from the viewer's saved state (the host
+   * passes state at render, never streams it). */
+  const initialDecisions = untrack(() => parseDecisions(ctx.state))
+  let decisions = $state<Record<string, MediaDecision>>(initialDecisions)
+  /**
+   * mos-guqgs: deciding requires BOTH a session-free read-only flag AND a
+   * save channel. `ctx.readonly` alone was the old gate — which made the
+   * admin preview pane (readonly=false, saveState=undefined) look fully
+   * answerable while every answer evaporated. Same contract as checklist /
+   * compare / callout / actions: no saveState, no live controls.
+   */
+  const canDecide = $derived(Boolean(ctx.saveState) && !ctx.readonly)
+  const saver = createStateSaver(() => ctx.saveState)
+
+  /** The round an item is in: the team's readySince when it marked the item
+   * ready, else the version under review (null = no rounds). */
+  function roundKeyOf(item: MediaItem): string | null {
+    return teamRound(item.team) ?? currentVersionOf(item)
+  }
+
+  /** Each item's current round + locked history (pure read, no write). */
+  const views = $derived.by(() => {
+    const out: Record<string, RoundView> = {}
+    for (const item of params.items)
+      out[item.id] = mediaRounds.view(
+        decisions[item.id],
+        roundKeyOf(item),
+        item.history,
+      )
+    return out
+  })
+
+  function currentOf(id: string): MediaDecision {
+    return (views[id]?.current ?? {}) as MediaDecision
+  }
+  function verdictOf(id: string): MediaVerdict | null {
+    return currentOf(id).verdict ?? null
+  }
+
+  /** Selected view per item. A re-opened review lands on the pick the viewer
+   * approved this round (review-kit behaviour), else the first view of the
+   * version under review. */
+  const initialSelected: Record<string, string> = {}
+  for (const item of untrack(() => params.items)) {
+    const v = mediaRounds.view(
+      initialDecisions[item.id],
+      roundKeyOf(item),
+    ).current
+    const pre = typeof v.variant === "string" ? v.variant : null
+    initialSelected[item.id] = item.variants.some((x) => x.id === pre)
+      ? (pre as string)
+      : (viewsOf(item, currentVersionOf(item))[0] ?? item.variants[0]).id
+  }
+  let selected = $state<Record<string, string>>(initialSelected)
+  let filter = $state("all")
+  let notesOpen = $state<Record<string, boolean>>({})
+  let helpOpen = $state(false)
+  let rootEl = $state<HTMLElement | null>(null)
+  /** Zoom view: the item shown and its view index. */
+  let zoomItem = $state<string | null>(null)
+  let zoomIndex = $state(0)
+
+  const itemsById = $derived(
+    new Map<string, MediaItem>(params.items.map((i) => [i.id, i])),
+  )
+
+  /** Groups in display order; unlisted/ungrouped items fall into an
+   * implicit section — nothing published is ever hidden from the human. */
+  const sections = $derived.by(() => {
+    const named = (params.groups ?? [])
+      .map((g) => ({
+        id: g.id,
+        title: g.title,
+        items: params.items.filter((it) => it.group === g.id),
+      }))
+      .filter((g) => g.items.length > 0)
+    const listedIds = new Set(named.flatMap((g) => g.items.map((i) => i.id)))
+    const rest = params.items.filter((it) => !listedIds.has(it.id))
+    const other =
+      rest.length > 0
+        ? [
+            {
+              id: "__other__",
+              title: named.length > 0 ? "Other" : "",
+              items: rest,
+            },
+          ]
+        : []
+    return [...named, ...other]
+  })
+
+  /** A new round is open and this viewer has not decided it. Informational
+   * items ask no decision — never a retest, never "needs you". */
+  function isRetest(item: MediaItem): boolean {
+    if (item.informational || verdictOf(item.id)) return false
+    return item.team?.status === "ready" || !!views[item.id]?.stale
+  }
+
+  const counts = $derived.by(() => {
+    const byVerdict: Record<string, number> = {}
+    let retest = 0
+    // Informational items are not units — the census and the progress
+    // sentence count only items a decision is asked on (mos-lwbbt).
+    const units = params.items.filter((it) => !it.informational)
+    for (const item of units) {
+      const v = verdictOf(item.id)
+      if (v) byVerdict[v] = (byVerdict[v] ?? 0) + 1
+      else if (isRetest(item)) retest++
+    }
+    return { byVerdict, retest, total: units.length }
+  })
+
+  /** Chips read as states ("Approved 40 / Rejected 12", mos-u8i35), so the
+   * reviewer scans one group and flips the outliers. */
+  const FILTER_VERDICTS: VerdictOption[] = VERDICTS.map((o) => ({
+    ...o,
+    label:
+      o.id === "approve"
+        ? "Approved"
+        : o.id === "reject"
+          ? "Rejected"
+          : o.label,
+  }))
+
+  const filters = $derived(
+    buildReviewFilters({
+      verdicts: FILTER_VERDICTS,
+      counts: counts.byVerdict,
+      total: counts.total,
+      retest: counts.retest,
+    }),
+  )
+
+  function visible(id: string): boolean {
+    if (filter === "all") return true
+    const item = itemsById.get(id)
+    if (item?.informational) return false // context is never a filter bucket
+    const v = verdictOf(id)
+    if (filter === "undecided") return !v
+    if (filter === "retest") {
+      return !!item && isRetest(item)
+    }
+    return v === filter
+  }
+
+  /** Rejects sink to the end of their section — from a frozen snapshot
+   * (mos-lsmve.12, ../../review/visualOrder) re-taken only on a filter
+   * change, so j from a just-rejected card walks the order on screen. */
+  const SINK = { reject: 1 } as const
+  function snapshotRanks() {
+    return sortRanks(
+      params.items.map((it) => it.id),
+      verdictOf,
+      SINK,
+    )
+  }
+  let ranks = $state<Record<string, number>>(untrack(snapshotRanks))
+  $effect(() => {
+    void filter
+    untrack(() => (ranks = snapshotRanks()))
+  })
+  function sinkOrder(id: string): number {
+    return ranks[id] ?? 0
+  }
+
+  function needsYou(id: string): NeedsYou {
+    const item = itemsById.get(id)
+    if (!item || verdictOf(id) || item.informational) return false
+    return isRetest(item) ? "retest" : "undecided"
+  }
+
+  function selectedVariantOf(item: MediaItem): MediaVariant {
+    return (
+      item.variants.find((v) => v.id === selected[item.id]) ?? item.variants[0]
+    )
+  }
+
+  /** The variants a choice item offers Pick buttons for: every view of the
+   * version under review (never a choice item — its options are named
+   * choices over one image, and never an informational item — context asks
+   * no decision, whatever flags rode along with it). */
+  function pickableViews(item: MediaItem): MediaVariant[] {
+    if (!isPick(item) || item.informational || choicesOf(item).length > 0)
+      return []
+    return viewsOf(item, currentVersionOf(item))
+  }
+
+  /** Is this variant the one the round's approve is pinned to? */
+  function isPickedVariant(item: MediaItem, variantId: string): boolean {
+    const cur = currentOf(item.id)
+    return cur.verdict === "approve" && cur.variant === variantId
+  }
+
+  /** Human label for a pinned pick id: a named choice's label first, else
+   * the variant's. */
+  function pickLabel(item: MediaItem, id: string | null | undefined): string {
+    if (!id) return ""
+    return choiceLabelOf(item, id) ?? variantLabel(item, id)
+  }
+
+  /** Does the Approve button NAME the view on screen? Real choices and
+   * evidence cards never do (Joe 2026-10-14: an evidence card's images are
+   * EXAMPLES of the problem — the verdict approves the card, no image is
+   * named). */
+  function namesVariant(item: MediaItem): boolean {
+    if (!canDecide || item.evidence) return false
+    if (choicesOf(item).length > 0 || pickableViews(item).length > 1)
+      return false
+    return item.variants.length > 1
+  }
+
+  /** The verdict the control should SHOW as active. An approval is pinned to
+   * its variant: while the reviewer browses a different one, no radio reads
+   * active — the badge names what was approved, and pressing the approve
+   * button (which names the view on screen) moves the pin deliberately.
+   * mos-yntqm still holds: a repeat press of the SHOWN active verdict never
+   * re-sends, so it can never clear. */
+  function approveVisibleValue(item: MediaItem): MediaVerdict | null {
+    const cur = currentOf(item.id)
+    if (
+      cur.verdict === "approve" &&
+      cur.variant != null &&
+      cur.variant !== selected[item.id]
+    )
+      return null
+    return cur.verdict ?? null
+  }
+
+  /** The verdict row's options for one item. When the item offers more than
+   * one variant, Approve names the one the reviewer is looking at — "Approve
+   * Bamboo", never a bare Approve (Joe 2026-10-14: "where there are two
+   * options how am I picking it") — unless the item is an EVIDENCE card,
+   * whose images are examples, not choices: the Approve answers the card,
+   * so it stays plain. A choice item has no single Approve at all: its Pick
+   * buttons ARE the approve. Read-only surfaces show the full vocabulary,
+   * disabled (mos-guqgs: the answer must stay visible). */
+  function verdictOptions(item: MediaItem): VerdictOption[] {
+    if (!canDecide) return VERDICTS
+    if (choicesOf(item).length > 0 || pickableViews(item).length > 1)
+      return VERDICTS.filter((o) => o.id !== "approve")
+    if (namesVariant(item)) {
+      const label = viewLabel(item, selectedVariantOf(item))
+      return VERDICTS.map((o) =>
+        o.id === "approve" ? { ...o, label: `Approve ${label}` } : o,
+      )
+    }
+    return VERDICTS
+  }
+
+  /** The FULL option labels for the verdict buttons' `title` tooltips — a
+   * long approve name truncates with ellipsis (CSS) and the hover says the
+   * whole name (Joe 2026-10-14: never hide an option, never lose its name). */
+  function verdictFullLabels(item: MediaItem): Record<string, string> {
+    const out: Record<string, string> = {}
+    for (const o of VERDICTS) out[o.id] = o.label
+    if (namesVariant(item))
+      out.approve = `Approve ${viewLabel(item, selectedVariantOf(item))}`
+    return out
+  }
+
+  /** Stamp the full label as a `title` on each verdict button under `node`.
+   * Re-runs whenever the labels change (the approve name follows the view
+   * on screen). Deferred once so the child's buttons exist to stamp. */
+  function verdictTooltips(node: HTMLElement, labels: Record<string, string>) {
+    let latest = labels
+    const stamp = () => {
+      for (const b of node.querySelectorAll<HTMLButtonElement>(
+        "[data-verdict]",
+      )) {
+        const full = latest[b.dataset.verdict ?? ""]
+        if (full) b.setAttribute("title", full)
+        else b.removeAttribute("title")
+      }
+    }
+    queueMicrotask(stamp)
+    return {
+      update(next: Record<string, string>) {
+        latest = next
+        stamp()
+      },
+    }
+  }
+
+  /** The version the card is showing (null for an item without versions). */
+  function activeVersion(item: MediaItem): string | null {
+    if (versionsOf(item).length === 0) return null
+    return versionOfVariant(item, selectedVariantOf(item))
+  }
+
+  /** Is the card showing an OLDER version (read-only, no verdicts)? */
+  function viewingPrevious(item: MediaItem): boolean {
+    const av = activeVersion(item)
+    return av != null && av !== currentVersionOf(item)
+  }
+
+  function switchVersion(id: string, version: string) {
+    const item = itemsById.get(id)
+    if (!item) return
+    const first = viewsOf(item, version)[0]
+    if (first) selectVariant(id, first.id)
+  }
+
+  /** `[` (delta -1) older / `]` (+1) newer. The row lists the version under
+   * review first, then the publisher's order (newest first). */
+  function stepVersion(id: string, delta: -1 | 1) {
+    const item = itemsById.get(id)
+    if (!item) return
+    const versions = versionsOf(item)
+    if (versions.length === 0) return
+    const at = Math.max(0, versions.indexOf(activeVersion(item) ?? ""))
+    const next = Math.min(versions.length - 1, Math.max(0, at - delta))
+    if (next !== at) switchVersion(id, versions[next])
+  }
+
+  /** 1-9: pick a view of the version the card is showing. */
+  function pickView(id: string, index: number) {
+    const item = itemsById.get(id)
+    const v = item ? viewsOf(item, activeVersion(item))[index] : undefined
+    if (v) selectVariant(id, v.id)
+  }
+
+  // --- saving -----------------------------------------------------------------
+
+  /** Apply one change to an item's stored entry under its current round
+   * (the first save in a new round locks the old one into history). Local
+   * only — `flush()` persists. */
+  function update(item: MediaItem, patch: Record<string, unknown>) {
+    const next = mediaRounds.save(
+      decisions[item.id],
+      { ...patch, at: new Date().toISOString() },
+      roundKeyOf(item),
+    ) as MediaDecision
+    const updated = { ...decisions }
+    if (isEmptyDecision(next)) delete updated[item.id]
+    else updated[item.id] = next
+    decisions = updated
+  }
+
+  function flush(): Promise<void> {
+    return saver.save($state.snapshot(decisions) as Record<string, unknown>)
+  }
+
+  function persist(item: MediaItem, patch: Record<string, unknown>) {
+    update(item, patch)
+    // A failure shows as the block's alert (saver.failed), not a throw.
+    flush().catch(() => {})
+  }
+
+  /** A verdict save that may move the zoom on (mos-bk1k8). `advances` is
+   * true for an approve or a pick — a Needs work / Reject keeps the card so
+   * the reviewer can write the note. The entry BEFORE the save is kept for
+   * Undo, which restores it exactly (round history included). */
+  function decide(
+    item: MediaItem,
+    patch: Record<string, unknown>,
+    advances: boolean,
+  ) {
+    const before = decisions[item.id]
+      ? ($state.snapshot(decisions[item.id]) as MediaDecision)
+      : undefined
+    cancelAdvance()
+    persist(item, patch)
+    if (zoomItem !== item.id) return
+    lastPick = advances ? { id: item.id, title: item.title, before } : null
+    if (advances) scheduleAdvance(item.id)
+  }
+
+  /**
+   * a / x / r, or a verdict button. VerdictControl never re-sends the active
+   * verdict (mos-yntqm: a repeat press used to CLEAR an approve); a repeat
+   * KEY on a note-worthy verdict re-opens the note instead. A new Needs work
+   * / Reject opens + focuses the note itself (ReviewNote, mos-calzz).
+   * A named-choice item has no single Approve — `a` must not silently pin
+   * the comparison sheet as the answer; the choice buttons pick.
+   */
+  function setVerdict(id: string, verdict: MediaVerdict) {
+    const item = itemsById.get(id)
+    if (!item || !canDecide || viewingPrevious(item) || item.informational)
+      return
+    if (verdict === "approve" && choicesOf(item).length > 0) return
+    if (verdictOf(id) === verdict) {
+      // Approving again with a DIFFERENT view selected moves the pin to the
+      // view on screen (the button names it); the SAME view is a no-op
+      // (mos-yntqm: a repeat press must never clear or churn). An evidence
+      // card pins no variant — a repeat approve is a plain no-op.
+      if (
+        verdict === "approve" &&
+        !item.evidence &&
+        currentOf(id).variant !== selected[id]
+      ) {
+        decide(item, { verdict, variant: selected[id] }, true)
+        return
+      }
+      if (VERDICTS.find((o) => o.id === verdict)?.opensNote) openNote(id)
+      return
+    }
+    // An evidence card's approve answers the CARD (the images are examples,
+    // not choices) — it saves no variant (mos-9d62g).
+    decide(
+      item,
+      verdict === "approve" && !item.evidence
+        ? { verdict, variant: selected[id] }
+        : { verdict },
+      verdict === "approve",
+    )
+  }
+
+  /** u, or Undo: clear this round's verdict deliberately. The note stays (a
+   * remark is not a verdict); the pinned variant goes with the approve. */
+  function undoVerdict(id: string) {
+    const item = itemsById.get(id)
+    if (
+      !item ||
+      !canDecide ||
+      !verdictOf(id) ||
+      viewingPrevious(item) ||
+      item.informational
+    )
+      return
+    persist(item, { verdict: undefined, variant: undefined })
+  }
+
+  /** Pick one variant of a choice item: approve + THAT variant in one save —
+   * the action itself names what it approves (mos-lwbbt). Shows the pick. */
+  function pickVariant(id: string, variantId: string) {
+    const item = itemsById.get(id)
+    if (!item || !canDecide || viewingPrevious(item) || item.informational)
+      return
+    if (isPickedVariant(item, variantId)) return
+    selectVariant(id, variantId)
+    decide(item, { verdict: "approve", variant: variantId }, true)
+  }
+
+  /** Pick a named choice (the "A vs B" comparison sheet): the choice id is
+   * saved in `variant`, the same field every approve pins. */
+  function pickChoice(id: string, cid: string) {
+    const item = itemsById.get(id)
+    if (!item || !canDecide || viewingPrevious(item) || item.informational)
+      return
+    if (isPickedVariant(item, cid)) return
+    decide(item, { verdict: "approve", variant: cid }, true)
+  }
+
+  /** The items a bulk may decide: undecided, showing the version under
+   * review, shown under the active filter chip, and not a choice (a pick
+   * must be deliberate) or a retest (a reopened item deserves eyes).
+   * Informational items ask no decision. */
+  function bulkApprovable(item: MediaItem): boolean {
+    if (
+      item.informational ||
+      isPick(item) ||
+      isRetest(item) ||
+      verdictOf(item.id) ||
+      viewingPrevious(item) ||
+      !visible(item.id)
+    )
+      return false
+    return true
+  }
+
+  function approvableCount(items: MediaItem[]): number {
+    return items.filter((it) => bulkApprovable(it)).length
+  }
+
+  function itemCount(n: number): string {
+    return n === 1 ? "1 item" : `${n} items`
+  }
+
+  /** The last bulk, for its Undo (cleared by Undo, dismiss or the next bulk). */
+  let lastBulk = $state<{
+    undo: BulkUndo<MediaDecision>
+    count: number
+  } | null>(null)
+  /** The open bulk-reject form (mos-u8i35): the items it will reject and
+   * the control that opened it (focus returns there on Cancel). */
+  let rejectAsk = $state<{ ids: string[]; opener: HTMLElement | null } | null>(
+    null,
+  )
+
+  /** Decide every eligible item in one go — ONE save, not N. An approve
+   * carries each item's currently shown variant, exactly like pressing the
+   * (variant-named) Approve button on each card — except on evidence cards,
+   * where the approve answers the card and saves no variant (mos-9d62g). A
+   * reject carries the one shared note the form asked for. */
+  function decideAll(
+    items: MediaItem[],
+    verdict: "approve" | "reject",
+    note?: string,
+  ) {
+    if (!canDecide) return
+    const targets = items.filter((it) => bulkApprovable(it))
+    if (targets.length === 0) return
+    const { decisions: next, undo } = decideMany(
+      decisions,
+      targets.map((it) => ({
+        id: it.id,
+        round: roundKeyOf(it),
+        patch:
+          verdict === "approve" && !it.evidence
+            ? { variant: selected[it.id] }
+            : undefined,
+      })),
+      { verdict, note, at: new Date().toISOString(), save: mediaRounds.save },
+    )
+    decisions = next as Record<string, MediaDecision>
+    lastBulk = { undo, count: targets.length }
+    flush().catch(() => {})
+  }
+
+  /** A section's Approve all: one click, Undo-able. */
+  function approveAll(items: MediaItem[]) {
+    decideAll(items, "approve")
+  }
+
+  /** The page-level Approve all remaining asks first (mos-u8i35). */
+  async function confirmApproveAll() {
+    const ids = params.items.filter(bulkApprovable).map((it) => it.id)
+    if (!canDecide || ids.length === 0) return
+    const ok = await showConfirm({
+      title: `Approve ${itemCount(ids.length)}?`,
+      body: "You can still change any item after. Items you already decided stay as they are.",
+      confirmLabel: "Approve",
+      cancelLabel: "Cancel",
+      danger: false,
+      timeoutMs: 0,
+    })
+    // Re-check after the dialog: an item decided meanwhile is not overwritten.
+    if (ok)
+      decideAll(
+        params.items.filter((it) => ids.includes(it.id)),
+        "approve",
+      )
+  }
+
+  function askReject(items: MediaItem[]) {
+    const ids = items.filter(bulkApprovable).map((it) => it.id)
+    if (!canDecide || ids.length === 0) return
+    const active = document.activeElement
+    rejectAsk = {
+      ids,
+      opener: active instanceof HTMLElement ? active : null,
+    }
+  }
+
+  const rejectCount = $derived(
+    rejectAsk
+      ? params.items.filter(
+          (it) => rejectAsk!.ids.includes(it.id) && bulkApprovable(it),
+        ).length
+      : 0,
+  )
+
+  function confirmReject(note: string) {
+    if (!rejectAsk) return
+    const ids = rejectAsk.ids
+    rejectAsk = null
+    decideAll(
+      params.items.filter((it) => ids.includes(it.id)),
+      "reject",
+      note,
+    )
+    tick().then(() =>
+      visualItems(rootEl)
+        .find((el) => !el.hidden)
+        ?.focus(),
+    )
+  }
+
+  function cancelReject() {
+    const opener = rejectAsk?.opener
+    rejectAsk = null
+    tick().then(() => opener?.isConnected && opener.focus())
+  }
+
+  function undoBulk() {
+    if (!lastBulk || !canDecide) return
+    decisions = undoMany(decisions, lastBulk.undo)
+    lastBulk = null
+    flush().catch(() => {})
+  }
+
+  /** Shift+A / Shift+R on the block: approve / reject all remaining (both
+   * ask first). Never while typing, never with Ctrl / Meta / Alt. */
+  function onBulkKey(e: KeyboardEvent) {
+    if (!e.shiftKey || (e.key !== "A" && e.key !== "R")) return
+    if (e.ctrlKey || e.metaKey || e.altKey) return
+    if (e.defaultPrevented || e.isComposing || isTypingTarget(e.target)) return
+    if (!canDecide || approvableCount(params.items) === 0) return
+    e.preventDefault()
+    if (e.key === "A") void confirmApproveAll()
+    else askReject(params.items)
+  }
+
+  $effect(() => {
+    const el = rootEl
+    if (!el) return
+    el.addEventListener("keydown", onBulkKey)
+    return () => el.removeEventListener("keydown", onBulkKey)
+  })
+
+  function onNoteInput(id: string, text: string) {
+    const item = itemsById.get(id)
+    if (item) update(item, { note: text || undefined })
+  }
+
+  /** The note's uploaded clips (mos-rccb5): each upload adds its descriptor
+   * to the item's saved entry — the bytes are already in the artifact's
+   * private asset store by the time this fires. */
+  function onItemClips(id: string, clips: NoteAttachment[]) {
+    const item = itemsById.get(id)
+    if (item) persist(item, { attachments: clips })
+  }
+
+  /** ReviewNote's debounced save: throws so the note shows "Not saved". */
+  const noteSave = $derived(ctx.saveState ? () => flush() : undefined)
+
+  function noteInputId(id: string): string {
+    return zoomItem === id ? `zoomnote-${id}` : `noteinput-${id}`
+  }
+
+  /** Reveal the item's note and put the caret in it. */
+  function openNote(id: string) {
+    cancelAdvance()
+    notesOpen = { ...notesOpen, [id]: true }
+    tick().then(() => {
+      document
+        .getElementById(noteInputId(id))
+        ?.focus({ preventScroll: zoomItem === id })
+    })
+  }
+
+  function toggleNote(id: string) {
+    const item = itemsById.get(id)
+    if (!item || !canDecide || viewingPrevious(item)) return
+    if (notesOpen[id]) notesOpen = { ...notesOpen, [id]: false }
+    else openNote(id)
+  }
+
+  function selectVariant(id: string, variantId: string) {
+    const item = itemsById.get(id)
+    if (!item?.variants.some((v) => v.id === variantId)) return
+    selected = { ...selected, [id]: variantId }
+    // An approval is STICKY (mos-lwbbt): browsing another variant never
+    // moves it — the badge keeps naming what was approved and the Approve
+    // button, which always names the view you are on now, is how you move
+    // it deliberately. (It used to re-point silently on every switch.)
+  }
+
+  /** RoundHistory's selected line per item (a round that is not a version
+   * the card can show — a retest round, or the version under review). */
+  let historySel = $state<Record<string, string | null>>({})
+
+  /** RoundHistory ↔ version switcher: the line of the version the card
+   * shows is selected; picking an older version's line shows that version,
+   * anything else (or deselecting) returns to the one under review. */
+  function selectedRound(
+    item: MediaItem,
+    rounds: { round: string }[],
+  ): string | null {
+    const shown = activeVersion(item)
+    if (viewingPrevious(item))
+      return rounds.some((r) => r.round === shown) ? shown : null
+    const sel = historySel[item.id] ?? null
+    return sel && (!versionsOf(item).includes(sel) || sel === shown)
+      ? sel
+      : null
+  }
+
+  function pickRound(item: MediaItem, round: string | null) {
+    historySel = { ...historySel, [item.id]: round }
+    const cur = currentVersionOf(item)
+    if (round && round !== cur && versionsOf(item).includes(round))
+      switchVersion(item.id, round)
+    else if (viewingPrevious(item) && cur) switchVersion(item.id, cur)
+  }
+
+  // --- keyboard (jatui reviewKeys: one key table, help rendered from it) -----
+
+  const keysConfig: ReviewKeysOptions = $derived({
+    verdicts: VERDICTS,
+    onVerdict: canDecide
+      ? (id: string, v: string) => setVerdict(id, v as MediaVerdict)
+      : undefined,
+    onUndo: canDecide ? undoVerdict : undefined,
+    onNote: canDecide ? toggleNote : undefined,
+    onOpen: (id: string) => openZoom(id),
+    onRound: (id: string, delta: -1 | 1) => stepVersion(id, delta),
+    onView: pickView,
+    needsYou: canDecide ? needsYou : undefined,
+    onHelp: () => (helpOpen = true),
+    getItems: () => visualItems(rootEl),
+    global: false,
+  })
+
+  const BULK_HELP: ReviewKeyRow[] = [
+    {
+      keys: ["Shift", "A"],
+      description: "Approve all remaining (asks first)",
+      group: "Decide",
+    },
+    {
+      keys: ["Shift", "R"],
+      description: "Reject all remaining (asks for one note)",
+      group: "Decide",
+    },
+  ]
+
+  const EXTRA_HELP: ReviewKeyRow[] = [
+    {
+      keys: ["←", "→"],
+      description: "Full size: page views, then the next card",
+      group: "Item",
+    },
+    {
+      keys: [",", "."],
+      description: "Full size: step a video one frame",
+      group: "Item",
+    },
+    {
+      keys: ["+", "−", "0"],
+      description: "Full size: zoom in, out, reset",
+      group: "Item",
+    },
+  ]
+
+  // --- zoom view (MediaZoomLightbox, images and video) ----------------------
+
+  /** The views the zoom pages through: the shown version's image/video. */
+  function zoomVariants(id: string): MediaVariant[] {
+    const item = itemsById.get(id)
+    if (!item) return []
+    return viewsOf(item, activeVersion(item)).filter(
+      (v) => v.kind === "image" || v.kind === "video",
+    )
+  }
+
+  /** Full-size label: "v6 · Loop" on a versioned item, else the view label. */
+  function fullLabel(item: MediaItem, v: MediaVariant): string {
+    const label = viewLabel(item, v)
+    const ver = versionsOf(item).length > 0 ? versionOfVariant(item, v) : null
+    return ver ? `${ver} · ${label}` : label
+  }
+
+  function zoomViews(id: string): MediaZoomView[] {
+    const item = itemsById.get(id)
+    if (!item) return []
+    return zoomVariants(id).map((v) => ({
+      src: v.src,
+      kind: v.kind as "image" | "video",
+      label: fullLabel(item, v),
+      poster: v.poster,
+      alt: mediaAlt(item, fullLabel(item, v)),
+    }))
+  }
+
+  /** Cards the zoom view pages through: visible, with something to zoom, in
+   * the grid's visual order (sections in turn, rejects last in each). */
+  const zoomOrder = $derived(
+    sections.flatMap((s) =>
+      s.items
+        .filter((it) => visible(it.id) && zoomVariants(it.id).length > 0)
+        .sort((a, b) => sinkOrder(a.id) - sinkOrder(b.id))
+        .map((it) => it.id),
+    ),
+  )
+
+  function openZoom(id: string) {
+    const views = zoomVariants(id)
+    if (views.length === 0) return
+    zoomIndex = Math.max(
+      0,
+      views.findIndex((v) => v.id === selected[id]),
+    )
+    zoomItem = id
+  }
+
+  function closeZoom() {
+    const id = zoomItem
+    cancelAdvance()
+    lastPick = null
+    zoomItem = null
+    // Focus the card the reviewer ended on (they may have paged away).
+    if (id)
+      tick().then(() =>
+        rootEl
+          ?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(id)}"]`)
+          ?.focus(),
+      )
+  }
+
+  function zoomStep(dir: 1 | -1): (() => void) | undefined {
+    if (!zoomItem) return undefined
+    const at = zoomOrder.indexOf(zoomItem)
+    const to = zoomOrder[at + dir]
+    if (at < 0 || !to) return undefined
+    return () => {
+      zoomIndex = dir > 0 ? 0 : Math.max(0, zoomVariants(to).length - 1)
+      zoomItem = to
+    }
+  }
+
+  /** Header ↑/↓, j/k, ←/→ past the edge, and the footer's Previous / Next:
+   * a deliberate move drops the pending auto-advance and the Undo cue. */
+  function navStep(dir: 1 | -1): (() => void) | undefined {
+    const go = zoomStep(dir)
+    if (!go) return undefined
+    return () => {
+      cancelAdvance()
+      lastPick = null
+      go()
+      announceCard()
+    }
+  }
+
+  // --- auto-advance after a pick (mos-bk1k8) ---------------------------------
+
+  /** Every zoomable card in the grid's visual order, ignoring the filter —
+   * the card just decided may have left an "undecided" filter. */
+  const zoomOrderAll = $derived(
+    sections.flatMap((s) =>
+      s.items
+        .filter((it) => zoomVariants(it.id).length > 0)
+        .sort((a, b) => sinkOrder(a.id) - sinkOrder(b.id))
+        .map((it) => it.id),
+    ),
+  )
+
+  /** The next visible card still asking a decision after `from`, wrapping
+   * to the top; null when every card is decided. */
+  function nextOpenAfter(from: string): string | null {
+    const order = zoomOrderAll
+    const at = order.indexOf(from)
+    for (let k = 1; k < order.length; k++) {
+      const id = order[(at + k + order.length) % order.length]
+      if (id !== from && visible(id) && needsYou(id)) return id
+    }
+    return null
+  }
+
+  const AUTO_NEXT_KEY = "mos.review.autoNext"
+  const ADVANCE_MS = 400
+  /** Per-viewer opt-out (browser-local UI pref, like the checklist's view
+   * prefs) — default ON. */
+  let autoNext = $state(true)
+  let advancing = $state(false)
+  let advanceTimer: ReturnType<typeof setTimeout> | null = null
+  /** The last advancing pick in the zoom: what Undo restores. */
+  let lastPick = $state<{
+    id: string
+    title: string
+    before: MediaDecision | undefined
+  } | null>(null)
+  /** Screen-reader line: "Card 6 of 30" after a move. */
+  let zoomAnnounce = $state("")
+
+  $effect(() => {
+    try {
+      if (localStorage.getItem(AUTO_NEXT_KEY) === "0") autoNext = false
+    } catch {
+      /* storage unavailable — keep the default */
+    }
+  })
+
+  function setAutoNext(on: boolean) {
+    autoNext = on
+    if (!on) cancelAdvance()
+    try {
+      if (on) localStorage.removeItem(AUTO_NEXT_KEY)
+      else localStorage.setItem(AUTO_NEXT_KEY, "0")
+    } catch {
+      /* storage unavailable — the choice lasts this visit */
+    }
+  }
+
+  function reducedMotion(): boolean {
+    try {
+      return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    } catch {
+      return false
+    }
+  }
+
+  function cancelAdvance() {
+    if (advanceTimer) clearTimeout(advanceTimer)
+    advanceTimer = null
+    advancing = false
+  }
+
+  onDestroy(cancelAdvance)
+
+  function scheduleAdvance(from: string) {
+    if (!autoNext) return
+    const to = nextOpenAfter(from)
+    if (!to) {
+      zoomAnnounce = "Every card is decided"
+      return
+    }
+    const go = () => {
+      advanceTimer = null
+      advancing = false
+      if (zoomItem !== from) return
+      goToCard(to)
+      tick().then(focusVerdictRow)
+    }
+    if (reducedMotion()) go()
+    else {
+      advancing = true
+      advanceTimer = setTimeout(go, ADVANCE_MS)
+    }
+  }
+
+  /** Jump the zoom to a card (its selected view), like opening it. */
+  function goToCard(id: string) {
+    const views = zoomVariants(id)
+    if (views.length === 0) return
+    zoomIndex = Math.max(
+      0,
+      views.findIndex((v) => v.id === selected[id]),
+    )
+    zoomItem = id
+    announceCard()
+  }
+
+  function announceCard() {
+    const id = zoomItem
+    const at = id ? zoomOrder.indexOf(id) : -1
+    if (at >= 0) zoomAnnounce = `Card ${at + 1} of ${zoomOrder.length}`
+  }
+
+  /** Focus the new card's first decision control (a pick, else a verdict). */
+  function focusVerdictRow() {
+    const footer = document.querySelector("[data-media-zoom-footer]")
+    const first = [
+      ...(footer?.querySelectorAll<HTMLButtonElement>(
+        "[data-pick], [data-zoom-pick], [data-verdict]",
+      ) ?? []),
+    ].find((b) => !b.disabled)
+    first?.focus({ preventScroll: true })
+  }
+
+  /** Undo: restore the decided card's entry exactly and go back to it. */
+  function undoPick() {
+    const p = lastPick
+    if (!p) return
+    cancelAdvance()
+    lastPick = null
+    const updated = { ...decisions }
+    if (p.before) updated[p.id] = p.before
+    else delete updated[p.id]
+    decisions = updated
+    flush().catch(() => {})
+    if (zoomItem && zoomItem !== p.id) {
+      goToCard(p.id)
+      tick().then(focusVerdictRow)
+    }
+  }
+
+  function goNextOpen() {
+    const to = zoomItem ? nextOpenAfter(zoomItem) : null
+    if (!to) return
+    cancelAdvance()
+    lastPick = null
+    goToCard(to)
+  }
+
+  /** Decided units on the page, for the footer's progress line. */
+  const decidedCount = $derived(
+    Object.values(counts.byVerdict).reduce((n, c) => n + c, 0),
+  )
+
+  /** A text card's full-size view: no zoom − 100% + row (jatui's lightbox
+   * has no prop for it yet, so the host hides it by its data hook); with
+   * words, the image stage goes too and the footer carries the reading
+   * surface. */
+  const TEXT_ZOOM = "[&_[data-media-zoom-controls]]:hidden"
+  const TEXT_ZOOM_WORDS =
+    "[&_[data-media-zoom-controls]]:hidden [&_[data-zoom-stage]]:hidden [&_[data-media-zoom-footer]]:flex-1 [&_[data-media-zoom-footer]]:content-start [&_[data-media-zoom-footer]]:overflow-y-auto"
+
+  /** A text card renders its words on a themed surface (mos-bk1k8). */
+  function textOf(item: MediaItem): string | null {
+    return item.kind === "text" && item.text ? item.text : null
+  }
+
+  /** The zoom view's index is the card's selected view: approving in there
+   * pins what the reviewer is looking at. */
+  function setZoomIndex(i: number) {
+    zoomIndex = i
+    const id = zoomItem
+    const v = id ? zoomVariants(id)[i] : undefined
+    if (id && v && selected[id] !== v.id) selectVariant(id, v.id)
+  }
+
+  /** Keys the lightbox lets bubble (verdicts, u, n, [ ]) act on its item. */
+  function onZoomKeydown(e: KeyboardEvent) {
+    const id = zoomItem
+    if (!id || e.defaultPrevented || e.isComposing) return
+    if (e.metaKey || e.ctrlKey || e.altKey || isTextTarget(e.target)) return
+    const k = e.key
+    const v = VERDICTS.find((o) => o.key === k)
+    if (v && canDecide) setVerdict(id, v.id as MediaVerdict)
+    else if (k === "u" && canDecide) undoVerdict(id)
+    else if (k === "n" && canDecide) toggleNote(id)
+    else if (k === "[" || k === "]") {
+      stepVersion(id, k === "[" ? -1 : 1)
+      zoomIndex = 0
+    } else return
+    e.preventDefault()
+  }
+
+  // --- reduced motion: autoplay muted loop videos only when allowed -----------
+
+  $effect(() => {
+    if (!rootEl) return
+    let ok = true
+    try {
+      ok = !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    } catch {
+      ok = true
+    }
+    const videos = rootEl.querySelectorAll<HTMLVideoElement>(
+      "[data-item-id] video[data-autoloop]",
+    )
+    videos.forEach((v) => {
+      if (ok) v.play().catch(() => {})
+      else v.pause()
+    })
+  })
+
+  function mediaAlt(item: MediaItem, label: string | undefined): string {
+    return label ? `${item.title}: ${label}` : item.title
+  }
+
+  /** Human label for a variant id (approved badge). */
+  function variantLabel(item: MediaItem, variantId: string | null | undefined) {
+    const v = item.variants.find((x) => x.id === variantId)
+    return v ? fullLabel(item, v) : (variantId ?? "")
+  }
+
+  /** The locked line for a version (viewer's own, else the publisher's). */
+  function versionLine(id: string, version: string | null) {
+    if (!version) return null
+    return views[id]?.history.find((l) => l.round === version) ?? null
+  }
+</script>
+
+{#snippet cardCopy(item: MediaItem)}
+  <!-- The card's plain-English copy (mos-9d62g): two short labeled lines
+       written for the reader (the build lints them), plus "Open on site"
+       chips — where to see the thing being judged, in a new tab. -->
+  {#if item.wrong}
+    <p class="text-xs leading-relaxed text-base-content/90" data-wrong>
+      <span class="font-semibold">What is wrong:</span>
+      {item.wrong}
+    </p>
+  {/if}
+  {#if item.ifApproved}
+    <p class="text-xs leading-relaxed text-base-content/90" data-if-approved>
+      <span class="font-semibold">If you approve:</span>
+      {item.ifApproved}
+    </p>
+  {/if}
+  {#if item.links?.length}
+    <div class="flex flex-wrap gap-1.5" data-links>
+      {#each item.links as l (l.url)}
+        <a
+          href={l.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn btn-xs rounded-field border-base-content/15 text-base-content/80 hover:text-base-content"
+          title="{l.label} (opens in a new tab)"
+        >
+          {l.label}
+          <svg
+            viewBox="0 0 24 24"
+            class="size-3"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"><path d="M7 17 17 7" /><path d="M8 7h9v9" /></svg
+          >
+        </a>
+      {/each}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet zoomNav()}
+  <!-- Beside the verdict row (mos-bk1k8): moving on is next to the choice
+       just made, not the full diagonal away in the header. Same size as the
+       verdict buttons; the header arrows stay too. -->
+  {@const prev = navStep(-1)}
+  {@const next = navStep(1)}
+  {@const open = zoomItem ? nextOpenAfter(zoomItem) : null}
+  <div
+    class="flex flex-wrap items-center gap-1"
+    role="group"
+    aria-label="Move between cards"
+    data-zoom-nav
+  >
+    <button
+      type="button"
+      class="btn btn-sm rounded-field gap-1"
+      aria-keyshortcuts="K"
+      disabled={!prev}
+      onclick={() => prev?.()}
+      data-zoom-prev
+    >
+      Previous <kbd class="kbd kbd-xs opacity-70" aria-hidden="true">k</kbd>
+    </button>
+    <button
+      type="button"
+      class="btn btn-sm rounded-field gap-1"
+      aria-keyshortcuts="J"
+      disabled={!next}
+      onclick={() => next?.()}
+      data-zoom-next
+    >
+      Next <kbd class="kbd kbd-xs opacity-70" aria-hidden="true">j</kbd>
+    </button>
+    {#if canDecide && open}
+      <button
+        type="button"
+        class="btn btn-sm btn-ghost rounded-field"
+        onclick={goNextOpen}
+        data-zoom-next-open
+      >
+        Next open
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet zoomStatus()}
+  <!-- Progress + the pick cue (mos-bk1k8). The visible line is not live;
+       the sr-only line announces "Card 6 of 30" after a move. -->
+  {@const at = zoomItem ? zoomOrder.indexOf(zoomItem) : -1}
+  <div
+    class="flex w-full flex-wrap items-center gap-x-3 gap-y-1 text-xs text-base-content/70"
+    data-zoom-status
+  >
+    <span class="tabular-nums" data-zoom-progress>
+      {`${at >= 0 ? `card ${at + 1} of ${zoomOrder.length} · ` : ""}${decidedCount} decided`}
+    </span>
+    {#if lastPick}
+      <span
+        class="flex items-center gap-1.5 font-medium text-success"
+        data-zoom-cue
+      >
+        {advancing
+          ? "Saved · next"
+          : lastPick.id === zoomItem
+            ? "Saved"
+            : `Saved: ${lastPick.title}`}
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs rounded-field text-base-content/80"
+          onclick={undoPick}
+          data-zoom-undo-pick>↶ Undo</button
+        >
+      </span>
+    {/if}
+    {#if canDecide}
+      <label class="ml-auto flex cursor-pointer items-center gap-1.5">
+        <input
+          type="checkbox"
+          class="toggle toggle-xs"
+          checked={autoNext}
+          onchange={(e) => setAutoNext(e.currentTarget.checked)}
+          data-zoom-auto-next
+        />
+        Go to the next card after a pick
+      </label>
+    {/if}
+    <span class="sr-only" aria-live="polite" data-zoom-announce
+      >{zoomAnnounce}</span
+    >
+  </div>
+{/snippet}
+
+{#snippet decisionRow(item: MediaItem, inZoom: boolean)}
+  {@const cur = currentOf(item.id)}
+  {@const picks = choicesOf(item)}
+  {#if canDecide && !viewingPrevious(item) && picks.length > 0}
+    <!-- A named-choice item (the "A vs B" comparison sheet): a Pick button
+         per option; the pick saves verdict + the choice id, exactly what an
+         approve saves. Needs work / Reject stay for "neither". -->
+    <div
+      class="flex flex-wrap gap-1.5"
+      role="group"
+      aria-label="Pick an option for {item.title}"
+      data-choice-row
+    >
+      {#each picks as c (c.id)}
+        {@const on = cur.verdict === "approve" && cur.variant === c.id}
+        <button
+          type="button"
+          class="btn btn-sm rounded-field {on ? 'btn-success' : 'btn-outline'}"
+          aria-pressed={on}
+          data-pick={c.id}
+          onclick={() => pickChoice(item.id, c.id)}
+        >
+          {on ? `✓ ${c.label}` : `Pick ${c.label}`}
+        </button>
+      {/each}
+    </div>
+  {/if}
+  {#if inZoom && canDecide && !viewingPrevious(item) && pickableViews(item).length > 1}
+    <!-- A per-variant choice item in the zoom: one Pick button for the view
+         being looked at (the strip's buttons are not reachable here). -->
+    {@const shown = zoomVariants(item.id)[zoomIndex] ?? selectedVariantOf(item)}
+    {@const on = isPickedVariant(item, shown.id)}
+    <button
+      type="button"
+      class="btn btn-sm rounded-field self-start {on
+        ? 'btn-success'
+        : 'btn-outline'}"
+      aria-pressed={on}
+      aria-label="{on ? 'Picked' : 'Pick this'}: {viewLabel(item, shown)}"
+      data-zoom-pick
+      onclick={() => pickVariant(item.id, shown.id)}
+    >
+      {on ? "✓ Picked" : "Pick this"}
+    </button>
+  {/if}
+  <div
+    class="flex flex-wrap items-center gap-2 [&_.join]:min-w-0 [&_.join]:flex-wrap [&_[data-verdict]]:min-w-0 [&_[data-verdict='approve']]:max-w-full [&_[data-verdict='approve']]:truncate"
+    use:verdictTooltips={verdictFullLabels(item)}
+  >
+    <VerdictControl
+      options={verdictOptions(item)}
+      value={approveVisibleValue(item)}
+      label="Verdict for {item.title}"
+      undoLabel="Undo"
+      showKeys={inZoom}
+      disabled={!canDecide}
+      onVerdict={(v) => setVerdict(item.id, v as MediaVerdict)}
+      onUndo={() => undoVerdict(item.id)}
+    >
+      {#snippet trailing()}
+        <!-- Inside VerdictControl's atomic Undo group: the wrap boundary
+             falls before the pair, so the Note button never strands alone
+             on its own row (mos-lsmve.16 F7). -->
+        <NoteToggle
+          open={!!notesOpen[item.id]}
+          hasNote={!!cur.note}
+          disabled={!canDecide}
+          controls={inZoom ? `zoomnote-${item.id}` : `noteinput-${item.id}`}
+          itemTitle={item.title}
+          onToggle={() => toggleNote(item.id)}
+        />
+      {/snippet}
+    </VerdictControl>
+    {#if inZoom}
+      {@render zoomNav()}
+    {/if}
+  </div>
+  {#if inZoom && cur.verdict === "approve" && (cur.variant || item.evidence)}
+    <!-- The approval names its variant wherever the decision is made —
+         on the card the header badge carries it, in the zoom this line.
+         An evidence card's approve answers the CARD: no image is named. -->
+    <p class="text-xs font-medium text-success" data-zoom-approved>
+      {item.evidence ? "Approved" : `Approved: ${pickLabel(item, cur.variant)}`}
+    </p>
+  {/if}
+  <!-- The ONE composer in its per-item mode (mos-rccb5): jatui ReviewNote
+       stays the inline text leg (round model, open-on-reject, debounced
+       save — all unchanged); the composer adds the attach lane — voice /
+       video / screen capture, file picker, paste and drag-drop — and the
+       clip chips. Uploads land in the artifact's private asset store and
+       ride the item's saved entry as descriptors. -->
+  <ItemNote
+    artifactId={ctx.artifactId}
+    note={{
+      id: inZoom ? `zoomnote-${item.id}` : `noteinput-${item.id}`,
+      value: cur.note ?? "",
+      verdict: cur.verdict ?? null,
+      options: VERDICTS,
+      round: views[item.id]?.round ?? null,
+      saveFailed: saver.failed,
+      label: `Note for ${item.title}`,
+      placeholder: "What needs to change?",
+      onInput: (t) => onNoteInput(item.id, t),
+      onSave: noteSave,
+      ...(inZoom
+        ? {
+            returnFocusTo: () =>
+              document.querySelector<HTMLElement>("[data-media-zoom-lightbox]"),
+          }
+        : {}),
+    }}
+    bind:open={() => !!notesOpen[item.id],
+    (o) => (notesOpen = { ...notesOpen, [item.id]: o })}
+    clips={currentOf(item.id).attachments ?? []}
+    onClipsChange={(clips) => onItemClips(item.id, clips)}
+    disabled={!canDecide}
+  />
+{/snippet}
+
+<!-- The cards are the interactive elements; jatui reviewKeys (listening on
+this block only) acts on the focused card. -->
+<section
+  bind:this={rootEl}
+  class="@container rounded-box border border-base-content/10 bg-base-100"
+  aria-label={params.title ?? "Media review grid"}
+  use:reviewKeys={keysConfig}
+>
+  {#if params.title || params.intro}
+    <!-- flow-root contains the Listen control's float; the title and intro
+         wrap around it, so a long title never runs under the pill. -->
+    <header class="flow-root px-4 pt-4 pb-1 sm:px-5">
+      <SectionTools {ctx} listenLabel={params.title?.trim() || "this review"} />
+      {#if params.title}
+        <h2 class="text-lg font-semibold tracking-tight">{params.title}</h2>
+      {/if}
+      {#if params.intro}
+        {#if introHtml}
+          <div
+            class="prose prose-sm mt-0.5 max-w-[70ch] text-base-content/75 prose-p:my-1.5 prose-ul:my-1.5 prose-ol:my-1.5 prose-li:my-0.5"
+            data-intro-md
+          >
+            {@html introHtml}
+          </div>
+        {:else}
+          <p
+            class="mt-0.5 max-w-[70ch] text-sm whitespace-pre-line text-base-content/75"
+            data-intro-plain
+          >
+            {params.intro}
+          </p>
+        {/if}
+      {/if}
+    </header>
+  {/if}
+
+  <div
+    class="flex flex-col gap-2 border-b border-base-content/10 px-4 py-2.5 sm:px-5"
+  >
+    <ReviewProgress
+      verdicts={VERDICTS}
+      counts={counts.byVerdict}
+      total={counts.total}
+      retest={counts.retest}
+      size="xs"
+      label="Review progress"
+    />
+    <div class="flex flex-wrap items-center gap-2">
+      <ReviewFilterBar
+        {filters}
+        bind:active={filter}
+        onHelp={() => (helpOpen = true)}
+        label="Filter cards"
+      />
+      {#if canDecide && approvableCount(params.items) > 0}
+        <!-- Joe (pe-dusk-sweep): clicking Approve 90 times is bad UX — one
+             bulk approve per page, one save. Joe 10-19 (mos-u8i35): bulk
+             approve OR reject, then flip the outliers. Both ask first. -->
+        <div class="ml-auto flex shrink-0 flex-wrap items-center gap-2">
+          <button
+            type="button"
+            class="btn btn-outline btn-xs rounded-field"
+            aria-label="Approve all {approvableCount(
+              params.items,
+            )} undecided items"
+            aria-keyshortcuts="Shift+A"
+            data-approve-all
+            onclick={confirmApproveAll}
+          >
+            Approve all remaining
+            <span class="tabular-nums opacity-70"
+              >({approvableCount(params.items)})</span
+            >
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline btn-error btn-xs rounded-field"
+            aria-label="Reject all {approvableCount(
+              params.items,
+            )} undecided items"
+            aria-keyshortcuts="Shift+R"
+            aria-expanded={!!rejectAsk}
+            data-reject-all
+            onclick={() => askReject(params.items)}
+          >
+            Reject all remaining
+            <span class="tabular-nums opacity-70"
+              >({approvableCount(params.items)})</span
+            >
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if rejectAsk && canDecide && rejectCount > 0}
+    <BulkRejectForm
+      count={rejectCount}
+      noun="item"
+      onConfirm={confirmReject}
+      onCancel={cancelReject}
+    />
+  {/if}
+
+  {#if lastBulk && canDecide}
+    {@const rejected = lastBulk.undo.verdict === "reject"}
+    <BulkUndoBar
+      message="{rejected ? 'Rejected' : 'Approved'} {itemCount(
+        lastBulk.count,
+      )}. Flip any card with a or r."
+      tone={rejected ? "error" : "success"}
+      onUndo={undoBulk}
+      onDismiss={() => (lastBulk = null)}
+    />
+  {/if}
+
+  {#if saver.failed}
+    <div
+      class="mx-4 mt-3 flex items-center gap-2 rounded-field border border-error/40 bg-error/10 px-3 py-2 text-sm sm:mx-5"
+      role="alert"
+      data-save-error
+    >
+      <span>Your last change was not saved.</span>
+      <button
+        type="button"
+        class="btn btn-xs ml-auto rounded-field"
+        onclick={() => saver.retry()}>Retry</button
+      >
+    </div>
+  {/if}
+
+  <div class="px-4 pt-2 pb-5 sm:px-5">
+    {#if sections.length === 0}
+      <p class="py-6 text-sm text-base-content/70">No media to review yet.</p>
+    {/if}
+    {#each sections as section (section.id)}
+      {@const anyVisible = section.items.some((it) => visible(it.id))}
+      <section aria-label={section.title || "Media"} hidden={!anyVisible}>
+        {#if section.title}
+          <div class="mt-4 mb-2 flex flex-wrap items-center gap-2">
+            <h3 class="text-sm font-semibold text-base-content/80">
+              {section.title}
+            </h3>
+            {#if canDecide && approvableCount(section.items) > 0}
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs rounded-field text-base-content/70"
+                aria-label="Approve all {approvableCount(
+                  section.items,
+                )} undecided in {section.title}"
+                data-approve-all-section={section.id}
+                onclick={() => approveAll(section.items)}
+              >
+                Approve all
+                <span class="tabular-nums">
+                  {approvableCount(section.items)}</span
+                >
+              </button>
+            {/if}
+          </div>
+        {/if}
+        <div class="grid grid-cols-1 gap-3 @xl:grid-cols-2 @5xl:grid-cols-3">
+          {#each section.items as item (item.id)}
+            {@const cur = currentOf(item.id)}
+            {@const v = cur.verdict ?? null}
+            {@const view = views[item.id]}
+            {@const show = visible(item.id)}
+            {@const selVariant = selectedVariantOf(item)}
+            {@const versions = versionsOf(item)}
+            {@const curVersion = currentVersionOf(item)}
+            {@const shownVersion =
+              versions.length > 0 ? versionOfVariant(item, selVariant) : null}
+            {@const previous =
+              shownVersion != null && shownVersion !== curVersion}
+            {@const itemViews = viewsOf(item, shownVersion)}
+            {@const history = historyRounds(
+              view?.history ?? [],
+              mediaRounds.roundLabel,
+            )}
+            {@const retest = isRetest(item)}
+            <!-- The card is the keyboard focus TARGET for reviewKeys — an
+                 intentional roving-focus pattern (article tabindex=0). -->
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+            <article
+              data-item-id={item.id}
+              tabindex="0"
+              class="relative flex flex-col overflow-hidden rounded-box border bg-base-100 transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none {v ===
+              'approve'
+                ? 'border-success ring-1 ring-success/40'
+                : v === 'redo'
+                  ? 'border-warning/60'
+                  : v === 'reject'
+                    ? 'border-error/40 opacity-50 focus-within:opacity-100 hover:opacity-100'
+                    : 'border-base-content/10'}"
+              style:order={sinkOrder(item.id)}
+              aria-label="{item.title}, {item.informational
+                ? 'context only, no decision needed'
+                : v
+                  ? VERDICT_WORD[v]
+                  : retest
+                    ? 'to retest'
+                    : 'undecided'}"
+              hidden={!show}
+            >
+              <!-- Media area: the WHOLE asset, letterboxed (never cropped).
+                   An evidence card (mos-9d62g) shows its variants as an
+                   EXAMPLES gallery instead — every image visible with its
+                   numbered caption; the verdict approves the CARD, so no
+                   image is named, nothing is pinned. -->
+              {#if textOf(item)}
+                <!-- A text card's words on a themed surface (mos-bk1k8) —
+                     never the image's white slab in dark mode. -->
+                <button
+                  type="button"
+                  class="block w-full cursor-zoom-in bg-base-200 p-2 text-left"
+                  aria-label="Open {item.title} full size"
+                  onclick={() => openZoom(item.id)}
+                  data-text-card
+                >
+                  <p
+                    class="line-clamp-[12] rounded-field border border-base-content/10 bg-base-100 p-3 text-sm leading-relaxed whitespace-pre-line text-base-content"
+                  >
+                    {textOf(item)}
+                  </p>
+                </button>
+              {:else if item.evidence}
+                <div class="bg-base-200 p-2" data-evidence>
+                  <p
+                    class="px-0.5 pb-1 text-2xs font-medium tracking-wide text-base-content/55 uppercase"
+                    data-evidence-label
+                  >
+                    Examples{itemViews.length > 1
+                      ? ` (${itemViews.length})`
+                      : ""}
+                  </p>
+                  <div
+                    class="grid grid-cols-2 gap-1.5"
+                    role="group"
+                    aria-label="{item.title} examples"
+                    data-evidence-gallery
+                  >
+                    {#each itemViews as vr, i (vr.id)}
+                      {@const label = viewLabel(item, vr)}
+                      <div
+                        class="flex flex-col gap-0.5"
+                        data-evidence-item={vr.id}
+                      >
+                        {#if vr.kind === "audio"}
+                          <div class="p-1">
+                            <!-- Audio reads as a deliberate row: framed like
+                                 the other variants (rounded, bordered) — the
+                                 native control's chrome is the browser's; the
+                                 frame is ours. -->
+                            <audio
+                              controls
+                              src={vr.src}
+                              preload="metadata"
+                              aria-label={mediaAlt(item, label)}
+                              class="w-full rounded-field border border-base-content/10 bg-base-100"
+                            ></audio>
+                          </div>
+                        {:else}
+                          <button
+                            type="button"
+                            class="relative block w-full cursor-zoom-in overflow-hidden rounded-field border border-base-content/10 bg-base-200"
+                            aria-label="Open {mediaAlt(item, label)} full size"
+                            data-evidence={vr.id}
+                            onclick={() => {
+                              selectVariant(item.id, vr.id)
+                              openZoom(item.id)
+                            }}
+                          >
+                            {#if vr.kind === "image"}
+                              <img
+                                src={vr.src}
+                                alt={mediaAlt(item, label)}
+                                loading="lazy"
+                                class="aspect-[4/3] w-full object-cover"
+                              />
+                            {:else if vr.poster}
+                              <img
+                                src={vr.poster}
+                                alt={mediaAlt(item, label)}
+                                loading="lazy"
+                                class="aspect-[4/3] w-full object-cover"
+                              />
+                            {:else}
+                              <span
+                                class="grid aspect-[4/3] w-full place-items-center text-2xs text-base-content/70"
+                                aria-hidden="true">{vr.kind}</span
+                              >
+                            {/if}
+                          </button>
+                        {/if}
+                        <span
+                          class="block truncate px-0.5 text-2xs leading-4 text-base-content/80"
+                          title={label}
+                        >
+                          {i + 1}. {label}
+                        </span>
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+              {:else}
+                <div class="relative bg-base-200">
+                  {#if selVariant.kind === "image"}
+                    <button
+                      type="button"
+                      class="block w-full cursor-zoom-in"
+                      aria-label="Open {mediaAlt(
+                        item,
+                        fullLabel(item, selVariant),
+                      )} full size"
+                      onclick={() => openZoom(item.id)}
+                    >
+                      <img
+                        src={selVariant.src}
+                        alt={mediaAlt(item, fullLabel(item, selVariant))}
+                        loading="lazy"
+                        class="aspect-[4/3] w-full object-contain"
+                      />
+                    </button>
+                  {:else if selVariant.kind === "video"}
+                    <button
+                      type="button"
+                      class="group relative block w-full cursor-zoom-in"
+                      aria-label="Open {mediaAlt(
+                        item,
+                        fullLabel(item, selVariant),
+                      )} full size (zoom, frame-step, speed)"
+                      onclick={() => openZoom(item.id)}
+                    >
+                      <video
+                        data-autoloop
+                        src={selVariant.src}
+                        poster={selVariant.poster}
+                        muted
+                        loop
+                        playsinline
+                        preload="metadata"
+                        aria-hidden="true"
+                        tabindex="-1"
+                        class="pointer-events-none aspect-[4/3] w-full object-contain"
+                      ></video>
+                      <span
+                        class="absolute right-2 bottom-2 rounded-field bg-base-100/90 px-1.5 py-0.5 text-2xs font-medium text-base-content shadow-sm group-hover:bg-base-100"
+                        aria-hidden="true">⤢ zoom</span
+                      >
+                    </button>
+                  {:else if selVariant.kind === "audio"}
+                    <div class="p-3">
+                      <!-- Audio framed like the other media variants (see
+                           the evidence gallery row). -->
+                      <audio
+                        controls
+                        src={selVariant.src}
+                        preload="metadata"
+                        aria-label={mediaAlt(item, fullLabel(item, selVariant))}
+                        class="w-full rounded-field border border-base-content/10 bg-base-100"
+                      ></audio>
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+              {#if versions.length > 0}
+                <!-- The version row — the one under review first, marked.
+                     [ / ] step through it. -->
+                <div
+                  class="flex items-center gap-1.5 overflow-x-auto px-2.5 pt-2.5"
+                  role="group"
+                  aria-label="{item.title} versions"
+                  data-version-row
+                >
+                  <span class="shrink-0 text-2xs text-base-content/60"
+                    >Version</span
+                  >
+                  <div class="join shrink-0">
+                    {#each versions as ver (ver)}
+                      {@const on = shownVersion === ver}
+                      <button
+                        type="button"
+                        class="btn join-item btn-xs {on
+                          ? 'btn-primary'
+                          : 'btn-ghost border-base-content/15'}"
+                        aria-pressed={on}
+                        data-version={ver}
+                        title={ver === curVersion
+                          ? `${ver}, the version under review`
+                          : `${ver}, a previous version (read-only)`}
+                        onclick={() => switchVersion(item.id, ver)}
+                        >{ver}{#if ver === curVersion}<span
+                            class="ml-1 font-normal opacity-80">reviewing</span
+                          >{/if}</button
+                      >
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+              {#if itemViews.length > 1 && !item.evidence}
+                <!-- One snapping filmstrip below the media (never wrapped
+                     rows): the views of the shown version, labelled. An
+                     evidence card has the gallery above instead. -->
+                <div
+                  class="flex snap-x gap-1.5 overflow-x-auto px-2.5 pt-2.5 pb-1"
+                  role="group"
+                  aria-label="{item.title}{shownVersion
+                    ? ` ${shownVersion}`
+                    : ''} views"
+                >
+                  {#each itemViews as vr, i (vr.id)}
+                    {@const thumb =
+                      vr.kind === "image"
+                        ? vr.src
+                        : vr.kind === "video"
+                          ? vr.poster
+                          : undefined}
+                    {@const on = selVariant.id === vr.id}
+                    {@const vlabel = viewLabel(item, vr)}
+                    {@const picked = isPickedVariant(item, vr.id)}
+                    <div
+                      class="flex w-[4.5rem] shrink-0 snap-start flex-col gap-1"
+                    >
+                      <button
+                        type="button"
+                        class="relative w-full overflow-hidden rounded-field border-2 text-left transition-colors motion-reduce:transition-none {on
+                          ? 'border-primary'
+                          : 'border-transparent opacity-80 hover:opacity-100'}"
+                        aria-pressed={on}
+                        title="{vlabel} (key {i + 1})"
+                        onclick={() => selectVariant(item.id, vr.id)}
+                      >
+                        {#if thumb}
+                          <img
+                            src={thumb}
+                            alt=""
+                            loading="lazy"
+                            class="aspect-[4/3] w-full bg-base-200 object-cover"
+                          />
+                        {:else}
+                          <span
+                            class="grid aspect-[4/3] w-full place-items-center bg-base-200 text-2xs text-base-content/70"
+                            aria-hidden="true">{vr.kind}</span
+                          >
+                        {/if}
+                        {#if i < 9}
+                          <span
+                            class="absolute top-0.5 left-0.5 rounded-field bg-base-100/90 px-1 text-2xs leading-4 font-semibold tabular-nums text-base-content"
+                            aria-hidden="true">{i + 1}</span
+                          >
+                        {/if}
+                        {#if picked}
+                          <!-- The approval is pinned to THIS variant — visible
+                               even when the reviewer browses another one. -->
+                          <span
+                            class="absolute top-0.5 right-0.5 rounded-field bg-base-100/90 px-1 text-2xs leading-4 font-semibold text-success"
+                            aria-hidden="true">✓</span
+                          >
+                        {/if}
+                        <span
+                          class="block truncate bg-base-100 px-1 text-2xs leading-4 text-base-content/80"
+                          title={vlabel}>{vlabel}</span
+                        >
+                      </button>
+                      {#if canDecide && !previous && pickableViews(item).length > 1}
+                        <!-- A choice item picks per variant: the action
+                             itself names what it approves (mos-lwbbt). -->
+                        <button
+                          type="button"
+                          class="btn btn-xs rounded-field {picked
+                            ? 'btn-success'
+                            : 'btn-outline'}"
+                          aria-pressed={picked}
+                          aria-label="{picked
+                            ? 'Picked'
+                            : 'Pick this'}: {vlabel}"
+                          data-pick={vr.id}
+                          onclick={() => pickVariant(item.id, vr.id)}
+                        >
+                          {picked ? "✓ Picked" : "Pick this"}
+                        </button>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+              {#if item.variants.length > 1 && !item.evidence}
+                <p
+                  class="px-2.5 pt-1 text-xs leading-snug break-words text-base-content/70 tabular-nums"
+                  aria-live="polite"
+                  data-caption
+                >
+                  {captionFor(item, selVariant, shownVersion)}
+                </p>
+              {/if}
+
+              <div class="flex flex-1 flex-col gap-1.5 p-3">
+                <div class="flex flex-wrap items-baseline gap-1.5">
+                  <h4 class="text-sm leading-snug font-semibold">
+                    {item.title}
+                  </h4>
+                  {#if v === "approve" && (cur.variant || item.evidence)}
+                    <span
+                      class="badge badge-sm badge-success font-medium h-auto max-w-full py-0.5 text-left leading-snug whitespace-normal"
+                      data-approved-badge
+                    >
+                      {item.evidence
+                        ? "Approved"
+                        : `Approved: ${pickLabel(item, cur.variant)}`}
+                    </span>
+                  {/if}
+                  {#if item.informational}
+                    <span class="badge badge-sm badge-ghost" data-informational>
+                      no decision needed
+                    </span>
+                  {/if}
+                  {#each item.tags ?? [] as t (t)}
+                    <span class="badge badge-ghost badge-sm">{t}</span>
+                  {/each}
+                </div>
+                {#if item.team || (retest && canDecide)}
+                  <TeamChip team={item.team} retest={retest && canDecide} />
+                {/if}
+                {#if item.subtitle}
+                  <p
+                    class="line-clamp-4 text-xs leading-relaxed {v === 'redo'
+                      ? 'italic text-base-content'
+                      : 'text-base-content/75'}"
+                    title={item.subtitle}
+                  >
+                    {item.subtitle}
+                  </p>
+                {/if}
+                {@render cardCopy(item)}
+                {#if item.meta && Object.keys(item.meta).length > 0}
+                  <p class="text-xs text-base-content/70 tabular-nums">
+                    {Object.entries(item.meta)
+                      .map(([k, val]) => `${k}: ${val}`)
+                      .join(" · ")}
+                  </p>
+                {/if}
+
+                <div class="mt-auto flex flex-col gap-1.5 pt-1.5">
+                  {#if !item.informational}
+                    {#if previous}
+                      <!-- An older version is read-only: the verdict left on it
+                         then, and the way back. -->
+                      <div
+                        class="flex flex-col gap-1.5 rounded-field border border-base-content/10 bg-base-200 p-2 text-xs"
+                        role="note"
+                        data-previous-version
+                      >
+                        <p>
+                          <span class="font-semibold"
+                            >Previous version ({shownVersion})</span
+                          >
+                          is read-only. Verdicts go on {curVersion}.
+                        </p>
+                        <p class="text-base-content/80">
+                          {historyLine(versionLine(item.id, shownVersion))}
+                        </p>
+                        <button
+                          type="button"
+                          class="btn btn-xs self-start rounded-field"
+                          onclick={() =>
+                            curVersion && switchVersion(item.id, curVersion)}
+                          >Back to {curVersion} (reviewing)</button
+                        >
+                      </div>
+                    {:else if canDecide && zoomItem !== item.id}
+                      {@render decisionRow(item, false)}
+                    {:else if canDecide}
+                      <p class="text-xs text-base-content/70">
+                        Deciding in the full-size view.
+                      </p>
+                    {:else if verdictOf(item.id) || currentOf(item.id).note}
+                      <!-- mos-guqgs: a saveless surface (public share, print)
+                         renders the saved decision as an ANSWER — the same
+                         control, visibly disabled — never an editable form,
+                         never interactive-looking over a dead save. -->
+                      {@render decisionRow(item, false)}
+                    {/if}
+                  {/if}
+                  {#if !item.informational}
+                    <RoundHistory
+                      rounds={history}
+                      verdicts={VERDICTS}
+                      bind:selected={() => selectedRound(item, history),
+                      (r) => pickRound(item, r)}
+                      toggleLabel={(n) =>
+                        n === 1 ? "1 earlier round" : `${n} earlier rounds`}
+                    />
+                  {/if}
+                </div>
+              </div>
+            </article>
+          {/each}
+        </div>
+      </section>
+    {/each}
+
+    {#if params.items.length > 0 && sections.every((s) => !s.items.some( (it) => visible(it.id), ))}
+      <p class="py-6 text-sm text-base-content/70">
+        Nothing in this filter.
+        <button
+          type="button"
+          class="link link-hover ml-1"
+          onclick={() => (filter = "all")}>Show all</button
+        >
+      </p>
+    {/if}
+  </div>
+</section>
+
+<ReviewShortcuts
+  bind:open={helpOpen}
+  config={keysConfig}
+  extraRows={canDecide ? [...BULK_HELP, ...EXTRA_HELP] : EXTRA_HELP}
+  footnote="Keys act on the focused card. u (or Undo) clears this round's verdict; the note stays. Enter opens the card full size, where the same verdict keys work: after a bulk, a, x or r flips the card on screen. Shift+A and Shift+R decide every undecided card in the current filter; cards you already decided stay."
+/>
+
+{#if zoomItem}
+  {@const zItem = itemsById.get(zoomItem)}
+  {#if zItem}
+    {@const at = zoomOrder.indexOf(zItem.id)}
+    {@const words = textOf(zItem)}
+    {#snippet zoomFooter(_f: MediaZoomFooterContext)}
+      {#if words}
+        <div
+          class="mx-auto w-full max-w-[70ch] rounded-box border border-base-content/10 bg-base-100 p-4 text-base leading-relaxed whitespace-pre-line text-base-content"
+          data-zoom-text
+        >
+          {words}
+        </div>
+      {/if}
+      {@render zoomStatus()}
+      {#if canDecide && viewingPrevious(zItem) && !zItem.informational}
+        <p class="text-xs text-base-content/80">
+          Previous version ({activeVersion(zItem)}) is read-only. Verdicts go on
+          {currentVersionOf(zItem)}.
+        </p>
+        {@render zoomNav()}
+      {:else if canDecide && !zItem.informational}
+        <div class="flex w-full flex-col gap-1.5">
+          {@render cardCopy(zItem)}
+          {@render decisionRow(zItem, true)}
+        </div>
+      {:else if verdictOf(zItem.id) || currentOf(zItem.id).note}
+        <!-- mos-guqgs: the saveless surface's saved decision, disabled. -->
+        <div class="flex w-full flex-col gap-1.5">
+          {@render cardCopy(zItem)}
+          {@render decisionRow(zItem, true)}
+        </div>
+      {:else}
+        {@render zoomNav()}
+      {/if}
+    {/snippet}
+    <!-- Verdict keys the lightbox lets bubble act on the item shown; the
+         lightbox itself is the dialog and owns focus. -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div onkeydown={onZoomKeydown}>
+      <MediaZoomLightbox
+        items={zoomViews(zItem.id)}
+        bind:index={() => zoomIndex, setZoomIndex}
+        title={zItem.title}
+        position={at >= 0 ? `card ${at + 1} of ${zoomOrder.length}` : ""}
+        onClose={closeZoom}
+        onNextItem={navStep(1)}
+        onPrevItem={navStep(-1)}
+        footer={zoomFooter}
+        showHint={zItem.kind !== "text"}
+        zIndex={60}
+        class={zItem.kind === "text"
+          ? words
+            ? TEXT_ZOOM_WORDS
+            : TEXT_ZOOM
+          : ""}
+      />
+    </div>
+  {/if}
+{/if}