@bearmenu/ui 0.8.8 → 0.8.10

package/dist/{chunk-TT3WFS6S.js → chunk-YOKHBAIH.js}

@@ -1,4 +1,4 @@
-import { beats, returnTransition, MotionIcon } from './chunk-2WDJR6K7.js';
+import { beats, returnTransition, MotionIcon, pivot } from './chunk-G7IFL4Z4.js';
 import { __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';
 import { motion } from 'framer-motion';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -19,7 +19,7 @@ function MotionHeart(props) {
     motion.path,
     {
       variants: heartBody,
-      style: { originX: "12px", originY: "13px" },
+      style: pivot(12, 13),
       fill: "currentColor",
       fillOpacity: 0,
       d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
@@ -43,7 +43,7 @@ function MotionBookmark(props) {
     motion.path,
     {
       variants: bookmarkBody,
-      style: { originX: "12px", originY: "21px" },
+      style: pivot(12, 21),
       fill: "currentColor",
       fillOpacity: 0,
       d: "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
@@ -89,7 +89,7 @@ var found = {
   }
 };
 function MotionSearch(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: lens, style: { originX: "21px", originY: "21px" }, children: [
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: lens, style: pivot(21, 21), children: [
     /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
     /* @__PURE__ */ jsx("path", { d: "m21 21-4.34-4.34" }),
     /* @__PURE__ */ jsx(
@@ -97,7 +97,7 @@ function MotionSearch(props) {
       {
         variants: found,
         opacity: 0,
-        style: { originX: "11px", originY: "11px" },
+        style: pivot(11, 11),
         fill: "currentColor",
         cx: "11",
         cy: "11",
@@ -207,7 +207,7 @@ var crescent = {
   }
 };
 function MotionTheme(props) {
-  const origin = { originX: "12px", originY: "12px" };
+  const origin = pivot(12, 12);
   return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ jsx(motion.g, { variants: rays, style: origin, children: SUN_RAYS.map((d) => /* @__PURE__ */ jsx("path", { d }, d)) }),
     /* @__PURE__ */ jsx(motion.circle, { variants: disc, style: origin, cx: "12", cy: "12", r: "4" }),
@@ -232,7 +232,7 @@ var chevron = {
   }
 };
 function MotionChevron(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.path, { variants: chevron, style: { originX: "12px", originY: "12px" }, d: "m6 9 6 6 6-6" }) }));
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.path, { variants: chevron, style: pivot(12, 12), d: "m6 9 6 6 6-6" }) }));
 }
 var PLAYPAUSE_TIMES = [0, 0.24, 0.72, 1];
 var playHead = {
@@ -255,7 +255,7 @@ function pauseBar(dx) {
 var barLeft = pauseBar(5);
 var barRight = pauseBar(-5);
 function MotionPlayPause(props) {
-  const origin = { originX: "12px", originY: "12px" };
+  const origin = pivot(12, 12);
   return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ jsx(
       motion.path,
@@ -290,7 +290,7 @@ var slash = {
   }
 };
 function MotionEye(props) {
-  const origin = { originX: "12px", originY: "12px" };
+  const origin = pivot(12, 12);
   return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ jsx(
       motion.path,
@@ -320,7 +320,7 @@ function MotionStar(props) {
     motion.path,
     {
       variants: starBody,
-      style: { originX: "12px", originY: "12px" },
+      style: pivot(12, 12),
       fill: "currentColor",
       fillOpacity: 0,
       d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
@@ -368,7 +368,7 @@ var refreshRing = {
   }
 };
 function MotionRefresh(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: refreshRing, style: { originX: "12px", originY: "12px" }, children: [
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: refreshRing, style: pivot(12, 12), children: [
     /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
     /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
     /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "success" | "warning" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

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-UDN7UHJW.js';
+import '../chunk-DTXNDLSE.js';
+import '../chunk-5RWTOT5Y.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

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

@@ -0,0 +1,110 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * 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 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 card IS the rooms
+ *
+ * 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.
+ *
+ * ## Read across on desktop, one at a time on the phone
+ *
+ * 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" 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;
+    /** 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;
+    /** 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;
+    figures?: ConceptCompareFigure[];
+    /** Destination per room, keyed by place slug. A room without one is inert. */
+    hrefs?: Record<string, string>;
+    /** The provenance note in the foot. */
+    footnote?: string;
+    /** The action in the foot — pass a rendered link or button. */
+    actions?: React.ReactNode;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+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, ConceptCompareSkeleton };

package/dist/components/concept-compare.js

@@ -0,0 +1,238 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { ConceptCompareRail } from '../chunk-UDN7UHJW.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 { 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:backdrop-blur-lg before:[mask-image:linear-gradient(to_bottom,black_35%,transparent_100%)] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.8)_0%,oklch(0.16_0.012_55_/_0.6)_35%,oklch(0.16_0.012_55_/_0.22)_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,
+  lede,
+  formatPrice,
+  figures,
+  hrefs,
+  footnote,
+  actions,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  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
+  );
+  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(
+          ConceptCompareRail,
+          {
+            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/15 text-white/85 backdrop-blur-[2px]"
+                    ),
+                    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] italic 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);
+            })
+          }
+        )
+      ] })
+    }
+  );
+}
+function ConceptCompareSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-[18px] border border-border shadow-[var(--shadow-card)]",
+        className
+      ),
+      "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__ */ 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]" })
+        ] })
+      ] })
+    }
+  );
+}
+
+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 };

package/dist/components/concept-convergence.js

@@ -0,0 +1,53 @@
+import { PhotoGround } from '../chunk-5RWTOT5Y.js';
+import { Convergence } from '../chunk-MZL7CGCL.js';
+import '../chunk-LEAYBICI.js';
+import { Badge } from '../chunk-UKBNQO6Q.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ConceptConvergence({ aliases, concept, scale, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 text-white", className), children: [
+    /* @__PURE__ */ jsx(
+      Convergence,
+      {
+        linesClassName: "text-white/30",
+        sources: aliases.map((alias, index) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex h-7 max-w-full items-center gap-1.5 rounded-full bg-white/10 px-2.5 text-[11.5px] text-white",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: alias.label }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-white/60", children: alias.price })
+            ]
+          },
+          index
+        )),
+        target: /* @__PURE__ */ jsxs("span", { className: "relative isolate block aspect-[4/5] w-[112px] overflow-hidden rounded-[16px] shadow-[0_8px_24px_oklch(0_0_0/0.35)]", children: [
+          /* @__PURE__ */ jsx(
+            PhotoGround,
+            {
+              className: "-z-10",
+              mode: "stack",
+              photos: [concept.photoUrl],
+              initials: concept.title.charAt(0).toLocaleUpperCase(),
+              overlay: true,
+              loading: "eager"
+            }
+          ),
+          /* @__PURE__ */ jsx(Badge, { variant: "overlay", className: "absolute left-2 top-2", children: concept.badge }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-x-2 bottom-2 block text-balance font-serif text-[17px] font-semibold leading-tight tracking-[-0.02em] [text-shadow:0_1px_8px_oklch(0_0_0/0.5)]", children: concept.title })
+        ] })
+      }
+    ),
+    scale && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] tabular-nums text-white/60", children: [
+      /* @__PURE__ */ jsx("span", { children: scale[0] }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-white/20" }),
+      /* @__PURE__ */ jsx("span", { className: "font-semibold text-white", children: scale[1] }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-white/20" }),
+      /* @__PURE__ */ jsx("span", { children: scale[2] })
+    ] })
+  ] });
+}
+
+export { ConceptConvergence };

package/dist/components/convergence.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ConvergeLinesProps = {
+    /** How many sources the lines leave from. */
+    count: number;
+    /** Draw the curves in, source by source. Off: drawn already. */
+    animate?: boolean;
+    className?: string;
+};
+declare function ConvergeLines({ count, animate, className }: ConvergeLinesProps): react_jsx_runtime.JSX.Element;
+type ConvergenceProps = {
+    /** The many. One node each; the stack fans slightly so it reads as a spread, not a list. */
+    sources: ReactNode[];
+    /** The one. */
+    target: ReactNode;
+    /** The entrance choreography. Off for static reuse; the reader's reduced-motion setting is honoured either way. */
+    animate?: boolean;
+    /** The curves' colour, e.g. `"text-white/30"` on a dark stage. Defaults to the border. */
+    linesClassName?: string;
+    className?: string;
+};
+declare function Convergence({ sources, target, animate, linesClassName, className, }: ConvergenceProps): react_jsx_runtime.JSX.Element;
+
+export { ConvergeLines, type ConvergeLinesProps, Convergence, type ConvergenceProps };

package/dist/components/convergence.js

@@ -0,0 +1,4 @@
+export { ConvergeLines, Convergence } from '../chunk-MZL7CGCL.js';
+import '../chunk-LEAYBICI.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';