feat: add CSS Animation Editor tool

Comprehensive visual editor for CSS @keyframe animations:
- AnimationSettings: name, duration, delay, easing (incl. cubic-bezier), iteration, direction, fill-mode
- KeyframeTimeline: drag-to-reposition keyframe markers, click-track to add, delete selected
- KeyframeProperties: per-keyframe transform (translate/rotate/scale/skew), opacity, background-color, border-radius, blur, brightness via sliders
- AnimationPreview: live preview on box/circle/text element with play/pause/restart and speed control (0.25×–2×)
- PresetLibrary: 22 presets across Entrance/Exit/Attention/Special categories with animated thumbnails
- ExportPanel: plain CSS and Tailwind v4 @utility formats with copy and download

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

types/animate.ts

@@ -0,0 +1,64 @@
+export type EasingPreset =
+  | 'linear'
+  | 'ease'
+  | 'ease-in'
+  | 'ease-out'
+  | 'ease-in-out'
+  | 'cubic-bezier'
+  | 'steps';
+
+export type AnimationDirection =
+  | 'normal'
+  | 'reverse'
+  | 'alternate'
+  | 'alternate-reverse';
+
+export type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';
+
+export type PreviewElement = 'box' | 'circle' | 'text';
+
+export type PresetCategory = 'Entrance' | 'Exit' | 'Attention' | 'Special';
+
+export interface TransformValue {
+  translateX: number; // px
+  translateY: number; // px
+  rotate: number;     // deg
+  scaleX: number;     // ratio (1 = no scale)
+  scaleY: number;     // ratio
+  skewX: number;      // deg
+  skewY: number;      // deg
+}
+
+export interface KeyframeProperties {
+  transform?: TransformValue;
+  opacity?: number;          // 0–1
+  backgroundColor?: string;  // hex or 'none'
+  borderRadius?: number;     // px
+  blur?: number;             // px
+  brightness?: number;       // ratio (1 = no change)
+}
+
+export interface Keyframe {
+  id: string;
+  offset: number; // 0–100
+  properties: KeyframeProperties;
+  easing?: string; // per-keyframe easing to next
+}
+
+export interface AnimationConfig {
+  name: string;
+  duration: number;                    // ms
+  delay: number;                       // ms
+  easing: string;                      // CSS easing string
+  iterationCount: number | 'infinite';
+  direction: AnimationDirection;
+  fillMode: AnimationFillMode;
+  keyframes: Keyframe[];
+}
+
+export interface AnimationPreset {
+  id: string;
+  name: string;
+  category: PresetCategory;
+  config: AnimationConfig;
+}