@bearmenu/ui 0.8.45 → 0.8.47

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-QRSIJC4X.js → chunk-S5GDARLW.js}

@@ -6,6 +6,13 @@ import * as React from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var HEADING_CENTRE_LG = "lg:top-[30px]";
+var RULED_STACK = "gap-4 pb-2 lg:gap-0 lg:pb-0";
+function ruleFromLg(items) {
+  return items.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
+    index > 0 && /* @__PURE__ */ jsx(Separator, { className: "hidden lg:block" }),
+    child
+  ] }, index));
+}
 function TimelineHour({
   time,
   role = "hour",
@@ -95,20 +102,14 @@ function TimelineHour({
           {
             className: cn(
               "flex min-w-0 flex-col",
-              isCards && "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3",
+              isCards ? "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3" : RULED_STACK,
               isCards && isHero && "lg:flex lg:pt-0",
               isUnscheduled && isCards && "pt-3.5"
             ),
-            children: isCards ? items : items.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
-              index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-              child
-            ] }, index))
+            children: isCards ? items : ruleFromLg(items)
           }
         ),
-        overflowItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2", children: overflowItems.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
-          index > 0 && /* @__PURE__ */ jsx(Separator, { className: "hidden lg:block" }),
-          child
-        ] }, index)) }),
+        overflowItems.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col lg:pt-2", RULED_STACK), children: ruleFromLg(overflowItems) }),
         note && /* @__PURE__ */ jsx("p", { className: "pt-[9px] text-[11.5px] text-muted-foreground", children: note })
       ]
     }

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/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/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/timeline-day.js

@@ -1,4 +1,4 @@
-import { TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+import { TimelineHourSkeleton } from '../chunk-S5GDARLW.js';
 import '../chunk-BRXI6EDO.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/dist/components/timeline-hour.d.ts

@@ -48,7 +48,8 @@ import * as React from 'react';
  *
  * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
  * hairline between two posters reads as a third object) and from `lg` lays
- * them on a two/three-up grid; `rows` rules between children on both widths.
+ * them on a two/three-up grid; `rows` is the same gapped stack on the phone
+ * (rows are full cards there) and rules between children from `lg`.
  * Children are read with `Children.toArray`, which drops `null`/`false`, so a
  * conditional first row never inherits a rule meant for a second; pass rows
  * as siblings, not inside a fragment.

package/dist/components/timeline-hour.js

@@ -1,4 +1,4 @@
-export { TimelineHour, TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+export { TimelineHour, TimelineHourSkeleton } from '../chunk-S5GDARLW.js';
 import '../chunk-BRXI6EDO.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';

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.45",
+  "version": "0.8.47",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

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/timeline-day.test.tsx

@@ -75,4 +75,18 @@ describe("TimelineDay", () => {
     expect(rows.querySelectorAll('[data-orientation="horizontal"]').length).toBe(2);
     expect(cards.querySelectorAll('[data-orientation="horizontal"]').length).toBe(1);
   });
+
+  it("stacks rows like cards on the phone and rules them only from lg", () => {
+    render(
+      <TimelineHour time="21:00" layout="rows">
+        <p>a</p>
+        <p>b</p>
+      </TimelineHour>
+    );
+    const stack = screen.getByText("a").parentElement?.parentElement;
+    expect(stack).toHaveClass("gap-4", "lg:gap-0");
+    const rule = screen.getByText("b").previousElementSibling;
+    expect(rule).toHaveAttribute("data-orientation", "horizontal");
+    expect(rule).toHaveClass("hidden", "lg:block");
+  });
 });

package/src/components/timeline-hour.tsx

@@ -53,7 +53,8 @@ import { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from "./timeline-hour-
  *
  * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
  * hairline between two posters reads as a third object) and from `lg` lays
- * them on a two/three-up grid; `rows` rules between children on both widths.
+ * them on a two/three-up grid; `rows` is the same gapped stack on the phone
+ * (rows are full cards there) and rules between children from `lg`.
  * Children are read with `Children.toArray`, which drops `null`/`false`, so a
  * conditional first row never inherits a rule meant for a second; pass rows
  * as siblings, not inside a fragment.
@@ -92,6 +93,19 @@ export type TimelineHourProps = {
  *  half the fixed 16px heading row. */
 const HEADING_CENTRE_LG = "lg:top-[30px]";
 
+/** A stack that is cards on the phone (gapped, unruled) and rows from `lg`
+ *  (flush, ruled). Shared by `layout="rows"` and `overflow`. */
+const RULED_STACK = "gap-4 pb-2 lg:gap-0 lg:pb-0";
+
+function ruleFromLg(items: React.ReactNode[]) {
+  return items.map((child, index) => (
+    <div key={index}>
+      {index > 0 && <Separator className="hidden lg:block" />}
+      {child}
+    </div>
+  ));
+}
+
 export function TimelineHour({
   time,
   role = "hour",
@@ -188,30 +202,18 @@ export function TimelineHour({
       <div
         className={cn(
           "flex min-w-0 flex-col",
-          isCards && "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3",
+          isCards
+            ? "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3"
+            : RULED_STACK,
           isCards && isHero && "lg:flex lg:pt-0",
           isUnscheduled && isCards && "pt-3.5"
         )}
       >
-        {isCards
-          ? items
-          : items.map((child, index) => (
-              <div key={index}>
-                {index > 0 && <Separator />}
-                {child}
-              </div>
-            ))}
+        {isCards ? items : ruleFromLg(items)}
       </div>
 
       {overflowItems.length > 0 && (
-        <div className="flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2">
-          {overflowItems.map((child, index) => (
-            <div key={index}>
-              {index > 0 && <Separator className="hidden lg:block" />}
-              {child}
-            </div>
-          ))}
-        </div>
+        <div className={cn("flex flex-col lg:pt-2", RULED_STACK)}>{ruleFromLg(overflowItems)}</div>
       )}
 
       {note && <p className="pt-[9px] text-[11.5px] text-muted-foreground">{note}</p>}