feat: add command-driven animations for user interactions

[Jannih]

Description

Closes #5391

This PR implements command-driven animations, enabling user-triggered animations through DOM events. Unlike scroll/view timeline-based animations that are tied to scroll position or element visibility, command-driven animations are triggered by user interactions and can be controlled with playback commands.

Features Implemented

New Animation Type: "Command"

• Added a third animation type alongside existing "Scroll" and "View" types
• Uses Web Animations API (WAAPI) for runtime playback

Supported Triggers:

• Click, Double-click
• Pointer Enter/Leave (hover)
• Focus/Blur
• Keydown/Keyup (with optional key filter)
• Custom events (with customizable event name)

Playback Commands:

• Play - Start animation from current position
• Pause - Pause animation at current position
• Toggle - Play if paused, pause if playing
• Restart - Cancel and play from beginning
• Reverse - Reverse playback direction
• Seek - Jump to specific position (0-100%)

Additional Features:

• Target selection (self or specific element by ID)
• Reduced motion support (respects prefers-reduced-motion)
• Live preview in canvas when "Run on Canvas" is enabled
• 7 preset animations: Fade In, Scale Up, Slide In From Left, Rotate In, Bounce, Shake, Custom
• Multi-child animation (animates all children within AnimationGroup)

Files Changed

File	Description
packages/sdk/src/schema/animation-schema.ts	Added EventAnimation, EventTrigger, EventCommand schemas
packages/sdk/src/index.ts	Exported new types and schemas
packages/sdk-components-animation/src/animate-children.tsx	Runtime event handling and WAAPI integration
packages/feature-flags/src/flags.ts	Enabled commandAnimations feature flag
apps/builder/.../animation-section.tsx	UI for type, target, triggers, command configuration
apps/builder/.../animation-panel-content.tsx	Panel integration for event animations
apps/builder/.../animations-select.tsx	Limited to 1 animation for event type
apps/builder/.../new-event-animations.ts	7 preset animations using parseCssValue
apps/builder/.../animation-panel-content.stories.tsx	Storybook stories

Steps for reproduction

Basic Click Animation

1. Open Webstudio Builder
2. Add an element (e.g., Box or Button)
3. Wrap with "Animate Children" component (Animation Group)
4. In Settings panel, select Type: Command
5. Set Trigger: Click
6. Set Command: Play
7. Select an animation preset (e.g., "Bounce")
8. Enable Run on Canvas toggle
9. Click the element - animation should play

Toggle Animation on Hover

1. Create Animation Group with a Box inside
2. Type: Command, Trigger: Pointer Enter, Command: Play
3. Add "Fade In" animation
4. Enable Run on Canvas
5. Hover over element - should fade in

Keyboard-Triggered Animation

1. Create Animation Group with focusable element
2. Type: Command, Trigger: Keydown, Key: "Enter"
3. Command: Toggle
4. Add "Shake" animation
5. Focus element and press Enter - should shake

Seek Command

1. Type: Command, Trigger: Click, Command: Seek
2. Set Seek position slider (0-100%)
3. Click to jump animation to that position

Reduced Motion

1. Enable "Respect Reduced Motion" toggle (on by default)
2. Enable reduced motion in OS settings
3. Animation should not play

Code Review

• hi @kof, please review the WAAPI implementation in animate-children.tsx

Before requesting a review

• made a self-review and the code is clean
• added Storybook stories for event animation panel
• TypeScript compiles without errors
• Lint passes

Before merging

• tested locally with various trigger types (click, hover, keyboard, custom)
• verified live preview works when "Run on Canvas" enabled
• verified reduced motion setting is respected
• verified all 7 preset animations work correctly