@joewinke/jatui 0.5.3 → 0.6.1

package/CLAUDE.md

@@ -79,6 +79,8 @@ Then import:
 | `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) and talk-time legend. **Every intelligence prop is optional** — a bare mp4 still gets the scrubber, hover-time card, wheel volume and keyboard map, and each pane lights up as its data arrives (nothing shifts layout when diarization lands late). Wheel means volume over the video (shift = seek) and zoom over the band. | `src`, `chapters?`, `speakers?`, `transcript?`, `bookmarks?`, `waveform?`, `talkTime?`, `startAt?`, `poster?`, `captionsSrc?`, `transcriptPosition?` (`'below' \| 'side'`), `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?` |
 
 **`VideoPlayer` vs `TranscriptPlayer`:** VideoPlayer is the generalization — it does everything TranscriptPlayer does plus the timeline band, and its props are structurally compatible with TranscriptPlayer's (`TranscriptSegment[]`, `TranscriptChapter[]`, `TranscriptBookmark[]`, `TranscriptSpeakerTalkTime[]` all pass straight through). `TranscriptPlayer` stays exported and unchanged for the existing meeting-recordings viewer; use `VideoPlayer` for anything new.
 
@@ -289,6 +291,11 @@ import { DAYS_OF_WEEK, DAYS_SHORT, LOCATION_LABELS, LOCATION_ICONS } from "jatui
 import type { FileDropzoneFile } from "jatui"
 // FileDropzoneFile — { file?: File, name, mimeType, size?, url?, meta? }
 
+// MediaCapture / MultimodalCaptureField types
+import type { MediaCaptureKind, MediaCaptureResult } from "jatui"
+// MediaCaptureKind   — 'audio' | 'video' | 'screen'
+// MediaCaptureResult — { kind, blob: Blob, mimeType, durationSeconds }
+
 // SmartImageEditor types
 import type {
   ImageProcessingSpec, ImageVariantSpec,

package/dist/components/MediaCapture.svelte

@@ -0,0 +1,491 @@
+<script module lang="ts">
+	export type MediaCaptureKind = 'audio' | 'video' | 'screen'
+
+	export interface MediaCaptureResult {
+		kind: MediaCaptureKind
+		blob: Blob
+		mimeType: string
+		durationSeconds: number
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * MediaCapture — one-tap audio/selfie-video/screen(+mic) recording.
+	 *
+	 * A host-agnostic recording PRIMITIVE: it owns permission requests, MIME
+	 * negotiation, the record/stop state machine, the live self-preview for
+	 * video, and mixing screen + mic audio into a single track for `screen`
+	 * captures. It does NOT know about uploads, transcription, or storage —
+	 * every finished clip is handed to `onCapture` as a plain Blob, and the
+	 * host app decides what to do with it (upload endpoint, local preview,
+	 * whatever). `onCapture` may be async; the component shows a "processing"
+	 * state while it resolves so the host can do slow work (upload/transcribe)
+	 * without the user re-triggering a second recording mid-flight.
+	 *
+	 * Screen capture mixes the display's own audio (when the browser/source
+	 * offers it) with the microphone via a single AudioContext destination —
+	 * MediaRecorder support for multiple simultaneous audio tracks on one
+	 * MediaStream is inconsistent across browsers, so mixing to one track is
+	 * the portable choice for "narrate over a shared tab."
+	 *
+	 * Purely additive: renders nothing when neither getUserMedia nor
+	 * getDisplayMedia exists, and never throws — a permission denial or
+	 * cancelled screen-share surfaces as inline `errorMessage`, and the
+	 * component returns to idle so the caller can retry.
+	 *
+	 * Two UAT findings shaped the recording UI (mos-ow4q4.37):
+	 *   1. The elapsed clock is driven by the recorder's own `ondataavailable`
+	 *      timeslice, not only by a setInterval. A `screen` capture is normally
+	 *      started against another window, which leaves THIS page hidden — and
+	 *      a hidden page's timers are throttled to roughly one tick a minute,
+	 *      so the interval alone left the timer visibly frozen mid-recording.
+	 *   2. A fixed-position banner announces an active screen capture in the
+	 *      page itself. The browser's sharing indicator is chrome, not content:
+	 *      it is not visible from the shared window and it never says how long
+	 *      THIS recording has run.
+	 */
+	import MediaCaptureIcon from './MediaCaptureIcon.svelte'
+
+	interface Props {
+		/** Which capture modes to offer. Default: all three. */
+		modes?: MediaCaptureKind[]
+		/** Auto-stop ceiling in ms. Default 2 minutes — "quick capture", not a full recording studio. */
+		maxDurationMs?: number
+		/** Called with the finished clip. May return a Promise — the component
+		 * stays in "processing" until it settles. */
+		onCapture: (result: MediaCaptureResult) => void | Promise<void>
+		/** Prompt text above the mode buttons. */
+		label?: string
+		hint?: string
+		disabled?: boolean
+		/** Smaller footprint (icon-only mode buttons) for embedding inside a
+		 * larger composite field like MultimodalCaptureField. */
+		compact?: boolean
+		/** Override the per-mode button label. Hosts that frame recording as
+		 * "add another response" want their own wording ("Voice" vs "Add voice"),
+		 * and the screen mode in particular has been called both "Screen" and
+		 * "Show us" in different products. */
+		modeLabels?: Partial<Record<MediaCaptureKind, string>>
+		/** Prefix each mode button with a `+`, framing the modes as
+		 * add-affordances on a field that accepts SEVERAL responses rather than
+		 * as a one-shot record button. */
+		addAffordance?: boolean
+		/** Render a fixed, page-level "screen sharing is active" banner while a
+		 * `screen` capture runs. The browser's own sharing chrome lives outside
+		 * the page, so without this the page itself gives no sign it is being
+		 * recorded — the single most-reported confusion in UAT. */
+		screenIndicator?: boolean
+		/** Observe the capture state machine (phase / kind / elapsed). Lets a
+		 * host disable competing controls or mirror the recording state without
+		 * reaching into this component's internals. */
+		onStateChange?: (state: {
+			phase: 'idle' | 'recording' | 'processing' | 'error'
+			kind: MediaCaptureKind | null
+			elapsedSeconds: number
+		}) => void
+		class?: string
+	}
+
+	let {
+		modes = ['audio', 'video', 'screen'],
+		maxDurationMs = 120_000,
+		onCapture,
+		label = 'Record a note',
+		hint,
+		disabled = false,
+		compact = false,
+		modeLabels,
+		addAffordance = false,
+		screenIndicator = true,
+		onStateChange,
+		class: className = ''
+	}: Props = $props()
+
+	type Phase = 'idle' | 'recording' | 'processing' | 'error'
+	let phase = $state<Phase>('idle')
+	let activeKind = $state<MediaCaptureKind | null>(null)
+	let errorMessage = $state('')
+	let elapsedSec = $state(0)
+
+	$effect(() => {
+		onStateChange?.({ phase, kind: activeKind, elapsedSeconds: elapsedSec })
+	})
+
+	let recorder: MediaRecorder | null = null
+	let primaryStream: MediaStream | null = null
+	let secondaryStream: MediaStream | null = null
+	let audioCtx: AudioContext | null = null
+	let recordedStream: MediaStream | null = null
+	let chunks: Blob[] = []
+	let mimeUsed = ''
+	let startedAt = 0
+	let autoStopTimer: ReturnType<typeof setTimeout> | null = null
+	let tickTimer: ReturnType<typeof setInterval> | null = null
+
+	let videoPreviewEl = $state<HTMLVideoElement | null>(null)
+
+	const hasUserMedia =
+		typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia
+	const hasDisplayMedia =
+		typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getDisplayMedia
+	const hasRecorder = typeof MediaRecorder !== 'undefined'
+	const supported = hasRecorder && (hasUserMedia || hasDisplayMedia)
+
+	const showAudio = $derived(modes.includes('audio') && hasUserMedia)
+	const showVideo = $derived(modes.includes('video') && hasUserMedia)
+	const showScreen = $derived(modes.includes('screen') && hasDisplayMedia)
+	const offeredModes = $derived(
+		(['audio', 'video', 'screen'] as MediaCaptureKind[]).filter((k) =>
+			k === 'audio' ? showAudio : k === 'video' ? showVideo : showScreen
+		)
+	)
+
+	function pickMime(candidates: string[]): string {
+		for (const c of candidates) {
+			if (MediaRecorder.isTypeSupported(c)) return c
+		}
+		return ''
+	}
+
+	function stopAllTracks(stream: MediaStream | null) {
+		stream?.getTracks().forEach((t) => t.stop())
+	}
+
+	/** Recompute elapsed from the wall clock rather than incrementing a counter,
+	 * so a tick that never fired (throttled tab) can never make the display
+	 * lag the actual recording. */
+	function tick() {
+		if (!startedAt) return
+		elapsedSec = Math.floor((performance.now() - startedAt) / 1000)
+	}
+
+	function cleanup() {
+		stopAllTracks(primaryStream)
+		stopAllTracks(secondaryStream)
+		stopAllTracks(recordedStream)
+		primaryStream = null
+		secondaryStream = null
+		recordedStream = null
+		if (audioCtx) {
+			audioCtx.close().catch(() => {})
+			audioCtx = null
+		}
+		recorder = null
+		chunks = []
+		if (autoStopTimer) {
+			clearTimeout(autoStopTimer)
+			autoStopTimer = null
+		}
+		if (tickTimer) {
+			clearInterval(tickTimer)
+			tickTimer = null
+		}
+		if (typeof document !== 'undefined') {
+			document.removeEventListener('visibilitychange', tick)
+		}
+		startedAt = 0
+		if (videoPreviewEl) videoPreviewEl.srcObject = null
+	}
+
+	async function start(kind: MediaCaptureKind) {
+		if (!supported || disabled || phase === 'recording' || phase === 'processing') return
+		errorMessage = ''
+		try {
+			let stream: MediaStream
+			if (kind === 'audio') {
+				primaryStream = await navigator.mediaDevices.getUserMedia({ audio: true })
+				stream = primaryStream
+				mimeUsed = pickMime([
+					'audio/webm;codecs=opus',
+					'audio/webm',
+					'audio/mp4',
+					'audio/ogg'
+				])
+			} else if (kind === 'video') {
+				primaryStream = await navigator.mediaDevices.getUserMedia({
+					audio: true,
+					video: { facingMode: 'user' }
+				})
+				stream = primaryStream
+				mimeUsed = pickMime([
+					'video/webm;codecs=vp9,opus',
+					'video/webm;codecs=vp8,opus',
+					'video/webm',
+					'video/mp4'
+				])
+			} else {
+				primaryStream = await navigator.mediaDevices.getDisplayMedia({
+					video: true,
+					audio: true
+				})
+				try {
+					secondaryStream = await navigator.mediaDevices.getUserMedia({ audio: true })
+				} catch {
+					secondaryStream = null
+				}
+				const AudioCtxCls =
+					window.AudioContext ||
+					(window as unknown as { webkitAudioContext: typeof AudioContext })
+						.webkitAudioContext
+				audioCtx = new AudioCtxCls()
+				const dest = audioCtx.createMediaStreamDestination()
+				for (const s of [primaryStream, secondaryStream]) {
+					const tracks = s?.getAudioTracks() ?? []
+					if (tracks.length) {
+						audioCtx.createMediaStreamSource(new MediaStream(tracks)).connect(dest)
+					}
+				}
+				stream = new MediaStream([
+					...primaryStream.getVideoTracks(),
+					...dest.stream.getAudioTracks()
+				])
+				primaryStream.getVideoTracks()[0]?.addEventListener('ended', () => {
+					if (phase === 'recording') stop()
+				})
+				mimeUsed = pickMime([
+					'video/webm;codecs=vp9,opus',
+					'video/webm;codecs=vp8,opus',
+					'video/webm'
+				])
+			}
+			recordedStream = stream
+
+			if (kind === 'video' && videoPreviewEl) {
+				videoPreviewEl.srcObject = stream
+				void videoPreviewEl.play().catch(() => {})
+			}
+
+			chunks = []
+			const rec = new MediaRecorder(stream, mimeUsed ? { mimeType: mimeUsed } : undefined)
+			rec.ondataavailable = (e) => {
+				if (e.data.size > 0) chunks.push(e.data)
+				// The authoritative tick. `screen` captures are usually started
+				// against ANOTHER window or tab, which leaves this page hidden —
+				// and a hidden page's setInterval is throttled to roughly once a
+				// minute, which is exactly why the UAT screen timer sat frozen at
+				// 0:12. MediaRecorder keeps firing this at the timeslice interval
+				// regardless of page visibility, so the clock stays live.
+				tick()
+			}
+			rec.onstop = () => void finish(kind)
+			rec.start(250)
+			recorder = rec
+			startedAt = performance.now()
+			elapsedSec = 0
+			activeKind = kind
+			phase = 'recording'
+			// Belt: the interval covers the idle gap between timeslices while the
+			// page is visible. Braces: a visibility flip resyncs immediately, so
+			// returning to a backgrounded tab never shows a stale number.
+			tickTimer = setInterval(tick, 500)
+			if (typeof document !== 'undefined') {
+				document.addEventListener('visibilitychange', tick)
+			}
+			autoStopTimer = setTimeout(stop, maxDurationMs)
+		} catch {
+			cleanup()
+			phase = 'error'
+			activeKind = null
+			errorMessage =
+				kind === 'screen'
+					? 'Screen sharing was cancelled or is not available.'
+					: 'Camera/microphone permission is needed to record.'
+		}
+	}
+
+	function stop() {
+		if (recorder && recorder.state !== 'inactive') {
+			recorder.stop() // → onstop → finish()
+		}
+	}
+
+	async function finish(kind: MediaCaptureKind) {
+		const durationSeconds = (performance.now() - startedAt) / 1000
+		const blob = new Blob(chunks, { type: mimeUsed || 'video/webm' })
+		cleanup()
+
+		if (blob.size === 0) {
+			phase = 'idle'
+			activeKind = null
+			return
+		}
+
+		phase = 'processing'
+		try {
+			await onCapture({ kind, blob, mimeType: mimeUsed, durationSeconds })
+			phase = 'idle'
+			activeKind = null
+		} catch {
+			phase = 'error'
+			errorMessage = "Couldn't save that recording — please try again."
+		}
+	}
+
+	function modeIcon(kind: MediaCaptureKind): 'mic' | 'video' | 'monitor' {
+		return kind === 'audio' ? 'mic' : kind === 'video' ? 'video' : 'monitor'
+	}
+
+	const DEFAULT_MODE_LABELS: Record<MediaCaptureKind, string> = {
+		audio: 'Voice',
+		video: 'Video',
+		// "Screen" says what it captures. "Show us" said what to do with it and
+		// left people guessing (mos-ow4q4.37); hosts that preferred the old
+		// wording can pass it back through `modeLabels`.
+		screen: 'Screen'
+	}
+
+	function modeLabel(kind: MediaCaptureKind): string {
+		return modeLabels?.[kind] ?? DEFAULT_MODE_LABELS[kind]
+	}
+
+	function formatElapsed(sec: number): string {
+		const m = Math.floor(sec / 60)
+		const s = sec % 60
+		return `${m}:${String(s).padStart(2, '0')}`
+	}
+</script>
+
+{#if supported}
+	<div class="media-capture {className}">
+		{#if !compact && (label || hint)}
+			<div class="mb-2">
+				{#if label}<p class="text-base-content text-sm font-medium">{label}</p>{/if}
+				{#if hint}<p class="text-base-content/60 text-xs">{hint}</p>{/if}
+			</div>
+		{/if}
+
+		{#if phase === 'recording'}
+			<div class="flex items-center gap-3">
+				<span class="media-capture-dot"></span>
+				<span class="text-base-content/70 text-xs tabular-nums">
+					{modeLabel(activeKind as MediaCaptureKind)} — {formatElapsed(elapsedSec)}
+				</span>
+				<button type="button" class="btn btn-error btn-xs rounded-field gap-1" onclick={stop}>
+					<MediaCaptureIcon name="square" size={12} /> Stop
+				</button>
+			</div>
+			{#if activeKind === 'video'}
+				<video
+					bind:this={videoPreviewEl}
+					class="border-base-300 mt-2 h-24 w-24 rounded-field border object-cover"
+					muted
+					playsinline
+				>
+					<track kind="captions" />
+				</video>
+			{/if}
+		{:else if phase === 'processing'}
+			<div class="flex items-center gap-2">
+				<MediaCaptureIcon name="loader" size={14} class="animate-spin" />
+				<span class="text-base-content/70 text-xs">Saving…</span>
+			</div>
+		{:else}
+			<div class="flex flex-wrap gap-2">
+				{#each offeredModes as kind (kind)}
+					<button
+						type="button"
+						class="btn btn-outline btn-xs rounded-field gap-1"
+						{disabled}
+						onclick={() => start(kind)}
+					>
+						{#if addAffordance}
+							<MediaCaptureIcon name="plus" size={12} />
+						{/if}
+						<MediaCaptureIcon name={modeIcon(kind)} size={12} />
+						{modeLabel(kind)}
+					</button>
+				{/each}
+			</div>
+			{#if phase === 'error' && errorMessage}
+				<p class="text-warning mt-1.5 text-xs" role="status" aria-live="polite">
+					{errorMessage}
+				</p>
+			{/if}
+		{/if}
+	</div>
+
+	<!--
+		In-page proof that the screen is being captured. The browser's own
+		"sharing your screen" bar is browser chrome, not page content — it is
+		absent when the user is looking at the shared window, and it never says
+		how long this particular recording has been running. Fixed-position so it
+		survives scrolling, and it carries its own Stop so the user never has to
+		hunt back up the page for the control.
+	-->
+	{#if screenIndicator && phase === 'recording' && activeKind === 'screen'}
+		<div class="media-capture-screen-banner" role="status" aria-live="polite">
+			<span class="media-capture-dot"></span>
+			<MediaCaptureIcon name="monitor" size={14} />
+			<span class="text-xs font-medium">
+				Recording your screen — {formatElapsed(elapsedSec)}
+			</span>
+			<button type="button" class="btn btn-error btn-xs rounded-field gap-1" onclick={stop}>
+				<MediaCaptureIcon name="square" size={12} /> Stop
+			</button>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.media-capture-screen-banner {
+		position: fixed;
+		top: 0.75rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.4rem 0.75rem;
+		border-radius: var(--radius-box, 0.5rem);
+		border: 1px solid color-mix(in oklch, var(--color-error) 45%, transparent);
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+		box-shadow: 0 4px 16px color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		max-width: calc(100vw - 1.5rem);
+	}
+
+	.media-capture-dot {
+		display: inline-block;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-error);
+		animation: media-capture-pulse 1.4s ease-out infinite;
+	}
+	@keyframes media-capture-pulse {
+		0% {
+			box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-error) 55%, transparent);
+		}
+		70% {
+			box-shadow: 0 0 0 8px color-mix(in oklch, var(--color-error) 0%, transparent);
+		}
+		100% {
+			box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-error) 0%, transparent);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.media-capture-screen-banner {
+		position: fixed;
+		top: 0.75rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.4rem 0.75rem;
+		border-radius: var(--radius-box, 0.5rem);
+		border: 1px solid color-mix(in oklch, var(--color-error) 45%, transparent);
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+		box-shadow: 0 4px 16px color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		max-width: calc(100vw - 1.5rem);
+	}
+
+	.media-capture-dot {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,49 @@
+export type MediaCaptureKind = 'audio' | 'video' | 'screen';
+export interface MediaCaptureResult {
+    kind: MediaCaptureKind;
+    blob: Blob;
+    mimeType: string;
+    durationSeconds: number;
+}
+interface Props {
+    /** Which capture modes to offer. Default: all three. */
+    modes?: MediaCaptureKind[];
+    /** Auto-stop ceiling in ms. Default 2 minutes — "quick capture", not a full recording studio. */
+    maxDurationMs?: number;
+    /** Called with the finished clip. May return a Promise — the component
+     * stays in "processing" until it settles. */
+    onCapture: (result: MediaCaptureResult) => void | Promise<void>;
+    /** Prompt text above the mode buttons. */
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+    /** Smaller footprint (icon-only mode buttons) for embedding inside a
+     * larger composite field like MultimodalCaptureField. */
+    compact?: boolean;
+    /** Override the per-mode button label. Hosts that frame recording as
+     * "add another response" want their own wording ("Voice" vs "Add voice"),
+     * and the screen mode in particular has been called both "Screen" and
+     * "Show us" in different products. */
+    modeLabels?: Partial<Record<MediaCaptureKind, string>>;
+    /** Prefix each mode button with a `+`, framing the modes as
+     * add-affordances on a field that accepts SEVERAL responses rather than
+     * as a one-shot record button. */
+    addAffordance?: boolean;
+    /** Render a fixed, page-level "screen sharing is active" banner while a
+     * `screen` capture runs. The browser's own sharing chrome lives outside
+     * the page, so without this the page itself gives no sign it is being
+     * recorded — the single most-reported confusion in UAT. */
+    screenIndicator?: boolean;
+    /** Observe the capture state machine (phase / kind / elapsed). Lets a
+     * host disable competing controls or mirror the recording state without
+     * reaching into this component's internals. */
+    onStateChange?: (state: {
+        phase: 'idle' | 'recording' | 'processing' | 'error';
+        kind: MediaCaptureKind | null;
+        elapsedSeconds: number;
+    }) => void;
+    class?: string;
+}
+declare const MediaCapture: import("svelte").Component<Props, {}, "">;
+type MediaCapture = ReturnType<typeof MediaCapture>;
+export default MediaCapture;

package/dist/components/MediaCaptureIcon.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	/**
+	 * Tiny internal icon helper for MediaCapture / MultimodalCaptureField —
+	 * NOT exported from the package barrel. Inline lucide-style stroke paths,
+	 * same house convention as Button.svelte/FileDropzone.svelte (no
+	 * lucide-svelte dependency in this package).
+	 */
+	let {
+		name,
+		size = 14,
+		class: className = ''
+	}: {
+		name:
+			| 'mic'
+			| 'video'
+			| 'monitor'
+			| 'square'
+			| 'loader'
+			| 'x'
+			| 'file'
+			| 'trash'
+			| 'plus'
+			| 'type'
+		size?: number
+		class?: string
+	} = $props()
+</script>
+
+{#if name === 'mic'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+		<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+		<line x1="12" x2="12" y1="19" y2="22" />
+	</svg>
+{:else if name === 'video'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
+		<rect x="2" y="6" width="14" height="12" rx="2" />
+	</svg>
+{:else if name === 'monitor'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<rect width="20" height="14" x="2" y="3" rx="2" />
+		<line x1="8" x2="16" y1="21" y2="21" />
+		<line x1="12" x2="12" y1="17" y2="21" />
+	</svg>
+{:else if name === 'square'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		class={className}
+	>
+		<rect width="18" height="18" x="3" y="3" rx="2" />
+	</svg>
+{:else if name === 'loader'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		class={className}
+	>
+		<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+	</svg>
+{:else if name === 'x'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M18 6 6 18" />
+		<path d="m6 6 12 12" />
+	</svg>
+{:else if name === 'file'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
+	</svg>
+{:else if name === 'trash'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M3 6h18" />
+		<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+	</svg>
+{:else if name === 'plus'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M5 12h14" />
+		<path d="M12 5v14" />
+	</svg>
+{:else if name === 'type'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M4 7V4h16v3" />
+		<path d="M9 20h6" />
+		<path d="M12 4v16" />
+	</svg>
+{/if}

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    name: 'mic' | 'video' | 'monitor' | 'square' | 'loader' | 'x' | 'file' | 'trash' | 'plus' | 'type';
+    size?: number;
+    class?: string;
+};
+declare const MediaCaptureIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MediaCaptureIcon = ReturnType<typeof MediaCaptureIcon>;
+export default MediaCaptureIcon;

package/dist/components/MultimodalCaptureField.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	/**
+	 * MultimodalCaptureField — "upload a file, or record yourself going over
+	 * it" as one input surface.
+	 *
+	 * Composes FileDropzone (capped to a single file — this is not a bulk
+	 * upload zone) with MediaCapture, framed as one combined affordance rather
+	 * than two components a consumer has to remember to place side by side.
+	 * The two halves are independent: a file, a recording, both, or neither
+	 * can be attached. Neither half performs an upload — this component hands
+	 * back a plain `File` and/or a `MediaCaptureResult` blob via callbacks
+	 * (`onFileSelected` / `onCapture`), same "validate and hand back, don't
+	 * own the network" contract as FileDropzone itself. The host app owns
+	 * whatever upload/transcription pipeline it needs.
+	 */
+	import FileDropzone from './FileDropzone.svelte'
+	import MediaCapture from './MediaCapture.svelte'
+	import MediaCaptureIcon from './MediaCaptureIcon.svelte'
+	import type { MediaCaptureKind, MediaCaptureResult } from './MediaCapture.svelte'
+
+	interface Props {
+		label?: string
+		hint?: string
+		/** File MIME allow-list, forwarded to FileDropzone. */
+		accept?: string[]
+		maxFileSize?: number
+		dropLabel?: string
+		/** Which recording modes to offer. Default: all three. */
+		modes?: MediaCaptureKind[]
+		maxDurationMs?: number
+		/** Currently attached file, for re-rendering an already-selected/uploaded
+		 * state (e.g. after a page reload with a persisted answer). */
+		file?: File | null
+		fileName?: string
+		fileUrl?: string
+		/** Currently attached recording's display info, if the host wants to
+		 * show a persisted-answer summary (bindable is left to the host — this
+		 * is a display prop, not a live capture in progress). */
+		recordingSummary?: { kind: MediaCaptureKind; durationSeconds: number | null } | null
+		onFileSelected?: (file: File) => void
+		onFileRemoved?: () => void
+		onCapture?: (result: MediaCaptureResult) => void | Promise<void>
+		onRecordingRemoved?: () => void
+		disabled?: boolean
+		class?: string
+	}
+
+	let {
+		label = 'Attach a file, or record yourself going over it',
+		hint,
+		accept = ['image/png', 'image/jpeg', 'application/pdf'],
+		maxFileSize = 8 * 1024 * 1024,
+		dropLabel = 'Upload a file',
+		modes = ['audio', 'video', 'screen'],
+		maxDurationMs = 120_000,
+		file = null,
+		fileName,
+		fileUrl,
+		recordingSummary = null,
+		onFileSelected,
+		onFileRemoved,
+		onCapture,
+		onRecordingRemoved,
+		disabled = false,
+		class: className = ''
+	}: Props = $props()
+
+	function handleFilesSelected(files: File[], errors: string[]) {
+		if (errors.length) fileError = errors[0]
+		else fileError = ''
+		if (files[0]) onFileSelected?.(files[0])
+	}
+
+	let fileError = $state('')
+
+	async function handleCapture(result: MediaCaptureResult) {
+		await onCapture?.(result)
+	}
+
+	function modeLabel(kind: MediaCaptureKind): string {
+		return kind === 'audio' ? 'Voice note' : kind === 'video' ? 'Video note' : 'Screen recording'
+	}
+
+	function formatDuration(sec: number | null): string {
+		if (sec == null) return ''
+		const m = Math.floor(sec / 60)
+		const s = Math.round(sec % 60)
+		return ` (${m}:${String(s).padStart(2, '0')})`
+	}
+</script>
+
+<div class="multimodal-capture-field {className}">
+	{#if label || hint}
+		<div class="mb-2">
+			{#if label}<p class="text-base-content text-sm font-medium">{label}</p>{/if}
+			{#if hint}<p class="text-base-content/60 text-xs">{hint}</p>{/if}
+		</div>
+	{/if}
+
+	{#if file || fileUrl}
+		<div class="rounded-field bg-base-200 border-base-300 flex items-center gap-2 border p-2.5">
+			<MediaCaptureIcon name="file" size={16} class="text-base-content/50 flex-shrink-0" />
+			<span class="text-base-content/80 min-w-0 flex-1 truncate text-sm">
+				{fileName || file?.name}
+			</span>
+			{#if onFileRemoved}
+				<button
+					type="button"
+					class="text-base-content/40 hover:text-error flex-shrink-0"
+					onclick={onFileRemoved}
+					aria-label="Remove file"
+				>
+					<MediaCaptureIcon name="x" size={14} />
+				</button>
+			{/if}
+		</div>
+	{:else}
+		<FileDropzone
+			{accept}
+			maxSize={maxFileSize}
+			maxFiles={1}
+			multiple={false}
+			{dropLabel}
+			{disabled}
+			onFilesSelected={handleFilesSelected}
+		/>
+		{#if fileError}
+			<p class="text-warning mt-1.5 text-xs">{fileError}</p>
+		{/if}
+	{/if}
+
+	<div class="divider text-base-content/40 my-3 text-xs">or</div>
+
+	{#if recordingSummary}
+		<div class="rounded-field bg-base-200 border-base-300 flex items-center gap-2 border p-2.5">
+			<MediaCaptureIcon
+				name={recordingSummary.kind === 'audio'
+					? 'mic'
+					: recordingSummary.kind === 'video'
+						? 'video'
+						: 'monitor'}
+				size={16}
+				class="text-base-content/50 flex-shrink-0"
+			/>
+			<span class="text-base-content/80 min-w-0 flex-1 truncate text-sm">
+				{modeLabel(recordingSummary.kind)}{formatDuration(recordingSummary.durationSeconds)}
+			</span>
+			{#if onRecordingRemoved}
+				<button
+					type="button"
+					class="text-base-content/40 hover:text-error flex-shrink-0"
+					onclick={onRecordingRemoved}
+					aria-label="Remove recording"
+				>
+					<MediaCaptureIcon name="x" size={14} />
+				</button>
+			{/if}
+		</div>
+	{:else}
+		<MediaCapture
+			{modes}
+			{maxDurationMs}
+			{disabled}
+			label=""
+			onCapture={handleCapture}
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,33 @@
+import type { MediaCaptureKind, MediaCaptureResult } from './MediaCapture.svelte';
+interface Props {
+    label?: string;
+    hint?: string;
+    /** File MIME allow-list, forwarded to FileDropzone. */
+    accept?: string[];
+    maxFileSize?: number;
+    dropLabel?: string;
+    /** Which recording modes to offer. Default: all three. */
+    modes?: MediaCaptureKind[];
+    maxDurationMs?: number;
+    /** Currently attached file, for re-rendering an already-selected/uploaded
+     * state (e.g. after a page reload with a persisted answer). */
+    file?: File | null;
+    fileName?: string;
+    fileUrl?: string;
+    /** Currently attached recording's display info, if the host wants to
+     * show a persisted-answer summary (bindable is left to the host — this
+     * is a display prop, not a live capture in progress). */
+    recordingSummary?: {
+        kind: MediaCaptureKind;
+        durationSeconds: number | null;
+    } | null;
+    onFileSelected?: (file: File) => void;
+    onFileRemoved?: () => void;
+    onCapture?: (result: MediaCaptureResult) => void | Promise<void>;
+    onRecordingRemoved?: () => void;
+    disabled?: boolean;
+    class?: string;
+}
+declare const MultimodalCaptureField: import("svelte").Component<Props, {}, "">;
+type MultimodalCaptureField = ReturnType<typeof MultimodalCaptureField>;
+export default MultimodalCaptureField;

package/dist/index.d.ts

@@ -89,6 +89,9 @@ export { EMOJI_DATA, ALL_EMOJIS, searchEmojis } from './data/emojis';
 export type { EmojiEntry, EmojiGroup } from './data/emojis';
 export { default as LinkShortener } from './components/LinkShortener.svelte';
 export { default as MediaWorkbench } from './components/MediaWorkbench.svelte';
+export { default as MediaCapture } from './components/MediaCapture.svelte';
+export { default as MultimodalCaptureField } from './components/MultimodalCaptureField.svelte';
+export type { MediaCaptureKind, MediaCaptureResult } from './components/MediaCapture.svelte';
 export { default as SignaturePad } from './components/SignaturePad.svelte';
 export { default as MilestoneCard } from './components/MilestoneCard.svelte';
 export { default as MilestoneTimeline } from './components/MilestoneTimeline.svelte';

package/dist/index.js

@@ -94,6 +94,8 @@ export { EMOJI_DATA, ALL_EMOJIS, searchEmojis } from './data/emojis';
 export { default as LinkShortener } from './components/LinkShortener.svelte';
 // Components — Media
 export { default as MediaWorkbench } from './components/MediaWorkbench.svelte';
+export { default as MediaCapture } from './components/MediaCapture.svelte';
+export { default as MultimodalCaptureField } from './components/MultimodalCaptureField.svelte';
 // Components — from Marduk
 export { default as SignaturePad } from './components/SignaturePad.svelte';
 export { default as MilestoneCard } from './components/MilestoneCard.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -75,7 +75,7 @@
     "package": "svelte-package --input src/lib --output dist && node scripts/compile-rune-modules.mjs",
     "check:demos": "node scripts/check-demo-coverage.mjs",
     "guard": "node scripts/check-demo-coverage.mjs",
-    "test:dist": "vitest run --config vitest.dist.config.ts",
+    "test:dist": "svelte-kit sync && vitest run --config vitest.dist.config.ts",
     "prepublishOnly": "node scripts/guard-ci-publish.mjs && npm run package"
   },
   "peerDependencies": {
@@ -158,6 +158,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/table-core": "^8.21.3",
     "@types/d3": "^7.4.3",
+    "@vitest/browser": "^3.2.7",
     "@xyflow/svelte": "^1.6.2",
     "cobe": "^2.0.1",
     "d3": "^7.9.0",
@@ -166,10 +167,12 @@
     "lenis": "^1.3.25",
     "livekit-client": "^2.20.1",
     "motion": "^12.42.2",
+    "playwright": "^1.62.1",
     "svelte": "^5.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vitest": "^3.2.7"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.0",