@joewinke/jatui 0.43.0 → 0.45.0

package/CLAUDE.md

@@ -92,6 +92,7 @@ Then import:
 | `LoadingSpinner` | Spinner animation | `size`, `color` |
 | `Sparkline` | Inline mini chart | `data: number[]`, `width`, `height`, `color` |
 | `LazyImage` | Image with lazy loading + placeholder | `src`, `alt`, `placeholder` |
+| `ImageReveal` | Holds an image slot while the image doesn't exist yet (a logo lookup, an AI generation): a token-tinted ripple (`role="status"`, `aria-busy`) while `src` is null and while the bytes decode, then blur-to-sharp on `--motion-*` + `onReveal`. `src=''` or a failed load → calm initials from `alt` (or an image glyph) — never a broken `<img>`. Ripple is `.jatui-motion-ambient`: calm / reduced motion = static tint, instant swap. Clean-room (BoardUI's image-gen effect is Pro). Pure helpers: `imageRevealPhase`, `imageRevealInitials`. | `src` (`string \| null`), `alt`, `shape` (`square\|rounded\|circle`), `size` (`xs…xl` \| px \| CSS \| `fill`), `tone` (semantic or CSS colour), `label`, `initials?`, `fit?`, `phase` (bindable, read-only), `onReveal?(src)`, `onError?(src)`, `fallback?` (snippet) |
 | `Empty` | Zero-state surface — v1 thin copy/children block still works; pass `title` for the v2 hero layout (upstreamed from the IDE's EmptyState): named `glyph` (11 curated Heroicons), `size` (sm/md/lg), `pulse` (reduced-motion gated, tinted with `--color-primary`), `icon` snippet override, CTA `actions` snippet, `description`, extra `children` below. | `title` (opts into v2), `description`, `glyph`, `size`, `pulse`, `icon`/`actions` (snippets), `copy`, `class`, `children` |
 | `ErrorState` | Standard "this failed" surface (upstreamed from the IDE's ErrorState) — error-token themed icon, optional Retry button, extra `actions`, collapsible `details` block for raw error output. Centered card mirroring `Empty` v2. | `title`, `message`, `details`, `retryLabel`, `onRetry`, `size`, `actions` (snippet) |
 | `HunkDiffView` | Side-by-side diff with line numbers, red/green backgrounds, strikethrough on removed lines, inline word-level highlights via the `diff` lib. Used for reviewing YAML/text changes per hunk. | `oldText: string \| null`, `newText: string \| null`, `unified?: boolean` |
@@ -176,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. **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). 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. 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). 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/artifact-blocks/blocks/callout/block.js

@@ -15,7 +15,11 @@ const EXAMPLE = {
     meta: [
         { label: "asked by", value: "Support lead" },
         { label: "priority", value: "P1", tone: "warning" },
-        { label: "task", value: "ops-12ab3", href: "/tasks?task=ops-12ab3" },
+        // https://example.com on purpose (like primaryAction below): the docs-site
+        // showcase renders this example and the prerender crawler follows every
+        // root-relative href — a fictional /tasks route 404s and fails the build
+        // (jatui-bg4u5). Off-origin https is skipped by the crawler.
+        { label: "task", value: "ops-12ab3", href: "https://example.com/tasks?task=ops-12ab3" },
     ],
     primaryAction: { label: "Open the training plan", url: "https://example.com/training" },
     sections: [

package/dist/artifact-blocks/blocks/checklist/block.js

@@ -4,11 +4,16 @@ import { checklistSchema, } from "./schema.js";
 const EXAMPLE = {
     title: "2026-10-08 deploy: UAT",
     teamMode: true,
+    // Row urls point at https://example.com ON PURPOSE: the docs-site showcase
+    // renders this example and SvelteKit's prerender crawler follows every
+    // root-relative href (fictional /admin/... paths 404 and fail the build —
+    // jatui-bg4u5). Off-origin https is skipped by the crawler and renders the
+    // external/new-tab branch, so the example still demos test links.
     rows: [
         {
             id: "board-day-move",
             title: "Scheduling board day-move gestures + bulk move",
-            url: "/admin/scheduling/board",
+            url: "https://example.com/admin/scheduling/board",
             owner: "LateClay769",
             note: "Drag a card to another day (spring arrows), then bulk-move 3 cards; expect the undo toast.",
             status: "untested",
@@ -16,7 +21,7 @@ const EXAMPLE = {
         {
             id: "team-roles",
             title: "Per-member app roles (multi-role, primary)",
-            url: "/admin/team/members",
+            url: "https://example.com/admin/team/members",
             owner: "jw",
             note: "Give a member two roles, change the primary, sign in as them and check the sidebar.",
             status: "pass",
@@ -24,7 +29,7 @@ const EXAMPLE = {
         {
             id: "blocks-phase1",
             title: "Blocks artifacts render at /a/<slug>",
-            url: "/a/blocks-smoke",
+            url: "https://example.com/a/blocks-smoke",
             owner: "agent",
             note: "Publish a markdown + stats + callout page as blocks; open its URL signed in.",
             status: "untested",
@@ -32,14 +37,14 @@ const EXAMPLE = {
         {
             id: "caller-id-trusthub",
             title: "Caller ID card shows real Trust Hub caller-NAME state",
-            url: "/admin/voice/calls",
+            url: "https://example.com/admin/voice/calls",
             owner: "agent",
             status: "blocked",
         },
         {
             id: "pe-booking-confirm",
             title: "Booking confirmation email shows the visit window",
-            url: "/admin/scheduling/bookings",
+            url: "https://example.com/admin/scheduling/bookings",
             owner: "agent",
             note: "Fixed the timezone on the window; book a slot and check the email.",
             status: "ready",

package/dist/artifact-blocks/blocks/table/block.js

@@ -61,6 +61,12 @@ const def = {
                 ],
             },
         ],
+        // Example links point at https://example.com ON PURPOSE: the docs-site
+        // showcase renders this example and SvelteKit's prerender crawler follows
+        // every root-relative href (a fictional /admin/... path 404s and fails the
+        // build — jatui-bg4u5). Off-origin https is skipped by the crawler
+        // (is_root_relative) and renders the external/new-tab link branch, so the
+        // example still demos link columns without breaking prerender.
         rows: [
             {
                 invoice: "INV-1042",
@@ -69,7 +75,7 @@ const def = {
                 due: "2026-09-14",
                 days: 42,
                 status: "overdue",
-                url: "/admin/billing/invoices/INV-1042",
+                url: "https://example.com/admin/billing/invoices/INV-1042",
             },
             {
                 invoice: "INV-1043",
@@ -78,7 +84,7 @@ const def = {
                 due: "2026-10-02",
                 days: 6,
                 status: "current",
-                url: "/admin/billing/invoices/INV-1043",
+                url: "https://example.com/admin/billing/invoices/INV-1043",
             },
             {
                 invoice: "INV-1044",
@@ -87,7 +93,7 @@ const def = {
                 due: "2026-10-11",
                 days: 0,
                 status: "sent",
-                url: "/admin/billing/invoices/INV-1044",
+                url: "https://example.com/admin/billing/invoices/INV-1044",
             },
         ],
         pageSize: 50,

package/dist/components/ImageReveal.svelte

@@ -0,0 +1,353 @@
+<!--
+  ImageReveal — a frame that shows a "generating" ripple until its image
+  exists, then brings the image in blur-to-sharp. Built for slots whose image
+  arrives late: a logo being looked up, an AI generation, a thumbnail still
+  rendering.
+
+    src null / undefined → generating: ripple on the tone, role="status",
+                           aria-busy
+    src set, not decoded → still the ripple (no half-loaded image is shown)
+    src loaded           → blur + slight scale → sharp, ripple fades; onReveal
+    src '' or onerror    → calm initials (from alt) or an image glyph — never a
+                           broken image
+
+  Colours are one tone mixed with color-mix (no hex). The ripple is a
+  decorative loop: .jatui-motion-ambient, and under data-motion="calm" or
+  prefers-reduced-motion it becomes a static tint and the image swaps in
+  without the blur.
+
+  Clean-room (jatui-vui9q): BoardUI's image-generation effect is a Pro item;
+  nothing from it was read or copied.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		IMAGE_REVEAL_RADIUS,
+		imageRevealBusy,
+		imageRevealInitials,
+		imageRevealPhase,
+		imageRevealSize,
+		imageRevealTone,
+		type ImageRevealPhase,
+		type ImageRevealShape,
+		type ImageRevealSizeName,
+		type ImageRevealToneName
+	} from './imageReveal';
+
+	interface Props {
+		/** null / undefined = still generating. '' = nothing to show (fallback). */
+		src?: string | null;
+		/** Alt text for the image; also the source of the fallback initials. */
+		alt?: string;
+		shape?: ImageRevealShape;
+		/** Named size, px number, any CSS length, or 'fill' (100% width). Always square. */
+		size?: ImageRevealSizeName | number | (string & {});
+		/** DaisyUI semantic name or any CSS colour. */
+		tone?: ImageRevealToneName | (string & {});
+		/** Screen-reader status while generating. */
+		label?: string;
+		/** Override the letters derived from `alt`. '' forces the glyph. */
+		initials?: string;
+		/** object-fit for the image. Logos usually want 'contain'. */
+		fit?: 'cover' | 'contain';
+		/** Read-only: the current phase. */
+		phase?: ImageRevealPhase;
+		/** Fires once per src, when that image has loaded. */
+		onReveal?: (src: string) => void;
+		/** Fires once per src, when that image failed to load. */
+		onError?: (src: string) => void;
+		/** Replaces the initials / glyph fallback. */
+		fallback?: Snippet;
+		class?: string;
+	}
+
+	let {
+		src = null,
+		alt = '',
+		shape = 'rounded',
+		size = 'md',
+		tone = 'primary',
+		label = 'Generating image',
+		initials,
+		fit = 'cover',
+		phase = $bindable('generating'),
+		onReveal,
+		onError,
+		fallback,
+		class: className = ''
+	}: Props = $props();
+
+	let loadedSrc = $state<string | null>(null);
+	let failedSrc = $state<string | null>(null);
+	let img = $state<HTMLImageElement | null>(null);
+
+	const current = $derived(imageRevealPhase({ src, loadedSrc, failedSrc }));
+	const busy = $derived(imageRevealBusy(current));
+	const letters = $derived(initials ?? imageRevealInitials(alt));
+
+	$effect.pre(() => {
+		phase = current;
+	});
+
+	function loaded(from: string) {
+		if (from !== src || loadedSrc === from) return;
+		loadedSrc = from;
+		onReveal?.(from);
+	}
+
+	function failed(from: string) {
+		if (from !== src || failedSrc === from) return;
+		failedSrc = from;
+		onError?.(from);
+	}
+
+	// An image served from cache (or loaded before hydration) can finish before
+	// the load listener exists, so read its state once it is in the DOM.
+	$effect(() => {
+		if (!img || !src) return;
+		const el = img;
+		const from = src;
+		if (el.complete) {
+			if (el.naturalWidth > 0) loaded(from);
+			else if (el.currentSrc || el.getAttribute('src')) failed(from);
+		}
+	});
+</script>
+
+<div
+	class="jatui-image-reveal is-{current} {className}"
+	style:--jatui-ir-tone={imageRevealTone(tone)}
+	style:--jatui-ir-size={imageRevealSize(size)}
+	style:--jatui-ir-radius={IMAGE_REVEAL_RADIUS[shape]}
+	aria-busy={busy}
+	data-phase={current}
+>
+	<span class="jatui-ir-status" role="status">{busy ? label : ''}</span>
+
+	{#if current !== 'fallback'}
+		<div class="jatui-ir-ripple" class:jatui-motion-ambient={busy} aria-hidden="true">
+			<span class="jatui-ir-ring"></span>
+			<span class="jatui-ir-ring"></span>
+			<span class="jatui-ir-ring"></span>
+			<span class="jatui-ir-core"></span>
+		</div>
+	{/if}
+
+	{#if src && current !== 'fallback'}
+		{#key src}
+			<img
+				bind:this={img}
+				class="jatui-ir-img"
+				class:is-shown={current === 'revealed'}
+				style:object-fit={fit}
+				{src}
+				{alt}
+				decoding="async"
+				onload={() => loaded(src!)}
+				onerror={() => failed(src!)}
+			/>
+		{/key}
+	{:else if current === 'fallback'}
+		{#if fallback}
+			<div class="jatui-ir-fallback">{@render fallback()}</div>
+		{:else if letters}
+			<div class="jatui-ir-fallback" role={alt ? 'img' : undefined} aria-label={alt || undefined}>
+				<span class="jatui-ir-initials" aria-hidden="true">{letters}</span>
+			</div>
+		{:else}
+			<div class="jatui-ir-fallback" role={alt ? 'img' : undefined} aria-label={alt || undefined}>
+				<svg class="jatui-ir-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+					<rect x="3" y="4" width="18" height="16" rx="2" />
+					<circle cx="9" cy="10" r="1.75" />
+					<path d="m21 16-5-5-9 9" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.jatui-image-reveal {
+		--jatui-ir-reveal: calc(var(--motion-move, 300ms) * 2);
+		position: relative;
+		display: inline-grid;
+		place-items: center;
+		width: var(--jatui-ir-size);
+		max-width: 100%;
+		aspect-ratio: 1;
+		overflow: hidden;
+		isolation: isolate;
+		container-type: inline-size;
+		border-radius: var(--jatui-ir-radius);
+		background: color-mix(in oklab, var(--jatui-ir-tone) 7%, var(--color-base-100, Canvas));
+		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--jatui-ir-tone) 14%, transparent);
+		vertical-align: middle;
+	}
+
+	.jatui-ir-status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	/* ---- generating: ripple ---- */
+	.jatui-ir-ripple {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		background: radial-gradient(
+			circle at 50% 50%,
+			color-mix(in oklab, var(--jatui-ir-tone) 16%, transparent) 0%,
+			transparent 70%
+		);
+		transition: opacity var(--jatui-ir-reveal) var(--motion-glide, ease-out);
+	}
+
+	.jatui-ir-ring,
+	.jatui-ir-core {
+		grid-area: 1 / 1;
+		border-radius: 9999px;
+	}
+
+	.jatui-ir-ring {
+		width: 90%;
+		aspect-ratio: 1;
+		border: max(1px, 2cqi) solid
+			color-mix(in oklab, var(--jatui-ir-tone) 45%, transparent);
+		opacity: 0;
+		transform: scale(0.2);
+		animation: jatui-ir-ripple 2400ms var(--motion-glide, ease-out) infinite;
+	}
+
+	.jatui-ir-ring:nth-child(2) {
+		animation-delay: 800ms;
+	}
+
+	.jatui-ir-ring:nth-child(3) {
+		animation-delay: 1600ms;
+	}
+
+	.jatui-ir-core {
+		width: 22%;
+		aspect-ratio: 1;
+		background: color-mix(in oklab, var(--jatui-ir-tone) 55%, transparent);
+		filter: blur(4cqi);
+		animation: jatui-ir-breathe 2400ms ease-in-out infinite;
+	}
+
+	@keyframes jatui-ir-ripple {
+		0% {
+			opacity: 0;
+			transform: scale(0.2);
+		}
+		15% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			transform: scale(1.35);
+		}
+	}
+
+	@keyframes jatui-ir-breathe {
+		0%,
+		100% {
+			opacity: 0.55;
+			transform: scale(0.85);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.1);
+		}
+	}
+
+	/* ---- reveal ---- */
+	.jatui-ir-img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		filter: blur(calc(12cqi + 4px));
+		transform: scale(1.06);
+		transition:
+			opacity var(--jatui-ir-reveal) var(--motion-glide, ease-out),
+			filter var(--jatui-ir-reveal) var(--motion-glide, ease-out),
+			transform var(--jatui-ir-reveal) var(--motion-glide, ease-out);
+	}
+
+	.jatui-ir-img.is-shown {
+		opacity: 1;
+		filter: none;
+		transform: none;
+	}
+
+	.is-revealed .jatui-ir-ripple {
+		opacity: 0;
+		visibility: hidden;
+		transition:
+			opacity var(--jatui-ir-reveal) var(--motion-glide, ease-out),
+			visibility 0s linear var(--jatui-ir-reveal);
+	}
+
+	.is-revealed {
+		background: transparent;
+		box-shadow: none;
+	}
+
+	/* ---- fallback ---- */
+	.jatui-ir-fallback {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		color: color-mix(in oklab, var(--jatui-ir-tone) 75%, var(--color-base-content, CanvasText));
+	}
+
+	.jatui-ir-initials {
+		font-weight: 600;
+		font-size: 36cqi;
+		line-height: 1;
+		letter-spacing: 0.02em;
+	}
+
+	.jatui-ir-glyph {
+		width: 42%;
+		height: 42%;
+		opacity: 0.7;
+	}
+
+	/* ---- calm / reduced motion: static tint, instant swap ---- */
+	:global([data-motion='calm']) .jatui-ir-ring,
+	:global([data-motion='calm']) .jatui-ir-core,
+	.jatui-image-reveal:global([data-motion='calm']) .jatui-ir-ring,
+	.jatui-image-reveal:global([data-motion='calm']) .jatui-ir-core {
+		animation: none;
+	}
+	:global([data-motion='calm']) .jatui-ir-ring,
+	.jatui-image-reveal:global([data-motion='calm']) .jatui-ir-ring {
+		opacity: 0;
+	}
+	:global([data-motion='calm']) .jatui-image-reveal,
+	.jatui-image-reveal:global([data-motion='calm']) {
+		--jatui-ir-reveal: 0s;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-image-reveal {
+			--jatui-ir-reveal: 0s;
+		}
+		.jatui-ir-ring,
+		.jatui-ir-core {
+			animation: none;
+		}
+		.jatui-ir-ring {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import { type ImageRevealPhase, type ImageRevealShape, type ImageRevealSizeName, type ImageRevealToneName } from './imageReveal';
+interface Props {
+    /** null / undefined = still generating. '' = nothing to show (fallback). */
+    src?: string | null;
+    /** Alt text for the image; also the source of the fallback initials. */
+    alt?: string;
+    shape?: ImageRevealShape;
+    /** Named size, px number, any CSS length, or 'fill' (100% width). Always square. */
+    size?: ImageRevealSizeName | number | (string & {});
+    /** DaisyUI semantic name or any CSS colour. */
+    tone?: ImageRevealToneName | (string & {});
+    /** Screen-reader status while generating. */
+    label?: string;
+    /** Override the letters derived from `alt`. '' forces the glyph. */
+    initials?: string;
+    /** object-fit for the image. Logos usually want 'contain'. */
+    fit?: 'cover' | 'contain';
+    /** Read-only: the current phase. */
+    phase?: ImageRevealPhase;
+    /** Fires once per src, when that image has loaded. */
+    onReveal?: (src: string) => void;
+    /** Fires once per src, when that image failed to load. */
+    onError?: (src: string) => void;
+    /** Replaces the initials / glyph fallback. */
+    fallback?: Snippet;
+    class?: string;
+}
+declare const ImageReveal: import("svelte").Component<Props, {}, "phase">;
+type ImageReveal = ReturnType<typeof ImageReveal>;
+export default ImageReveal;

package/dist/components/VideoPlayer.svelte

@@ -66,6 +66,11 @@
 	 * · The keyboard map (video/keys.ts) is the single source the keydown
 	 *   handler and the `?` overlay both read — a key that exists is documented,
 	 *   a documented key exists.
+	 * · Extension parity (mos-telti, jatui-xz6so): a double-click on the picture
+	 *   toggles fullscreen (E10, where the player owns the controls); a buffering
+	 *   spinner covers `waiting` (E13); volume and mute persist across reloads
+	 *   through the settings store (E12 — remembered media state, never panel
+	 *   rows).
 	 *
 	 * Internals live in `src/lib/video/` (band / keys / rate / deepLink /
 	 * settings + types/time/model; audio, night and presence are contracts for
@@ -257,7 +262,10 @@
 		localSettingsStore,
 		panelGroups,
 		settingSpec,
+		SETTINGS_WRITE_DELAY_MS,
 		VIDEO_SETTINGS,
+		REMEMBERED_MUTED,
+		REMEMBERED_VOLUME,
 		type SettingAvailability,
 		type SettingsSession,
 		type SettingValue,
@@ -799,11 +807,25 @@
 	let volumeLevel = $state(1);
 	let mutedNow = $state(false);
 	let isFullscreen = $state(false);
+	// E13 (jatui-xz6so) — extension library.js:5843: playback is waiting for
+	// data. `waiting` raises it; `playing`/`canplay` clear it (canplay also
+	// ends a stall the viewer paused through).
+	let buffering = $state(false);
 	function syncVolume() {
 		if (!videoEl) return;
 		volumeLevel = videoEl.volume;
 		mutedNow = videoEl.muted;
 	}
+	/** E12 (jatui-xz6so): the user moved volume or mute. Mirrored into state
+	 * here, and remembered where media state is persisted — directly from the
+	 * gesture, NOT via the element's volumechange, which engines may delay or
+	 * batch past the moment the next store read resolves. A gesture made
+	 * before that read resolves wins (the settings session's rule). */
+	function userVolumeGesture() {
+		syncVolume();
+		mediaTouched = true;
+		rememberMediaState();
+	}
 	function togglePlay() {
 		const v = videoEl;
 		if (!v) return;
@@ -816,6 +838,7 @@
 		v.muted = !v.muted;
 		if (!v.muted && v.volume === 0) v.volume = 0.5;
 		showVolumeOsd(v.volume, v.muted);
+		userVolumeGesture();
 	}
 	function onVolumeInput(e: Event) {
 		const v = videoEl;
@@ -824,12 +847,23 @@
 		v.volume = Math.min(1, Math.max(0, next));
 		v.muted = next === 0;
 		showVolumeOsd(v.volume, v.muted);
+		userVolumeGesture();
 	}
 	function toggleFullscreen() {
 		if (typeof document === 'undefined') return;
 		if (document.fullscreenElement) void document.exitFullscreen?.();
 		else void stageWrapEl?.requestFullscreen?.();
 	}
+	/** E10 (jatui-xz6so) — extension library.js:5836: a double-click on the
+	 * picture toggles fullscreen. Bound only where the player owns the
+	 * controls: with native controls the browser already does this on the
+	 * video itself, and a second toggle would fight it. The double-click's
+	 * two clicks toggle play and un-toggle it, so playback ends where it
+	 * started — only the view changes. */
+	function onStageDblClick(e: MouseEvent) {
+		e.preventDefault();
+		toggleFullscreen();
+	}
 	/** The speed button: the listening speeds people actually pick, in
 	 * order, wrapping back to 1×. `-`/`=` still walk the fine staircase. */
 	const SPEED_CYCLE = [1, 1.25, 1.5, 1.75, 2];
@@ -2038,6 +2072,15 @@
 	// mid-session preference flip is respected instead of being a mount-only
 	// decision. The `.play()` promise can reject (no user gesture, tab backgrounded)
 	// — that's fine, the poster stays and the controls remain.
+	//
+	// The mandated mute is set HERE, right before the play, and nowhere else:
+	// it used to ride the element as `muted={effectiveAutoplay || undefined}`,
+	// which Svelte compiles into the stage's SHARED template effect — re-run by
+	// every unrelated state change (clock, OSD, aria values) — and each re-run
+	// reset `video.muted` to false, silently un-muting the viewer a moment
+	// after every mute (jatui-xz6so: surfaced by volume/mute persistence, which
+	// needs the choice to stick long enough to save). A mute the viewer makes
+	// on an autoplaying clip now stays made.
 	let didAutoplay = false;
 	$effect(() => {
 		const v = videoEl;
@@ -2343,6 +2386,100 @@
 		flashOsd(next ? 'Theater mode' : 'Default view');
 	}
 
+	// ── Remembered volume & mute (E12, jatui-xz6so) ──────────────────────
+	// Extension library.js:5768 — the volume level and the mute choice survive
+	// a reload, persisted through the same store the settings registry writes
+	// (the host's `settingsStore`, else this browser's localStorage — the
+	// theater split; `settings/remembered.ts` holds the ids and the
+	// never-throws coercion). Two write paths: the player's own gestures hook
+	// directly (userVolumeGesture — an engine may delay or batch volumechange
+	// past the moment a pending store read resolves, and the gesture must win),
+	// and the element's `volumechange` covers the one path the player can't
+	// see — the native bar's own volume control. The writes that are the
+	// PLAYER's, not the user's, never persist: the wind-down fade's ~400
+	// volume steps, and the load-time restore below.
+	const localMediaStore = localSettingsStore();
+	let mediaRestoring = false;
+	let mediaTouched = false;
+	let mediaWriteTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function onVolumeChange() {
+		syncVolume();
+		// A restore writes first and explains later; the fade's writes are ours.
+		if (mediaRestoring || windPhase === 'fading') return;
+		mediaTouched = true;
+		rememberMediaState();
+	}
+
+	/** A burst of wheel steps or a dragged slider is one write, not one per tick. */
+	function rememberMediaState() {
+		const store = settingsStore ?? localMediaStore;
+		if (mediaWriteTimer) clearTimeout(mediaWriteTimer);
+		mediaWriteTimer = setTimeout(() => flushMediaState(store), SETTINGS_WRITE_DELAY_MS);
+	}
+
+	function flushMediaState(store: VideoSettingsStore) {
+		mediaWriteTimer = null;
+		const v = videoEl;
+		if (!v) return;
+		// Onto the 0.05 gesture grid, so 0.35000000000000003 never reaches a store.
+		writeRemembered(store, REMEMBERED_VOLUME.id, Math.round(v.volume * 20) / 20);
+		writeRemembered(store, REMEMBERED_MUTED.id, v.muted);
+	}
+
+	function writeRemembered(store: VideoSettingsStore, id: string, value: SettingValue) {
+		try {
+			const r = store.set(id, value);
+			if (r && typeof (r as Promise<void>).catch === 'function') (r as Promise<void>).catch(() => {});
+		} catch {
+			/* a store that throws is a store that didn't save — never an error in the player */
+		}
+	}
+
+	// The load-time read, once per store identity: a junk or throwing store
+	// reads as nothing stored, and a choice made before the read resolves wins
+	// (the settings session's rule, mirrored here). An autoplaying clip keeps
+	// the browser-mandated mute — unmuting it is the viewer's gesture; the
+	// restored level is already in place for when they do.
+	$effect(() => {
+		const store = settingsStore ?? localMediaStore;
+		let cancelled = false;
+		untrack(() => {
+			void Promise.all([store.get(REMEMBERED_VOLUME.id), store.get(REMEMBERED_MUTED.id)])
+				.then(([rawVolume, rawMuted]) => {
+					if (cancelled || mediaTouched) return;
+					applyRememberedMedia(REMEMBERED_VOLUME.coerce(rawVolume), REMEMBERED_MUTED.coerce(rawMuted));
+				})
+				.catch(() => {});
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	function applyRememberedMedia(volume: number | undefined, muted: boolean | undefined) {
+		const v = videoEl;
+		if (!v) return;
+		mediaRestoring = true;
+		if (volume !== undefined) v.volume = volume;
+		if (muted !== undefined && !effectiveAutoplay) v.muted = muted;
+		// The element's volumechange may fire synchronously or be queued — cover
+		// both before the restore's own writes can read as a user choice.
+		setTimeout(() => (mediaRestoring = false), 0);
+	}
+
+	// Unmount sends whatever is pending, like the session's flush. The store
+	// captured here is the one the pending writes were destined for.
+	$effect(() => {
+		const store = settingsStore ?? localMediaStore;
+		return () => {
+			if (mediaWriteTimer) {
+				clearTimeout(mediaWriteTimer);
+				flushMediaState(store);
+			}
+		};
+	});
+
 	/** A viewer choice from outside the panel (N, the moon wheel) — saved like a panel change. */
 	function rememberSetting(id: string, v: SettingValue) {
 		settingsSession?.change(id, v);
@@ -2857,6 +2994,7 @@
 		videoEl.volume = next;
 		if (next > 0) videoEl.muted = false;
 		showVolumeOsd(next, next === 0);
+		userVolumeGesture();
 	}
 
 	/**
@@ -2939,14 +3077,17 @@
 				v.volume = Math.min(1, v.volume + 0.05);
 				if (v.volume > 0) v.muted = false;
 				showVolumeOsd(v.volume, v.muted);
+				userVolumeGesture();
 				break;
 			case 'ArrowDown':
 				v.volume = Math.max(0, v.volume - 0.05);
 				showVolumeOsd(v.volume, v.muted);
+				userVolumeGesture();
 				break;
 			case 'm':
 				v.muted = !v.muted;
 				showVolumeOsd(v.volume, v.muted);
+				userVolumeGesture();
 				break;
 			case '-':
 			case '_':
@@ -3363,14 +3504,18 @@
 			style:--vp-night-vig={nightLayersOn && nightFrame ? nightFrame.levels.vig.toFixed(3) : undefined}
 			style:--vp-wind-down={windProgress > 0 ? windProgress.toFixed(3) : undefined}
 			onwheel={onStageWheel}
+			ondblclick={bandTransport && !isAudio ? onStageDblClick : undefined}
 		>
 			<video
 				bind:this={videoEl}
 				bind:currentTime
 				bind:duration
 				bind:paused
-				onvolumechange={syncVolume}
+				onvolumechange={onVolumeChange}
 				ontimeupdate={handleTimeUpdate}
+				onwaiting={() => (buffering = true)}
+				onplaying={() => (buffering = false)}
+				oncanplay={() => (buffering = false)}
 				onloadedmetadata={onLoadedMetadata}
 				onseeked={() => {
 					syncUrlNow();
@@ -3395,7 +3540,6 @@
 				{src}
 				{loop}
 				crossorigin={crossorigin ?? undefined}
-				muted={effectiveAutoplay || undefined}
 				poster={isAudio ? undefined : (poster ?? undefined)}
 				controls={!bandTransport}
 				playsinline
@@ -3432,6 +3576,27 @@
 				     OSD, which carries the hint. Gone the instant progress is 0. -->
 				<div class="vp-wind-veil" aria-hidden="true"></div>
 			{/if}
+			{#if buffering && !isAudio}
+				<!-- Buffering spinner (E13, jatui-xz6so): playback is waiting for
+				     data — extension library.js:5843. Decorative (aria-hidden): the
+				     media element and the timeline already report the stall to AT.
+				     After the night and wind-down veils in DOM order, so a dimmed
+				     picture never hides it. -->
+				<div class="vp-buffering" aria-hidden="true">
+					<svg
+						class="vp-buffering-ring"
+						viewBox="0 0 24 24"
+						width="26"
+						height="26"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+					>
+						<path d="M21 12a9 9 0 1 1-9-9" />
+					</svg>
+				</div>
+			{/if}
 			<div class="vp-osd" class:on={osdOn} aria-hidden="true">{osd}</div>
 			<!-- Volume OSD (jatui-pu698): speaker glyph + level bar + %, centred
 			     near the top of the stage so a wheel/keyboard volume gesture is
@@ -4486,6 +4651,47 @@
 		min-width: 3.5rem;
 	}
 
+	/* ── Buffering spinner (E13, jatui-xz6so) ─────────────────────────── */
+	/* Playback is waiting for data: a small ring, dead centre of the stage,
+	   on the same token surface as the volume OSD so it is legible on any
+	   frame. Appearing is an opacity fade only — reduced-motion safe — and
+	   the ROTATION alone is gated off under prefers-reduced-motion (a static
+	   ring still reads as "working"; nothing slides or scales). */
+	.vp-buffering {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: grid;
+		place-items: center;
+		width: 56px;
+		height: 56px;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-base-100) 85%, transparent);
+		backdrop-filter: blur(8px);
+		color: var(--color-base-content);
+		pointer-events: none;
+		z-index: 10;
+		box-shadow: 0 4px 16px color-mix(in oklch, black 20%, transparent);
+		animation: vp-buffer-in var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-buffering-ring {
+		animation: vp-buffer-spin 0.9s linear infinite;
+	}
+
+	@keyframes vp-buffer-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes vp-buffer-in {
+		from {
+			opacity: 0;
+		}
+	}
+
 	/* 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 {
@@ -5264,6 +5470,16 @@
 			transition: none;
 		}
 
+		/* E13: the spinner's fade-in and its rotation both stand down — a
+		   static ring still reads as "working". */
+		.vp-buffering {
+			animation: none;
+		}
+
+		.vp-buffering-ring {
+			animation: none;
+		}
+
 		.vp-play:hover,
 		.vp-play:active {
 			transform: none;

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

@@ -46,6 +46,11 @@ export type { VideoSettingsStore, SettingValue, SettingSpec } from '../video/set
      * · The keyboard map (video/keys.ts) is the single source the keydown
      *   handler and the `?` overlay both read — a key that exists is documented,
      *   a documented key exists.
+     * · Extension parity (mos-telti, jatui-xz6so): a double-click on the picture
+     *   toggles fullscreen (E10, where the player owns the controls); a buffering
+     *   spinner covers `waiting` (E13); volume and mute persist across reloads
+     *   through the settings store (E12 — remembered media state, never panel
+     *   rows).
      *
      * Internals live in `src/lib/video/` (band / keys / rate / deepLink /
      * settings + types/time/model; audio, night and presence are contracts for

package/dist/components/imageReveal.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Pure helpers behind ImageReveal: which phase the frame is in, the initials
+ * fallback, and the size / shape / tone lookups. No DOM, so
+ * tests/unit/imageReveal.test.ts runs them in node.
+ *
+ * Clean-room (jatui-vui9q): BoardUI's "AI Image Generation" item is in the
+ * Pro tier, so no BoardUI source was read or copied.
+ */
+/**
+ * generating — no src yet (`null`/`undefined`): the ripple runs.
+ * loading    — a src arrived but the bytes haven't decoded: the ripple keeps
+ *              running, the image waits underneath at blur + opacity 0.
+ * revealed   — the image loaded: blur-to-sharp, the ripple fades out.
+ * fallback   — `src === ''` or the image failed: calm initials / empty glyph.
+ */
+export type ImageRevealPhase = 'generating' | 'loading' | 'revealed' | 'fallback';
+export type ImageRevealShape = 'square' | 'rounded' | 'circle';
+export type ImageRevealSizeName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fill';
+/** DaisyUI semantic colour names accepted as a `tone`. */
+export type ImageRevealToneName = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export interface ImageRevealState {
+    src: string | null | undefined;
+    /** The src whose load event fired (null if none has). */
+    loadedSrc: string | null;
+    /** The src whose error event fired (null if none has). */
+    failedSrc: string | null;
+}
+/**
+ * Phase from the current src plus what the browser reported for it. Load and
+ * error are keyed by src, so a new src starts over at `loading` without the
+ * component having to reset flags.
+ */
+export declare function imageRevealPhase({ src, loadedSrc, failedSrc }: ImageRevealState): ImageRevealPhase;
+/** True while the frame is still waiting for something to show. */
+export declare function imageRevealBusy(phase: ImageRevealPhase): boolean;
+/**
+ * Up to two letters from the alt text: "Acme Corp" → "AC", "acme" → "A",
+ * "the-north-face" → "TN". Symbols and digits-only words are skipped, so a
+ * logo alt like "Acme logo" gives "AL" — callers who want "A" pass
+ * `initials` explicitly.
+ */
+export declare function imageRevealInitials(alt: string | null | undefined): string;
+export declare const IMAGE_REVEAL_SIZES: Record<Exclude<ImageRevealSizeName, 'fill'>, number>;
+/**
+ * A CSS length for the frame's width. Named sizes and numbers are px; any
+ * other string (`'10rem'`, `'50%'`) passes through; `'fill'` is 100%.
+ */
+export declare function imageRevealSize(size: ImageRevealSizeName | number | (string & {})): string;
+export declare const IMAGE_REVEAL_RADIUS: Record<ImageRevealShape, string>;
+/** A semantic name → its DaisyUI variable; any other string is a CSS colour. */
+export declare function imageRevealTone(tone: ImageRevealToneName | (string & {})): string;

package/dist/components/imageReveal.js

@@ -0,0 +1,83 @@
+/**
+ * Pure helpers behind ImageReveal: which phase the frame is in, the initials
+ * fallback, and the size / shape / tone lookups. No DOM, so
+ * tests/unit/imageReveal.test.ts runs them in node.
+ *
+ * Clean-room (jatui-vui9q): BoardUI's "AI Image Generation" item is in the
+ * Pro tier, so no BoardUI source was read or copied.
+ */
+/**
+ * Phase from the current src plus what the browser reported for it. Load and
+ * error are keyed by src, so a new src starts over at `loading` without the
+ * component having to reset flags.
+ */
+export function imageRevealPhase({ src, loadedSrc, failedSrc }) {
+    if (src == null)
+        return 'generating';
+    if (src.trim() === '' || failedSrc === src)
+        return 'fallback';
+    if (loadedSrc === src)
+        return 'revealed';
+    return 'loading';
+}
+/** True while the frame is still waiting for something to show. */
+export function imageRevealBusy(phase) {
+    return phase === 'generating' || phase === 'loading';
+}
+/**
+ * Up to two letters from the alt text: "Acme Corp" → "AC", "acme" → "A",
+ * "the-north-face" → "TN". Symbols and digits-only words are skipped, so a
+ * logo alt like "Acme logo" gives "AL" — callers who want "A" pass
+ * `initials` explicitly.
+ */
+export function imageRevealInitials(alt) {
+    if (!alt)
+        return '';
+    const words = alt
+        .split(/[\s\-_./]+/)
+        .map((w) => w.match(/\p{L}/u)?.[0] ?? '')
+        .filter(Boolean);
+    return words
+        .slice(0, 2)
+        .join('')
+        .toLocaleUpperCase();
+}
+export const IMAGE_REVEAL_SIZES = {
+    xs: 32,
+    sm: 48,
+    md: 64,
+    lg: 96,
+    xl: 128
+};
+/**
+ * A CSS length for the frame's width. Named sizes and numbers are px; any
+ * other string (`'10rem'`, `'50%'`) passes through; `'fill'` is 100%.
+ */
+export function imageRevealSize(size) {
+    if (typeof size === 'number')
+        return `${size}px`;
+    if (size === 'fill')
+        return '100%';
+    if (size in IMAGE_REVEAL_SIZES)
+        return `${IMAGE_REVEAL_SIZES[size]}px`;
+    return size;
+}
+export const IMAGE_REVEAL_RADIUS = {
+    square: '0',
+    rounded: 'var(--jatui-radius-box, var(--radius-box, 0.5rem))',
+    circle: '9999px'
+};
+const TONE_NAMES = new Set([
+    'primary',
+    'secondary',
+    'accent',
+    'neutral',
+    'info',
+    'success',
+    'warning',
+    'error'
+]);
+/** A semantic name → its DaisyUI variable; any other string is a CSS colour. */
+export function imageRevealTone(tone) {
+    return TONE_NAMES.has(tone) ? `var(--color-${tone})` : tone;
+}

package/dist/index.d.ts

@@ -400,3 +400,6 @@ export { default as SettingsSection } from './components/settings/SettingsSectio
 export { default as SettingsRow } from './components/settings/SettingsRow.svelte';
 export type { SettingsRowContext } from './components/settings/SettingsRow.svelte';
 export * from './data/grid/index';
+export { default as ImageReveal } from './components/ImageReveal.svelte';
+export { imageRevealPhase, imageRevealBusy, imageRevealInitials, imageRevealSize, imageRevealTone, IMAGE_REVEAL_SIZES, IMAGE_REVEAL_RADIUS } from './components/imageReveal';
+export type { ImageRevealPhase, ImageRevealShape, ImageRevealSizeName, ImageRevealToneName, ImageRevealState } from './components/imageReveal';

package/dist/index.js

@@ -435,3 +435,5 @@ export { default as SegmentedControl } from './components/SegmentedControl.svelt
 export { default as SettingsSection } from './components/settings/SettingsSection.svelte';
 export { default as SettingsRow } from './components/settings/SettingsRow.svelte';
 export * from './data/grid/index';
+export { default as ImageReveal } from './components/ImageReveal.svelte';
+export { imageRevealPhase, imageRevealBusy, imageRevealInitials, imageRevealSize, imageRevealTone, IMAGE_REVEAL_SIZES, IMAGE_REVEAL_RADIUS } from './components/imageReveal';

package/dist/video/README.md

@@ -20,7 +20,7 @@ props + callback surfaces.
 | `keys.ts` | .28 (done) | The keyboard map — `PLAYER_KEYS` (the `?` overlay renders it), `chapterJump`, `FRAME_STEP_SEC`. Every key that exists is in the map; a key not in the map doesn't exist. |
 | `rate.ts` + `rate/` | .28 contract — **.32** (done) | `rate.ts` is the barrel. `compose.ts` — the contract (`composeRate`, clamp [0.0625, 16], `shouldWriteRate`'s 0.001 deadband with an exact return to base), the `SPEED_STEPS` staircase, `formatSpeedLabel`. `speaker.ts` — props → `advisors/speaker-rate`; manual rates keyed by NAME always beat measured. `silence.ts` — waveform → `advisors/smart-speed` map + boost + the OSD saving claim. `ads.ts` — `adSpans` ∪ `ad: true` turns; skip only when PLAYBACK runs into an ad, never when a seek lands in one. `tick.ts` — the component's own 120ms loop's one-tick decision. None of them write `playbackRate`; they advise. |
 | `deepLink.ts` | .28 (done) | `?t=` parse/format/read/write (replaceState, throttled, other params preserved). |
-| `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). 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. |
+| `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. |
 | `night.ts` + `night/` | **.33** (done) | `night.ts` is the barrel. `meter.ts` — 32×18 frame bytes → Rec.709 luma + blown share, asymmetric smoothing, bias-light cells from the same bytes. `levels.ts` — luma → brightness/saturation/warmth/vignette off `NIGHT_FLOOR` 0.34, blind fixed level, the light-theme surround. `clock.ts` — local-clock `auto` window + the `N` auto/on/off cycle (no hyprsunset). `track.ts` — prediction (only ever adds dimming), flash intervals, `composeNight` (darker at once, brighter released per tick — never a jump). |
 | `presence.ts` + `presence/` | **.34** (done) | `presence.ts` is the barrel. `winddown.ts` — pure: `shouldBeginWindDown` (a locked screen skips the wait; a desktop source with no reading holds — never guess), the 20s linear fade levels (volume `1−p`, picture `1−0.92p`), the hint (the page source says it is guessing from less). `idle.ts` — Chromium's Idle Detection API, feature-detected (`IdleDetector` + secure context); `startDesktopWatch` never prompts (start() rejects unless already granted ⇒ page fallback), `requestIdleDetection` is the ONE prompting call and the player makes it only with `idleDetection` on, from a gesture inside it. `resume.ts` — the host-supplied `VideoResumeStore` (localStorage default; jatui never calls an API), the data → advisor mapping, and `planResumeSnap` (wait for boundaries, drop once the user moved > 2.5s, skip `exact`/`start`); the snapping itself is `advisors/resume-point`, not re-derived. `flip.ts` — `open-transition.js` ported: FLIP over WAAPI, two keyframes, origin restated in both, poster on every path, a no-op under prefers-reduced-motion except the poster, `flipClose` holds and the next open releases on every path. |

package/dist/video/settings/remembered.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Remembered media state (E12, jatui-xz6so) — extension-library's player
+ * settings registry (library.js:5768) ported: the volume level and the mute
+ * choice survive a reload.
+ *
+ * Deliberately NOT rows in `VIDEO_SETTINGS` (mos-5lzns.35's doctrine stands:
+ * remembering is not configuring — a settings panel that lists the current
+ * volume reads like a debug dump, and every player already carries a volume
+ * control on its transport or the native bar). They ARE coerced like settings
+ * and persisted through the SAME plumbing: the host's `VideoSettingsStore`
+ * when one is given, else this browser's `localSettingsStore()` — the exact
+ * split `player.theater` uses. The storage ids sit in the same `player.*`
+ * namespace, so a host's store keys stay one family.
+ */
+export interface RememberedSpec<T> {
+    /** Stable storage key — a host's store is keyed by this. Never rename. */
+    id: string;
+    /** What a player uses when the store holds nothing usable. */
+    default: T;
+    /**
+     * A stored value that can't be used (junk, wrong shape, a throwing
+     * `valueOf`) reads as nothing stored — never junk, never a throw. Same
+     * discipline as the registry's `coerce`.
+     */
+    coerce(raw: unknown): T | undefined;
+}
+/** The playback level, 0–1 on the player's 0.05 gesture grid. */
+export declare const REMEMBERED_VOLUME: RememberedSpec<number>;
+/** Whether playback starts muted. */
+export declare const REMEMBERED_MUTED: RememberedSpec<boolean>;

package/dist/video/settings/remembered.js

@@ -0,0 +1,44 @@
+/**
+ * Remembered media state (E12, jatui-xz6so) — extension-library's player
+ * settings registry (library.js:5768) ported: the volume level and the mute
+ * choice survive a reload.
+ *
+ * Deliberately NOT rows in `VIDEO_SETTINGS` (mos-5lzns.35's doctrine stands:
+ * remembering is not configuring — a settings panel that lists the current
+ * volume reads like a debug dump, and every player already carries a volume
+ * control on its transport or the native bar). They ARE coerced like settings
+ * and persisted through the SAME plumbing: the host's `VideoSettingsStore`
+ * when one is given, else this browser's `localSettingsStore()` — the exact
+ * split `player.theater` uses. The storage ids sit in the same `player.*`
+ * namespace, so a host's store keys stay one family.
+ */
+/** The playback level, 0–1 on the player's 0.05 gesture grid. */
+export const REMEMBERED_VOLUME = {
+    id: 'player.volume',
+    default: 1,
+    coerce(raw) {
+        try {
+            // Only numbers and numeric strings: Number() on an object runs its
+            // valueOf/toString, and on a Symbol it throws — same guard as the registry.
+            const n = typeof raw === 'number' ? raw : typeof raw === 'string' && raw.trim() !== '' ? Number(raw) : NaN;
+            if (!Number.isFinite(n))
+                return undefined;
+            return Math.min(1, Math.max(0, n));
+        }
+        catch {
+            return undefined;
+        }
+    }
+};
+/** Whether playback starts muted. */
+export const REMEMBERED_MUTED = {
+    id: 'player.muted',
+    default: false,
+    coerce(raw) {
+        if (raw === true || raw === 1 || raw === '1' || raw === 'true')
+            return true;
+        if (raw === false || raw === 0 || raw === '0' || raw === 'false')
+            return false;
+        return undefined;
+    }
+};

package/dist/video/settings.d.ts

@@ -9,6 +9,8 @@
  *   session that reads/writes through it. jatui never persists on its own.
  * · `panel.ts` — which rows a given player can offer, and how values read.
  * · `SettingsPanel.svelte` — the panel, generated wholly from the registry.
+ * · `remembered.ts` — remembered media state (volume, mute — E12), coerced
+ *   like settings and persisted through the same store, but never panel rows.
  *
  * Nothing under src/lib/video/ reads a setting directly: the component maps
  * each value onto the prop it names and the feature reads that — the
@@ -17,3 +19,4 @@
 export * from './settings/registry';
 export * from './settings/store';
 export * from './settings/panel';
+export * from './settings/remembered';

package/dist/video/settings.js

@@ -9,6 +9,8 @@
  *   session that reads/writes through it. jatui never persists on its own.
  * · `panel.ts` — which rows a given player can offer, and how values read.
  * · `SettingsPanel.svelte` — the panel, generated wholly from the registry.
+ * · `remembered.ts` — remembered media state (volume, mute — E12), coerced
+ *   like settings and persisted through the same store, but never panel rows.
  *
  * Nothing under src/lib/video/ reads a setting directly: the component maps
  * each value onto the prop it names and the feature reads that — the
@@ -17,3 +19,4 @@
 export * from './settings/registry';
 export * from './settings/store';
 export * from './settings/panel';
+export * from './settings/remembered';

package/package.json

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