@bearmenu/ui 0.8.7 → 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" | "success" | "warning" | 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" | "success" | "warning" | 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" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "success" | "warning" | 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/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/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: [

package/dist/components/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

package/dist/components/drift-rail.d.ts

@@ -2,22 +2,36 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * DriftRail — an infinite horizontal marquee for logos, tag chips or small
- * poster tiles. The caller passes one set of children; the component renders
- * a second, `aria-hidden` copy right after it so a `translateX(-50%)` loop is
- * seamless. Because the loop depends on the duplicate being pixel-identical
- * to the first pass, keep `children` a fixed, ordered list — no per-render
- * randomisation.
+ * poster tiles that the reader can take hold of. The caller passes one set of
+ * children; the component renders a second, `aria-hidden` copy right after it
+ * so the loop is seamless. Because the loop depends on the duplicate being
+ * pixel-identical to the first pass, keep `children` a fixed, ordered list —
+ * no per-render randomisation.
  *
- * Motion is scoped to this instance via a generated id (no shared stylesheet,
- * no class collisions between multiple rails on one page) and is paused two
- * ways, per the source design: an `IntersectionObserver` stops the loop the
- * moment the rail scrolls off-screen, and `prefers-reduced-motion: reduce`
- * removes the animation outright rather than merely slowing it.
+ * IT IS A SCROLLER THAT DRIFTS, NOT AN ANIMATION. It used to be a CSS
+ * `translateX` keyframe, which is cheap but cannot be grabbed: a finger on it
+ * did nothing, and a marquee that ignores the hand on it reads as a broken
+ * scroller. Now the rail is a real horizontal scroll container with the
+ * scrollbar hidden, and a `requestAnimationFrame` loop advances `scrollLeft`
+ * at `width / durationSeconds` per second. When the scroll position passes
+ * the first copy it is wrapped back by exactly one copy's width — the two
+ * copies are identical, so the jump is invisible — and the same wrap holds
+ * while the reader scrolls, in either direction, so there is no end to hit.
+ *
+ * THE READER WINS. A touch scrolls natively (momentum and all); a mouse drag
+ * scrolls the rail by the drag distance; a wheel works because it is a
+ * scroller. Any of those stops the drift, and it resumes a few seconds after
+ * the last interaction. Hover pauses it too (`pauseOnHover`), and an
+ * `IntersectionObserver` stops the loop off-screen so the page is not doing
+ * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
+ * the rail stays scrollable by hand, which is more than the static strip it
+ * used to collapse to.
  */
 type DriftRailProps = {
     children: React.ReactNode;
     /** Runs the loop right-to-left instead of left-to-right. */
     reverse?: boolean;
+    /** Seconds for one full pass of the children. */
     durationSeconds?: number;
     /** Pauses the loop while the pointer hovers the rail. */
     pauseOnHover?: boolean;

package/dist/components/drift-rail.js

@@ -1,3 +1,3 @@
-export { DriftRail } from '../chunk-GPH6L4DX.js';
+export { DriftRail } from '../chunk-AHL45DD2.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/event-card.d.ts

@@ -61,6 +61,14 @@ type EventCardProps = {
     liveStatus?: string;
     /** Hide the day/time line — the timeline supplies its own hour heading. */
     hideWhen?: boolean;
+    /**
+     * Already over — dims the poster, mutes the title and shows the `endedLabel`
+     * chip. Never row-level opacity, which composites the text below AA. Same
+     * contract as `EventCompactRow`.
+     */
+    isEnded?: boolean;
+    /** Chip text for an ended event, e.g. "Ended". Required to render the chip. */
+    endedLabel?: string;
     /** Overrides the day label when the card appears outside its own day section. */
     dayLabel?: string;
     /** Append the entry fee to the meta line. Off by default, matching the design's base card. */