MS-106 · Carousel primitives

[adityapat24]

Figma: arrows in Speakers 5624:1085, Testimonials 5597:16837, Projects 5597:21587, Team 5597:20455

Steps

1. Build everything fresh in lib/Components/museum/. Don't import or change the old packages/ui carousel pieces.
2. CarouselArrow: gold gradient circle + brown arrow. Props direction, size: "sm" | "lg", disabled (dimmed), aria-label. Hover, active and focus states.
3. useCarousel<T>(items, { loop }) returns { index, item, next, prev, goTo, canPrev, canNext, direction }.
4. <CarouselSwap animated={boolean}>: crossfade + small slide in direction when animated, an instant swap when not (SM passes animated={false}). Reduced motion falls back to fade only.
5. useSwipe(ref, { onLeft, onRight }): a pointer-event swipe with a ~40px threshold that doesn't block vertical scrolling (for SM).
6. useHorizontalGallery(ref) for Team: one page per arrow click (scrollBy), canPrev/canNext from scroll position, scroll-snap, hidden scrollbar, native trackpad/touch.
7. Keyboard ←/→ inside the carousel region (role="region", aria-roledescription="carousel", aria-live="polite").
8. /dev/carousel demo with 0, 1 and many items.

Acceptance criteria

• Arrow matches Figma in both sizes and states
• Loop and no-loop, first/last disabled, 0/1/many items all handled
• Swipe works on touch without blocking page scroll
• Gallery works with arrows, trackpad and touch