@bearmenu/ui 0.8.11 → 0.8.12

package/src/components/menu-family-tiles.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MenuFamilyTiles } from "./menu-family-tiles";
+import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
+
+describe("MenuFamilyTiles", () => {
+  it("renders one link per family plus the index tile, in order", () => {
+    render(<MenuFamilyTiles tiles={mockFamilyTiles} all={mockFamilyTilesAll} />);
+    const links = screen.getAllByRole("link");
+    expect(links).toHaveLength(mockFamilyTiles.length + 1);
+    expect(links[0]).toHaveAttribute("href", mockFamilyTiles[0].href);
+    expect(links.at(-1)).toHaveAttribute("href", mockFamilyTilesAll.href);
+    expect(links.at(-1)).toHaveTextContent(mockFamilyTilesAll.label);
+  });
+
+  // A family without a photograph keeps the polaroid — the initial fills it —
+  // so a row of seven never has one tile with a different silhouette.
+  it("draws the initial where a family has no photograph", () => {
+    const [withPhoto, withoutPhoto] = [mockFamilyTiles[0], mockFamilyTiles.at(-1)!];
+    expect(withoutPhoto.photoUrl).toBeUndefined();
+    render(<MenuFamilyTiles tiles={[withPhoto, withoutPhoto]} />);
+    expect(document.querySelectorAll("img")).toHaveLength(1);
+    expect(screen.getByText(withoutPhoto.label.charAt(0))).toBeInTheDocument();
+  });
+
+  it("omits the index tile when no index is given", () => {
+    render(<MenuFamilyTiles tiles={mockFamilyTiles.slice(0, 3)} />);
+    expect(screen.getAllByRole("link")).toHaveLength(3);
+  });
+});

package/src/components/menu-family-tiles.tsx

@@ -0,0 +1,132 @@
+import { cn } from "../lib/utils";
+import type { MenuFamilyTile, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+import { PhotoGround } from "./photo-ground";
+
+/**
+ * MenuFamilyTiles — the hub's doorways: every family the city browses by, as
+ * a grid of coloured tiles, closed by one tile that opens the whole index.
+ *
+ * ## A tile, not a card
+ *
+ * The family card this replaces was a full-width mosaic with chips, a price
+ * band and a browse pill — a summary of the family, in a rail the reader had
+ * to swipe through one family at a time. The tile is the family's NAME, its
+ * venue count and one photograph on the family's hue, two to a row, so seven
+ * families and the index fit on one phone screen. The reader is choosing a
+ * family here, not learning about one; the summary lives on the page the tile
+ * opens.
+ *
+ * ## The photograph is a polaroid, not a ground
+ *
+ * One square photograph, tilted, running off the tile's top and right edges
+ * — the tile's `overflow-hidden` crops it, so it reads as a print dropped on
+ * the tile rather than a thumbnail placed in it — with the name and the count
+ * in the bottom-left, under the print's lower edge. Not a ground: white type
+ * on a photograph needs a scrim heavy enough to hide the photograph, and the
+ * hue is what tells seven tiles apart at a glance. The photograph is the
+ * FAMILY's — a plate, a room, a glass — served from the consumer's own origin,
+ * never a venue's (a venue on a tile about every venue reads as an
+ * endorsement). A family with no photograph gets the same tilted square
+ * holding `PhotoGround`'s serif initial, so the silhouette never changes.
+ *
+ * Every measure on the polaroid is a percentage of the tile, so the tile and
+ * the design stay in proportion from a 170px phone cell to a 260px desktop
+ * one: 82% of the height, 8% above the top, 4% past the right, 8° over —
+ * measured off the design frame.
+ *
+ * The bottom scrim is mandatory. The honey and terrace hues sit around
+ * `oklch(0.6…)`, where white at 14.5px is about 3:1 — under the 4.5:1 the
+ * label needs. The scrim takes the label's corner down to where it passes on
+ * every hue in the dictionary.
+ *
+ * Server-safe.
+ */
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuFamilyTilesProps = {
+  tiles: MenuFamilyTile[];
+  /**
+   * The closing tile: the index behind the seven, drawn exactly like them —
+   * its own hue and photograph, `countLabel` as the caption. Only its place in
+   * the grid says it is the index. Omit when there is none.
+   */
+  all?: MenuFamilyTile;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * The tile: the design's 16:10, never shorter than two lines of name plus the
+ * count need.
+ */
+const TILE =
+  "group relative isolate flex aspect-[16/10] min-h-[108px] flex-col justify-end overflow-hidden rounded-2xl bg-muted p-3.5 text-white lg:p-4 " +
+  "transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[var(--shadow-card-hover)] active:translate-y-0 active:scale-[0.99] motion-reduce:transition-none " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+
+/**
+ * The polaroid. Same literal family as `PHOTO_GROUND` for the shadow, never a
+ * black `rgba` — the shadow is the ground the card family already stands on.
+ */
+const POLAROID =
+  "absolute -right-[4%] -top-[8%] z-0 block aspect-square h-[82%] overflow-hidden rounded-[10%] rotate-[8deg] " +
+  "shadow-[0_10px_22px_-6px_oklch(0.16_0.012_55_/_0.65)] transition-transform duration-300 group-hover:rotate-[5deg] motion-reduce:transition-none";
+
+const SCRIM =
+  "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:h-3/5 after:bg-gradient-to-t after:from-[oklch(0.16_0.012_55_/_0.55)] after:to-transparent after:content-['']";
+
+export function MenuFamilyTiles({
+  tiles,
+  all,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuFamilyTilesProps) {
+  const cells = all ? [...tiles, all] : tiles;
+
+  return (
+    <div className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className)}>
+      {cells.map((tile) => (
+        <LinkComponent
+          key={tile.slug}
+          href={tile.href}
+          className={cn(TILE, SCRIM)}
+          style={tile.gradient ? { backgroundImage: tile.gradient } : undefined}
+        >
+          <span aria-hidden className={POLAROID}>
+            {tile.photoUrl ? (
+              /* Not lazy: the grid sits directly under the hero, and these
+                 photographs are the first thing the reader looks at. */
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={tile.photoUrl}
+                alt=""
+                decoding="async"
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            ) : (
+              <PhotoGround
+                photos={[undefined]}
+                initials={tile.label.charAt(0)}
+                mode="stack"
+                glyphClassName="text-[44px]"
+              />
+            )}
+          </span>
+
+          {/* Both lines keep to the left 55%: the polaroid owns the right. */}
+          <span className="relative z-[1] line-clamp-2 max-w-[55%] text-[14.5px] font-extrabold leading-[1.2] tracking-[-0.015em] lg:text-[16px]">
+            {tile.label}
+          </span>
+          {tile.countLabel && (
+            <span className="relative z-[1] mt-0.5 max-w-[55%] truncate text-[12px] font-medium leading-[1.35] tabular-nums text-white/80 lg:text-[13px]">
+              {tile.countLabel}
+            </span>
+          )}
+        </LinkComponent>
+      ))}
+    </div>
+  );
+}

package/src/components/menu-hub-hero.tsx

@@ -158,7 +158,9 @@ export function MenuHubHero({
           </span>
         )}
 
-        <h1 className="max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]">
+        {/* 28px on a phone: 32px on a 358px column is five or six words a
+            line, which left "walk in blind." wrapping alone. */}
+        <h1 className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]">
           {headline}
         </h1>
 
@@ -169,21 +171,25 @@ export function MenuHubHero({
         )}
 
         {figures && figures.length > 0 && (
-          // Two by two on the phone: four figures in one row wrapped to three and an orphan.
-          <div className="grid grid-cols-2 gap-x-6 gap-y-3 pt-3 lg:flex lg:flex-wrap lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
+          // One row of four on the phone. It was two by two, which was the
+          // taller half of a 500px hero; at 20px the widest figure ("19,090")
+          // is ~68px and four of them share a 358px column with room.
+          <div className="flex justify-between gap-x-3 pt-2 lg:flex-wrap lg:justify-start lg:gap-x-8 lg:gap-y-4 lg:pt-1.5">
             {figures.map((figure) => (
-              <div key={figure.label}>
-                <div className="text-2xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-[32px]">
+              <div key={figure.label} className="min-w-0">
+                <div className="text-xl font-black leading-none tracking-[-0.02em] tabular-nums lg:text-[32px] lg:tracking-[-0.03em]">
                   {figure.value}
                 </div>
-                <div className="mt-[5px] text-xs opacity-[0.72]">{figure.label}</div>
+                <div className="mt-1 text-[11px] leading-tight opacity-[0.72] lg:mt-[5px] lg:text-xs">
+                  {figure.label}
+                </div>
               </div>
             ))}
           </div>
         )}
 
         {(proof || action) && (
-          <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
+          <div className="mt-auto flex flex-wrap items-center gap-3 pt-4 lg:pt-5">
             {proof && (
               <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]">
                 {proofIcon}

package/src/components/menu-index-list.stories.tsx

@@ -38,8 +38,13 @@ export const Tail: Story = {
   args: { entries: mockIndexEntries.slice(-8), title: "The tail" },
 };
 
-/** Two columns, not one: thirty-eight rows in one column is four screens. */
+/** One column with the expander: twelve rows, then "Show all 38 cuisines". */
 export const Mobile: Story = {
+  args: {
+    collapsedCount: 12,
+    expandLabels: { showAll: "Show all 38 cuisines", showFewer: "Show fewer" },
+  },
+  parameters: { viewport: { defaultViewport: "mobile1" } },
   decorators: [
     (Story) => (
       <div className="w-[390px] bg-background p-3">

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

@@ -1,23 +1,32 @@
-import { ChevronRight } from "lucide-react";
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
 
 /**
- * MenuIndexList — the complete set, four across.
+ * MenuIndexList — the complete set: one column on a phone, three from `lg`.
  *
  * ## This block is why the page can afford to be progressive
  *
  * It carries a crawlable link to EVERY destination the city has — all
- * thirty-eight cuisines, not the ten the page draws in full below. That makes
- * it the page's entire link-equity job, which in turn means the rich blocks
- * underneath are free to load ten at a time behind a "show more": nothing a
- * crawler needs is hidden behind that control, because it is all up here.
+ * thirty-eight cuisines, not the eight the page draws in full above. That
+ * makes it the page's entire link-equity job, which in turn means the rich
+ * blocks are free to load eight at a time behind a "show more": nothing a
+ * crawler needs is hidden behind that control, because it is all here.
+ *
+ * The phone's own "show all" is CSS, not markup: every row is in the DOM and
+ * the ones past `collapsedCount` are hidden below `lg` until the button is
+ * pressed. A list that mounted its tail on tap would have taken twenty-six
+ * links out of the page for the crawler that never taps.
  *
- * Get this backwards — put the whole set behind the disclosure and only ten
- * links in the markup — and the page silently stops linking to twenty-eight
- * pages it is supposed to be the index for.
+ * Get this backwards — put the whole set behind the disclosure and only eight
+ * links in the markup — and the page silently stops linking to thirty pages
+ * it is supposed to be the index for.
  *
  * ## Ordered by count, and the counts overlap
  *
@@ -25,6 +34,10 @@ import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-ty
  * places, because a trattoria is Italian AND pizza AND international. So this
  * is a ranked list of ways in, never a partition, and no copy near it may total
  * the numbers or call them a breakdown.
+ *
+ * A client component for the one piece of state the expander needs; the
+ * `linkComponent` a server caller hands in must therefore be a client
+ * reference (`ClientLink`), not `next/link` itself.
  */
 
 /** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
@@ -40,8 +53,15 @@ export type MenuIndexListProps = {
   title: string;
   /** One line under it, e.g. "Ordered by kitchens — every one has its own page". */
   subtitle?: string;
-  /** Locale-aware integer formatter. Defaults to `String`. */
-  formatCount?: (value: number) => string;
+  /**
+   * Rows shown on a phone before the expander; the rest are hidden below `lg`
+   * until it is pressed. Omit to show every row at every width.
+   */
+  collapsedCount?: number;
+  /** The expander's labels, e.g. "Show all 38 cuisines" / "Show fewer". */
+  expandLabels?: { showAll: string; showFewer: string };
+  /** The colour mark beside each name, keyed by slug. Falls back to the border colour. */
+  hues?: Record<string, string>;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -50,10 +70,16 @@ export function MenuIndexList({
   entries,
   title,
   subtitle,
-  formatCount = String,
+  collapsedCount,
+  expandLabels,
+  hues,
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuIndexListProps) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsible =
+    collapsedCount !== undefined && expandLabels !== undefined && entries.length > collapsedCount;
+
   return (
     <section
       className={cn(
@@ -68,55 +94,76 @@ export function MenuIndexList({
         )}
       </div>
 
-      {/*
-        Two columns on a phone, four from `lg`. One column at 390px turns
-        thirty-eight rows into four screens of scrolling for a list whose whole
-        job is to be scanned; two halves that, and the row still holds a name of
-        realistic length beside its count.
-      */}
-      <ul className="grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
-        {entries.map((entry) => (
-          <li key={entry.slug}>
-            {/* The DS `Separator`, above every row including the first.
-                It was `border-t … first:border-t-0 lg:first:border-t`, which
-                only exempted the very FIRST entry — so in the two-column phone
-                layout the top-left row had no rule and the top-right one, its
-                own neighbour, did. Ruling every row is both uniform and simpler
-                than restoring the exception per breakpoint. */}
-            <Separator />
-            <LinkComponent
-              href={entry.href}
-              className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+      {/* One column on a phone — a row holds a name of realistic length, its
+          count and the chevron with room to spare, and the expander keeps the
+          list to twelve rows until asked. Three from `lg`. */}
+      <ul className="grid grid-cols-1 lg:grid-cols-3 lg:gap-x-8">
+        {entries.map((entry, index) => {
+          const hue = hues?.[entry.slug];
+          return (
+            <li
+              key={entry.slug}
+              className={cn(
+                collapsible && !expanded && index >= collapsedCount && "max-lg:hidden"
+              )}
             >
-              <span
-                aria-hidden
-                className={cn(
-                  "h-2.5 w-2.5 shrink-0 rounded-[3px]",
-                  !entry.gradient && "bg-border"
-                )}
-                style={entry.gradient ? { backgroundImage: entry.gradient } : undefined}
-              />
-              <span className="min-w-0 flex-1 truncate text-[13.5px]">{entry.name}</span>
-              <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
-                {formatCount(entry.count)}
-              </span>
-              <ChevronRight
-                className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
-                aria-hidden
-              />
-            </LinkComponent>
-          </li>
-        ))}
+              {/* The DS `Separator`, above every row including the first, so
+                  the rule is uniform across columns. */}
+              <Separator />
+              <LinkComponent
+                href={entry.href}
+                className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+              >
+                {/* The family's mark: a dot in its hue. */}
+                <span
+                  aria-hidden
+                  className={cn("h-2 w-2 shrink-0 rounded-full", !hue && !entry.gradient && "bg-border")}
+                  style={
+                    hue
+                      ? { backgroundColor: hue }
+                      : entry.gradient
+                        ? { backgroundImage: entry.gradient }
+                        : undefined
+                  }
+                />
+                <span className="min-w-0 flex-1 truncate text-sm font-medium">{entry.name}</span>
+                <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
+                  {entry.countLabel ?? String(entry.count)}
+                </span>
+                <ChevronRight
+                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
+                  aria-hidden
+                />
+              </LinkComponent>
+            </li>
+          );
+        })}
       </ul>
+
+      {collapsible && (
+        <Button
+          variant="outline"
+          fullWidth
+          className="mt-2 lg:hidden"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((open) => !open)}
+        >
+          {expanded ? expandLabels.showFewer : expandLabels.showAll}
+          <ChevronDown
+            className={cn("transition-transform motion-reduce:transition-none", expanded && "rotate-180")}
+            aria-hidden
+          />
+        </Button>
+      )}
     </section>
   );
 }
 
 // ─── Skeleton ───────────────────────────────────────────────────────────────
 
-/** Two columns on a phone, four from `lg` — the grid the list itself renders. */
+/** One column on a phone, three from `lg` — the grid the list itself renders. */
 export function MenuIndexListSkeleton({
-  rows = 24,
+  rows = 12,
   className,
 }: {
   rows?: number;
@@ -132,12 +179,12 @@ export function MenuIndexListSkeleton({
     >
       <Skeleton className="h-[15px] w-[140px]" />
       <Skeleton className="mt-1.5 h-3 w-[240px]" />
-      <ul className="mt-2 grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
+      <ul className="mt-2 grid grid-cols-1 lg:grid-cols-3 lg:gap-x-8">
         {Array.from({ length: rows }, (_, index) => (
           <li key={index}>
             <Separator />
             <div className="flex items-center gap-2.5 py-2.5">
-              <Skeleton className="h-2.5 w-2.5 rounded-[3px]" />
+              <Skeleton className="h-2 w-2 rounded-full" />
               <Skeleton className="h-3.5 flex-1" />
               <Skeleton className="h-3 w-6" />
             </div>

package/src/components/menu-intent-hero.tsx

@@ -55,7 +55,7 @@ export type MenuIntentHeroProps = {
    * Finished CSS gradient for the ground, e.g. `linear-gradient(140deg, …)`.
    *
    * A gradient rather than a token name, for the same reason `<MenuField>` and
-   * `<MenuIntentTiles>` take one: the hue tables are app-owned, and a component
+   * `<MenuFamilyTiles>` take one: the hue tables are app-owned, and a component
    * referencing `var(--h-pizza)` renders an unstyled panel in any consumer that
    * does not define it. Missing, the panel falls back to the foreground colour
    * — visibly unstyled rather than white text on white.

package/src/components/menu-mocks.ts

@@ -25,7 +25,7 @@ import type {
   MenuFilterChip,
   MenuIndexEntry,
   MenuIntentFigure,
-  MenuIntentTile,
+  MenuFamilyTile,
   MenuItemPreview,
   MenuKitchenPreview,
   MenuLoosenOption,
@@ -372,18 +372,41 @@ export const mockDrinkFamily: MenuFamilyPreview = {
   venue_photo_urls: [],
 };
 
-const intentGradient = (hue: number) =>
+const familyGradient = (hue: number) =>
   `linear-gradient(150deg, oklch(0.52 0.14 ${hue}), oklch(0.43 0.13 ${hue - 4}))`;
 
-export const mockIntentTiles: MenuIntentTile[] = [
-  { slug: "italian", label: "Italian tonight", caption: "247 kitchens", href: "/top/italian?open=now", gradient: intentGradient(40) },
-  { slug: "burgeri", label: "Burgers", caption: "229 kitchens", href: "/top/burgeri", gradient: intentGradient(25) },
-  { slug: "restaurante", label: "Open right now", caption: "by the hour", href: "/top/restaurante?open=now", gradient: intentGradient(60) },
-  { slug: "brunch", label: "Brunch", caption: "314 kitchens", href: "/top/brunch", gradient: intentGradient(75) },
-  { slug: "vegan", label: "Vegan", caption: "108 kitchens", href: "/top/vegan", gradient: intentGradient(148) },
-  { slug: "centru", label: "In Centru", caption: "by neighbourhood", href: "/top/centru", gradient: intentGradient(300) },
+/** A venue photograph stand-in: a tinted room, not a plate. */
+const familyPhoto = (hue: number) =>
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 28% 60%)"/><stop offset="1" stop-color="hsl(${hue} 22% 26%)"/></linearGradient></defs><rect width="320" height="320" fill="url(#g)"/><circle cx="100" cy="110" r="56" fill="hsl(${hue} 40% 82%)" opacity=".55"/><rect x="170" y="190" width="120" height="90" fill="hsl(${hue} 15% 18%)" opacity=".7"/></svg>`
+  );
+
+/**
+ * The hub's seven cuisines, in the registry's order. The photograph is a
+ * venue's, never a plate's; the last one ships without, so the story shows
+ * the initial fallback beside six real tiles.
+ */
+export const mockFamilyTiles: MenuFamilyTile[] = [
+  { slug: "italian", label: "Italian", countLabel: "66", href: "/menu/cuisines/italian", gradient: familyGradient(38), photoUrl: familyPhoto(30) },
+  { slug: "romanian", label: "Romanian", countLabel: "64", href: "/menu/cuisines/romanian", gradient: familyGradient(25), photoUrl: familyPhoto(10) },
+  { slug: "breakfast-brunch", label: "Breakfast & brunch", countLabel: "64", href: "/menu/cuisines/breakfast-brunch", gradient: familyGradient(82), photoUrl: familyPhoto(45) },
+  { slug: "vegetarian", label: "Vegetarian", countLabel: "64", href: "/menu/cuisines/vegetarian", gradient: familyGradient(148), photoUrl: familyPhoto(120) },
+  { slug: "pizza", label: "Pizza", countLabel: "63", href: "/menu/cuisines/pizza", gradient: familyGradient(58), photoUrl: familyPhoto(20) },
+  { slug: "vegan", label: "Vegan", countLabel: "38", href: "/menu/cuisines/vegan", gradient: familyGradient(135), photoUrl: familyPhoto(100) },
+  { slug: "bakery", label: "Bakeries & patisseries", countLabel: "65", href: "/menu/cuisines/bakery", gradient: familyGradient(72) },
 ];
 
+/** The closing tile: stone, so it reads as the index and not as an eighth cuisine. */
+export const mockFamilyTilesAll: MenuFamilyTile = {
+  slug: "all",
+  label: "All 38 cuisines",
+  countLabel: "The full index",
+  href: "/menu/cuisines",
+  gradient: "linear-gradient(150deg, oklch(0.50 0.03 70), oklch(0.40 0.028 64))",
+  photoUrl: familyPhoto(60),
+};
+
 /** Formatters the stories pass. Real callers inject locale-aware ones. */
 export const mockFormatters = {
   price: (value: number) => `${value} lei`,

package/src/components/menu-types.ts

@@ -134,6 +134,20 @@ export type MenuConceptRow = {
   featured?: boolean
   /** Portion, already formatted with its unit, e.g. "260g". */
   portion_label?: string
+  /**
+   * What this room WON — "CHEAPEST", "MOST NAMED", "HIGHEST GRADE",
+   * "DEAREST" — already localised. A card whose rooms are four winners rather
+   * than four ranks sets one per room; without it the card falls back to
+   * "cheapest, then #2, #3, #4".
+   */
+  badge?: string
+  /** Which figure the badge is about; that figure is emphasised. */
+  lead?: 'price' | 'mentions' | 'grade'
+  /**
+   * The venue's BearMenu grade, pre-formatted ("9.2"). Takes the star's
+   * place beside the kitchen's name; `rating` (Google's) shows only without it.
+   */
+  grade?: string
 }
 
 /**
@@ -203,17 +217,21 @@ export type MenuVenueSignature = {
 }
 
 /**
- * An intent tile — a family plus a constraint, resolving to a category page.
+ * A family tile — a cuisine on the dishes tab, a going-out family on the
+ * drinks tab — as the hub's doorway grid draws it: a hue, a name, a venue
+ * count and one venue's photograph.
  *
- * Only about thirty-two of the thirty-eight cuisines have a page, so `href` is
- * required: a tile that cannot resolve to a real destination is not rendered
- * rather than linking nowhere.
+ * `href` is required: a tile that cannot resolve to a real destination is not
+ * rendered rather than linking nowhere.
  */
-export type MenuIntentTile = {
+export type MenuFamilyTile = {
   slug: string
   label: string
-  /** Supporting line, e.g. "247 kitchens". Already formatted by the caller. */
-  caption?: string
+  /**
+   * The venue count, already formatted by the caller — "64", "1,204" — because
+   * thousands separators are locale-dependent and the DS owns no locale.
+   */
+  countLabel?: string
   href: string
   /**
    * Finished CSS gradient for the tile's ground, e.g.
@@ -226,8 +244,8 @@ export type MenuIntentTile = {
    * — visible and obviously unstyled, rather than white text on white.
    */
   gradient?: string
-  /** Icon node, resolved by the caller — the DS does not pick icons for it. */
-  icon?: ReactNode
+  /** Pre-resolved VENUE photograph. Venue photography is real; item photography is not. */
+  photoUrl?: string
 }
 
 /**
@@ -351,6 +369,11 @@ export type MenuIndexEntry = {
   slug: string
   name: string
   count: number
+  /**
+   * `count`, already formatted ("1,204"). The list is a client component and a
+   * formatter cannot cross into it from a server caller; a string can.
+   */
+  countLabel?: string
   href: string
   /** Finished CSS gradient for the mark. Falls back to the border colour. */
   gradient?: string

package/src/components/photo-ground.tsx

@@ -62,6 +62,12 @@ export type PhotoGroundProps = {
   overlayClassName?: string;
   /** How eagerly the first photograph loads. `stack` grounds are above the fold. */
   loading?: "lazy" | "eager";
+  /**
+   * Classes on the fallback initial — its size, when the ground is smaller
+   * than a card. The 64px default fills a card cell; a tile's 88px polaroid
+   * passes `text-[44px]`.
+   */
+  glyphClassName?: string;
   className?: string;
 };
 
@@ -76,6 +82,7 @@ export function PhotoGround({
   overlay,
   overlayClassName,
   loading = "lazy",
+  glyphClassName,
   className,
 }: PhotoGroundProps) {
   const initialOf = (index: number) =>
@@ -100,7 +107,12 @@ export function PhotoGround({
              photograph is not a broken image, and drawing one as a placeholder
              makes a real city look unfinished. */
           <span className="absolute inset-0 flex items-center justify-center">
-            <span className="font-serif text-[64px] font-semibold leading-none text-white/15">
+            <span
+              className={cn(
+                "font-serif text-[64px] font-semibold leading-none text-white/15",
+                glyphClassName
+              )}
+            >
               {initialOf(index)}
             </span>
           </span>

package/src/components/venue-grade-dimensions.tsx

@@ -74,12 +74,19 @@ export function VenueGradeDimensions({
           <dd className="text-[15px] font-extrabold tracking-[-0.02em] tabular-nums">
             {formatScore(value)}
           </dd>
+          {/* The track is `currentColor` at low alpha rather than `bg-muted`:
+              on the dossier's ink `--muted` is within a hair of the ground
+              and the empty bar vanished. */}
           <div
             aria-hidden
-            className="relative block h-[3px] overflow-hidden rounded-full bg-muted"
+            className="relative block h-[3px] overflow-hidden rounded-full bg-current/15"
           >
+            {/* `bg-[image:…]`, not `bg-[…]`: `--gradient-primary` is a
+                linear-gradient, and as a background-COLOR it is an invalid
+                declaration the browser drops — the fill rendered at the right
+                width with no paint at all. */}
             <span
-              className="absolute inset-y-0 left-0 rounded-full bg-[var(--gradient-primary,currentColor)]"
+              className="absolute inset-y-0 left-0 rounded-full bg-current bg-[image:var(--gradient-primary)]"
               style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
             />
           </div>