@bearmenu/ui 0.8.9 → 0.8.10

package/dist/components/top-ranking-legend.js

@@ -0,0 +1,124 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ACTIVE_BAND = "-20% 0px -75% 0px";
+function TopRankingLegend({ groups, heading, meta, className }) {
+  const entries = groups.flatMap((group) => group.entries);
+  const [activeSlug, setActiveSlug] = useState(null);
+  useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return void 0;
+    const nodes = entries.map((entry) => document.getElementById(entry.slug)).filter((node) => Boolean(node));
+    if (nodes.length === 0) return void 0;
+    const observer = new IntersectionObserver(
+      (observed) => {
+        const inBand = observed.filter((record) => record.isIntersecting);
+        if (inBand.length === 0) return;
+        const topmost = inBand.reduce(
+          (best, record) => record.boundingClientRect.top < best.boundingClientRect.top ? record : best
+        );
+        setActiveSlug(topmost.target.id);
+      },
+      { rootMargin: ACTIVE_BAND }
+    );
+    nodes.forEach((node) => observer.observe(node));
+    return () => observer.disconnect();
+  }, [entries.map((entry) => entry.slug).join("|")]);
+  return (
+    /*
+     * The height cap is a safety net, not the navigation model.
+     *
+     * `position: sticky` on an element TALLER than the viewport leaves its
+     * bottom permanently unreachable — at twenty-five rows on a 900px laptop
+     * you could never see ranks 20–25, however you scrolled. That is broken
+     * rather than merely tight, so the column scrolls internally once it
+     * exceeds the space available.
+     *
+     * It only ever engages on a viewport too short to fit the list: `max-height`
+     * with `overflow-y-auto` is inert when the content already fits, so nothing
+     * changes on a tall screen. `overscroll-contain` stops a flick inside the
+     * column from carrying on into the article behind it.
+     */
+    /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": heading,
+        className: cn(
+          /*
+           * Sticky at BOTH widths now, with a different offset and a different
+           * shape at each.
+           *
+           * On desktop it is the grouped column, pinned beside the article. On a
+           * phone it is the flat chip rail, pinned for the same reason the column
+           * is: this page is twenty-five long entries, so a reader at rank 14 is
+           * several screens from any means of jumping, and the rail scrolled away
+           * inside the first entry.
+           *
+           * The phone offset comes from `--legend-sticky-top`, which the CALLER
+           * sets, because it is that app's chrome — the consumer app pins under a
+           * fixed header at `calc(var(--header-offset) + env(safe-area-inset-top))`,
+           * exactly as its events day rail does. Reading the app's own
+           * `--header-offset` here would resolve to nothing in Storybook and in
+           * the other three consumers, and an invalid `calc` silently kills
+           * `top`, which turns the rail from mispositioned into not-sticky.
+           */
+          "sticky top-[var(--legend-sticky-top,0px)] z-20 lg:top-4 lg:z-auto",
+          "lg:max-h-[calc(100vh-2rem)] lg:self-start lg:overflow-y-auto lg:overscroll-contain",
+          "lg:[scrollbar-width:thin]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden lg:block", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold tracking-[-0.01em]", children: heading }),
+            meta && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11.5px] text-muted-foreground", children: meta })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "scrollbar-hide -mx-[var(--page-gutter)] flex gap-2 overflow-x-auto bg-background px-[var(--page-gutter)] pb-3 pt-1 lg:hidden", children: entries.map((entry) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: `#${entry.slug}`,
+              className: "inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-card px-3.5 text-[13px] transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-bold tabular-nums text-muted-foreground", children: entry.rank }),
+                entry.name
+              ]
+            }
+          ) }, entry.slug)) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:mt-5 lg:-mx-3 lg:block", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-4 last:mb-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "px-3 pb-1.5 text-[10.5px] font-bold uppercase tracking-[0.11em] text-muted-foreground", children: group.label }),
+            /* @__PURE__ */ jsx("ul", { children: group.entries.map((entry) => {
+              const isActive = entry.slug === activeSlug;
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: `#${entry.slug}`,
+                  "aria-current": isActive ? "location" : void 0,
+                  className: cn(
+                    "flex gap-2.5 rounded-lg px-3 py-2 text-[13px] leading-snug transition-colors motion-reduce:transition-none",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    isActive ? "bg-accent-subtle font-semibold text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "w-5 shrink-0 text-right font-bold tabular-nums",
+                          isActive ? "text-accent" : "text-muted-foreground/70"
+                        ),
+                        children: entry.rank
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: entry.name })
+                  ]
+                }
+              ) }, entry.slug);
+            }) })
+          ] }, group.key)) })
+        ]
+      }
+    )
+  );
+}
+
+export { TopRankingLegend };

package/dist/components/top-types.d.ts

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { MenuItemPreview } from './menu-types.js';
+import './place-types.js';
+
+/**
+ * The editorial ranking's view model — `/top/[category]`.
+ *
+ * Separate from `menu-types.ts` on purpose. The menu surfaces describe what a
+ * city HAS; these describe an argument the product is making about it, and the
+ * shapes reflect that: an entry carries a cited quote and a dated price because
+ * a rank is a claim and the page has to show why.
+ *
+ * Same contract as everywhere else: no app schemas, no hooks, no i18n. Strings
+ * arrive through labels, destinations through `href`, numbers through injected
+ * formatters.
+ */
+
+/** One entry in the ranking. */
+type TopRankEntry = {
+    rank: number;
+    slug: string;
+    name: string;
+    /** The venue page. */
+    href: string;
+    /** Neighbourhood, e.g. "Centru". */
+    district?: string;
+    /** Pre-resolved venue photograph. */
+    coverUrl?: string;
+    /** The app's grade, already formatted — "9.4". Absent where none exists. */
+    gradeLabel?: string;
+    /** The band that grade falls in, e.g. "Exceptional". Composed by the caller. */
+    tierLabel?: string;
+    /** Third-party star rating, shown only where there is no grade. */
+    rating?: number;
+    /**
+     * The editorial line — why this one is here, in the product's own voice.
+     *
+     * Distinct from `evidence`, which is a reviewer's words. Conflating them was
+     * the old page's problem: a quote presented as editorial reads as invented,
+     * and editorial presented as a quote reads as dishonest.
+     */
+    editorial?: string;
+    /**
+     * The dishes this venue is named for, as PRODUCTION MENU ROWS.
+     *
+     * `MenuItemPreview`, so the entry renders the same `<MenuItem>` a venue's own
+     * menu and every hub surface renders. The first pass here hand-rolled a row —
+     * a bold name, a muted description, a price — which drifted from the real one
+     * immediately and meant a dish looked like a different object on this page
+     * than on every other.
+     *
+     * More than one, because a rank is a claim about a kitchen and one dish
+     * rarely carries it: the live page shows the group and two or three of its
+     * most-named plates.
+     */
+    menuItems?: MenuItemPreview[];
+    /** The group those items sit in, e.g. "Pizza". From the venue's own menu. */
+    menuGroupLabel?: string;
+    /** A reviewer's own words, and how many said it. */
+    evidence?: TopEvidence;
+};
+type TopEvidence = {
+    /**
+     * A reviewer's own words. OPTIONAL: a venue can carry a mention count with no
+     * quotable snippet behind it, and the count is evidence in its own right —
+     * dropping the whole block for want of a quote loses the number that
+     * justifies the rank.
+     */
+    quote?: string;
+    /**
+     * How many reviews back it — the figure alone, e.g. "37". Rendered as its own
+     * element beside `sourceLabel` so the number reads as a figure rather than as
+     * the first word of a sentence.
+     */
+    count?: string;
+    /** What the count is evidence OF, e.g. "reviews praise the shawarma here". */
+    sourceLabel: string;
+    /**
+     * The rest of the cited reviews, behind a disclosure.
+     *
+     * A `<details>`, not a drawer, and that is the whole point: its contents stay
+     * in the HTML, so the evidence is crawlable and readable with no JavaScript.
+     * A page whose entire argument is "here is why" cannot ship most of the why
+     * in a modal.
+     */
+    extraQuotes?: string[];
+    /** Summary text for the disclosure, e.g. "2 more reviews". Pluralised by the caller. */
+    extraLabel?: string;
+};
+/** One row of the side-by-side comparison. */
+type TopComparisonRow = {
+    rank: number;
+    name: string;
+    href: string;
+    gradeLabel?: string;
+    signature?: string;
+    priceLabel?: string;
+    /** Kitchen serving past midnight. */
+    late?: boolean;
+    terrace?: boolean;
+};
+/** A way out of the article and into the browsing tool. */
+type TopExit = {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+};
+
+export type { TopComparisonRow, TopEvidence, TopExit, TopRankEntry };

package/dist/components/top-types.js

@@ -0,0 +1 @@
+

package/dist/components/venue-grade-dimensions.d.ts

@@ -21,6 +21,8 @@ import { PlaceGradeDimensions } from './place-types.js';
  * Server-safe.
  */
 type VenueGradeDimensionKey = keyof PlaceGradeDimensions;
+/** Canonical order. Quality leads, and the three quality keys are mutually exclusive. */
+declare const DIMENSION_ORDER: VenueGradeDimensionKey[];
 type VenueGradeDimensionsProps = {
     dimensions: PlaceGradeDimensions;
     /** Dimension key → translated label. Keys with no label fall back to the key. */
@@ -33,4 +35,4 @@ type VenueGradeDimensionsProps = {
 };
 declare function VenueGradeDimensions({ dimensions, labels, order, formatScore, className, }: VenueGradeDimensionsProps): react_jsx_runtime.JSX.Element | null;
 
-export { type VenueGradeDimensionKey, VenueGradeDimensions, type VenueGradeDimensionsProps };
+export { DIMENSION_ORDER, type VenueGradeDimensionKey, VenueGradeDimensions, type VenueGradeDimensionsProps };

package/dist/components/venue-grade-dimensions.js

@@ -1,3 +1,3 @@
-export { VenueGradeDimensions } from '../chunk-AXV5O2IZ.js';
+export { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-AKQ57NXY.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/weekend-panel.js

@@ -1,6 +1,6 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
-import { MotionPlayPause } from '../chunk-TT3WFS6S.js';
-import '../chunk-2WDJR6K7.js';
+import { MotionPlayPause } from '../chunk-YOKHBAIH.js';
+import '../chunk-G7IFL4Z4.js';
 import { useDragSwipe } from '../chunk-IYDH5IU6.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/concept-compare-rail.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { PhotoGround } from "./photo-ground";
+import { SnapRail, SnapRailDots } from "./snap-rail";
+
+/**
+ * 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.
+ */
+
+export 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;
+};
+
+export 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;
+};
+
+/**
+ * The foot band's glass — two behaviours, one element.
+ *
+ * On the phone the band sits directly under a slide whose own scrim has
+ * already reached 0.9 at its bottom edge, so the glass is SOLID from its first
+ * pixel: a fade-in here left a lighter strip at the seam where the photograph
+ * showed through between the slide's darkness and the foot's, and the two read
+ * as disconnected pieces. From `lg` the foot floats over open photography with
+ * the room text well above it, so there it fades out over its top edge on the
+ * same curve as its mask, the way the head does at its underside.
+ *
+ * Same literal as every other scrim on the card, so they read as one shadow;
+ * not `var(--scrim)`, which is the app's token and not this package's.
+ */
+const FOOT_GLASS = cn(
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg",
+  "before:bg-[oklch(0.16_0.012_55_/_0.9)]",
+  "lg:before:[mask-image:linear-gradient(to_top,black_60%,transparent_100%)] lg:before:bg-[linear-gradient(to_top,oklch(0.16_0.012_55_/_0.88)_0%,oklch(0.16_0.012_55_/_0.84)_60%,oklch(0.16_0.012_55_/_0.4)_85%,oklch(0.16_0.012_55_/_0)_100%)]"
+);
+
+export function ConceptCompareRail({
+  backdrops,
+  railClassName,
+  foot,
+  children,
+}: ConceptCompareRailProps) {
+  const [active, setActive] = React.useState(0);
+  const count = React.Children.count(children);
+
+  return (
+    <>
+      {/* The backdrop: every room's photograph stacked, the active one shown,
+          cross-fading on swipe. Positioned against the CARD — `ConceptCompare`
+          renders this inside its `relative isolate` frame. Desktop hides it;
+          each room carries its own photograph there. */}
+      <PhotoGround
+        className="-z-10 lg:hidden"
+        mode="stack"
+        active={active}
+        photos={backdrops.map((backdrop) => backdrop.src)}
+        initials={backdrops.map((backdrop) => backdrop.initial)}
+        overlay
+        loading="eager"
+      />
+
+      {/* `pb-0` over the rail's default `pb-0.5`: two pixels of half-inked
+          photograph between the slide's scrim and the foot's glass reads as a
+          hairline where none was drawn.
+
+          `overscroll-x-contain`, because this card is itself a slide in the
+          hub's concept carousel. Without it a swipe that reaches the last room
+          chains into the outer rail and jumps to the next concept — the reader
+          asked to see the fourth kitchen and got a different dish. */}
+      <SnapRail
+        itemWidth="full"
+        gap="sm"
+        onActiveChange={setActive}
+        className={cn("pb-0 overscroll-x-contain", railClassName)}
+      >
+        {children}
+      </SnapRail>
+
+      {foot && (
+        <div
+          className={cn(
+            "relative isolate flex flex-col gap-3 px-4 pb-4 pt-3",
+            "lg:absolute lg:inset-x-0 lg:bottom-0 lg:z-10 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6",
+            FOOT_GLASS
+          )}
+        >
+          <SnapRailDots count={count} active={active} className="lg:hidden" />
+          {foot}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -1,35 +1,108 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./button";
 import { ConceptCompare } from "./concept-compare";
-import { mockConcept, mockGradients } from "./menu-mocks";
+import { mockConcept } from "./menu-mocks";
+import type { MenuConceptRow } from "./menu-types";
 
 const labels = {
   kind: "DISH CONCEPT",
-  alias: "ON THEIR MENU AS",
-  perPortion: "per portion",
-  cheapest: "cheapest shown",
-};
-
-const itemLabels = {
-  currency: "lei",
+  cheapest: "Cheapest",
   mentions: (count: number) => `${count} mentions`,
-  signature: "SIGNATURE",
-  mentioned: "MENTIONED",
+  openRoom: (alias: string, venue: string) => `${alias} at ${venue}`,
 };
 
 const formatPrice = (amount: number) => `${amount} lei`;
 
-const hrefs = Object.fromEntries(
-  (mockConcept.rows ?? []).map((row) => [row.place_slug, `/places/${row.place_slug}`])
+/** A stand-in venue photograph with enough variance that the glass has something to blur. */
+function room(hue: number, label: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="640"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 28% 60%)"/><stop offset="1" stop-color="hsl(${hue} 22% 26%)"/></linearGradient></defs><rect width="480" height="640" fill="url(#g)"/><circle cx="140" cy="150" r="70" fill="hsl(${hue} 40% 82%)" opacity=".55"/><rect x="240" y="360" width="200" height="140" fill="hsl(${hue} 15% 18%)" opacity=".7"/><text x="50%" y="92%" font-family="monospace" font-size="20" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+const rooms: MenuConceptRow[] = [
+  {
+    place_slug: "casa-maramureseana",
+    place_name: "Casa Maramureșeană",
+    alias: "Papanași cu Smântână și Dulceață",
+    price: 29,
+    mentions: 12,
+    rating: 4.5,
+    place_area: "Centru",
+    place_thumbnail_url: room(30, "room 1"),
+  },
+  {
+    place_slug: "maimuta-plangatoare",
+    place_name: "Maimuța Plângătoare",
+    alias: "Papanasi cu Gem si Smantana",
+    price: 31,
+    mentions: 19,
+    rating: 4.5,
+    place_area: "Centru",
+    place_thumbnail_url: room(200, "room 2"),
+  },
+  {
+    place_slug: "cafe-bulgakov",
+    place_name: "Café Bulgakov",
+    alias: "Papanași",
+    price: 32,
+    mentions: 12,
+    rating: 4.6,
+    place_area: "Centru",
+    place_thumbnail_url: room(90, "room 3"),
+  },
+  {
+    place_slug: "garlic",
+    place_name: "GARLIC - bites&tales",
+    alias: "Papanași în Țeapă",
+    price: 38,
+    mentions: 12,
+    rating: 4.7,
+    place_area: "Centru",
+    place_thumbnail_url: room(300, "room 4"),
+  },
+];
+
+const concept = { ...mockConcept, slug: "papanasi", title: "Papanași", rows: rooms };
+
+const figures = [
+  { value: "45", label: "kitchens" },
+  { value: "29–52", label: "lei across them", accent: true },
+  { value: "167", label: "mentions" },
+  { value: "8", label: "names" },
+];
+
+const hrefs = Object.fromEntries(rooms.map((r) => [r.place_slug, `/places/${r.place_slug}`]));
+
+const seeAll = (
+  <a
+    href="/menu/dishes/papanasi"
+    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md"
+  >
+    See all 45 kitchens
+  </a>
 );
 
 const meta: Meta<typeof ConceptCompare> = {
   title: "Menu/ConceptCompare",
   component: ConceptCompare,
   tags: ["autodocs"],
+  args: {
+    concept,
+    labels,
+    lede: "45 kitchens make it, and they do not agree on the name",
+    formatPrice,
+    figures,
+    hrefs,
+    footnote:
+      "The four cheapest of the 45, priced from each menu as it stands — the dearest is 52 lei. One photograph per kitchen; no room here is a room that does not serve it.",
+    actions: seeAll,
+  },
   decorators: [
     (Story) => (
-      <div className="w-[1000px] bg-background p-4">
+      <div className="w-[1100px] bg-background p-6">
         <Story />
       </div>
     ),
@@ -38,7 +111,7 @@ const meta: Meta<typeof ConceptCompare> = {
     docs: {
       description: {
         component:
-          "One dish or drink across every kitchen that makes it, under whatever name each of them uses. The row is PLACE-LED: it leads with the venue photograph, which is real and licensed, because the reader is choosing between restaurants. A price bar was drawn here first and measured the one value already printed beside it in words. From `lg` the rows are a comparison table; below it they become the production `MenuItem`, with the kitchen's own wording as the name.",
+          "One dish across the kitchens that make it — and **no surfaces at all**. The card is a contact sheet of venue photographs, one per room, and the three readable things float on it through glass: the identity across the top, each kitchen's line over its own photograph, the foot along the bottom. Read ACROSS, not down: four rooms side by side, each with its own name and price. The photographs are placed as cells of the same grid as the rooms, spanning from the head down, so the head's glass genuinely blurs them and every seam lands on a room boundary. Nothing in it is themed — the edge is the only thing that adapts to the page.",
       },
     },
   },
@@ -47,39 +120,48 @@ const meta: Meta<typeof ConceptCompare> = {
 export default meta;
 type Story = StoryObj<typeof ConceptCompare>;
 
-export const Default: Story = {
+export const Default: Story = {};
+
+/** The same card on a dark page: identical inside, a light hairline and deeper shadow outside. */
+export const DarkPage: Story = {
+  decorators: [
+    (Story) => (
+      <div className="dark w-[1100px] bg-background p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Three rooms: one across on the phone, then two. */
+export const ThreeRooms: Story = {
   args: {
-    concept: mockConcept,
-    labels,
-    itemLabels,
-    formatPrice,
-    gradient: mockGradients.pasta,
+    concept: { ...concept, title: "Kürtőskalács", rows: rooms.slice(0, 3) },
+    lede: "Three kitchens in the city make it",
     figures: [
-      { value: "44", label: "kitchens" },
-      { value: "8—44", label: "lei" },
-      { value: "168", label: "mentions" },
+      { value: "3", label: "kitchens" },
+      { value: "14–19", label: "lei across them", accent: true },
+      { value: "11", label: "mentions" },
+      { value: "3", label: "names" },
     ],
-    hrefs,
-    footnote: "Prices read from each menu as it stands. Portions normalised where the menu states them.",
-    actions: <Button size="sm">See all 44</Button>,
+    footnote:
+      "All three kitchens, all three rooms — so the spread above is the whole spread. A concept this thin has no tail to open.",
+    actions: undefined,
   },
 };
 
-/** Below `lg` every row is a `MenuItem`, the alias leading. */
-export const Mobile: Story = {
+/** A room with no photograph: the ground with the venue's initial, never a grey box. */
+export const MissingPhoto: Story = {
   args: {
-    concept: mockConcept,
-    labels,
-    itemLabels,
-    formatPrice,
-    gradient: mockGradients.pasta,
-    figures: [
-      { value: "44", label: "kitchens" },
-      { value: "8—44", label: "lei" },
-      { value: "168", label: "mentions" },
-    ],
-    hrefs,
+    concept: {
+      ...concept,
+      rows: rooms.map((r, i) => (i === 2 ? { ...r, place_thumbnail_url: undefined } : r)),
+    },
   },
+};
+
+/** 2×2 on the phone — the reading turns from across to around, but it is still four rooms in one view. */
+export const Mobile: Story = {
   decorators: [
     (Story) => (
       <div className="w-[390px] bg-background p-3">
@@ -88,17 +170,3 @@ export const Mobile: Story = {
     ),
   ],
 };
-
-/** With the concept's own photograph — the one item surface that shows one. */
-export const WithPhoto: Story = {
-  args: {
-    concept: mockConcept,
-    labels,
-    itemLabels,
-    formatPrice,
-    gradient: mockGradients.pasta,
-    imageUrl: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=200&h=200&fit=crop",
-    figures: [{ value: "44", label: "kitchens" }],
-    hrefs,
-  },
-};