@bearmenu/ui 0.8.11 → 0.8.12

package/dist/components/kitchen-dossier.js

@@ -1,9 +1,9 @@
-import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-AKQ57NXY.js';
+import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-ZQ53AGML.js';
 import { VenueQuotes } from '../chunk-43RC7MHY.js';
 import { StoryProvider, StorySegments, StoryPanel } from '../chunk-F6FMZJDG.js';
 import { GlassGround } from '../chunk-WCTHZKU7.js';
 import { Separator } from '../chunk-WSRWFA6K.js';
-import { PhotoGround, PHOTO_GROUND } from '../chunk-5RWTOT5Y.js';
+import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { MessageSquareQuote, Star } from 'lucide-react';
@@ -85,21 +85,18 @@ function KitchenDossier({
     var _a2, _b2;
     return ((_a2 = dimensions[b]) != null ? _a2 : 0) - ((_b2 = dimensions[a]) != null ? _b2 : 0);
   }).slice(0, DIMENSION_LIMIT) : [];
-  if (grade && (grade.overall || strongest.length > 0)) {
+  if (dimensions && strongest.length > 0) {
     parts.push(
-      /* @__PURE__ */ jsx(Part, { kicker: labels.theGrade, children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
-        grade.overall && /* @__PURE__ */ jsx("span", { className: "text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums text-[oklch(0.82_0.15_85)]", children: grade.overall }),
-        dimensions && strongest.length > 0 && /* @__PURE__ */ jsx(
-          VenueGradeDimensions,
-          {
-            className: "min-w-0 flex-1",
-            dimensions,
-            labels: labels.dimensions,
-            order: strongest,
-            formatScore
-          }
-        )
-      ] }) }, "grade")
+      /* @__PURE__ */ jsx(Part, { kicker: labels.theGrade, children: /* @__PURE__ */ jsx(
+        VenueGradeDimensions,
+        {
+          className: "min-w-0",
+          dimensions,
+          labels: labels.dimensions,
+          order: strongest,
+          formatScore
+        }
+      ) }, "grade")
     );
   }
   return /* @__PURE__ */ jsxs(
@@ -153,12 +150,22 @@ function KitchenDossier({
                 /* @__PURE__ */ jsxs("div", { className: "[text-shadow:0_1px_12px_oklch(0_0_0/0.55)]", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [
                     /* @__PURE__ */ jsx("h3", { className: "min-w-0 font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[32px]", children: /* @__PURE__ */ jsx(LinkComponent, { href, className: "focus-visible:outline-none focus-visible:underline", children: place.name }) }),
-                    rating !== void 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]", children: [
+                    (grade == null ? void 0 : grade.overall) ? /* @__PURE__ */ jsxs("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]", children: [
+                      grade.overall,
+                      labels.gradeUnit && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-white/70", children: labels.gradeUnit })
+                    ] }) : rating !== void 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]", children: [
                       rating.toFixed(1),
                       /* @__PURE__ */ jsx(Star, { className: "h-3.5 w-3.5 lg:h-4 lg:w-4", "aria-hidden": true })
                     ] })
                   ] }),
-                  (meta || labels.reviewCount) && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-[12.5px] text-white/70", children: [meta, labels.reviewCount].filter(Boolean).join(" \xB7 ") })
+                  (meta || labels.reviewCount || (grade == null ? void 0 : grade.overall) && rating !== void 0) && /* @__PURE__ */ jsxs("p", { className: "mt-1 flex min-w-0 items-center gap-1 text-[12.5px] text-white/70", children: [
+                    (meta || labels.reviewCount) && /* @__PURE__ */ jsx("span", { className: "truncate", children: [meta, labels.reviewCount].filter(Boolean).join(" \xB7 ") }),
+                    (grade == null ? void 0 : grade.overall) && rating !== void 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 tabular-nums", children: [
+                      (meta || labels.reviewCount) && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                      rating.toFixed(1),
+                      /* @__PURE__ */ jsx(Star, { className: "h-3 w-3", "aria-hidden": true })
+                    ] })
+                  ] })
                 ] }),
                 parts.length > 0 && /* @__PURE__ */ jsx(
                   StoryPanel,

package/dist/components/link-button.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-JS3EINZD.js';
+import { Button } from '../chunk-VAXOQS7W.js';
 import '../chunk-R47NEOSI.js';
 import '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';

package/dist/components/menu-family-block.d.ts

@@ -5,15 +5,16 @@ import 'react';
 import './place-types.js';
 
 /**
- * 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
@@ -22,10 +23,9 @@ import './place-types.js';
  *
  * 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
  *
@@ -67,6 +67,12 @@ 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;
 };

package/dist/components/menu-family-block.js

@@ -1,8 +1,10 @@
 import { MenuKitchenList } from '../chunk-24RFI4RQ.js';
 import { HueChip } from '../chunk-CLLY6XB3.js';
 import { Separator } from '../chunk-WSRWFA6K.js';
-import { PhotoGround, PHOTO_GROUND } from '../chunk-5RWTOT5Y.js';
+import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { buttonVariants } from '../chunk-VAXOQS7W.js';
+import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { Wallet } from 'lucide-react';
@@ -12,10 +14,9 @@ function DefaultLink(_a) {
   var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
 }
-var MOSAIC_TILES = 6;
-var PHONE_TILES = 4;
 var GROUND = PHOTO_GROUND;
-var 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%)]";
+var INK = "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%)]";
+var PAPER = "lg:bg-[oklch(0.21_0.012_55)]";
 var TEXT_SCRIM = (
   /* `isolate` + `before:-z-10`: a positioned pseudo-element paints ABOVE the
      column's in-flow text unless the column is its own stacking context and
@@ -32,11 +33,11 @@ function MenuFamilyBlock({
   linkComponent: LinkComponent = DefaultLink,
   className
 }) {
-  var _a, _b, _c, _d, _e;
-  const photos = ((_a = family.photoUrls) != null ? _a : []).slice(0, MOSAIC_TILES);
-  const overflow = Math.max(family.venueCount - photos.length, 0);
-  const initial = ((_c = (_b = family.name.match(new RegExp("\\p{L}", "u"))) == null ? void 0 : _b[0]) != null ? _c : "").toLocaleUpperCase();
-  const venues = (_d = family.venues) != null ? _d : [];
+  var _a, _b, _c, _d;
+  const [photo] = (_a = family.photoUrls) != null ? _a : [];
+  const venues = (_b = family.venues) != null ? _b : [];
+  const overflow = Math.max(family.venueCount - venues.length, 0);
+  const initial = ((_d = (_c = family.name.match(new RegExp("\\p{L}", "u"))) == null ? void 0 : _c[0]) != null ? _d : "").toLocaleUpperCase();
   return /* @__PURE__ */ jsxs(
     "article",
     {
@@ -48,54 +49,56 @@ function MenuFamilyBlock({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          PhotoGround,
-          {
-            photos: photos.length > 0 ? photos : [void 0],
-            initials: initial,
-            mosaicClassName: photos.length > 0 ? "grid-cols-2 grid-rows-2 lg:grid-cols-3" : "grid-cols-1",
-            phoneTiles: PHONE_TILES,
-            gradient
-          }
-        ),
+        /* @__PURE__ */ jsx(PhotoGround, { photos: [photo], initials: initial, mode: "stack", gradient }),
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-0", INK) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 lg:grid-cols-[38%_1fr]", children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5", TEXT_SCRIM), children: [
-            overflow > 0 && /* @__PURE__ */ jsx("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", children: labels.more(overflow) }),
-            /* @__PURE__ */ jsx("h3", { className: "text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]", children: family.name }),
-            /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[13px] font-medium tabular-nums text-white/70", children: labels.venueUnit(family.venueCount) }),
-            /* @__PURE__ */ jsx(
-              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",
-                children: labels.browse
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", children: [
-            /* @__PURE__ */ jsxs("ul", { className: "flex flex-wrap items-center gap-1.5", children: [
-              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. */
-              /* @__PURE__ */ jsx(
-                HueChip,
-                {
-                  as: "li",
-                  className: "font-bold tabular-nums",
-                  "aria-label": `${labels.priceBand}: ${family.priceBandLabel}`,
-                  icon: /* @__PURE__ */ jsx(Wallet, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
-                  children: family.priceBandLabel
-                }
+        /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 lg:grid-cols-[34%_1fr]", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5",
+                TEXT_SCRIM
               ),
-              (_e = family.chips) == null ? void 0 : _e.map((chip) => (
-                /* Label only. The counts are VENUES beside a dish group's name,
-                   which every reader takes for dishes. */
-                /* @__PURE__ */ jsx(HueChip, { as: "li", hue, children: chip.label }, chip.slug)
-              ))
-            ] }),
+              children: [
+                overflow > 0 && /* @__PURE__ */ jsx("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", children: labels.more(overflow) }),
+                /* @__PURE__ */ jsx("h3", { className: "text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]", children: family.name }),
+                /* @__PURE__ */ jsxs("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", children: [
+                  labels.venueUnit(family.venueCount),
+                  family.priceBandLabel && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "inline-flex items-center gap-1",
+                      "aria-label": `${labels.priceBand}: ${family.priceBandLabel}`,
+                      children: [
+                        /* @__PURE__ */ jsx(Wallet, { className: "h-3.5 w-3.5 shrink-0 text-white/60", "aria-hidden": true }),
+                        family.priceBandLabel
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  LinkComponent,
+                  {
+                    href: family.href,
+                    "aria-label": labels.browse,
+                    className: cn(buttonVariants({ variant: "ink", size: "pill" }), "mt-3.5 w-max max-w-full"),
+                    children: labels.browseShort ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "lg:hidden", children: labels.browse }),
+                      /* @__PURE__ */ jsx("span", { className: "hidden lg:inline", children: labels.browseShort })
+                    ] }) : labels.browse
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", PAPER), children: [
+            family.chips && family.chips.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-1.5 lg:justify-end", children: family.chips.map((chip) => (
+              /* Label only. The counts are VENUES beside a dish group's name,
+                 which every reader takes for dishes. */
+              /* @__PURE__ */ jsx(HueChip, { as: "li", hue, children: chip.label }, chip.slug)
+            )) }),
             venues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Separator, { className: "my-3" }),
+              /* @__PURE__ */ jsx(Separator, { className: "my-3 via-white/15" }),
               /* @__PURE__ */ jsx(
                 MenuKitchenList,
                 {
@@ -120,12 +123,12 @@ function MenuFamilyBlockSkeleton({
     {
       className: cn("dark relative overflow-hidden rounded-[14px]", GROUND, className),
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[38%_1fr]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3.5 lg:min-h-[320px] lg:justify-end lg:p-5", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "mb-16 h-6 w-[72px] self-end rounded-full lg:mb-3 lg:self-start" }),
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[34%_1fr]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "absolute right-3.5 top-3.5 h-6 w-[72px] rounded-full lg:static lg:mb-3" }),
           /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-[60%]" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-3.5 w-[90px]" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-3.5 h-10 w-[160px] rounded-full" })
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-3.5 w-[150px]" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-3.5 h-11 w-[160px] rounded-full" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [

package/dist/components/menu-family-card.js

@@ -1,5 +1,5 @@
 import { HueChip } from '../chunk-CLLY6XB3.js';
-import { PhotoGround, PHOTO_GROUND } from '../chunk-5RWTOT5Y.js';
+import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { Wallet } from 'lucide-react';

package/dist/components/menu-family-tiles.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuFamilyTile, MenuLinkComponent } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+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;
+};
+declare function MenuFamilyTiles({ tiles, all, linkComponent: LinkComponent, className, }: MenuFamilyTilesProps): react_jsx_runtime.JSX.Element;
+
+export { MenuFamilyTiles, type MenuFamilyTilesProps };

package/dist/components/menu-family-tiles.js

@@ -0,0 +1,57 @@
+import { PhotoGround } from '../chunk-CNJQUHCU.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var 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";
+var 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";
+var 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-['']";
+function MenuFamilyTiles({
+  tiles,
+  all,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const cells = all ? [...tiles, all] : tiles;
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-3.5", className), children: cells.map((tile) => /* @__PURE__ */ jsxs(
+    LinkComponent,
+    {
+      href: tile.href,
+      className: cn(TILE, SCRIM),
+      style: tile.gradient ? { backgroundImage: tile.gradient } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: POLAROID, children: 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
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: tile.photoUrl,
+              alt: "",
+              decoding: "async",
+              className: "absolute inset-0 h-full w-full object-cover"
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          PhotoGround,
+          {
+            photos: [void 0],
+            initials: tile.label.charAt(0),
+            mode: "stack",
+            glyphClassName: "text-[44px]"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("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]", children: tile.label }),
+        tile.countLabel && /* @__PURE__ */ jsx("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]", children: tile.countLabel })
+      ]
+    },
+    tile.slug
+  )) });
+}
+
+export { MenuFamilyTiles };

package/dist/components/menu-hub-hero.js

@@ -85,14 +85,16 @@ function MenuHubHero({
             kickerIcon,
             kicker
           ] }),
-          /* @__PURE__ */ jsx("h1", { className: "max-w-[640px] font-serif text-[32px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[50px]", children: headline }),
+          /* @__PURE__ */ jsx("h1", { className: "max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]", children: headline }),
           body && /* @__PURE__ */ jsx("p", { className: "hidden max-w-[540px] text-sm leading-[1.6] opacity-[0.84] lg:block lg:text-[15.5px]", children: body }),
-          figures && figures.length > 0 && // Two by two on the phone: four figures in one row wrapped to three and an orphan.
-          /* @__PURE__ */ jsx("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", children: figures.map((figure) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "text-2xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-[32px]", children: figure.value }),
-            /* @__PURE__ */ jsx("div", { className: "mt-[5px] text-xs opacity-[0.72]", children: figure.label })
+          figures && figures.length > 0 && // 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.
+          /* @__PURE__ */ jsx("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", children: figures.map((figure) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xl font-black leading-none tracking-[-0.02em] tabular-nums lg:text-[32px] lg:tracking-[-0.03em]", children: figure.value }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] leading-tight opacity-[0.72] lg:mt-[5px] lg:text-xs", children: figure.label })
           ] }, figure.label)) }),
-          (proof || action) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-wrap items-center gap-3 pt-5", children: [
+          (proof || action) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-wrap items-center gap-3 pt-4 lg:pt-5", children: [
             proof && /* @__PURE__ */ jsxs("span", { className: "inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]", children: [
               proofIcon,
               proof

package/dist/components/menu-index-list.d.ts

@@ -4,19 +4,24 @@ import 'react';
 import './place-types.js';
 
 /**
- * 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.
  *
- * 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.
+ * 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 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
  *
@@ -24,6 +29,10 @@ import './place-types.js';
  * 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. */
 type MenuIndexListLinkProps = MenuLinkProps;
@@ -33,13 +42,23 @@ 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;
 };
-declare function MenuIndexList({ entries, title, subtitle, formatCount, linkComponent: LinkComponent, className, }: MenuIndexListProps): react_jsx_runtime.JSX.Element;
-/** Two columns on a phone, four from `lg` — the grid the list itself renders. */
+declare function MenuIndexList({ entries, title, subtitle, collapsedCount, expandLabels, hues, linkComponent: LinkComponent, className, }: MenuIndexListProps): react_jsx_runtime.JSX.Element;
+/** One column on a phone, three from `lg` — the grid the list itself renders. */
 declare function MenuIndexListSkeleton({ rows, className, }: {
     rows?: number;
     className?: string;

package/dist/components/menu-index-list.js

@@ -1,8 +1,11 @@
 import { Separator } from '../chunk-WSRWFA6K.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
+import { Button } from '../chunk-VAXOQS7W.js';
+import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import { ChevronRight, ChevronDown } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -13,10 +16,14 @@ function MenuIndexList({
   entries,
   title,
   subtitle,
-  formatCount = String,
+  collapsedCount,
+  expandLabels,
+  hues,
   linkComponent: LinkComponent = DefaultLink,
   className
 }) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsible = collapsedCount !== void 0 && expandLabels !== void 0 && entries.length > collapsedCount;
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -29,44 +36,74 @@ function MenuIndexList({
           /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold tracking-[-0.01em]", children: title }),
           subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12.5px] text-muted-foreground", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8", children: entries.map((entry) => /* @__PURE__ */ jsxs("li", { children: [
-          /* @__PURE__ */ jsx(Separator, {}),
-          /* @__PURE__ */ jsxs(
-            LinkComponent,
+        /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-1 lg:grid-cols-3 lg:gap-x-8", children: entries.map((entry, index) => {
+          var _a;
+          const hue = hues == null ? void 0 : hues[entry.slug];
+          return /* @__PURE__ */ jsxs(
+            "li",
             {
-              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",
+              className: cn(
+                collapsible && !expanded && index >= collapsedCount && "max-lg:hidden"
+              ),
               children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "aria-hidden": true,
-                    className: cn(
-                      "h-2.5 w-2.5 shrink-0 rounded-[3px]",
-                      !entry.gradient && "bg-border"
-                    ),
-                    style: entry.gradient ? { backgroundImage: entry.gradient } : void 0
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13.5px]", children: entry.name }),
-                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[13px] tabular-nums text-muted-foreground", children: formatCount(entry.count) }),
-                /* @__PURE__ */ jsx(
-                  ChevronRight,
+                /* @__PURE__ */ jsx(Separator, {}),
+                /* @__PURE__ */ jsxs(
+                  LinkComponent,
                   {
-                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none",
-                    "aria-hidden": true
+                    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",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn("h-2 w-2 shrink-0 rounded-full", !hue && !entry.gradient && "bg-border"),
+                          style: hue ? { backgroundColor: hue } : entry.gradient ? { backgroundImage: entry.gradient } : void 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: entry.name }),
+                      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[13px] tabular-nums text-muted-foreground", children: (_a = entry.countLabel) != null ? _a : String(entry.count) }),
+                      /* @__PURE__ */ jsx(
+                        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": true
+                        }
+                      )
+                    ]
                   }
                 )
               ]
-            }
-          )
-        ] }, entry.slug)) })
+            },
+            entry.slug
+          );
+        }) }),
+        collapsible && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            fullWidth: true,
+            className: "mt-2 lg:hidden",
+            "aria-expanded": expanded,
+            onClick: () => setExpanded((open) => !open),
+            children: [
+              expanded ? expandLabels.showFewer : expandLabels.showAll,
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn("transition-transform motion-reduce:transition-none", expanded && "rotate-180"),
+                  "aria-hidden": true
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 }
 function MenuIndexListSkeleton({
-  rows = 24,
+  rows = 12,
   className
 }) {
   return /* @__PURE__ */ jsxs(
@@ -80,10 +117,10 @@ function MenuIndexListSkeleton({
       children: [
         /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-[140px]" }),
         /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-[240px]" }),
-        /* @__PURE__ */ jsx("ul", { className: "mt-2 grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("ul", { className: "mt-2 grid grid-cols-1 lg:grid-cols-3 lg:gap-x-8", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("li", { children: [
           /* @__PURE__ */ jsx(Separator, {}),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 py-2.5", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-2.5 rounded-[3px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-2 rounded-full" }),
             /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 flex-1" }),
             /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-6" })
           ] })