@bearmenu/ui 0.8.44 → 0.8.45

package/dist/{chunk-AHL45DD2.js → chunk-HJTENOB2.js}

@@ -36,35 +36,50 @@ function DriftRail({
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
+  const half = useRef(0);
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      half.current = track.scrollWidth / 2;
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return void 0;
+    const onScroll = () => {
+      if (half.current > 0 && scroller.scrollLeft >= half.current) {
+        scroller.scrollLeft -= half.current;
+      }
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => scroller.removeEventListener("scroll", onScroll);
+  }, []);
   useEffect(() => {
     const scroller = scrollerRef.current;
     const track = trackRef.current;
     if (!scroller || !track) return void 0;
+    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    if (!drifting) 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 width = half.current;
+      if (width > 0) {
+        if (now >= heldUntil.current) {
+          const perSecond = width / durationSeconds;
           const delta = perSecond * (now - last) / 1e3;
           position.current += reverse ? -delta : delta;
+          if (position.current >= width) position.current -= width;
+          else if (position.current < 0) position.current += width;
+          scroller.scrollLeft = position.current;
         } 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);

package/dist/components/drift-rail.js

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

package/dist/components/event-index-row.js

@@ -29,7 +29,7 @@ function EventIndexRow({
   const dot = /* @__PURE__ */ jsx("span", { className: "px-1 text-border", "aria-hidden": true, children: "\xB7" });
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-    /* @__PURE__ */ jsxs("div", { className: "relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 active:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted md:w-[104px]", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: fallback }),
         posterUrl && // eslint-disable-next-line @next/next/no-img-element
@@ -49,7 +49,7 @@ function EventIndexRow({
           LinkComponent,
           {
             href,
-            className: "rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            className: "rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary active:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             children: title
           }
         ) }),
@@ -61,7 +61,7 @@ function EventIndexRow({
               LinkComponent,
               {
                 href: venueHref,
-                className: "relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                className: "relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary active:text-primary active:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                 children: venue
               }
             ) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground/85", children: venue })

package/dist/components/menu-index-list.js

@@ -52,7 +52,7 @@ function MenuIndexList({
                   LinkComponent,
                   {
                     href: entry.href,
-                    className: "group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none",
+                    className: "group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent active:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none",
                     children: [
                       /* @__PURE__ */ jsx(
                         "span",
@@ -67,7 +67,7 @@ function MenuIndexList({
                       /* @__PURE__ */ jsx(
                         ChevronRight,
                         {
-                          className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none",
+                          className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent group-active:text-accent motion-reduce:transition-none",
                           "aria-hidden": true
                         }
                       )

package/dist/components/poster-stack.d.ts

@@ -50,6 +50,9 @@ type PosterStackPoster = {
     caption?: string;
     /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
     fallback?: React.ReactNode;
+    /** Load now at high priority instead of lazily. For the poster that is the
+     *  page's LCP element; every other poster stays lazy. */
+    eager?: boolean;
 };
 type PosterStackProps = {
     /** Candidates in order. The first three whose image loads are shown, so

package/dist/components/poster-stack.js

@@ -85,7 +85,8 @@ function PosterStack({
                 {
                   src: poster.src,
                   alt: poster.caption ? "" : poster.alt,
-                  loading: "lazy",
+                  loading: poster.eager ? "eager" : "lazy",
+                  fetchPriority: poster.eager ? "high" : void 0,
                   decoding: "async",
                   className: cn(
                     "h-full w-full object-cover",

package/dist/components/poster-tape.js

@@ -1,4 +1,4 @@
-import { DriftRail } from '../chunk-AHL45DD2.js';
+import { DriftRail } from '../chunk-HJTENOB2.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/dist/components/section-header.js

@@ -14,10 +14,10 @@ var ACTION_BASE_CLASSES = cn(
   "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );
 var ACTION_TONE_CLASSES = {
-  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  muted: "text-[14px] text-muted-foreground hover:text-foreground active:text-foreground",
   app: cn(
-    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
-    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80 active:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground lg:active:text-foreground"
   )
 };
 function SectionHeader({

package/package.json

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

package/src/components/drift-rail.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { act, fireEvent, render } from "@testing-library/react";
+import { DriftRail } from "./drift-rail";
+
+let intersect: (isIntersecting: boolean) => void = () => {};
+let resize: () => void = () => {};
+let frames = new Map<number, (now: number) => void>();
+let nextFrame = 0;
+
+beforeEach(() => {
+  frames = new Map();
+  vi.stubGlobal("matchMedia", () => ({
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+  vi.stubGlobal(
+    "IntersectionObserver",
+    class {
+      constructor(callback: (entries: Array<{ isIntersecting: boolean }>) => void) {
+        intersect = (isIntersecting) => callback([{ isIntersecting }]);
+      }
+      observe() {}
+      disconnect() {}
+    }
+  );
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      constructor(callback: () => void) {
+        resize = callback;
+      }
+      observe() {}
+      disconnect() {}
+    }
+  );
+  vi.stubGlobal("requestAnimationFrame", (callback: (now: number) => void) => {
+    nextFrame += 1;
+    frames.set(nextFrame, callback);
+    return nextFrame;
+  });
+  vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+/** A rail whose track is 1000px wide (two 500px copies). */
+function renderRail() {
+  const { container } = render(
+    <DriftRail durationSeconds={10}>
+      <span>a</span>
+      <span>b</span>
+    </DriftRail>
+  );
+  const scroller = container.firstElementChild as HTMLDivElement;
+  const track = scroller.firstElementChild as HTMLDivElement;
+  const scrollWidth = vi.fn(() => 1000);
+  Object.defineProperty(track, "scrollWidth", { get: scrollWidth });
+  act(() => resize());
+  return { scroller, scrollWidth };
+}
+
+function runFrame(now: number) {
+  const pending = [...frames.values()];
+  frames.clear();
+  pending.forEach((frame) => frame(now));
+}
+
+describe("DriftRail", () => {
+  it("drifts at one copy per duration without measuring the track each frame", () => {
+    const { scroller, scrollWidth } = renderRail();
+    const readsAfterMount = scrollWidth.mock.calls.length;
+    const start = performance.now();
+
+    runFrame(start + 1000);
+    runFrame(start + 2000);
+
+    // 500px per 10s is 50px per second.
+    expect(scroller.scrollLeft).toBeGreaterThan(0);
+    expect(scrollWidth.mock.calls.length).toBe(readsAfterMount);
+  });
+
+  it("stops the frame loop entirely while off screen", () => {
+    renderRail();
+    act(() => intersect(false));
+    runFrame(performance.now() + 16);
+    expect(frames.size).toBe(0);
+
+    act(() => intersect(true));
+    expect(frames.size).toBeGreaterThan(0);
+  });
+
+  it("wraps the reader's own scroll by one copy, with no frame loop running", () => {
+    const { scroller } = renderRail();
+    act(() => intersect(false));
+    scroller.scrollLeft = 620;
+    fireEvent.scroll(scroller);
+    expect(scroller.scrollLeft).toBe(120);
+  });
+});

package/src/components/drift-rail.tsx

@@ -88,44 +88,66 @@ export function DriftRail({
     return () => observer.disconnect();
   }, []);
 
-  // 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.
+  // One copy's width, kept by a ResizeObserver. Read off the track on every
+  // frame, it forced a style and layout pass per frame (measured on /events at
+  // up to 558ms of recalc per second).
+  const half = useRef(0);
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(() => {
+      half.current = track.scrollWidth / 2;
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, []);
+
+  // The wrap, for the reader's own scrolling: the two copies are identical,
+  // so jumping by exactly one copy's width is invisible even mid-swipe. On a
+  // scroll event rather than in the frame loop, so the loop can stop.
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return undefined;
+    const onScroll = () => {
+      if (half.current > 0 && scroller.scrollLeft >= half.current) {
+        scroller.scrollLeft -= half.current;
+      }
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => scroller.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // The drift. The frame loop runs only while the rail can drift: on screen,
+  // motion allowed, not hovered. Otherwise it does no work at all.
   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;
+
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    if (!drifting) return undefined;
+
+    let frame = 0;
+    let last = performance.now();
     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 width = half.current;
+      if (width > 0) {
+        if (now >= heldUntil.current) {
+          const perSecond = width / durationSeconds;
           const delta = (perSecond * (now - last)) / 1000;
           position.current += reverse ? -delta : delta;
+          if (position.current >= width) position.current -= width;
+          else if (position.current < 0) position.current += width;
+          scroller.scrollLeft = position.current;
         } else {
+          // Held: follow the reader, never fight the finger.
           position.current = scroller.scrollLeft;
         }
-        // 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;
-        }
-        if (driftingNow || wrapped) scroller.scrollLeft = position.current;
       }
       last = now;
       frame = requestAnimationFrame(tick);

package/src/components/event-index-row.tsx

@@ -100,7 +100,7 @@ export function EventIndexRow({
     <div className={cn("relative", className)}>
       {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
 
-      <div className="relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5">
+      <div className="relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 active:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5">
         {/* Square poster at the same 72/104 the rest of the row family uses —
             the editorial surfaces above this one are 4:3, but a third ratio
             inside the ROW family would break the sibling-shape rule for one
@@ -125,7 +125,7 @@ export function EventIndexRow({
           <Heading className="text-[15px] font-bold leading-snug tracking-[-0.01em] text-foreground md:text-[16.5px]">
             <LinkComponent
               href={href}
-              className="rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className="rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary active:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             >
               {title}
             </LinkComponent>
@@ -139,7 +139,7 @@ export function EventIndexRow({
                 {venueHref ? (
                   <LinkComponent
                     href={venueHref}
-                    className="relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    className="relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary active:text-primary active:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                   >
                     {venue}
                   </LinkComponent>

package/src/components/menu-index-list.tsx

@@ -112,7 +112,7 @@ export function MenuIndexList({
               <Separator />
               <LinkComponent
                 href={entry.href}
-                className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+                className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent active:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
               >
                 {/* The family's mark: a dot in its hue. */}
                 <span
@@ -131,7 +131,7 @@ export function MenuIndexList({
                   {entry.countLabel ?? String(entry.count)}
                 </span>
                 <ChevronRight
-                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
+                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent group-active:text-accent motion-reduce:transition-none"
                   aria-hidden
                 />
               </LinkComponent>

package/src/components/poster-stack.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { PosterStack } from "./poster-stack";
+
+// jsdom has neither; the stack checks reduced motion, then observes itself.
+beforeEach(() => {
+  vi.stubGlobal("matchMedia", () => ({ matches: false }));
+  vi.stubGlobal(
+    "IntersectionObserver",
+    class {
+      observe() {}
+      disconnect() {}
+    }
+  );
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+const posters = [
+  { src: "/a.jpg", alt: "A", eager: true },
+  { src: "/b.jpg", alt: "B" },
+  { src: "/c.jpg", alt: "C" },
+];
+
+describe("PosterStack eager", () => {
+  it("loads only the eager poster now, at high priority", () => {
+    const { container } = render(<PosterStack posters={posters} />);
+    const [first, ...rest] = Array.from(container.querySelectorAll("img"));
+
+    expect(first.getAttribute("loading")).toBe("eager");
+    expect(first.getAttribute("fetchpriority")).toBe("high");
+    for (const img of rest) {
+      expect(img.getAttribute("loading")).toBe("lazy");
+      expect(img.hasAttribute("fetchpriority")).toBe(false);
+    }
+  });
+
+  it("stays lazy when no poster opts in", () => {
+    const { container } = render(
+      <PosterStack posters={posters.map(({ src, alt }) => ({ src, alt }))} />
+    );
+    for (const img of container.querySelectorAll("img")) {
+      expect(img.getAttribute("loading")).toBe("lazy");
+    }
+  });
+});

package/src/components/poster-stack.tsx

@@ -60,6 +60,9 @@ export type PosterStackPoster = {
   caption?: string;
   /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
   fallback?: React.ReactNode;
+  /** Load now at high priority instead of lazily. For the poster that is the
+   *  page's LCP element; every other poster stays lazy. */
+  eager?: boolean;
 };
 
 export type PosterStackProps = {
@@ -182,7 +185,8 @@ export function PosterStack({
               <img
                 src={poster.src}
                 alt={poster.caption ? "" : poster.alt}
-                loading="lazy"
+                loading={poster.eager ? "eager" : "lazy"}
+                fetchPriority={poster.eager ? "high" : undefined}
                 decoding="async"
                 className={cn(
                   "h-full w-full object-cover",

package/src/components/section-header.tsx

@@ -79,10 +79,10 @@ const ACTION_BASE_CLASSES = cn(
 );
 
 const ACTION_TONE_CLASSES = {
-  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  muted: "text-[14px] text-muted-foreground hover:text-foreground active:text-foreground",
   app: cn(
-    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
-    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80 active:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground lg:active:text-foreground"
   ),
 } as const;