@bearmenu/ui 0.8.11 → 0.8.12

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;
@@ -277,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
@@ -312,7 +320,7 @@ export function ConceptCompare({
                   )}
                 >
                   {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
@@ -322,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 && (
@@ -343,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]",
@@ -353,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/item.tsx

@@ -52,63 +52,87 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
 );
 Item.displayName = "Item";
 
-const ItemMedia = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-media"
-      className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
-      {...props}
-    />
-  )
+/**
+ * The parts take `asChild` too. An `Item asChild` around a `<button>` makes
+ * the parts the button's children, and a button may hold only phrasing
+ * content — so the parts have to be able to render as `<span>`s there.
+ */
+type ItemPartProps = React.HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+};
+
+const ItemMedia = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-media"
+        className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemMedia.displayName = "ItemMedia";
 
-const ItemContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-content"
-      className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
-      {...props}
-    />
-  )
+const ItemContent = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-content"
+        className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemContent.displayName = "ItemContent";
 
-const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-title"
-      className={cn("truncate text-sm font-semibold text-foreground", className)}
-      {...props}
-    />
-  )
+const ItemTitle = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-title"
+        className={cn("truncate text-sm font-semibold text-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemTitle.displayName = "ItemTitle";
 
-const ItemDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-description"
-      className={cn("truncate text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
+const ItemDescription = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-description"
+        className={cn("truncate text-xs text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemDescription.displayName = "ItemDescription";
 
-const ItemActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="item-actions"
-      className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
-      {...props}
-    />
-  )
+const ItemActions = React.forwardRef<HTMLDivElement, ItemPartProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item-actions"
+        className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
+        {...props}
+      />
+    );
+  }
 );
 ItemActions.displayName = "ItemActions";
 

package/src/components/kitchen-dossier.tsx

@@ -72,6 +72,8 @@ export type KitchenDossierLabels = {
   next: string;
   /** Dimension key → translated label. */
   dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+  /** Beside the grade in the title row, e.g. "/10". Omit for the bare numeral. */
+  gradeUnit?: string;
 };
 
 export type KitchenDossierProps = {
@@ -202,25 +204,18 @@ export function KitchenDossier({
         .sort((a, b) => (dimensions[b] ?? 0) - (dimensions[a] ?? 0))
         .slice(0, DIMENSION_LIMIT)
     : [];
-  if (grade && (grade.overall || strongest.length > 0)) {
+  // The overall grade leads the title row now, so the part shows what the
+  // title cannot: the three strongest dimensions. No numeral repeated.
+  if (dimensions && strongest.length > 0) {
     parts.push(
       <Part key="grade" kicker={labels.theGrade}>
-        <div className="flex items-end gap-4">
-          {grade.overall && (
-            <span className="text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums text-[oklch(0.82_0.15_85)]">
-              {grade.overall}
-            </span>
-          )}
-          {dimensions && strongest.length > 0 && (
-            <VenueGradeDimensions
-              className="min-w-0 flex-1"
-              dimensions={dimensions}
-              labels={labels.dimensions}
-              order={strongest}
-              formatScore={formatScore}
-            />
-          )}
-        </div>
+        <VenueGradeDimensions
+          className="min-w-0"
+          dimensions={dimensions}
+          labels={labels.dimensions}
+          order={strongest}
+          formatScore={formatScore}
+        />
       </Part>
     );
   }
@@ -281,16 +276,42 @@ export function KitchenDossier({
                   {place.name}
                 </LinkComponent>
               </h3>
-              {rating !== undefined && (
-                <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
-                  {rating.toFixed(1)}
-                  <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+              {/* The GRADE leads — the number the rail is named for, in the
+                  grade's amber. Google's star used to sit here while the
+                  grade waited in story part three; a card rated by BearMenu
+                  cannot lead with a number BearMenu did not compute. The
+                  star drops to the meta line, and the title row only falls
+                  back to it for a kitchen with no grade. */}
+              {grade?.overall ? (
+                <span className="inline-flex shrink-0 items-baseline gap-1 text-[22px] font-extrabold leading-none tabular-nums text-[oklch(0.82_0.15_85)] lg:text-[26px]">
+                  {grade.overall}
+                  {labels.gradeUnit && (
+                    <span className="text-[11px] font-bold text-white/70">{labels.gradeUnit}</span>
+                  )}
                 </span>
+              ) : (
+                rating !== undefined && (
+                  <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
+                    {rating.toFixed(1)}
+                    <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+                  </span>
+                )
               )}
             </div>
-            {(meta || labels.reviewCount) && (
-              <p className="mt-1 truncate text-[12.5px] text-white/70">
-                {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+            {(meta || labels.reviewCount || (grade?.overall && rating !== undefined)) && (
+              <p className="mt-1 flex min-w-0 items-center gap-1 text-[12.5px] text-white/70">
+                {(meta || labels.reviewCount) && (
+                  <span className="truncate">
+                    {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+                  </span>
+                )}
+                {grade?.overall && rating !== undefined && (
+                  <span className="inline-flex shrink-0 items-center gap-1 tabular-nums">
+                    {(meta || labels.reviewCount) && <span aria-hidden>·</span>}
+                    {rating.toFixed(1)}
+                    <Star className="h-3 w-3" aria-hidden />
+                  </span>
+                )}
               </p>
             )}
           </div>

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

@@ -1,5 +1,6 @@
 import { Wallet } from "lucide-react";
 import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
 import { HueChip } from "./hue-chip";
 import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
 import { Separator } from "./separator";
@@ -12,15 +13,16 @@ import type {
 } from "./menu-types";
 
 /**
- * MenuFamilyBlock — the cuisines index's family card. The mosaic is the ground.
+ * MenuFamilyBlock — the cuisines index's family card. One photograph is the ground.
  *
  * ## Three layers, and everything floats on them
  *
- * The grid of venue photographs is the background for the ENTIRE card, edge to
- * edge, and the facts sit on it. Three layers do the work:
+ * One venue photograph is the background for the ENTIRE card, edge to edge,
+ * and the facts sit on it. Three layers do the work:
  *
- *  1. **The mosaic**, full-bleed, wearing the family's hue through a
- *     `mix-blend-color` layer.
+ *  1. **The photograph**, full-bleed, wearing the family's hue through a
+ *     `mix-blend-color` layer. It was a mosaic of six; the design draws one
+ *     plate, and six tiles under the ink read as texture rather than a room.
  *  2. **An ink gradient** — absent where the photography is the subject, full
  *     where the rows begin. This is what buys the contrast. There used to be a
  *     masked backdrop-filter under it; it was removed for the measurement
@@ -29,10 +31,9 @@ import type {
  *
  * On the phone the ink runs top to bottom: the name and the action sit on
  * clear photography, the chips and the rows on the inked foot. On desktop the
- * same layers turn ninety degrees — the photo column on the left stays clear,
- * the row column on the right is the inked one. The mosaic
- * runs 3×2 there rather than 2×2, because at 1110px a four-tile grid makes each
- * photograph too big to read as texture.
+ * photo column on the left (a third) stays clear, and the row column on the
+ * right is opaque paper in the card's own dark — three venue rows never sit
+ * on a photograph.
  *
  * ## The dark scope
  *
@@ -80,6 +81,12 @@ export type MenuFamilyBlockLabels = {
   priceBand: string;
   /** Main action, e.g. "Browse Italian". Sits on the photography — keep it short. */
   browse: string;
+  /**
+   * The action from `lg`, where the photo column is a third of the card and
+   * "Browse Bakeries & patisseries" does not fit — e.g. "Browse". The full
+   * `browse` stays the accessible name.
+   */
+  browseShort?: string;
   /** Passed through to the venue rows. */
   kitchens: MenuKitchenListLabels;
 };
@@ -96,22 +103,22 @@ export type MenuFamilyBlockProps = {
   className?: string;
 };
 
-/** 2×2 on the phone, 3×2 from `lg`. Tiles past the fourth are desktop-only. */
-const MOSAIC_TILES = 6;
-const PHONE_TILES = 4;
-
 /** The card's ground is `PhotoGround`'s, so the two cannot differ. */
 const GROUND = PHOTO_GROUND;
 
 /**
- * The ink. Absent at the top, heavier at the foot on the phone; absent on the
- * left, full on the right from `lg`. It is the
+ * The ink. Nearly absent at the top, heavier at the foot on the phone — the
+ * top 40% is the photograph, the rows sit on 0.92+; a to-right ramp from
+ * `lg`, where the row column brings its own opaque paper anyway. It is the
  * layer the contrast rests on. Literal rather than `var(--scrim)`: that token
  * lives in the app's stylesheet, not this package's, so a DS component reading
  * it renders nothing in Storybook and the other three consumers.
  */
 const INK =
-  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.42)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.9)_48%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+
+/** The row column's paper from `lg`: the card's dark, opaque. */
+const PAPER = "lg:bg-[oklch(0.21_0.012_55)]";
 
 /**
  * A second, LOCAL scrim under the name, count and action — the photo column's
@@ -140,10 +147,12 @@ export function MenuFamilyBlock({
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuFamilyBlockProps) {
-  const photos = (family.photoUrls ?? []).slice(0, MOSAIC_TILES);
-  const overflow = Math.max(family.venueCount - photos.length, 0);
-  const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+  const [photo] = family.photoUrls ?? [];
+  // "+N more" counts past the rows shown, which are the venues the reader can
+  // see — the photograph is one of them, not a venue on its own.
   const venues = family.venues ?? [];
+  const overflow = Math.max(family.venueCount - venues.length, 0);
+  const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
 
   return (
     <article
@@ -155,30 +164,26 @@ export function MenuFamilyBlock({
         className
       )}
     >
-      {/* ── Layer 1: the photographs, wearing the family's colour ──────── */}
-      {/* A 2×2 on the phone, 3×2 from `lg`: at 1110px a four-tile grid makes
-          each photograph too big to read as texture. With no photographs at
-          all, one slot with the family's initial. */}
-      <PhotoGround
-        photos={photos.length > 0 ? photos : [undefined]}
-        initials={initial}
-        mosaicClassName={
-          photos.length > 0 ? "grid-cols-2 grid-rows-2 lg:grid-cols-3" : "grid-cols-1"
-        }
-        phoneTiles={PHONE_TILES}
-        gradient={gradient}
-      />
+      {/* ── Layer 1: the photograph, wearing the family's colour ───────── */}
+      {/* One venue's photograph, or the family's initial on the ground. */}
+      <PhotoGround photos={[photo]} initials={initial} mode="stack" gradient={gradient} />
 
       {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
       <span aria-hidden className={cn("absolute inset-0", INK)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
-      <div className="relative grid grid-cols-1 lg:grid-cols-[38%_1fr]">
-        {/* The photo column. On the phone it is the card's head; on desktop
-            the left third, with its stack anchored to the foot. */}
-        <div className={cn("relative flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5", TEXT_SCRIM)}>
+      <div className="relative grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+        {/* The photo column. On the phone it is the card's head, with the
+            overflow pill pinned to the corner and the photograph clear above
+            the name; on desktop the left third, its stack anchored to the foot. */}
+        <div
+          className={cn(
+            "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5",
+            TEXT_SCRIM
+          )}
+        >
           {overflow > 0 && (
-            <span className="mb-16 self-end rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:mb-3 lg:self-start">
+            <span className="absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:static lg:mb-3 lg:self-start">
               {labels.more(overflow)}
             </span>
           )}
@@ -186,55 +191,57 @@ export function MenuFamilyBlock({
           <h3 className="text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]">
             {family.name}
           </h3>
-          <span className="mt-0.5 block text-[13px] font-medium tabular-nums text-white/70">
+          {/* The count and the band on one line: two facts about the family,
+              read together — "96 kitchens, 14–46 lei". */}
+          <span className="mt-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[13px] font-medium tabular-nums text-white/70">
             {labels.venueUnit(family.venueCount)}
+            {family.priceBandLabel && (
+              <span
+                className="inline-flex items-center gap-1"
+                aria-label={`${labels.priceBand}: ${family.priceBandLabel}`}
+              >
+                <Wallet className="h-3.5 w-3.5 shrink-0 text-white/60" aria-hidden />
+                {family.priceBandLabel}
+              </span>
+            )}
           </span>
 
-          {/* The action, as a translucent pill on the photography. `bg-white/16`
-              on the ink rather than `bg-accent`: ten filled accent buttons on
-              one page is ten primary actions, and the pill reads as part of the
-              picture rather than as a control laid on top of it.
-
-              No glyph. An arrow read as "leaves the site" beside a label that
-              already says where it goes, and a chevron would have made the pill
-              one more row: every venue row to its right ends in exactly that
-              chevron. The shape and the label are the whole affordance. */}
+          {/* The hub's one action on ink. No glyph: a chevron would have made
+              the pill one more row, and every venue row beside it ends in
+              exactly that chevron. */}
           <LinkComponent
             href={family.href}
-            className="mt-3.5 inline-flex h-10 w-max items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors hover:bg-white/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white motion-reduce:transition-none"
+            aria-label={labels.browse}
+            className={cn(buttonVariants({ variant: "ink", size: "pill" }), "mt-3.5 w-max max-w-full")}
           >
-            {labels.browse}
+            {labels.browseShort ? (
+              <>
+                <span className="lg:hidden">{labels.browse}</span>
+                <span className="hidden lg:inline">{labels.browseShort}</span>
+              </>
+            ) : (
+              labels.browse
+            )}
           </LinkComponent>
         </div>
 
-        {/* The inked column: chips, then the rows. */}
-        <div className="flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5">
-          <ul className="flex flex-wrap items-center gap-1.5">
-            {family.priceBandLabel && (
-              /* No hue: a fact about money, not about the family. In the dark
-                 scope `HueChip`'s `--muted` fallback is the dark pill the design
-                 draws. */
-              <HueChip
-                as="li"
-                className="font-bold tabular-nums"
-                aria-label={`${labels.priceBand}: ${family.priceBandLabel}`}
-                icon={<Wallet className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />}
-              >
-                {family.priceBandLabel}
-              </HueChip>
-            )}
-            {family.chips?.map((chip) => (
-              /* Label only. The counts are VENUES beside a dish group's name,
-                 which every reader takes for dishes. */
-              <HueChip key={chip.slug} as="li" hue={hue}>
-                {chip.label}
-              </HueChip>
-            ))}
-          </ul>
+        {/* The row column: chips, then the rows, on paper from `lg`. */}
+        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", PAPER)}>
+          {family.chips && family.chips.length > 0 && (
+            <ul className="flex flex-wrap items-center gap-1.5 lg:justify-end">
+              {family.chips.map((chip) => (
+                /* Label only. The counts are VENUES beside a dish group's name,
+                   which every reader takes for dishes. */
+                <HueChip key={chip.slug} as="li" hue={hue}>
+                  {chip.label}
+                </HueChip>
+              ))}
+            </ul>
+          )}
 
           {venues.length > 0 && (
             <>
-              <Separator className="my-3" />
+              <Separator className="my-3 via-white/15" />
               <MenuKitchenList
                 kitchens={venues}
                 labels={labels.kitchens}
@@ -270,12 +277,12 @@ export function MenuFamilyBlockSkeleton({
       className={cn("dark relative overflow-hidden rounded-[14px]", GROUND, className)}
       aria-hidden
     >
-      <div className="grid grid-cols-1 lg:grid-cols-[38%_1fr]">
-        <div className="flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5">
-          <Skeleton className="mb-16 h-6 w-[72px] self-end rounded-full lg:mb-3 lg:self-start" />
+      <div className="grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+        <div className="relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5">
+          <Skeleton className="absolute right-3.5 top-3.5 h-6 w-[72px] rounded-full lg:static lg:mb-3" />
           <Skeleton className="h-7 w-[60%]" />
-          <Skeleton className="mt-2 h-3.5 w-[90px]" />
-          <Skeleton className="mt-3.5 h-10 w-[160px] rounded-full" />
+          <Skeleton className="mt-2 h-3.5 w-[150px]" />
+          <Skeleton className="mt-3.5 h-11 w-[160px] rounded-full" />
         </div>
         <div className="flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5">
           <div className="flex gap-1.5">

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuFamilyTiles } from "./menu-family-tiles";
+import { mockFamilyTiles, mockFamilyTilesAll } from "./menu-mocks";
+
+const meta: Meta<typeof MenuFamilyTiles> = {
+  title: "Menu/MenuFamilyTiles",
+  component: MenuFamilyTiles,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's doorways: every family the city browses by, as a grid of coloured tiles — the family's name, its venue count and one venue's photograph tilted off the corner — closed by one tile that opens the whole index. Two to a row on a phone, four from `lg`, so seven families and the index make two rows at every width.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFamilyTiles>;
+
+export const Default: Story = { args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll } };
+
+/** Two-up on a phone — seven families and the index in four rows. */
+export const Mobile: Story = {
+  args: { tiles: mockFamilyTiles, all: mockFamilyTilesAll },
+  // The grid's columns follow the viewport, not the wrapper.
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No photographs anywhere: every polaroid holds the family's initial. */
+export const WithoutPhotos: Story = {
+  args: {
+    tiles: mockFamilyTiles.map(({ photoUrl: _photoUrl, ...tile }) => tile),
+    all: { ...mockFamilyTilesAll, photoUrl: undefined },
+  },
+};
+
+/** The drinks tab's five going-out families, no index tile. */
+export const Partial: Story = { args: { tiles: mockFamilyTiles.slice(0, 5) } };