@bearmenu/ui 0.8.6 → 0.8.8

package/dist/components/weekend-panel.js

@@ -1,17 +1,18 @@
+import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
 import { MotionPlayPause } from '../chunk-TT3WFS6S.js';
 import '../chunk-2WDJR6K7.js';
+import { useDragSwipe } from '../chunk-IYDH5IU6.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { __spreadProps, __spreadValues, __objRest } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';
 import { ChevronRight } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var WEEKEND_PANEL_TRACK_GAP_PX = 14;
 var WEEKEND_PANEL_DEFAULT_DURATION_SECONDS = 7;
-var WEEKEND_PANEL_SLIDE_KEYFRAMES_ID = "ds-weekend-panel-slide";
-var WEEKEND_PANEL_DOT_A_KEYFRAMES_ID = "ds-weekend-panel-dot-a";
-var WEEKEND_PANEL_DOT_B_KEYFRAMES_ID = "ds-weekend-panel-dot-b";
+var WEEKEND_PANEL_PAGE_COUNT = 2;
+var WEEKEND_PANEL_CARDS_PER_PAGE = 2;
 function usePrefersReducedMotion() {
   const [reduced, setReduced] = React.useState(false);
   React.useEffect(() => {
@@ -30,9 +31,12 @@ function useInViewport() {
   React.useEffect(() => {
     const node = ref.current;
     if (!node || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      threshold: 0
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      {
+        threshold: 0
+      }
+    );
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
@@ -56,16 +60,36 @@ function WeekendPanel({
   className
 }) {
   const prefersReducedMotion = usePrefersReducedMotion();
+  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
   const [panelRef, inView] = useInViewport();
   const [isHovered, setIsHovered] = React.useState(false);
   const [isFocused, setIsFocused] = React.useState(false);
   const [isManuallyPaused, setIsManuallyPaused] = React.useState(false);
   const [playPauseReplayToken, setPlayPauseReplayToken] = React.useState(0);
-  const isPaused = isManuallyPaused || isHovered || isFocused || !inView;
+  const [page, setPage] = React.useState(0);
+  const autoplays = isDesktop && !prefersReducedMotion;
+  const isPaused = !autoplays || isManuallyPaused || isHovered || isFocused || !inView;
+  React.useEffect(() => {
+    if (isPaused) return void 0;
+    const interval = window.setInterval(
+      () => setPage((current) => (current + 1) % WEEKEND_PANEL_PAGE_COUNT),
+      durationSeconds * 1e3 / WEEKEND_PANEL_PAGE_COUNT
+    );
+    return () => window.clearInterval(interval);
+  }, [durationSeconds, isPaused]);
+  const turnTo = (next) => {
+    setPage(Math.max(0, Math.min(WEEKEND_PANEL_PAGE_COUNT - 1, next)));
+    setIsManuallyPaused(true);
+  };
+  const { dragX, isDragging, handlers } = useDragSwipe({
+    onSwipe: (direction) => turnTo(page + direction),
+    disabled: prefersReducedMotion
+  });
   const action = /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-0.5 text-[12.5px] text-muted-foreground", children: [
     actionLabel,
     /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true })
   ] });
+  const cards = React.Children.toArray(children);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -80,25 +104,6 @@ function WeekendPanel({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes ${WEEKEND_PANEL_SLIDE_KEYFRAMES_ID} {
-          0%, 45% { transform: translateX(0); }
-          50%, 95% { transform: translateX(calc(-100% - ${WEEKEND_PANEL_TRACK_GAP_PX}px)); }
-          100% { transform: translateX(0); }
-        }
-        @keyframes ${WEEKEND_PANEL_DOT_A_KEYFRAMES_ID} {
-          0% { background: var(--primary); width: 18px; }
-          45% { background: var(--primary); width: 18px; }
-          50% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
-          100% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
-        }
-        @keyframes ${WEEKEND_PANEL_DOT_B_KEYFRAMES_ID} {
-          0% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
-          50% { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); width: 6px; }
-          95% { background: var(--primary); width: 18px; }
-          100% { background: var(--primary); width: 18px; }
-        }
-      ` }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[9px] px-4 pb-3", children: [
           /* @__PURE__ */ jsx(
             "span",
@@ -130,51 +135,57 @@ function WeekendPanel({
             }
           ) : action
         ] }),
-        prefersReducedMotion ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3.5 px-4", children }) : /* @__PURE__ */ jsx("div", { className: "overflow-hidden px-4", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex gap-3.5",
-            style: {
-              animationName: WEEKEND_PANEL_SLIDE_KEYFRAMES_ID,
-              animationDuration: `${durationSeconds}s`,
-              animationTimingFunction: "ease-in-out",
-              animationIterationCount: "infinite",
-              animationPlayState: isPaused ? "paused" : "running"
-            },
-            children: React.Children.map(children, (child) => /* @__PURE__ */ jsx("div", { className: "w-[calc((100%-14px)/2)] flex-none", children: child }))
-          }
-        ) }),
+        prefersReducedMotion ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3.5 px-4", children }) : (
+          // Padding OUTSIDE the clip. `overflow-hidden` clips at the padding
+          // edge, so with the padding on the clipping element the next page's
+          // first card showed through the 16px inset — a sliver of the slide
+          // cutting in. The reader should see exactly the two cards of a page.
+          /* @__PURE__ */ jsx("div", { className: "px-4", children: /* @__PURE__ */ jsx(
+            "div",
+            __spreadProps(__spreadValues({}, handlers), {
+              className: "overflow-hidden select-none [touch-action:pan-y]",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex gap-3.5",
+                    !isDragging && "transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+                  ),
+                  style: {
+                    transform: `translateX(calc(${-page} * (100% + ${WEEKEND_PANEL_TRACK_GAP_PX}px) + ${dragX}px))`
+                  },
+                  children: cards.map((child, index) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-[calc((100%-14px)/2)] flex-none",
+                      onFocus: () => {
+                        const cardPage = Math.floor(
+                          index / WEEKEND_PANEL_CARDS_PER_PAGE
+                        );
+                        if (cardPage !== page) turnTo(cardPage);
+                      },
+                      children: child
+                    },
+                    index
+                  ))
+                }
+              )
+            })
+          ) })
+        ),
         !prefersReducedMotion && /* @__PURE__ */ jsxs("div", { className: "mt-3.5 grid grid-cols-[1fr_auto_1fr] items-center px-4", children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": true }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5", "aria-hidden": true, children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "block h-1.5 w-[18px] rounded-full bg-primary",
-                style: {
-                  animationName: WEEKEND_PANEL_DOT_A_KEYFRAMES_ID,
-                  animationDuration: `${durationSeconds}s`,
-                  animationTimingFunction: "ease-in-out",
-                  animationIterationCount: "infinite",
-                  animationPlayState: isPaused ? "paused" : "running"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "block h-1.5 w-1.5 rounded-full bg-muted-foreground/35",
-                style: {
-                  animationName: WEEKEND_PANEL_DOT_B_KEYFRAMES_ID,
-                  animationDuration: `${durationSeconds}s`,
-                  animationTimingFunction: "ease-in-out",
-                  animationIterationCount: "infinite",
-                  animationPlayState: isPaused ? "paused" : "running"
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1.5", "aria-hidden": true, children: Array.from({ length: WEEKEND_PANEL_PAGE_COUNT }, (_, index) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "block h-1.5 rounded-full transition-[width,background-color] duration-300 motion-reduce:transition-none",
+                index === page ? "w-[18px] bg-primary" : "w-1.5 bg-muted-foreground/35"
+              )
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: autoplays && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -198,7 +209,10 @@ function WeekendPanel({
     }
   );
 }
-function WeekendPanelSkeleton({ isHighlighted, className }) {
+function WeekendPanelSkeleton({
+  isHighlighted,
+  className
+}) {
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/hooks/use-drag-swipe.d.ts

@@ -0,0 +1,44 @@
+import { PointerEvent } from 'react';
+
+/**
+ * useDragSwipe — horizontal drag-to-step for a stage that is not a native
+ * scroller (a coverflow ring, a paged track). Pointer events, so one code path
+ * covers touch, pen and mouse.
+ *
+ * Returns the live drag distance (`dragX`, for the stage to follow the finger
+ * a little while dragging) and the handlers to spread onto the stage. On
+ * release past `threshold` it calls `onSwipe(-1 | 1)` — `1` for a leftward
+ * drag, i.e. "next". `didDrag` is set for the tick after a real drag so the
+ * stage's `onClickCapture` can swallow the click a drag would otherwise
+ * become on a card underneath.
+ *
+ * The stage keeps vertical scrolling: pair these with `touch-action: pan-y`
+ * so the browser owns vertical gestures and hands only horizontal ones here.
+ * Pointer capture is taken on move, not on down, so a tap still reaches the
+ * card underneath as a plain click.
+ *
+ * `onDragStart` is part of the handlers for a reason: the cards under a stage
+ * are usually links wrapping images, and a mouse drag on either starts a
+ * NATIVE HTML5 drag, which cancels the pointer stream mid-gesture — the swipe
+ * silently never completes. Preventing it keeps the pointer events flowing.
+ */
+type DragSwipeOptions = {
+    /** Distance in px that counts as a swipe. Default 40. */
+    threshold?: number;
+    onSwipe: (direction: -1 | 1) => void;
+    disabled?: boolean;
+};
+declare function useDragSwipe({ threshold, onSwipe, disabled }: DragSwipeOptions): {
+    dragX: number;
+    isDragging: boolean;
+    handlers: {
+        onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+        onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+        onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+        onClickCapture: (event: PointerEvent<HTMLElement> | React.MouseEvent) => void;
+        onDragStart: (event: React.DragEvent<HTMLElement>) => void;
+    };
+};
+
+export { type DragSwipeOptions, useDragSwipe };

package/dist/hooks/use-drag-swipe.js

@@ -0,0 +1,2 @@
+export { useDragSwipe } from '../chunk-IYDH5IU6.js';
+import '../chunk-3GWWZKX7.js';

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,17 @@
+/**
+ * useMediaQuery — a boolean for a CSS media query that is hydration-safe.
+ *
+ * `useSyncExternalStore` with a fixed server snapshot (`false`) means the
+ * server and the hydrating client render the same tree; the real value
+ * arrives on the next render. Components that switch behaviour per breakpoint
+ * (not just classes) need this rather than `window.matchMedia` in an effect,
+ * which flashes the wrong variant for a frame.
+ *
+ * Mobile-first: `false` on the server and until measured, so the phone
+ * variant is the one that prerenders.
+ */
+declare function useMediaQuery(query: string): boolean;
+/** The design system's desktop breakpoint, Tailwind's `lg`. */
+declare const DESKTOP_MEDIA_QUERY = "(min-width: 1024px)";
+
+export { DESKTOP_MEDIA_QUERY, useMediaQuery };

package/dist/hooks/use-media-query.js

@@ -0,0 +1,2 @@
+export { DESKTOP_MEDIA_QUERY, useMediaQuery } from '../chunk-OPVKL4VS.js';
+import '../chunk-3GWWZKX7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/category-deck.tsx

@@ -31,7 +31,11 @@ const DECK_POSTER_COUNT = 4;
 const DECK_TRANSITION =
   "transition-transform duration-[400ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none";
 
-const DECK_CARD_TRANSFORMS: ReadonlyArray<{ rest: string; spread: string; z: string }> = [
+const DECK_CARD_TRANSFORMS: ReadonlyArray<{
+  rest: string;
+  spread: string;
+  z: string;
+}> = [
   {
     rest: "[transform:translateX(-50%)_rotate(-9deg)_translateX(-26px)]",
     spread:
@@ -115,13 +119,12 @@ export function CategoryDeck({
 }: CategoryDeckProps) {
   const slots = Array.from(
     { length: DECK_POSTER_COUNT },
-    (_, index): CategoryDeckPoster => posters[index] ?? {}
+    (_, index): CategoryDeckPoster => posters[index] ?? {},
   );
 
   const body = (
     <>
       <div className="relative h-[150px] sm:h-[186px]" aria-hidden>
-
         {slots.map((poster, index) => {
           const transform = DECK_CARD_TRANSFORMS[index];
           return (
@@ -129,12 +132,15 @@ export function CategoryDeck({
               key={index}
               className={cn(
                 "absolute left-1/2 top-0 aspect-[4/5] w-24 overflow-hidden rounded-[10px] bg-muted",
+                // Keyed to --foreground so the shadow is ink in light mode; in
+                // dark mode that same 18% is a light halo, so it drops to 7%.
                 "shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_18%,transparent)]",
+                "dark:shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_7%,transparent)]",
                 "sm:w-[120px]",
                 transform.rest,
                 transform.spread,
                 transform.z,
-                DECK_TRANSITION
+                DECK_TRANSITION,
               )}
             >
               {poster.content ? (
@@ -161,9 +167,14 @@ export function CategoryDeck({
           <div className="truncate text-[14.5px] font-extrabold tracking-[-0.015em] sm:text-base">
             {name}
           </div>
-          <div className="truncate font-mono text-[11.5px] text-muted-foreground">{meta}</div>
+          <div className="truncate font-mono text-[11.5px] text-muted-foreground">
+            {meta}
+          </div>
         </div>
-        <ChevronRight className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+        <ChevronRight
+          className="ml-auto h-4 w-4 shrink-0 text-muted-foreground"
+          aria-hidden
+        />
       </div>
     </>
   );
@@ -172,7 +183,7 @@ export function CategoryDeck({
     "group flex min-w-0 flex-col text-left",
     (href || onClick) &&
       "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
-    className
+    className,
   );
 
   if (href) {
@@ -209,7 +220,7 @@ export function CategoryDeckSkeleton({ className }: CategoryDeckSkeletonProps) {
             className={cn(
               "absolute left-1/2 top-0 aspect-[4/5] w-24 rounded-[10px] sm:w-[120px]",
               transform.rest,
-              transform.z
+              transform.z,
             )}
           />
         ))}

package/src/components/coverflow.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Coverflow, type CoverflowItem } from "./coverflow";
 
@@ -175,6 +175,33 @@ describe("Coverflow", () => {
     });
   });
 
+  describe("the drag", () => {
+    it("steps forward on a leftward drag and back on a rightward one", () => {
+      const onActiveIndexChange = vi.fn();
+      renderCoverflow({ activeIndex: 2, onActiveIndexChange });
+      const stage = screen.getByRole("button", { name: "Event 2" }).parentElement!
+        .parentElement as HTMLElement;
+
+      fireEvent.pointerDown(stage, { clientX: 200, pointerId: 1, button: 0 });
+      fireEvent.pointerMove(stage, { clientX: 150, pointerId: 1 });
+      fireEvent.pointerMove(stage, { clientX: 100, pointerId: 1 });
+      fireEvent.pointerUp(stage, { clientX: 100, pointerId: 1 });
+      expect(onActiveIndexChange).toHaveBeenLastCalledWith(3);
+
+      fireEvent.pointerDown(stage, { clientX: 100, pointerId: 1, button: 0 });
+      fireEvent.pointerMove(stage, { clientX: 150, pointerId: 1 });
+      fireEvent.pointerMove(stage, { clientX: 200, pointerId: 1 });
+      fireEvent.pointerUp(stage, { clientX: 200, pointerId: 1 });
+      expect(onActiveIndexChange).toHaveBeenLastCalledWith(1);
+    });
+
+    it("keeps the arrows for desktop only", () => {
+      renderCoverflow();
+      expect(screen.getByRole("button", { name: "Next" }).className).toContain("lg:flex");
+      expect(screen.getByRole("button", { name: "Next" }).className).toContain("hidden");
+    });
+  });
+
   describe("caption and position", () => {
     it("renders the position on its own, with no separator dot, when there is no caption", () => {
       renderCoverflow({ positionLabel: "1 of 7" });

package/src/components/coverflow.tsx

@@ -1,16 +1,25 @@
 "use client";
 
-import { useEffect, useId, useRef, useState } from "react";
+import { useId, useState } from "react";
 import { ChevronLeft, ChevronRight, Gift } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useDragSwipe } from "../hooks/use-drag-swipe";
 import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
  * Coverflow — the busiest-events browser: a 3D perspective lane with a large
  * lead poster flanked by up to three shrinking, desaturating posters on each
- * side. The lane itself drifts a few pixels back and forth
- * (`prefers-reduced-motion` stops this outright; an `IntersectionObserver`
- * pauses it off-screen).
+ * side.
+ *
+ * NOTHING MOVES ON ITS OWN. The lane used to drift ±40px on a loop; it was
+ * removed at product request — a stage that sways is read as a carousel that
+ * is about to advance, and the reader waits for it instead of touching it.
+ * The stage is driven by the reader: a horizontal drag (touch, pen or mouse)
+ * steps the ring one card in the drag's direction and the lane follows the
+ * finger a little on the way, so the gesture has weight. The prev/next arrows
+ * stay for desktop and keyboard; below `lg` they are hidden so nothing sits
+ * over the lead card — the swipe is the control there, and every card is
+ * still a focusable, named button for keyboard and screen-reader users.
  *
  * IT IS A RING, NOT A LANE. A card's slot comes from `ringOffset` — the
  * SIGNED SHORTEST WAY ROUND the list, not the raw `index - activeIndex`. With
@@ -178,15 +187,12 @@ const COVERFLOW_LEAD_SHADOW_CLASS = "shadow-[0_24px_56px_oklch(0.28_0.03_45/0.32
 const COVERFLOW_PILL_CLASS =
   "inline-flex h-6 max-w-[85%] items-center gap-1 rounded-full px-2 text-[11px] font-semibold";
 
-const COVERFLOW_DRIFT_DURATION_SECONDS = 26;
-const COVERFLOW_DRIFT_PIXELS = 40;
-
 /** Below the lead's z-index the arrows (z-20) and edge fades (z-10) always
  *  win, no matter how many cards are mid-transition and briefly promoted. */
 const COVERFLOW_LEAD_Z_INDEX = 6;
 
 const COVERFLOW_ARROW_CLASS =
-  "absolute top-1/2 z-20 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
+  "absolute top-1/2 z-20 hidden h-11 w-11 -translate-y-1/2 lg:flex cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
 
 function wrapIndex(index: number, length: number): number {
   return ((index % length) + length) % length;
@@ -347,7 +353,6 @@ export function Coverflow({
 }: CoverflowProps) {
   const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
   const scopeClass = `coverflow-${scopeId}`;
-  const containerRef = useRef<HTMLDivElement>(null);
 
   const length = items.length;
   const active = length > 0 ? wrapIndex(activeIndex, length) : 0;
@@ -372,26 +377,21 @@ export function Coverflow({
     );
   }
 
-  useEffect(() => {
-    const node = containerRef.current;
-    if (!node || typeof IntersectionObserver === "undefined") return undefined;
+  // No clamp at the ends: prev from 0 reports `length - 1` and next from
+  // `length - 1` reports 0, so the index the parent stores matches the ring.
+  const goTo = (index: number) => onActiveIndexChange?.(wrapIndex(index, length));
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
-      },
-      { threshold: 0 }
-    );
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
+  // A drag to the left means "next" — the ring turns the way the finger went.
+  // The lane follows at a third of the drag distance while the finger is down,
+  // then snaps back as the step lands.
+  const { dragX, isDragging, handlers } = useDragSwipe({
+    onSwipe: (direction) => goTo(active + direction),
+    disabled: length < 2,
+  });
 
   if (length === 0) return null;
 
   const activeItem = items[active];
-  // No clamp at the ends: prev from 0 reports `length - 1` and next from
-  // `length - 1` reports 0, so the index the parent stores matches the ring.
-  const goTo = (index: number) => onActiveIndexChange?.(wrapIndex(index, length));
 
   /** How far the lead itself moved, the short way round — 0 on a settled render. */
   const activeDelta = ringOffset(step.to - step.from, length);
@@ -446,26 +446,10 @@ export function Coverflow({
             --cf-tier-base: 0.5714;
           }
         }
-        .${scopeClass} .coverflow-lane {
-          animation: ${scopeClass}-drift ${COVERFLOW_DRIFT_DURATION_SECONDS}s ease-in-out infinite alternate;
-        }
-        .${scopeClass}[data-offscreen="true"] .coverflow-lane {
-          animation-play-state: paused;
-        }
-        @keyframes ${scopeClass}-drift {
-          from { transform: translateX(-${COVERFLOW_DRIFT_PIXELS}px); }
-          to { transform: translateX(${COVERFLOW_DRIFT_PIXELS}px); }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .${scopeClass} .coverflow-lane {
-            animation: none;
-            transform: none;
-          }
-        }
       `}</style>
 
       <div
-        ref={containerRef}
+        {...handlers}
         // CLIPS HORIZONTALLY ONLY. The clip is what hides a card teleporting
         // round the back of the ring, and that only ever happens off the left
         // and right edges — but `overflow-hidden` clips both axes, so it was
@@ -477,7 +461,11 @@ export function Coverflow({
         // container), so `overflow-x-hidden overflow-y-visible` is not a thing
         // the cascade will give you. `clip` carries no such rule, so the pair
         // below means what it says.
-        className="relative flex h-[300px] items-center justify-center overflow-x-clip overflow-y-visible [perspective:900px] sm:h-[380px] sm:[perspective:1400px]"
+        //
+        // `touch-action: pan-y` hands vertical gestures to the browser and
+        // horizontal ones to the drag handlers; `select-none` stops a mouse
+        // drag from selecting the captions underneath.
+        className="relative flex h-[300px] select-none items-center justify-center overflow-x-clip overflow-y-visible [touch-action:pan-y] [perspective:900px] sm:h-[380px] sm:[perspective:1400px]"
       >
         <div
           aria-hidden="true"
@@ -511,7 +499,13 @@ export function Coverflow({
           </>
         )}
 
-        <div className="coverflow-lane relative h-full w-full [transform-style:preserve-3d] motion-reduce:[animation:none]">
+        <div
+          className={cn(
+            "coverflow-lane relative h-full w-full [transform-style:preserve-3d]",
+            !isDragging && "transition-transform duration-300 ease-out motion-reduce:transition-none"
+          )}
+          style={{ transform: `translateX(${dragX / 3}px)` }}
+        >
           {visibleCards.map(({ item, index, offset, suppressTransition }) => (
             <CoverflowCard
               key={item.id}