@joewinke/jatui 0.52.0 → 0.54.0

package/CLAUDE.md

@@ -177,7 +177,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 take optional `progress` (0–100): an upload ring draws around the tile and a tiny % occupies the remove-× corner, cross-fading into the × at 100 (same slot, no layout shift; per-tile `role="progressbar"`). | `items: ThumbnailItem[]` (`{id, url?, alt, progress?}`), `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. A double-click on the picture toggles fullscreen (band transport; with native controls the browser owns the gesture), a buffering spinner shows while the media is waiting, and volume/mute survive a reload through `settingsStore` (else guarded localStorage). **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; Shift+wheel over the transcript steps line by line (a plain wheel over the transcript scrolls the pane natively — the page is never trapped); `/` opens an in-transcript search (only when a transcript exists and focus is not in a text field; the omnibar yields): matches highlight in place with a live `n / m` count (`aria-live`), Enter/Shift+Enter walk next/previous (seek + the line follows), Esc closes the search first in the Esc layering. Right-click a transcript line (or `Menu` / `Shift+F10` on a focused one) for the **line menu** — Play from here, Copy text, Copy text with timestamp (`[0:02] text`), Copy link at this time when `buildTimeLink` supplies the URL builder (without it the item is absent; `?t=` shape via `buildTimeUrl`); Escape closes and returns focus to the line, the player's keys are dead while it floats, and in fill theater Esc closes the menu without leaving the theater. 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?`, `transcriptLineMenu?` (true — right-click/`Menu`/`Shift+F10` on a transcript line opens the line menu; `false` leaves transcript lines to the browser's own context menu), `buildTimeLink?` ((sec) → URL for "Copy link at this time"; the host owns the address shape), `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), `theaterMode?` (`'width'` default — the host widens its page \| `'fill'` — the player becomes a fixed full-viewport dialog: `role="dialog"` + `aria-modal`, page scroll locked, Tab trapped, Esc/the button exits and returns focus, largest 16:9 stage that fits, transcript beside it ≥64rem else below, z from `--jatui-z-theater`; a remembered theater never fills on load, only a viewer gesture), `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. A double-click on the picture toggles fullscreen (band transport; with native controls the browser owns the gesture), a buffering spinner shows while the media is waiting, and volume/mute survive a reload through `settingsStore` (else guarded localStorage). **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; Shift+wheel over the transcript steps line by line (a plain wheel over the transcript scrolls the pane natively — the page is never trapped); `/` opens an in-transcript search (only when a transcript exists and focus is not in a text field; the omnibar yields): matches highlight in place with a live `n / m` count (`aria-live`), Enter/Shift+Enter walk next/previous (seek + the line follows), Esc closes the search first in the Esc layering. Right-click a transcript line (or `Menu` / `Shift+F10` on a focused one) for the **line menu** — Play from here, Copy text, Copy text with timestamp (`[0:02] text`), Copy link at this time when `buildTimeLink` supplies the URL builder (without it the item is absent; `?t=` shape via `buildTimeUrl`); Escape closes and returns focus to the line, the player's keys are dead while it floats, and in fill theater Esc closes the menu without leaving the theater. A QR button on the transport (when `buildTimeLink` exists) opens a **continue-on-phone** card — the deep link at the current second as a scannable SVG QR; clicking the code copies it (jatui-3k7cp). 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?`, `transcriptLineMenu?` (true — right-click/`Menu`/`Shift+F10` on a transcript line opens the line menu; `false` leaves transcript lines to the browser's own context menu), `buildTimeLink?` ((sec) → URL for "Copy link at this time"; the host owns the address shape), `qrContinue?` (true — the QR button: the host's `buildTimeLink` at the current second as an SVG QR card, click the code to copy; hidden entirely when no `buildTimeLink` — the player never guesses a URL), `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), `theaterMode?` (`'width'` default — the host widens its page \| `'fill'` — the player becomes a fixed full-viewport dialog: `role="dialog"` + `aria-modal`, page scroll locked, Tab trapped, Esc/the button exits and returns focus, largest 16:9 stage that fits, transcript beside it ≥64rem else below, z from `--jatui-z-theater`; a remembered theater never fills on load, only a viewer gesture), `theaterButton?` (true), `onTheaterChange?`, `onTimeUpdate?`, `onAddBookmark?`, `bookmarkQuickAdd?` (true — with `onAddBookmark` wired, `false` hides only the built-in "+ Bookmark at …" row; the `B` key and its `?` help entry stay, for a host that owns the bookmark UI), `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

@@ -201,6 +201,7 @@
 	} from '../video/rate';
 	import { readTimeParam, WRITE_THROTTLE_MS, writeTimeParam } from '../video/deepLink';
 	import { isContextMenuKey, lineTextWithTime } from '../video/lineMenu';
+	import { qrSymbol, shareLinkAt } from '../video/qrShare';
 	import {
 		CAPTURE_NO_CORS_MESSAGE,
 		CAPTURE_NO_FRAME_MESSAGE,
@@ -340,6 +341,16 @@
 		 * said, not hidden.
 		 */
 		onCaptureFrame = undefined,
+		/**
+		 * Continue on phone (jatui-3k7cp, extension-library parity
+		 * library.js:4635): a QR button on the band transport opens a card with
+		 * the deep link AT THE CURRENT SECOND as a scannable QR code — the
+		 * host's `buildTimeLink` builds it (MOS builds its watch URL with
+		 * `?t=`); clicking the code copies the link. Hidden entirely when the
+		 * host supplies no `buildTimeLink` — the player never guesses a URL.
+		 * Default on; `false` removes the button.
+		 */
+		qrContinue = true,
 		theater = $bindable(false),
 		theaterMode = 'width',
 		theaterButton = true,
@@ -372,6 +383,7 @@
 		onMarkerClick = undefined,
 		onTimeUpdate = undefined,
 		onAddBookmark = undefined,
+		bookmarkQuickAdd = true,
 		onBookmarkContext = undefined,
 		night = $bindable(),
 		nightDepth = $bindable(NIGHT_DEPTH_DEFAULT),
@@ -553,6 +565,12 @@
 		frameCapture?: boolean;
 		/** The host's "set as poster" hook — receives a `VideoFrameCapture`. */
 		onCaptureFrame?: (capture: VideoFrameCapture) => void | Promise<void>;
+		/**
+		 * Continue on phone (jatui-3k7cp) — see the destructure note above.
+		 * Needs `buildTimeLink`: the URL is the host's (the player never
+		 * guesses one), so without a builder there is simply no QR button.
+		 */
+		qrContinue?: boolean;
 		/**
 		 * Theater mode (jatui-ee2ty) — bindable. NOT fullscreen: the player
 		 * only says it wants the page's width; the HOST lays its page out
@@ -621,6 +639,14 @@
 		onTimeUpdate?: (video: HTMLVideoElement) => void;
 		/** Present ⇒ the band grows an "add bookmark at current time" control. */
 		onAddBookmark?: (playbackSec: number, label: string) => void;
+		/**
+		 * Show the built-in quick-add row (the label input + "+ Bookmark at …"
+		 * button) when `onAddBookmark` is wired — default `true`, so existing
+		 * hosts see no change. `false` hides ONLY the row: the `B` key and its
+		 * `?` help entry stay wired to `onAddBookmark`, for a host that owns the
+		 * bookmark UI itself (MOS's watch page) and just wants the keypress.
+		 */
+		bookmarkQuickAdd?: boolean;
 		/** Right-click on the band. The host owns the panel; this only hit-tests. */
 		onBookmarkContext?: (
 			sec: number,
@@ -1062,6 +1088,46 @@
 		captureActions({ clipboardImage: captureClipboardOk, hostHook: onCaptureFrame != null })
 	);
 
+	// ── Continue on phone (jatui-3k7cp, extension library.js:4635) ───────
+	let qrOpen = $state(false);
+	let qrBtnEl: HTMLButtonElement | undefined = $state();
+	/** The link the open symbol was built from — frozen at open so the code
+	 *  under the phone's camera never changes mid-scan. */
+	let qrLink = $state('');
+	/** The second the link was frozen at — the card's own clock. */
+	let qrSec = $state(0);
+	/** Feature on: the host must own the URL (buildTimeLink). Without a
+	 *  builder there is nothing to encode — the player never guesses one —
+	 *  so the button simply doesn't exist. */
+	const qrShareOn = $derived(qrContinue && typeof buildTimeLink === 'function');
+	/** The symbol for the frozen link. Null ⇒ the card says the link is
+	 *  beyond the encoder's ceiling and keeps the copy verb working. */
+	const qrSym = $derived(qrOpen && qrLink ? qrSymbol(qrLink) : null);
+
+	/** Open the QR card: freeze the host's link at the CURRENT SECOND, then
+	 *  show the card. A builder that answers nothing (or throws) is said on
+	 *  the OSD — never a silent no-op, never an empty card. */
+	function openQrCard() {
+		const link = shareLinkAt(buildTimeLink, currentTime);
+		if (!link) {
+			flashOsd('No link to share');
+			announce('No link to share — the host did not supply one');
+			return;
+		}
+		qrLink = link;
+		qrSec = Math.max(0, Math.floor(currentTime));
+		qrOpen = true;
+	}
+
+	/** Clicking the code copies the link (and closes — the scan or the
+	 *  paste is the point; the card's job is done). The failure is said. */
+	async function copyQrLink() {
+		const ok = await copyText(qrLink);
+		flashOsd(ok ? 'Link copied' : 'Copy failed');
+		announce(ok ? 'Link copied to clipboard' : 'Copy failed');
+		if (ok) qrOpen = false;
+	}
+
 	let zoomTimer: ReturnType<typeof setTimeout> | null = null;
 	let osdTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -3286,7 +3352,10 @@
 				// menu closes itself, the theater must not leave with it. The
 				// panel's own handler may already have closed it by the time this
 				// bubble-phase handler runs, hence the target check too.
-				!(lineMenuOpen || (e.target instanceof Element && e.target.closest('[role="menu"]')))
+				!(lineMenuOpen || (e.target instanceof Element && e.target.closest('[role="menu"]'))) &&
+				// The continue-on-phone card (jatui-3k7cp) owns Escape while it
+				// is open — Escape closes the card, never the theater.
+				!qrOpen
 			) {
 				e.preventDefault();
 				toggleTheater();
@@ -3315,6 +3384,15 @@
 		// shared ContextMenu's own behaviour (focus moves out with the menu
 		// still up; click/Escape dismiss it).
 		if (lineMenuOpen || captureMenuOpen) return;
+		// The continue-on-phone card (jatui-3k7cp) owns Escape while it is
+		// open; nothing else drives the player underneath it.
+		if (qrOpen) {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				qrOpen = false;
+			}
+			return;
+		}
 		// mos-777hj — the chapter rail owns j/k (listNav) and Enter/Space (row
 		// activation) while focus is inside it; without this guard a rail `k`
 		// would also toggle play/pause and a rail `j` also seek ±5s.
@@ -4489,6 +4567,29 @@
 							</svg>
 						</button>
 					{/if}
+					{#if qrShareOn}
+						<!-- Continue on phone (jatui-3k7cp): opens the QR card for the
+						     host's buildTimeLink at the current second. A share verb,
+						     so it sits beside the capture verb at the end of the
+						     cluster. Works for audio too — the link is the point,
+						     not the picture. -->
+						<button
+							type="button"
+							class="vp-tbtn"
+							bind:this={qrBtnEl}
+							aria-haspopup="dialog"
+							aria-expanded={qrOpen}
+							aria-label="Continue on phone"
+							title="Continue on phone"
+							onclick={openQrCard}
+						>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
+								<!-- QR glyph: three finder squares + a few data modules -->
+								<path d="M3.5 3.5h6v6h-6zM14.5 3.5h6v6h-6zM3.5 14.5h6v6h-6z" />
+								<path d="M14.5 14.5h2.5v2.5h-2.5zM19 14.5h1.5v1.5H19zM14.5 19h1.5v1.5h-1.5zM18.5 18.5h2v2h-2z" fill="currentColor" stroke="none" />
+							</svg>
+						</button>
+					{/if}
 					{#if !isAudio}
 						<button
 							type="button"
@@ -4611,7 +4712,7 @@
 			</div>
 		{/if}
 
-		{#if onAddBookmark}
+		{#if onAddBookmark && bookmarkQuickAdd}
 			<div class="vp-bookmark-add">
 				<label for="vp-bookmark-label">Bookmark label</label>
 				<input
@@ -4900,6 +5001,55 @@
 			header={formatTime(currentTime, useHours)}
 		/>
 	{/if}
+
+	{#if qrShareOn && qrOpen}
+		<!-- Continue-on-phone card (jatui-3k7cp, extension library.js:4635):
+		     the same overlay family as the `?` help card — centered over the
+		     player, big enough to scan from arm's length, backdrop click or
+		     Escape closes. The link was FROZEN at open (qrLink), so the code
+		     under the phone's camera never changes mid-scan. The code is a real
+		     button: click it (or press Enter/Space on it) and the link is on
+		     the clipboard. Rendered as SVG <path> data from qrSymbol() — never
+		     {@html} of untrusted text. The black-on-white symbol is deliberate:
+		     QR contrast rules are about the SCANNER, not the theme, and a
+		     theme-tinted code scans far worse in dim rooms. -->
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div class="vp-qr-backdrop" onclick={(e) => { if (e.target === e.currentTarget) qrOpen = false; }}>
+			<div class="vp-qr-card" role="dialog" aria-label="Continue on phone">
+				<div class="vp-qr-title">Continue on phone</div>
+				<div class="vp-qr-time">{formatTime(qrSec, useHours)}</div>
+				{#if qrSym}
+					<button
+						type="button"
+						class="vp-qr-code"
+						aria-label="Copy the link: {qrLink}"
+						title="Click to copy the link"
+						onclick={copyQrLink}
+					>
+						<svg
+							viewBox="0 0 {qrSym.size} {qrSym.size}"
+							shape-rendering="crispEdges"
+							role="img"
+							aria-hidden="true"
+						>
+							<rect width="{qrSym.size}" height="{qrSym.size}" fill="#ffffff" />
+							<path d={qrSym.path} fill="#000000" />
+						</svg>
+						<span class="vp-qr-hint">Click to copy the link</span>
+					</button>
+					<div class="vp-qr-link" title={qrLink}>{qrLink}</div>
+				{:else}
+					<!-- The encoder's ceiling (version 10) — said, with the copy
+					     verb kept working: the QR is the affordance, the link is
+					     the point. -->
+					<p class="vp-qr-fallback">
+						This link is too long for a QR code.
+					</p>
+					<button type="button" class="vp-qr-copy" onclick={copyQrLink}>Copy the link instead</button>
+				{/if}
+			</div>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -5983,7 +6133,8 @@
 		outline-offset: 1px;
 	}
 
-	/* Add-bookmark row — only rendered when the host wired onAddBookmark. */
+	/* Quick-add bookmark row — rendered when the host wired onAddBookmark AND
+	   did not hide it with bookmarkQuickAdd={false} (the B key still works). */
 	.vp-bookmark-add {
 		display: flex;
 		align-items: center;
@@ -6241,6 +6392,112 @@
 		box-shadow: 0 8px 30px color-mix(in oklch, var(--color-base-content) 25%, transparent);
 	}
 
+	/* ── Continue on phone (jatui-3k7cp) — the QR card ─────────────────── */
+	/* Same overlay family as the `?` help card: centered over the player,
+	   backdrop click / Escape closes, focus stays in the root. */
+	.vp-qr-backdrop {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: color-mix(in oklch, var(--color-base-100) 70%, transparent);
+		z-index: 10;
+		border-radius: inherit;
+	}
+
+	.vp-qr-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		max-width: min(20rem, 90%);
+		padding: var(--jatui-space-lg, 12px);
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		color: var(--color-base-content);
+		box-shadow: 0 8px 30px color-mix(in oklch, var(--color-base-content) 25%, transparent);
+	}
+
+	.vp-qr-title {
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+
+	.vp-qr-time {
+		font-size: 0.75rem;
+		opacity: 0.65;
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* The code itself is a real button — click copies. The black-on-white
+	   symbol is FIXED colour, not theme tokens: QR contrast is about the
+	   scanner, not the palette (a theme-tinted code scans badly in dim
+	   rooms). Crisp edges keep modules square at every scale. */
+	.vp-qr-code {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--jatui-space-xs, 2px);
+		padding: var(--jatui-space-sm, 4px);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	.vp-qr-code:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.vp-qr-code svg {
+		width: 13rem;
+		height: 13rem;
+		max-width: 100%;
+		display: block;
+		border-radius: 0.25rem;
+	}
+
+	.vp-qr-hint {
+		font-size: 0.6875rem;
+		opacity: 0.6;
+	}
+
+	.vp-qr-link {
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 0.6875rem;
+		opacity: 0.75;
+		direction: rtl;
+		text-align: left;
+	}
+
+	.vp-qr-fallback {
+		font-size: 0.8125rem;
+		opacity: 0.8;
+		margin: var(--jatui-space-sm, 4px) 0 0;
+	}
+
+	.vp-qr-copy {
+		padding: var(--jatui-space-xs, 2px) var(--jatui-space-md, 6px);
+		border-radius: var(--jatui-radius-field, 0.5rem);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-base-content) 25%, transparent);
+		background: transparent;
+		color: inherit;
+		font-size: 0.8125rem;
+		cursor: pointer;
+	}
+
+	.vp-qr-copy:hover {
+		background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+
 	.vp-keys-title {
 		font-size: 0.66rem;
 		font-weight: 700;

package/dist/components/VideoPlayer.svelte.d.ts

@@ -222,6 +222,12 @@ type $$ComponentProps = {
     frameCapture?: boolean;
     /** The host's "set as poster" hook — receives a `VideoFrameCapture`. */
     onCaptureFrame?: (capture: VideoFrameCapture) => void | Promise<void>;
+    /**
+     * Continue on phone (jatui-3k7cp) — see the destructure note above.
+     * Needs `buildTimeLink`: the URL is the host's (the player never
+     * guesses one), so without a builder there is simply no QR button.
+     */
+    qrContinue?: boolean;
     /**
      * Theater mode (jatui-ee2ty) — bindable. NOT fullscreen: the player
      * only says it wants the page's width; the HOST lays its page out
@@ -290,6 +296,14 @@ type $$ComponentProps = {
     onTimeUpdate?: (video: HTMLVideoElement) => void;
     /** Present ⇒ the band grows an "add bookmark at current time" control. */
     onAddBookmark?: (playbackSec: number, label: string) => void;
+    /**
+     * Show the built-in quick-add row (the label input + "+ Bookmark at …"
+     * button) when `onAddBookmark` is wired — default `true`, so existing
+     * hosts see no change. `false` hides ONLY the row: the `B` key and its
+     * `?` help entry stay wired to `onAddBookmark`, for a host that owns the
+     * bookmark UI itself (MOS's watch page) and just wants the keypress.
+     */
+    bookmarkQuickAdd?: boolean;
     /** Right-click on the band. The host owns the panel; this only hit-tests. */
     onBookmarkContext?: (sec: number, existing: VideoBookmark | null, clientX: number, clientY: number) => void;
     /**

package/dist/video/README.md

@@ -22,6 +22,7 @@ props + callback surfaces.
 | `deepLink.ts` | .28 (done) | `?t=` parse/format/read/write (replaceState, throttled, other params preserved) + `buildTimeUrl` (jatui-3wl5x) — the `?t=` URL builder hosts pass as `buildTimeLink` (MOS's "copy link at this time" shape). |
 | `capture.ts` | **jatui-8nu4g** (done) | The frame-capture menu's pure pieces (extension-library parity, library.js:9262): `captureFilename` (the frame clock as the name — `frame-1m30s.png`, junk times clamp to 0), `clipboardImageSupported` (secure context + `navigator.clipboard.write` + `ClipboardItem` — false ⇒ save-only degrade, the Copy row is OMITTED, never dead), `captureActions` (which verbs the menu carries — save always, copy only where the platform can write an image, poster only when the host supplied `onCaptureFrame`), `frameDrawSize` (null before metadata — a 0×0 canvas is never a valid capture), `isCrossOriginCaptureError` (the SecurityError NAME is the contract — a tainted canvas throws SecurityError out of toBlob/toDataURL itself) and `VideoFrameCapture` (what the host's "set as poster" hook receives: blob, dataUrl, timeSec, width, height, name). The component owns the canvas and the `<video>` (drawImage / toBlob / toDataURL / download / clipboard calls live there); a cross-origin video without CORS is SAID — `CAPTURE_NO_CORS_MESSAGE` on the OSD + polite region, never a silent no-op. |
 | `lineMenu.ts` | **jatui-3wl5x** | The transcript line right-click menu's pure pieces: `isContextMenuKey` (the keyboard's right-click — Context-menu key or Shift+F10) and `lineTextWithTime` (`[1:23] text`, the row's own clock). The component owns the DOM — which row opened it, cursor vs row anchoring, focus return — and the menu itself is the shared `ContextMenu`. |
+| `qrShare.ts` | **jatui-3k7cp** | "Continue on phone" pure pieces (extension-library parity, library.js:4635): `qrSymbol` — the QR of a link as SVG PATH DATA over `advisors/qr`'s zero-dep encoder (dark modules run-merged into one `path` the test re-parses; quiet zone 4; null, never a throw, when the text can't be a symbol — the component says "too long" and keeps copy working), and `shareLinkAt` (the host's `buildTimeLink` at the FLOORED current second; every broken shape degrades to null). The URL is the host's — no builder, no button. The component owns the card: centered like the `?` help overlay, link frozen at open so the code under the phone's camera never changes mid-scan, clicking the code copies, SVG only — never `{@html}` of untrusted text. |
 | `transcriptSearch.ts` | **jatui-xmtnv** (E25/E57) | The transcript search + wheel line-scrub pure helpers: `searchHits` (case-insensitive, non-overlapping), `highlightRowHtml` (`<mark>`s around matches, everything else escaped — host transcript text is never markup), `pickMatch` (Enter walks matches from the playhead, wrapping), `lineScrubTarget` + `transcriptWheelDecision`/`effectiveWheelDelta` (Shift+wheel steps a line per ~100px notch; a plain wheel is never claimed). The component owns the box, focus, Esc layering and the `n / m` count. |
 | `settings.ts` + `settings/` | **.35** (done) — knobs added by .30–.34 | `settings.ts` is the barrel. `registry.ts` — `VIDEO_SETTINGS`: id, group, label, **mandatory hint**, the prop it drives, the availability gate (`when`); `coerce` never throws (hostile values, throwing `valueOf`, Symbols → undefined). Labels/hints are the single source for the panel AND a host help page. `store.ts` — the host-supplied `VideoSettingsStore` (`get`/`set`, either async; jatui never persists on its own) and `createSettingsSession`: coerced reads, a choice made on screen beats a late read, per-id debounced writes flushed on close. `panel.ts` — `panelGroups` (rows only for features this player has — omitted, never disabled), value formatting, radio stepping. `SettingsPanel.svelte` — the generated dialog (switch / radio group / range, focus trap, Esc/`,` close, focus handed back). `remembered.ts` (jatui-xz6so) — remembered MEDIA state (E12: volume + mute survive a reload), coerced like settings and persisted through the same store split (`settingsStore`, else guarded localStorage) but deliberately never panel rows: remembering is not configuring. In the component a stored choice overlays its prop but never creates a presence-gated feature; `night`/`nightDepth` are written through their bindings and `N`/the moon wheel are saved back. The one permission ask is `sleep.desktopIdle` turned on, from that click. A knob lands WITH its reader. |
 | `audio.ts` + `audio/` | **.31** (done) | `audio.ts` is the barrel. `rider.ts` — pure: RMS dBFS (silence → null), the 12 dB relative-gated loud estimate (rise 0.08 / forget 0.01), want-gain clamped 0.3–1.35, the asymmetric ride (down 0.15 / up 0.02), limiter constants + `compressorMakeupDb`/`limiterTrim` (DynamicsCompressor's automatic makeup, cancelled by a trim node), `routeSafety` (only blob:/data: or a `crossorigin` load — a same-origin URL may redirect cross-origin and route to SILENCE). `graph.ts` — `createAudioSession`: source → gain → quiet chain → limiter → trim → destination, analyser on the source. Context first, route last: the element is taken only when a feature is on, the source is route-safe and `ctx.state === 'running'` (gestures resume + retry; never navigator.userActivation). After routing it watches: an unsafe src or bit-exact zeros while audibly playing ⇒ `broken` (`unsafe-src` / `silent`) via `onBroken`. A construction throw is a permanent `build-failed` (context closed if the element wasn't taken; kept with source → destination if it was). Level off cancels before it sets; limiter moves are ramped. The element never enters the module — the component passes a `route` closure. |

package/dist/video/advisors/README.md

@@ -16,5 +16,5 @@
  * | `speaker-rate` | each speaker's measured wpm, the rates that even them out | rate composer's `speaker` advisor (.32) |
  * | `resume-point` | the nearest real boundary at-or-before a stored time + the line to say | resume-at-sentence (.34) |
  * | `quiet-listening` | the loudness-compensated tone graph + how much of it is wanted | audio graph (.31) |
- * | `qr` | the deep link as a scannable symbol | "continue on phone" (host UI) |
+ * | `qr` | the deep link as a scannable symbol | "continue on phone" (jatui-3k7cp, via `../qrShare`) |
  */

package/dist/video/qrShare.d.ts

@@ -0,0 +1,55 @@
+/**
+ * "Continue on phone" (jatui-3k7cp — extension-library parity, library.js:4635
+ * / lib/qr.js): the video you are watching moves from the desk to a phone
+ * mid-sentence. The player shows a QR of the deep link AT THE CURRENT SECOND —
+ * the host's `buildTimeLink` builder (the same one the transcript line menu's
+ * "Copy link at this time" uses; MOS builds its watch URL with `?t=`) — the
+ * viewer points a phone camera at it, and clicking the symbol copies the link.
+ *
+ * The URL is the HOST's: the player never guesses one, and the whole feature
+ * is absent when no builder is supplied. The encoder underneath is the
+ * zero-dependency ISO 18004 port in `advisors/qr.ts` (deliberately no npm
+ * dependency — see that file's header for why).
+ *
+ * The pure pieces live here so they stay node-testable; the component owns
+ * the DOM: the button, the card, the clipboard write.
+ *
+ * The symbol is rendered as SVG PATH DATA — dark modules become one `path`
+ * element the host stylesheet/theme can never reflow — never `{@html}` of
+ * untrusted text.
+ */
+import { type EccLevel } from './advisors/qr';
+/** The spec's minimum quiet zone — 4 modules of light around the symbol. */
+export declare const QR_QUIET_ZONE = 4;
+export interface QrSymbol {
+    /** SVG viewBox side in modules: the symbol plus the quiet zone on both sides. */
+    size: number;
+    /**
+     * Path data covering exactly the dark modules, one subpath per horizontal
+     * run (`M{x} {y}h{w}v1h-{w}z`), coordinates offset by the quiet zone so
+     * the viewBox is `0 0 size size`. Designed to be re-parsed: the unit test
+     * reconstructs the grid from this string and compares it against
+     * `qrMatrix`'s own modules.
+     */
+    path: string;
+}
+/**
+ * The QR symbol for `text` as SVG geometry, or null when it cannot exist —
+ * non-string/empty input, or text beyond the encoder's ceiling (version 10
+ * at this ECC; ~213 bytes at M). Null, never a throw: the component SAYS
+ * "too long" and keeps the copy verb working — a missing symbol must not
+ * take the whole action down.
+ */
+export declare function qrSymbol(text: unknown, opts?: {
+    ecc?: EccLevel;
+    quietZone?: number;
+}): QrSymbol | null;
+/**
+ * The shareable link at a playback second, from the host's builder. Floors
+ * the second (the link's promise is "picks up at 1:23", not "1:22.87" — same
+ * convention as deepLink.ts's writes), and degrades to null rather than
+ * throwing: a builder that isn't a function, a non-finite time, a builder
+ * that throws, or one that answers empty all mean "no link to share", which
+ * the component says instead of opening an empty card.
+ */
+export declare function shareLinkAt(build: unknown, sec: number): string | null;

package/dist/video/qrShare.js

@@ -0,0 +1,86 @@
+/**
+ * "Continue on phone" (jatui-3k7cp — extension-library parity, library.js:4635
+ * / lib/qr.js): the video you are watching moves from the desk to a phone
+ * mid-sentence. The player shows a QR of the deep link AT THE CURRENT SECOND —
+ * the host's `buildTimeLink` builder (the same one the transcript line menu's
+ * "Copy link at this time" uses; MOS builds its watch URL with `?t=`) — the
+ * viewer points a phone camera at it, and clicking the symbol copies the link.
+ *
+ * The URL is the HOST's: the player never guesses one, and the whole feature
+ * is absent when no builder is supplied. The encoder underneath is the
+ * zero-dependency ISO 18004 port in `advisors/qr.ts` (deliberately no npm
+ * dependency — see that file's header for why).
+ *
+ * The pure pieces live here so they stay node-testable; the component owns
+ * the DOM: the button, the card, the clipboard write.
+ *
+ * The symbol is rendered as SVG PATH DATA — dark modules become one `path`
+ * element the host stylesheet/theme can never reflow — never `{@html}` of
+ * untrusted text.
+ */
+import { qrMatrix } from './advisors/qr';
+/** The spec's minimum quiet zone — 4 modules of light around the symbol. */
+export const QR_QUIET_ZONE = 4;
+/**
+ * The QR symbol for `text` as SVG geometry, or null when it cannot exist —
+ * non-string/empty input, or text beyond the encoder's ceiling (version 10
+ * at this ECC; ~213 bytes at M). Null, never a throw: the component SAYS
+ * "too long" and keeps the copy verb working — a missing symbol must not
+ * take the whole action down.
+ */
+export function qrSymbol(text, opts) {
+    if (typeof text !== 'string' || text === '')
+        return null;
+    let quiet = Math.trunc(Number(opts?.quietZone));
+    if (!Number.isFinite(quiet) || quiet < 0)
+        quiet = QR_QUIET_ZONE;
+    quiet = Math.min(quiet, 8);
+    let matrix;
+    try {
+        matrix = qrMatrix(text, { ecc: opts?.ecc ?? 'M' });
+    }
+    catch {
+        return null;
+    }
+    const { size, modules } = matrix;
+    let path = '';
+    for (let y = 0; y < size; y++) {
+        const row = modules[y];
+        let x = 0;
+        while (x < size) {
+            if (!row[x]) {
+                x++;
+                continue;
+            }
+            let run = 1;
+            while (x + run < size && row[x + run])
+                run++;
+            path += `M${x + quiet} ${y + quiet}h${run}v1h-${run}z`;
+            x += run;
+        }
+    }
+    return { size: size + quiet * 2, path };
+}
+/**
+ * The shareable link at a playback second, from the host's builder. Floors
+ * the second (the link's promise is "picks up at 1:23", not "1:22.87" — same
+ * convention as deepLink.ts's writes), and degrades to null rather than
+ * throwing: a builder that isn't a function, a non-finite time, a builder
+ * that throws, or one that answers empty all mean "no link to share", which
+ * the component says instead of opening an empty card.
+ */
+export function shareLinkAt(build, sec) {
+    if (typeof build !== 'function')
+        return null;
+    const s = Number(sec);
+    if (!Number.isFinite(s) || s < 0)
+        return null;
+    let link;
+    try {
+        link = build(Math.floor(s));
+    }
+    catch {
+        return null;
+    }
+    return typeof link === 'string' && link !== '' ? link : null;
+}

package/package.json

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