@bearmenu/ui 0.8.10 → 0.8.12

package/dist/components/item.js

@@ -48,9 +48,10 @@ var Item = React.forwardRef(
 Item.displayName = "Item";
 var ItemMedia = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
-      "div",
+      Comp,
       __spreadValues({
         ref,
         "data-slot": "item-media",
@@ -62,9 +63,10 @@ var ItemMedia = React.forwardRef(
 ItemMedia.displayName = "ItemMedia";
 var ItemContent = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
-      "div",
+      Comp,
       __spreadValues({
         ref,
         "data-slot": "item-content",
@@ -76,9 +78,10 @@ var ItemContent = React.forwardRef(
 ItemContent.displayName = "ItemContent";
 var ItemTitle = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
-      "div",
+      Comp,
       __spreadValues({
         ref,
         "data-slot": "item-title",
@@ -90,9 +93,10 @@ var ItemTitle = React.forwardRef(
 ItemTitle.displayName = "ItemTitle";
 var ItemDescription = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
-      "div",
+      Comp,
       __spreadValues({
         ref,
         "data-slot": "item-description",
@@ -104,9 +108,10 @@ var ItemDescription = React.forwardRef(
 ItemDescription.displayName = "ItemDescription";
 var ItemActions = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
-      "div",
+      Comp,
       __spreadValues({
         ref,
         "data-slot": "item-actions",

package/dist/components/kitchen-dossier.d.ts

@@ -10,7 +10,7 @@ import { VenueGradeDimensionKey } from './venue-grade-dimensions.js';
  * The hub used to say this three times: a spotlight with everything the
  * digest knows, a ranked row with a grade, a card with the signature dish —
  * and the same kitchen led all three. This is the one card: the venue's
- * photograph clear at the top, a frosted caption rising from the foot with
+ * photograph clear at the top, an inked caption rising from the foot with
  * the identity (rating, name, type · area · reviews), and under it a PANEL
  * that says the three or four things the reviews established one at a time —
  * the dish it is known for, what people say, the grade — with segments at the
@@ -23,12 +23,12 @@ import { VenueGradeDimensionKey } from './venue-grade-dimensions.js';
  * bands. This is the reverse — the room is the subject and the facts are its
  * caption — which is `GlassGround` at its lightest and smallest: anchored to
  * the CAPTION, not the card, so it covers the identity, the panel and the
- * action plus a short lead above them and nothing else; a `sm` blur that
- * only takes the edge off the detail; ink that never passes 0.45; a text
- * shadow under the identity doing the rest. Everything above the caption is
- * the photograph, untouched. The panel is its own glass, so its rule reads
- * as a panel and not a hole. The same layout at every width; the desktop
- * card is wider, not turned on its side.
+ * action plus a short lead above them and nothing else; ink that never
+ * passes 0.6; a text shadow under the identity doing the rest. Everything
+ * above the caption is the photograph, untouched. The panel is a translucent
+ * ink pane (no backdrop blur — see `GlassGround` for the measurement that
+ * removed it), so its rule reads as a panel and not a hole. The same layout
+ * at every width; the desktop card is wider, not turned on its side.
  *
  * ## Two targets, and everything else is "next"
  *
@@ -56,6 +56,8 @@ 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;
 };
 type KitchenDossierProps = {
     place: PlacePreview;

package/dist/components/kitchen-dossier.js

@@ -1,9 +1,9 @@
-import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-AKQ57NXY.js';
-import { VenueQuotes } from '../chunk-62ES6N32.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-SY6RV476.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';
@@ -52,7 +52,7 @@ function KitchenDossier({
             children: item.name
           }
         ) : /* @__PURE__ */ jsx("span", { className: "text-[16px] font-bold leading-tight tracking-[-0.01em] text-white", children: item.name }),
-        signature.why && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 font-serif text-[13px] italic leading-snug text-white/75", children: signature.why }),
+        signature.why && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 font-serif text-[13px] leading-snug text-white/75", children: signature.why }),
         (firstEntry || mentions > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Separator, { className: "my-2.5 via-white/20" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
@@ -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(
@@ -131,7 +128,7 @@ function KitchenDossier({
                   className: "-mt-1"
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: "relative min-h-[184px] flex-1", children: labels.openUntil && /* @__PURE__ */ jsxs("span", { className: "absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.72)] px-3 text-[11.5px] font-bold text-white backdrop-blur-[2px]", children: [
+              /* @__PURE__ */ jsx("div", { className: "relative min-h-[184px] flex-1", children: labels.openUntil && /* @__PURE__ */ jsxs("span", { className: "absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-3 text-[11.5px] font-bold text-white", children: [
                 /* @__PURE__ */ jsx("i", { className: "h-[7px] w-[7px] rounded-full bg-success", "aria-hidden": true }),
                 labels.openUntil
               ] }) }),
@@ -145,8 +142,7 @@ function KitchenDossier({
                       GlassGround,
                       {
                         stops: { direction: "to bottom", clear: "0px", full: GLASS_LEAD },
-                        peak: 0.4,
-                        blur: "sm"
+                        peak: 0.6
                       }
                     )
                   }
@@ -154,18 +150,28 @@ 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,
                   {
                     parts,
-                    className: "rounded-[14px] border border-white/10 bg-[oklch(0.16_0.012_55_/_0.35)] p-4 backdrop-blur-md"
+                    className: "rounded-[14px] border border-white/10 bg-[oklch(0.16_0.012_55_/_0.62)] p-4"
                   }
                 ),
                 action && /* @__PURE__ */ jsx("div", { className: "flex [&>*]:w-full lg:[&>*]:w-auto", children: action })

package/dist/components/link-button.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-H3BV4VAG.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,28 +5,27 @@ 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.
- *  2. **A masked backdrop-filter** — absent where the photography is the
- *     subject, full where the rows begin — so the pictures stay sharp where
- *     they are looked at and go soft exactly where they are read over.
- *  3. **An ink gradient** over that. This is what actually buys the contrast:
- *     frost alone blurs without darkening, and blurred mid-tones will not carry
- *     16px type.
+ *  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
+ *     recorded in `GlassGround` (73 blur layers cost `/menu` 9 ms per scrolled
+ *     frame on a phone).
  *
- * On the phone the frost and ink run top to bottom: the name and the action
- * sit on clear photography, the chips and the rows on the frosted foot. On
- * desktop the same three layers turn ninety degrees — the photo column on the
- * left stays clear, the row column on the right is the frosted 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.
+ * 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
+ * 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
  *
@@ -68,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,11 +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 FROST = "backdrop-blur-xl [mask-image:linear-gradient(to_bottom,transparent_0%,black_42%)] lg:[mask-image:linear-gradient(to_right,transparent_36%,black_54%)]";
-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
@@ -33,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",
     {
@@ -49,55 +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("span", { "aria-hidden": true, className: cn("absolute inset-0", FROST) }),
+        /* @__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.72)] px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-[2px] 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.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md transition-colors hover:bg-white/20 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,
                 {
@@ -122,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';
@@ -11,7 +11,6 @@ function DefaultLink(_a) {
 }
 var MOSAIC_CELLS = 4;
 var GROUND = PHOTO_GROUND;
-var FROST = "backdrop-blur-xl [mask-image:linear-gradient(to_bottom,transparent_28%,black_58%)]";
 var INK = "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.78)_0%,oklch(0.16_0.012_55_/_0.5)_34%,oklch(0.16_0.012_55_/_0.86)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 function MenuFamilyCard({
   family,
@@ -47,7 +46,6 @@ function MenuFamilyCard({
             gradient
           }
         ),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 -z-20", FROST) }),
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 -z-10", INK) }),
         /* @__PURE__ */ jsxs("span", { className: "block text-white", children: [
           /* @__PURE__ */ jsx("b", { className: "block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums", children: family.venue_count }),
@@ -69,7 +67,7 @@ function MenuFamilyCard({
             ),
             (_d = family.chips) == null ? void 0 : _d.map((chip) => /* @__PURE__ */ jsx(HueChip, { hue, children: chip.label }, chip.slug))
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md transition-colors group-hover:bg-white/20 motion-reduce:transition-none", children: labels.browse })
+          /* @__PURE__ */ jsx("span", { className: "mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white transition-colors group-hover:bg-white/25 motion-reduce:transition-none", children: labels.browse })
         ] })
       ]
     }

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 };