@bearmenu/ui 0.8.7 → 0.8.8

package/src/components/weekend-panel.tsx

@@ -4,33 +4,38 @@ import * as React from "react";
 import { ChevronRight } from "lucide-react";
 import { MotionPlayPause } from "./motion-icon-controls";
 import { cn } from "../lib/utils";
+import { useDragSwipe } from "../hooks/use-drag-swipe";
+import { DESKTOP_MEDIA_QUERY, useMediaQuery } from "../hooks/use-media-query";
 import { Skeleton } from "./skeleton";
 
 /**
- * WeekendPanel — one day panel in the weekend section: a header row over an
- * auto-advancing two-up carousel of the day's event cards.
+ * WeekendPanel — one day panel in the weekend section: a header row over a
+ * two-up, two-page carousel of the day's event cards.
  *
  * The carousel assumes exactly two "pages" of two cards (four `children` in
- * total) — that's what the design's slide keyframes measure against
- * (`translateX(calc(-100% - gap))` moves the track exactly one page). Pass a
- * different count and the maths still animate, but the pause points won't
- * line up with a full page.
+ * total): the track moves by one page width plus the gap. Pass a different
+ * count and it still works, but the second page may be half-empty.
  *
- * ACCESSIBILITY: satisfies WCAG 2.2.2 (Pause, Stop, Hide) with a visible
- * pause/play toggle next to the progress dots. Hover/focus/off-screen pausing
- * remain as convenience behaviour, but the button is the actual mechanism —
- * it is a latch (`isManuallyPaused`), not a hold, so a touch or low-vision
- * user can stop the carousel and keep it stopped while they read. Toggling it
- * flips `animationPlayState` for the track AND both dot keyframes together.
- * Under `prefers-reduced-motion` the panel already renders a static grid with
- * nothing animating, so the control would be meaningless and is not rendered.
+ * THE READER TURNS THE PAGE. The track used to be a CSS keyframe loop that
+ * slid every few seconds; readers tried to swipe it and nothing happened.
+ * The page is now state: a horizontal drag on the track (touch, pen or mouse)
+ * turns it, the track follows the finger on the way, and focusing a card on
+ * the hidden page (keyboard) turns to that page so focus is never invisible.
+ *
+ * AUTOPLAY IS DESKTOP-ONLY. Below `lg` the panel never advances by itself —
+ * on a phone a self-advancing card under the thumb is the thing the reader
+ * is trying to swipe, and it moves away. From `lg` the two pages alternate
+ * every `durationSeconds / 2`, pausing on hover, focus, off-screen, and for
+ * good once the reader touches it. That version keeps its visible pause/play
+ * toggle (WCAG 2.2.2): a latch, not a hold, so a low-vision user can stop it
+ * and keep it stopped. Under `prefers-reduced-motion` the panel renders a
+ * static grid with nothing animating and no control.
  */
 
 const WEEKEND_PANEL_TRACK_GAP_PX = 14;
 const WEEKEND_PANEL_DEFAULT_DURATION_SECONDS = 7;
-const WEEKEND_PANEL_SLIDE_KEYFRAMES_ID = "ds-weekend-panel-slide";
-const WEEKEND_PANEL_DOT_A_KEYFRAMES_ID = "ds-weekend-panel-dot-a";
-const WEEKEND_PANEL_DOT_B_KEYFRAMES_ID = "ds-weekend-panel-dot-b";
+const WEEKEND_PANEL_PAGE_COUNT = 2;
+const WEEKEND_PANEL_CARDS_PER_PAGE = 2;
 
 function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = React.useState(false);
@@ -47,16 +52,22 @@ function usePrefersReducedMotion(): boolean {
   return reduced;
 }
 
-function useInViewport<T extends Element>(): [React.RefObject<T | null>, boolean] {
+function useInViewport<T extends Element>(): [
+  React.RefObject<T | null>,
+  boolean,
+] {
   const ref = React.useRef<T | null>(null);
   const [inView, setInView] = React.useState(true);
 
   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();
   }, []);
@@ -91,14 +102,15 @@ export type WeekendPanelProps = {
   linkComponent?: React.ComponentType<WeekendPanelLinkProps>;
   onActionClick?: () => void;
   isHighlighted?: boolean;
-  /** Loop duration for the slide/dots animation. Default 7 — sibling panels typically stagger at 8.5 and 10. */
+  /** Desktop autoplay loop duration — the page turns every half of it. Default 7; sibling panels typically stagger at 8.5 and 10. */
   durationSeconds?: number;
   /**
    * Accessible names for the pause/play toggle. Required — the control is
-   * only omitted under `prefers-reduced-motion`, where the labels go unused.
+   * only rendered on desktop and not under `prefers-reduced-motion`, but the
+   * DS owns no copy.
    */
   labels: WeekendPanelLabels;
-  /** The event cards. The animation is built around exactly four (two pages of two). */
+  /** The event cards. Built around exactly four (two pages of two). */
   children?: React.ReactNode;
   className?: string;
 };
@@ -117,12 +129,37 @@ export function WeekendPanel({
   className,
 }: WeekendPanelProps) {
   const prefersReducedMotion = usePrefersReducedMotion();
+  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
   const [panelRef, inView] = useInViewport<HTMLDivElement>();
   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 undefined;
+    const interval = window.setInterval(
+      () => setPage((current) => (current + 1) % WEEKEND_PANEL_PAGE_COUNT),
+      (durationSeconds * 1000) / WEEKEND_PANEL_PAGE_COUNT,
+    );
+    return () => window.clearInterval(interval);
+  }, [durationSeconds, isPaused]);
+
+  const turnTo = (next: number) => {
+    setPage(Math.max(0, Math.min(WEEKEND_PANEL_PAGE_COUNT - 1, next)));
+    // Once the reader has taken the wheel the panel stops turning itself.
+    setIsManuallyPaused(true);
+  };
+
+  const { dragX, isDragging, handlers } = useDragSwipe({
+    onSwipe: (direction) => turnTo(page + direction),
+    disabled: prefersReducedMotion,
+  });
 
   const action = (
     <span className="ml-auto flex items-center gap-0.5 text-[12.5px] text-muted-foreground">
@@ -131,6 +168,8 @@ export function WeekendPanel({
     </span>
   );
 
+  const cards = React.Children.toArray(children);
+
   return (
     <div
       ref={panelRef}
@@ -141,34 +180,14 @@ export function WeekendPanel({
       className={cn(
         "relative overflow-hidden rounded-2xl border bg-card py-4",
         isHighlighted ? "border-primary/40" : "border-border",
-        className
+        className,
       )}
     >
-      <style>{`
-        @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; }
-        }
-      `}</style>
-
       <div className="flex items-baseline gap-[9px] px-4 pb-3">
         <span
           className={cn(
             "text-[15.5px] font-extrabold tracking-[-0.02em] sm:text-[17px]",
-            isHighlighted && "text-primary"
+            isHighlighted && "text-primary",
           )}
         >
           {dayLabel}
@@ -176,7 +195,7 @@ export function WeekendPanel({
         <span
           className={cn(
             "font-mono text-xs",
-            isHighlighted ? "text-primary" : "text-muted-foreground"
+            isHighlighted ? "text-primary" : "text-muted-foreground",
           )}
         >
           {countLabel}
@@ -202,20 +221,42 @@ export function WeekendPanel({
       {prefersReducedMotion ? (
         <div className="grid grid-cols-2 gap-3.5 px-4">{children}</div>
       ) : (
-        <div className="overflow-hidden px-4">
+        // 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.
+        <div className="px-4">
           <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",
-            }}
+            {...handlers}
+            className="overflow-hidden select-none [touch-action:pan-y]"
           >
-            {React.Children.map(children, (child) => (
-              <div className="w-[calc((100%-14px)/2)] flex-none">{child}</div>
-            ))}
+            <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))`,
+              }}
+            >
+              {cards.map((child, index) => (
+                <div
+                  key={index}
+                  className="w-[calc((100%-14px)/2)] flex-none"
+                  // Keyboard: focusing a card on the other page turns to it, so
+                  // focus is never parked behind the clip.
+                  onFocus={() => {
+                    const cardPage = Math.floor(
+                      index / WEEKEND_PANEL_CARDS_PER_PAGE,
+                    );
+                    if (cardPage !== page) turnTo(cardPage);
+                  }}
+                >
+                  {child}
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       )}
@@ -224,56 +265,46 @@ export function WeekendPanel({
         <div className="mt-3.5 grid grid-cols-[1fr_auto_1fr] items-center px-4">
           <span aria-hidden />
 
+          {/* The dots say which page is showing; the width tweens with the
+              page. Decorative — the swipe (and, on desktop, the toggle) are
+              the controls, and each card is already a named link. */}
           <div className="flex items-center justify-center gap-1.5" aria-hidden>
-            <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",
-              }}
-            />
-            <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",
-              }}
-            />
+            {Array.from({ length: WEEKEND_PANEL_PAGE_COUNT }, (_, index) => (
+              <span
+                key={index}
+                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",
+                )}
+              />
+            ))}
           </div>
 
           <div className="flex justify-end">
-            {/* `MotionPlayPause`, not two swapped lucide glyphs. The triangle
-                folding into two bars IS the state change, so the control shows
-                what it did instead of cutting to a different icon — which is
-                the whole reason that gesture exists in the set.
-
-                `active` drives the HELD state and the bars are the active
-                variant, so it is `!isManuallyPaused`: while the carousel plays,
-                the button offers pause. `replayToken` bumps on pointer down so
-                the gesture answers the touch rather than its consequence.
-
-                `motion-reduce` is handled inside `MotionIcon`; the button keeps
-                its own for the background transition. */}
-            <button
-              type="button"
-              onClick={() => setIsManuallyPaused((current) => !current)}
-              onPointerDown={() => setPlayPauseReplayToken((n) => n + 1)}
-              aria-label={isManuallyPaused ? labels.play : labels.pause}
-              aria-pressed={isManuallyPaused}
-              className="flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none"
-            >
-              <MotionPlayPause
-                active={!isManuallyPaused}
-                replayToken={playPauseReplayToken}
-                className="size-4"
-              />
-            </button>
+            {/* Desktop only: the toggle exists to stop an autoplay, and below
+                `lg` there is none to stop. `MotionPlayPause`, not two swapped
+                lucide glyphs: the triangle folding into two bars IS the state
+                change. `active` drives the HELD state and the bars are the
+                active variant, so it is `!isManuallyPaused`; `replayToken`
+                bumps on pointer down so the gesture answers the touch. */}
+            {autoplays && (
+              <button
+                type="button"
+                onClick={() => setIsManuallyPaused((current) => !current)}
+                onPointerDown={() => setPlayPauseReplayToken((n) => n + 1)}
+                aria-label={isManuallyPaused ? labels.play : labels.pause}
+                aria-pressed={isManuallyPaused}
+                className="flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none"
+              >
+                <MotionPlayPause
+                  active={!isManuallyPaused}
+                  replayToken={playPauseReplayToken}
+                  className="size-4"
+                />
+              </button>
+            )}
           </div>
         </div>
       )}
@@ -287,14 +318,17 @@ export type WeekendPanelSkeletonProps = {
 };
 
 /** The panel at rest: the two visible cards of the two-up carousel, no slide. */
-export function WeekendPanelSkeleton({ isHighlighted, className }: WeekendPanelSkeletonProps) {
+export function WeekendPanelSkeleton({
+  isHighlighted,
+  className,
+}: WeekendPanelSkeletonProps) {
   return (
     <div
       aria-hidden="true"
       className={cn(
         "relative overflow-hidden rounded-2xl border bg-card py-4",
         isHighlighted ? "border-primary/40" : "border-border",
-        className
+        className,
       )}
     >
       <div className="flex items-baseline gap-[9px] px-4 pb-3">

package/src/hooks/use-drag-swipe.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useDragSwipe } from "./use-drag-swipe";
+
+function Stage({ onSwipe }: { onSwipe: (direction: -1 | 1) => void }) {
+  const { dragX, handlers } = useDragSwipe({ onSwipe });
+  return (
+    <div data-testid="stage" data-drag={dragX} {...handlers}>
+      <button type="button" onClick={() => onSwipe(0 as never)}>
+        card
+      </button>
+    </div>
+  );
+}
+
+const drag = (stage: HTMLElement, from: number, to: number) => {
+  fireEvent.pointerDown(stage, { clientX: from, pointerId: 1, button: 0 });
+  fireEvent.pointerMove(stage, { clientX: (from + to) / 2, pointerId: 1 });
+  fireEvent.pointerMove(stage, { clientX: to, pointerId: 1 });
+  fireEvent.pointerUp(stage, { clientX: to, pointerId: 1 });
+};
+
+describe("useDragSwipe", () => {
+  it("reports 1 for a leftward drag past the threshold and -1 for a rightward one", () => {
+    const onSwipe = vi.fn();
+    render(<Stage onSwipe={onSwipe} />);
+    const stage = screen.getByTestId("stage");
+
+    drag(stage, 200, 100);
+    expect(onSwipe).toHaveBeenLastCalledWith(1);
+
+    drag(stage, 100, 200);
+    expect(onSwipe).toHaveBeenLastCalledWith(-1);
+  });
+
+  it("ignores a drag shorter than the threshold", () => {
+    const onSwipe = vi.fn();
+    render(<Stage onSwipe={onSwipe} />);
+    drag(screen.getByTestId("stage"), 200, 180);
+    expect(onSwipe).not.toHaveBeenCalled();
+  });
+
+  it("follows the finger while dragging and settles back on release", () => {
+    render(<Stage onSwipe={() => {}} />);
+    const stage = screen.getByTestId("stage");
+    fireEvent.pointerDown(stage, { clientX: 200, pointerId: 1, button: 0 });
+    fireEvent.pointerMove(stage, { clientX: 140, pointerId: 1 });
+    expect(stage.dataset.drag).toBe("-60");
+    fireEvent.pointerUp(stage, { clientX: 140, pointerId: 1 });
+    expect(stage.dataset.drag).toBe("0");
+  });
+
+  it("swallows the click a drag would otherwise become", () => {
+    const onSwipe = vi.fn();
+    render(<Stage onSwipe={onSwipe} />);
+    const stage = screen.getByTestId("stage");
+    drag(stage, 200, 100);
+    onSwipe.mockClear();
+    fireEvent.click(screen.getByRole("button", { name: "card" }));
+    expect(onSwipe).not.toHaveBeenCalled();
+
+    // A plain click, with no drag before it, still reaches the card.
+    fireEvent.click(screen.getByRole("button", { name: "card" }));
+    expect(onSwipe).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/use-drag-swipe.ts

@@ -0,0 +1,105 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { PointerEvent as ReactPointerEvent } 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.
+ */
+export type DragSwipeOptions = {
+  /** Distance in px that counts as a swipe. Default 40. */
+  threshold?: number;
+  onSwipe: (direction: -1 | 1) => void;
+  disabled?: boolean;
+};
+
+export function useDragSwipe({ threshold = 40, onSwipe, disabled }: DragSwipeOptions) {
+  const [dragX, setDragX] = useState(0);
+  const startX = useRef<number | null>(null);
+  const pointerId = useRef<number | null>(null);
+  const didDrag = useRef(false);
+
+  const onPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLElement>) => {
+      if (disabled || event.button !== 0) return;
+      startX.current = event.clientX;
+      pointerId.current = event.pointerId;
+      didDrag.current = false;
+    },
+    [disabled]
+  );
+
+  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    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;
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    }
+    if (didDrag.current) setDragX(dx);
+  }, []);
+
+  const end = useCallback(
+    (event: ReactPointerEvent<HTMLElement>, cancelled: boolean) => {
+      if (startX.current === null || event.pointerId !== pointerId.current) return;
+      const dx = event.clientX - startX.current;
+      startX.current = null;
+      pointerId.current = null;
+      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      setDragX(0);
+      if (!cancelled && didDrag.current && Math.abs(dx) >= threshold) {
+        onSwipe(dx < 0 ? 1 : -1);
+      }
+      // Leave `didDrag` set through the click that follows a release; the
+      // stage's click-capture reads it, then clears it.
+    },
+    [onSwipe, threshold]
+  );
+
+  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLElement>) => end(event, false), [end]);
+  const onPointerCancel = useCallback(
+    (event: ReactPointerEvent<HTMLElement>) => end(event, true),
+    [end]
+  );
+
+  /** Native link/image dragging would cancel the pointer stream — see above. */
+  const onDragStart = useCallback((event: React.DragEvent<HTMLElement>) => {
+    event.preventDefault();
+  }, []);
+
+  /** Spread on the stage: swallows the click a drag would otherwise become. */
+  const onClickCapture = useCallback((event: ReactPointerEvent<HTMLElement> | React.MouseEvent) => {
+    if (didDrag.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      didDrag.current = false;
+    }
+  }, []);
+
+  return {
+    dragX,
+    isDragging: dragX !== 0,
+    handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture, onDragStart },
+  };
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/**
+ * 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.
+ */
+export function useMediaQuery(query: string): boolean {
+  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
+  );
+}
+
+/** The design system's desktop breakpoint, Tailwind's `lg`. */
+export const DESKTOP_MEDIA_QUERY = "(min-width: 1024px)";

package/dist/chunk-GPH6L4DX.js

@@ -1,55 +0,0 @@
-import { cn } from './chunk-FEK5XGZW.js';
-import { useId, useRef, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
-function DriftRail({
-  children,
-  reverse = false,
-  durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
-  pauseOnHover = true,
-  className
-}) {
-  const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
-  const scopeClass = `drift-rail-${scopeId}`;
-  const containerRef = useRef(null);
-  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();
-  }, []);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn(scopeClass, "overflow-hidden py-1.5", className), children: [
-    /* @__PURE__ */ jsx("style", { children: `
-        .${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%); }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .${scopeClass} .drift-rail-run {
-            animation: none;
-          }
-        }
-        ${pauseOnHover ? `.${scopeClass}:hover .drift-rail-run { animation-play-state: paused; }` : ""}
-      ` }),
-    /* @__PURE__ */ jsxs("div", { className: "drift-rail-run flex w-max items-stretch gap-3.5 motion-reduce:[animation:none]", children: [
-      children,
-      /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", children })
-    ] })
-  ] });
-}
-
-export { DriftRail };