@joewinke/jatui 0.34.0 → 0.34.2

package/dist/components/review/MediaZoomLightbox.svelte

@@ -411,7 +411,7 @@
 
 <div
 	bind:this={dialogEl}
-	class="fixed inset-0 flex flex-col bg-base-300/95 text-base-content outline-none {className}"
+	class="fixed inset-0 flex flex-col bg-base-300 text-base-content outline-none {className}"
 	style:z-index={zIndex}
 	role="dialog"
 	aria-modal="true"
@@ -613,7 +613,14 @@
 			>
 		</div>
 		{#if showHint}
-			<p class="w-full text-2xs text-base-content/60" data-media-zoom-hint>{hint}</p>
+			<!-- Keys are useless on a touch screen: hidden on coarse pointers
+		     (the checklist block's footer hint hides the same way,
+		     mos-lsmve.16 F7 — the 4-line wrap pushed the note below the
+		     fold). -->
+			<p
+				class="w-full text-2xs text-base-content/60 [@media(pointer:coarse)]:hidden"
+				data-media-zoom-hint>{hint}</p
+			>
 		{/if}
 	</div>
 

package/dist/components/review/ReviewNote.svelte

@@ -6,7 +6,9 @@
     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.
+    the soft NOTE_HINT — never a validation block. The hint never claims the
+    verdict was saved when it was not: a `saveFailed` host (its own save
+    state) or this note's own failed save silences it (mos-lsmve.16 F6).
   - 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
@@ -16,7 +18,12 @@
     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.
+    if the host gives it an empty value. The round effect is DECLARED BEFORE
+    the verdict effect on purpose (mos-lsmve.16 F9): when a round change and
+    a note-worthy verdict change land in the same flush, Svelte runs
+    instance effects in declaration order, so the verdict's open runs LAST
+    and survives the round's collapse — the reviewer is looking at a note
+    for the verdict they just cast, and it must not blink away.
 -->
 <script module lang="ts">
 	/** The soft inline hint under an EMPTY note field on a note-worthy verdict. */
@@ -42,6 +49,10 @@
 		options?: readonly VerdictOption[];
 		/** Current round key (version, retestSince…). */
 		round?: string | number | null;
+		/** The host's own save failed (e.g. the verdict's save): the hint must
+		 * not claim the verdict is saved while the block shows "Not saved"
+		 * (mos-lsmve.16 F6). */
+		saveFailed?: boolean;
 		/** 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. */
@@ -66,6 +77,7 @@
 		verdict = null,
 		options = [],
 		round = null,
+		saveFailed = false,
 		onSave,
 		onInput,
 		debounceMs = 600,
@@ -88,20 +100,12 @@
 
 	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.
+	// DECLARED BEFORE the verdict effect below (mos-lsmve.16 F9): instance
+	// effects run in declaration order, so when a round change and a
+	// note-worthy verdict change land in the same flush, the round's
+	// collapse happens FIRST and the verdict's open survives — the note
+	// never blinks away under the verdict the reviewer just cast.
 	let lastRound: string | number | null | undefined = undefined;
 	$effect(() => {
 		const r = round;
@@ -115,6 +119,19 @@
 		if (!untrack(() => value)) open = false;
 	});
 
+	// 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());
+	});
+
 	// Auto-grow: reset, then fit the content.
 	$effect(() => {
 		void value;
@@ -206,7 +223,11 @@
 			onblur={flush}
 			onkeydown={onKeydown}
 		></textarea>
-		{#if noteWorthy && !value.trim()}
+		<!-- The hint asserts the verdict was saved — it must not say that
+		     while a save has failed (the host's own, or this note's own
+		     retryable one): the alert above is saying the opposite
+		     (mos-lsmve.16 F6). -->
+		{#if noteWorthy && !value.trim() && saveState !== 'error' && !saveFailed}
 			<p class="text-xs text-base-content/60">{NOTE_HINT}</p>
 		{/if}
 	</div>

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

@@ -13,6 +13,10 @@ interface Props {
     options?: readonly VerdictOption[];
     /** Current round key (version, retestSince…). */
     round?: string | number | null;
+    /** The host's own save failed (e.g. the verdict's save): the hint must
+     * not claim the verdict is saved while the block shows "Not saved"
+     * (mos-lsmve.16 F6). */
+    saveFailed?: boolean;
     /** Persist the note. Throw / reject to show "Not saved". */
     onSave?: (text: string, ctx: {
         round: string | number | null;

package/dist/components/review/VerdictControl.svelte

@@ -13,12 +13,17 @@
   - One-key hotkeys from `options[].key` (and `u` = Undo) while focus is in
     the control. Handled keys are preventDefault-ed so a page-level
     reviewKeys() handler skips them.
+  - `trailing` renders the row's trailing actions (a Note toggle…) in ONE
+    non-breaking group with Undo, so a narrow card wraps the whole group —
+    the note button never strands alone on its own row (mos-lsmve.16 F7:
+    it used to wrap alone, below Undo).
   - Sizes: `sm` (cards, default) and `xs` (inline strips).
 
   The `options` array is the same one ReviewNote (`opensNote`) and
   reviewKeys (`key`) take.
 -->
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { VerdictOption, VerdictTone } from '../../actions/reviewKeys';
 
 	interface Props {
@@ -35,6 +40,9 @@
 		undoLabel?: string;
 		/** Show each option's hotkey as a keycap inside its button. */
 		showKeys?: boolean;
+		/** Trailing actions (Note toggle…), kept in one non-breaking group
+		 * with Undo so the wrap boundary falls before the pair. */
+		trailing?: Snippet;
 		/** Local hotkeys while focus is inside the control. Default true. */
 		hotkeys?: boolean;
 		disabled?: boolean;
@@ -50,6 +58,7 @@
 		label = 'Verdict',
 		undoLabel = 'Undo',
 		showKeys = false,
+		trailing = undefined,
 		hotkeys = true,
 		disabled = false,
 		class: className = ''
@@ -145,19 +154,27 @@
 			</button>
 		{/each}
 	</div>
-	{#if value && onUndo}
-		<button
-			type="button"
-			class="btn btn-ghost {sizeClass} gap-1 px-2 text-base-content/75 hover:text-base-content"
-			aria-label="{undoLabel} — {label}"
-			aria-keyshortcuts="u"
-			{disabled}
-			onclick={() => onUndo?.()}
-		>
-			<svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-				<path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />
-			</svg>
-			{undoLabel}
-		</button>
+	<!-- Undo + trailing actions in one ATOMIC span: the row's wrap boundary
+	     falls before the pair, so Undo and whatever trails it (the Note
+	     toggle) always sit on the same line (mos-lsmve.16 F7). -->
+	{#if value && onUndo || trailing}
+		<span class="flex items-center gap-2">
+			{#if value && onUndo}
+				<button
+					type="button"
+					class="btn btn-ghost {sizeClass} gap-1 px-2 text-base-content/75 hover:text-base-content"
+					aria-label="{undoLabel} — {label}"
+					aria-keyshortcuts="u"
+					{disabled}
+					onclick={() => onUndo?.()}
+				>
+					<svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+						<path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />
+					</svg>
+					{undoLabel}
+				</button>
+			{/if}
+			{#if trailing}{@render trailing()}{/if}
+		</span>
 	{/if}
 </div>

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { VerdictOption } from '../../actions/reviewKeys';
 interface Props {
     options: readonly VerdictOption[];
@@ -13,6 +14,9 @@ interface Props {
     undoLabel?: string;
     /** Show each option's hotkey as a keycap inside its button. */
     showKeys?: boolean;
+    /** Trailing actions (Note toggle…), kept in one non-breaking group
+     * with Undo so the wrap boundary falls before the pair. */
+    trailing?: Snippet;
     /** Local hotkeys while focus is inside the control. Default true. */
     hotkeys?: boolean;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",