Aurora AI Audio Player

1"use client"
2 
3/**
4 * Aurora AudioPlayer — voice/audio response element.
5 *
6 * Visual layer ported 1:1 from the Claude Design source: a lit-outline cyan
7 * transport button, a waveform scrubber whose played bars glow cyan over a dim
8 * unplayed tail, a `synthesizing` state that swaps the transport for a spinner,
9 * and a `compact` single-row pill. Reads only `--aurora-*` tokens so it renders
10 * pixel-identical in dark + `.light`.
11 *
12 * Architecture stays shadcn/registry: the Aurora `Button` (Radix `Slot`/`cva`)
13 * powers transport + download, `forwardRef`, `displayName`, and the full
14 * `React.HTMLAttributes` escape hatch are preserved.
15 */
16 
17import * as React from "react"
18import { Download, Play, Sparkles } from "lucide-react"
19import { Button } from "@/registry/aurora/ui/button"
20import { Separator } from "@/registry/aurora/ui/separator"
21import { Spinner } from "@/registry/aurora/ui/spinner"
22 
23export interface AudioPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
24  /** Headline label for the clip. */
25  title?: string
26  /** Total duration, mm:ss. */
27  duration?: string
28  /** Playback progress 0–1 — drives the waveform fill and the current-time readout. */
29  progress?: number
30  /** Transport state. `synthesizing` swaps the play control for a spinner and hides the waveform. */
31  status?: "idle" | "synthesizing"
32  /** Render the Axon orange "AI Voice" pill beside the title. */
33  badge?: boolean
34  /** Show the square download control in the footer. */
35  download?: boolean
36  /** `default` is the full card; `compact` is the single-row pill. */
37  variant?: "default" | "compact"
38  /** Current speed multiplier label shown in the footer. */
39  speed?: string
40}
41 
42// Deterministic waveform bar heights (0..1) — fixed so SSR + client agree.
43const WAVE_FULL = [
44  0.32, 0.5, 0.42, 0.6, 0.38, 0.72, 0.48, 0.34, 0.55, 0.46, 0.82, 0.92, 0.7,
45  0.58, 0.86, 0.62, 0.44, 0.78, 0.36, 0.5, 0.4, 0.66, 0.3, 0.54, 0.48, 0.6,
46  0.42, 0.74, 0.5, 0.38, 0.68, 0.46, 0.56, 0.4, 0.62, 0.34, 0.7, 0.5, 0.44,
47  0.58, 0.36, 0.66, 0.48, 0.4, 0.6, 0.52, 0.34, 0.7, 0.46, 0.56,
48]
49 
50const WAVE_COMPACT = [
51  0.3, 0.18, 0.42, 0.56, 0.66, 0.48, 0.34, 0.5, 0.4, 0.24, 0.32, 0.46, 0.7,
52  0.84, 0.78, 0.62, 0.5, 0.36, 0.28, 0.44, 0.58, 0.66, 0.52, 0.4, 0.5, 0.6,
53  0.46, 0.34, 0.5, 0.42, 0.3, 0.56, 0.44, 0.36, 0.5, 0.28,
54]
55 
56const AI_ORANGE = "var(--axon-orange)"
57 
58function parseSeconds(value: string): number {
59  const parts = value.split(":").map((p) => Number.parseInt(p, 10))
60// … truncated