Rotated UI Swipe Handler

Build a React component that handles swipe gestures on a UI element that is visually rotated by 45 degrees. The component should correctly detect swipe directions relative to the rotated interface, not the screen coordinates.

Requirements

Create a React component called RotatedSwipePanel that:

1. Renders a square panel (300x300px) with a light gray background and centered text showing "Swipe me!"
2. The panel should be visually rotated 45 degrees clockwise using CSS transforms
3. Implements swipe detection that correctly interprets swipes relative to the rotated panel's coordinate system
4. Displays the last detected swipe direction below the panel (e.g., "Last swipe: LEFT", "Last swipe: RIGHT", "Last swipe: UP", "Last swipe: DOWN")
5. The swipe direction should be relative to the panel's rotated orientation, not the screen's orientation
6. Should support both touch and mouse swipe gestures

Test Cases

• When a user swipes from top-right to bottom-left on the screen (which is "upward" relative to the rotated panel), the component displays "Last swipe: UP" @test
• When a user swipes from bottom-left to top-right on the screen (which is "downward" relative to the rotated panel), the component displays "Last swipe: DOWN" @test
• When a user swipes from top-left to bottom-right on the screen (which is "leftward" relative to the rotated panel), the component displays "Last swipe: LEFT" @test
• When a user swipes from bottom-right to top-left on the screen (which is "rightward" relative to the rotated panel), the component displays "Last swipe: RIGHT" @test

Implementation

@generates

API

/**
 * A React component that displays a rotated panel with swipe gesture detection
 * The swipe directions are relative to the panel's rotated coordinate system
 */
export default function RotatedSwipePanel(): JSX.Element;

Dependencies { .dependencies }

react { .dependency }

Provides React framework for building the component.

react-swipeable { .dependency }

Provides swipe gesture detection with rotation angle support.