@joewinke/jatui 0.21.0 → 0.23.0

package/dist/components/AudioRecorder.svelte

@@ -0,0 +1,749 @@
+<script module lang="ts">
+	/** What a finished recording hands back to the host — mirrors MediaCaptureResult's shape for the audio kind. */
+	export interface AudioRecordingResult {
+		blob: Blob
+		mimeType: string
+		durationSeconds: number
+		sizeBytes: number
+	}
+
+	/** m:ss zero-padded seconds — shared format for the timer display. */
+	export function formatDuration(totalSeconds: number): string {
+		const mins = Math.floor(totalSeconds / 60)
+		const secs = Math.floor(totalSeconds % 60)
+		return `${mins}:${secs.toString().padStart(2, '0')}`
+	}
+
+	/** 1.2 KB / 3.4 MB style byte formatting for the size readout. */
+	export function formatFileSize(bytes: number): string {
+		if (bytes <= 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1)
+		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * AudioRecorder — voice-memo recorder with live waveform, ported from
+	 * chimaro's chat/AudioRecorder.svelte (jatui-m4uz3.5).
+	 *
+	 * Completes jatui's audio trio alongside AudioWaveform (playback) and
+	 * SpeechForm (voice-to-text input): this one is the CAPTURE surface.
+	 *
+	 * Ported as a host-agnostic primitive — everything chimaro-specific is
+	 * decoupled into emitted callbacks:
+	 *   • no promptStore — the custom-prompt textarea was host state, not
+	 *     recorder state, and lives with the host;
+	 *   • no debugConfig — console chatter replaced by callback props;
+	 *   • no supabase template loading / analysis panel — hosts that want
+	 *     post-recording transcription or analysis consume `onRecordStop`'s
+	 *     blob payload and run their own pipeline (MardukOS Scribe does).
+	 *
+	 * What it owns: permission requests (with an explicit denied state),
+	 * MIME negotiation, record/pause/resume/stop/cancel state machine, the
+	 * theme-aware canvas waveform + level meter, and size/duration readouts.
+	 *
+	 * State machine: idle → recording ⇄ paused → processing → done, with
+	 * cancel from any recording phase returning straight to idle. `reset()`
+	 * returns a finished recorder to idle so the host can record again.
+	 *
+	 * Timer discipline (lesson from MediaCapture, mos-ow4q4.37): elapsed time
+	 * is derived from the wall clock minus accumulated pause, never an
+	 * incremented counter — a throttled background tab can't freeze it.
+	 */
+	import { onDestroy, onMount } from 'svelte'
+	import { getDaisyUIColor, watchThemeChanges } from '../utils/daisyuiColors'
+	import MediaCaptureIcon from './MediaCaptureIcon.svelte'
+
+	interface Props {
+		/** `small` — inline chat-style pill (default). `large` — full recorder panel with waveform canvas. */
+		variant?: 'small' | 'large'
+		/** Auto-stop ceiling in ms. 0 (default) records until stopped manually. */
+		maxDurationMs?: number
+		disabled?: boolean
+		/** Fired once the mic stream is live and recording has started. */
+		onRecordStart?: () => void
+		onRecordPause?: () => void
+		onRecordResume?: () => void
+		/** Fired with the finished recording. May return a Promise — the
+		 * component stays in "processing" until it settles, so hosts can
+		 * upload/transcribe without the user re-triggering a recording. */
+		onRecordStop?: (result: AudioRecordingResult) => void | Promise<void>
+		/** Fired when the user cancels — no blob is produced. */
+		onRecordCancel?: () => void
+		/** Fired on recorder errors (permission denied, no mic, start failure). */
+		onError?: (message: string) => void
+		class?: string
+	}
+
+	let {
+		variant = 'small',
+		maxDurationMs = 0,
+		disabled = false,
+		onRecordStart,
+		onRecordPause,
+		onRecordResume,
+		onRecordStop,
+		onRecordCancel,
+		onError,
+		class: className = ''
+	}: Props = $props()
+
+	type Phase = 'idle' | 'recording' | 'processing' | 'done'
+	type PauseState = 'active' | 'paused'
+
+	let phase = $state<Phase>('idle')
+	let paused = $state<PauseState>('active')
+	let permissionDenied = $state(false)
+	let errorMessage = $state('')
+	let elapsedSec = $state(0)
+	let sizeBytes = $state(0)
+	let audioLevel = $state(0)
+
+	// Recorder internals
+	let recorder: MediaRecorder | null = null
+	let stream: MediaStream | null = null
+	let audioCtx: AudioContext | null = null
+	let analyser: AnalyserNode | null = null
+	let chunks: Blob[] = []
+	let mimeType = ''
+	let startedAt = 0
+	let pausedTotalMs = 0
+	let pauseStartedAt = 0
+	let raf: number | null = null
+	let tickTimer: ReturnType<typeof setInterval> | null = null
+	let autoStopTimer: ReturnType<typeof setTimeout> | null = null
+	let wasCancelled = false
+
+	// Canvas
+	let canvas = $state<HTMLCanvasElement | null>(null)
+	let canvasCtx: CanvasRenderingContext2D | null = null
+	let canvasColors = { background: '', centerLine: '', primary: '', secondary: '', dots: '' }
+
+	const hasUserMedia =
+		typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia
+	const hasRecorder = typeof MediaRecorder !== 'undefined'
+	const supported = hasRecorder && hasUserMedia
+
+	function resolveColor(name: string, fallback: string): string {
+		if (typeof window === 'undefined') return fallback
+		try {
+			const c = getDaisyUIColor(name)
+			return c && c !== 'undefined' && c !== '' ? c : fallback
+		} catch {
+			return fallback
+		}
+	}
+
+	function updateCanvasColors() {
+		canvasColors = {
+			background: resolveColor('base-200', '#1f2937'),
+			centerLine: resolveColor('base-300', '#374151'),
+			primary: resolveColor('primary', '#3b82f6'),
+			secondary: resolveColor('success', '#10b981'),
+			dots: resolveColor('base-content', '#6b7280')
+		}
+	}
+
+	function pickMime(): string {
+		for (const c of ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg']) {
+			if (MediaRecorder.isTypeSupported(c)) return c
+		}
+		return ''
+	}
+
+	/** Elapsed from the wall clock, pause-adjusted — see header note. */
+	function elapsedMs(): number {
+		if (!startedAt) return 0
+		const pausedMs = pausedTotalMs + (pauseStartedAt ? Date.now() - pauseStartedAt : 0)
+		return Math.max(0, Date.now() - startedAt - pausedMs)
+	}
+
+	function tick() {
+		elapsedSec = Math.floor(elapsedMs() / 1000)
+	}
+
+	function stopAllTracks() {
+		stream?.getTracks().forEach((t) => t.stop())
+		stream = null
+	}
+
+	function stopAnimation() {
+		if (raf !== null) {
+			cancelAnimationFrame(raf)
+			raf = null
+		}
+	}
+
+	function clearTimers() {
+		if (tickTimer) {
+			clearInterval(tickTimer)
+			tickTimer = null
+		}
+		if (autoStopTimer) {
+			clearTimeout(autoStopTimer)
+			autoStopTimer = null
+		}
+	}
+
+	/** Tear down every media resource. Idempotent — safe from cancel/stop/destroy. */
+	function cleanup() {
+		wasCancelled = true
+		if (recorder && recorder.state !== 'inactive') {
+			recorder.ondataavailable = null
+			recorder.onstop = null
+			try {
+				recorder.stop()
+			} catch {
+				// already inactive
+			}
+		}
+		recorder = null
+		stopAllTracks()
+		if (audioCtx && audioCtx.state !== 'closed') {
+			audioCtx.close().catch(() => {})
+		}
+		audioCtx = null
+		analyser = null
+		stopAnimation()
+		clearTimers()
+		chunks = []
+		sizeBytes = 0
+		audioLevel = 0
+		startedAt = 0
+		pausedTotalMs = 0
+		pauseStartedAt = 0
+		elapsedSec = 0
+		paused = 'active'
+		clearCanvas()
+	}
+
+	function sizeCanvas() {
+		if (!canvas) return
+		const parent = canvas.parentElement
+		const width = Math.max(160, Math.min(parent?.clientWidth ?? 480, 800))
+		const height = 80
+		if (canvas.width !== width || canvas.height !== height) {
+			canvas.width = width
+			canvas.height = height
+		}
+		clearCanvas()
+	}
+
+	function clearCanvas() {
+		if (!canvas || !canvasCtx) return
+		const { width, height } = canvas
+		canvasCtx.clearRect(0, 0, width, height)
+		canvasCtx.fillStyle = canvasColors.background
+		canvasCtx.fillRect(0, 0, width, height)
+		canvasCtx.strokeStyle = canvasColors.centerLine
+		canvasCtx.lineWidth = 1
+		canvasCtx.beginPath()
+		canvasCtx.moveTo(0, height / 2)
+		canvasCtx.lineTo(width, height / 2)
+		canvasCtx.stroke()
+	}
+
+	function drawIdleDots() {
+		if (!canvas || !canvasCtx) return
+		const { width, height } = canvas
+		const count = Math.floor(width / 20)
+		const spacing = width / (count + 1)
+		const t = Date.now() * 0.003
+		canvasCtx.fillStyle = canvasColors.dots
+		for (let i = 0; i < count; i++) {
+			const pulse = Math.sin(t + i * 0.5) * 0.3 + 0.7
+			canvasCtx.beginPath()
+			canvasCtx.arc((i + 1) * spacing, height / 2, 1.5 * pulse, 0, Math.PI * 2)
+			canvasCtx.fill()
+		}
+	}
+
+	function drawWaveform(freq: Uint8Array) {
+		if (!canvas || !canvasCtx) return
+		const { width, height } = canvas
+		canvasCtx.fillStyle = canvasColors.background
+		canvasCtx.fillRect(0, 0, width, height)
+		canvasCtx.strokeStyle = canvasColors.centerLine
+		canvasCtx.lineWidth = 1
+		canvasCtx.beginPath()
+		canvasCtx.moveTo(0, height / 2)
+		canvasCtx.lineTo(width, height / 2)
+		canvasCtx.stroke()
+
+		const barCount = 60
+		const gap = 1
+		const barWidth = Math.max(1, Math.floor((width - (barCount - 1) * gap) / barCount))
+		const centerY = height / 2
+		const usable = Math.floor(freq.length * 0.75)
+		const perBar = Math.max(1, Math.floor(usable / barCount))
+
+		const gradient = canvasCtx.createLinearGradient(0, 0, 0, height)
+		gradient.addColorStop(0, canvasColors.primary)
+		gradient.addColorStop(0.5, canvasColors.secondary)
+		gradient.addColorStop(1, canvasColors.primary)
+		canvasCtx.fillStyle = gradient
+
+		for (let i = 0; i < barCount; i++) {
+			let sum = 0
+			for (let j = 0; j < perBar; j++) {
+				const idx = i * perBar + j
+				if (idx < usable) sum += freq[idx]
+			}
+			const amplified = (sum / perBar / 255) * 1.5
+			const h = Math.max(amplified * (height / 2 - 2), 0.5)
+			canvasCtx.fillRect(i * (barWidth + gap), centerY - h, barWidth, h * 2)
+		}
+	}
+
+	function animate() {
+		if (!analyser || phase !== 'recording') return
+		if (paused === 'paused') {
+			if (canvas) {
+				sizeCanvasIfNeeded()
+				clearCanvas()
+				drawIdleDots()
+			}
+			audioLevel = 0
+			raf = requestAnimationFrame(animate)
+			return
+		}
+		const freq = new Uint8Array(analyser.frequencyBinCount)
+		const time = new Uint8Array(analyser.frequencyBinCount)
+		analyser.getByteFrequencyData(freq)
+		analyser.getByteTimeDomainData(time)
+		let sum = 0
+		for (let i = 0; i < time.length; i++) {
+			const s = (time[i] - 128) / 128
+			sum += s * s
+		}
+		audioLevel = Math.min(100, Math.sqrt(sum / time.length) * 300)
+		if (canvas) {
+			sizeCanvasIfNeeded()
+			if (freq.some((v) => v > 0)) drawWaveform(freq)
+			else {
+				clearCanvas()
+				drawIdleDots()
+			}
+		}
+		raf = requestAnimationFrame(animate)
+	}
+
+	let lastCanvasWidth = 0
+	/** Re-measure the canvas when its container resizes, without churning every frame. */
+	function sizeCanvasIfNeeded() {
+		if (!canvas || !canvas.parentElement) return
+		const w = Math.max(160, Math.min(canvas.parentElement.clientWidth, 800))
+		if (w !== lastCanvasWidth) {
+			lastCanvasWidth = w
+			sizeCanvas()
+		}
+	}
+
+	async function start() {
+		if (!supported || disabled || phase === 'recording' || phase === 'processing') return
+		errorMessage = ''
+		permissionDenied = false
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({
+				audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
+			})
+			mimeType = pickMime()
+			recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream)
+			mimeType = recorder.mimeType || mimeType || 'audio/webm'
+			chunks = []
+			sizeBytes = 0
+			wasCancelled = false
+
+			recorder.ondataavailable = (e) => {
+				if (e.data.size > 0) {
+					chunks.push(e.data)
+					sizeBytes += e.data.size
+				}
+			}
+			recorder.onstop = () => {
+				void finalize()
+			}
+
+			// Waveform analyser — visualization only, never touches the recorded data.
+			audioCtx = new AudioContext()
+			analyser = audioCtx.createAnalyser()
+			analyser.fftSize = 512
+			analyser.smoothingTimeConstant = 0.3
+			analyser.minDecibels = -100
+			analyser.maxDecibels = -20
+			audioCtx.createMediaStreamSource(stream).connect(analyser)
+
+			recorder.start(1000)
+			startedAt = Date.now()
+			pausedTotalMs = 0
+			pauseStartedAt = 0
+			elapsedSec = 0
+			paused = 'active'
+			phase = 'recording'
+			tickTimer = setInterval(tick, 250)
+			if (maxDurationMs > 0) {
+				autoStopTimer = setTimeout(stop, maxDurationMs)
+			}
+			updateCanvasColors()
+			// Canvas mounts with the recording UI — give Svelte a tick, then go live.
+			setTimeout(() => {
+				if (canvas) {
+					canvasCtx = canvas.getContext('2d')
+					lastCanvasWidth = 0
+					sizeCanvas()
+				}
+				stopAnimation()
+				raf = requestAnimationFrame(animate)
+			}, 0)
+			onRecordStart?.()
+		} catch (err) {
+			cleanup()
+			phase = 'idle'
+			const name = (err as DOMException)?.name ?? ''
+			let message: string
+			if (name === 'NotAllowedError' || name === 'SecurityError') {
+				permissionDenied = true
+				message = 'Microphone access was denied. Allow mic permission in your browser settings and try again.'
+			} else if (name === 'NotFoundError' || name === 'OverconstrainedError') {
+				message = 'No microphone was found. Connect one and try again.'
+			} else {
+				message = 'Failed to start recording. Check the microphone and try again.'
+			}
+			errorMessage = message
+			onError?.(message)
+		}
+	}
+
+	function pause() {
+		if (phase !== 'recording' || paused === 'paused' || !recorder) return
+		try {
+			recorder.pause()
+			paused = 'paused'
+			pauseStartedAt = Date.now()
+			stopAnimation()
+			onRecordPause?.()
+		} catch {
+			// recorder already inactive — nothing to pause
+		}
+	}
+
+	function resume() {
+		if (phase !== 'recording' || paused !== 'paused' || !recorder) return
+		try {
+			recorder.resume()
+			pausedTotalMs += Date.now() - pauseStartedAt
+			pauseStartedAt = 0
+			paused = 'active'
+			stopAnimation()
+			raf = requestAnimationFrame(animate)
+			onRecordResume?.()
+		} catch {
+			// recorder already inactive — nothing to resume
+		}
+	}
+
+	function stop() {
+		if (phase !== 'recording' || !recorder) return
+		if (pauseStartedAt) {
+			pausedTotalMs += Date.now() - pauseStartedAt
+			pauseStartedAt = 0
+		}
+		clearTimers()
+		stopAnimation()
+		if (recorder.state !== 'inactive') {
+			phase = 'processing'
+			recorder.stop()
+		}
+	}
+
+	function cancel() {
+		if (phase !== 'recording') return
+		cleanup()
+		phase = 'idle'
+		onRecordCancel?.()
+	}
+
+	async function finalize() {
+		if (wasCancelled || chunks.length === 0) {
+			if (!wasCancelled) {
+				// Zero chunks (e.g. stopped before any data arrived) — fail loud, not a silent no-op.
+				phase = 'idle'
+				errorMessage = 'Recording was too short — nothing was captured. Try again.'
+				onError?.(errorMessage)
+			}
+			return
+		}
+		phase = 'processing'
+		const blob = new Blob(chunks, { type: mimeType })
+		const result: AudioRecordingResult = {
+			blob,
+			mimeType,
+			durationSeconds: Math.max(1, Math.round(elapsedMs() / 1000)),
+			sizeBytes: blob.size
+		}
+		cleanup()
+		phase = 'done'
+		if (onRecordStop) {
+			try {
+				await onRecordStop(result)
+			} catch (err) {
+				errorMessage = `Recording kept, but the handler failed: ${err instanceof Error ? err.message : String(err)}`
+				onError?.(errorMessage)
+			}
+		}
+	}
+
+	/** Return a finished/errored recorder to idle so the host can record again. */
+	export function reset() {
+		cleanup()
+		phase = 'idle'
+		errorMessage = ''
+		permissionDenied = false
+	}
+
+	function retryAfterError() {
+		errorMessage = ''
+		permissionDenied = false
+		phase = 'idle'
+	}
+
+	onMount(() => {
+		updateCanvasColors()
+		const unwatch = watchThemeChanges(() => {
+			updateCanvasColors()
+			clearCanvas()
+		})
+		const onResize = () => {
+			lastCanvasWidth = 0
+			if (canvas) sizeCanvas()
+		}
+		window.addEventListener('resize', onResize)
+		return () => {
+			window.removeEventListener('resize', onResize)
+			unwatch()
+		}
+	})
+
+	// Space toggles pause/resume while recording (chimaro behaviour).
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.code === 'Space' && phase === 'recording' && variant === 'large') {
+			e.preventDefault()
+			if (paused === 'paused') resume()
+			else pause()
+		}
+	}
+
+	onDestroy(() => {
+		cleanup()
+	})
+</script>
+
+<svelte:document onkeydown={handleKeydown} />
+
+<div class={className}>
+	{#if variant === 'large'}
+		<div class="flex flex-col items-center gap-3">
+			{#if phase === 'processing'}
+				<div class="badge badge-primary badge-lg gap-2">
+					<span class="loading loading-spinner loading-xs"></span>
+					Processing…
+				</div>
+			{:else if phase === 'done'}
+				<div class="badge badge-success badge-lg">✓ Complete</div>
+			{:else if phase === 'recording' && paused === 'paused'}
+				<div class="badge badge-warning badge-lg">⏸ Paused</div>
+			{:else if phase === 'recording'}
+				<div class="badge badge-error badge-lg animate-pulse">● Recording</div>
+			{:else}
+				<div class="badge badge-neutral badge-lg">Ready to Record</div>
+			{/if}
+
+			{#if phase === 'recording' || phase === 'processing'}
+				<div class="font-mono text-5xl font-bold">{formatDuration(elapsedSec)}</div>
+				<div class="text-base-content/60 font-mono text-sm">{formatFileSize(sizeBytes)}</div>
+			{/if}
+
+			{#if phase === 'recording'}
+				<div class="relative flex min-h-[96px] items-center justify-center">
+					{#if paused !== 'paused'}
+						<div class="audio-recorder-pulse"></div>
+					{/if}
+					<canvas bind:this={canvas} class="border-base-300 bg-base-100 z-10 rounded border"></canvas>
+				</div>
+				<div class="flex min-h-[20px] items-center gap-2">
+					<span class="text-base-content/60 text-xs">Volume:</span>
+					<div class="bg-base-300 h-1 w-16 overflow-hidden rounded-full">
+						<div
+							class="h-full rounded-full bg-gradient-to-r from-success via-warning to-error"
+							style="width: {Math.min(audioLevel, 100)}%"
+						></div>
+					</div>
+				</div>
+				<div class="mt-2 flex items-center gap-3">
+					{#if paused === 'paused'}
+						<button
+							type="button"
+							class="btn btn-success btn-circle"
+							onclick={resume}
+							aria-label="Resume recording"
+						>
+							<MediaCaptureIcon name="play" size={20} class="fill-current" />
+						</button>
+					{:else}
+						<button
+							type="button"
+							class="btn btn-warning btn-circle"
+							onclick={pause}
+							aria-label="Pause recording"
+						>
+							<MediaCaptureIcon name="pause" size={20} />
+						</button>
+					{/if}
+					<button
+						type="button"
+						class="btn btn-primary btn-circle"
+						onclick={stop}
+						aria-label="Stop and save recording"
+					>
+						<MediaCaptureIcon name="square" size={20} class="fill-current" />
+					</button>
+				</div>
+				<button type="button" class="btn btn-ghost btn-sm text-error" onclick={cancel}>
+					<MediaCaptureIcon name="x" size={12} />
+					Cancel
+				</button>
+				<p class="text-base-content/45 text-xs">Space pauses / resumes</p>
+			{:else if phase === 'idle'}
+				<button
+					type="button"
+					class="btn btn-error btn-circle btn-xl hover:btn-primary transition-all"
+					{disabled}
+					onclick={start}
+					aria-label="Start voice recording"
+				>
+					<MediaCaptureIcon name="mic" size={24} />
+				</button>
+			{/if}
+
+			{#if errorMessage}
+				<div class="alert alert-warning w-full max-w-md text-sm" role="status" aria-live="polite">
+					<span>{errorMessage}</span>
+					{#if phase === 'idle'}
+						<button type="button" class="btn btn-xs" onclick={retryAfterError}>Dismiss</button>
+					{/if}
+				</div>
+			{/if}
+			{#if permissionDenied}
+				<p class="text-base-content/50 max-w-md text-center text-xs">
+					Your browser blocked microphone access. Enable it from the lock icon in the address bar
+					(or site settings), then press the record button again.
+				</p>
+			{/if}
+		</div>
+	{:else}
+		<!-- small: chat-inline pill -->
+		<div class="flex items-center gap-2">
+			{#if phase === 'idle'}
+				{#if supported}
+					<button
+						type="button"
+						class="btn btn-ghost btn-circle btn-sm hover:btn-primary transition-all"
+						{disabled}
+						onclick={start}
+						aria-label="Start voice recording"
+						title="Start voice recording"
+					>
+						<MediaCaptureIcon name="mic" size={14} />
+					</button>
+				{/if}
+			{:else if phase === 'recording'}
+				<div class="bg-base-100 border-base-200 flex items-center gap-2 rounded-lg border p-1.5 shadow-sm">
+					{#if paused === 'paused'}
+						<button
+							type="button"
+							class="btn btn-success btn-circle btn-sm"
+							onclick={resume}
+							aria-label="Resume recording"
+						>
+							<MediaCaptureIcon name="play" size={14} class="fill-current" />
+						</button>
+					{:else}
+						<button
+							type="button"
+							class="btn btn-warning btn-circle btn-sm"
+							onclick={pause}
+							aria-label="Pause recording"
+						>
+							<MediaCaptureIcon name="pause" size={14} />
+						</button>
+					{/if}
+					<button
+						type="button"
+						class="btn btn-primary btn-circle btn-sm"
+						onclick={stop}
+						aria-label="Stop and save recording"
+					>
+						<MediaCaptureIcon name="square" size={14} class="fill-current" />
+					</button>
+					<span class="text-base-content/60 w-9 text-center font-mono text-xs">
+						{formatDuration(elapsedSec)}
+					</span>
+					<div class="bg-base-300 h-1 w-8 overflow-hidden rounded-full">
+						<div
+							class="h-full rounded-full bg-gradient-to-r from-success via-warning to-error"
+							style="width: {Math.min(audioLevel, 100)}%"
+						></div>
+					</div>
+					<button
+						type="button"
+						class="btn btn-ghost btn-xs text-error"
+						onclick={cancel}
+						aria-label="Cancel recording"
+					>
+						<MediaCaptureIcon name="x" size={10} />
+					</button>
+				</div>
+			{:else if phase === 'processing'}
+				<div class="flex items-center gap-2" role="status" aria-live="polite">
+					<MediaCaptureIcon name="loader" size={14} class="animate-spin" />
+					<span class="text-base-content/60 text-xs">Processing…</span>
+				</div>
+			{:else if phase === 'done'}
+				<span class="text-success text-xs">✓ Saved</span>
+				<button type="button" class="btn btn-ghost btn-xs" onclick={reset}>Record again</button>
+			{/if}
+			{#if errorMessage && variant === 'small'}
+				<span class="text-warning text-xs" role="status" aria-live="polite">{errorMessage}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.audio-recorder-pulse {
+		position: absolute;
+		inset: -8px;
+		border-radius: 12px;
+		background: color-mix(in oklch, var(--color-error) 10%, transparent);
+		animation: audio-recorder-pulse 2s ease-in-out infinite;
+	}
+	@keyframes audio-recorder-pulse {
+		0%,
+		100% {
+			transform: scale(1);
+			opacity: 0.3;
+		}
+		50% {
+			transform: scale(1.05);
+			opacity: 0.6;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.audio-recorder-pulse {
+			animation: none;
+		}
+	}
+</style>