@bearmenu/ui 0.8.48 → 0.8.50

package/dist/components/text.d.ts

@@ -22,9 +22,9 @@ 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;
-    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
+    variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
+    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/top-comparison.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopComparisonRow } from './top-types.js';
 import 'react';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 type TopComparisonLabels = {

package/dist/components/top-cross-link.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import 'react';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 type TopCrossLinkProps = {

package/dist/components/top-ranking-entry.d.ts

@@ -3,7 +3,7 @@ import { MenuItemLabels } from './menu-item.js';
 import { MenuItemPreview, MenuLinkComponent } from './menu-types.js';
 import { TopRankEntry } from './top-types.js';
 import 'react';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 type TopRankingEntryLabels = {

package/dist/components/top-ranking-hero.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopExit } from './top-types.js';
 import 'react';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 type TopRankingHeroProps = {

package/dist/components/top-types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { MenuItemPreview } from './menu-types.js';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-Dzy6FH67.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';
 

package/dist/components/venue-grade-dimensions.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as PlaceGradeDimensions } from '../place-types-C4rR3LTs.js';
+import { b as PlaceGradeDimensions } from '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-quotes.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CitedText } from '../place-types-C4rR3LTs.js';
+import { C as CitedText } from '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-wall.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import { P as PlacePreview } from '../place-types-C4rR3LTs.js';
+import { P as PlacePreview } from '../place-types-Dzy6FH67.js';
 import 'react';
 import '../lib/grade.js';
 

package/dist/{place-types-C4rR3LTs.d.ts → place-types-Dzy6FH67.d.ts}

@@ -123,6 +123,12 @@ type PlacePreview = {
      * bare storage key straight to `next/image`'s loader).
      */
     cover_url?: string;
+    /**
+     * Year and month the place launched (`YYYY-MM`), as the schema ships it.
+     * The backend approximates it from the earliest review it holds, so it is a
+     * floor rather than a founding date. `<PlaceCard>` shows the year only.
+     */
+    launched_at?: string;
 };
 type PlaceHourBlock = {
     opens_at: number;
@@ -248,6 +254,11 @@ type PlaceCardLabels = {
     viewDetails: (name: string) => string;
     /** Accessible name of the `$` price glyphs, e.g. "Price level 2 of 4". */
     priceLevel: (level: number) => string;
+    /**
+     * The launch year on the meta line, e.g. "Est. 2020" / "Din 2020". Optional:
+     * without it the card shows no year even when `launched_at` is set.
+     */
+    established?: (year: number) => string;
     grade: GradeAtomLabels;
 };
 /**
@@ -321,4 +332,4 @@ type PlaceDetailsMobileLabels = PlaceAboutTabLabels & {
     noImageAvailable: string;
 };
 
-export { type CitedText as C, GradeAtom as G, type MenuSizeAndPrice as M, type PlacePreview as P, type WeekdayKey as W, type PlaceGradeDimensions as a, type PlaceAboutTabLabels as b, type PlaceLinkKind as c, type PlaceCardLabels as d, type PlaceDetailsMobileLabels as e, type PlaceSchedule as f, type PlaceScheduleWeekLabels as g, type GradeAtomLabels as h, type GradeAtomProps as i, type GradeAtomSize as j, type CitedValue as k, type PlaceGrade as l, type PlaceHourBlock as m, type PlaceMustTry as n, type PlacePriceRange as o, type PlaceReviewsDigest as p };
+export { type CitedText as C, type GradeAtomLabels as G, type MenuSizeAndPrice as M, type PlacePreview as P, type WeekdayKey as W, type PlaceGrade as a, type PlaceGradeDimensions as b, type PlaceAboutTabLabels as c, type PlaceLinkKind as d, type PlaceCardLabels as e, type PlaceDetailsMobileLabels as f, type PlaceSchedule as g, type PlaceScheduleWeekLabels as h, GradeAtom as i, type GradeAtomProps as j, type GradeAtomSize as k, type CitedValue as l, type PlaceHourBlock as m, type PlaceMustTry as n, type PlacePriceRange as o, type PlaceReviewsDigest as p };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.48",
+  "version": "0.8.50",
+  "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -16,20 +17,223 @@
     "src"
   ],
   "exports": {
+    "./components/accordion": "./src/components/accordion.tsx",
+    "./components/action-bar": "./src/components/action-bar.tsx",
+    "./components/activity-row": "./src/components/activity-row.tsx",
+    "./components/alert": "./src/components/alert.tsx",
+    "./components/alert-dialog": "./src/components/alert-dialog.tsx",
+    "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
+    "./components/avatar": "./src/components/avatar.tsx",
+    "./components/badge": "./src/components/badge.tsx",
+    "./components/banner": "./src/components/banner.tsx",
+    "./components/booking-row": "./src/components/booking-row.tsx",
+    "./components/booking-summary-card": "./src/components/booking-summary-card.tsx",
+    "./components/breadcrumb": "./src/components/breadcrumb.tsx",
+    "./components/button": "./src/components/button.tsx",
+    "./components/button-group": "./src/components/button-group.tsx",
+    "./components/calendar": "./src/components/calendar.tsx",
+    "./components/card": "./src/components/card.tsx",
+    "./components/carousel": "./src/components/carousel.tsx",
+    "./components/category-deck": "./src/components/category-deck.tsx",
+    "./components/checkbox": "./src/components/checkbox.tsx",
+    "./components/circular-progress": "./src/components/circular-progress.tsx",
+    "./components/coach-marks": "./src/components/coach-marks.tsx",
+    "./components/collapsible": "./src/components/collapsible.tsx",
+    "./components/combobox": "./src/components/combobox.tsx",
+    "./components/command": "./src/components/command.tsx",
+    "./components/concept-card": "./src/components/concept-card.tsx",
+    "./components/concept-compare": "./src/components/concept-compare.tsx",
+    "./components/concept-compare-rail": "./src/components/concept-compare-rail.tsx",
+    "./components/concept-convergence": "./src/components/concept-convergence.tsx",
+    "./components/convergence": "./src/components/convergence.tsx",
+    "./components/coverflow": "./src/components/coverflow.tsx",
+    "./components/currency-input": "./src/components/currency-input.tsx",
+    "./components/date-input": "./src/components/date-input.tsx",
+    "./components/day-rail-chip": "./src/components/day-rail-chip.tsx",
+    "./components/description-list": "./src/components/description-list.tsx",
+    "./components/dialog": "./src/components/dialog.tsx",
+    "./components/doorway-tiles": "./src/components/doorway-tiles.tsx",
+    "./components/drawer": "./src/components/drawer.tsx",
+    "./components/drift-rail": "./src/components/drift-rail.tsx",
+    "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
+    "./components/empty-state": "./src/components/empty-state.tsx",
+    "./components/event-card": "./src/components/event-card.tsx",
+    "./components/event-compact-row": "./src/components/event-compact-row.tsx",
+    "./components/event-day-header": "./src/components/event-day-header.tsx",
+    "./components/event-day-separator": "./src/components/event-day-separator.tsx",
+    "./components/event-detail-panel": "./src/components/event-detail-panel.tsx",
+    "./components/event-hub-hero": "./src/components/event-hub-hero.tsx",
+    "./components/event-index-row": "./src/components/event-index-row.tsx",
+    "./components/event-list-row": "./src/components/event-list-row.tsx",
+    "./components/event-list-row-wide": "./src/components/event-list-row-wide.tsx",
+    "./components/event-poster-fallback": "./src/components/event-poster-fallback.tsx",
+    "./components/event-tonight-strip": "./src/components/event-tonight-strip.tsx",
+    "./components/event-types": "./src/components/event-types.ts",
+    "./components/events-empty-state": "./src/components/events-empty-state.tsx",
+    "./components/explainer-steps": "./src/components/explainer-steps.tsx",
+    "./components/facet-group": "./src/components/facet-group.tsx",
+    "./components/featured-rail-item": "./src/components/featured-rail-item.tsx",
+    "./components/field": "./src/components/field.tsx",
+    "./components/filter-category-row": "./src/components/filter-category-row.tsx",
+    "./components/form": "./src/components/form.tsx",
+    "./components/glass-ground": "./src/components/glass-ground.tsx",
+    "./components/grade-atom": "./src/components/grade-atom.tsx",
+    "./components/haptic-switch": "./src/components/haptic-switch.tsx",
+    "./components/hold-countdown": "./src/components/hold-countdown.tsx",
+    "./components/hub-surface": "./src/components/hub-surface.tsx",
+    "./components/hue-chip": "./src/components/hue-chip.tsx",
+    "./components/icon": "./src/components/icon.tsx",
+    "./components/input": "./src/components/input.tsx",
+    "./components/input-group": "./src/components/input-group.tsx",
+    "./components/input-otp": "./src/components/input-otp.tsx",
+    "./components/item": "./src/components/item.tsx",
+    "./components/kbd": "./src/components/kbd.tsx",
+    "./components/label": "./src/components/label.tsx",
+    "./components/kitchen-dossier": "./src/components/kitchen-dossier.tsx",
+    "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
+    "./components/link-button": "./src/components/link-button.tsx",
+    "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
+    "./components/menu-dead-end": "./src/components/menu-dead-end.tsx",
+    "./components/menu-family-block": "./src/components/menu-family-block.tsx",
+    "./components/menu-family-card": "./src/components/menu-family-card.tsx",
+    "./components/menu-field": "./src/components/menu-field.tsx",
+    "./components/menu-filter-chips": "./src/components/menu-filter-chips.tsx",
+    "./components/menu-group-rows": "./src/components/menu-group-rows.tsx",
+    "./components/menu-hub-hero": "./src/components/menu-hub-hero.tsx",
+    "./components/menu-index-header": "./src/components/menu-index-header.tsx",
+    "./components/menu-index-list": "./src/components/menu-index-list.tsx",
+    "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
+    "./components/menu-item": "./src/components/menu-item.tsx",
+    "./components/menu-pick-row": "./src/components/menu-pick-row.tsx",
+    "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
+    "./components/menu-mocks": "./src/components/menu-mocks.ts",
+    "./components/menu-types": "./src/components/menu-types.ts",
+    "./components/motion-icon": "./src/components/motion-icon.tsx",
+    "./components/motion-icon-actions": "./src/components/motion-icon-actions.tsx",
+    "./components/motion-icon-controls": "./src/components/motion-icon-controls.tsx",
+    "./components/motion-icon-set": "./src/components/motion-icon-set.tsx",
+    "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
+    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
+    "./components/native-select": "./src/components/native-select.tsx",
+    "./components/open-now-list": "./src/components/open-now-list.tsx",
+    "./components/pagination": "./src/components/pagination.tsx",
+    "./components/pan-zoom-viewport": "./src/components/pan-zoom-viewport.tsx",
+    "./components/party-counter": "./src/components/party-counter.tsx",
+    "./components/phone-frame": "./src/components/phone-frame.tsx",
+    "./components/photo-ground": "./src/components/photo-ground.tsx",
+    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
+    "./components/place-card": "./src/components/place-card.tsx",
+    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
+    "./components/place-schedule-week": "./src/components/place-schedule-week.tsx",
+    "./components/place-types": "./src/components/place-types.ts",
+    "./components/popover": "./src/components/popover.tsx",
+    "./components/poster-stack": "./src/components/poster-stack.tsx",
+    "./components/poster-tape": "./src/components/poster-tape.tsx",
+    "./components/poster-wall": "./src/components/poster-wall.tsx",
+    "./components/progress": "./src/components/progress.tsx",
+    "./components/qa-block": "./src/components/qa-block.tsx",
+    "./components/qr-panel": "./src/components/qr-panel.tsx",
+    "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
+    "./components/radio-group": "./src/components/radio-group.tsx",
+    "./components/reconcile-bar": "./src/components/reconcile-bar.tsx",
+    "./components/responsive-overlay": "./src/components/responsive-overlay.tsx",
+    "./components/rating": "./src/components/rating.tsx",
+    "./components/scroll-area": "./src/components/scroll-area.tsx",
+    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
+    "./components/search-bar": "./src/components/search-bar.tsx",
+    "./components/searchable-select": "./src/components/searchable-select.tsx",
+    "./components/section-header": "./src/components/section-header.tsx",
+    "./components/segmented-nav": "./src/components/segmented-nav.tsx",
+    "./components/select": "./src/components/select.tsx",
+    "./components/selection-bar": "./src/components/selection-bar.tsx",
+    "./components/separator": "./src/components/separator.tsx",
+    "./components/sheet": "./src/components/sheet.tsx",
+    "./components/signature-chip": "./src/components/signature-chip.tsx",
+    "./components/skeleton": "./src/components/skeleton.tsx",
+    "./components/skeleton-card": "./src/components/skeleton-card.tsx",
+    "./components/slider": "./src/components/slider.tsx",
+    "./components/sliding-panels": "./src/components/sliding-panels.tsx",
+    "./components/sonner": "./src/components/sonner.tsx",
+    "./components/sort-option-list": "./src/components/sort-option-list.tsx",
+    "./components/spinner": "./src/components/spinner.tsx",
+    "./components/split-share-row": "./src/components/split-share-row.tsx",
+    "./components/stat-banner": "./src/components/stat-banner.tsx",
+    "./components/stepper": "./src/components/stepper.tsx",
+    "./components/sticky-container": "./src/components/sticky-container.tsx",
+    "./components/story": "./src/components/story.tsx",
+    "./components/switch": "./src/components/switch.tsx",
+    "./components/table": "./src/components/table.tsx",
+    "./components/table-ledger-card": "./src/components/table-ledger-card.tsx",
+    "./components/table-trigger-band": "./src/components/table-trigger-band.tsx",
+    "./components/tabs": "./src/components/tabs.tsx",
+    "./components/tag": "./src/components/tag.tsx",
+    "./components/tag-group": "./src/components/tag-group.tsx",
+    "./components/text": "./src/components/text.tsx",
+    "./components/textarea": "./src/components/textarea.tsx",
+    "./components/time-slot": "./src/components/time-slot.tsx",
+    "./components/timeline-day": "./src/components/timeline-day.tsx",
+    "./components/timeline-hour": "./src/components/timeline-hour.tsx",
+    "./components/timeline-hour-puck": "./src/components/timeline-hour-puck.tsx",
+    "./components/toggle": "./src/components/toggle.tsx",
+    "./components/toggle-group": "./src/components/toggle-group.tsx",
+    "./components/tooltip": "./src/components/tooltip.tsx",
+    "./components/top-comparison": "./src/components/top-comparison.tsx",
+    "./components/top-cross-link": "./src/components/top-cross-link.tsx",
+    "./components/top-ranking-entry": "./src/components/top-ranking-entry.tsx",
+    "./components/top-ranking-hero": "./src/components/top-ranking-hero.tsx",
+    "./components/top-ranking-legend": "./src/components/top-ranking-legend.tsx",
+    "./components/top-types": "./src/components/top-types.ts",
+    "./components/use-mobile": "./src/components/use-mobile.tsx",
+    "./components/venue-events-block": "./src/components/venue-events-block.tsx",
+    "./components/venue-grade-dimensions": "./src/components/venue-grade-dimensions.tsx",
+    "./components/venue-quotes": "./src/components/venue-quotes.tsx",
+    "./components/venue-wall": "./src/components/venue-wall.tsx",
+    "./components/weekday-chip": "./src/components/weekday-chip.tsx",
+    "./components/weekday-theme-banner": "./src/components/weekday-theme-banner.tsx",
+    "./components/weekend-panel": "./src/components/weekend-panel.tsx",
     "./globals.css": "./src/globals.css",
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
-    },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
+    "./hooks/use-drag-swipe": "./src/hooks/use-drag-swipe.ts",
+    "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
+    "./hooks/use-media-query": "./src/hooks/use-media-query.ts",
+    "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
+    "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
+    "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
+    "./lib/card-hover": "./src/lib/card-hover.ts",
+    "./lib/grade": "./src/lib/grade.ts",
+    "./lib/icon-depth": "./src/lib/icon-depth.ts",
+    "./lib/icon-registry": "./src/lib/icon-registry.ts",
+    "./lib/motion": "./src/lib/motion.ts",
+    "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
+    "./lib/utils": "./src/lib/utils.ts"
+  },
+  "publishConfig": {
+    "exports": {
+      "./globals.css": "./src/globals.css",
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      },
+      "./hooks/*": {
+        "types": "./dist/hooks/*.d.ts",
+        "import": "./dist/hooks/*.js"
+      },
+      "./lib/*": {
+        "types": "./dist/lib/*.d.ts",
+        "import": "./dist/lib/*.js"
+      }
     }
   },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run build"
+  },
   "peerDependencies": {
     "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
@@ -138,15 +342,5 @@
     "vaul": "^1.1.2",
     "vitest": "^4.1.5",
     "zod": "^3.25.67"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist"
   }
-}
+}

package/src/components/event-detail-panel.test.tsx

@@ -84,6 +84,41 @@ describe("EventDetailPanel", () => {
     expect(screen.getByText(labels.venueNoPage)).toBeInTheDocument();
   });
 
+  it("shows the venue's BearMenu grade instead of the Google star when given", () => {
+    const venue = {
+      name: "Sophie",
+      address: "Str. 5",
+      ratingLabel: "4.7",
+      href: "/places/sophie",
+      grade: { overall: 8.7, show_number: true },
+    };
+    const gradeLabels = {
+      soft: "Few reviews",
+      bands: {
+        exceptional: "Exceptional",
+        great: "Great",
+        good: "Good",
+        decent: "Decent",
+        weak: "Weak",
+      },
+      aria: (value: string) => `Grade ${value}`,
+      capped: "Capped",
+    };
+    const { container, rerender } = render(
+      <EventDetailPanel
+        {...base}
+        labels={{ ...labels, grade: gradeLabels }}
+        venue={venue}
+      />,
+    );
+    expect(container.textContent).toMatch(/8[.,]7/);
+    expect(container.textContent).not.toContain("4.7");
+
+    // No grade labels: exactly the old card.
+    rerender(<EventDetailPanel {...base} venue={venue} />);
+    expect(container.textContent).toContain("4.7");
+  });
+
   it("previews five performers and reveals the rest on request", () => {
     const performers = ["A", "B", "C", "D", "E", "F", "G"];
     render(

package/src/components/event-detail-panel.tsx

@@ -14,7 +14,10 @@ import {
   Unplug,
   User,
 } from "lucide-react";
+import { showsGradeAtom } from "../lib/grade";
 import { cn } from "../lib/utils";
+import { GradeAtom, type GradeAtomLabels } from "./grade-atom";
+import type { PlaceGrade } from "./place-types";
 import { Button } from "./button";
 import { EventPosterFallback } from "./event-poster-fallback";
 import { Separator } from "./separator";
@@ -81,7 +84,13 @@ export type EventDetailVenue = {
   name: string;
   /** Address line, e.g. "Str. Iuliu Maniu 5". */
   address?: string;
-  /** e.g. "4.7" — rendered with a star. */
+  /**
+   * The venue's BearMenu grade. Shown as the grade pill in the rating's place
+   * when `labels.grade` is given; the star `ratingLabel` then stays only for a
+   * venue without a grade.
+   */
+  grade?: PlaceGrade;
+  /** e.g. "4.7" — Google's rating, rendered with a star. The fallback for an ungraded venue. */
   ratingLabel?: string;
   /** e.g. "open until 20:00" — appended to the meta row when given. */
   openLabel?: string;
@@ -97,6 +106,8 @@ export type EventDetailVenue = {
 };
 
 export type EventDetailPanelLabels = {
+  /** The venue's grade pill. Optional: without it the venue shows the star, as before. */
+  grade?: GradeAtomLabels;
   free: string;
   liveNow: string;
   /** The ended chip, e.g. "Ended". */
@@ -752,7 +763,7 @@ export function EventDetailChipRow({
 
 export type EventDetailVenueCardProps = {
   venue: EventDetailVenue;
-  labels: Pick<EventDetailPanelLabels, "venueNoPage">;
+  labels: Pick<EventDetailPanelLabels, "venueNoPage" | "grade">;
   linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
   /** Thumbnail size in px: 52 in the sheet, 64 on the page. */
   thumbnailSize?: 52 | 64;
@@ -774,8 +785,10 @@ export function EventDetailVenueCard({
   action,
   className,
 }: EventDetailVenueCardProps) {
-  const meta =
-    venue.href && (venue.address || venue.ratingLabel || venue.openLabel);
+  const showGrade =
+    labels.grade !== undefined && showsGradeAtom(venue.grade, "xs");
+  const hasRating = showGrade || Boolean(venue.ratingLabel);
+  const meta = venue.href && (venue.address || hasRating || venue.openLabel);
   // The main area (thumb, name, meta, chevron) is the link; `action` sits
   // BESIDE it, never inside — an anchor cannot contain another control, and a
   // page's "Open in Maps" must not navigate to the venue instead.
@@ -816,16 +829,25 @@ export function EventDetailVenueCard({
               {venue.address && (
                 <span className="truncate">{venue.address}</span>
               )}
-              {venue.address && venue.ratingLabel && (
+              {venue.address && hasRating && (
                 <span aria-hidden className="text-border">
                   ·
                 </span>
               )}
-              {venue.ratingLabel && (
-                <span className="inline-flex shrink-0 items-center gap-1">
-                  <Star className="h-[11px] w-[11px]" aria-hidden />
-                  {venue.ratingLabel}
-                </span>
+              {showGrade && labels.grade && venue.grade ? (
+                <GradeAtom
+                  grade={venue.grade}
+                  labels={labels.grade}
+                  size="xs"
+                  className="shrink-0"
+                />
+              ) : (
+                venue.ratingLabel && (
+                  <span className="inline-flex shrink-0 items-center gap-1">
+                    <Star className="h-[11px] w-[11px]" aria-hidden />
+                    {venue.ratingLabel}
+                  </span>
+                )
               )}
               {venue.openLabel && (
                 <>

package/src/components/menu-kitchen-list.test.tsx

@@ -24,6 +24,45 @@ const kitchen: MenuKitchenPreview = {
   },
 };
 
+const gradeLabels = {
+  soft: "Few reviews",
+  bands: { exceptional: "Exceptional", great: "Great", good: "Good", decent: "Decent", weak: "Weak" },
+  aria: (value: string) => `Grade ${value}`,
+  capped: "Capped",
+};
+
+describe("MenuKitchenList rating", () => {
+  const graded = {
+    ...kitchen,
+    place: {
+      ...kitchen.place,
+      rating: { rating: 4.8, count: 900 },
+      reviews_digest: { grade: { overall: 8.7, show_number: true } },
+    },
+  } as MenuKitchenPreview;
+
+  it("shows the BearMenu grade instead of the Google star when the venue has one", () => {
+    const { container } = render(
+      <MenuKitchenList kitchens={[graded]} labels={{ ...labels, grade: gradeLabels }} />
+    );
+    expect(container.textContent).toMatch(/8[.,]7/);
+    expect(container.textContent).not.toContain("4.8");
+  });
+
+  it("keeps the star for a venue with no grade", () => {
+    const ungraded = { ...graded, place: { ...graded.place, reviews_digest: undefined } };
+    const { container } = render(
+      <MenuKitchenList kitchens={[ungraded]} labels={{ ...labels, grade: gradeLabels }} />
+    );
+    expect(container.textContent).toContain("4.8");
+  });
+
+  it("keeps the star for callers that pass no grade labels", () => {
+    const { container } = render(<MenuKitchenList kitchens={[graded]} labels={labels} />);
+    expect(container.textContent).toContain("4.8");
+  });
+});
+
 describe("MenuKitchenList", () => {
   /**
    * The reason this component exists rather than a flag on `RankedVenueList`.

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

@@ -1,5 +1,7 @@
 import { Check, ChevronRight, Clock, MessageSquare, Star } from "lucide-react";
+import { showsGradeAtom } from "../lib/grade";
 import { cn } from "../lib/utils";
+import { GradeAtom, type GradeAtomLabels } from "./grade-atom";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import type { MenuKitchenPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
@@ -59,6 +61,13 @@ export type MenuKitchenListLabels = {
   openNow: string;
   /** Reveals the next page of rows, e.g. "Show 10 more". */
   showMore?: string;
+  /**
+   * The grade pill's labels. With them, a graded venue shows its BearMenu
+   * grade where the Google star was; the star stays only for a venue with no
+   * grade. Optional so existing callers keep compiling — without it every row
+   * shows the star, as before.
+   */
+  grade?: GradeAtomLabels;
 };
 
 /**
@@ -127,6 +136,31 @@ export function MenuKitchenList({
   );
 }
 
+function gradeShown(place: MenuKitchenPreview["place"], labels: MenuKitchenListLabels) {
+  return labels.grade !== undefined && showsGradeAtom(place.reviews_digest?.grade, "xs");
+}
+
+/** BearMenu's grade when the venue has one; Google's star only without it. */
+function KitchenRating({
+  place,
+  labels,
+}: {
+  place: MenuKitchenPreview["place"];
+  labels: MenuKitchenListLabels;
+}) {
+  const grade = place.reviews_digest?.grade;
+  if (labels.grade && showsGradeAtom(grade, "xs")) {
+    return <GradeAtom grade={grade} labels={labels.grade} size="xs" className="shrink-0" />;
+  }
+  if (!place.rating) return null;
+  return (
+    <>
+      <Star className="h-[11px] w-[11px] shrink-0" aria-hidden />
+      {place.rating.rating}
+    </>
+  );
+}
+
 function KitchenRow({
   kitchen,
   labels,
@@ -189,13 +223,8 @@ function KitchenRow({
           {place.name}
         </span>
         <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">
-          {place.rating && (
-            <>
-              <Star className="h-[11px] w-[11px] shrink-0" aria-hidden />
-              {place.rating.rating}
-              {kitchen.metaLabel && " · "}
-            </>
-          )}
+          <KitchenRating place={place} labels={labels} />
+          {kitchen.metaLabel && (gradeShown(place, labels) || place.rating) && " · "}
           {kitchen.metaLabel}
         </span>
         {kitchen.hoursLabel && (