@bearmenu/ui 0.8.6 → 0.8.8

package/dist/{chunk-637L7XQ3.js → chunk-3TNPSN4D.js}

@@ -1,10 +1,19 @@
 import { Separator } from './chunk-WSRWFA6K.js';
 import { Skeleton } from './chunk-QXHMPJ35.js';
 import { cn } from './chunk-FEK5XGZW.js';
+import { Radio } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
-function TimelineHourPuck({ time, isLive, liveLabel, className }) {
+var TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+function TimelineHourPuck({
+  time,
+  isLive,
+  liveLabel,
+  variant = "station",
+  className
+}) {
+  const isChip = variant === "chip";
   return /* @__PURE__ */ jsxs("span", { className: cn("relative flex justify-center", className), children: [
     isLive && /* @__PURE__ */ jsx("style", { children: `
           @keyframes ${LIVE_PUCK_PULSE_CLASS} {
@@ -18,23 +27,33 @@ function TimelineHourPuck({ time, isLive, liveLabel, className }) {
             .${LIVE_PUCK_PULSE_CLASS} { animation: none; }
           }
         ` }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
-          "whitespace-nowrap rounded-[7px] border bg-background px-[7px] py-[3px]",
-          "font-mono text-[12.5px] font-medium tabular-nums",
-          isLive ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS) : "border-border text-foreground"
+          "whitespace-nowrap font-mono tabular-nums",
+          isChip ? cn(
+            "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] px-1 text-[12px] font-medium",
+            isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
+          ) : cn(
+            "rounded-[7px] border bg-background px-[7px] py-[3px] text-[12.5px] font-medium",
+            isLive ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS) : "border-border text-foreground"
+          )
         ),
-        children: time
+        children: [
+          isChip && isLive && /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
+          time
+        ]
       }
     ),
     isLive && !!liveLabel && /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
-          "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
-          "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+          isChip ? "sr-only" : cn(
+            "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
+            "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+          )
         ),
         children: liveLabel
       }
@@ -82,4 +101,4 @@ function TimelineBandSkeleton({ className }) {
   ] });
 }
 
-export { TimelineBand, TimelineBandSkeleton, TimelineHourPuck };
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck };

package/dist/chunk-AHL45DD2.js

@@ -0,0 +1,145 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { useRef, useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
+var DRIFT_RAIL_RESUME_DELAY_MS = 3e3;
+function DriftRail({
+  children,
+  reverse = false,
+  durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
+  pauseOnHover = true,
+  className
+}) {
+  const scrollerRef = useRef(null);
+  const trackRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [inView, setInView] = useState(true);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const heldUntil = useRef(0);
+  const mouseDrag = useRef(null);
+  const position = useRef(0);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(query.matches);
+    const onChange = () => setReducedMotion(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  useEffect(() => {
+    const node = scrollerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return void 0;
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      threshold: 0
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    const track = trackRef.current;
+    if (!scroller || !track) return void 0;
+    let frame = 0;
+    let last = performance.now();
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
+    position.current = scroller.scrollLeft;
+    const tick = (now) => {
+      const half = track.scrollWidth / 2;
+      if (half > 0) {
+        const driftingNow = drifting && now >= heldUntil.current;
+        if (driftingNow) {
+          const perSecond = half / durationSeconds;
+          const delta = perSecond * (now - last) / 1e3;
+          position.current += reverse ? -delta : delta;
+        } else {
+          position.current = scroller.scrollLeft;
+        }
+        let wrapped = false;
+        if (position.current >= half) {
+          position.current -= half;
+          wrapped = true;
+        } else if (position.current < 0) {
+          position.current += half;
+          wrapped = true;
+        }
+        if (driftingNow || wrapped) scroller.scrollLeft = position.current;
+      }
+      last = now;
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [durationSeconds, inView, isHovered, pauseOnHover, reducedMotion, reverse]);
+  const hold = () => {
+    heldUntil.current = Number.POSITIVE_INFINITY;
+  };
+  const release = () => {
+    heldUntil.current = performance.now() + DRIFT_RAIL_RESUME_DELAY_MS;
+  };
+  const onPointerDown = (event) => {
+    hold();
+    if (event.pointerType !== "mouse" || event.button !== 0 || !scrollerRef.current) return;
+    mouseDrag.current = {
+      startX: event.clientX,
+      startScroll: scrollerRef.current.scrollLeft,
+      pointerId: event.pointerId
+    };
+  };
+  const onPointerMove = (event) => {
+    var _a, _b, _c, _d;
+    const drag = mouseDrag.current;
+    if (!drag || event.pointerId !== drag.pointerId || !scrollerRef.current) return;
+    const dx = event.clientX - drag.startX;
+    if (Math.abs(dx) > 4 && !((_b = (_a = event.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId))) {
+      (_d = (_c = event.currentTarget).setPointerCapture) == null ? void 0 : _d.call(_c, event.pointerId);
+      event.currentTarget.dataset.dragging = "true";
+    }
+    scrollerRef.current.scrollLeft = drag.startScroll - dx;
+  };
+  const onPointerEnd = (event) => {
+    var _a, _b;
+    release();
+    const drag = mouseDrag.current;
+    mouseDrag.current = null;
+    if (drag && ((_b = (_a = event.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId))) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    delete event.currentTarget.dataset.dragging;
+  };
+  const onClickCapture = (event) => {
+    if (event.currentTarget.dataset.dragging === "true") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollerRef,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd,
+      onWheel: () => {
+        release();
+      },
+      onDragStart: (event) => event.preventDefault(),
+      onClickCapture,
+      className: cn(
+        "overflow-x-auto overflow-y-hidden py-1.5 scrollbar-hide [touch-action:pan-x]",
+        "cursor-grab select-none data-[dragging=true]:cursor-grabbing",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "flex w-max items-stretch gap-3.5", children: [
+        children,
+        /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", children })
+      ] })
+    }
+  );
+}
+
+export { DriftRail };

package/dist/chunk-IYDH5IU6.js

@@ -0,0 +1,66 @@
+import { useState, useRef, useCallback } from 'react';
+
+function useDragSwipe({ threshold = 40, onSwipe, disabled }) {
+  const [dragX, setDragX] = useState(0);
+  const startX = useRef(null);
+  const pointerId = useRef(null);
+  const didDrag = useRef(false);
+  const onPointerDown = useCallback(
+    (event) => {
+      if (disabled || event.button !== 0) return;
+      startX.current = event.clientX;
+      pointerId.current = event.pointerId;
+      didDrag.current = false;
+    },
+    [disabled]
+  );
+  const onPointerMove = useCallback((event) => {
+    var _a, _b;
+    if (startX.current === null || event.pointerId !== pointerId.current) return;
+    const dx = event.clientX - startX.current;
+    if (!didDrag.current && Math.abs(dx) > 6) {
+      didDrag.current = true;
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+    }
+    if (didDrag.current) setDragX(dx);
+  }, []);
+  const end = useCallback(
+    (event, cancelled) => {
+      var _a, _b;
+      if (startX.current === null || event.pointerId !== pointerId.current) return;
+      const dx = event.clientX - startX.current;
+      startX.current = null;
+      pointerId.current = null;
+      if ((_b = (_a = event.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      setDragX(0);
+      if (!cancelled && didDrag.current && Math.abs(dx) >= threshold) {
+        onSwipe(dx < 0 ? 1 : -1);
+      }
+    },
+    [onSwipe, threshold]
+  );
+  const onPointerUp = useCallback((event) => end(event, false), [end]);
+  const onPointerCancel = useCallback(
+    (event) => end(event, true),
+    [end]
+  );
+  const onDragStart = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  const onClickCapture = useCallback((event) => {
+    if (didDrag.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      didDrag.current = false;
+    }
+  }, []);
+  return {
+    dragX,
+    isDragging: dragX !== 0,
+    handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture, onDragStart }
+  };
+}
+
+export { useDragSwipe };

package/dist/chunk-OPVKL4VS.js

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from 'react';
+
+function useMediaQuery(query) {
+  return useSyncExternalStore(
+    (onChange) => {
+      if (typeof window.matchMedia !== "function") return () => {
+      };
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    () => typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
+    () => false
+  );
+}
+var DESKTOP_MEDIA_QUERY = "(min-width: 1024px)";
+
+export { DESKTOP_MEDIA_QUERY, useMediaQuery };

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "outline" | "secondary" | "glass" | "overlay" | "brown" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "brown" | "antagonist" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "brown" | "antagonist" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/category-deck.js

@@ -57,7 +57,10 @@ function CategoryDeck({
         {
           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,
@@ -86,7 +89,13 @@ function CategoryDeck({
         /* @__PURE__ */ jsx("div", { className: "truncate text-[14.5px] font-extrabold tracking-[-0.015em] sm:text-base", children: name }),
         /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-[11.5px] text-muted-foreground", children: meta })
       ] }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+      /* @__PURE__ */ jsx(
+        ChevronRight,
+        {
+          className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground",
+          "aria-hidden": true
+        }
+      )
     ] })
   ] });
   const rootClasses = cn(

package/dist/components/command.d.ts

@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
 
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/coverflow.d.ts

@@ -3,9 +3,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 /**
  * 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

package/dist/components/coverflow.js

@@ -1,7 +1,8 @@
+import { useDragSwipe } from '../chunk-IYDH5IU6.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { useId, useRef, useState, useEffect } from 'react';
+import { __spreadProps, __spreadValues, __objRest } from '../chunk-3GWWZKX7.js';
+import { useId, useState } from 'react';
 import { ChevronLeft, ChevronRight, Gift } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -21,10 +22,8 @@ var COVERFLOW_CARD_FOCUS_CLASS = "focus-visible:outline-none focus-visible:ring-
 var COVERFLOW_SIDE_SHADOW_CLASS = "shadow-[0_11px_27px_oklch(0.3_0.02_60/0.22)]";
 var COVERFLOW_LEAD_SHADOW_CLASS = "shadow-[0_24px_56px_oklch(0.28_0.03_45/0.32)]";
 var COVERFLOW_PILL_CLASS = "inline-flex h-6 max-w-[85%] items-center gap-1 rounded-full px-2 text-[11px] font-semibold";
-var COVERFLOW_DRIFT_DURATION_SECONDS = 26;
-var COVERFLOW_DRIFT_PIXELS = 40;
 var COVERFLOW_LEAD_Z_INDEX = 6;
-var 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";
+var COVERFLOW_ARROW_CLASS = "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, length) {
   return (index % length + length) % length;
 }
@@ -141,7 +140,6 @@ function Coverflow({
 }) {
   const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
   const scopeClass = `coverflow-${scopeId}`;
-  const containerRef = useRef(null);
   const length = items.length;
   const active = length > 0 ? wrapIndex(activeIndex, length) : 0;
   const [step, setStep] = useState({ from: active, to: active, length });
@@ -150,21 +148,13 @@ function Coverflow({
       step.length === length ? { from: step.to, to: active, length } : { from: active, to: active, length }
     );
   }
-  useEffect(() => {
-    const node = containerRef.current;
-    if (!node || typeof IntersectionObserver === "undefined") return void 0;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
-      },
-      { threshold: 0 }
-    );
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
+  const goTo = (index) => onActiveIndexChange == null ? void 0 : onActiveIndexChange(wrapIndex(index, length));
+  const { dragX, isDragging, handlers } = useDragSwipe({
+    onSwipe: (direction) => goTo(active + direction),
+    disabled: length < 2
+  });
   if (length === 0) return null;
   const activeItem = items[active];
-  const goTo = (index) => onActiveIndexChange == null ? void 0 : onActiveIndexChange(wrapIndex(index, length));
   const activeDelta = ringOffset(step.to - step.from, length);
   const visibleCards = items.map((item, index) => {
     const offset = ringOffset(index - active, length);
@@ -208,28 +198,11 @@ 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;
-          }
-        }
       ` }),
     /* @__PURE__ */ jsxs(
       "div",
-      {
-        ref: containerRef,
-        className: "relative flex h-[300px] items-center justify-center overflow-x-clip overflow-y-visible [perspective:900px] sm:h-[380px] sm:[perspective:1400px]",
+      __spreadProps(__spreadValues({}, handlers), {
+        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]",
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -267,21 +240,31 @@ function Coverflow({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "coverflow-lane relative h-full w-full [transform-style:preserve-3d] motion-reduce:[animation:none]", children: visibleCards.map(({ item, index, offset, suppressTransition }) => /* @__PURE__ */ jsx(
-            CoverflowCard,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              item,
-              index,
-              offset,
-              suppressTransition,
-              freeLabel,
-              onActivate: goTo,
-              linkComponent: LinkComponent
-            },
-            item.id
-          )) })
+              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)` },
+              children: visibleCards.map(({ item, index, offset, suppressTransition }) => /* @__PURE__ */ jsx(
+                CoverflowCard,
+                {
+                  item,
+                  index,
+                  offset,
+                  suppressTransition,
+                  freeLabel,
+                  onActivate: goTo,
+                  linkComponent: LinkComponent
+                },
+                item.id
+              ))
+            }
+          )
         ]
-      }
+      })
     ),
     /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4 text-center", children: [
       /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [