@bearmenu/ui 0.8.7 → 0.8.8

package/src/components/drift-rail.tsx

@@ -1,26 +1,41 @@
 "use client";
 
-import { useEffect, useId, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { PointerEvent as ReactPointerEvent } from "react";
 import { cn } from "../lib/utils";
 
 /**
  * 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.
  */
 export 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;
@@ -28,6 +43,8 @@ export type DriftRailProps = {
 };
 
 const DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
+/** How long after the reader lets go before the drift resumes. */
+const DRIFT_RAIL_RESUME_DELAY_MS = 3000;
 
 export function DriftRail({
   children,
@@ -36,46 +53,154 @@ export function DriftRail({
   pauseOnHover = true,
   className,
 }: DriftRailProps) {
-  const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
-  const scopeClass = `drift-rail-${scopeId}`;
-  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [inView, setInView] = useState(true);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  // `heldUntil` is a timestamp rather than a boolean so a native touch scroll
+  // that keeps going after the finger lifts is not fought by the drift.
+  const heldUntil = useRef(0);
+  const mouseDrag = useRef<{ startX: number; startScroll: number; pointerId: number } | null>(null);
+  // The drift's own position, kept with its fraction. `scrollLeft` is rounded
+  // to whole pixels by the browser, and at ~60px/s the per-frame step is under
+  // a pixel — read back and added to, it rounded to nothing and the rail never
+  // moved. So the loop adds to THIS and writes it out; while the reader holds
+  // the rail it follows `scrollLeft` instead, so it never fights the finger.
+  const position = useRef(0);
 
   useEffect(() => {
-    const node = containerRef.current;
-    if (!node || typeof IntersectionObserver === "undefined") return undefined;
+    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);
+  }, []);
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
-      },
-      { threshold: 0 }
-    );
+  useEffect(() => {
+    const node = scrollerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return undefined;
+    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
+      threshold: 0,
+    });
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
 
-  return (
-    <div ref={containerRef} className={cn(scopeClass, "overflow-hidden py-1.5", className)}>
-      <style>{`
-        .${scopeClass} .drift-rail-run {
-          animation: ${scopeClass}-run ${durationSeconds}s linear infinite;
-          animation-direction: ${reverse ? "reverse" : "normal"};
-        }
-        .${scopeClass}[data-offscreen="true"] .drift-rail-run {
-          animation-play-state: paused;
-        }
-        @keyframes ${scopeClass}-run {
-          from { transform: translateX(0); }
-          to { transform: translateX(-50%); }
+  // The drift, and the wrap. Runs while mounted; the wrap has to run even
+  // while the reader holds the rail, so the loop never pauses — it only stops
+  // ADDING distance when something says it should.
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    const track = trackRef.current;
+    if (!scroller || !track) return undefined;
+
+    let frame = 0;
+    let last = performance.now();
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+
+    // Start the reverse loop inside the second copy so it has room to travel.
+    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
+    position.current = scroller.scrollLeft;
+
+    const tick = (now: number) => {
+      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)) / 1000;
+          position.current += reverse ? -delta : delta;
+        } else {
+          position.current = scroller.scrollLeft;
         }
-        @media (prefers-reduced-motion: reduce) {
-          .${scopeClass} .drift-rail-run {
-            animation: none;
-          }
+        // The wrap applies in both modes: the two copies are identical, so
+        // jumping by exactly one copy's width is invisible even mid-swipe.
+        let wrapped = false;
+        if (position.current >= half) {
+          position.current -= half;
+          wrapped = true;
+        } else if (position.current < 0) {
+          position.current += half;
+          wrapped = true;
         }
-        ${pauseOnHover ? `.${scopeClass}:hover .drift-rail-run { animation-play-state: paused; }` : ""}
-      `}</style>
-      <div className="drift-rail-run flex w-max items-stretch gap-3.5 motion-reduce:[animation:none]">
+        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;
+  };
+
+  // Touch and pen scroll natively; only a mouse needs help to drag.
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    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: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = mouseDrag.current;
+    if (!drag || event.pointerId !== drag.pointerId || !scrollerRef.current) return;
+    const dx = event.clientX - drag.startX;
+    if (Math.abs(dx) > 4 && !event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      event.currentTarget.dataset.dragging = "true";
+    }
+    scrollerRef.current.scrollLeft = drag.startScroll - dx;
+  };
+  const onPointerEnd = (event: ReactPointerEvent<HTMLDivElement>) => {
+    release();
+    const drag = mouseDrag.current;
+    mouseDrag.current = null;
+    if (drag && event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    delete event.currentTarget.dataset.dragging;
+  };
+  // A mouse drag must not end as a click on the item under the cursor.
+  const onClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.currentTarget.dataset.dragging === "true") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  return (
+    <div
+      ref={scrollerRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerEnd}
+      onPointerCancel={onPointerEnd}
+      onWheel={() => {
+        release();
+      }}
+      // The items are links wrapping images; a mouse drag on one would start a
+      // native HTML5 drag and cancel the pointer stream mid-gesture.
+      onDragStart={(event) => event.preventDefault()}
+      onClickCapture={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
+      )}
+    >
+      <div ref={trackRef} className="flex w-max items-stretch gap-3.5">
         {children}
         <div className="contents" aria-hidden="true">
           {children}

package/src/components/event-card.tsx

@@ -79,6 +79,14 @@ export 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. */
@@ -108,6 +116,8 @@ export const EventCard = memo(function EventCard({
   tags,
   liveStatus,
   hideWhen,
+  isEnded,
+  endedLabel,
   dayLabel,
   showPrice,
   href,
@@ -118,6 +128,7 @@ export const EventCard = memo(function EventCard({
   fallback = <EventPosterFallback />,
 }: EventCardProps) {
   const [imgError, setImgError] = useState(false);
+  const showEnded = isEnded && !!endedLabel;
   const time = hideWhen ? "" : formatters.time(event.starts_at);
 
   const fee = resolveEventEntryFee(event);
@@ -129,11 +140,12 @@ export const EventCard = memo(function EventCard({
       <div
         className={cn(
           "relative overflow-hidden rounded-xl bg-muted",
+          isEnded && "opacity-45",
           posterAspect === "3/4"
             ? "aspect-[3/4]"
             : posterAspect === "4/5"
               ? "aspect-[4/5]"
-              : "aspect-[4/3]"
+              : "aspect-[4/3]",
         )}
       >
         {showPoster ? (
@@ -154,9 +166,20 @@ export const EventCard = memo(function EventCard({
         {/* Top overlay row — hype badge left, entry fee right. The empty span
             keeps the fee pill right-aligned when there is no badge. */}
         <div className="absolute inset-x-2 top-2 flex items-start justify-between gap-2">
-          {badge ? <span className={cn(PILL_BASE, "bg-black/55 text-white")}>{badge}</span> : <span />}
+          {badge ? (
+            <span className={cn(PILL_BASE, "bg-black/55 text-white")}>
+              {badge}
+            </span>
+          ) : (
+            <span />
+          )}
           {fee.kind === "free" && (
-            <span className={cn(PILL_BASE, "bg-success font-bold text-success-foreground")}>
+            <span
+              className={cn(
+                PILL_BASE,
+                "bg-success font-bold text-success-foreground",
+              )}
+            >
               <Gift className="h-3 w-3" aria-hidden />
               {labels.free}
             </span>
@@ -165,7 +188,9 @@ export const EventCard = memo(function EventCard({
 
         {tagLabel && (
           <div className="absolute inset-x-2 bottom-2 flex gap-1">
-            <span className={cn(PILL_BASE, "bg-black/55 text-white")}>{tagLabel}</span>
+            <span className={cn(PILL_BASE, "bg-black/55 text-white")}>
+              {tagLabel}
+            </span>
           </div>
         )}
       </div>
@@ -180,7 +205,10 @@ export const EventCard = memo(function EventCard({
       <h3
         className={cn(
           "mt-2.5 leading-[1.35]",
-          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold"
+          emphasis
+            ? "text-lg font-bold tracking-[-0.02em]"
+            : "text-sm font-semibold",
+          isEnded && "text-muted-foreground",
         )}
       >
         {event.title}
@@ -232,6 +260,14 @@ export const EventCard = memo(function EventCard({
           {liveStatus}
         </div>
       )}
+
+      {showEnded && (
+        <div className="mt-1.5">
+          <Tag size="sm" variant="default" className="font-extrabold">
+            {endedLabel}
+          </Tag>
+        </div>
+      )}
     </>
   );
 
@@ -239,7 +275,7 @@ export const EventCard = memo(function EventCard({
     "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) {
@@ -247,7 +283,9 @@ export const EventCard = memo(function EventCard({
       <LinkComponent
         href={href}
         className={rootClasses}
-        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+        onClick={
+          onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined
+        }
       >
         {body}
       </LinkComponent>
@@ -256,7 +294,11 @@ export const EventCard = memo(function EventCard({
 
   if (onClick) {
     return (
-      <button type="button" className={rootClasses} onClick={(e) => onClick(event, e)}>
+      <button
+        type="button"
+        className={rootClasses}
+        onClick={(e) => onClick(event, e)}
+      >
         {body}
       </button>
     );
@@ -289,14 +331,17 @@ export function EventCardSkeleton({
   className,
 }: EventCardSkeletonProps) {
   return (
-    <div aria-hidden="true" className={cn("flex min-w-0 flex-col text-left", className)}>
+    <div
+      aria-hidden="true"
+      className={cn("flex min-w-0 flex-col text-left", className)}
+    >
       <Skeleton
         className={cn(
           posterAspect === "3/4"
             ? "aspect-[3/4]"
             : posterAspect === "4/5"
               ? "aspect-[4/5]"
-              : "aspect-[4/3]"
+              : "aspect-[4/3]",
         )}
       />
 

package/src/components/event-compact-row.stories.tsx

@@ -53,6 +53,36 @@ export const FreeEntry: Story = {
   args: { event: event("2", "Vinyl Happy Hour", "Zorki Photo Cafe", "2026-09-04T18:00:00", 0) },
 };
 
+/** The timeline row: fee on the meta line, tags below. */
+export const TimelineRow: Story = {
+  args: {
+    event: event("t1", "Klausen Quiz by GOtrivia", "Klausen Pubhouse", "2026-09-07T20:00:00", 20),
+    showPrice: true,
+    tags: ["Drinks", "Games"],
+  },
+};
+
+/** Running now: the on-air chip joins the meta line. */
+export const Live: Story = {
+  args: {
+    event: event("l1", "International Quiz at Yolka", "Yolka", "2026-09-07T19:00:00", 0),
+    isLive: true,
+    showPrice: true,
+    tags: ["Drinks", "Games"],
+  },
+};
+
+/** Over: poster dimmed, title muted, an explicit chip. Never row-level opacity. */
+export const Ended: Story = {
+  args: {
+    event: event("e1", "Hat Design Workshop with Matira Hats", "Del Mars", "2026-09-07T17:00:00", 795),
+    isEnded: true,
+    endedLabel: "Ended",
+    showPrice: true,
+    tags: ["Workshop"],
+  },
+};
+
 /**
  * No poster — the gradient fallback, which this row did not have until the
  * thumbnail grew. A blank `bg-muted` box passed for "no image" at 34px; at

package/src/components/event-compact-row.test.tsx

@@ -49,3 +49,52 @@ describe("EventCompactRow sub line", () => {
     expect(container.textContent).not.toContain("·");
   });
 });
+
+describe("EventCompactRow state and price", () => {
+  it("adds the live chip to the meta line when isLive", () => {
+    render(<EventCompactRow event={event} labels={labels} formatters={formatters} isLive />);
+    expect(screen.getByText("Live now")).toBeInTheDocument();
+  });
+
+  it("renders the ended chip only when both isEnded and endedLabel are given", () => {
+    const { rerender } = render(
+      <EventCompactRow event={event} labels={labels} formatters={formatters} isEnded />
+    );
+    expect(screen.queryByText("Ended")).not.toBeInTheDocument();
+
+    rerender(
+      <EventCompactRow event={event} labels={labels} formatters={formatters} isEnded endedLabel="Ended" />
+    );
+    expect(screen.getByText("Ended")).toBeInTheDocument();
+  });
+
+  it("prints a paid fee on the meta line with showPrice, and nothing without it", () => {
+    const paid = { ...event, entry_fee: 20 };
+    const { container, rerender } = render(
+      <EventCompactRow event={paid} labels={labels} formatters={formatters} />
+    );
+    expect(container.textContent).not.toContain("20 RON");
+
+    rerender(<EventCompactRow event={paid} labels={labels} formatters={formatters} showPrice />);
+    expect(screen.getByText("20 RON")).toBeInTheDocument();
+  });
+
+  it("prints the free label once — on the meta line with showPrice, as the trailing pill without", () => {
+    const free = { ...event, entry_fee: 0 };
+    const { rerender } = render(
+      <EventCompactRow event={free} labels={labels} formatters={formatters} />
+    );
+    expect(screen.getAllByText("Free")).toHaveLength(1);
+
+    rerender(<EventCompactRow event={free} labels={labels} formatters={formatters} showPrice />);
+    expect(screen.getAllByText("Free")).toHaveLength(1);
+  });
+
+  it("prints nothing for an unknown fee even with showPrice", () => {
+    const { container } = render(
+      <EventCompactRow event={event} labels={labels} formatters={formatters} showPrice />
+    );
+    expect(container.textContent).not.toContain("RON");
+    expect(container.textContent).not.toContain("Free");
+  });
+});