@bearmenu/ui 0.8.9 → 0.8.11

package/dist/components/concept-compare-rail.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * ConceptCompareRail — the rooms as a rail, the card's backdrop following the
+ * active room, and the foot band that carries the page dots.
+ *
+ * On the phone the card IS the current room's photograph: the head, the rail
+ * and the foot all sit on it, and it cross-fades to the next room as the
+ * reader swipes. That needs the rail's active index, which is state — so this
+ * is the one client boundary in `ConceptCompare`. It takes only what can cross
+ * that boundary: photograph URLs, initials, and the pre-rendered rooms and
+ * foot as children. `labels`, `formatPrice` and the rest stay server-side.
+ *
+ * ## Why the backdrop lives here and not in each slide
+ *
+ * A slide carrying its own photograph is a boxed card sliding over a dark
+ * ground; the backdrop changing under a transparent slide is the reader
+ * turning to look at the next room. The second is the smoother thing, and it
+ * is also cheaper to look at — one photograph at a time instead of the edge of
+ * the next one peeking in.
+ *
+ * ## Why the foot is here too
+ *
+ * The dots need the rail's state, and on the phone they belong INSIDE the foot
+ * band's glass — under the rail they sat on a strip of bare photograph between
+ * the room's scrim and the foot's. So the foot renders here, with the dots as
+ * its first row below `lg`, and `ConceptCompare` hands it the foot's content.
+ *
+ * Desktop ignores the backdrop and the dots (`lg:hidden`); each room carries
+ * its own photograph there, side by side, and the foot is an absolute glass
+ * band over them.
+ */
+type ConceptCompareBackdrop = {
+    /** The room's photograph. Absent: the ground with the venue's initial. */
+    src?: string;
+    /** The venue's first letter, for the no-photograph fallback. */
+    initial: string;
+};
+type ConceptCompareRailProps = {
+    backdrops: ConceptCompareBackdrop[];
+    /** Classes for the rail itself — the desktop grid lives here. */
+    railClassName?: string;
+    /** The foot's content: the note and the action. Omit for no foot. */
+    foot?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function ConceptCompareRail({ backdrops, railClassName, foot, children, }: ConceptCompareRailProps): react_jsx_runtime.JSX.Element;
+
+export { type ConceptCompareBackdrop, ConceptCompareRail, type ConceptCompareRailProps };

package/dist/components/concept-compare-rail.js

@@ -0,0 +1,5 @@
+export { ConceptCompareRail } from '../chunk-H3ZZDX5L.js';
+import '../chunk-DTXNDLSE.js';
+import '../chunk-5RWTOT5Y.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/concept-compare.d.ts

@@ -1,73 +1,110 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MenuItemLabels } from './menu-item.js';
 import { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
 import 'react';
 import './place-types.js';
 
 /**
- * ConceptCompare — one dish or drink across every kitchen that makes it, under
- * whatever name each of them uses.
+ * ConceptCompare — one dish or drink across the kitchens that make it, under
+ * whatever name each of them uses. No surfaces at all.
  *
  * The keystone module: a single menu can list papanași, only a catalogue can
- * say that seventy kitchens make them under fifty different names between 8 and
- * 44 lei. The alias column is what makes it honest — these are not the same row
- * seventy times, they are seventy differently-named rows we matched, and
- * showing each kitchen's own wording is the evidence for that.
+ * say that forty-five kitchens make them under eight names between 29 and 52
+ * lei. Each kitchen's own wording is the evidence that these are matched rows
+ * rather than one row repeated.
  *
- * ## The row is place-led
+ * ## The card IS the rooms
  *
- * Each row leads with the VENUE PHOTOGRAPH, which is real and licensed. It
- * replaced a price bar, and the trade is not close: the bar measured the one
- * value already printed beside it in words, while the thing a reader is
- * actually choosing between — the restaurant — had no image at all. Five
- * restaurants that disagree about a name is the story; five bars of similar
- * length is not.
+ * Every panel is gone. Each room is a VENUE photograph — real and licensed
+ * where an item's would be generated — with the kitchen's line floating over
+ * it, and the three readable things sit on glass: the identity in a band
+ * across the top, each kitchen's line over its own photograph, the foot along
+ * the bottom.
  *
- * ## Two layouts, one component
+ * ## Read across on desktop, one at a time on the phone
  *
- * From `lg` the row is a table: rank, venue, alias, mentions, price. Below it,
- * the rows become the production `<MenuItem>` — the alias as the name, the
- * venue underneath — because a five-column table does not survive 390px and
- * the item row already solves this exact shape everywhere else in the app.
+ * From `lg` the rooms stand side by side — four kitchens, each with its own
+ * name for the dish and its own price, so comparing is a horizontal glance —
+ * and the head and foot are ABSOLUTE glass bands over them, so the photographs
+ * run the full height of the card beneath both. The head's glass fades out
+ * downward on the same curve as its mask; the foot's fades out upward the same
+ * way. It was the ink stopping short of the mask that drew a line where a band
+ * ended.
+ *
+ * Below `lg` four rooms in a 2×2 was too much happening in one card, so the
+ * rooms become a `SnapRail`: one room per swipe, page dots under it, the head
+ * and foot static on the card's ground above and below. The dots are the
+ * rail's own — the same object the hub's other rails use.
+ *
+ * ## The dark overlay, and the hover that lifts it
+ *
+ * Four busy interiors are four competing subjects, and type over them had
+ * nothing to sit on but its own local scrim — the eye could not settle. Every
+ * photograph carries a uniform dark overlay so the words lead and the picture
+ * supports; hovering a room lifts the overlay off THAT room only, so the reader
+ * can look at the place they are about to open.
+ *
+ * ## Light and dark
+ *
+ * There is nothing in it to theme. Photographs and their scrims are identical
+ * in both, because text over an image needs the same treatment either way —
+ * the content is `.dark`-scoped for exactly that. What adapts is the card's
+ * EDGE: a soft shadow and hairline on light, a deeper shadow and a light
+ * hairline on dark. The edge lives on the outer wrapper, outside the scope.
+ *
+ * ## No room here is a room that does not serve it
+ *
+ * The earlier card led with an AI-generated picture of the dish, and a
+ * generated image at the head of a block whose whole argument is "we counted
+ * real menus" undercut the argument. The rooms are real.
  */
 /** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
 type ConceptCompareLinkProps = MenuLinkProps;
 type ConceptCompareFigure = {
-    /** Pre-formatted, e.g. "44". */
+    /** Pre-formatted, e.g. "44" or "29–52". */
     value: string;
     label: string;
+    /** Draws the value in amber — the spread, which is the number the card is about. */
+    accent?: boolean;
 };
 type ConceptCompareLabels = {
     /** Small caps kicker, e.g. "DISH CONCEPT". */
     kind: string;
-    /** Column heading over the aliases, e.g. "ON THEIR MENU AS". */
-    alias: string;
-    /** Under each price, e.g. "per portion". */
-    perPortion?: string;
-    /** Badge on the lowest-priced row, e.g. "cheapest shown". */
-    cheapest?: string;
+    /** The badge on the lowest-priced room, e.g. "CHEAPEST". */
+    cheapest: string;
+    /** The badge on every other room, e.g. "#2". Defaults to `#${rank}`. */
+    rank?: (rank: number) => string;
+    /** Beside each price, e.g. "12 mentions". Pluralised by the caller. */
+    mentions: (count: number) => string;
+    /** Accessible name for a room's link, e.g. "Papanași at Casa Maramureșeană". */
+    openRoom: (alias: string, venue: string) => string;
 };
 type ConceptCompareProps = {
     concept: MenuConceptPreview;
     labels: ConceptCompareLabels;
-    /** Passed to the mobile `<MenuItem>` rows. */
-    itemLabels: MenuItemLabels;
+    /** One line under the title, e.g. "45 kitchens make it, and they do not agree on the name". */
+    lede?: string;
     formatPrice: (amount: number) => string;
-    formatCount?: (value: number) => string;
-    /** CSS gradient for the header swatch, when there is no photograph. */
-    gradient: string;
-    /** A real photograph of the concept, when the matched menu row carries one. */
-    imageUrl?: string;
     figures?: ConceptCompareFigure[];
-    /** Destination per row, keyed by place slug. */
+    /** Destination per room, keyed by place slug. A room without one is inert. */
     hrefs?: Record<string, string>;
-    /** The provenance note in the footer. */
+    /** The provenance note in the foot. */
     footnote?: string;
-    /** Actions in the footer — pass rendered links or buttons. */
+    /** The action in the foot — pass a rendered link or button. */
     actions?: React.ReactNode;
     linkComponent?: MenuLinkComponent;
     className?: string;
 };
-declare function ConceptCompare({ concept, labels, itemLabels, formatPrice, formatCount, gradient, imageUrl, figures, hrefs, footnote, actions, linkComponent: LinkComponent, className, }: ConceptCompareProps): react_jsx_runtime.JSX.Element;
+declare function ConceptCompare({ concept, labels, lede, formatPrice, figures, hrefs, footnote, actions, linkComponent: LinkComponent, className, }: ConceptCompareProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * The card's own loading state, at the card's footprint.
+ *
+ * The ground is the card's own dark surface, so the placeholder is already
+ * what the photographs will land on and nothing flashes from paper to ink.
+ * The phone shape is one room tall with the head above and the foot below;
+ * from `lg` it is the four-room row with the head and foot laid over it.
+ */
+declare function ConceptCompareSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { ConceptCompare, type ConceptCompareFigure, type ConceptCompareLabels, type ConceptCompareLinkProps, type ConceptCompareProps };
+export { ConceptCompare, type ConceptCompareFigure, type ConceptCompareLabels, type ConceptCompareLinkProps, type ConceptCompareProps, ConceptCompareSkeleton };

package/dist/components/concept-compare.js

@@ -1,24 +1,38 @@
-import { MenuItem } from '../chunk-TH6W2PWG.js';
-import '../chunk-Q6QH52LJ.js';
-import { MenuField } from '../chunk-YS6BHKZO.js';
-import '../chunk-UKBNQO6Q.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { ConceptCompareRail } from '../chunk-H3ZZDX5L.js';
+import '../chunk-DTXNDLSE.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 { Star, MessageSquare } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ArrowDown, MapPin, Star } from 'lucide-react';
+import { jsx, jsxs, 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 MAX_ROOMS = 4;
+var initialOf = (name) => {
+  var _a, _b;
+  return ((_b = (_a = name.match(new RegExp("\\p{L}", "u"))) == null ? void 0 : _a[0]) != null ? _b : "").toLocaleUpperCase();
+};
+var GROUND = PHOTO_GROUND;
+var PHOTO_OVERLAY_HOVER = "transition-opacity duration-300 group-hover/room:opacity-0 motion-reduce:transition-none";
+var ROOM_SCRIM = "absolute inset-0 bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0)_0%,oklch(0.16_0.012_55_/_0)_30%,oklch(0.16_0.012_55_/_0.55)_58%,oklch(0.16_0.012_55_/_0.9)_100%)]";
+var HEAD_GLASS = "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.86)_0%,oklch(0.16_0.012_55_/_0.7)_35%,oklch(0.16_0.012_55_/_0.28)_75%,oklch(0.16_0.012_55_/_0)_100%)]";
+var COLUMNS = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+};
+var DESKTOP_FOOT_CLEARANCE = "lg:pb-[104px]";
 function ConceptCompare({
   concept,
   labels,
-  itemLabels,
+  lede,
   formatPrice,
-  formatCount,
-  gradient,
-  imageUrl,
   figures,
   hrefs,
   footnote,
@@ -26,137 +40,199 @@ function ConceptCompare({
   linkComponent: LinkComponent = DefaultLink,
   className
 }) {
-  var _a;
-  const rows = (_a = concept.rows) != null ? _a : [];
-  const cheapest = rows.reduce(
-    (lowest, row) => lowest === void 0 || row.price < lowest ? row.price : lowest,
+  var _a, _b, _c;
+  const rooms = ((_a = concept.rows) != null ? _a : []).slice(0, MAX_ROOMS);
+  const count = rooms.length;
+  if (count === 0) return null;
+  const cheapest = rooms.reduce(
+    (lowest, room) => lowest === void 0 || room.price < lowest ? room.price : lowest,
     void 0
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-[18px] border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:gap-6 lg:p-5", children: [
-      imageUrl ? (
-        // eslint-disable-next-line @next/next/no-img-element
+  const rankOf = (_b = labels.rank) != null ? _b : ((rank) => `#${rank}`);
+  const hasFoot = Boolean(footnote || actions);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        /* The edge, OUTSIDE the dark scope — the one thing about this card
+           that belongs to the page it sits on. */
+        "overflow-hidden rounded-[18px] border border-border shadow-[var(--shadow-card)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: cn("dark relative isolate flex flex-col text-foreground", GROUND), children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative isolate flex flex-col gap-3 px-4 pb-5 pt-4",
+              "lg:absolute lg:inset-x-0 lg:top-0 lg:z-10 lg:flex-row lg:items-start lg:justify-between lg:gap-6 lg:px-5 lg:pb-12 lg:pt-5",
+              HEAD_GLASS
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-[10.5px] font-extrabold uppercase tracking-[0.13em] text-white/70", children: labels.kind }),
+                /* @__PURE__ */ jsx("h3", { className: "mt-1 font-serif text-[28px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[32px]", children: concept.title }),
+                lede && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[13px] leading-snug text-white/75", children: lede })
+              ] }),
+              figures && figures.length > 0 && /* @__PURE__ */ jsx("dl", { className: "flex shrink-0 flex-wrap gap-x-5 gap-y-2 lg:gap-x-6", children: figures.map((figure) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start lg:items-center", children: [
+                /* @__PURE__ */ jsx(
+                  "dd",
+                  {
+                    className: cn(
+                      "text-[22px] font-bold leading-none tabular-nums tracking-[-0.02em]",
+                      figure.accent ? "text-[oklch(0.82_0.15_85)]" : "text-white"
+                    ),
+                    children: figure.value
+                  }
+                ),
+                /* @__PURE__ */ jsx("dt", { className: "mt-1 text-[11px] text-white/65", children: figure.label })
+              ] }, figure.label)) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
-          "img",
+          ConceptCompareRail,
           {
-            src: imageUrl,
-            alt: "",
-            className: "aspect-[16/9] w-full shrink-0 rounded-xl object-cover lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+            backdrops: rooms.map((room) => ({
+              src: room.place_thumbnail_url,
+              initial: initialOf(room.place_name)
+            })),
+            railClassName: cn(
+              "lg:grid lg:gap-px lg:overflow-visible lg:[&>*]:w-auto",
+              (_c = COLUMNS[count]) != null ? _c : COLUMNS[4]
+            ),
+            foot: hasFoot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              footnote && /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-[12px] leading-relaxed text-white/70", children: footnote }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 [&>*]:w-full lg:[&>*]:w-auto", children: actions })
+            ] }) : void 0,
+            children: rooms.map((room, index) => {
+              const href = hrefs == null ? void 0 : hrefs[room.place_slug];
+              const isCheapest = room.price === cheapest;
+              const roomClass = cn(
+                /* Transparent on the phone — the card behind it is the room's
+                   photograph — with only its scrim and its line. A photograph of
+                   its own from `lg`, where four stand side by side. */
+                "group/room relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden p-4",
+                "lg:aspect-auto lg:min-h-[440px] lg:p-4",
+                DESKTOP_FOOT_CLEARANCE
+              );
+              const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "absolute inset-0 -z-10", children: [
+                  /* @__PURE__ */ jsx(
+                    PhotoGround,
+                    {
+                      className: "hidden lg:block",
+                      photos: [room.place_thumbnail_url],
+                      initials: initialOf(room.place_name),
+                      mosaicClassName: "grid-cols-1",
+                      overlay: true,
+                      overlayClassName: PHOTO_OVERLAY_HOVER
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: ROOM_SCRIM })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex h-[22px] w-max items-center gap-1 rounded-full px-2 text-[10px] font-extrabold uppercase tracking-[0.08em]",
+                      isCheapest ? "bg-success text-white" : "bg-white/20 text-white/85"
+                    ),
+                    children: [
+                      isCheapest && /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+                      isCheapest ? labels.cheapest : rankOf(index + 1)
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "mt-2.5 flex items-center gap-1.5 text-white", children: [
+                  /* @__PURE__ */ jsx(MapPin, { className: "h-3.5 w-3.5 shrink-0 text-white/70", "aria-hidden": true }),
+                  /* @__PURE__ */ jsx("b", { className: "min-w-0 flex-1 truncate text-[15px] font-bold leading-tight", children: room.place_name }),
+                  room.rating !== void 0 && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-[12px] text-white/70", children: [
+                    /* @__PURE__ */ jsx(Star, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: room.rating })
+                  ] })
+                ] }),
+                room.place_area && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[12px] text-white/70", children: room.place_area }),
+                /* @__PURE__ */ jsx("span", { className: "mt-2 block truncate font-serif text-[14px] text-white/90", children: room.alias }),
+                /* @__PURE__ */ jsx(Separator, { className: "my-2.5 via-white/20" }),
+                /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "b",
+                    {
+                      className: cn(
+                        "text-[19px] font-bold leading-none tabular-nums tracking-[-0.02em]",
+                        isCheapest ? "text-success" : "text-white"
+                      ),
+                      children: formatPrice(room.price)
+                    }
+                  ),
+                  room.mentions !== void 0 && room.mentions > 0 && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-white/65", children: labels.mentions(room.mentions) })
+                ] })
+              ] });
+              return href ? /* @__PURE__ */ jsx(
+                LinkComponent,
+                {
+                  href,
+                  "aria-label": labels.openRoom(room.alias, room.place_name),
+                  className: cn(
+                    roomClass,
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white"
+                  ),
+                  children: body
+                },
+                room.place_slug
+              ) : /* @__PURE__ */ jsx("div", { className: roomClass, children: body }, room.place_slug);
+            })
           }
         )
-      ) : /* @__PURE__ */ jsx(
-        MenuField,
-        {
-          name: concept.title,
-          gradient,
-          seedKey: concept.slug,
-          className: "aspect-[16/9] w-full shrink-0 rounded-xl lg:aspect-auto lg:h-[88px] lg:w-[88px]"
-        }
+      ] })
+    }
+  );
+}
+function ConceptCompareSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-[18px] border border-border shadow-[var(--shadow-card)]",
+        className
       ),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[9.5px] font-bold uppercase tracking-[0.12em] text-muted-foreground", children: labels.kind }),
-        /* @__PURE__ */ jsx("h3", { className: "mt-1 font-serif text-2xl font-semibold tracking-[-0.02em] lg:text-[30px]", children: concept.title })
-      ] }),
-      figures && figures.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 gap-6 lg:gap-8", children: figures.map((figure) => /* @__PURE__ */ jsxs("div", { className: "text-left lg:text-right", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xl font-extrabold leading-none tracking-[-0.03em] tabular-nums lg:text-2xl", children: figure.value }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10.5px] text-muted-foreground", children: figure.label })
-      ] }, figure.label)) })
-    ] }),
-    /* @__PURE__ */ jsx("ul", { className: "border-t border-border lg:hidden", children: rows.map((row) => /* @__PURE__ */ jsx("li", { className: "border-b border-border last:border-b-0", children: /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        item: {
-          id: row.place_slug,
-          slug: row.place_slug,
-          // The kitchen's OWN wording leads the row — that IS the point
-          // of the module.
-          name: row.alias,
-          kind: concept.kind,
-          mentions: row.mentions,
-          sizes_and_prices: [{ size: 0, price: row.price }]
-        },
-        labels: itemLabels,
-        formatPrice,
-        formatCount,
-        venueName: row.place_name,
-        href: hrefs == null ? void 0 : hrefs[row.place_slug],
-        linkComponent: LinkComponent,
-        className: cn(row.price === cheapest && "bg-accent-subtle/40")
-      }
-    ) }, row.place_slug)) }),
-    /* @__PURE__ */ jsx("ol", { className: "hidden border-t border-border lg:block", children: rows.map((row, index) => {
-      const isCheapest = row.price === cheapest;
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-center text-xs font-bold tabular-nums text-muted-foreground", children: index + 1 }),
-        /* @__PURE__ */ jsxs("span", { className: "relative h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]", children: [
-          row.place_thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: row.place_thumbnail_url,
-              alt: "",
-              loading: "lazy",
-              className: "h-full w-full object-cover"
-            }
-          ),
-          row.open_now && /* @__PURE__ */ jsx(
-            "i",
-            {
-              "aria-hidden": true,
-              className: "absolute right-0.5 top-0.5 h-[6px] w-[6px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
-            }
-          )
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("dark relative flex flex-col text-foreground", GROUND), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 pb-5 pt-4 lg:absolute lg:inset-x-0 lg:top-0 lg:z-10 lg:flex-row lg:justify-between lg:px-5 lg:pt-5", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-[90px] bg-white/15" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-8 w-[160px] bg-white/15" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-3.5 w-[240px] bg-white/15" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-5", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1.5 lg:items-center", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-8 bg-white/15" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-12 bg-white/15" })
+          ] }, index)) })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "min-w-0 w-[200px] shrink-0", children: [
-          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-bold tracking-[-0.01em]", children: row.place_name }),
-          /* @__PURE__ */ jsxs("span", { className: "mt-px flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
-            row.rating != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Star, { className: "h-2.5 w-2.5", "aria-hidden": true }),
-              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: row.rating })
-            ] }),
-            row.place_area && /* @__PURE__ */ jsx("span", { className: "truncate", children: row.place_area })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "block text-[9.5px] font-bold uppercase tracking-[0.1em] text-muted-foreground", children: labels.alias }),
-          /* @__PURE__ */ jsx("span", { className: "block truncate font-serif text-[13px] italic", children: row.alias })
-        ] }),
-        row.mentions != null && row.mentions > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[11px] tabular-nums text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(MessageSquare, { className: "h-[11px] w-[11px]", "aria-hidden": true }),
-          row.mentions
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: "w-[92px] shrink-0 text-right", children: [
-          /* @__PURE__ */ jsx(
-            "b",
-            {
-              className: cn(
-                "block text-sm font-extrabold tabular-nums",
-                isCheapest && "text-[var(--free,currentColor)]"
-              ),
-              children: formatPrice(row.price)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "block text-[10px] text-muted-foreground", children: isCheapest && labels.cheapest ? labels.cheapest : labels.perPortion })
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 lg:grid-cols-4 lg:gap-px", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex aspect-[4/3] flex-col justify-end p-4 lg:aspect-auto lg:min-h-[440px] lg:pb-[104px]",
+              index > 0 && "hidden lg:flex"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-[72px] rounded-full bg-white/15" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "mt-2.5 h-4 w-[60%] bg-white/15" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-3.5 w-[50%] bg-white/15" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-5 w-[80px] bg-white/15" })
+            ]
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 pb-4 pt-3 lg:absolute lg:inset-x-0 lg:bottom-0 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full bg-white/15 lg:flex-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full rounded-full bg-white/15 lg:w-[120px]" })
         ] })
-      ] });
-      const rowClasses = "flex items-center gap-4 px-5 py-3";
-      return /* @__PURE__ */ jsx("li", { className: "border-b border-border last:border-b-0", children: (hrefs == null ? void 0 : hrefs[row.place_slug]) ? /* @__PURE__ */ jsx(
-        LinkComponent,
-        {
-          href: hrefs[row.place_slug],
-          className: cn(
-            rowClasses,
-            "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-          ),
-          children: content
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: rowClasses, children: content }) }, row.place_slug);
-    }) }),
-    (footnote || actions) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 p-4", children: [
-      footnote && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-muted-foreground", children: footnote }),
-      actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
-    ] })
-  ] });
+      ] })
+    }
+  );
 }
 
-export { ConceptCompare };
+export { ConceptCompare, ConceptCompareSkeleton };

package/dist/components/concept-convergence.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * ConceptConvergence — many names, one dish, drawn on a dark stage.
+ *
+ * The explainer's proof: the kitchens' OWN spellings of a dish, each with its
+ * price, converging on the one concept they were matched into. Five visibly
+ * different strings under one photograph with one price column say what a
+ * paragraph about "matching" cannot.
+ *
+ * Drawn for the explainer's dark stage, and only there: the chips are white
+ * on ink, not a family's hue — the tint was doing no work once the stage
+ * went dark, and the spellings are the point, not the kitchens' cuisines.
+ * The concept card is the venue's real photograph, never the item's (which
+ * is generated), on the same ground as every photographed card.
+ */
+type ConceptConvergenceAlias = {
+    /** The kitchen's spelling, verbatim. */
+    label: string;
+    /** Pre-formatted, e.g. "32 lei". */
+    price: string;
+};
+type ConceptConvergenceProps = {
+    aliases: ConceptConvergenceAlias[];
+    concept: {
+        title: string;
+        /** A room's photograph — venue photography only. */
+        photoUrl?: string;
+        /** "32 names" — the badge on the card. */
+        badge: string;
+    };
+    /**
+     * Low, middle and high of the ruler under the diagram, e.g.
+     * `["8 lei", "45 kitchens", "44 lei"]`. All three, or none.
+     */
+    scale?: [string, string, string];
+    className?: string;
+};
+declare function ConceptConvergence({ aliases, concept, scale, className }: ConceptConvergenceProps): react_jsx_runtime.JSX.Element;
+
+export { ConceptConvergence, type ConceptConvergenceAlias, type ConceptConvergenceProps };