@bearmenu/ui 0.8.9 → 0.8.10

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-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 { 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: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,
-  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/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);
+            })
           }
         )
-      ) : /* @__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 };

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

package/dist/components/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

package/dist/components/event-card.js

@@ -1,5 +1,5 @@
-import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';

package/dist/components/event-compact-row.js

@@ -1,5 +1,5 @@
-import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';

package/dist/components/event-detail-panel.js

@@ -1,5 +1,5 @@
-import { Separator } from '../chunk-WSRWFA6K.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { Button } from '../chunk-H3BV4VAG.js';

package/dist/components/event-index-row.js

@@ -1,6 +1,6 @@
-import { Separator } from '../chunk-WSRWFA6K.js';
 import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { Tag } from '../chunk-ZDAHKI3A.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';

package/dist/components/event-list-row-wide.js

@@ -1,6 +1,6 @@
-import { Separator } from '../chunk-WSRWFA6K.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Tag } from '../chunk-ZDAHKI3A.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { buttonVariants } from '../chunk-H3BV4VAG.js';

package/dist/components/event-list-row.js

@@ -1,7 +1,7 @@
-import { Separator } from '../chunk-WSRWFA6K.js';
-import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { TagGroup } from '../chunk-6XMYEZVR.js';
 import { Tag } from '../chunk-ZDAHKI3A.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/explainer-steps.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * ExplainerSteps — how something works, as numbered rules a reader can scan.
+ *
+ * Each step is a numeral in a ring, one line of prose, and the live figure
+ * that proves the line, right-aligned with its unit. A thread runs from one
+ * numeral to the next so the three read as a sequence, and the last numeral
+ * is filled: the rules end where the reader is asked to do something.
+ *
+ * A step without a figure shows none — an invented number in the column is
+ * worse than an empty one. But a list where no step has a figure should be
+ * prose, not steps.
+ *
+ * Server-safe. Data in, not children: a server component composes these from
+ * translated strings and numbers, and an array is easier to number than a
+ * child list is to clone.
+ */
+type ExplainerStepItem = {
+    /** One line. Two at most on a phone; a third is a paragraph and belongs elsewhere. */
+    text: ReactNode;
+    /** The live figure, pre-formatted. */
+    figure?: string;
+    /** A unit or caption beside the figure, e.g. "names". */
+    unit?: string;
+};
+type ExplainerStepsProps = {
+    steps: ExplainerStepItem[];
+    className?: string;
+};
+declare function ExplainerSteps({ steps, className }: ExplainerStepsProps): react_jsx_runtime.JSX.Element;
+
+export { type ExplainerStepItem, ExplainerSteps, type ExplainerStepsProps };

package/dist/components/explainer-steps.js

@@ -0,0 +1,36 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ExplainerSteps({ steps, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col", className), children: steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-3.5 pb-5 last:pb-0", children: [
+      !isLast && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute bottom-0 left-[11px] top-7 w-px bg-border"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-bold tabular-nums",
+            isLast ? "bg-primary text-primary-foreground" : "border border-border bg-background text-muted-foreground"
+          ),
+          children: index + 1
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 pt-0.5 text-[14px] leading-[1.45] text-foreground", children: step.text }),
+      step.figure && /* @__PURE__ */ jsxs("span", { className: "shrink-0 pt-0.5 text-right text-[15px] font-bold leading-[1.45] tabular-nums text-foreground", children: [
+        step.figure,
+        step.unit && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[11px] font-normal text-muted-foreground", children: step.unit })
+      ] })
+    ] }, index);
+  }) });
+}
+
+export { ExplainerSteps };