feat: implement Ethos branding, extract Navbar, and polish Studio UI

.context/technical_spec.md

@@ -1,5 +1,5 @@
 ## core components
-- **base model:** mistral voxtral.
+- **base model:** Ethostral (fine-tuned Mistral).
 - **tracking and evaluation:** weights and biases.
 - **platform:** hugging face for model and adapter hosting.
 

demo/src/app/globals.css

@@ -48,72 +48,94 @@
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --radius: 0.875rem;
+
+  /* Background / Surface */
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.1 0 0);
+
+  /* Card */
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.1 0 0);
+
+  /* Popover */
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.1 0 0);
+
+  /* Primary = Black */
+  --primary: oklch(0.1 0 0);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Secondary = Light gray */
+  --secondary: oklch(0.94 0 0);
+  --secondary-foreground: oklch(0.2 0 0);
+
+  /* Muted = Subtle surfaces */
+  --muted: oklch(0.94 0 0);
+  --muted-foreground: oklch(0.55 0 0);
+
+  /* Accent */
+  --accent: oklch(0.92 0 0);
+  --accent-foreground: oklch(0.1 0 0);
+
+  /* Destructive */
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Border and Input */
+  --border: oklch(0.88 0 0);
+  --input: oklch(0.88 0 0);
+  --ring: oklch(0.6 0 0);
+
+  /* Charts */
+  --chart-1: oklch(0.3 0 0);
+  --chart-2: oklch(0.55 0 0);
+  --chart-3: oklch(0.45 0.07 227.392);
+  --chart-4: oklch(0.7 0.1 84.429);
+  --chart-5: oklch(0.5 0.15 16.439);
+
+  /* Sidebar */
+  --sidebar: oklch(0.97 0 0);
+  --sidebar-foreground: oklch(0.1 0 0);
+  --sidebar-primary: oklch(0.1 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent-foreground: oklch(0.1 0 0);
+  --sidebar-border: oklch(0.88 0 0);
+  --sidebar-ring: oklch(0.6 0 0);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --background: oklch(0.1 0 0);
+  --foreground: oklch(0.97 0 0);
+  --card: oklch(0.15 0 0);
+  --card-foreground: oklch(0.97 0 0);
+  --popover: oklch(0.15 0 0);
+  --popover-foreground: oklch(0.97 0 0);
+  --primary: oklch(0.97 0 0);
+  --primary-foreground: oklch(0.1 0 0);
+  --secondary: oklch(0.22 0 0);
+  --secondary-foreground: oklch(0.97 0 0);
+  --muted: oklch(0.22 0 0);
+  --muted-foreground: oklch(0.62 0 0);
+  --accent: oklch(0.22 0 0);
+  --accent-foreground: oklch(0.97 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.5 0 0);
+  --chart-1: oklch(0.8 0 0);
+  --chart-2: oklch(0.6 0 0);
+  --chart-3: oklch(0.7 0.1 227.392);
+  --chart-4: oklch(0.6 0.2 303.9);
+  --chart-5: oklch(0.6 0.2 16.439);
+  --sidebar: oklch(0.15 0 0);
+  --sidebar-foreground: oklch(0.97 0 0);
+  --sidebar-primary: oklch(0.97 0 0);
+  --sidebar-primary-foreground: oklch(0.1 0 0);
+  --sidebar-accent: oklch(0.22 0 0);
+  --sidebar-accent-foreground: oklch(0.97 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.5 0 0);
 }
 
 @layer base {

demo/src/app/layout.tsx

@@ -10,8 +10,8 @@ const lato = Lato({
 });
 
 export const metadata: Metadata = {
-  title: "Voxtral Studio | Emotional Speech Recognition",
-  description: "Advanced emotional speech recognition and transcription studio.",
+  title: "Ethos Studio | Emotional Speech Recognition",
+  description: "Advanced emotional speech recognition and transcription studio powered by Ethostral.",
 };
 
 export default function RootLayout({
@@ -20,9 +20,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en">
       <body
-        className={`${lato.variable} antialiased selection:bg-blue-500/30 font-sans`}
+        className={`${lato.variable} antialiased selection:bg-black/10 font-sans`}
       >
         <TooltipProvider>
           {children}

demo/src/app/page.tsx

@@ -1,80 +1,212 @@
 "use client"
 
-import React from "react"
+import React, { useState } from "react"
 import Link from "next/link"
-import { motion } from "framer-motion"
-import { Microphone, ArrowRight, ChartLine, Waveform } from "@phosphor-icons/react"
+import { motion, AnimatePresence } from "framer-motion"
+import {
+  Microphone, MagnifyingGlass, DotsThreeVertical,
+  UploadSimple, Sparkle, Play, Clock,
+} from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select"
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table"
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Navbar } from "@/components/navbar"
+import { Skeleton } from "@/components/ui/skeleton"
 
-export default function LandingPage() {
+// --- Mock Data ---
+const MOCK_SESSIONS = [
+  { id: "1", title: "Team_Standup_2026-02-28.mp4", createdAt: "2 days ago" },
+  { id: "2", title: "Customer_Interview_Batch_7.wav", createdAt: "5 days ago" },
+  { id: "3", title: "Podcast_Episode_14.mp3", createdAt: "1 week ago" },
+  { id: "4", title: "WeChat_20250804025710.mp4", createdAt: "7 months ago" },
+]
+
+// --- Upload Dialog ---
+function UploadDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
   return (
-    <div className="min-h-screen bg-[#050505] text-white flex flex-col items-center justify-center p-6 relative overflow-hidden">
-      {/* Background Glow */}
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none" />
-
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8 }}
-        className="max-w-2xl w-full text-center space-y-8 z-10"
-      >
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle>Transcribe files</DialogTitle>
+        </DialogHeader>
+
+        {/* Drop Zone */}
+        <div className="border-2 border-dashed border-border rounded-lg px-6 py-10 flex flex-col items-center gap-2 text-center cursor-pointer hover:border-foreground/30 hover:bg-muted/40 transition-colors">
+          <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-1">
+            <UploadSimple size={20} className="text-muted-foreground" />
+          </div>
+          <p className="text-sm font-semibold text-foreground">Click or drag files here to upload</p>
+          <p className="text-xs text-muted-foreground">Audio & video files, up to 1000MB</p>
+        </div>
+
+        <Separator />
+
+        {/* Settings */}
         <div className="space-y-4">
-          <motion.div
-            initial={{ scale: 0.9 }}
-            animate={{ scale: 1 }}
-            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-sans text-white/60 tracking-widest uppercase"
-          >
-            <ChartLine size={14} className="text-blue-500" />
-            V0.1.0_PROTOTYPE
-          </motion.div>
-
-          <h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-none">
-            VOXTRAL<span className="text-blue-500">_</span>
-          </h1>
-
-          <p className="text-lg text-white/40 font-medium max-w-lg mx-auto leading-relaxed">
-            High-precision emotional speech recognition.
-            Diarized, transcribed, and analyzed in real-time.
-          </p>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="lang-select" className="text-sm font-medium">Primary language</Label>
+            <Select defaultValue="detect">
+              <SelectTrigger id="lang-select" className="w-32 h-8 text-sm">
+                <SelectValue placeholder="Detect" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="detect">Detect</SelectItem>
+                <SelectItem value="en">English</SelectItem>
+                <SelectItem value="es">Spanish</SelectItem>
+                <SelectItem value="fr">French</SelectItem>
+                <SelectItem value="zh">Chinese</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="diarize" className="text-sm font-medium">Speaker diarization</Label>
+            <Switch id="diarize" defaultChecked />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="emotion" className="text-sm font-medium">Emotion analysis</Label>
+            <Switch id="emotion" defaultChecked />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="subtitles" className="text-sm font-medium">Include subtitles</Label>
+            <Switch id="subtitles" />
+          </div>
         </div>
 
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <Link href="/studio">
-            <Button size="lg" className="h-14 px-8 rounded-maia bg-white text-black hover:bg-white/90 text-sm font-bold gap-3 group">
-              ENTER STUDIO
-              <ArrowRight size={18} weight="bold" className="group-hover:translate-x-1 transition-transform" />
-            </Button>
-          </Link>
-          <Button variant="outline" size="lg" className="h-14 px-8 rounded-maia border-white/10 bg-white/5 hover:bg-white/10 text-sm font-bold gap-3">
-            DOCUMENTATION
+        <Button className="w-full gap-2 font-bold">
+          <UploadSimple size={16} weight="bold" />
+          Upload files
+        </Button>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// --- Main Page ---
+export default function HomePage() {
+  const [showModal, setShowModal] = useState(false)
+  const [search, setSearch] = useState("")
+
+  const filtered = MOCK_SESSIONS.filter(s =>
+    s.title.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <Navbar />
+
+      <main className="max-w-4xl mx-auto px-6 py-10">
+        {/* Page Header */}
+        <div className="flex items-start justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-black tracking-tight">Speech to text</h1>
+            <p className="text-sm text-muted-foreground mt-1">
+              Transcribe audio and video files with our{" "}
+              <span className="underline underline-offset-2 text-foreground font-medium cursor-pointer">industry-leading ASR model.</span>
+            </p>
+          </div>
+          <Button onClick={() => setShowModal(true)} className="gap-2 font-bold shadow-sm">
+            <Microphone size={16} weight="bold" />
+            Transcribe files
           </Button>
         </div>
 
-        <div className="pt-12 grid grid-cols-3 gap-8">
-          {[
-            { label: "LATENCY", value: "<500MS" },
-            { label: "PRECISION", value: "99.2%" },
-            { label: "ENGINES", value: "VOX_V3" },
-          ].map(stat => (
-            <div key={stat.label} className="flex flex-col items-center">
-              <span className="text-[10px] font-bold text-white/20 tracking-widest uppercase">{stat.label}</span>
-              <span className="text-sm font-sans text-white/60">{stat.value}</span>
-            </div>
-          ))}
+        {/* Promo Banner */}
+        <div className="border border-border rounded-lg p-4 flex items-center gap-4 mb-5 bg-card hover:bg-muted/40 transition-colors cursor-pointer">
+          <Skeleton className="w-14 h-14 rounded-lg bg-foreground/10 flex-shrink-0" />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-bold">Try Ethostral Realtime</p>
+            <p className="text-sm text-muted-foreground mt-0.5 leading-snug">
+              Experience lightning-fast transcription with unmatched emotional accuracy, powered by Ethostral.
+            </p>
+          </div>
+          <Button variant="outline" size="sm" className="flex-shrink-0 font-bold">
+            Try the demo
+          </Button>
         </div>
-      </motion.div>
-
-      {/* Subtle Waveform Animation at bottom */}
-      <div className="absolute bottom-12 left-0 right-0 h-24 flex items-end justify-center gap-1 opacity-20 pointer-events-none">
-        {[...Array(60)].map((_, i) => (
-          <motion.div
-            key={i}
-            animate={{ height: [`20%`, `${40 + Math.random() * 60}%`, `20%`] }}
-            transition={{ duration: 1.5 + Math.random(), repeat: Infinity }}
-            className="w-[2px] bg-white rounded-full"
+
+        {/* Search */}
+        <div className="relative mb-5">
+          <MagnifyingGlass size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search transcripts..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            className="pl-9 h-9 text-sm bg-card"
           />
-        ))}
-      </div>
+        </div>
+
+        {/* Table */}
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-[11px] font-black uppercase tracking-widest text-muted-foreground">Title</TableHead>
+              <TableHead className="text-[11px] font-black uppercase tracking-widest text-muted-foreground">Created at</TableHead>
+              <TableHead className="w-10" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filtered.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={3} className="text-center text-muted-foreground py-16 text-sm">
+                  No transcripts found.
+                </TableCell>
+              </TableRow>
+            ) : (
+              filtered.map((session, i) => (
+                <TableRow key={session.id} className="cursor-pointer group">
+                  <TableCell>
+                    <Link href="/studio" className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-md bg-muted border border-border flex items-center justify-center flex-shrink-0">
+                        <Play size={12} weight="fill" className="text-muted-foreground" />
+                      </div>
+                      <span className="text-sm font-semibold truncate max-w-xs">{session.title}</span>
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground flex items-center gap-1.5">
+                      <Clock size={13} />
+                      {session.createdAt}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <DotsThreeVertical size={16} />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>Open</DropdownMenuItem>
+                        <DropdownMenuItem>Export</DropdownMenuItem>
+                        <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </main>
+
+      <UploadDialog open={showModal} onOpenChange={setShowModal} />
     </div>
   )
 }

demo/src/app/studio/page.tsx

@@ -1,350 +1,349 @@
 "use client"
 
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
+import Link from "next/link"
 import { motion, AnimatePresence } from "framer-motion"
 import {
-  Waves,
-  Microphone,
-  Export,
-  Play,
-  Pause,
+  ArrowLeft, ArrowCounterClockwise, ArrowClockwise,
+  Export, Play, Pause, Plus, DotsThreeVertical,
+  MagnifyingGlass, MinusCircle, PlusCircle, Waveform,
   SpeakerHigh,
-  Waveform,
-  ChartLine,
-  ChartPieSlice,
-  ArrowsInLineVertical,
-  Sliders
 } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Slider } from "@/components/ui/slider"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Collapsible, CollapsibleContent, CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { Progress } from "@/components/ui/progress"
 
 // --- Mock Data ---
+const SPEAKERS = [
+  { id: "s0", label: "Speaker 0", color: "bg-blue-400" },
+  { id: "s1", label: "Speaker 1", color: "bg-pink-400" },
+]
 
-const MOCK_TRANSCRIPT = [
-  { id: 1, speaker: "Speaker 0", time: "00:10", text: "I can't believe we're actually doing this.", emotion: "Surprise", valence: 0.6, arousal: 0.8 },
-  { id: 2, speaker: "Speaker 1", time: "00:15", text: "It's been a long time coming. Are you nervous?", emotion: "Neutral", valence: 0.1, arousal: 0.2 },
-  { id: 3, speaker: "Speaker 0", time: "00:22", text: "A little bit. The data is just... it's a lot to process.", emotion: "Anxiety", valence: -0.4, arousal: 0.7 },
-  { id: 4, speaker: "Speaker 1", time: "00:30", text: "Don't worry, the models are calibrated for this level of noise.", emotion: "Calm", valence: 0.3, arousal: -0.2 },
+const SEGMENTS = [
+  { id: 1, speaker: "s0", startTime: "00.10", endTime: "07.28", text: "[instrumental music plays]", emotion: "Neutral", valence: 0.0, arousal: 0.1 },
+  { id: 2, speaker: "s0", startTime: "08.10", endTime: "09.04", text: "Hello, I'm here.", emotion: "Calm", valence: 0.3, arousal: -0.1 },
+  { id: 3, speaker: "s1", startTime: "10.62", endTime: "11.00", text: "Oh.", emotion: "Surprise", valence: 0.4, arousal: 0.6 },
+  { id: 4, speaker: "s1", startTime: "13.02", endTime: "14.18", text: "Hi.", emotion: "Neutral", valence: 0.1, arousal: 0.0 },
+  { id: 5, speaker: "s0", startTime: "14.82", endTime: "16.40", text: "Hi.", emotion: "Happy", valence: 0.7, arousal: 0.4 },
+  { id: 6, speaker: "s1", startTime: "17.20", endTime: "22.10", text: "It's been a long time coming. Are you nervous?", emotion: "Curious", valence: 0.2, arousal: 0.5 },
+  { id: 7, speaker: "s0", startTime: "22.90", endTime: "28.50", text: "A little bit. The data is just... it's a lot to process.", emotion: "Anxiety", valence: -0.4, arousal: 0.7 },
 ]
 
-// --- Components ---
+const SPEAKER_MAP: Record<string, { label: string; color: string }> = {
+  s0: { label: "Speaker 0", color: "bg-blue-400" },
+  s1: { label: "Speaker 1", color: "bg-pink-400" },
+}
 
-const Header = () => (
-  <header className="h-14 border-b border-white/10 bg-black/40 backdrop-blur-md flex items-center justify-between px-6 sticky top-0 z-50">
-    <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2">
-        <div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
-        <span className="text-sm font-medium text-white/80">LIVE_SESSION_01.wav</span>
+// Transcript segment row — matches the reference's Speaker / Timestamp / Text layout
+function SegmentRow({
+  seg,
+  active,
+  onClick,
+}: {
+  seg: typeof SEGMENTS[number]
+  active: boolean
+  onClick: () => void
+}) {
+  const speaker = SPEAKER_MAP[seg.speaker]
+  return (
+    <div
+      onClick={onClick}
+      className={`flex gap-0 group transition-colors cursor-pointer border-b border-border last:border-0 ${active ? "bg-accent" : "hover:bg-muted/40"}`}
+    >
+      {/* Speaker col */}
+      <div className="w-36 flex-shrink-0 flex items-start gap-2 px-4 py-4">
+        <Avatar className="w-7 h-7 flex-shrink-0 mt-0.5">
+          <AvatarFallback className={`${speaker.color} text-white text-[10px] font-bold`}>
+            {speaker.label[0]}
+          </AvatarFallback>
+        </Avatar>
+        <span className="text-xs font-bold text-foreground leading-tight mt-1">{speaker.label}</span>
       </div>
-      <div className="h-4 w-[1px] bg-white/10" />
-      <span className="text-xs font-sans text-white/40">DURATION: 00:32:45</span>
-    </div>
-    <div className="flex items-center gap-3">
-      <Button variant="outline" size="sm" className="bg-white/5 border-white/10 hover:bg-white/10 text-white/80 gap-2">
-        <Export size={16} weight="bold" />
-        EXPORT
-      </Button>
-      <div className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center">
-        <div className="w-4 h-4 rounded-full bg-blue-500" />
+
+      {/* Separator */}
+      <Separator orientation="vertical" className="h-auto" />
+
+      {/* Time + text col */}
+      <div className="flex-1 px-5 py-4 space-y-1 min-w-0">
+        <p className="text-[11px] text-muted-foreground font-medium">{seg.startTime}</p>
+        <p className="text-sm text-foreground leading-relaxed">{seg.text}</p>
+        <p className="text-[11px] text-muted-foreground font-medium">{seg.endTime}</p>
       </div>
-    </div>
-  </header>
-)
 
-const TranscriptPanel = ({ activeSegment, onSelect }: any) => (
-  <div className="flex flex-col h-full bg-black/20 border-r border-white/5">
-    <div className="p-4 border-b border-white/5 flex items-center gap-2">
-      <SpeakerHigh size={18} className="text-white/60" />
-      <h2 className="text-xs font-bold tracking-widest text-white/60 uppercase">DIARIZED_TRANSCRIPT</h2>
-    </div>
-    <ScrollArea className="flex-1 p-4">
-      <div className="space-y-6">
-        {MOCK_TRANSCRIPT.map((item) => (
-          <motion.div
-            key={item.id}
-            initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
-            className={`group cursor-pointer p-3 rounded-xl transition-all ${activeSegment === item.id ? 'bg-white/10 ring-1 ring-white/20' : 'hover:bg-white/5'}`}
-            onClick={() => onSelect(item)}
-          >
-            <div className="flex items-start gap-3">
-              <Avatar className="w-8 h-8 rounded-lg">
-                <AvatarFallback className="bg-white/5 text-[10px] text-white/40">{item.speaker[item.speaker.length - 1]}</AvatarFallback>
-              </Avatar>
-              <div className="flex-1 space-y-1">
-                <div className="flex items-center justify-between">
-                  <span className="text-[10px] font-bold text-white/40 uppercase tracking-tighter">{item.speaker}</span>
-                  <span className="text-[10px] font-sans text-white/20">{item.time}</span>
-                </div>
-                <p className="text-sm text-white/80 leading-relaxed font-sans">{item.text}</p>
-                <div className="pt-2 flex flex-wrap gap-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <Badge variant="outline" className="bg-blue-500/10 border-blue-500/30 text-blue-400 text-[9px] px-1.5 py-0 uppercase font-sans">
-                          {item.emotion}
-                        </Badge>
-                      </TooltipTrigger>
-                      <TooltipContent className="bg-black/90 border-white/10 text-xs">
-                        Dominant Emotion Tag
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        ))}
+      {/* Emotion badge — right */}
+      <div className="flex-shrink-0 flex items-start pt-4 pr-4">
+        <Badge
+          variant="outline"
+          className="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0 border-border text-muted-foreground"
+        >
+          {seg.emotion}
+        </Badge>
       </div>
-    </ScrollArea>
-  </div>
-)
+    </div>
+  )
+}
 
-const QuadViewAnalytics = ({ activeSegment }: any) => {
+// Right panel: video preview + properties
+function RightPanel({ activeSegment }: { activeSegment: typeof SEGMENTS[number] | null }) {
   return (
-    <div className="grid grid-cols-2 grid-rows-2 h-full gap-[1px] bg-white/5">
-      {/* 1. Russell's Circumplex */}
-      <Card className="rounded-none border-none bg-black/40 p-4 flex flex-col gap-4 relative overflow-hidden group">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <ChartLine size={18} className="text-blue-400" />
-            <h3 className="text-[10px] font-bold tracking-widest text-white/40 uppercase">RUSSELL_CIRCUMPLEX</h3>
-          </div>
-          <span className="text-[10px] font-sans text-white/20">V: {activeSegment?.valence || 0} / A: {activeSegment?.arousal || 0}</span>
-        </div>
-        <div className="flex-1 bg-white/5 rounded-lg relative flex items-center justify-center border border-white/5">
-          <div className="absolute inset-0 flex items-center justify-center opacity-10">
-            <div className="w-full h-[1px] bg-white" />
-            <div className="h-full w-[1px] bg-white absolute" />
-          </div>
-          <div className="absolute top-2 left-1/2 -translate-x-1/2 text-[8px] text-white/20">AROUSAL +</div>
-          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 text-[8px] text-white/20">AROUSAL -</div>
-          <div className="absolute left-2 top-1/2 -translate-y-1/2 text-[8px] text-white/20 rotate-90">VALENCE -</div>
-          <div className="absolute right-2 top-1/2 -translate-y-1/2 text-[8px] text-white/20 -rotate-90">VALENCE +</div>
-
-          <motion.div
-            animate={{
-              x: (activeSegment?.valence || 0) * 100,
-              y: (activeSegment?.arousal || 0) * -100
-            }}
-            className="w-4 h-4 bg-blue-500 rounded-full shadow-[0_0_20px_rgba(59,130,246,0.5)] border-2 border-white relative z-10"
-          >
-            <div className="absolute inset-0 animate-ping bg-blue-500 rounded-full opacity-50" />
-          </motion.div>
+    <div className="flex flex-col h-full border-l border-border bg-card">
+      {/* Fake video player */}
+      <div className="aspect-video w-full bg-slate-950 flex items-center justify-center flex-shrink-0 relative">
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-white/20">
+          <Waveform size={36} />
+          <span className="text-[10px] font-bold uppercase tracking-widest">VIDEO PREVIEW</span>
         </div>
-      </Card>
-
-      {/* 2. Plutchik's Wheel / Radar */}
-      <Card className="rounded-none border-none bg-black/40 p-4 flex flex-col gap-4 group">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <ChartPieSlice size={18} className="text-purple-400" />
-            <h3 className="text-[10px] font-bold tracking-widest text-white/40 uppercase">PLUTCHIK_WHEEL</h3>
+        {/* Fake video controls bar */}
+        <div className="absolute bottom-0 left-0 right-0 h-6 bg-black/60 flex items-center px-2 gap-1">
+          <Play size={10} weight="fill" className="text-white/60" />
+          <div className="flex-1 h-[2px] bg-white/20 rounded-full mx-1">
+            <div className="w-1/4 h-full bg-white/60 rounded-full" />
           </div>
+          <span className="text-white/40 text-[9px]">0:14.82</span>
         </div>
-        <div className="flex-1 flex items-center justify-center relative">
-          <div className="w-32 h-32 rounded-full border border-white/10 flex items-center justify-center">
-            <div className="w-20 h-20 rounded-full border border-white/5 flex items-center justify-center" />
-            <div className="absolute inset-0 flex items-center justify-center">
-              {[0, 45, 90, 135, 180, 225, 270, 315].map(deg => (
-                <div key={deg} className="absolute w-[1px] h-full bg-white/5" style={{ transform: `rotate(${deg}deg)` }} />
-              ))}
-            </div>
-            <motion.div
-              animate={{ scale: [1, 1.1, 1], rotate: [0, 5, -5, 0] }}
-              transition={{ duration: 4, repeat: Infinity }}
-              className="w-24 h-24 bg-purple-500/20 rounded-full border border-purple-500/40 backdrop-blur-sm"
-              style={{ clipPath: 'polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)' }}
-            />
-          </div>
-        </div>
-      </Card>
+      </div>
 
-      {/* 3. Prosodic Meters */}
-      <Card className="rounded-none border-none bg-black/40 p-4 flex flex-col gap-4 group">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <ArrowsInLineVertical size={18} className="text-emerald-400" />
-            <h3 className="text-[10px] font-bold tracking-widest text-white/40 uppercase">PROSODIC_ANALYSIS</h3>
-          </div>
-        </div>
-        <div className="flex-1 flex items-end justify-between px-4 pb-2 gap-4">
-          {[
-            { label: "PITCH", value: 160, max: 400, unit: "Hz", color: "bg-emerald-500" },
-            { label: "JITTER", value: 0.12, max: 1, unit: "%", color: "bg-blue-500" },
-            { label: "RATE", value: 140, max: 300, unit: "wpm", color: "bg-amber-500" },
-            { label: "SHIM", value: 0.4, max: 1, unit: "dB", color: "bg-purple-500" },
-          ].map(meter => (
-            <div key={meter.label} className="flex-1 flex flex-col items-center gap-2 h-full">
-              <div className="flex-1 w-full bg-white/5 rounded-sm overflow-hidden relative flex flex-col justify-end">
-                <div className="absolute inset-0 opacity-10 flex flex-col justify-between p-1">
-                  {[...Array(10)].map((_, i) => <div key={i} className="h-[1px] w-full bg-white" />)}
+      <ScrollArea className="flex-1">
+        <div className="p-4 space-y-4">
+          {/* Global Properties */}
+          <Collapsible defaultOpen>
+            <CollapsibleTrigger className="flex items-center gap-2 text-xs font-bold text-muted-foreground uppercase tracking-widest hover:text-foreground transition-colors w-full text-left">
+              <span>▾</span> Global Properties
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="mt-3 space-y-3 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="font-semibold text-foreground truncate max-w-[160px] text-xs">WeChat_20250804025710.mp4</span>
+                </div>
+                <Separator />
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground text-xs">Language</span>
+                  <span className="font-semibold text-xs">English</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground text-xs">Subtitles</span>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-6 w-6">
+                        <DotsThreeVertical size={14} />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuItem>Export SRT</DropdownMenuItem>
+                      <DropdownMenuItem>Export VTT</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
-                <motion.div
-                  initial={{ height: 0 }}
-                  animate={{ height: `${(meter.value / meter.max) * 100}%` }}
-                  className={`w-full ${meter.color} shadow-[0_0_15px_rgba(255,255,255,0.1)]`}
-                />
               </div>
-              <span className="text-[8px] font-bold text-white/20 uppercase tracking-tighter">{meter.label}</span>
-              <span className="text-[9px] font-sans text-white/40">{meter.value}{meter.unit}</span>
-            </div>
-          ))}
-        </div>
-      </Card>
+            </CollapsibleContent>
+          </Collapsible>
 
-      {/* 4. PAD Space */}
-      <Card className="rounded-none border-none bg-black/40 p-4 flex flex-col gap-4 group">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Sliders size={18} className="text-amber-400" />
-            <h3 className="text-[10px] font-bold tracking-widest text-white/40 uppercase">PAD_DIMENSIONS</h3>
-          </div>
-        </div>
-        <div className="flex-1 space-y-4 px-2">
-          {[
-            { label: "Pleasure", value: 45, color: "bg-emerald-500" },
-            { label: "Arousal", value: 78, color: "bg-blue-500" },
-            { label: "Dominance", value: 62, color: "bg-purple-500" },
-          ].map(slider => (
-            <div key={slider.label} className="space-y-1">
-              <div className="flex justify-between text-[8px] uppercase tracking-widest text-white/40">
-                <span>{slider.label}</span>
-                <span className="font-sans">{slider.value}%</span>
-              </div>
-              <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
-                <motion.div
-                  initial={{ width: 0 }}
-                  animate={{ width: `${slider.value}%` }}
-                  className={`h-full ${slider.color}`}
-                />
+          <Separator />
+
+          {/* Emotional Analysis (active segment) */}
+          <Collapsible defaultOpen>
+            <CollapsibleTrigger className="flex items-center gap-2 text-xs font-bold text-muted-foreground uppercase tracking-widest hover:text-foreground transition-colors w-full text-left">
+              <span>▾</span> Emotional Analysis
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="mt-3 space-y-3">
+                {activeSegment ? (
+                  <>
+                    <div className="flex items-center justify-between text-xs">
+                      <span className="text-muted-foreground">Emotion</span>
+                      <Badge variant="outline" className="font-bold text-[10px]">{activeSegment.emotion}</Badge>
+                    </div>
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span>Valence</span>
+                        <span className="font-bold text-foreground">{((activeSegment.valence + 1) / 2 * 100).toFixed(0)}%</span>
+                      </div>
+                      <Progress value={(activeSegment.valence + 1) / 2 * 100} className="h-1.5" />
+                    </div>
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                        <span>Arousal</span>
+                        <span className="font-bold text-foreground">{((activeSegment.arousal + 1) / 2 * 100).toFixed(0)}%</span>
+                      </div>
+                      <Progress value={(activeSegment.arousal + 1) / 2 * 100} className="h-1.5" />
+                    </div>
+                  </>
+                ) : (
+                  <p className="text-xs text-muted-foreground">Select a segment to view analysis.</p>
+                )}
               </div>
-            </div>
-          ))}
+            </CollapsibleContent>
+          </Collapsible>
         </div>
-      </Card>
+      </ScrollArea>
     </div>
   )
 }
 
-const EmotionalTimeline = () => (
-  <footer className="h-32 border-t border-white/10 bg-black/60 backdrop-blur-xl flex flex-col">
-    <div className="h-2 w-full bg-white/5 relative">
-      <div className="absolute left-1/4 w-[1px] h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,1)] z-10" />
-      <div className="absolute left-1/4 right-0 h-full bg-blue-500/10" />
-    </div>
-    <div className="flex-1 flex px-6 py-4 gap-6 items-center">
-      <div className="flex items-center gap-4">
-        <Button size="icon" variant="ghost" className="rounded-full hover:bg-white/10 text-white">
-          <Waves size={24} weight="bold" />
-        </Button>
-        <div className="flex items-center gap-1">
-          <Button size="icon" variant="ghost" className="h-8 w-8 text-white/60">
-            <Play size={18} weight="fill" />
+// Bottom timeline bar
+function TimelineBar({ isPlaying, onToggle }: { isPlaying: boolean; onToggle: () => void }) {
+  return (
+    <div className="border-t border-border bg-card flex-shrink-0">
+      {/* Speaker track rows */}
+      <div className="border-b border-border">
+        <div className="flex items-center px-3 py-1.5 gap-2 group">
+          <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground cursor-grab">
+            <DotsThreeVertical size={12} />
+          </Button>
+          <Avatar className="w-5 h-5">
+            <AvatarFallback className="bg-blue-400 text-white text-[8px] font-bold">S</AvatarFallback>
+          </Avatar>
+          <span className="text-xs font-semibold text-foreground w-20">Speaker 0</span>
+          <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground ml-auto opacity-0 group-hover:opacity-100">
+            <DotsThreeVertical size={12} />
           </Button>
-          <span className="text-[10px] font-sans text-white/40">00:32:04 / 01:20:00</span>
+          {/* Track visualization */}
+          <div className="flex-1 h-5 flex items-center gap-[2px]">
+            {[60, 15, 12, 8, 10, 14].map((w, i) => (
+              <div key={i} className="h-4 bg-blue-200 rounded-sm" style={{ width: `${w}%` }} />
+            ))}
+          </div>
         </div>
-      </div>
-      <div className="flex-1 h-12 relative flex items-center justify-between gap-[2px]">
-        {[...Array(120)].map((_, i) => (
-          <div
-            key={i}
-            className={`w-[2px] rounded-full transition-all duration-300 ${i % 10 === 0 ? 'h-8 bg-white/20' : 'h-4 bg-white/5'}`}
-            style={{ height: `${20 + Math.random() * 60}%`, opacity: i > 30 ? 0.3 : 1 }}
-          />
-        ))}
-        <div className="absolute inset-x-0 h-[1px] bg-white/5" />
-      </div>
-      <div className="flex items-center gap-4">
-        <div className="flex flex-col items-end">
-          <span className="text-[8px] font-bold text-white/20 uppercase tracking-widest">SCANNING_RESOLUTION</span>
-          <span className="text-[10px] font-sans text-white/60">120ms/sample</span>
+        <div className="flex items-center px-3 py-1.5 gap-2 group">
+          <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground cursor-grab">
+            <DotsThreeVertical size={12} />
+          </Button>
+          <Avatar className="w-5 h-5">
+            <AvatarFallback className="bg-pink-400 text-white text-[8px] font-bold">S</AvatarFallback>
+          </Avatar>
+          <span className="text-xs font-semibold text-foreground w-20">Speaker 1</span>
+          <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground ml-auto opacity-0 group-hover:opacity-100">
+            <DotsThreeVertical size={12} />
+          </Button>
+          <div className="flex-1 h-5 flex items-center gap-[2px]">
+            {[0, 0, 5, 6, 0, 8, 5, 6].map((w, i) => (
+              w > 0 ? <div key={i} className="h-4 bg-pink-200 rounded-sm" style={{ width: `${w}%` }} /> : <div key={i} style={{ width: "8%" }} />
+            ))}
+          </div>
         </div>
-        <Slider defaultValue={[25]} max={100} step={1} className="w-24" />
       </div>
-    </div>
-  </footer>
-)
 
-const RecorderOverlay = () => {
-  const [isRecording, setIsRecording] = useState(false)
+      {/* Playback controls */}
+      <div className="flex items-center gap-4 px-4 h-10">
+        {/* Zoom */}
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <MinusCircle size={14} />
+          <Slider defaultValue={[40]} max={100} className="w-16" />
+          <PlusCircle size={14} />
+        </div>
 
-  return (
-    <div className="absolute right-8 bottom-40 z-50">
-      <motion.button
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-        onClick={() => setIsRecording(!isRecording)}
-        className={`w-16 h-16 rounded-full flex items-center justify-center relative transition-all duration-500 ${isRecording ? 'bg-red-500 shadow-[0_0_50px_rgba(239,68,68,0.5)]' : 'bg-white/10 hover:bg-white/20 backdrop-blur-md'}`}
-      >
-        <AnimatePresence mode="wait">
-          {isRecording ? (
-            <motion.div
-              key="stop"
-              initial={{ opacity: 0, scale: 0 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0 }}
-            >
-              <div className="w-6 h-6 bg-white rounded-sm" />
-            </motion.div>
-          ) : (
-            <motion.div
-              key="mic"
-              initial={{ opacity: 0, scale: 0 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0 }}
-            >
-              <Microphone size={32} weight="bold" className="text-white" />
-            </motion.div>
-          )}
-        </AnimatePresence>
+        <Separator orientation="vertical" className="h-5" />
+
+        {/* Play / speed */}
+        <div className="flex items-center gap-3">
+          <Button
+            size="icon"
+            className="h-7 w-7 rounded-full"
+            onClick={onToggle}
+          >
+            {isPlaying
+              ? <Pause size={13} weight="fill" />
+              : <Play size={13} weight="fill" />
+            }
+          </Button>
+          <span className="text-xs font-bold text-muted-foreground">1.0×</span>
+        </div>
+
+        <div className="flex-1" />
 
-        {isRecording && (
-          <motion.div
-            initial={{ scale: 1 }}
-            animate={{ scale: [1, 1.5, 1], opacity: [0.5, 0, 0.5] }}
-            transition={{ duration: 2, repeat: Infinity }}
-            className="absolute inset-0 rounded-full border-2 border-red-500"
-          />
-        )}
-      </motion.button>
+        {/* Add segment */}
+        <Button variant="ghost" size="sm" className="text-xs text-muted-foreground font-semibold gap-1.5 h-7">
+          <Plus size={13} />
+          Add segment
+        </Button>
+      </div>
     </div>
   )
 }
 
+// --- Page ---
 export default function StudioPage() {
-  const [activeSegment, setActiveSegment] = useState(MOCK_TRANSCRIPT[0])
+  const [activeId, setActiveId] = useState<number>(1)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  const activeSegment = SEGMENTS.find(s => s.id === activeId) ?? null
 
   return (
-    <main className="flex flex-col h-screen bg-[#050505] text-white selection:bg-blue-500/30 overflow-hidden font-sans">
-      <Header />
+    <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
+      {/* Top Bar */}
+      <header className="h-11 border-b border-border bg-card flex items-center px-4 gap-3 flex-shrink-0 sticky top-0 z-50">
+        <Link href="/">
+          <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground">
+            <ArrowLeft size={16} />
+          </Button>
+        </Link>
+
 
-      <div className="flex-1 flex overflow-hidden">
-        {/* Left Panel: Transcript */}
-        <div className="w-[400px]">
-          <TranscriptPanel
-            activeSegment={activeSegment.id}
-            onSelect={setActiveSegment}
-          />
+        {/* Undo / Redo */}
+        <div className="flex items-center gap-0.5 ml-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
+                <ArrowCounterClockwise size={15} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Undo</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
+                <ArrowClockwise size={15} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Redo</TooltipContent>
+          </Tooltip>
         </div>
 
-        {/* Right Panel: Analytics */}
-        <div className="flex-1 flex flex-col relative">
-          <QuadViewAnalytics activeSegment={activeSegment} />
+        <div className="flex-1" />
 
-          <div className="absolute inset-0 pointer-events-none border-[1px] border-white/5 z-20" />
+        <Button className="gap-1.5 font-bold h-8 text-xs px-3">
+          <Export size={14} weight="bold" />
+          Export
+        </Button>
+      </header>
 
-          {/* Recorder Hub */}
-          <RecorderOverlay />
+      {/* Body */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left: Transcript scroll */}
+        <div className="flex-1 overflow-hidden flex flex-col min-w-0">
+          <ScrollArea className="flex-1">
+            <div className="max-w-2xl mx-auto py-4">
+              {SEGMENTS.map(seg => (
+                <SegmentRow
+                  key={seg.id}
+                  seg={seg}
+                  active={seg.id === activeId}
+                  onClick={() => setActiveId(seg.id)}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+
+        {/* Right: Properties panel ~260px */}
+        <div className="w-[280px] flex-shrink-0 overflow-hidden flex flex-col">
+          <RightPanel activeSegment={activeSegment} />
         </div>
       </div>
 
-      <EmotionalTimeline />
-    </main>
+      {/* Bottom: Timeline */}
+      <TimelineBar isPlaying={isPlaying} onToggle={() => setIsPlaying(p => !p)} />
+    </div>
   )
 }

demo/src/components/navbar.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import React from "react"
+import { Sparkle, Bell } from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Separator } from "@/components/ui/separator"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function Navbar() {
+  return (
+    <header className="h-12 border-b border-border bg-card flex items-center justify-between px-5 sticky top-0 z-50">
+      <div className="flex items-center gap-2 text-foreground">
+        <Skeleton className="h-5 w-5 rounded bg-foreground/20" />
+        <span className="text-sm font-bold tracking-tight">Ethos</span>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button variant="ghost" size="sm" className="text-muted-foreground font-medium h-8 px-3">Feedback</Button>
+        <Button variant="ghost" size="sm" className="text-muted-foreground font-medium h-8 px-3">Docs</Button>
+        <Button variant="ghost" size="sm" className="text-muted-foreground font-medium h-8 px-3 gap-1">
+          <Sparkle size={14} />Ask
+        </Button>
+        <Separator orientation="vertical" className="h-4 mx-2" />
+        <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground">
+          <Bell size={16} />
+        </Button>
+        <Avatar className="h-7 w-7 cursor-pointer ml-1">
+          <AvatarFallback className="bg-secondary text-foreground text-[11px] font-bold">U</AvatarFallback>
+        </Avatar>
+      </div>
+    </header>
+  )
+}

demo/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

demo/src/components/ui/dialog.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

demo/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[state=closed]:overflow-hidden", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border/50 -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl p-1 shadow-2xl ring-1 duration-100", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

demo/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-4xl border px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

demo/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

demo/src/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-muted relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary size-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

demo/src/components/ui/select.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-4xl border px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl shadow-2xl ring-1 duration-100 data-[align-trigger=true]:animate-none", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-3 py-2.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        "bg-border/50 pointer-events-none -mx-1 my-1 h-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

demo/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

demo/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted animate-pulse rounded-xl", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

demo/src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

demo/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}