@joewinke/jatui 0.33.0 → 0.34.1

package/dist/components/review/ReviewFilterBar.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+	/**
+	 * ReviewFilterBar (jatui-xmrod) — the row on top of every review block:
+	 * filter chips with live counts (All · Needs you · Undecided · per verdict ·
+	 * Retest), one compact Sort/Group menu button and the Shortcuts button.
+	 * Ported from MOS artifact-blocks/review/ReviewToolbar.svelte.
+	 *
+	 * In flow, NOT sticky (a sticky bar collided with the host page's own
+	 * sticky header). The chips are one row that scrolls sideways on a phone
+	 * instead of wrapping. Chips come from the host — `buildReviewFilters()`
+	 * builds the standard set from verdict counts.
+	 *
+	 * Sort and Group choices are passed in; both live in ONE menu button so the
+	 * row stays a single line. Omit both option lists and the button is hidden;
+	 * omit `onHelp` and the Shortcuts button is hidden.
+	 */
+	import { tick, type Snippet } from 'svelte';
+	import { TONE_BG, type ReviewFilterChip } from './reviewSummary';
+
+	interface MenuOption {
+		id: string;
+		label: string;
+	}
+
+	interface Props {
+		filters: ReviewFilterChip[];
+		/** Active filter id (bindable). */
+		active?: string;
+		onFilterChange?: (id: string) => void;
+		sortOptions?: MenuOption[];
+		/** Active sort id (bindable). */
+		sort?: string;
+		onSortChange?: (id: string) => void;
+		groupOptions?: MenuOption[];
+		/** Active group id (bindable). */
+		group?: string;
+		onGroupChange?: (id: string) => void;
+		/** Opens the shortcuts help. Omit to hide the button. */
+		onHelp?: () => void;
+		/** Accessible name of the whole row. */
+		label?: string;
+		/** Extra content at the end of the row (e.g. a compact ReviewProgress). */
+		trailing?: Snippet;
+		class?: string;
+	}
+
+	let {
+		filters,
+		active = $bindable('all'),
+		onFilterChange,
+		sortOptions = [],
+		sort = $bindable(sortOptions[0]?.id ?? ''),
+		onSortChange,
+		groupOptions = [],
+		group = $bindable(groupOptions[0]?.id ?? ''),
+		onGroupChange,
+		onHelp,
+		label = 'Filter items',
+		trailing,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	const menuId = `review-filter-menu-${uid}`;
+	let menuOpen = $state(false);
+	let menuButton = $state<HTMLButtonElement>();
+	let menuEl = $state<HTMLDivElement>();
+
+	const hasMenu = $derived(sortOptions.length > 0 || groupOptions.length > 0);
+	const sortLabel = $derived(sortOptions.find((o) => o.id === sort)?.label);
+	const groupLabel = $derived(groupOptions.find((o) => o.id === group)?.label);
+	const menuButtonText = $derived(sortOptions.length ? 'Sort' : 'Group');
+	const menuSummary = $derived(
+		[sortLabel && `Sort: ${sortLabel}`, groupLabel && `Group: ${groupLabel}`].filter(Boolean).join(', ')
+	);
+
+	function choose(id: string) {
+		if (active === id) return;
+		active = id;
+		onFilterChange?.(id);
+	}
+
+	function items(): HTMLElement[] {
+		return menuEl ? Array.from(menuEl.querySelectorAll<HTMLElement>('[role="menuitemradio"]')) : [];
+	}
+
+	function openMenu(focus: 'first' | 'last' | 'checked' = 'checked') {
+		menuOpen = true;
+		tick().then(() => {
+			const all = items();
+			const target =
+				focus === 'last'
+					? all.at(-1)
+					: focus === 'first'
+						? all[0]
+						: (all.find((el) => el.getAttribute('aria-checked') === 'true') ?? all[0]);
+			target?.focus();
+		});
+	}
+
+	function closeMenu(returnFocus = true) {
+		menuOpen = false;
+		if (returnFocus) menuButton?.focus();
+	}
+
+	function pickSort(id: string) {
+		if (sort !== id) {
+			sort = id;
+			onSortChange?.(id);
+		}
+		closeMenu();
+	}
+
+	function pickGroup(id: string) {
+		if (group !== id) {
+			group = id;
+			onGroupChange?.(id);
+		}
+		closeMenu();
+	}
+
+	function onButtonKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			openMenu('checked');
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			openMenu('last');
+		}
+	}
+
+	function onMenuKeydown(e: KeyboardEvent) {
+		const all = items();
+		const i = all.indexOf(document.activeElement as HTMLElement);
+		let next: HTMLElement | undefined;
+		if (e.key === 'ArrowDown') next = all[(i + 1) % all.length];
+		else if (e.key === 'ArrowUp') next = all[(i - 1 + all.length) % all.length];
+		else if (e.key === 'Home') next = all[0];
+		else if (e.key === 'End') next = all.at(-1);
+		else if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+			closeMenu();
+			return;
+		} else if (e.key === 'Tab') {
+			closeMenu(false);
+			return;
+		}
+		if (next) {
+			e.preventDefault();
+			next.focus();
+		}
+	}
+
+	// Click outside closes the menu (without stealing focus back).
+	$effect(() => {
+		if (!menuOpen) return;
+		const onDown = (e: PointerEvent) => {
+			const t = e.target as Node;
+			if (!menuEl?.contains(t) && !menuButton?.contains(t)) closeMenu(false);
+		};
+		document.addEventListener('pointerdown', onDown, true);
+		return () => document.removeEventListener('pointerdown', onDown, true);
+	});
+</script>
+
+<!-- @container: the row stacks or goes single-line by the width of ITS slot
+     (a card in a grid), not the viewport. -->
+<div class="review-filter-bar @container min-w-0 {className}" role="group" aria-label={label}>
+<div class="flex min-w-0 flex-col gap-2 @3xl:flex-row @3xl:items-center">
+	<div
+		class="review-filter-chips -mx-1 flex min-w-0 snap-x gap-1 overflow-x-auto px-1 pb-0.5"
+		role="group"
+		aria-label="Filter"
+	>
+		{#each filters as f (f.id)}
+			{@const on = active === f.id}
+			<button
+				type="button"
+				class="btn btn-sm review-filter-chip shrink-0 snap-start gap-1.5 font-medium {on
+					? 'border-base-content/25 bg-base-content/10 text-base-content'
+					: 'text-base-content/75 hover:bg-base-content/5 border-transparent bg-transparent shadow-none'}"
+				aria-pressed={on}
+				data-filter={f.id}
+				onclick={() => choose(f.id)}
+			>
+				{#if f.tone}
+					<span class="size-1.5 shrink-0 rounded-full {TONE_BG[f.tone]}" aria-hidden="true"></span>
+				{/if}
+				{f.label}
+				<span class="text-base-content/70 tabular-nums">{f.count}</span>
+			</button>
+		{/each}
+	</div>
+
+	{#if hasMenu || onHelp || trailing}
+		<div class="flex shrink-0 items-center gap-2 @3xl:ml-auto">
+			{#if trailing}{@render trailing()}{/if}
+
+			{#if hasMenu}
+				<div class="relative">
+					<button
+						bind:this={menuButton}
+						type="button"
+						class="btn btn-ghost btn-sm review-filter-chip text-base-content/75 gap-1"
+						aria-haspopup="menu"
+						aria-expanded={menuOpen}
+						aria-controls={menuOpen ? menuId : undefined}
+						aria-label={menuSummary ? `${menuButtonText} (${menuSummary})` : menuButtonText}
+						onclick={() => (menuOpen ? closeMenu() : openMenu())}
+						onkeydown={onButtonKeydown}
+					>
+						{menuButtonText}
+						<svg class="size-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+							<path d="M3.5 6 8 10.5 12.5 6z" />
+						</svg>
+					</button>
+
+					{#if menuOpen}
+						<div
+							bind:this={menuEl}
+							id={menuId}
+							class="review-filter-menu bg-base-100 border-base-content/10 absolute left-0 @3xl:left-auto @3xl:right-0 z-20 mt-1 flex min-w-44 flex-col border p-1 text-sm shadow-lg"
+							role="menu"
+							aria-label="Sort and group"
+							tabindex="-1"
+							onkeydown={onMenuKeydown}
+						>
+							{#if sortOptions.length}
+								<div role="group" aria-labelledby="{menuId}-sort">
+									<div id="{menuId}-sort" class="text-base-content/60 px-2 pt-1 pb-0.5 text-xs font-medium">Sort</div>
+									{#each sortOptions as o (o.id)}
+										{@render option(o, sort === o.id, () => pickSort(o.id))}
+									{/each}
+								</div>
+							{/if}
+							{#if sortOptions.length && groupOptions.length}
+								<div class="border-base-content/10 my-1 border-t" role="separator"></div>
+							{/if}
+							{#if groupOptions.length}
+								<div role="group" aria-labelledby="{menuId}-group">
+									<div id="{menuId}-group" class="text-base-content/60 px-2 pt-1 pb-0.5 text-xs font-medium">Group</div>
+									{#each groupOptions as o (o.id)}
+										{@render option(o, group === o.id, () => pickGroup(o.id))}
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+
+			{#if onHelp}
+				<button
+					type="button"
+					class="btn btn-ghost btn-sm review-filter-chip text-base-content/75 gap-1.5"
+					aria-haspopup="dialog"
+					aria-keyshortcuts="?"
+					onclick={onHelp}
+				>
+					Shortcuts <kbd class="kbd kbd-xs">?</kbd>
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+</div>
+
+{#snippet option(o: MenuOption, checked: boolean, pick: () => void)}
+	<button
+		type="button"
+		class="review-filter-option hover:bg-base-content/5 focus-visible:bg-base-content/10 flex w-full items-center gap-2 px-2 py-1.5 text-left outline-none"
+		role="menuitemradio"
+		aria-checked={checked}
+		tabindex="-1"
+		data-option={o.id}
+		onclick={pick}
+	>
+		<svg class="size-3.5 shrink-0" class:invisible={!checked} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+			<path d="M6.2 11.6 2.9 8.3l1.1-1.1 2.2 2.2 5.8-5.8 1.1 1.1z" />
+		</svg>
+		{o.label}
+	</button>
+{/snippet}
+
+<style>
+	.review-filter-chip {
+		border-radius: var(--jatui-radius-field, 0.25rem);
+	}
+	.review-filter-menu {
+		border-radius: var(--jatui-radius-box, 0.5rem);
+	}
+	.review-filter-option {
+		border-radius: var(--jatui-radius-field, 0.25rem);
+	}
+</style>

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

@@ -0,0 +1,45 @@
+/**
+     * ReviewFilterBar (jatui-xmrod) — the row on top of every review block:
+     * filter chips with live counts (All · Needs you · Undecided · per verdict ·
+     * Retest), one compact Sort/Group menu button and the Shortcuts button.
+     * Ported from MOS artifact-blocks/review/ReviewToolbar.svelte.
+     *
+     * In flow, NOT sticky (a sticky bar collided with the host page's own
+     * sticky header). The chips are one row that scrolls sideways on a phone
+     * instead of wrapping. Chips come from the host — `buildReviewFilters()`
+     * builds the standard set from verdict counts.
+     *
+     * Sort and Group choices are passed in; both live in ONE menu button so the
+     * row stays a single line. Omit both option lists and the button is hidden;
+     * omit `onHelp` and the Shortcuts button is hidden.
+     */
+import { type Snippet } from 'svelte';
+import { type ReviewFilterChip } from './reviewSummary';
+interface MenuOption {
+    id: string;
+    label: string;
+}
+interface Props {
+    filters: ReviewFilterChip[];
+    /** Active filter id (bindable). */
+    active?: string;
+    onFilterChange?: (id: string) => void;
+    sortOptions?: MenuOption[];
+    /** Active sort id (bindable). */
+    sort?: string;
+    onSortChange?: (id: string) => void;
+    groupOptions?: MenuOption[];
+    /** Active group id (bindable). */
+    group?: string;
+    onGroupChange?: (id: string) => void;
+    /** Opens the shortcuts help. Omit to hide the button. */
+    onHelp?: () => void;
+    /** Accessible name of the whole row. */
+    label?: string;
+    /** Extra content at the end of the row (e.g. a compact ReviewProgress). */
+    trailing?: Snippet;
+    class?: string;
+}
+declare const ReviewFilterBar: import("svelte").Component<Props, {}, "sort" | "active" | "group">;
+type ReviewFilterBar = ReturnType<typeof ReviewFilterBar>;
+export default ReviewFilterBar;

package/dist/components/review/ReviewNote.svelte

@@ -0,0 +1,213 @@
+<!--
+  ReviewNote — one review item's note, bound to the CURRENT round
+  (mos-z8vgx "Shared primitives"; ports MOS artifact-blocks/review/noteFlow).
+
+  - Opens itself and focuses the textarea when the verdict changes to one
+    marked `opensNote` (Reject / Needs work / Fail…). It does NOT open on
+    mount, on a repeat of the same verdict, or when the round changes.
+  - The note is optional: under an EMPTY note on a note-worthy verdict sits
+    the soft NOTE_HINT — never a validation block.
+  - Auto-grows with its content.
+  - Per-note save state from `onSave`: "Saving…" → "Saved ✓", or
+    "Not saved" + Retry when it throws/rejects. Saves are debounced while
+    typing and flushed on blur.
+  - Esc hands focus back to the item's card (`[data-item-id]`, the same hook
+    reviewKeys() navigates); the text is already saved, Esc is never a
+    discard.
+  - `round` keys the note to the current round: a new round resets the save
+    state, drops any pending save for the old round, and collapses the note
+    if the host gives it an empty value.
+-->
+<script module lang="ts">
+	/** The soft inline hint under an EMPTY note field on a note-worthy verdict. */
+	export const NOTE_HINT = 'Optional — the verdict is saved. A note is welcome, not required.';
+
+	export type ReviewNoteSaveState = 'idle' | 'saving' | 'saved' | 'error';
+
+	let nextId = 0;
+</script>
+
+<script lang="ts">
+	import { tick, untrack } from 'svelte';
+	import type { VerdictOption } from '../../actions/reviewKeys';
+
+	interface Props {
+		/** Note text for the current round. */
+		value?: string;
+		/** Whether the note field is shown. */
+		open?: boolean;
+		/** The current-round verdict; a change to an `opensNote` one opens the note. */
+		verdict?: string | null;
+		/** Same array as VerdictControl's — `opensNote` is read from it. */
+		options?: readonly VerdictOption[];
+		/** Current round key (version, retestSince…). */
+		round?: string | number | null;
+		/** Persist the note. Throw / reject to show "Not saved". */
+		onSave?: (text: string, ctx: { round: string | number | null }) => void | Promise<void>;
+		/** Every keystroke, before the debounce. */
+		onInput?: (text: string) => void;
+		/** Debounce for saves while typing. Default 600ms. */
+		debounceMs?: number;
+		/** Where Esc sends focus. Default: the closest `[data-item-id]` ancestor. */
+		returnFocusTo?: () => HTMLElement | null | undefined;
+		/** Visible label (also the textarea's accessible name). */
+		label?: string;
+		placeholder?: string;
+		/** Text-entry id; pairs with a Note toggle's aria-controls. Auto when omitted. */
+		id?: string;
+		rows?: number;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		open = $bindable(false),
+		verdict = null,
+		options = [],
+		round = null,
+		onSave,
+		onInput,
+		debounceMs = 600,
+		returnFocusTo,
+		label = 'Note',
+		placeholder = 'What should change?',
+		id,
+		rows = 2,
+		disabled = false,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = ++nextId;
+	const inputId = $derived(id ?? `review-note-${uid}`);
+	const statusId = $derived(`${inputId}-status`);
+
+	let root: HTMLDivElement | undefined = $state();
+	let textarea: HTMLTextAreaElement | undefined = $state();
+	let saveState = $state<ReviewNoteSaveState>('idle');
+
+	const noteWorthy = $derived(!!verdict && options.some((o) => o.id === verdict && o.opensNote));
+
+	// Open + focus when the verdict CHANGES to a note-worthy one. The first run
+	// only records the starting verdict, so a saved state never pops open.
+	let lastVerdict: string | null | undefined = undefined;
+	$effect(() => {
+		const v = verdict;
+		const prev = lastVerdict;
+		lastVerdict = v;
+		if (prev === undefined || v === prev || !v) return;
+		if (!untrack(() => options.some((o) => o.id === v && o.opensNote))) return;
+		open = true;
+		tick().then(() => textarea?.focus());
+	});
+
+	// A new round: forget the old round's save state and pending save.
+	let lastRound: string | number | null | undefined = undefined;
+	$effect(() => {
+		const r = round;
+		const prev = lastRound;
+		lastRound = r;
+		if (prev === undefined || r === prev) return;
+		clearTimeout(timer);
+		timer = undefined;
+		pendingText = null;
+		saveState = 'idle';
+		if (!untrack(() => value)) open = false;
+	});
+
+	// Auto-grow: reset, then fit the content.
+	$effect(() => {
+		void value;
+		void open;
+		const el = textarea;
+		if (!el) return;
+		el.style.height = 'auto';
+		if (el.scrollHeight > 0) el.style.height = `${el.scrollHeight}px`;
+	});
+
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let pendingText: string | null = null;
+	let saveSeq = 0;
+
+	async function save(text: string) {
+		if (!onSave) return;
+		const seq = ++saveSeq;
+		const forRound = round;
+		saveState = 'saving';
+		try {
+			await onSave(text, { round: forRound });
+			if (seq === saveSeq && forRound === round) saveState = 'saved';
+		} catch {
+			if (seq === saveSeq && forRound === round) saveState = 'error';
+		}
+	}
+
+	function flush() {
+		clearTimeout(timer);
+		timer = undefined;
+		if (pendingText === null) return;
+		const text = pendingText;
+		pendingText = null;
+		void save(text);
+	}
+
+	function onTextInput(e: Event) {
+		const text = (e.currentTarget as HTMLTextAreaElement).value;
+		value = text;
+		onInput?.(text);
+		if (!onSave) return;
+		pendingText = text;
+		clearTimeout(timer);
+		timer = setTimeout(flush, debounceMs);
+	}
+
+	function retry() {
+		pendingText = null;
+		void save(value);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key !== 'Escape') return;
+		e.preventDefault();
+		e.stopPropagation();
+		flush();
+		const target = returnFocusTo ? returnFocusTo() : root?.closest<HTMLElement>('[data-item-id]');
+		target?.focus();
+	}
+
+	$effect(() => () => clearTimeout(timer));
+</script>
+
+{#if open}
+	<div bind:this={root} class="flex flex-col gap-1 {className}">
+		<div class="flex items-baseline justify-between gap-2">
+			<label for={inputId} class="text-xs font-medium text-base-content/75">{label}</label>
+			<span id={statusId} class="text-xs" role="status" aria-live="polite">
+				{#if saveState === 'saving'}
+					<span class="text-base-content/60">Saving…</span>
+				{:else if saveState === 'saved'}
+					<span class="text-success">Saved ✓</span>
+				{:else if saveState === 'error'}
+					<span class="text-error">Not saved</span>
+					<button type="button" class="link link-error ml-1" onclick={retry}>Retry</button>
+				{/if}
+			</span>
+		</div>
+		<textarea
+			bind:this={textarea}
+			id={inputId}
+			class="textarea textarea-sm w-full resize-none overflow-hidden leading-snug"
+			{rows}
+			{placeholder}
+			{disabled}
+			{value}
+			aria-describedby={statusId}
+			oninput={onTextInput}
+			onblur={flush}
+			onkeydown={onKeydown}
+		></textarea>
+		{#if noteWorthy && !value.trim()}
+			<p class="text-xs text-base-content/60">{NOTE_HINT}</p>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,37 @@
+/** The soft inline hint under an EMPTY note field on a note-worthy verdict. */
+export declare const NOTE_HINT = "Optional \u2014 the verdict is saved. A note is welcome, not required.";
+export type ReviewNoteSaveState = 'idle' | 'saving' | 'saved' | 'error';
+import type { VerdictOption } from '../../actions/reviewKeys';
+interface Props {
+    /** Note text for the current round. */
+    value?: string;
+    /** Whether the note field is shown. */
+    open?: boolean;
+    /** The current-round verdict; a change to an `opensNote` one opens the note. */
+    verdict?: string | null;
+    /** Same array as VerdictControl's — `opensNote` is read from it. */
+    options?: readonly VerdictOption[];
+    /** Current round key (version, retestSince…). */
+    round?: string | number | null;
+    /** Persist the note. Throw / reject to show "Not saved". */
+    onSave?: (text: string, ctx: {
+        round: string | number | null;
+    }) => void | Promise<void>;
+    /** Every keystroke, before the debounce. */
+    onInput?: (text: string) => void;
+    /** Debounce for saves while typing. Default 600ms. */
+    debounceMs?: number;
+    /** Where Esc sends focus. Default: the closest `[data-item-id]` ancestor. */
+    returnFocusTo?: () => HTMLElement | null | undefined;
+    /** Visible label (also the textarea's accessible name). */
+    label?: string;
+    placeholder?: string;
+    /** Text-entry id; pairs with a Note toggle's aria-controls. Auto when omitted. */
+    id?: string;
+    rows?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const ReviewNote: import("svelte").Component<Props, {}, "value" | "open">;
+type ReviewNote = ReturnType<typeof ReviewNote>;
+export default ReviewNote;

package/dist/components/review/ReviewProgress.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	/**
+	 * 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 {
+		reviewSentence,
+		summarizeReview,
+		TONE_BG,
+		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;
+	}
+
+	let {
+		verdicts,
+		counts,
+		total,
+		retest = 0,
+		decidedWord = 'decided',
+		label = 'Review progress',
+		size = 'sm',
+		hideSentence = false,
+		live = true,
+		class: className = ''
+	}: Props = $props();
+
+	const summary = $derived(summarizeReview(verdicts, counts, total, retest));
+	const sentence = $derived(reviewSentence(summary, decidedWord));
+	const pct = (n: number) => (summary.total > 0 ? (n / summary.total) * 100 : 0);
+	const heights = { xs: 'h-1', sm: 'h-1.5', md: 'h-2.5' };
+</script>
+
+<div class="review-progress flex min-w-0 flex-col gap-1.5 {className}">
+	<div
+		class="review-progress-bar bg-base-content/10 flex w-full overflow-hidden {heights[size]}"
+		role="progressbar"
+		aria-label={label}
+		aria-valuemin={0}
+		aria-valuemax={summary.total}
+		aria-valuenow={summary.decided}
+		aria-valuetext={sentence}
+	>
+		{#each summary.segments as seg (seg.id)}
+			<div
+				class="review-progress-seg h-full {TONE_BG[seg.tone]}"
+				style:width="{pct(seg.count)}%"
+				data-verdict={seg.id}
+			></div>
+		{/each}
+	</div>
+	{#if !hideSentence}
+		<p class="text-base-content/70 text-xs tabular-nums" aria-live={live ? 'polite' : undefined}>
+			{sentence}
+		</p>
+	{/if}
+</div>
+
+<style>
+	.review-progress-bar {
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+	}
+	.review-progress-seg {
+		transition: width var(--motion-move, 240ms) var(--motion-glide, ease-out);
+	}
+	.review-progress-seg + .review-progress-seg {
+		/* hairline between tones so adjacent segments read as separate counts */
+		box-shadow: inset var(--jatui-border-w, 1px) 0 0 color-mix(in oklab, var(--color-base-100) 60%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.review-progress-seg {
+			transition: none;
+		}
+	}
+</style>