@bearmenu/ui 0.8.55 → 0.8.57

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/components/weekday-chip.stories.tsx

@@ -22,6 +22,10 @@ type Story = StoryObj<typeof WeekdayChip>;
 export const Default: Story = { args: { weekday: "Mon", day: "10" } };
 export const Selected: Story = { args: { weekday: "Fri", day: "14", selected: true } };
 export const Unavailable: Story = { args: { weekday: "Tue", day: "11", unavailable: true } };
+/** The events map's week picker: the day's event count under the date. */
+export const WithDetail: Story = {
+  args: { weekday: "Fri", day: "13", detail: "12", "aria-label": "Friday 13 November, 12 events" },
+};
 
 const WEEK = [
   ["Mon", "10"],

package/src/components/weekday-chip.tsx

@@ -12,11 +12,19 @@ import { cn } from "../lib/utils";
  * over the date, no count — and the rail shares the width equally.
  *
  * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
- * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 11px
  * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
  * below. Selected fills with `--gradient-primary`, white type, the weekday at
  * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
  * is disabled.
+ *
+ * The weekday was 10px, under the HIG's 11pt floor for iPhone text; measured
+ * when the events map took this chip for its week picker (bearmenu-fe,
+ * 2026-11-10). 11px still holds a three-letter weekday in a 46px seventh of a
+ * phone's width.
+ *
+ * `detail` is an optional third line under the date: the events map prints
+ * that day's event count there. A chip without it keeps its booking height.
  */
 
 export type WeekdayChipProps = {
@@ -24,6 +32,9 @@ export type WeekdayChipProps = {
   weekday: string;
   /** Day of month as displayed — "14". */
   day: string;
+  /** A short line under the date — "12", that day's events. Give the button
+   *  an `aria-label` that says it with its unit; a bare number is unclear. */
+  detail?: string;
   selected?: boolean;
   /** Closed that day or outside the booking window. */
   unavailable?: boolean;
@@ -36,6 +47,7 @@ export type WeekdayChipProps = {
 export function WeekdayChip({
   weekday,
   day,
+  detail,
   selected,
   unavailable,
   onSelect,
@@ -63,13 +75,24 @@ export function WeekdayChip({
     >
       <span
         className={cn(
-          "block text-[10px] tracking-[0.05em] uppercase",
+          "block text-[11px] tracking-[0.05em] uppercase",
           selected ? "text-white/75" : "text-muted-foreground"
         )}
       >
         {weekday}
       </span>
       <span className="mt-0.5 block text-[15px] font-bold tabular-nums">{day}</span>
+      {detail !== undefined && (
+        <span
+          data-slot="weekday-chip-detail"
+          className={cn(
+            "mt-0.5 block font-mono text-[11px] tabular-nums",
+            selected ? "text-white/85" : "text-muted-foreground"
+          )}
+        >
+          {detail}
+        </span>
+      )}
     </button>
   );
 }

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