@bearmenu/ui 0.8.44 → 0.8.46

package/dist/{chunk-VXGIDKXV.js → chunk-4WW3HPIW.js}

@@ -2,7 +2,7 @@ import { SignatureChip } from './chunk-6PQINSAA.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';
-import { MessageSquareQuote } from 'lucide-react';
+import { Star, MessageSquareQuote } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -51,6 +51,20 @@ function MentionSignal({
     }
   );
 }
+function ExternalRatingSignal({ label, value }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      className: "inline-flex shrink-0 items-center gap-0.5 text-[13px] font-semibold text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx(Star, { className: "h-3 w-3 fill-current opacity-70", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: value })
+      ]
+    }
+  );
+}
 var MenuItem = memo(function MenuItem2({
   item,
   labels,
@@ -61,6 +75,8 @@ var MenuItem = memo(function MenuItem2({
   signatureTier = "strong",
   onSignatureEvidence,
   onMentions,
+  externalRating,
+  formatRating = (score) => score.toFixed(1),
   markGradient,
   venueName,
   subtitle,
@@ -70,7 +86,7 @@ var MenuItem = memo(function MenuItem2({
   disabled = false,
   className
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const firstEntry = (_a = item.sizes_and_prices) == null ? void 0 : _a[0];
   const quantity = firstEntry == null ? void 0 : firstEntry.size;
   const hasQuantity = quantity != null && quantity > 0;
@@ -79,6 +95,7 @@ var MenuItem = memo(function MenuItem2({
   const maxPrice = allPrices.length > 0 ? Math.max(...allPrices) : null;
   const isPriceRange = minPrice != null && maxPrice != null && minPrice !== maxPrice;
   const mentionCount = (_e = (_d = item.mentions) != null ? _d : item.review_count) != null ? _e : 0;
+  const ratingText = externalRating != null ? formatRating(externalRating) : null;
   const isInert = !href && !onOpen;
   const isActionable = !disabled && !isInert;
   const handleRowClick = () => {
@@ -183,7 +200,7 @@ var MenuItem = memo(function MenuItem2({
               children: item.description
             }
           ),
-          (minPrice != null || hasQuantity || mentionCount > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-baseline justify-between gap-x-2 gap-y-1", children: [
+          (minPrice != null || hasQuantity || mentionCount > 0 || ratingText != null) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-baseline justify-between gap-x-2 gap-y-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-x-2", children: [
               minPrice != null && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold tabular-nums text-foreground", children: isPriceRange ? `${formatPrice(minPrice)}\u2013${formatPrice(maxPrice)}` : formatPrice(minPrice) }),
@@ -194,15 +211,24 @@ var MenuItem = memo(function MenuItem2({
                 item.kind === "dish" ? "g" : "ml"
               ] })
             ] }),
-            mentionCount > 0 && /* @__PURE__ */ jsx(
-              MentionSignal,
-              {
-                label: labels.mentions(mentionCount),
-                count: mentionCount,
-                onMentions,
-                formatCount
-              }
-            )
+            (ratingText != null || mentionCount > 0) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-x-3", children: [
+              ratingText != null && /* @__PURE__ */ jsx(
+                ExternalRatingSignal,
+                {
+                  label: (_g = (_f = labels.externalRating) == null ? void 0 : _f.call(labels, ratingText)) != null ? _g : ratingText,
+                  value: ratingText
+                }
+              ),
+              mentionCount > 0 && /* @__PURE__ */ jsx(
+                MentionSignal,
+                {
+                  label: labels.mentions(mentionCount),
+                  count: mentionCount,
+                  onMentions,
+                  formatCount
+                }
+              )
+            ] })
           ] })
         ] })
       ]
@@ -210,4 +236,4 @@ var MenuItem = memo(function MenuItem2({
   );
 });
 
-export { MentionSignal, MenuItem };
+export { ExternalRatingSignal, MentionSignal, MenuItem };

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/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
+    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/command.d.ts

@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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/menu-item.d.ts

@@ -57,6 +57,12 @@ type MenuItemLabels = {
     signature: string;
     /** Chip text for a `weak` (merely mentioned) item. */
     mentioned: string;
+    /**
+     * Fully-worded external rating, e.g. "Rated 4.1 on Vivino" — the accessible
+     * name for the star-and-score pair. Receives the FORMATTED score. Falls back
+     * to the bare score when omitted.
+     */
+    externalRating?: (score: string) => string;
 };
 type MenuItemProps = {
     item: MenuItemPreview;
@@ -79,6 +85,17 @@ type MenuItemProps = {
     onSignatureEvidence?: () => void;
     /** Opens the reviews behind the mention count. */
     onMentions?: () => void;
+    /**
+     * An outside aggregate score for the item (a wine's Vivino rating, a beer's
+     * Untappd one), shown as a star and the score beside the mention count.
+     *
+     * The caller GATES it: those scales run low and a thin vote count is noise,
+     * so the app decides whether a score is fit to show and passes nothing when
+     * it is not. The DS renders what it is given and applies no floor of its own.
+     */
+    externalRating?: number;
+    /** Formats `externalRating`. Defaults to one decimal place. */
+    formatRating?: (score: number) => string;
     /** The mark's colour, as a CSS `background-image` value. */
     markGradient?: string;
     /**
@@ -123,6 +140,16 @@ declare function MentionSignal({ label, count, onMentions, formatCount, }: {
     onMentions?: () => void;
     formatCount?: (value: number) => string;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * An external aggregate score: a star and the numeral, in the neutral muted
+ * tone. Deliberately quieter than the mention count beside it (lighter weight,
+ * a step smaller, no accent) — the census count is this app's own evidence;
+ * the star is someone else's, and it must not outrank or be mistaken for it.
+ */
+declare function ExternalRatingSignal({ label, value }: {
+    label: string;
+    value: string;
+}): react_jsx_runtime.JSX.Element;
 declare const MenuItem: React.NamedExoticComponent<MenuItemProps>;
 
-export { MentionSignal, MenuItem, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };
+export { ExternalRatingSignal, MentionSignal, MenuItem, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };

package/dist/components/menu-item.js

@@ -1,4 +1,4 @@
-export { MentionSignal, MenuItem } from '../chunk-VXGIDKXV.js';
+export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-4WW3HPIW.js';
 import '../chunk-6PQINSAA.js';
 import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';

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/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/top-ranking-entry.js

@@ -1,4 +1,4 @@
-import { MenuItem } from '../chunk-VXGIDKXV.js';
+import { MenuItem } from '../chunk-4WW3HPIW.js';
 import '../chunk-6PQINSAA.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.44",
+  "version": "0.8.46",
   "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/menu-item.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuItemPreview } from "./menu-types";
+
+const wine: MenuItemPreview = {
+  id: "w1",
+  slug: "feteasca-neagra",
+  name: "Fetească Neagră",
+  kind: "drink",
+  sizes_and_prices: [{ size: 750, price: 169 }],
+  mentions: 4,
+};
+
+const labels: MenuItemLabels = {
+  currency: "RON",
+  mentions: (count) => `Mentioned in ${count} reviews`,
+  signature: "Signature",
+  mentioned: "Mentioned",
+  externalRating: (score) => `Rated ${score} on Vivino`,
+};
+
+describe("MenuItem external rating", () => {
+  it("shows the score beside the mention count, named for assistive tech", () => {
+    render(
+      <MenuItem item={wine} labels={labels} formatPrice={String} externalRating={4.14} onOpen={() => {}} />
+    );
+    const rating = screen.getByRole("img", { name: "Rated 4.1 on Vivino" });
+    expect(rating.textContent).toBe("4.1");
+    expect(screen.getByLabelText("Mentioned in 4 reviews")).toBeTruthy();
+  });
+
+  it("uses the injected formatter and falls back to the bare score as its name", () => {
+    const { mentions, currency, signature, mentioned } = labels;
+    render(
+      <MenuItem
+        item={{ ...wine, mentions: 0 }}
+        labels={{ mentions, currency, signature, mentioned }}
+        formatPrice={String}
+        externalRating={4.14}
+        formatRating={(score) => score.toFixed(2).replace(".", ",")}
+      />
+    );
+    expect(screen.getByRole("img", { name: "4,14" }).textContent).toBe("4,14");
+  });
+
+  it("renders no rating when the caller passes none", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} />);
+    expect(screen.queryByRole("img", { name: /Rated/ })).toBeNull();
+  });
+
+  it("keeps the meta row for a rating alone, with no price, size or mentions", () => {
+    const bare: MenuItemPreview = { id: "w2", slug: "x", name: "X", kind: "drink" };
+    render(<MenuItem item={bare} labels={labels} formatPrice={String} externalRating={3.9} />);
+    expect(screen.getByRole("img", { name: "Rated 3.9 on Vivino" })).toBeTruthy();
+  });
+});

package/src/components/menu-item.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { MessageSquareQuote } from "lucide-react";
+import { MessageSquareQuote, Star } from "lucide-react";
 import { cn } from "../lib/utils";
 import { SignatureChip } from "./signature-chip";
 import type { MenuItemPreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
@@ -63,6 +63,12 @@ export type MenuItemLabels = {
   signature: string;
   /** Chip text for a `weak` (merely mentioned) item. */
   mentioned: string;
+  /**
+   * Fully-worded external rating, e.g. "Rated 4.1 on Vivino" — the accessible
+   * name for the star-and-score pair. Receives the FORMATTED score. Falls back
+   * to the bare score when omitted.
+   */
+  externalRating?: (score: string) => string;
 };
 
 export type MenuItemProps = {
@@ -86,6 +92,17 @@ export type MenuItemProps = {
   onSignatureEvidence?: () => void;
   /** Opens the reviews behind the mention count. */
   onMentions?: () => void;
+  /**
+   * An outside aggregate score for the item (a wine's Vivino rating, a beer's
+   * Untappd one), shown as a star and the score beside the mention count.
+   *
+   * The caller GATES it: those scales run low and a thin vote count is noise,
+   * so the app decides whether a score is fit to show and passes nothing when
+   * it is not. The DS renders what it is given and applies no floor of its own.
+   */
+  externalRating?: number;
+  /** Formats `externalRating`. Defaults to one decimal place. */
+  formatRating?: (score: number) => string;
   /** The mark's colour, as a CSS `background-image` value. */
   markGradient?: string;
   /**
@@ -187,6 +204,25 @@ export function MentionSignal({
   );
 }
 
+/**
+ * An external aggregate score: a star and the numeral, in the neutral muted
+ * tone. Deliberately quieter than the mention count beside it (lighter weight,
+ * a step smaller, no accent) — the census count is this app's own evidence;
+ * the star is someone else's, and it must not outrank or be mistaken for it.
+ */
+export function ExternalRatingSignal({ label, value }: { label: string; value: string }) {
+  return (
+    <span
+      role="img"
+      aria-label={label}
+      className="inline-flex shrink-0 items-center gap-0.5 text-[13px] font-semibold text-muted-foreground"
+    >
+      <Star className="h-3 w-3 fill-current opacity-70" aria-hidden />
+      <span className="tabular-nums">{value}</span>
+    </span>
+  );
+}
+
 export const MenuItem = memo(function MenuItem({
   item,
   labels,
@@ -197,6 +233,8 @@ export const MenuItem = memo(function MenuItem({
   signatureTier = "strong",
   onSignatureEvidence,
   onMentions,
+  externalRating,
+  formatRating = (score) => score.toFixed(1),
   markGradient,
   venueName,
   subtitle,
@@ -222,6 +260,7 @@ export const MenuItem = memo(function MenuItem({
   // `review_count` counts full review objects and is sparse. Prefer the former,
   // fall back rather than render nothing.
   const mentionCount = item.mentions ?? item.review_count ?? 0;
+  const ratingText = externalRating != null ? formatRating(externalRating) : null;
 
   // A row with neither destination is content, not a control.
   const isInert = !href && !onOpen;
@@ -375,10 +414,10 @@ export const MenuItem = memo(function MenuItem({
             to the far edge severs it from the name it belongs to. Do not
             re-litigate without looking at it.
 
-            Suppressed entirely when the row has none of the three: a mention
+            Suppressed entirely when the row has none of these: a mention
             with no menu row behind it has no price and no size, and an empty
             meta line still spent its top margin. */}
-        {(minPrice != null || hasQuantity || mentionCount > 0) && (
+        {(minPrice != null || hasQuantity || mentionCount > 0 || ratingText != null) && (
           <div className="mt-1.5 flex items-baseline justify-between gap-x-2 gap-y-1">
             <div className="flex min-w-0 items-baseline gap-x-2">
               {minPrice != null && (
@@ -400,13 +439,25 @@ export const MenuItem = memo(function MenuItem({
               )}
             </div>
 
-            {mentionCount > 0 && (
-              <MentionSignal
-                label={labels.mentions(mentionCount)}
-                count={mentionCount}
-                onMentions={onMentions}
-                formatCount={formatCount}
-              />
+            {/* The external score sits LEFT of the mention count, so the count
+                keeps the right edge and still forms a column down the list. */}
+            {(ratingText != null || mentionCount > 0) && (
+              <div className="flex shrink-0 items-center gap-x-3">
+                {ratingText != null && (
+                  <ExternalRatingSignal
+                    label={labels.externalRating?.(ratingText) ?? ratingText}
+                    value={ratingText}
+                  />
+                )}
+                {mentionCount > 0 && (
+                  <MentionSignal
+                    label={labels.mentions(mentionCount)}
+                    count={mentionCount}
+                    onMentions={onMentions}
+                    formatCount={formatCount}
+                  />
+                )}
+              </div>
             )}
           </div>
         )}

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;