@joewinke/jatui 0.38.4 → 0.38.5

package/CLAUDE.md

@@ -119,7 +119,7 @@ Item-by-item review surfaces (MOS review-ux, design mos-z8vgx). One `VerdictOpti
 | `ThumbnailGrid` | Generic thumbnail strip (chimaro port) — image tiles with text-tile fallback, +N overflow counter, remove/add affordances. Decoupled from any media library: pass `{id, url, alt}` items, or a `cell` snippet for full control of tile contents. `removeMode` — `'hover'` (default) reveals the × on hover/focus and keeps it visible on coarse (touch) pointers (ContextMenuTrigger pattern); `'always'` pins it for touch-first flows. `gridCols` (e.g. `'grid-cols-2 sm:grid-cols-4'`) switches the strip to a responsive CSS grid with column-filling tiles. | `items: ThumbnailItem[]`, `max`, `size` (`xs\|sm\|md\|lg`), `removable`+`onRemove`, `removeMode` (`hover\|always`), `addable`+`onAdd`, `onSelect`, `gridCols`, `class`, `cell` snippet |
 | `MediaWorkbench` | Full-featured image editor modal — upload, AI generate, AI edit, background removal, annotation canvas. **Preferred over `SmartImageEditor` for new image fields.** Two-column modal: preview left, 4 action tabs right (Generate, Edit, Remove BG, Annotate). Save uploads blob to `uploadEndpoint` or emits `onComplete`. Requires proxy endpoints from jst-23w1l.2. | `value` (bindable `string \| null`), `uploadEndpoint?` (default `/api/media`), `onComplete?`, `accept?` |
 | `MediaLightbox` | Full-screen media preview — z-9040 backdrop, arrow-key paging when given an array, `+/-/0` zoom, download action, Escape/backdrop close. **Use this for the general "just show it big" case** — replaces hand-rolled `fixed inset-0 z-[9040]` modals. For annotated / markup-overlaid image previews, use `ImageLightbox` instead. | `src?`, `filename?`, `kind?: 'image' \| 'video'`, `downloadUrl?`, `items?: MediaItem[]`, `initialIndex?`, `onClose?`, `zIndex?` |
-| `VideoPlayer` | **The default video surface — reach for this over a bare `<video controls>`.** One timeline band carrying a waveform-envelope scrubber, chapter flags (top edge), bookmark diamonds (bottom edge), diarized speaker colouring and scroll-to-zoom, plus an optional transcript pane (click to seek, active line auto-scroll, solo/skip per speaker, `Shift+T` toggle) and a "Talk time" legend (2+ speakers only; one voice gets no legend and no per-row name). **`kind="audio"` renders no stage**, and **`transport="band"`** (the audio default) drops the native `<video controls>` bar for a transport row on the band (play/pause, `now / total`, speed, mute + volume, fullscreen for video), so the band is the ONE timeline. **Every intelligence prop is optional** — a bare mp4 still gets the scrubber, hover-time card, wheel volume and the full keyboard map (Space/K, arrows/J/L, vol/mute, −/= speed + Backspace reset, </> frame step, [/] chapters, B bookmark, t theater, ? help overlay), and each pane lights up as its data arrives (nothing shifts layout when diarization lands late). Wheel means volume over the video (shift = seek, alt = speed) and zoom over the band. Internals live in `src/lib/video/` (band/keys/rate/deepLink/settings + contracts for audio/night/presence — see that README; gap audit vs the extension: `VIDEO-PLAYER-GAP-AUDIT.md`). | `src`, `kind?` (`'video' \| 'audio'`), `transport?` (`'native' \| 'band'`), `chapters?`, `speakers?`, `transcript?`, `bookmarks?`, `waveform?`, `talkTime?`, `startAt?`, `poster?`, `captionsSrc?`, `crossorigin?` (`'anonymous'` — what frame-reading features need), `syncUrlTime?` (`?t=` deep-link, opt-in), `transcriptPosition?` (`'below' \| 'side'`), `transcriptMaxHeight?` (pane bound — default `min(40vh, 28rem)` below, the player's height beside; the active-line follow scrolls only the pane; only a gesture that actually moves the PANE pauses it — a wheel that scrolls the page doesn't — behind a "Resume following" pill, and it resumes by itself on seek / line or chapter click / play after pause / `followResumeMs` (6000) idle while playing; a hovered chapter fills its whole span in the theme accent with full-height edges), `followResumeMs?`, `theater?` (bindable — theater mode, NOT fullscreen: control-bar button + `t`, the HOST lays the page out full-width; a side transcript moves below; remembered per viewer as the `player.theater` setting via `settingsStore`, else guarded localStorage), `theaterButton?` (true), `onTheaterChange?`, `onTimeUpdate?`, `onAddBookmark?`, `onBookmarkContext?` |
+| `VideoPlayer` | **The default video surface — reach for this over a bare `<video controls>`.** One timeline band carrying a waveform-envelope scrubber, chapter flags (top edge), bookmark diamonds (bottom edge), diarized speaker colouring and scroll-to-zoom, plus an optional transcript pane (click to seek, active line auto-scroll, solo/skip per speaker, `Shift+T` toggle) and a "Talk time" legend (2+ speakers only; one voice gets no legend and no per-row name). **`kind="audio"` renders no stage**, and **`transport="band"`** (the audio default) drops the native `<video controls>` bar for a transport row on the band (play/pause, `now / total`, speed, mute + volume, fullscreen for video), so the band is the ONE timeline. **Every intelligence prop is optional** — a bare mp4 still gets the scrubber, hover-time card, wheel volume and the full keyboard map (Space/K, arrows/J/L, vol/mute, −/= speed + Backspace reset, </> frame step, [/] chapters, B bookmark, t theater, ? help overlay), and each pane lights up as its data arrives (nothing shifts layout when diarization lands late). Wheel means volume over the video (shift = seek, alt = speed; a wheel/keyboard volume change also flashes a clear volume OSD — glyph, level bar and %, "Muted" at 0, opacity-only fade) and zoom over the band. Internals live in `src/lib/video/` (band/keys/rate/deepLink/settings + contracts for audio/night/presence — see that README; gap audit vs the extension: `VIDEO-PLAYER-GAP-AUDIT.md`). | `src`, `kind?` (`'video' \| 'audio'`), `transport?` (`'native' \| 'band'`), `chapters?`, `speakers?`, `transcript?`, `bookmarks?`, `waveform?`, `talkTime?`, `startAt?`, `poster?`, `captionsSrc?`, `crossorigin?` (`'anonymous'` — what frame-reading features need), `syncUrlTime?` (`?t=` deep-link, opt-in), `transcriptPosition?` (`'below' \| 'side'`), `transcriptMaxHeight?` (pane bound — default `min(40vh, 28rem)` below, the player's height beside; the active-line follow scrolls only the pane; only a gesture that actually moves the PANE pauses it — a wheel that scrolls the page doesn't — behind a "Resume following" pill, and it resumes by itself on seek / line or chapter click / play after pause / `followResumeMs` (6000) idle while playing; a hovered chapter fills its whole span in the theme accent with full-height edges), `followResumeMs?`, `theater?` (bindable — theater mode, NOT fullscreen: control-bar button + `t`, the HOST lays the page out full-width; a side transcript moves below; remembered per viewer as the `player.theater` setting via `settingsStore`, else guarded localStorage), `theaterButton?` (true), `onTheaterChange?`, `onTimeUpdate?`, `onAddBookmark?`, `onBookmarkContext?` |
 | `MediaCapture` | One-tap audio/selfie-video/screen(+mic) recording — a host-agnostic PRIMITIVE. Owns permission requests, MIME negotiation, the record/stop state machine, live self-preview, and mixes screen+mic audio into one track via AudioContext. Never uploads anything — hands the finished clip to `onCapture` as a Blob and the host decides what to do with it. `onCapture` may be async; the component shows "processing" until it resolves. | `onCapture: (result: MediaCaptureResult) => void \| Promise<void>`, `modes?` (default all three), `maxDurationMs?` (default 120000), `label?`, `hint?`, `compact?`, `disabled?` |
 | `MultimodalCaptureField` | "Upload a file, or record yourself going over it" as one input surface — composes `FileDropzone` (capped to one file) with `MediaCapture`. File and recording are independent (either, both, or neither); neither half uploads anything, same "validate and hand back" contract as `FileDropzone`. | `onFileSelected?`, `onFileRemoved?`, `onCapture?`, `onRecordingRemoved?`, `accept?`, `maxFileSize?`, `modes?`, `maxDurationMs?`, `file?`/`fileUrl?`/`fileName?`, `recordingSummary?` |
 | `ListenControl` | "Listen to this page" — a compact pill that expands into a TWO-ROW playback bar over the host's PER-SENTENCE audio (TTS): row 1 = play/pause · chapter chip + current sentence (full remaining width) · ONE settings pill ("1.25× · Sarah" → speed 0.75–2× + voice menu) · close; row 2 = prev/next sentence and −15s/+15s · a document-wide progress bar with chapter ticks (a hatched tail marks the not-yet-synthesized part), time, close. The host supplies an async `source` (sentences/paragraphs with ids → audio URLs, streamed page by page so playback starts on the first chunk while the rest synthesizes; pages merge by id so late URLs fill in) and gets `onSegmentChange(id)` at every boundary for highlight + scroll-follow. Media Session (lock-screen/headset controls, one document-wide position), keyboard scoped to the player (Space/K, ←/→ sentences, Shift+←/→ ±15s, [ / ] speed, Escape), speed+voice persisted in localStorage, `bind:api` for hosts wiring their own global keys, reduced-motion aware, token-only theming, never overflows its host (border-box, `max-width: 100%`, `min-width: 0` chain), fixed sticky mini-bar (same two rows) on narrow screens. Internals in `src/lib/listen/` (one timeline across per-sentence files — `buildTimeline` offsets; see `video/` for the doctrine). Demo synthesizes real WAVs locally. | `source`, `voices?`, `voiceId?` (bindable), `chapters?`, `title?`, `triggerLabel?`, `open?` (bindable), `preload?`, `estimateSec?`, `storageKey?`, `onSegmentChange?`, `onOpenChange?`, `api?` (bindable), `class?`, `children?` (custom trigger) |

package/dist/components/VideoPlayer.svelte

@@ -809,6 +809,7 @@
 		if (!v) return;
 		v.muted = !v.muted;
 		if (!v.muted && v.volume === 0) v.volume = 0.5;
+		showVolumeOsd(v.volume, v.muted);
 	}
 	function onVolumeInput(e: Event) {
 		const v = videoEl;
@@ -816,6 +817,7 @@
 		const next = Number((e.currentTarget as HTMLInputElement).value);
 		v.volume = Math.min(1, Math.max(0, next));
 		v.muted = next === 0;
+		showVolumeOsd(v.volume, v.muted);
 	}
 	function toggleFullscreen() {
 		if (typeof document === 'undefined') return;
@@ -858,6 +860,16 @@
 	let osd = $state(''); // transient wheel/keyboard readout (volume / seek / speed)
 	let osdOn = $state(false);
 
+	// ── Volume OSD (jatui-pu698) ────────────────────────────────────────────
+	// Wheel/keyboard volume feedback: a speaker glyph + horizontal level bar
+	// + % value (or "Muted" at 0), floated over the stage. Distinct from the
+	// tiny corner readout: a volume change is a physical gesture that deserves
+	// to be SEEN, not just a number blink.
+	let volOsdOn = $state(false);
+	let volOsdVolume = $state(0);
+	let volOsdMuted = $state(false);
+	let volOsdTimer: ReturnType<typeof setTimeout> | null = null;
+
 	// ── Speaker filter state ────────────────────────────────────────────────
 	let soloKey = $state(ALL_KEY);
 	let mutedKeys = $state(new Set<string>());
@@ -1382,6 +1394,24 @@
 		zoomTimer = setTimeout(() => (zoomLabelOn = false), 900);
 	}
 
+	// ── Volume OSD (jatui-pu698) ────────────────────────────────────────────
+	// Big, legible volume indicator: speaker glyph + level bar + % ("Muted" at
+	// 0). Replaces the tiny corner badge for wheel/keyboard volume gestures.
+	// Shares `osdTimer` with the plain OSD so only ONE readout floats at a
+	// time, and any pending plain flash is superseded (not queued behind).
+	function showVolumeOsd(volume: number, muted: boolean) {
+		if (volOsdTimer) clearTimeout(volOsdTimer);
+		if (osdTimer) {
+			clearTimeout(osdTimer);
+			osdTimer = null;
+		}
+		osdOn = false; // only one readout at a time
+		volOsdVolume = volume;
+		volOsdMuted = muted;
+		volOsdOn = true;
+		volOsdTimer = setTimeout(() => (volOsdOn = false), 800);
+	}
+
 	function flashOsd(text: string, ms = 900) {
 		if (osdTimer) clearTimeout(osdTimer);
 		if (!text || ms <= 0) {
@@ -2787,7 +2817,7 @@
 		const next = Math.min(1, Math.max(0, videoEl.volume - Math.sign(e.deltaY) * 0.05));
 		videoEl.volume = next;
 		if (next > 0) videoEl.muted = false;
-		flashOsd(`${Math.round(next * 100)}%`);
+		showVolumeOsd(next, next === 0);
 	}
 
 	/**
@@ -2853,15 +2883,15 @@
 			case 'ArrowUp':
 				v.volume = Math.min(1, v.volume + 0.05);
 				if (v.volume > 0) v.muted = false;
-				flashOsd(`${Math.round(v.volume * 100)}%`);
+				showVolumeOsd(v.volume, v.muted);
 				break;
 			case 'ArrowDown':
 				v.volume = Math.max(0, v.volume - 0.05);
-				flashOsd(`${Math.round(v.volume * 100)}%`);
+				showVolumeOsd(v.volume, v.muted);
 				break;
 			case 'm':
 				v.muted = !v.muted;
-				flashOsd(v.muted ? 'Muted' : `${Math.round(v.volume * 100)}%`);
+				showVolumeOsd(v.volume, v.muted);
 				break;
 			case '-':
 			case '_':
@@ -3135,6 +3165,7 @@
 	class:vp-rail-side={railOn}
 	class:vp-one-axis={nativeBarHidden}
 	class:vp-band-transport={bandTransport}
+	class:vp-vol-flash={volOsdOn}
 	class:vp-audio={isAudio}
 	class:vp-night-capable={nightPresent}
 	class:vp-night-surround={surroundMix > 0.001}
@@ -3255,10 +3286,41 @@
 				<div class="vp-wind-veil" aria-hidden="true"></div>
 			{/if}
 			<div class="vp-osd" class:on={osdOn} aria-hidden="true">{osd}</div>
-		</div>
-		</div>
+			<!-- Volume OSD (jatui-pu698): speaker glyph + level bar + %, centred
+			     near the top of the stage so a wheel/keyboard volume gesture is
+			     SEEN, not just a corner number blink. aria-hidden: the volume
+			     slider itself already reports the value to AT. -->
+			<div class="vp-volume-osd" class:on={volOsdOn} aria-hidden="true">
+				<svg
+						class="vp-vol-glyph"
+						viewBox="0 0 24 24"
+						width="24"
+						height="24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.8"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z" fill="currentColor" stroke="none" />
+						{#if volOsdMuted || volOsdVolume === 0}
+							<path d="M16 9.5l5 5M21 9.5l-5 5" />
+						{:else}
+							<path d="M15.5 9a4 4 0 0 1 0 6" />
+							{#if volOsdVolume > 0.5}<path d="M18 6.5a7.5 7.5 0 0 1 0 11" />{/if}
+						{/if}
+					</svg>
+					<span class="vp-vol-bar">
+						<span class="vp-vol-fill" style="width: {Math.round(volOsdVolume * 100)}%"></span>
+					</span>
+					<span class="vp-vol-text">
+						{volOsdMuted || volOsdVolume === 0 ? 'Muted' : `${Math.round(volOsdVolume * 100)}%`}
+					</span>
+				</div>
+			</div>
+			</div>
 
-		<!-- The band: one time axis for the envelope, chapters, speakers and
+			<!-- The band: one time axis for the envelope, chapters, speakers and
 		     bookmarks. Its height is reserved from the first frame, so data
 		     arriving late fades into already-owned space. -->
 		<div
@@ -3349,7 +3411,34 @@
 			{#if isAudio}
 				<!-- No stage to float the readout over: it rides the band. -->
 				<div class="vp-osd vp-osd-band" class:on={osdOn} aria-hidden="true">{osd}</div>
-			{/if}
+				<div class="vp-volume-osd vp-volume-osd-band" class:on={volOsdOn} aria-hidden="true">
+					<svg
+							class="vp-vol-glyph"
+							viewBox="0 0 24 24"
+							width="24"
+							height="24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.8"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z" fill="currentColor" stroke="none" />
+							{#if volOsdMuted || volOsdVolume === 0}
+								<path d="M16 9.5l5 5M21 9.5l-5 5" />
+							{:else}
+								<path d="M15.5 9a4 4 0 0 1 0 6" />
+								{#if volOsdVolume > 0.5}<path d="M18 6.5a7.5 7.5 0 0 1 0 11" />{/if}
+							{/if}
+						</svg>
+						<span class="vp-vol-bar">
+							<span class="vp-vol-fill" style="width: {Math.round(volOsdVolume * 100)}%"></span>
+						</span>
+						<span class="vp-vol-text">
+							{volOsdMuted || volOsdVolume === 0 ? 'Muted' : `${Math.round(volOsdVolume * 100)}%`}
+						</span>
+					</div>
+				{/if}
 
 			{#if hover}
 				<div
@@ -4146,6 +4235,64 @@
 		opacity: 1;
 	}
 
+	/* ── Volume OSD (jatui-pu698) ───────────────────────────────────────── */
+	/* Wheel/keyboard volume feedback: speaker glyph + level bar + %, centred
+	   near the top of the stage so a gesture is SEEN, not just a corner number
+	   blink. Token surface with backdrop so it is legible on any frame. The
+	   flash is purely opacity — no slide — so it is reduced-motion safe. */
+	.vp-volume-osd {
+		position: absolute;
+		top: 10%;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 10px 16px;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-base-100) 85%, transparent);
+		backdrop-filter: blur(8px);
+		color: var(--color-base-content);
+		font-size: 0.9rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--motion-enter, 200ms) var(--motion-glide, ease-out);
+		z-index: 10;
+		box-shadow: 0 4px 16px color-mix(in oklch, black 20%, transparent);
+	}
+
+	.vp-volume-osd.on {
+		opacity: 1;
+	}
+
+	.vp-vol-glyph {
+		flex: none;
+		opacity: 0.9;
+	}
+
+	.vp-vol-bar {
+		display: block;
+		width: 80px;
+		height: 4px;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-base-content) 20%, transparent);
+		overflow: hidden;
+	}
+
+	.vp-vol-fill {
+		display: block;
+		height: 100%;
+		background: var(--color-primary);
+		border-radius: 999px;
+		transition: width 150ms ease-out;
+	}
+
+	.vp-vol-text {
+		min-width: 3.5rem;
+	}
+
 	/* The band owns its height from the first frame so a waveform or speaker
 	   turns arriving minutes in fade into space that is already theirs. */
 	.vp-band {
@@ -4162,6 +4309,17 @@
 		opacity: 1;
 	}
 
+	/* Volume flash (jatui-pu698): reveal the transport and its volume slider
+	   on a wheel/keyboard volume change. */
+	.vp-vol-flash .vp-transport {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.vp-vol-flash .vp-volume {
+		opacity: 1;
+	}
+
 	/* Audio: no picture, so no stage at all. The element still plays. */
 	.vp-stage-audio {
 		display: none;
@@ -4828,6 +4986,7 @@
 	@media (prefers-reduced-motion: reduce) {
 		.vp-band,
 		.vp-osd,
+		.vp-volume-osd,
 		.vp-zoom,
 		.vp-lane-span,
 		.vp-chip,

package/package.json

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