@bearmenu/ui 0.8.55 → 0.8.56

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/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?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "primary" | "inherit" | "default" | "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?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "primary" | "inherit" | "default" | "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" | "destructive" | "outline" | "warning" | "primary" | "success" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "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" | "destructive" | "outline" | "warning" | "primary" | "success" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "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?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "inherit" | "default" | "destructive" | "primary" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "primary" | "inherit" | "default" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/top-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-CBBECMBD.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.55",
+  "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";
 
@@ -131,3 +132,102 @@ describe("MenuItem emphasis", () => {
     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";
 
@@ -142,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.
@@ -272,6 +299,10 @@ export const MenuItem = memo(function MenuItem({
   formatRating = (score) => score.toFixed(1),
   markGradient,
   venueName,
+  venueStatus,
+  venueDetail,
+  venueGrade,
+  nameGrade,
   subtitle,
   href,
   linkLabel,
@@ -399,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}
@@ -408,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

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