@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/concept-compare.tsx

@@ -0,0 +1,443 @@
+import { ArrowDown, MapPin, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { ConceptCompareRail } from "./concept-compare-rail";
+import type { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * 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. */
+export type ConceptCompareLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: ConceptCompareLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export 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;
+};
+
+export 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;
+};
+
+export 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;
+};
+
+/** Four rooms across on desktop; the caller decides how many it sends. */
+const MAX_ROOMS = 4;
+
+/** The venue's first letter, for a room with no photograph. */
+const initialOf = (name: string) => (name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+
+/** The card's ground is `PhotoGround`'s — the phone's surface for head and foot too. */
+const GROUND = PHOTO_GROUND;
+
+/*
+ * The layers, bottom to top: the photograph, a DARK OVERLAY on it, the room's
+ * own scrim under its type, and the two glass bands. Written out in full rather
+ * than composed from a shared colour string: Tailwind emits only the classes it
+ * can read verbatim at build time, and a template literal is invisible to it —
+ * the class would be in the DOM and the style would not exist.
+ *
+ * Every layer shares one literal, `oklch(0.16 0.012 55)`, so they read as one
+ * shadow. Not `var(--scrim)`: that token is the app's, not this package's.
+ */
+
+/** `PhotoGround`'s overlay, plus the hover that lifts it off THIS room only. */
+const PHOTO_OVERLAY_HOVER =
+  "transition-opacity duration-300 group-hover/room:opacity-0 motion-reduce:transition-none";
+
+/** Each room's own scrim, rising from its foot under the type. */
+const 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%)]";
+
+/**
+ * The head band's glass. Mask and ink both run the band's full height and go
+ * to ZERO at its underside on the same curve — a soft edge, not a line.
+ */
+const 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%)]";
+
+/* The foot band's glass lives in `concept-compare-rail.tsx`, with the foot. */
+
+/**
+ * Desktop column templates by room count — literal, for the scanner. The phone
+ * ignores these: there the rail lays the rooms out.
+ */
+const COLUMNS: Record<number, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+};
+
+/**
+ * How far a room's text sits above the card's foot on desktop, where the foot
+ * is an absolute band over the rooms. The band is one line of prose and a
+ * button, ~80px; the padding clears it with room to spare at `lg`, where the
+ * prose can wrap to two lines.
+ */
+const DESKTOP_FOOT_CLEARANCE = "lg:pb-[104px]";
+
+export function ConceptCompare({
+  concept,
+  labels,
+  lede,
+  formatPrice,
+  figures,
+  hrefs,
+  footnote,
+  actions,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: ConceptCompareProps) {
+  const rooms = (concept.rows ?? []).slice(0, MAX_ROOMS);
+  const count = rooms.length;
+  if (count === 0) return null;
+
+  // Derived, not passed: the cheapest room is a fact about THIS list, and a
+  // caller computing it separately could disagree with what is rendered.
+  const cheapest = rooms.reduce<number | undefined>(
+    (lowest, room) => (lowest === undefined || room.price < lowest ? room.price : lowest),
+    undefined
+  );
+  const rankOf = labels.rank ?? ((rank: number) => `#${rank}`);
+  const hasFoot = Boolean(footnote || actions);
+
+  return (
+    <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
+      )}
+    >
+      <div className={cn("dark relative isolate flex flex-col text-foreground", GROUND)}>
+        {/* ── The identity ─────────────────────────────────────────────── */}
+        {/* A `div`, not `<header>`. Outside `<article>`/`<section>` a `<header>`
+            is the `banner` landmark and a `<footer>` is `contentinfo`, so each
+            card would have announced itself as the page's own header and
+            footer to a screen reader. */}
+        <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
+          )}
+        >
+          <div className="min-w-0">
+            <span className="block text-[10.5px] font-extrabold uppercase tracking-[0.13em] text-white/70">
+              {labels.kind}
+            </span>
+            <h3 className="mt-1 font-serif text-[28px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[32px]">
+              {concept.title}
+            </h3>
+            {lede && <p className="mt-1 text-[13px] leading-snug text-white/75">{lede}</p>}
+          </div>
+
+          {figures && figures.length > 0 && (
+            <dl className="flex shrink-0 flex-wrap gap-x-5 gap-y-2 lg:gap-x-6">
+              {figures.map((figure) => (
+                <div key={figure.label} className="flex flex-col items-start lg:items-center">
+                  <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"
+                    )}
+                  >
+                    {figure.value}
+                  </dd>
+                  <dt className="mt-1 text-[11px] text-white/65">{figure.label}</dt>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
+
+        {/* ── The rooms: a rail on the phone, a row from `lg` ──────────── */}
+        {/* The rail also owns the phone's backdrop — the card's ground is the
+            ACTIVE room's photograph, cross-fading on swipe. That is the one
+            piece of state in this card, so it is the one client boundary, and
+            it takes only what can cross one: URLs, initials, rendered rooms. */}
+        <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",
+            COLUMNS[count] ?? COLUMNS[4]
+          )}
+          /* The foot's CONTENT; the rail draws the band, because on the phone
+             the page dots belong inside its glass and the dots are the rail's
+             state. */
+          foot={
+            hasFoot ? (
+              <>
+                {footnote && (
+                  <p className="min-w-0 flex-1 text-[12px] leading-relaxed text-white/70">
+                    {footnote}
+                  </p>
+                )}
+                {actions && (
+                  <div className="flex shrink-0 [&>*]:w-full lg:[&>*]:w-auto">{actions}</div>
+                )}
+              </>
+            ) : undefined
+          }
+        >
+          {rooms.map((room, index) => {
+            const href = 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 = (
+              <>
+                {/* Behind the type: the room's own photograph and its overlay
+                    (desktop only — on the phone the card's ground is the
+                    photograph), and the scrim (both). */}
+                <span aria-hidden className="absolute inset-0 -z-10">
+                  <PhotoGround
+                    className="hidden lg:block"
+                    photos={[room.place_thumbnail_url]}
+                    initials={initialOf(room.place_name)}
+                    mosaicClassName="grid-cols-1"
+                    overlay
+                    overlayClassName={PHOTO_OVERLAY_HOVER}
+                  />
+                  <span className={ROOM_SCRIM} />
+                </span>
+
+                <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]"
+                  )}
+                >
+                  {isCheapest && <ArrowDown className="h-3 w-3 shrink-0" aria-hidden />}
+                  {isCheapest ? labels.cheapest : rankOf(index + 1)}
+                </span>
+
+                {/* Name and rating on one line: the pin leads, the name takes
+                    what is left, the star sits at the end. */}
+                <span className="mt-2.5 flex items-center gap-1.5 text-white">
+                  <MapPin className="h-3.5 w-3.5 shrink-0 text-white/70" aria-hidden />
+                  <b className="min-w-0 flex-1 truncate text-[15px] font-bold leading-tight">
+                    {room.place_name}
+                  </b>
+                  {room.rating !== undefined && (
+                    <span className="flex shrink-0 items-center gap-1 text-[12px] text-white/70">
+                      <Star className="h-3 w-3 shrink-0" aria-hidden />
+                      <span className="tabular-nums">{room.rating}</span>
+                    </span>
+                  )}
+                </span>
+                {room.place_area && (
+                  <span className="mt-0.5 block text-[12px] text-white/70">{room.place_area}</span>
+                )}
+
+                {/* The kitchen's own wording — the evidence that these are
+                    matched rows rather than one row repeated. */}
+                <span className="mt-2 block truncate font-serif text-[14px] italic text-white/90">
+                  {room.alias}
+                </span>
+
+                {/* The DS rule. `via-white/20` because the dark theme's `--border`
+                    is a 0.32-lightness grey that vanishes on inked photography. */}
+                <Separator className="my-2.5 via-white/20" />
+
+                <span className="flex items-baseline gap-2">
+                  <b
+                    className={cn(
+                      "text-[19px] font-bold leading-none tabular-nums tracking-[-0.02em]",
+                      isCheapest ? "text-success" : "text-white"
+                    )}
+                  >
+                    {formatPrice(room.price)}
+                  </b>
+                  {room.mentions !== undefined && room.mentions > 0 && (
+                    <span className="text-[11.5px] text-white/65">
+                      {labels.mentions(room.mentions)}
+                    </span>
+                  )}
+                </span>
+              </>
+            );
+
+            return href ? (
+              <LinkComponent
+                key={room.place_slug}
+                href={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"
+                )}
+              >
+                {body}
+              </LinkComponent>
+            ) : (
+              <div key={room.place_slug} className={roomClass}>
+                {body}
+              </div>
+            );
+          })}
+        </ConceptCompareRail>
+      </div>
+    </div>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/**
+ * 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.
+ */
+export function ConceptCompareSkeleton({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-[18px] border border-border shadow-[var(--shadow-card)]",
+        className
+      )}
+      aria-hidden
+    >
+      <div className={cn("dark relative flex flex-col text-foreground", GROUND)}>
+        <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">
+          <div>
+            <Skeleton className="h-2.5 w-[90px] bg-white/15" />
+            <Skeleton className="mt-2 h-8 w-[160px] bg-white/15" />
+            <Skeleton className="mt-2 h-3.5 w-[240px] bg-white/15" />
+          </div>
+          <div className="flex gap-5">
+            {Array.from({ length: 4 }, (_, index) => (
+              <div key={index} className="flex flex-col items-start gap-1.5 lg:items-center">
+                <Skeleton className="h-6 w-8 bg-white/15" />
+                <Skeleton className="h-2.5 w-12 bg-white/15" />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 lg:gap-px">
+          {Array.from({ length: 4 }, (_, index) => (
+            <div
+              key={index}
+              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"
+              )}
+            >
+              <Skeleton className="h-[22px] w-[72px] rounded-full bg-white/15" />
+              <Skeleton className="mt-2.5 h-4 w-[60%] bg-white/15" />
+              <Skeleton className="mt-2 h-3.5 w-[50%] bg-white/15" />
+              <Skeleton className="mt-4 h-5 w-[80px] bg-white/15" />
+            </div>
+          ))}
+        </div>
+
+        <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">
+          <Skeleton className="h-3 w-full bg-white/15 lg:flex-1" />
+          <Skeleton className="h-10 w-full rounded-full bg-white/15 lg:w-[120px]" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/concept-convergence.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConceptConvergence } from "./concept-convergence";
+
+function photo(hue: number) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="400"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 30% 62%)"/><stop offset="1" stop-color="hsl(${hue} 20% 28%)"/></linearGradient></defs><rect width="320" height="400" fill="url(#g)"/><circle cx="90" cy="120" r="60" fill="hsl(${hue} 40% 80%)" opacity=".6"/></svg>`
+    )
+  );
+}
+
+const meta: Meta<typeof ConceptConvergence> = {
+  title: "Menu/ConceptConvergence",
+  component: ConceptConvergence,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-[oklch(0.21_0.012_55)] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    aliases: [
+      { label: "Papanași", price: "18 lei" },
+      { label: "Papanasi cu smantana si dulceata", price: "24 lei" },
+      { label: "Papanași de casă", price: "28 lei" },
+      { label: "Papanasi (2 buc)", price: "32 lei" },
+      { label: "Papanași cu fineți", price: "44 lei" },
+    ],
+    concept: { title: "Papanași", photoUrl: photo(30), badge: "32 names" },
+    scale: ["8 lei", "45 kitchens", "44 lei"],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Many names, one dish, drawn on the explainer's dark stage. The kitchens' own spellings of a dish, each with its price, converge on the concept they were matched into — the proof the concepts explainer opens with. Chips are white on ink; the concept card is a room's real photograph on the shared `PhotoGround`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptConvergence>;
+
+export const Default: Story = {};
+
+/** No photograph for the lead room: the ground with the initial. */
+export const NoPhoto: Story = {
+  args: { concept: { title: "Ciorbă de burtă", badge: "12 names" } },
+};

package/src/components/concept-convergence.tsx

@@ -0,0 +1,90 @@
+import { cn } from "../lib/utils";
+import { Badge } from "./badge";
+import { Convergence } from "./convergence";
+import { PhotoGround } from "./photo-ground";
+
+/**
+ * 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.
+ */
+
+export type ConceptConvergenceAlias = {
+  /** The kitchen's spelling, verbatim. */
+  label: string;
+  /** Pre-formatted, e.g. "32 lei". */
+  price: string;
+};
+
+export 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;
+};
+
+export function ConceptConvergence({ aliases, concept, scale, className }: ConceptConvergenceProps) {
+  return (
+    <div className={cn("flex flex-col gap-3 text-white", className)}>
+      <Convergence
+        linesClassName="text-white/30"
+        sources={aliases.map((alias, index) => (
+          <span
+            key={index}
+            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"
+          >
+            <span className="min-w-0 truncate">{alias.label}</span>
+            <span className="shrink-0 tabular-nums text-white/60">{alias.price}</span>
+          </span>
+        ))}
+        target={
+          <span className="relative isolate block aspect-[4/5] w-[112px] overflow-hidden rounded-[16px] shadow-[0_8px_24px_oklch(0_0_0/0.35)]">
+            <PhotoGround
+              className="-z-10"
+              mode="stack"
+              photos={[concept.photoUrl]}
+              initials={concept.title.charAt(0).toLocaleUpperCase()}
+              overlay
+              loading="eager"
+            />
+            <Badge variant="overlay" className="absolute left-2 top-2">
+              {concept.badge}
+            </Badge>
+            <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)]">
+              {concept.title}
+            </span>
+          </span>
+        }
+      />
+
+      {scale && (
+        <div className="flex items-center gap-2 text-[11px] tabular-nums text-white/60">
+          <span>{scale[0]}</span>
+          <span aria-hidden className="h-px flex-1 bg-white/20" />
+          <span className="font-semibold text-white">{scale[1]}</span>
+          <span aria-hidden className="h-px flex-1 bg-white/20" />
+          <span>{scale[2]}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/convergence.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MessageSquareQuote } from "lucide-react";
+import { Convergence } from "./convergence";
+
+const meta: Meta<typeof Convergence> = {
+  title: "Menu/Convergence",
+  component: Convergence,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Many things on the left becoming one thing on the right. The DS draws the shape — the fanned stack, the hairlines curving into one point — and the caller draws the nodes. `ConceptConvergence` is the dish version; this story is the reviews version, redacted lines converging on a mention count.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Convergence>;
+
+export const Reviews: Story = {
+  render: () => (
+    <Convergence
+      linesClassName="text-white/30"
+      sources={Array.from({ length: 6 }, (_, index) => (
+        <span key={index} className="flex items-center gap-2" aria-hidden>
+          <MessageSquareQuote className="h-4 w-4 text-white/40" />
+          <span className="h-2 rounded-full bg-white/20" style={{ width: 48 + ((index * 37) % 60) }} />
+        </span>
+      ))}
+      target={
+        <span className="flex flex-col items-center rounded-[18px] bg-white/10 px-5 py-4 text-white shadow-[0_8px_24px_oklch(0_0_0/0.35)]">
+          <span className="text-[40px] font-extrabold leading-none tabular-nums">56</span>
+          <span className="mt-1 text-[11px] text-white/70">mentions</span>
+        </span>
+      }
+    />
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-[oklch(0.21_0.012_55)] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};