style: replace speed Select with ToggleGroup in AnimationPreview

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/animate/AnimationPreview.tsx

@@ -3,13 +3,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Play, Pause, RotateCcw, Square, Circle, Type } from 'lucide-react';
 import { buildCSS } from '@/lib/animate/cssBuilder';
@@ -63,18 +56,13 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
     <Card className="h-full flex flex-col">
       <CardHeader className="flex flex-row items-center justify-between space-y-0">
         <CardTitle>Preview</CardTitle>
-        <Select value={speed} onValueChange={setSpeed}>
+        <ToggleGroup type="single" value={speed} onValueChange={(v) => v && setSpeed(v)}>
-          <SelectTrigger className="w-20 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
           {SPEEDS.map((s) => (
-              <SelectItem key={s.value} value={s.value} className="text-xs">
+            <ToggleGroupItem key={s.value} value={s.value} size="sm" className="text-xs px-2.5">
               {s.label}
-              </SelectItem>
+            </ToggleGroupItem>
           ))}
-          </SelectContent>
+        </ToggleGroup>
-        </Select>
       </CardHeader>
       <CardContent className="flex-1 flex flex-col gap-4">
         {/* Preview canvas */}