@bearmenu/ui 0.8.54 → 0.8.56

package/dist/{chunk-CZ2HC7WY.js → chunk-EGN5DOLQ.js}

@@ -1,5 +1,5 @@
-import { GradeAtom } from './chunk-YE4ZQUTI.js';
-import { showsGradeAtom } from './chunk-I5V446BX.js';
+import { GradeAtom } from './chunk-QOXXIYDG.js';
+import { showsGradeAtom } from './chunk-TDTLEDX6.js';
 import { Separator } from './chunk-NWZGSLPU.js';
 import { Skeleton } from './chunk-XBBEX4SF.js';
 import { cn } from './chunk-FEK5XGZW.js';

package/dist/{chunk-YE4ZQUTI.js → chunk-QOXXIYDG.js}

@@ -1,4 +1,4 @@
-import { shouldShowGradeNumber, resolveGradeBand, formatGrade } from './chunk-I5V446BX.js';
+import { shouldShowGradeNumber, resolveGradeBand, formatGrade } from './chunk-TDTLEDX6.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { Info, ShieldAlert } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -22,6 +22,18 @@ var BAND_CLASSES_PHOTO = {
   weak: { ring: "ring-rose-400/70", num: "text-rose-200" }
 };
 var SIZE = {
+  // Inline in a line of text (a menu row's name or venue line): 18px fits a
+  // 15px name and a 12px venue line without making either taller, which the
+  // 24px xs did (Adrian, 2026-11-09). Number only, like xs.
+  "2xs": {
+    box: "h-[18px] px-1 rounded",
+    minW: "min-w-7",
+    num: "text-2xs",
+    desc: "text-2xs",
+    gap: "gap-0.5",
+    shield: "h-2.5 w-2.5",
+    showDesc: false
+  },
   xs: {
     box: "h-6 px-1.5 rounded-md",
     minW: "min-w-9",
@@ -73,7 +85,7 @@ function GradeAtom({
   const sz = SIZE[size];
   const infoGlyph = showInfo ? /* @__PURE__ */ jsx(Info, { className: cn("shrink-0 opacity-70", sz.shield), "aria-hidden": true }) : null;
   if (!shouldShowGradeNumber(grade)) {
-    if (size === "xs") return null;
+    if (size === "xs" || size === "2xs") return null;
     return /* @__PURE__ */ jsxs(
       "span",
       {

package/dist/{chunk-I5V446BX.js → chunk-TDTLEDX6.js}

@@ -16,7 +16,7 @@ function shouldShowGradeNumber(grade) {
 }
 function showsGradeAtom(grade, size) {
   if ((grade == null ? void 0 : grade.overall) == null) return false;
-  return size !== "xs" || shouldShowGradeNumber(grade);
+  return size !== "xs" && size !== "2xs" || shouldShowGradeNumber(grade);
 }
 function resolveDimensionTone(score) {
   if (score >= 75) return "strong";

package/dist/{chunk-6Z6MBILC.js → chunk-WBTSOARU.js}

@@ -1,9 +1,11 @@
 import { SignatureChip } from './chunk-6PQINSAA.js';
+import { GradeAtom } from './chunk-QOXXIYDG.js';
+import { showsGradeAtom } from './chunk-TDTLEDX6.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';
 import { Star, ThumbsUp, MessageSquareQuote } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
   var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
@@ -78,10 +80,15 @@ var MenuItem = memo(function MenuItem2({
   onSignatureEvidence,
   onMentions,
   countKind = "mentions",
+  emphasis = "price",
   externalRating,
   formatRating = (score) => score.toFixed(1),
   markGradient,
   venueName,
+  venueStatus,
+  venueDetail,
+  venueGrade,
+  nameGrade,
   subtitle,
   href,
   linkLabel,
@@ -183,6 +190,16 @@ var MenuItem = memo(function MenuItem2({
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
             /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold leading-snug text-foreground", children: item.name }),
+            nameGrade && showsGradeAtom(nameGrade.grade, "2xs") && /* @__PURE__ */ jsx(
+              GradeAtom,
+              {
+                grade: nameGrade.grade,
+                labels: nameGrade.labels,
+                size: "2xs",
+                hideDescriptor: true,
+                className: "shrink-0 self-center"
+              }
+            ),
             showSignatureBadge && /* @__PURE__ */ jsx(
               SignatureChip,
               {
@@ -192,7 +209,44 @@ var MenuItem = memo(function MenuItem2({
               }
             )
           ] }),
-          venueName && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-[12px] font-medium text-foreground/70", children: venueName }),
+          venueName && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 flex min-w-0 items-center gap-1.5 text-[12px]", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-semibold text-foreground", children: venueName }),
+            venueGrade && showsGradeAtom(venueGrade.grade, "2xs") && /* @__PURE__ */ jsx(
+              GradeAtom,
+              {
+                grade: venueGrade.grade,
+                labels: venueGrade.labels,
+                size: "2xs",
+                hideDescriptor: true,
+                className: "shrink-0"
+              }
+            ),
+            venueDetail && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\xB7" }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: venueDetail })
+            ] }),
+            venueStatus && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-slot": "venue-status",
+                "data-tone": venueStatus.tone,
+                className: "inline-flex shrink-0 items-center gap-1 font-normal text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "size-1.5 shrink-0 rounded-full",
+                        venueStatus.tone === "open" ? "bg-success" : "bg-muted-foreground"
+                      )
+                    }
+                  ),
+                  venueStatus.label
+                ]
+              }
+            )
+          ] }),
           subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs italic leading-snug text-muted-foreground", children: subtitle }) : item.description && /* @__PURE__ */ jsx(
             "p",
             {
@@ -206,7 +260,16 @@ var MenuItem = memo(function MenuItem2({
           (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) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "tabular-nums",
+                      emphasis === "praise" ? "text-[13px] font-medium text-muted-foreground" : "text-[15px] font-bold text-foreground"
+                    ),
+                    children: isPriceRange ? `${formatPrice(minPrice)}\u2013${formatPrice(maxPrice)}` : formatPrice(minPrice)
+                  }
+                ),
                 /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: labels.currency })
               ] }),
               hasQuantity && /* @__PURE__ */ jsxs("span", { className: "text-[12px] tabular-nums text-muted-foreground", children: [

package/dist/components/concept-compare.d.ts

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

package/dist/components/doorway-tiles.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-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/event-detail-panel.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { G as GradeAtomLabels, a as PlaceGrade } from '../place-types-Dzy6FH67.js';
+import { G as GradeAtomLabels, a as PlaceGrade } from '../place-types-CjB4JlH0.js';
 import { EventPreview, EventFormatters } from './event-types.js';
 import '../lib/grade.js';
 

package/dist/components/event-detail-panel.js

@@ -1,5 +1,5 @@
-import { GradeAtom } from '../chunk-YE4ZQUTI.js';
-import { showsGradeAtom } from '../chunk-I5V446BX.js';
+import { GradeAtom } from '../chunk-QOXXIYDG.js';
+import { showsGradeAtom } from '../chunk-TDTLEDX6.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';

package/dist/components/grade-atom.d.ts

@@ -1,3 +1,3 @@
 import 'react/jsx-runtime';
 import '../lib/grade.js';
-export { i as GradeAtom, G as GradeAtomLabels, j as GradeAtomProps, k as GradeAtomSize } from '../place-types-Dzy6FH67.js';
+export { i as GradeAtom, G as GradeAtomLabels, j as GradeAtomProps, k as GradeAtomSize } from '../place-types-CjB4JlH0.js';

package/dist/components/grade-atom.js

@@ -1,4 +1,4 @@
-export { GradeAtom } from '../chunk-YE4ZQUTI.js';
-import '../chunk-I5V446BX.js';
+export { GradeAtom } from '../chunk-QOXXIYDG.js';
+import '../chunk-TDTLEDX6.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/kitchen-dossier.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { MenuVenueSignature, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import { P as PlacePreview, C as CitedText, b as PlaceGradeDimensions } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, C as CitedText, b as PlaceGradeDimensions } from '../place-types-CjB4JlH0.js';
 import { VenueGradeDimensionKey } from './venue-grade-dimensions.js';
 import '../lib/grade.js';
 

package/dist/components/menu-dead-end.d.ts

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

package/dist/components/menu-family-block.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuKitchenListLabels } from './menu-kitchen-list.js';
 import { MenuFamilyBlockPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 import 'react';
 

package/dist/components/menu-family-block.js

@@ -1,7 +1,7 @@
-import { MenuKitchenList } from '../chunk-CZ2HC7WY.js';
+import { MenuKitchenList } from '../chunk-EGN5DOLQ.js';
 import { HueChip } from '../chunk-6VOWT4YR.js';
-import '../chunk-YE4ZQUTI.js';
-import '../chunk-I5V446BX.js';
+import '../chunk-QOXXIYDG.js';
+import '../chunk-TDTLEDX6.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-SWD6CJ35.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/dist/components/menu-family-card.d.ts

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

package/dist/components/menu-filter-chips.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuFilterChip } from './menu-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/menu-group-rows.d.ts

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

package/dist/components/menu-index-header.d.ts

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

package/dist/components/menu-index-list.d.ts

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

package/dist/components/menu-intent-hero.d.ts

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

package/dist/components/menu-item.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as PlaceGrade, G as GradeAtomLabels } from '../place-types-CjB4JlH0.js';
 import { MenuItemPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import '../place-types-Dzy6FH67.js';
 import '../lib/grade.js';
 
 /**
@@ -103,6 +103,14 @@ type MenuItemProps = {
      * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
      */
     countKind?: MenuItemCountKind;
+    /**
+     * What the meta row leads with. `"price"` (default): the price is bold, the
+     * count's peer at the other end. `"praise"`: on surfaces where reviews'
+     * praise is the point (the map's lists), the price steps down to secondary
+     * text, a fact to check rather than the row's headline, and the praise count
+     * keeps the bold accent.
+     */
+    emphasis?: "price" | "praise";
     /**
      * 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.
@@ -126,6 +134,39 @@ type MenuItemProps = {
      * default.
      */
     venueName?: string;
+    /**
+     * Whether the venue is open, on the venue line after its name: a dot
+     * (`open` in the success green, `closed` muted) and the caller's words, e.g.
+     * "Closes at 23:00" / "Opens at 09:00". Only with `venueName`.
+     */
+    venueStatus?: {
+        tone: "open" | "closed";
+        label: string;
+    };
+    /**
+     * A short detail about the venue, muted after its name and grade: its
+     * neighbourhood, say. Only with `venueName`.
+     */
+    venueDetail?: string;
+    /**
+     * The venue's grade, drawn as `<GradeAtom size="2xs">` (inline, 18px) beside its name. Only
+     * a grade with a number shows: the xs atom draws nothing for the soft
+     * "worth exploring" state (see `showsGradeAtom`).
+     */
+    venueGrade?: {
+        grade: PlaceGrade;
+        labels: GradeAtomLabels;
+    };
+    /**
+     * A grade beside the row's NAME, for rows where the name is the place (the
+     * map's Drinks list leads with the bar, and its venue line says what the
+     * bar is praised for). Use it instead of `venueGrade` there, so the grade
+     * never sits beside "Praised for cocktails". Same rule: only with a number.
+     */
+    nameGrade?: {
+        grade: PlaceGrade;
+        labels: GradeAtomLabels;
+    };
     /**
      * Explicit subtitle, in italic, in place of the description. Used where the
      * reviewer's reason IS the row's content rather than the payoff for tapping.

package/dist/components/menu-item.js

@@ -1,5 +1,7 @@
-export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-6Z6MBILC.js';
+export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-WBTSOARU.js';
 import '../chunk-6PQINSAA.js';
+import '../chunk-QOXXIYDG.js';
+import '../chunk-TDTLEDX6.js';
 import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/menu-kitchen-list.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { G as GradeAtomLabels } from '../place-types-Dzy6FH67.js';
+import { G as GradeAtomLabels } from '../place-types-CjB4JlH0.js';
 import { MenuKitchenPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
 import '../lib/grade.js';
 import 'react';

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

@@ -1,6 +1,6 @@
-export { MenuKitchenList, MenuKitchenListSkeleton } from '../chunk-CZ2HC7WY.js';
-import '../chunk-YE4ZQUTI.js';
-import '../chunk-I5V446BX.js';
+export { MenuKitchenList, MenuKitchenListSkeleton } from '../chunk-EGN5DOLQ.js';
+import '../chunk-QOXXIYDG.js';
+import '../chunk-TDTLEDX6.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/menu-mocks.d.ts

@@ -1,6 +1,6 @@
 import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
 import { DoorwayTile } from './doorway-tiles.js';
-import { P as PlacePreview } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview } from '../place-types-CjB4JlH0.js';
 import 'react';
 import 'react/jsx-runtime';
 import '../lib/grade.js';

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

@@ -1,5 +1,5 @@
 import { ComponentType, CSSProperties, ReactNode } from 'react';
-import { M as MenuSizeAndPrice, P as PlacePreview } from '../place-types-Dzy6FH67.js';
+import { M as MenuSizeAndPrice, P as PlacePreview } from '../place-types-CjB4JlH0.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';
 

package/dist/components/open-now-list.d.ts

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

package/dist/components/place-about-tab.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PlacePreview, c as PlaceAboutTabLabels, d as PlaceLinkKind } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, c as PlaceAboutTabLabels, d as PlaceLinkKind } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 interface PlaceAboutTabProps {

package/dist/components/place-card.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, MouseEvent } from 'react';
-import { P as PlacePreview, e as PlaceCardLabels } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, e as PlaceCardLabels } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/place-card.js

@@ -1,8 +1,8 @@
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
-import { GradeAtom } from '../chunk-YE4ZQUTI.js';
-import { showsGradeAtom } from '../chunk-I5V446BX.js';
+import { GradeAtom } from '../chunk-QOXXIYDG.js';
+import { showsGradeAtom } from '../chunk-TDTLEDX6.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/dist/components/place-details-mobile.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PlacePreview, f as PlaceDetailsMobileLabels } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, f as PlaceDetailsMobileLabels } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 interface PlaceDetailsMobileProps {

package/dist/components/place-schedule-week.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { g as PlaceSchedule, h as PlaceScheduleWeekLabels } from '../place-types-Dzy6FH67.js';
+import { g as PlaceSchedule, h as PlaceScheduleWeekLabels } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 interface PlaceScheduleWeekProps {

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

@@ -1,3 +1,3 @@
-export { C as CitedText, l as CitedValue, M as MenuSizeAndPrice, c as PlaceAboutTabLabels, e as PlaceCardLabels, f as PlaceDetailsMobileLabels, a as PlaceGrade, b as PlaceGradeDimensions, m as PlaceHourBlock, d as PlaceLinkKind, n as PlaceMustTry, P as PlacePreview, o as PlacePriceRange, p as PlaceReviewsDigest, g as PlaceSchedule, h as PlaceScheduleWeekLabels, W as WeekdayKey } from '../place-types-Dzy6FH67.js';
+export { C as CitedText, l as CitedValue, M as MenuSizeAndPrice, c as PlaceAboutTabLabels, e as PlaceCardLabels, f as PlaceDetailsMobileLabels, a as PlaceGrade, b as PlaceGradeDimensions, m as PlaceHourBlock, d as PlaceLinkKind, n as PlaceMustTry, P as PlacePreview, o as PlacePriceRange, p as PlaceReviewsDigest, g as PlaceSchedule, h as PlaceScheduleWeekLabels, W as WeekdayKey } from '../place-types-CjB4JlH0.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';

package/dist/components/qa-block.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { QaItem } from './menu-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/tabs.js

@@ -93,7 +93,9 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
             transition: archetype.indicatorMorph,
             className: cn(
               "absolute inset-0 -z-0 motion-reduce:hidden",
-              variant === "pill" && "rounded-xl bg-background shadow-sm",
+              // Dark: `bg-background` is darker than the `bg-muted` track, so the
+              // selection read as a hole; it lifts to the raised surface instead.
+              variant === "pill" && "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
               variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
               variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
             )
@@ -105,7 +107,9 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
             "aria-hidden": true,
             className: cn(
               "absolute inset-0 -z-0 hidden motion-reduce:block",
-              variant === "pill" && "rounded-xl bg-background shadow-sm",
+              // Dark: `bg-background` is darker than the `bg-muted` track, so the
+              // selection read as a hole; it lifts to the raised surface instead.
+              variant === "pill" && "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
               variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
               variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
             )

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-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.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-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.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-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 type TopRankingEntryLabels = {

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

@@ -1,5 +1,7 @@
-import { MenuItem } from '../chunk-6Z6MBILC.js';
+import { MenuItem } from '../chunk-WBTSOARU.js';
 import '../chunk-6PQINSAA.js';
+import '../chunk-QOXXIYDG.js';
+import '../chunk-TDTLEDX6.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import '../chunk-RYPPN2GZ.js';

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-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.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-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.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 { b as PlaceGradeDimensions } from '../place-types-Dzy6FH67.js';
+import { b as PlaceGradeDimensions } from '../place-types-CjB4JlH0.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-Dzy6FH67.js';
+import { C as CitedText } from '../place-types-CjB4JlH0.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-Dzy6FH67.js';
+import { P as PlacePreview } from '../place-types-CjB4JlH0.js';
 import 'react';
 import '../lib/grade.js';
 

package/dist/lib/grade.d.ts

@@ -44,7 +44,7 @@ declare function shouldShowGradeNumber(grade: {
 declare function showsGradeAtom<T extends {
     overall?: number | null;
     show_number?: boolean;
-}>(grade: T | null | undefined, size: "xs" | "sm" | "md" | "lg"): grade is T;
+}>(grade: T | null | undefined, size: "2xs" | "xs" | "sm" | "md" | "lg"): grade is T;
 /** Tone for a single 0–100 dimension score, driving the page dimension-bar
  *  colour: strong (≥75) = accent, adequate (50–74) = muted, low (<50) = amber
  *  (a soft "fair warning", never error-red). */

package/dist/lib/grade.js

@@ -1,2 +1,2 @@
-export { formatGrade, resolveDimensionTone, resolveGradeBand, shouldShowGradeNumber, showsGradeAtom } from '../chunk-I5V446BX.js';
+export { formatGrade, resolveDimensionTone, resolveGradeBand, shouldShowGradeNumber, showsGradeAtom } from '../chunk-TDTLEDX6.js';
 import '../chunk-MMUBH76A.js';

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GradeBand } from './lib/grade.js';
 
-type GradeAtomSize = "xs" | "sm" | "md" | "lg";
+type GradeAtomSize = "2xs" | "xs" | "sm" | "md" | "lg";
 /** Labels passed to `<GradeAtom>`. All translation happens in the caller. */
 type GradeAtomLabels = {
     /** The `show_number=false` state, e.g. "Worth exploring". */
@@ -23,7 +23,7 @@ type GradeAtomLabels = {
 type GradeAtomProps = {
     grade: PlaceGrade;
     labels: GradeAtomLabels;
-    /** xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
+    /** 2xs = inline in a line of text · xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
     size?: GradeAtomSize;
     /** Force-hide the descriptor even at sizes that would show it (tight rows). */
     hideDescriptor?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.54",
+  "version": "0.8.56",
   "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
   "license": "UNLICENSED",

package/src/components/grade-atom.test.tsx

@@ -23,6 +23,21 @@ describe("GradeAtom", () => {
     expect(screen.getByLabelText("Nota 8,7 din 10")).toHaveTextContent("8,7");
   });
 
+  // A pill that sits inside a line of text (a menu row's name or venue line)
+  // must not make the line taller: at `xs` (24px) it pushed rows apart
+  // (Adrian, 9 Nov). `2xs` is 18px with an 11px number, and like `xs` it has
+  // no room for the soft "worth exploring" sentence.
+  it("has an inline size that fits a line of text, number only", () => {
+    render(<GradeAtom grade={{ overall: 8.7 }} labels={labels} size="2xs" />);
+    const pill = screen.getByLabelText("Grade 8.7 out of 10");
+    expect(pill.className).toContain("h-[18px]");
+    expect(pill.innerHTML).toContain("text-2xs");
+    const { container } = render(
+      <GradeAtom grade={{ overall: 8.7, show_number: false }} labels={labels} size="2xs" />
+    );
+    expect(container.textContent).toBe("");
+  });
+
   it("hands the formatter the rounded, clamped grade", () => {
     const seen: number[] = [];
     const spy: GradeAtomLabels = { ...labels, value: (n) => (seen.push(n), String(n)) };

package/src/components/grade-atom.tsx

@@ -29,7 +29,7 @@ import {
 } from "../lib/grade";
 import type { PlaceGrade } from "./place-types";
 
-export type GradeAtomSize = "xs" | "sm" | "md" | "lg";
+export type GradeAtomSize = "2xs" | "xs" | "sm" | "md" | "lg";
 
 /** Labels passed to `<GradeAtom>`. All translation happens in the caller. */
 export type GradeAtomLabels = {
@@ -53,7 +53,7 @@ export type GradeAtomLabels = {
 export type GradeAtomProps = {
   grade: PlaceGrade;
   labels: GradeAtomLabels;
-  /** xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
+  /** 2xs = inline in a line of text · xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
   size?: GradeAtomSize;
   /** Force-hide the descriptor even at sizes that would show it (tight rows). */
   hideDescriptor?: boolean;
@@ -136,6 +136,18 @@ const SIZE: Record<
     showDesc: boolean;
   }
 > = {
+  // Inline in a line of text (a menu row's name or venue line): 18px fits a
+  // 15px name and a 12px venue line without making either taller, which the
+  // 24px xs did (Adrian, 2026-11-09). Number only, like xs.
+  "2xs": {
+    box: "h-[18px] px-1 rounded",
+    minW: "min-w-7",
+    num: "text-2xs",
+    desc: "text-2xs",
+    gap: "gap-0.5",
+    shield: "h-2.5 w-2.5",
+    showDesc: false,
+  },
   xs: {
     box: "h-6 px-1.5 rounded-md",
     minW: "min-w-9",
@@ -208,7 +220,7 @@ export function GradeAtom({
   // caller falls back to its Google star instead (gate on `showsGradeAtom`, and
   // see its note for why callers can't test `overall != null` any more).
   if (!shouldShowGradeNumber(grade)) {
-    if (size === "xs") return null;
+    if (size === "xs" || size === "2xs") return null;
     return (
       <span
         className={cn(

package/src/components/menu-item.stories.tsx

@@ -80,3 +80,111 @@ export const CountKinds: Story = {
     </div>
   ),
 };
+
+const brisket: MenuItemPreview = {
+  id: "i2",
+  slug: "brisket",
+  name: "Brisket",
+  kind: "dish",
+  category_slug: "meat",
+  mentions: 60,
+  sizes_and_prices: [{ size: 0, price: 375 }],
+};
+
+const gradeLabels = {
+  soft: "Worth exploring",
+  bands: {
+    exceptional: "Exceptional",
+    great: "Great",
+    good: "Good",
+    decent: "Decent",
+    weak: "Weak",
+  },
+  aria: (value: string) => `Grade ${value} out of 10`,
+  capped: "Capped for low confidence",
+};
+
+/**
+ * The venue line on a cross-venue list (the map's Dishes and Drinks): the place
+ * in full ink with its grade, then its neighbourhood and whether it is open,
+ * muted. With `emphasis="praise"` the price steps back and the praise leads.
+ */
+export const VenueLine: Story = {
+  render: (args) => (
+    <div className="divide-y divide-border">
+      <MenuItem
+        {...args}
+        item={brisket}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        subtitle="“Carnea a fost foarte fragedă și avea un gust intens de vită.”"
+        venueName="Texas Grill"
+        venueGrade={{
+          grade: { overall: 8.7, show_number: true, capped: false, confidence: "high" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Centru"
+        venueStatus={{ tone: "open", label: "Închide la 23:00" }}
+      />
+      <MenuItem
+        {...args}
+        item={{ ...brisket, id: "i3", name: "Ramen Tori Paitan", mentions: 58 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        venueName="YUSO"
+        venueGrade={{
+          grade: { overall: 9.2, show_number: true, capped: false, confidence: "high" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Mărăști"
+        venueStatus={{ tone: "closed", label: "Deschide la 12:00" }}
+      />
+      <MenuItem
+        {...args}
+        item={{ ...brisket, id: "i4", name: "Cannoli Siciliani", mentions: 12 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        venueName="Cannoleria Cluj-Napoca Restaurant & Pasticceria"
+        venueGrade={{
+          grade: { overall: 7.4, show_number: true, capped: false, confidence: "medium" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Zorilor"
+        venueStatus={{ tone: "open", label: "Închide la 22:00" }}
+      />
+      {/* A row whose name is the place (the map's Drinks list): the grade goes
+          with the name, and the venue line says what the place is praised for. */}
+      <MenuItem
+        {...args}
+        item={{ id: "f1", slug: "the-soviet", name: "The Soviet", kind: "drink", mentions: 271 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        subtitle="“A very nice place to drink very good cocktails with some unusual names.”"
+        nameGrade={{
+          grade: { overall: 9.2, show_number: true, capped: false, confidence: "high" },
+          labels: gradeLabels,
+        }}
+        venueName="Praised for cocktails"
+        venueDetail="Centru"
+        venueStatus={{ tone: "open", label: "Închide la 02:00" }}
+      />
+      <MenuItem
+        {...args}
+        item={{ ...brisket, id: "i5", name: "Papanași Cremoși", mentions: 9 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        venueName="Madrugada"
+        venueGrade={{
+          grade: { overall: 8.1, show_number: false, capped: false, confidence: "low" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Centru"
+      />
+    </div>
+  ),
+};

package/src/components/menu-item.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
+import type { GradeAtomLabels } from "./grade-atom";
 import { MentionSignal, MenuItem, type MenuItemLabels } from "./menu-item";
 import type { MenuItemPreview } from "./menu-types";
 
@@ -109,3 +110,124 @@ describe("MentionSignal count glyph", () => {
     );
   });
 });
+
+// Where reviews' praise is the point (the map's lists), the price is a fact a
+// person checks, not the row's headline: it steps down to secondary text and
+// the praise count keeps the bold accent (HIG review, 2026-11-08).
+describe("MenuItem emphasis", () => {
+  it("keeps the price bold by default", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} onOpen={() => {}} />);
+    const price = screen.getByText("169");
+    expect(price.className).toContain("font-bold");
+    expect(price.className).toContain("text-foreground");
+  });
+
+  it("sets the price as secondary text when praise leads", () => {
+    render(
+      <MenuItem item={wine} labels={labels} formatPrice={String} emphasis="praise" onOpen={() => {}} />
+    );
+    const price = screen.getByText("169");
+    expect(price.className).not.toContain("font-bold");
+    expect(price.className).toContain("text-muted-foreground");
+    expect(price.className).toContain("text-[13px]");
+  });
+});
+
+// On cross-venue surfaces the venue line can say whether the place is open:
+// a dot (success green open, muted closed) and the words. The words carry the
+// meaning; the dot is the glance. A long venue gives way, the status never.
+describe("MenuItem venue status", () => {
+  const row = (venueStatus?: { tone: "open" | "closed"; label: string }) =>
+    render(
+      <MenuItem
+        item={wine}
+        labels={labels}
+        formatPrice={String}
+        venueName="Texas Grill · Centru"
+        venueStatus={venueStatus}
+        onOpen={() => {}}
+      />
+    );
+
+  it("says an open place closes, with a green dot", () => {
+    const { container } = row({ tone: "open", label: "Closes at 23:00" });
+    const status = container.querySelector('[data-slot="venue-status"]')!;
+    expect(status.textContent).toBe("Closes at 23:00");
+    expect(status.getAttribute("data-tone")).toBe("open");
+    expect(status.querySelector("[aria-hidden]")!.className).toContain("bg-success");
+    expect(status.className).toContain("shrink-0");
+    expect(screen.getByText("Texas Grill · Centru").className).toContain("min-w-0");
+  });
+
+  it("says a closed place opens, with a muted dot", () => {
+    const { container } = row({ tone: "closed", label: "Opens at 09:00" });
+    const dot = container.querySelector('[data-slot="venue-status"] [aria-hidden]')!;
+    expect(dot.className).toContain("bg-muted-foreground");
+  });
+
+  it("draws no status when none is given", () => {
+    const { container } = row();
+    expect(container.querySelector('[data-slot="venue-status"]')).toBeNull();
+    expect(screen.getByText("Texas Grill · Centru")).toBeTruthy();
+  });
+});
+
+// The venue line has its own order (Adrian, 2026-11-09): the place in full
+// ink, its grade beside it, then its neighbourhood and hours, muted. Before,
+// all of it was one grey string and the place weighed what its details did.
+describe("MenuItem venue line", () => {
+  const grade = { overall: 8.7, show_number: true, capped: false, confidence: "high" } as const;
+  const gradeLabels: GradeAtomLabels = {
+    soft: "Worth exploring",
+    bands: { exceptional: "Exceptional", great: "Great", good: "Good", decent: "Decent", weak: "Weak" },
+    aria: (value) => `Grade ${value} out of 10`,
+    capped: "Capped",
+  };
+  const venue = (props: Partial<Parameters<typeof MenuItem>[0]>) =>
+    render(
+      <MenuItem
+        item={wine}
+        labels={labels}
+        formatPrice={String}
+        venueName="Texas Grill"
+        onOpen={() => {}}
+        {...props}
+      />
+    );
+
+  it("sets the place in full ink and its neighbourhood muted after it", () => {
+    venue({ venueDetail: "Centru" });
+    const place = screen.getByText("Texas Grill");
+    expect(place.className).toContain("text-foreground");
+    expect(place.className).toContain("font-semibold");
+    const detail = screen.getByText("Centru");
+    expect(detail.className).toContain("text-muted-foreground");
+    expect(detail.className).toContain("font-normal");
+  });
+
+  it("puts the place's grade beside its name", () => {
+    venue({ venueGrade: { grade, labels: gradeLabels } });
+    // The inline size: the pill fits the line instead of making it taller.
+    expect(screen.getByLabelText("Grade 8.7 out of 10").className).toContain("h-[18px]");
+  });
+
+  // The map's Drinks rows lead with the bar; their venue line says what it
+  // is praised for. The grade goes with the bar's name, never beside
+  // "Praised for cocktails" (Adrian, 9 Nov).
+  it("can put the grade beside the row's name when the name is the place", () => {
+    const { container } = venue({
+      item: { ...wine, name: "The Soviet" },
+      venueName: "Praised for cocktails",
+      nameGrade: { grade, labels: gradeLabels },
+    });
+    const pill = screen.getByLabelText("Grade 8.7 out of 10");
+    expect(container.querySelector("h3")!.parentElement!.contains(pill)).toBe(true);
+    expect(screen.getByText("Praised for cocktails").parentElement!.contains(pill)).toBe(false);
+  });
+
+  it("draws no grade without a number to show", () => {
+    venue({ venueGrade: { grade: { ...grade, show_number: false }, labels: gradeLabels } });
+    expect(screen.queryByLabelText(/^Grade/)).toBeNull();
+    expect(screen.queryByText("Worth exploring")).toBeNull();
+  });
+});

package/src/components/menu-item.tsx

@@ -1,6 +1,9 @@
 import { memo } from "react";
 import { MessageSquareQuote, Star, ThumbsUp } 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 { SignatureChip } from "./signature-chip";
 import type { MenuItemPreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
 
@@ -111,6 +114,14 @@ export type MenuItemProps = {
    * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
    */
   countKind?: MenuItemCountKind;
+  /**
+   * What the meta row leads with. `"price"` (default): the price is bold, the
+   * count's peer at the other end. `"praise"`: on surfaces where reviews'
+   * praise is the point (the map's lists), the price steps down to secondary
+   * text, a fact to check rather than the row's headline, and the praise count
+   * keeps the bold accent.
+   */
+  emphasis?: "price" | "praise";
   /**
    * 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.
@@ -134,6 +145,30 @@ export type MenuItemProps = {
    * default.
    */
   venueName?: string;
+  /**
+   * Whether the venue is open, on the venue line after its name: a dot
+   * (`open` in the success green, `closed` muted) and the caller's words, e.g.
+   * "Closes at 23:00" / "Opens at 09:00". Only with `venueName`.
+   */
+  venueStatus?: { tone: "open" | "closed"; label: string };
+  /**
+   * A short detail about the venue, muted after its name and grade: its
+   * neighbourhood, say. Only with `venueName`.
+   */
+  venueDetail?: string;
+  /**
+   * The venue's grade, drawn as `<GradeAtom size="2xs">` (inline, 18px) beside its name. Only
+   * a grade with a number shows: the xs atom draws nothing for the soft
+   * "worth exploring" state (see `showsGradeAtom`).
+   */
+  venueGrade?: { grade: PlaceGrade; labels: GradeAtomLabels };
+  /**
+   * A grade beside the row's NAME, for rows where the name is the place (the
+   * map's Drinks list leads with the bar, and its venue line says what the
+   * bar is praised for). Use it instead of `venueGrade` there, so the grade
+   * never sits beside "Praised for cocktails". Same rule: only with a number.
+   */
+  nameGrade?: { grade: PlaceGrade; labels: GradeAtomLabels };
   /**
    * Explicit subtitle, in italic, in place of the description. Used where the
    * reviewer's reason IS the row's content rather than the payoff for tapping.
@@ -259,10 +294,15 @@ export const MenuItem = memo(function MenuItem({
   onSignatureEvidence,
   onMentions,
   countKind = "mentions",
+  emphasis = "price",
   externalRating,
   formatRating = (score) => score.toFixed(1),
   markGradient,
   venueName,
+  venueStatus,
+  venueDetail,
+  venueGrade,
+  nameGrade,
   subtitle,
   href,
   linkLabel,
@@ -390,6 +430,15 @@ export const MenuItem = memo(function MenuItem({
       <div className="min-w-0 flex-1">
         <div className="flex items-start gap-1.5">
           <h3 className="text-[15px] font-semibold leading-snug text-foreground">{item.name}</h3>
+          {nameGrade && showsGradeAtom(nameGrade.grade, "2xs") && (
+            <GradeAtom
+              grade={nameGrade.grade}
+              labels={nameGrade.labels}
+              size="2xs"
+              hideDescriptor
+              className="shrink-0 self-center"
+            />
+          )}
           {showSignatureBadge && (
             <SignatureChip
               label={signatureTier === "weak" ? labels.mentioned : labels.signature}
@@ -399,13 +448,56 @@ export const MenuItem = memo(function MenuItem({
           )}
         </div>
 
-        {/* Venue attribution — cross-venue surfaces only. Medium weight at 12px
-            against the 12px regular muted description below is what makes it
-            read as a different KIND of fact at a glance. No pin glyph:
-            repeated down a list it is visual lint, and a pin reads "address"
-            when the fact is "kitchen". */}
+        {/* Venue attribution — cross-venue surfaces only. The place in full
+            ink, semibold at 12px, is a different KIND of fact from the muted
+            description below, and outranks its own details: the grade beside
+            it, then the neighbourhood and the hours, muted and regular. Before
+            0.8.56 the line was one grey string, and the place weighed what its
+            details did. No pin glyph: repeated down a list it is visual lint,
+            and a pin reads "address" when the fact is "kitchen". */}
         {venueName && (
-          <p className="mt-0.5 truncate text-[12px] font-medium text-foreground/70">{venueName}</p>
+          <p className="mt-0.5 flex min-w-0 items-center gap-1.5 text-[12px]">
+            <span className="min-w-0 truncate font-semibold text-foreground">{venueName}</span>
+            {venueGrade && showsGradeAtom(venueGrade.grade, "2xs") && (
+              <GradeAtom
+                grade={venueGrade.grade}
+                labels={venueGrade.labels}
+                size="2xs"
+                hideDescriptor
+                className="shrink-0"
+              />
+            )}
+            {venueDetail && (
+              <>
+                <span aria-hidden className="text-muted-foreground">
+                  ·
+                </span>
+                {/* Short by nature (a neighbourhood): it keeps its width, and
+                    a long place name gives way instead of leaving "Z…". */}
+                <span className="shrink-0 font-normal text-muted-foreground">{venueDetail}</span>
+              </>
+            )}
+            {/* Whether the place is open: a dot for the glance, the words for
+                the meaning. Green is the success token, closed stays muted:
+                at 10 a.m. most bars are closed, and a list of red rows would
+                read as an alarm. A long venue gives way; the status never. */}
+            {venueStatus && (
+              <span
+                data-slot="venue-status"
+                data-tone={venueStatus.tone}
+                className="inline-flex shrink-0 items-center gap-1 font-normal text-muted-foreground"
+              >
+                <span
+                  aria-hidden
+                  className={cn(
+                    "size-1.5 shrink-0 rounded-full",
+                    venueStatus.tone === "open" ? "bg-success" : "bg-muted-foreground"
+                  )}
+                />
+                {venueStatus.label}
+              </span>
+            )}
+          </p>
         )}
 
         {/* The description gives up a line to the venue rather than the row
@@ -448,7 +540,14 @@ export const MenuItem = memo(function MenuItem({
             <div className="flex min-w-0 items-baseline gap-x-2">
               {minPrice != null && (
                 <span className="flex items-baseline gap-1">
-                  <span className="text-[15px] font-bold tabular-nums text-foreground">
+                  <span
+                    className={cn(
+                      "tabular-nums",
+                      emphasis === "praise"
+                        ? "text-[13px] font-medium text-muted-foreground"
+                        : "text-[15px] font-bold text-foreground"
+                    )}
+                  >
                     {isPriceRange
                       ? `${formatPrice(minPrice)}–${formatPrice(maxPrice!)}`
                       : formatPrice(minPrice)}

package/src/components/tabs.test.tsx

@@ -169,3 +169,17 @@ describe("Tabs", () => {
     expect(screen.getByText("Panel A")).toBeInTheDocument();
   });
 });
+
+// In dark mode `bg-background` is darker than the pill track (`bg-muted`), so
+// the selected segment read as a hole; it lifts to the raised surface there.
+describe("pill indicator in dark mode", () => {
+  it("raises the selected segment above the track", () => {
+    const { container } = render(<Triplet />);
+    const indicators = container.querySelectorAll('[role="tab"][data-state="active"] > span[aria-hidden]');
+    expect(indicators.length).toBeGreaterThan(0);
+    indicators.forEach((indicator) => {
+      expect(indicator.className).toContain("dark:bg-surface-2");
+      expect(indicator.className).toContain("dark:ring-1");
+    });
+  });
+});

package/src/components/tabs.tsx

@@ -153,7 +153,10 @@ const TabsTrigger = React.forwardRef<
           transition={archetype.indicatorMorph}
           className={cn(
             "absolute inset-0 -z-0 motion-reduce:hidden",
-            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            // Dark: `bg-background` is darker than the `bg-muted` track, so the
+            // selection read as a hole; it lifts to the raised surface instead.
+            variant === "pill" &&
+              "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
             variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
             variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
           )}
@@ -165,7 +168,10 @@ const TabsTrigger = React.forwardRef<
           aria-hidden
           className={cn(
             "absolute inset-0 -z-0 hidden motion-reduce:block",
-            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            // Dark: `bg-background` is darker than the `bg-muted` track, so the
+            // selection read as a hole; it lifts to the raised surface instead.
+            variant === "pill" &&
+              "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
             variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
             variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
           )}

package/src/lib/grade.ts

@@ -58,10 +58,10 @@ export function shouldShowGradeNumber(grade: { show_number?: boolean }): boolean
  */
 export function showsGradeAtom<T extends { overall?: number | null; show_number?: boolean }>(
   grade: T | null | undefined,
-  size: "xs" | "sm" | "md" | "lg"
+  size: "2xs" | "xs" | "sm" | "md" | "lg"
 ): grade is T {
   if (grade?.overall == null) return false;
-  return size !== "xs" || shouldShowGradeNumber(grade);
+  return (size !== "xs" && size !== "2xs") || shouldShowGradeNumber(grade);
 }
 
 /** Tone for a single 0–100 dimension score, driving the page dimension-bar