@bearmenu/ui 0.8.10 → 0.8.12

package/dist/components/venue-wall.js

@@ -6,6 +6,8 @@ function DefaultLink(_a) {
   var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
 }
+var WALL_CELLS = 18;
+var PHONE_CELLS = 6;
 function VenueWall({
   places,
   hrefs,
@@ -28,7 +30,7 @@ function VenueWall({
       ),
       children: [
         (tileUrls == null ? void 0 : tileUrls.length) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-6", children: Array.from({ length: 18 }, (_, cell) => (
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-6", children: Array.from({ length: WALL_CELLS }, (_, cell) => (
             // eslint-disable-next-line @next/next/no-img-element
             /* @__PURE__ */ jsx(
               "img",
@@ -37,7 +39,7 @@ function VenueWall({
                 alt: "",
                 loading: "lazy",
                 decoding: "async",
-                className: "h-full w-full object-cover"
+                className: cn("h-full w-full object-cover", cell >= PHONE_CELLS && "hidden lg:block")
               },
               cell
             )
@@ -94,7 +96,7 @@ function VenueWall({
               ) }),
               /* @__PURE__ */ jsx("span", { className: "truncate text-[12.5px] font-medium", children: place.name })
             ] });
-            const chipClasses = "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/10 py-1 pl-1 pr-3.5 backdrop-blur-[6px]";
+            const chipClasses = "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/[0.14] py-1 pl-1 pr-3.5";
             return /* @__PURE__ */ jsx("li", { children: (hrefs == null ? void 0 : hrefs[place.slug]) ? /* @__PURE__ */ jsx(
               LinkComponent,
               {

package/dist/components/weekday-theme-banner.d.ts

@@ -26,8 +26,15 @@ type WeekdayThemeBannerLinkProps = {
 type WeekdayThemeDay = {
     /** Short code, e.g. "THU". Already localised. */
     code: string;
-    /** Theme name, e.g. "Burger Thursday". */
+    /** Theme name, e.g. "Burger Thursday in Cluj". */
     name: string;
+    /**
+     * The phone's title, e.g. "Burger Thursday" — one line where `name` takes
+     * two, so the photograph behind it stays a photograph. A separate string,
+     * never `name` with a clause stripped: word order is the locale's. Falls
+     * back to `name`.
+     */
+    shortHeadline?: string;
     /** Short form for the rail, e.g. "Burger". Falls back to `name`. */
     shortName?: string;
     /** Items under the theme. Omit where there is no count to show. */
@@ -44,10 +51,24 @@ type WeekdayThemeBannerProps = {
     body?: string;
     /** Heading over the week rail, e.g. "THE WEEK". */
     weekLabel?: string;
-    /** The primary action — pass a rendered button or link. */
+    /**
+     * The primary action — pass a rendered button or link. From `lg` up only
+     * when `compactAction` is also given: on a phone the banner is a row, and a
+     * row does not carry a labelled button.
+     */
     action?: React.ReactNode;
     /** Note beside the action, e.g. "Bruno picks nine, ranked on mentions". */
     actionNote?: string;
+    /**
+     * The phone's action: the whole banner becomes the target and a chevron on
+     * the right is the signal — a disclosure row, not a call to action, so the
+     * banner stays as tall as its title. `label` names the target for a screen
+     * reader. Hidden from `lg`, where `action` takes over.
+     */
+    compactAction?: {
+        label: string;
+        onClick: () => void;
+    };
     /** Destination per day index. Renders the rail as links. */
     dayHref?: (day: WeekdayThemeDay, index: number) => string;
     /** Selects a day in place. Renders the rail as buttons. */
@@ -65,6 +86,6 @@ type WeekdayThemeBannerProps = {
     linkComponent?: React.ComponentType<WeekdayThemeBannerLinkProps>;
     className?: string;
 };
-declare function WeekdayThemeBanner({ days, activeDay, kicker, kickerIcon, body, weekLabel, action, actionNote, dayHref, onDayChange, imageUrl, linkComponent: LinkComponent, className, }: WeekdayThemeBannerProps): react_jsx_runtime.JSX.Element | null;
+declare function WeekdayThemeBanner({ days, activeDay, kicker, kickerIcon, body, weekLabel, action, actionNote, compactAction, dayHref, onDayChange, imageUrl, linkComponent: LinkComponent, className, }: WeekdayThemeBannerProps): react_jsx_runtime.JSX.Element | null;
 
 export { WeekdayThemeBanner, type WeekdayThemeBannerLinkProps, type WeekdayThemeBannerProps, type WeekdayThemeDay };

package/dist/components/weekday-theme-banner.js

@@ -1,5 +1,6 @@
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ChevronRight } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -15,6 +16,7 @@ function WeekdayThemeBanner({
   weekLabel,
   action,
   actionNote,
+  compactAction,
   dayHref,
   onDayChange,
   imageUrl,
@@ -27,7 +29,9 @@ function WeekdayThemeBanner({
     "div",
     {
       className: cn(
-        "relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white lg:grid-cols-[1fr_auto]",
+        // A plate needs a ~2.8:1 window to read on a phone; the text alone
+        // would give it ~85px.
+        "group relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white max-lg:min-h-[128px] lg:grid-cols-[1fr_auto]",
         className
       ),
       children: [
@@ -45,7 +49,7 @@ function WeekdayThemeBanner({
             "div",
             {
               "aria-hidden": true,
-              className: "absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
+              className: "absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.85)_0%,oklch(0.18_0.03_45_/_0.45)_48%,oklch(0.18_0.03_45_/_0.2)_100%)] lg:bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
             }
           )
         ] }),
@@ -57,18 +61,62 @@ function WeekdayThemeBanner({
             children: active.code
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6", children: [
-          kicker && /* @__PURE__ */ jsxs("span", { className: "inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[10.5px] font-bold tracking-[0.09em]", children: [
-            kickerIcon,
-            kicker
-          ] }),
-          /* @__PURE__ */ jsx("h3", { className: "font-serif text-[24px] font-semibold tracking-[-0.02em] lg:text-[36px]", children: active.name }),
-          body && /* @__PURE__ */ jsx("p", { className: "max-w-[520px] text-[13.5px] leading-[1.5] opacity-90", children: body }),
-          (action || actionNote) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-3", children: [
-            action,
-            actionNote && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-75", children: actionNote })
-          ] })
-        ] }),
+        compactAction && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": compactAction.label,
+            onClick: compactAction.onClick,
+            className: "absolute inset-0 z-[2] rounded-[18px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70 lg:hidden",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "absolute right-4 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-[oklch(0.18_0.03_45_/_0.55)] text-white transition-colors [@media(pointer:coarse)]:group-active:bg-[oklch(0.18_0.03_45_/_0.75)]",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6",
+              // On a phone the text keeps to the left 64% — the photograph gets
+              // the rest, and the chevron sits in it — and centres in the row.
+              imageUrl && "max-lg:max-w-[64%] max-lg:justify-center max-lg:gap-1.5",
+              // Without a photograph the text may run wide; keep it off the
+              // chevron. With one, the 36% beside the column already holds it.
+              compactAction && !imageUrl && "max-lg:pr-16"
+            ),
+            children: [
+              kicker && /* @__PURE__ */ jsxs("span", { className: "inline-flex w-max items-center gap-1.5 text-[10.5px] font-bold tracking-[0.09em] text-white/75 lg:rounded-full lg:bg-white/15 lg:px-2.5 lg:py-1 lg:text-white", children: [
+                kickerIcon,
+                kicker
+              ] }),
+              /* @__PURE__ */ jsx("h3", { className: "font-serif text-[22px] font-semibold leading-[1.15] tracking-[-0.02em] lg:text-[36px] lg:leading-tight", children: active.shortHeadline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "line-clamp-2 lg:hidden", children: active.shortHeadline }),
+                /* @__PURE__ */ jsx("span", { className: "hidden lg:block", children: active.name })
+              ] }) : active.name }),
+              body && /* @__PURE__ */ jsx("p", { className: "hidden max-w-[520px] text-[13.5px] leading-[1.5] opacity-90 lg:block", children: body }),
+              (action || actionNote) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "mt-1 flex flex-wrap items-center gap-3",
+                    // With a compact action the phone has its chevron instead.
+                    compactAction && "hidden lg:flex"
+                  ),
+                  children: [
+                    action,
+                    actionNote && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-75", children: actionNote })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -76,7 +124,7 @@ function WeekdayThemeBanner({
               "relative z-[1] hidden border-t border-white/15 p-4 lg:block lg:min-w-[240px] lg:border-l lg:border-t-0 lg:p-5",
               // Over a photograph the rail needs its own ground, or seven lines of
               // small type land on whatever the plate happens to be.
-              imageUrl && "bg-black/45 backdrop-blur-[2px]"
+              imageUrl && "bg-black/55"
             ),
             children: [
               weekLabel && /* @__PURE__ */ jsx("div", { className: "mb-2 text-[10px] font-bold tracking-[0.12em] opacity-70", children: weekLabel }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.tsx

@@ -14,7 +14,7 @@ const badgeVariants = cva(
           "border-transparent bg-destructive text-destructive-foreground",
         outline: "text-foreground border-border",
         overlay:
-          "border-transparent bg-foreground/70 text-background backdrop-blur-sm",
+          "border-transparent bg-foreground/80 text-background",
         glass: "glass text-foreground border-border/50",
         success:
           "border-transparent bg-success text-success-foreground",

package/src/components/button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
-import { Heart, Mail, Plus } from "lucide-react";
+import { ArrowRight, Heart, Mail, Plus } from "lucide-react";
 
 const meta = {
   title: "Components/Button",
@@ -19,11 +19,13 @@ const meta = {
         "glass",
         "brown",
         "antagonist",
+        "overlay",
+        "ink",
       ],
     },
     size: {
       control: "select",
-      options: ["default", "sm", "lg", "icon"],
+      options: ["default", "sm", "lg", "pill", "icon"],
     },
   },
 } satisfies Meta<typeof Button>;
@@ -59,6 +61,27 @@ export const Glass: Story = {
   args: { children: "Glass", variant: "glass" },
 };
 
+/** The labelled action on a photo surface: glass on the ink, icon trailing. */
+export const Ink: Story = {
+  args: {
+    children: (
+      <>
+        Open the menu
+        <ArrowRight aria-hidden />
+      </>
+    ),
+    variant: "ink",
+    size: "pill",
+  },
+  decorators: [
+    (Story) => (
+      <div className="rounded-2xl bg-[oklch(0.21_0.012_55)] p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 export const Brown: Story = {
   args: { children: "Brown", variant: "brown" },
 };

package/src/components/button.tsx

@@ -28,14 +28,24 @@ const buttonVariants = cva(
          * into a dark photo.
          *
          * Deliberately NOT theme-aware, and so deliberately different from
-         * `Badge`'s `overlay` (`bg-foreground/70 text-background`, which
+         * `Badge`'s `overlay` (`bg-foreground/80 text-background`, which
          * inverts). A photo is equally a photo in both themes — this chrome has
          * to contrast with the image beneath it, not with the app canvas, so it
          * stays dark-on-light-glyph either way. Reconcile Badge to this, not the
          * reverse, if the two are ever unified.
          */
         overlay:
-          "bg-black/40 text-white backdrop-blur-sm hover:bg-black/60 focus-visible:ring-white/70",
+          "bg-black/50 text-white hover:bg-black/65 focus-visible:ring-white/70",
+        /**
+         * The LABELLED action on a photo surface — "Open the menu", "See all
+         * 46 bars", "How we read menus" — where `overlay` is the unlabelled
+         * chrome. Glass on the ink: translucent white with a hairline, white
+         * type. Same reasoning as `overlay`: not theme-aware, because it
+         * contrasts with the photograph, not the canvas. Pair with `size="pill"`.
+         * Icons trail, never lead: `ArrowRight` when it navigates to a page,
+         * `ChevronRight` when it opens a sheet or drawer.
+         */
+        ink: "border border-white/20 bg-white/[0.16] text-white hover:bg-white/25 focus-visible:ring-white/70 focus-visible:ring-offset-0",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:
@@ -46,6 +56,8 @@ const buttonVariants = cva(
         sm: "h-9 rounded-lg px-4",
         default: "h-11 px-6 py-2",
         lg: "h-12 rounded-2xl px-8",
+        /** The `ink` action's shape. Owns the radius so no variant fights it. */
+        pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",
         icon: "h-11 w-11 rounded-full",
         "icon-xs": "h-8 w-8 rounded-full [&_svg]:size-3.5",
         "icon-sm": "h-9 w-9 rounded-full",

package/src/components/colour-dictionary.stories.tsx

@@ -209,7 +209,7 @@ function ColourDictionaryPage() {
         <section>
           <h2 className="text-[15px] font-extrabold">Where the values live</h2>
           <p className="mt-2 text-[13px] leading-[1.55] text-foreground/85">
-            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>MenuIntentTiles</code>) and takes a finished colour as a prop. The palette lives in the fe app: the eighteen <code>--menu-field-*</code> tokens in <code>app/globals.css</code>, <code>FAMILY_HUES</code> and <code>INTENT_GRADIENTS</code> in <code>hub-gradients.ts</code>, category → family in <code>category-colors.ts</code>. The Storybook mocks carry the same values so post-generator films what the app paints.
+            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>MenuFamilyTiles</code>) and takes a finished colour as a prop. The palette lives in the fe app: the eighteen <code>--menu-field-*</code> tokens in <code>app/globals.css</code>, <code>FAMILY_HUES</code> and <code>INTENT_GRADIENTS</code> in <code>hub-gradients.ts</code>, category → family in <code>category-colors.ts</code>. The Storybook mocks carry the same values so post-generator films what the app paints.
           </p>
         </section>
       </div>

package/src/components/concept-compare-rail.tsx

@@ -67,7 +67,8 @@ export type ConceptCompareRailProps = {
  * not `var(--scrim)`, which is the app's token and not this package's.
  */
 const FOOT_GLASS = cn(
-  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg",
+  // Ink only — no backdrop-blur; see `GlassGround` for the measurement.
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
   "before:bg-[oklch(0.16_0.012_55_/_0.9)]",
   "lg:before:[mask-image:linear-gradient(to_top,black_60%,transparent_100%)] lg:before:bg-[linear-gradient(to_top,oklch(0.16_0.012_55_/_0.88)_0%,oklch(0.16_0.012_55_/_0.84)_60%,oklch(0.16_0.012_55_/_0.4)_85%,oklch(0.16_0.012_55_/_0)_100%)]"
 );

package/src/components/concept-compare.stories.tsx

@@ -12,7 +12,7 @@ const labels = {
 
 const formatPrice = (amount: number) => `${amount} lei`;
 
-/** A stand-in venue photograph with enough variance that the glass has something to blur. */
+/** A stand-in venue photograph with enough variance that the ink bands have something to sit on. */
 function room(hue: number, label: string) {
   return (
     "data:image/svg+xml;utf8," +
@@ -79,7 +79,7 @@ const hrefs = Object.fromEntries(rooms.map((r) => [r.place_slug, `/places/${r.pl
 const seeAll = (
   <a
     href="/menu/dishes/papanasi"
-    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md"
+    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white"
   >
     See all 45 kitchens
   </a>
@@ -111,7 +111,7 @@ const meta: Meta<typeof ConceptCompare> = {
     docs: {
       description: {
         component:
-          "One dish across the kitchens that make it — and **no surfaces at all**. The card is a contact sheet of venue photographs, one per room, and the three readable things float on it through glass: the identity across the top, each kitchen's line over its own photograph, the foot along the bottom. Read ACROSS, not down: four rooms side by side, each with its own name and price. The photographs are placed as cells of the same grid as the rooms, spanning from the head down, so the head's glass genuinely blurs them and every seam lands on a room boundary. Nothing in it is themed — the edge is the only thing that adapts to the page.",
+          "One dish across the kitchens that make it — and **no surfaces at all**. The card is a contact sheet of venue photographs, one per room, and the three readable things float on it on ink bands: the identity across the top, each kitchen's line over its own photograph, the foot along the bottom. Read ACROSS, not down: four rooms side by side, each with its own name and price. The photographs are placed as cells of the same grid as the rooms, spanning from the head down, so the head's ink fades into them and every seam lands on a room boundary. Nothing in it is themed — the edge is the only thing that adapts to the page.",
       },
     },
   },

package/src/components/concept-compare.tsx

@@ -79,7 +79,7 @@ export type ConceptCompareFigure = {
 export type ConceptCompareLabels = {
   /** Small caps kicker, e.g. "DISH CONCEPT". */
   kind: string;
-  /** The badge on the lowest-priced room, e.g. "CHEAPEST". */
+  /** The badge on the lowest-priced room, e.g. "CHEAPEST" — the fallback when a row carries no `badge`. */
   cheapest: string;
   /** The badge on every other room, e.g. "#2". Defaults to `#${rank}`. */
   rank?: (rank: number) => string;
@@ -135,11 +135,16 @@ const ROOM_SCRIM =
   "absolute inset-0 bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0)_0%,oklch(0.16_0.012_55_/_0)_30%,oklch(0.16_0.012_55_/_0.55)_58%,oklch(0.16_0.012_55_/_0.9)_100%)]";
 
 /**
- * The head band's glass. Mask and ink both run the band's full height and go
- * to ZERO at its underside on the same curve — a soft edge, not a line.
+ * The head band's ink. It runs the band's full height and goes to ZERO at its
+ * underside on an eased curve — a soft edge, not a line. Ink only: the
+ * backdrop-blur AND the mask that used to sit under it were removed for the
+ * measurement recorded in `GlassGround`. Without the mask the gradient alone
+ * shapes the fade, so its lower half is darker than before (~0.28 at 75 %
+ * where mask×gradient gave ~0.08) — deliberate, that is where the room
+ * names begin.
  */
 const HEAD_GLASS =
-  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg before:[mask-image:linear-gradient(to_bottom,black_35%,transparent_100%)] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.8)_0%,oklch(0.16_0.012_55_/_0.6)_35%,oklch(0.16_0.012_55_/_0.22)_75%,oklch(0.16_0.012_55_/_0)_100%)]";
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.86)_0%,oklch(0.16_0.012_55_/_0.7)_35%,oklch(0.16_0.012_55_/_0.28)_75%,oklch(0.16_0.012_55_/_0)_100%)]";
 
 /* The foot band's glass lives in `concept-compare-rail.tsx`, with the foot. */
 
@@ -272,7 +277,15 @@ export function ConceptCompare({
         >
           {rooms.map((room, index) => {
             const href = hrefs?.[room.place_slug];
-            const isCheapest = room.price === cheapest;
+            // A winner room says what it won; a ranked room says its rank.
+            // The CHEAPEST badge — and only it — is green with the arrow: it
+            // is the census's signature claim, the one badge a diner scans
+            // for. Gated on the badge, not the price: drink concepts cluster
+            // on price, and a "most named" room at the minimum must not wear
+            // the cheapest's glyph.
+            const badge = room.badge ?? (room.price === cheapest ? labels.cheapest : rankOf(index + 1));
+            const isCheapest = badge === labels.cheapest;
+            const lead = room.lead ?? (isCheapest ? "price" : undefined);
             const roomClass = cn(
               /* Transparent on the phone — the card behind it is the room's
                  photograph — with only its scrim and its line. A photograph of
@@ -303,11 +316,11 @@ export function ConceptCompare({
                     "inline-flex h-[22px] w-max items-center gap-1 rounded-full px-2 text-[10px] font-extrabold uppercase tracking-[0.08em]",
                     isCheapest
                       ? "bg-success text-white"
-                      : "bg-white/15 text-white/85 backdrop-blur-[2px]"
+                      : "bg-white/20 text-white/85"
                   )}
                 >
                   {isCheapest && <ArrowDown className="h-3 w-3 shrink-0" aria-hidden />}
-                  {isCheapest ? labels.cheapest : rankOf(index + 1)}
+                  {badge}
                 </span>
 
                 {/* Name and rating on one line: the pin leads, the name takes
@@ -317,11 +330,25 @@ export function ConceptCompare({
                   <b className="min-w-0 flex-1 truncate text-[15px] font-bold leading-tight">
                     {room.place_name}
                   </b>
-                  {room.rating !== undefined && (
-                    <span className="flex shrink-0 items-center gap-1 text-[12px] text-white/70">
-                      <Star className="h-3 w-3 shrink-0" aria-hidden />
-                      <span className="tabular-nums">{room.rating}</span>
+                  {/* The BearMenu grade, in the grade's amber — the number
+                      the census computed, beside the kitchen it computed it
+                      for. Google's star only for a kitchen with no grade. */}
+                  {room.grade ? (
+                    <span
+                      className={cn(
+                        "shrink-0 text-[14px] font-extrabold leading-none tabular-nums text-[oklch(0.82_0.15_85)]",
+                        lead === "grade" && "text-[16px]"
+                      )}
+                    >
+                      {room.grade}
                     </span>
+                  ) : (
+                    room.rating !== undefined && (
+                      <span className="flex shrink-0 items-center gap-1 text-[12px] text-white/70">
+                        <Star className="h-3 w-3 shrink-0" aria-hidden />
+                        <span className="tabular-nums">{room.rating}</span>
+                      </span>
+                    )
                   )}
                 </span>
                 {room.place_area && (
@@ -330,7 +357,7 @@ export function ConceptCompare({
 
                 {/* The kitchen's own wording — the evidence that these are
                     matched rows rather than one row repeated. */}
-                <span className="mt-2 block truncate font-serif text-[14px] italic text-white/90">
+                <span className="mt-2 block truncate font-serif text-[14px] text-white/90">
                   {room.alias}
                 </span>
 
@@ -338,7 +365,11 @@ export function ConceptCompare({
                     is a 0.32-lightness grey that vanishes on inked photography. */}
                 <Separator className="my-2.5 via-white/20" />
 
-                <span className="flex items-baseline gap-2">
+                {/* The figures: the one the badge is about leads — the badge
+                    says what the room won, the number is the evidence. Green
+                    is the cheapest's alone (a dearest room's price in green
+                    would read as cheap); the other winners lead in full white. */}
+                <span className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                   <b
                     className={cn(
                       "text-[19px] font-bold leading-none tabular-nums tracking-[-0.02em]",
@@ -348,7 +379,12 @@ export function ConceptCompare({
                     {formatPrice(room.price)}
                   </b>
                   {room.mentions !== undefined && room.mentions > 0 && (
-                    <span className="text-[11.5px] text-white/65">
+                    <span
+                      className={cn(
+                        "text-[11.5px]",
+                        lead === "mentions" ? "font-bold text-white" : "text-white/65"
+                      )}
+                    >
                       {labels.mentions(room.mentions)}
                     </span>
                   )}

package/src/components/glass-ground.tsx

@@ -2,47 +2,47 @@ import type { CSSProperties } from "react";
 import { cn } from "../lib/utils";
 
 /**
- * GlassGround — a frosted, inked caption rising out of one edge of a
- * photograph.
+ * GlassGround — an inked caption rising out of one edge of a photograph.
  *
- * Layers over a `PhotoGround`: two masked `backdrop-blur`s (the frost) and
- * an ink gradient (the contrast), running in one direction — absent where the
- * photograph is the subject, solid where the type is. `MenuFamilyBlock` drew
- * this first; this is the same idea with the stops as data, so a card can say
- * "clear for 128px, then glass" without a sixth copy of the gradient strings.
+ * One layer over a `PhotoGround`: an ink gradient running in one direction —
+ * absent where the photograph is the subject, solid where the type is.
+ * `MenuFamilyBlock` drew this first; this is the same idea with the stops as
+ * data, so a card can say "clear for 128px, then ink" without a sixth copy of
+ * the gradient string.
  *
- * ## Why two blurs, and why the ramps are eased
+ * ## Why there is no blur any more
  *
- * One blur under a linear mask has an edge: the eye reads the line where
- * sharp becomes soft, however gently the mask fades it in. Two blurs — a
- * light one that starts early and a heavier one that starts late — make the
- * softening itself a gradient (the "progressive blur" of a phone's lock
- * screen), and every ramp here is an ease-in through five stops rather than
- * a straight line, because a straight ramp has a visible crease at each end
- * where its slope changes.
+ * This used to be two masked `backdrop-blur`s under the ink — a progressive
+ * frost. Measured on `/menu` in production (2026-09-14): the page carried 73
+ * backdrop-filter composited layers, six dossiers' worth of these among them,
+ * and the main thread spent 9 ms per scrolled frame re-layerising them
+ * (2.7 s over a six-second fling; 56 ms with backdrop-filter disabled). A
+ * frost is not worth a page that cannot scroll on a phone, so the caption
+ * rests on the ink alone, eased through five stops so the ramp has no crease.
+ * See `docs/audits/audit-menu-page-performance-2026-09-14.md` in the app.
  *
  * ## Why the stops are custom properties
  *
- * Tailwind emits only the classes it can read verbatim, so the gradients
- * cannot be assembled from props into a class. The classes below are literal
- * and read `--glass-*` variables; the component writes those inline, having
+ * Tailwind emits only the classes it can read verbatim, so the gradient
+ * cannot be assembled from props into a class. The class below is literal and
+ * reads `--glass-*` variables; the component writes those inline, having
  * interpolated the quarter stops in JS (`clear` and `full` must share a
  * unit). Same mechanism as `HueChip`'s hue. The ink's colour is the
  * package's one scrim literal, `oklch(0.16 0.012 55)`, never `var(--scrim)`.
  *
  * ## The ramp ends where the type begins
  *
- * `clear` is where the frost starts, `full` where it and the ink are solid.
- * Set `full` to the exact seam the content starts at — a ramp that runs past
- * the seam puts the first row of type on half-frost.
+ * `clear` is where the ink starts, `full` where it is solid. Set `full` to
+ * the exact seam the content starts at — a ramp that runs past the seam puts
+ * the first row of type on half-ink.
  */
 
 export type GlassStops = {
   /** Which way the ink runs — toward the type. */
   direction: "to bottom" | "to right";
-  /** Where the frost begins, e.g. `"0px"` or `"24%"`. */
+  /** Where the ink begins, e.g. `"0px"` or `"24%"`. */
   clear: string;
-  /** Where frost and ink are solid — the seam the content starts at. Same unit as `clear`. */
+  /** Where the ink is solid — the seam the content starts at. Same unit as `clear`. */
   full: string;
 };
 
@@ -52,16 +52,11 @@ export type GlassGroundProps = {
   lgStops?: GlassStops;
   /**
    * How dark the ink gets at the far edge, 0–1. `0.96` is a caption the
-   * photograph is only a texture under; `0.4` is a photograph the caption is
+   * photograph is only a texture under; `0.6` is a photograph the caption is
    * drawn on — the type is lifted, the room stays a room.
    */
   peak?: number;
-  /**
-   * How much the frost softens the photograph where it is solid. `xl` turns
-   * a room into colour; `sm` keeps it a room and only takes the edge off the
-   * detail behind the type.
-   */
-  blur?: "sm" | "md" | "lg" | "xl";
+  /** Placement only. The ink is a `bg-*` on this same element, so a background here would replace it. */
   className?: string;
 };
 
@@ -70,23 +65,9 @@ export type GlassGroundProps = {
 const STOPS = [0, 0.25, 0.5, 0.75, 1] as const;
 const EASE = [0, 0.06, 0.25, 0.56, 1] as const;
 
-/** The light blur starts at once and is solid halfway; the heavy one starts halfway. */
-const FROST_SOFT =
-  "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s0),rgba(0,0,0,0.25)_var(--glass-s1),black_var(--glass-s2))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s0),rgba(0,0,0,0.25)_var(--glass-lg-s1),black_var(--glass-lg-s2))]";
-const FROST_HEAVY =
-  "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s1),rgba(0,0,0,0.25)_var(--glass-s2),rgba(0,0,0,0.6)_var(--glass-s3),black_var(--glass-s4))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s1),rgba(0,0,0,0.25)_var(--glass-lg-s2),rgba(0,0,0,0.6)_var(--glass-lg-s3),black_var(--glass-lg-s4))]";
-
 const INK =
   "bg-[linear-gradient(var(--glass-dir),oklch(0.16_0.012_55_/_0)_var(--glass-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)] lg:bg-[linear-gradient(var(--glass-lg-dir),oklch(0.16_0.012_55_/_0)_var(--glass-lg-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-lg-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-lg-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-lg-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-lg-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)]";
 
-/** Literal, for the scanner: the light and the heavy blur per strength. */
-const BLUR = {
-  sm: ["backdrop-blur-[2px]", "backdrop-blur-sm"],
-  md: ["backdrop-blur-sm", "backdrop-blur-md"],
-  lg: ["backdrop-blur-md", "backdrop-blur-lg"],
-  xl: ["backdrop-blur-lg", "backdrop-blur-xl"],
-} as const;
-
 /** "72px" → [72, "px"]; "24%" → [24, "%"]. */
 function measure(value: string): [number, string] {
   const match = value.trim().match(/^(-?\d*\.?\d+)\s*([a-z%]*)$/i);
@@ -101,13 +82,7 @@ function positions(clear: string, full: string): string[] {
   return STOPS.map((fraction) => `${from + (to - from) * fraction}${unit}`);
 }
 
-export function GlassGround({
-  stops,
-  lgStops = stops,
-  peak = 0.96,
-  blur = "xl",
-  className,
-}: GlassGroundProps) {
+export function GlassGround({ stops, lgStops = stops, peak = 0.96, className }: GlassGroundProps) {
   const base = positions(stops.clear, stops.full);
   const lg = positions(lgStops.clear, lgStops.full);
   const style = {
@@ -120,10 +95,10 @@ export function GlassGround({
   } as CSSProperties;
 
   return (
-    <span aria-hidden className={cn("pointer-events-none absolute inset-0 block", className)} style={style}>
-      <span className={cn("absolute inset-0", BLUR[blur][0], FROST_SOFT)} />
-      <span className={cn("absolute inset-0", BLUR[blur][1], FROST_HEAVY)} />
-      <span className={cn("absolute inset-0", INK)} />
-    </span>
+    <span
+      aria-hidden
+      className={cn("pointer-events-none absolute inset-0 block", INK, className)}
+      style={style}
+    />
   );
 }