@bearmenu/ui 0.8.9 → 0.8.11

package/dist/components/kitchen-dossier.js

@@ -0,0 +1,186 @@
+import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-AKQ57NXY.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 { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { MessageSquareQuote, Star } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var GLASS_LEAD = "128px";
+var DIMENSION_LIMIT = 3;
+var QUOTE_LIMIT = 2;
+var initialOf = (name) => {
+  var _a, _b;
+  return ((_b = (_a = name.match(new RegExp("\\p{L}", "u"))) == null ? void 0 : _a[0]) != null ? _b : "").toLocaleUpperCase();
+};
+function KitchenDossier({
+  place,
+  href,
+  meta,
+  signature,
+  quotes,
+  grade,
+  labels,
+  formatPrice,
+  formatScore,
+  partDurationMs,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  var _a, _b, _c, _d;
+  const rating = (_a = place.rating) == null ? void 0 : _a.rating;
+  const parts = [];
+  if (signature) {
+    const item = signature.item;
+    const firstEntry = (_b = item.sizes_and_prices) == null ? void 0 : _b[0];
+    const mentions = (_d = (_c = item.mentions) != null ? _c : item.review_count) != null ? _d : 0;
+    parts.push(
+      /* @__PURE__ */ jsxs(Part, { kicker: labels.knownFor, children: [
+        signature.href ? /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: signature.href,
+            className: "w-max max-w-full text-[16px] font-bold leading-tight tracking-[-0.01em] text-white hover:underline focus-visible:outline-none focus-visible:underline",
+            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] 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: [
+            /* @__PURE__ */ jsx("span", { className: "flex items-baseline gap-1.5", children: firstEntry && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[18px] font-extrabold leading-none tabular-nums text-white", children: [
+                formatPrice(firstEntry.price),
+                /* @__PURE__ */ jsx("span", { className: "ml-1 text-[12px] font-bold", children: labels.currency })
+              ] }),
+              firstEntry.size > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11.5px] tabular-nums text-white/60", children: [
+                firstEntry.size,
+                item.kind === "dish" ? "g" : "ml"
+              ] })
+            ] }) }),
+            mentions > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[12px] font-semibold tabular-nums text-white/85", children: [
+              /* @__PURE__ */ jsx(MessageSquareQuote, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+              labels.mentions(mentions)
+            ] })
+          ] })
+        ] })
+      ] }, "signature")
+    );
+  }
+  if (quotes && quotes.length > 0) {
+    parts.push(
+      /* @__PURE__ */ jsx(Part, { kicker: labels.whatPeopleSay, children: /* @__PURE__ */ jsx(VenueQuotes, { quotes, limit: QUOTE_LIMIT, className: "lg:grid-cols-1" }) }, "quotes")
+    );
+  }
+  const dimensions = grade == null ? void 0 : grade.dimensions;
+  const strongest = dimensions ? DIMENSION_ORDER.filter((key) => typeof dimensions[key] === "number").sort((a, b) => {
+    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)) {
+    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")
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        /* `flex flex-col` so the story fills the card's height: in a rail
+           the cards are stretched to the tallest, and a story that stopped
+           at its own min-height left a band of bare photograph under the
+           action on every shorter card. */
+        "dark relative isolate flex flex-col overflow-hidden rounded-[18px] border border-border text-foreground shadow-[var(--shadow-card)]",
+        PHOTO_GROUND,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(PhotoGround, { className: "-z-20", photos: [place.thumbnail_url], initials: initialOf(place.name), loading: "eager" }),
+        /* @__PURE__ */ jsxs(
+          StoryProvider,
+          {
+            count: parts.length,
+            durationMs: partDurationMs,
+            nextLabel: labels.next,
+            className: "relative flex min-h-[560px] flex-1 flex-col p-4 lg:min-h-[440px] lg:p-5",
+            children: [
+              /* @__PURE__ */ jsx(
+                StorySegments,
+                {
+                  labels: parts.map((_, index) => labels.part(index, parts.length)),
+                  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.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
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3.5", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute -inset-x-4 -bottom-4 -top-32 -z-10 lg:-inset-x-5 lg:-bottom-5",
+                    children: /* @__PURE__ */ jsx(
+                      GlassGround,
+                      {
+                        stops: { direction: "to bottom", clear: "0px", full: GLASS_LEAD },
+                        peak: 0.6
+                      }
+                    )
+                  }
+                ),
+                /* @__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: [
+                      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 ") })
+                ] }),
+                parts.length > 0 && /* @__PURE__ */ jsx(
+                  StoryPanel,
+                  {
+                    parts,
+                    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 })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Part({ kicker, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx("span", { className: "mb-1.5 block text-[9.5px] font-bold uppercase tracking-[0.12em] text-white/60", children: kicker }),
+    children
+  ] });
+}
+
+export { KitchenDossier };

package/dist/components/link-button.js

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

package/dist/components/menu-dead-end.d.ts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent, MenuLoosenOption } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuDeadEnd — what dropped out, and the one press that brings it back.
+ *
+ * A filter combination that returns nothing is the intent page's worst state,
+ * and an empty-state illustration is the worst answer to it: the reader knows
+ * the list is empty, what they do not know is WHICH of their four filters did
+ * it. So this says what dropped out, why, and what widening one specific filter
+ * would restore — with the count, because "+5 kitchens, including the
+ * highest-rated Italian room in the city" is an answer and "try removing a
+ * filter" is a shrug.
+ *
+ * It is also drawn on a NON-empty list, whenever a filter has cost the reader
+ * something notable. The board's case is 34 kitchens still standing and Casa
+ * Boema — the one they came for — missing.
+ *
+ * Interactive: the consumer marks its own module `"use client"`.
+ */
+type MenuDeadEndProps = {
+    /**
+     * The explanation, composed by the caller.
+     *
+     * A node rather than a string because it emphasises real names ("**Casa
+     * Boema** and six others dropped out"), and assembling that from fragments
+     * here would produce translated word-salad in one of the two locales.
+     */
+    children: React.ReactNode;
+    /** The widening this offers, e.g. "Raise to 60 lei · 16 kitchens". */
+    actionLabel?: string;
+    /** Where the widening leads. Preferred over `onAction` — see `MenuLoosenOption.href`. */
+    actionHref?: string;
+    onAction?: () => void;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuDeadEnd({ children, actionLabel, actionHref, onAction, linkComponent: LinkComponent, className, }: MenuDeadEndProps): react_jsx_runtime.JSX.Element;
+/**
+ * MenuLoosenList — one row per active filter, each priced in kitchens.
+ *
+ * The companion to the panel above: the panel names the single best widening,
+ * this lists every one of them so the reader can choose which constraint they
+ * care least about. Every row states what it would return, because a filter the
+ * reader cannot price is a filter they will not drop.
+ */
+type MenuLoosenListProps = {
+    options: MenuLoosenOption[];
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuLoosenList({ options, linkComponent: LinkComponent, className, }: MenuLoosenListProps): react_jsx_runtime.JSX.Element;
+
+export { MenuDeadEnd, type MenuDeadEndProps, MenuLoosenList, type MenuLoosenListProps };

package/dist/components/menu-dead-end.js

@@ -0,0 +1,49 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Info } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function MenuDeadEnd({
+  children,
+  actionLabel,
+  actionHref,
+  onAction,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const actionClass = "inline-flex h-7 shrink-0 items-center rounded-full bg-foreground px-3 text-[12.5px] font-bold text-background transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none lg:ml-auto";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mt-4 flex flex-wrap items-center gap-3 rounded-[14px] bg-muted p-3.5 lg:flex-nowrap lg:gap-4 lg:px-[18px] lg:py-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Info, { className: "h-[18px] w-[18px] shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-[560px] text-[13px] leading-[1.55] text-muted-foreground [&_b]:font-bold [&_b]:text-foreground", children }),
+        actionLabel && (actionHref ? /* @__PURE__ */ jsx(LinkComponent, { href: actionHref, className: actionClass, children: actionLabel }) : onAction && /* @__PURE__ */ jsx("button", { type: "button", onClick: onAction, className: actionClass, children: actionLabel }))
+      ]
+    }
+  );
+}
+function MenuLoosenList({
+  options,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const rowClass = "inline-flex h-9 items-center justify-between gap-3 rounded-full border border-border bg-card px-4 text-sm font-semibold transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none";
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2.5", className), children: options.map((option) => {
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 font-bold tabular-nums text-accent", children: option.gainLabel })
+    ] });
+    return option.href ? /* @__PURE__ */ jsx(LinkComponent, { href: option.href, className: rowClass, children: body }, option.key) : /* @__PURE__ */ jsx("button", { type: "button", onClick: option.onSelect, className: rowClass, children: body }, option.key);
+  }) });
+}
+
+export { MenuDeadEnd, MenuLoosenList };

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

@@ -0,0 +1,98 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuKitchenListLabels } from './menu-kitchen-list.js';
+import { MenuFamilyBlockPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * MenuFamilyBlock — the cuisines index's family card. The mosaic 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:
+ *
+ *  1. **The mosaic**, full-bleed, wearing the family's hue through a
+ *     `mix-blend-color` layer.
+ *  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 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.
+ *
+ * ## The dark scope
+ *
+ * The card's content region carries the `dark` class, so every token inside —
+ * `text-foreground`, `bg-muted`, `border-border` — resolves to its dark-theme
+ * value. That is how `MenuKitchenList` and `HueChip` render correctly on the
+ * ink without a fork or a "tone" prop: the mechanism the app already uses to
+ * mark a region as dark. It also means the card looks the same in both themes,
+ * which is right — it is built on photography, and photography is not themed.
+ *
+ * ## The two costs, stated
+ *
+ * A `backdrop-filter` over a mask is expensive to composite, and this card is
+ * repeated ten times down a scroll. And the thumbnails now sit on a
+ * photograph; they survive only because the ink is heavy under them, and on a
+ * busy interior shot they will fight. Both were accepted with the design.
+ *
+ * ## No "most named" item, no venue count badge
+ *
+ * The family-level "most named" was the first venue's signature relabelled —
+ * Italian, Pizza and Mediterranean all claimed "Turkish Poached Eggs" — and
+ * the count used to print three times with two values. One count, under the
+ * name; the overflow tile says only how many photographs it stands for.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+type MenuFamilyBlockLinkProps = MenuLinkProps;
+type MenuFamilyBlockLabels = {
+    /** Unit under the family name, e.g. "247 kitchens". Pluralised by the caller. */
+    venueUnit: (count: number) => string;
+    /** The overflow pill over the mosaic, e.g. "+311 more". */
+    more: (count: number) => string;
+    /**
+     * Price-band caption, e.g. "kitchen price band".
+     *
+     * Never drawn: the band reads as a wallet and a range, and a caption on a
+     * pill that short is longer than the fact. It names the pill for a screen
+     * reader, which would otherwise be read two numbers and a currency.
+     */
+    priceBand: string;
+    /** Main action, e.g. "Browse Italian". Sits on the photography — keep it short. */
+    browse: string;
+    /** Passed through to the venue rows. */
+    kitchens: MenuKitchenListLabels;
+};
+type MenuFamilyBlockProps = {
+    family: MenuFamilyBlockPreview;
+    labels: MenuFamilyBlockLabels;
+    formatCount?: (value: number) => string;
+    /** Finished CSS colour for the chips. */
+    hue?: string;
+    /** Finished CSS gradient — the family's colour over the mosaic. */
+    gradient?: string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function MenuFamilyBlock({ family, labels, formatCount, hue, gradient, linkComponent: LinkComponent, className, }: MenuFamilyBlockProps): react_jsx_runtime.JSX.Element;
+/**
+ * The block's own loading state, at the block's footprint.
+ *
+ * The ground is the card's own, so the placeholder is already the dark
+ * surface the photographs will land on — nothing flashes from paper to ink.
+ * `venues` matches the rows the caller will render, so a block showing three
+ * does not settle from a placeholder showing one.
+ */
+declare function MenuFamilyBlockSkeleton({ venues, className, }: {
+    venues?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { MenuFamilyBlock, type MenuFamilyBlockLabels, type MenuFamilyBlockLinkProps, type MenuFamilyBlockProps, MenuFamilyBlockSkeleton };

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

@@ -0,0 +1,153 @@
+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 { Skeleton } from '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Wallet } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+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 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
+     the layer is ordered beneath. Without `isolate`, `-z-10` would instead
+     drop it behind the card's mosaic — inside the article's context. */
+  "isolate before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:top-[30%] before:-z-10 before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0)_0%,oklch(0.16_0.012_55_/_0.55)_45%,oklch(0.16_0.012_55_/_0.8)_100%)] before:content-['']"
+);
+function MenuFamilyBlock({
+  family,
+  labels,
+  formatCount = String,
+  hue,
+  gradient,
+  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 : [];
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        /* `isolate` confines the blend and the backdrop-filter to this card.
+           `dark` scopes every token inside to its dark-theme value. */
+        "dark relative isolate overflow-hidden rounded-[14px] text-foreground",
+        GROUND,
+        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", 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
+                }
+              ),
+              (_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)
+              ))
+            ] }),
+            venues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Separator, { className: "my-3" }),
+              /* @__PURE__ */ jsx(
+                MenuKitchenList,
+                {
+                  kitchens: venues,
+                  labels: labels.kitchens,
+                  linkComponent: LinkComponent
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function MenuFamilyBlockSkeleton({
+  venues = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      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" }),
+          /* @__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__ */ 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: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-[86px] rounded-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-[74px] rounded-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-[66px] rounded-full" })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { className: "my-3" }),
+          Array.from({ length: venues }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
+            index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-2.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] w-[46px] rounded-[11px]" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-[46%]" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[58%]" })
+              ] })
+            ] })
+          ] }, index))
+        ] })
+      ] })
+    }
+  );
+}
+
+export { MenuFamilyBlock, MenuFamilyBlockSkeleton };

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

@@ -1,59 +1,65 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MenuItemLabels } from './menu-item.js';
 import { MenuFamilyPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
 import 'react';
 import './place-types.js';
 
 /**
  * MenuFamilyCard — a browsable grouping of venues: a cuisine on the dishes tab,
- * a drink family on the drinks tab.
+ * a drink family on the drinks tab. The hub's doorway to a family.
  *
- * ## The count does the scanning, the item answers the question
+ * ## A doorway, not a summary
  *
- * The card is two halves with two jobs. The dark panel is for scanning a row of
- * four: one number, one name, and the groups the family consists of, over a
- * mosaic of its venues. The white half underneath answers what you would
- * actually order — the production `<MenuItem>`, with its price, portion and
- * mention count, so the recommendation is the review census rather than an
- * editorial pick.
+ * The cuisines index's `MenuFamilyBlock` is the family's SUMMARY: photography,
+ * chips, a price band and three venues. This card is the same family drawn
+ * one step earlier, in a row of three on the hub, where the reader is choosing
+ * a family and not yet a venue — so it carries the same photography, the same
+ * chips and the same "Browse" action, and lists no venue. A venue on the hub
+ * card was tried and it was the first venue's signature relabelled as the
+ * family's most named, which was a lie at three-card width.
  *
- * ## Both halves count VENUES
+ * ## The count does the scanning
  *
- * Cuisine exists on places and nowhere else — no listing endpoint will tell you
- * how many dishes are Italian — so a card counting dishes cannot be built and
- * this one does not try. The groups line is a plain list without counts: at
- * four cards across, four chips each carrying a number turned the panel into a
- * table, and the numbers were kitchens, which nobody reads a chip as.
+ * The card is one number, one name and the groups the family consists of,
+ * over a mosaic of its venues. The count is VENUES: cuisine exists on places
+ * and nowhere else — no listing endpoint will tell you how many dishes are
+ * Italian — so a card counting dishes cannot be built and this one does not
+ * try. The chips are plain labels: at three cards across, chips carrying
+ * numbers turned the panel into a table, and the numbers were kitchens, which
+ * nobody reads a chip as.
  *
- * The mosaic holds VENUE photographs, which are real. It dims them hard — this
- * is a ground for a number, not a gallery, and at this size a legible photo
- * competes with the count for the same glance.
+ * ## One link
+ *
+ * The whole card is the link and the "Browse" pill is its visible affordance,
+ * not a second link — a pill inside a link is a nested anchor, and a pill that
+ * is the only link leaves the photography, the number and the name inert.
  */
 /** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
 type MenuFamilyCardLinkProps = MenuLinkProps;
 type MenuFamilyCardLabels = {
     /** Unit under the count, e.g. "KITCHENS". */
     venueUnit: string;
-    /** Kicker over the featured item, e.g. "MOST NAMED". */
-    mostNamed: string;
-    /** Footer caption, e.g. "kitchen price band". */
+    /**
+     * Price-band caption, e.g. "kitchen price band". Never drawn — it names the
+     * pill for a screen reader, which would otherwise be read two numbers and a
+     * currency.
+     */
     priceBand: string;
+    /** The action pill, e.g. "Browse Italian". Sits on the photography — keep it short. */
+    browse: string;
 };
 type MenuFamilyCardProps = {
     family: MenuFamilyPreview;
     labels: MenuFamilyCardLabels;
-    /** Passed through to the featured `<MenuItem>`. */
-    itemLabels: MenuItemLabels;
-    formatPrice: (amount: number) => string;
-    formatCount?: (value: number) => string;
     href: string;
-    /** Finished CSS colour for the featured item's category mark. */
+    /** Finished CSS colour for the chips. */
     hue?: string;
+    /** Finished CSS gradient — the family's colour over the mosaic. */
+    gradient?: string;
     /** Composed price band, e.g. "32–84 lei". */
     priceBandLabel?: string;
     linkComponent?: MenuLinkComponent;
     className?: string;
 };
-declare function MenuFamilyCard({ family, labels, itemLabels, formatPrice, formatCount, href, hue, priceBandLabel, linkComponent: LinkComponent, className, }: MenuFamilyCardProps): react_jsx_runtime.JSX.Element;
+declare function MenuFamilyCard({ family, labels, href, hue, gradient, priceBandLabel, linkComponent: LinkComponent, className, }: MenuFamilyCardProps): react_jsx_runtime.JSX.Element;
 
 export { MenuFamilyCard, type MenuFamilyCardLabels, type MenuFamilyCardLinkProps, type MenuFamilyCardProps };