@joewinke/jatui 0.23.0 → 0.25.0

package/CLAUDE.md

@@ -71,7 +71,7 @@ Then import:
 | `Tooltip` | Component-shaped wrapper around the shared `use:tooltip` action — for cases where you can't easily add an attribute to the target element (wrap a chip / badge / icon in the tooltip instead). Warm/cool window + `aria-describedby` are shared with the action. Prefer `use:tooltip` directly when you own the element. | `content: string`, `placement?`, `delayMs?`, `disabled?`, `display?`, `children` (snippet) |
 | `PresenceStack` | "Who's here" avatar stack for live-collaboration UI — max `maxVisible` avatars + "+N more" overflow bubble, tooltip per avatar ("X is editing FIELD" / "X is viewing"). Purely presentational — feed it viewers from any presence source (e.g. an SSE-backed presence composable). | `viewers: PresenceViewer[]`, `maxVisible?` (default 5), `size?`, `class?` |
 | `DirtyFormHost` | Composable form dirty-state manager — renders your form body plus a floating "Unsaved changes" pill + Cancel button; wires `beforeunload` and (optional) SvelteKit `beforeNavigate`. Callers who want bespoke pill/Cancel chrome use `createDirtyGuard()` directly and skip the component. Extracted from the F12 pattern in `/admin/roles/[id]`. | `baseline: T`, `current: T`, `onCancel?`, `beforeNavigate?`, `discardPrompt?`, `equals?`, `hideChrome?`, `children` (snippet with `{dirty, cancel}`) |
-| `BulkActionBar` | Floating action bar that appears when a `listNav` selection is non-empty. Simpler API than `FloatingActionBar`: takes a `Set`, `Array`, or plain number for `selection`; a flat `actions[]` with `{label, onSelect, destructive?}`; and now `groups[]` for dropdown-menu actions (each group is one button on the bar that opens a menu of `{label, onSelect}` items — same shape as `BulkAction`). Flat + grouped can be mixed. Reach for `FloatingActionBar` directly only when you need finer per-item dropdown styling (dot colors, icon snippets). | `selection: Set \| Array \| number`, `actions?: BulkAction[]`, `groups?: BulkActionGroup[]`, `onClear?`, `loading?`, `countLabel?` |
+| `BulkActionBar` | Floating action bar that appears when a `listNav` selection is non-empty. Simpler API than `FloatingActionBar`: takes a `Set`, `Array`, or plain number for `selection`; a flat `actions[]` with `{label, onSelect, destructive?}`; and now `groups[]` for dropdown-menu actions (each group is one button on the bar that opens a menu of `{label, onSelect}` items — same shape as `BulkAction`). Flat + grouped can be mixed. Flat actions take a one-char `key` — the component registers the keydown handler itself (fired only while the bar is visible/idle; ignored while typing via `isTypingTarget`, and for modifier combos), and the key renders as a `<kbd>` hint on the button. A `loadingMessage` replaces the buttons with a spinner + message row while a bulk action is in flight (matches the IDE's fork). Reach for `FloatingActionBar` directly only when you need finer per-item dropdown styling (dot colors, icon snippets). | `selection: Set \| Array \| number`, `actions?: BulkAction[]`, `groups?: BulkActionGroup[]`, `onClear?`, `loading?`, `loadingMessage?`, `countLabel?` |
 | `BatchJobTable` | Generic queue runner (harvested from vid-gen's BatchGenerator) — `<BatchJobTable generics T>` over bindable `JobRow<T>[]`; host supplies async `run(data, {signal, attempt, reportProgress})`. Concurrency cap, optional per-run `processLimit` (quota budget), rolling-average ETA, per-row status badge / progress / elapsed / retry / skip / cancel / reorder — each cell a snippet override (`statusCell`, `progressCell`, `elapsedCell`, `actionsCell`), host data columns via `headers` + `cells`, extra toolbar content via `toolbar`. Uses `showToast` / `showConfirm` (mount `ToastHost` + `ConfirmDialog`). Exposes `start()`/`pause()`/`cancel()`/`retryFailed()`/`clearFinished()`. Pure scheduling helpers exported too (`nextJobsToStart`, `moveJob`, `summarizeJobs`, `toJobRows`). | `jobs` (bindable), `run`, `concurrencyLimit?` (3), `processLimit?`, `autoStart?`, `notify?`, `confirmDestructive?`, `onJobDone?`, `onJobFailed?`, `onBatchDone?` |
 | `QuotaMeter` | "312 / 500 credits · resets in 4h 10m" bar — warning tint at `warnAt`, error at 100%. Presentational; the host owns the ledger. | `used`, `limit`, `resetsAt?`, `label?`, `unit?`, `warnAt?` (0.8), `size?` |
 | `VariantMatrixPicker` | Category/option chip grid for building a combinatorial variant matrix (harvested from vid-gen's FrameVariantGenerator, presets stripped — caller-supplied `categories`). Each category tab shows a live selection count and an additive/multiplicative badge: multiplicative selections cartesian-multiply the total, additive ones stack flat onto every combination. Live combination count in the footer; algebra exported separately as pure functions (`generateCombinations`, `countCombinations`, `variantCategoryMode`, `findVariantOption`, `generateVariantFilename`). | `categories: VariantCategory[]`, `selected` (bindable `VariantSelection`), `forceMode?`, `showCount?` (true), `countLabel?`, `onChange?`, `class?` |
@@ -150,6 +150,29 @@ import { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from 'jatui
 | `AudioWaveform` | Audio waveform visualizer | `audioUrl`, `isPlaying` |
 | `VoicePlayer` | Audio playback with controls | `src`, `autoplay` |
 | `SpeechForm` | Voice-to-text form input | `onTranscript` |
+| `AudioRecorder` | Voice-memo recorder UI (small pill / large panel with canvas waveform) — markup over the headless factory below | `variant`, `maxDurationMs`, `onRecordStart/Pause/Resume/Stop/Cancel`, `onError` |
+
+```typescript
+// Headless audio capture (jatui-is2ow.8) — the factory behind AudioRecorder.
+// Permission requests, MIME negotiation, record/pause/resume/stop/cancel state
+// machine, pause-aware wall-clock timing, AnalyserNode level meter, blob out.
+// NO transcription — hosts keep their own pipeline and consume onStop's blob
+// (the jat IDE's VoiceMicButton/VoiceInput swap uses it this way).
+import { createAudioRecorder } from "jatui"
+const rec = createAudioRecorder({
+  mode: "push",                 // 'toggle' (default) | 'push' (hold-to-talk: pointerdown→start, pointerup→stop;
+                                //   a stop during stream acquisition cancels silently, matching VoiceMicButton)
+  maxDurationMs: 0,             // auto-stop ceiling; 0 = until stopped
+  onStart?, onPause?, onResume?, onCancel?,
+  onStop?,                      // (result: AudioRecordingResult) — blob/mimeType/durationSeconds/sizeBytes;
+                                //   may be async, recorder stays 'processing' until it settles
+  onError?,                     // (err: { kind, message }) — kind: unsupported|denied|no-mic|start-failed|too-short|handler-failed
+  onFrame?,                     // ({ level, frequency, time }) per animation frame — draw your own visualization
+})
+// Reactive state (Svelte 5 getters): rec.phase ('idle'|'starting'|'recording'|'processing'|'done'),
+// rec.paused, rec.level (0–100), rec.elapsedMs, rec.sizeBytes, rec.error, rec.supported
+// Methods: start() stop() pause() resume() cancel() reset() destroy()
+```
 
 ### PDF
 
@@ -202,7 +225,7 @@ const callbacks: AnnotationCallbacks = {
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
-| `KeyboardShortcutsOverlay` | `?`-triggered modal listing keyboard shortcuts. Ignores typing targets and Ctrl/Meta/Alt combos. Supports a flat `shortcuts` list, grouped `sections` with optional per-key color tinting, or a shortcut `registry` (lists what can fire right now, and pushes a modal context while open so page shortcuts don't fire behind it). Precedence: `sections` > `registry` > `shortcuts`. | `shortcuts?: KeyboardShortcut[]`, `sections?: KeyboardShortcutSection[]`, `registry?: ShortcutRegistry`, `title?`, `open` (bindable) |
+| `KeyboardShortcutsOverlay` | `?`-triggered modal listing keyboard shortcuts. Ignores typing targets and Ctrl/Meta/Alt combos. Supports a flat `shortcuts` list, grouped `sections` with optional per-key color tinting, or a shortcut `registry` (lists what can fire right now, and pushes a modal context while open so page shortcuts don't fire behind it). App-specific sections (marks, list motions, cockpit panels) come in via `extraSections` — rendered after the primary content, before the meta rows, in every mode — plus an `extra` snippet for custom footer content. Precedence: `sections` > `registry` > `shortcuts`; `extraSections`/`extra` always append. | `shortcuts?: KeyboardShortcut[]`, `sections?: KeyboardShortcutSection[]`, `registry?: ShortcutRegistry`, `extraSections?: KeyboardShortcutSection[]`, `extra?: Snippet`, `title?`, `open` (bindable) |
 
 **Shortcut registry** (`createShortcutRegistry()`, or the lazy `getShortcutRegistry()` singleton) — the data source for the overlay, so apps stop hand-wiring a keydown handler plus a separate list for the overlay. Shortcuts register against a **context** and return an unregister fn (return it from `$effect`). Contexts form a stack: `global` is the bottom, `pushContext(name, { modal?, label? })` returns a pop fn, the top context shadows the same combo lower down, and a `modal` context suppresses everything beneath it (including `global`). Handled for you: no firing while typing in text inputs/textarea/select/contenteditable (opt in per shortcut with `allowInInput`), IME composition and `defaultPrevented` events are skipped, `mod` = ⌘ on macOS / Ctrl elsewhere, exact modifier matching (`?` doesn't need `shift`), and macOS Option combos fall back to `event.code`. Per shortcut: `enabled()`, `allowRepeat`, `preventDefault`, `group` (overlay section), `hidden`, `label` (keycap override).
 
@@ -315,6 +338,13 @@ import { statusColor, priorityColor, typeIcon, statusLabel } from "jatui"
 // Phone formatting
 import { formatPhoneNumber, isValidPhoneNumber } from "jatui"
 
+// Clipboard — secure-context aware: falls back to hidden-textarea +
+// document.execCommand('copy') on plain-HTTP origins where navigator.clipboard
+// is undefined (fixes "copy button silently does nothing" over Tailscale/LAN).
+// copyText resolves false when both paths fail; readClipboardText resolves
+// null when the read API is missing or denied.
+import { copyText, readClipboardText } from "jatui"
+
 // Currency
 import { formatCurrency } from "jatui"
 

package/dist/components/AudioRecorder.svelte

@@ -1,11 +1,8 @@
 <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
-	}
+	// The capture pipeline lives in the headless factory (jatui-is2ow.8) —
+	// this component is its markup. Re-exported here so consumers importing
+	// the type from the component keep working.
+	export type { AudioRecordingResult } from '../utils/audioRecorderCore'
 
 	/** m:ss zero-padded seconds — shared format for the timer display. */
 	export function formatDuration(totalSeconds: number): string {
@@ -41,19 +38,15 @@
 	 *     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.
+	 * What it owns: markup only — the theme-aware canvas waveform + level
+	 * meter, phase badges, and size/duration readouts. The capture pipeline
+	 * itself (permission requests, MIME negotiation, the
+	 * record/pause/resume/stop/cancel state machine, timing) lives in the
+	 * headless createAudioRecorder() factory (jatui-is2ow.8) so hosts can
+	 * drive the same pipeline from their own UI.
 	 */
 	import { onDestroy, onMount } from 'svelte'
+	import { createAudioRecorder } from '../utils/audioRecorder'
 	import { getDaisyUIColor, watchThemeChanges } from '../utils/daisyuiColors'
 	import MediaCaptureIcon from './MediaCaptureIcon.svelte'
 
@@ -91,42 +84,49 @@
 		class: className = ''
 	}: Props = $props()
 
-	type Phase = 'idle' | 'recording' | 'processing' | 'done'
-	type PauseState = 'active' | 'paused'
+	type Phase = 'idle' | 'starting' | 'recording' | 'processing' | 'done'
 
-	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
+
+	// Headless capture core — all media handling, timing and state live there.
+	const rec = createAudioRecorder({
+		mode: 'toggle',
+		maxDurationMs,
+		onStart: onRecordStart,
+		onPause: onRecordPause,
+		onResume: onRecordResume,
+		onStop: onRecordStop,
+		onCancel: onRecordCancel,
+		onError: (err) => {
+			if (err.kind === 'denied') permissionDenied = true
+			onError?.(err.message)
+		},
+		// Canvas visualization — driven by the core's analyser frames.
+		onFrame: ({ frequency }) => {
+			if (!canvas) return
+			if (!canvasCtx) canvasCtx = canvas.getContext('2d')
+			sizeCanvasIfNeeded()
+			if (frequency.some((v) => v > 0)) drawWaveform(frequency)
+			else {
+				clearCanvas()
+				drawIdleDots()
+			}
+		}
+	})
+
+	const phase = $derived<Phase>(rec.phase)
+	const paused = $derived(rec.paused)
+	const elapsedSec = $derived(Math.floor(rec.elapsedMs / 1000))
+	const sizeBytes = $derived(rec.sizeBytes)
+	const audioLevel = $derived(rec.level)
+	const errorMessage = $derived(rec.error?.message ?? '')
+	const supported = $derived(rec.supported)
 
 	// 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 {
@@ -147,79 +147,6 @@
 		}
 	}
 
-	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
@@ -298,39 +225,6 @@
 		}
 	}
 
-	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() {
@@ -342,172 +236,38 @@
 		}
 	}
 
-	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 start() {
+		// Parity with the pre-factory guard: start is allowed from idle AND done
+		// (re-record without reset); the core guards starting/recording/processing.
+		if (disabled || phase === 'starting' || phase === 'recording' || phase === 'processing') return
+		updateCanvasColors()
+		void rec.start()
 	}
 
 	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
-		}
+		rec.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
-		}
+		rec.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()
-		}
+		rec.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)
-			}
-		}
+		rec.cancel()
 	}
 
 	/** Return a finished/errored recorder to idle so the host can record again. */
 	export function reset() {
-		cleanup()
-		phase = 'idle'
-		errorMessage = ''
+		rec.reset()
 		permissionDenied = false
 	}
 
 	function retryAfterError() {
-		errorMessage = ''
-		permissionDenied = false
-		phase = 'idle'
+		reset()
 	}
 
 	onMount(() => {
@@ -527,17 +287,27 @@
 		}
 	})
 
+	// While paused the core stops its frame pump — draw the idle dots instead.
+	$effect(() => {
+		if (phase === 'recording' && paused && canvas) {
+			if (!canvasCtx) canvasCtx = canvas.getContext('2d')
+			sizeCanvasIfNeeded()
+			clearCanvas()
+			drawIdleDots()
+		}
+	})
+
 	// 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()
+			if (paused) resume()
 			else pause()
 		}
 	}
 
 	onDestroy(() => {
-		cleanup()
+		rec.destroy()
 	})
 </script>
 
@@ -553,7 +323,12 @@
 				</div>
 			{:else if phase === 'done'}
 				<div class="badge badge-success badge-lg">✓ Complete</div>
-			{:else if phase === 'recording' && paused === 'paused'}
+			{:else if phase === 'starting'}
+				<div class="badge badge-neutral badge-lg gap-2">
+					<span class="loading loading-spinner loading-xs"></span>
+					Preparing…
+				</div>
+			{:else if phase === 'recording' && 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>
@@ -568,7 +343,7 @@
 
 			{#if phase === 'recording'}
 				<div class="relative flex min-h-[96px] items-center justify-center">
-					{#if paused !== 'paused'}
+					{#if !paused}
 						<div class="audio-recorder-pulse"></div>
 					{/if}
 					<canvas bind:this={canvas} class="border-base-300 bg-base-100 z-10 rounded border"></canvas>
@@ -583,7 +358,7 @@
 					</div>
 				</div>
 				<div class="mt-2 flex items-center gap-3">
-					{#if paused === 'paused'}
+					{#if paused}
 						<button
 							type="button"
 							class="btn btn-success btn-circle"
@@ -659,9 +434,14 @@
 						<MediaCaptureIcon name="mic" size={14} />
 					</button>
 				{/if}
+			{:else if phase === 'starting'}
+				<div class="flex items-center gap-2" role="status" aria-live="polite">
+					<span class="loading loading-spinner loading-xs"></span>
+					<span class="text-base-content/60 text-xs">Preparing…</span>
+				</div>
 			{: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'}
+					{#if paused}
 						<button
 							type="button"
 							class="btn btn-success btn-circle btn-sm"

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

@@ -1,10 +1,4 @@
-/** 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;
-}
+export type { AudioRecordingResult } from '../utils/audioRecorderCore';
 /** m:ss zero-padded seconds — shared format for the timer display. */
 export declare function formatDuration(totalSeconds: number): string;
 /** 1.2 KB / 3.4 MB style byte formatting for the size readout. */

package/dist/components/BulkActionBar.svelte

@@ -14,6 +14,16 @@
 	 * shape as flat actions. Flat + grouped can be mixed; flat actions
 	 * render first, then grouped dropdowns.
 	 *
+	 * Per-action single-key hotkeys: give a flat action a one-character
+	 * `key` (e.g. `'c'`) and the component registers a window keydown
+	 * handler that fires `onSelect` for it while the bar is visible and not
+	 * loading — ignored while the focus is in a text entry target (shared
+	 * `isTypingTarget`), for modifier combos and for non-printable keys.
+	 * The key also renders as a `<kbd>` hint on the button.
+	 *
+	 * While `loadingMessage` is set, the buttons are replaced by a spinner +
+	 * message row (matches the IDE's BulkActionBar fork).
+	 *
 	 * Usage — flat only:
 	 *
 	 *     const nav = listNav({ selectable: true });
@@ -43,12 +53,18 @@
 	 */
 
 	import FloatingActionBar from './FloatingActionBar.svelte';
+	import { matchBulkHotkey } from './bulkActionBarKeys';
 	import type { ActionButton, ActionDropdown } from './FloatingActionBar.svelte';
 
 	export interface BulkAction {
 		label: string;
 		/** Optional SVG path string for a 24×24 icon. */
 		icon?: string;
+		/** Optional single-key hotkey (e.g. `'c'`) — fires `onSelect` while the
+		 * bar is visible and not loading. Ignored while typing (isTypingTarget),
+		 * for modifier combos and for non-printable keys. Rendered as a <kbd>
+		 * hint on the button. */
+		key?: string;
 		/** Called when the action is clicked. */
 		onSelect: () => void;
 		/** Renders in the danger variant. Default false. */
@@ -85,6 +101,10 @@
 		onClear?: () => void;
 		/** Loading state — disables all actions and shows a spinner. */
 		loading?: boolean;
+		/** When set, replaces the action buttons with a spinner + this message
+		 * (role="status", aria-live="polite") — the "bulk action in flight"
+		 * presentation from the IDE's fork. */
+		loadingMessage?: string | null;
 		/** Label for the count. Default "selected". */
 		countLabel?: string;
 	}
@@ -95,6 +115,7 @@
 		groups = [],
 		onClear,
 		loading = false,
+		loadingMessage = null,
 		countLabel = 'selected',
 	}: Props = $props();
 
@@ -111,11 +132,29 @@
 			id: a.id ?? a.label,
 			label: a.label,
 			icon: a.icon,
+			key: a.key,
 			variant: a.variant ?? (a.destructive ? 'danger' : 'default'),
 			onclick: a.onSelect,
 		})),
 	);
 
+	// Single-key hotkeys: fire the matching action's onSelect while the bar
+	// is visible and idle. Deciding logic is the pure matchBulkHotkey —
+	// typing targets, modifier combos and non-printable keys never fire.
+	$effect(() => {
+		if (count === 0 || loading || loadingMessage) return;
+		const hotkeyed = actions.filter((a) => a.key);
+		if (hotkeyed.length === 0) return;
+		function onKeydown(event: KeyboardEvent) {
+			const action = matchBulkHotkey(event, hotkeyed);
+			if (!action) return;
+			event.preventDefault();
+			action.onSelect();
+		}
+		window.addEventListener('keydown', onKeydown);
+		return () => window.removeEventListener('keydown', onKeydown);
+	});
+
 	const mappedDropdowns = $derived<ActionDropdown[]>(
 		groups.map((g) => ({
 			id: g.id ?? g.label,
@@ -135,6 +174,7 @@
 	actions={mapped}
 	dropdowns={mappedDropdowns}
 	{loading}
+	{loadingMessage}
 	{onClear}
 	{countLabel}
 />