@bearmenu/ui 0.8.8 → 0.8.9

package/src/components/colour-dictionary.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+/**
+ * Foundations / Colour dictionary — every colour a menu surface paints, in one
+ * table grouped by the forest element it is, with the reason beside it. A page,
+ * not a component: the values live in the consuming app (see the notes under
+ * the table), this is where a person goes to understand them.
+ */
+
+type Chip = { label: string; value: string };
+
+type Row = {
+  element: string;
+  why: string;
+  /** The three `--menu-field-<family>-<n>` tints, when this element is a card-field family. */
+  field?: { family: string; tints: [string, string, string]; draws: string };
+  /** `FAMILY_HUES` entries painted by the hub's family cards (chips, price band, photo tint). */
+  familyCards: Chip[];
+  /** `INTENT_GRADIENTS` entries painted by the hub's intent tiles. */
+  intents: Chip[];
+};
+
+const ROWS: Row[] = [
+  {
+    element: "Wheat and honey",
+    why: "Grain and what goes on it — crust, pasta, pizza base, pastry, yolk — is this gold before it is cooked. Honey in the comb is the same colour, and so is morning light on toast, which is why brunch and beer (roasted malt) sit here too.",
+    field: { family: "larder", tints: ["oklch(0.505 0.11 74)", "oklch(0.555 0.105 80)", "oklch(0.465 0.115 68)"], draws: "bread, pasta, pizza, eggs, sides, sauces, spirits" },
+    familyCards: [{ label: "Breakfast & brunch", value: "oklch(0.62 0.14 82)" }, { label: "Bakeries", value: "oklch(0.58 0.11 72)" }, { label: "Beer", value: "oklch(0.62 0.13 86)" }],
+    intents: [{ label: "Brunch", value: "oklch(0.62 0.14 82)" }],
+  },
+  {
+    element: "Lake water",
+    why: "Fish, shellfish and soup come out of water, and a cocktail is a glass of it. A forest has a lake, not a sea: dark, blue-green, in shade — so the hue stays on the green side (198–220) and never reads as sky or as a pool.",
+    field: { family: "sea", tints: ["oklch(0.485 0.095 205)", "oklch(0.535 0.09 198)", "oklch(0.445 0.095 212)"], draws: "fish, shellfish, soups, cocktails" },
+    familyCards: [{ label: "Cocktails", value: "oklch(0.47 0.10 205)" }],
+    intents: [{ label: "Cocktail bars", value: "oklch(0.47 0.10 205)" }],
+  },
+  {
+    element: "Ember and terracotta",
+    why: "Meat is the family cooked over fire: the red of the coals, the crust on beef, cured and smoked meat. Red wine shares the glass and the colour. Terracotta is the same fire one step warmer — the oven's brick and the tomato — which is why Italian sits beside Romanian here.",
+    field: { family: "meat", tints: ["oklch(0.49 0.13 28)", "oklch(0.54 0.13 34)", "oklch(0.45 0.13 22)"], draws: "beef, game, cured meat, burgers, red wine" },
+    familyCards: [{ label: "Romanian", value: "oklch(0.48 0.16 25)" }, { label: "Italian", value: "oklch(0.56 0.15 38)" }],
+    intents: [{ label: "Burgers", value: "oklch(0.48 0.16 25)" }, { label: "Italian tonight", value: "oklch(0.56 0.15 38)" }],
+  },
+  {
+    element: "Maple and amber",
+    why: "Sugar turns this colour when it meets heat: caramel, syrup, the top of a crème brûlée, the maple leaf in autumn — and a pizza crust out of the oven, which is why the Pizza card wears it. Beer's amber is the same chemistry, malt roasted, so beer items draw this field even though the beer card wears honey.",
+    field: { family: "sweet", tints: ["oklch(0.505 0.14 50)", "oklch(0.555 0.135 58)", "oklch(0.465 0.14 44)"], draws: "desserts, pastry, beer" },
+    familyCards: [{ label: "Pizza", value: "oklch(0.52 0.14 58)" }],
+    intents: [],
+  },
+  {
+    element: "Fern and pine",
+    why: "The leaf itself. Salads, vegetables and the non-alcoholic glass — juice, lemonade, the herb in it — are the green things on the menu and take the forest's own green: pine-deep rather than lime, so it stays a forest and not a lawn.",
+    field: { family: "verdant", tints: ["oklch(0.505 0.115 148)", "oklch(0.555 0.11 138)", "oklch(0.465 0.115 156)"], draws: "salads, vegetables, non-alcoholic" },
+    familyCards: [{ label: "Vegetarian", value: "oklch(0.52 0.14 148)" }, { label: "Vegan", value: "oklch(0.55 0.12 135)" }],
+    intents: [{ label: "Vegan", value: "oklch(0.52 0.14 148)" }],
+  },
+  {
+    element: "Bark and walnut",
+    why: "The roasted bean is the colour of tree bark, and a coffee house is made of both — wood and roast. Walnut is the same brown darker: a lit doorway at night, which is what \"open right now\" looks like from the street. Coffee items themselves draw the non-alcoholic field (pine), not this.",
+    familyCards: [{ label: "Coffee", value: "oklch(0.44 0.10 52)" }],
+    intents: [{ label: "Coffee", value: "oklch(0.44 0.10 52)" }, { label: "Open right now", value: "oklch(0.44 0.08 62)" }],
+  },
+  {
+    element: "Rosehip",
+    why: "The forest's berry: the jam in the tart, the fruit on the cake, the glass of red. A red with no purple in it — the magenta and violet it replaced belong to no place a bear has been.",
+    familyCards: [{ label: "Wine by the glass", value: "oklch(0.48 0.14 12)" }],
+    intents: [{ label: "Patisseries", value: "oklch(0.52 0.15 12)" }],
+  },
+  {
+    element: "Moss in sun",
+    why: "The sunlit forest floor. Yellow-green because a terrace is the one intent about being outdoors in daylight; deeper than lime so it is ground, not a highlighter.",
+    familyCards: [],
+    intents: [{ label: "On a terrace", value: "oklch(0.60 0.13 122)" }],
+  },
+  {
+    element: "Stone",
+    why: "No colour of its own. An untagged dish gets it because there is no ingredient to be coloured by; Centru gets it because the town is the one intent that is a place and not a taste. Never a section mark — as a mark, grey reads as absent.",
+    field: { family: "neutral", tints: ["oklch(0.505 0.02 60)", "oklch(0.555 0.022 66)", "oklch(0.465 0.018 54)"], draws: "an untagged dish only" },
+    familyCards: [],
+    intents: [{ label: "In Centru", value: "oklch(0.50 0.03 70)" }],
+  },
+];
+
+const NOT_THESE: Chip[] = [
+  { label: "sky blue", value: "oklch(0.5 0.13 240)" },
+  { label: "teal", value: "oklch(0.55 0.12 190)" },
+  { label: "violet", value: "oklch(0.5 0.11 300)" },
+  { label: "magenta", value: "oklch(0.52 0.13 340)" },
+  { label: "olive-yellow", value: "oklch(0.58 0.12 95)" },
+];
+
+const darker = (value: string) =>
+  value.replace(/oklch\(([\d.]+) /, (_m, l: string) => `oklch(${(Number(l) - 0.09).toFixed(3)} `);
+
+function Swatch({ label, value, angle = 135, tall }: Chip & { angle?: number; tall?: boolean }) {
+  return (
+    <div className="flex w-[104px] shrink-0 flex-col gap-1">
+      <span
+        aria-hidden
+        className={tall ? "block h-14 rounded-lg" : "block h-9 rounded-lg"}
+        style={{ backgroundImage: `linear-gradient(${angle}deg, ${value}, ${darker(value)})` }}
+      />
+      <span className="text-[11px] font-semibold leading-tight">{label}</span>
+      <code className="text-[9.5px] leading-tight text-muted-foreground">{value.replace("oklch(", "").replace(")", "")}</code>
+    </div>
+  );
+}
+
+const TH = "px-3 py-2 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-muted-foreground";
+const TD = "px-3 py-3 align-top";
+
+function ColourDictionaryPage() {
+  return (
+    <article className="mx-auto max-w-[1440px] px-6 py-7 text-foreground">
+      <p className="text-[11px] font-bold uppercase tracking-[0.09em] text-muted-foreground">Foundations</p>
+      <h1 className="mt-0.5 text-[26px] font-extrabold tracking-[-0.02em]">The menu colour dictionary</h1>
+      <p className="mt-1 max-w-[90ch] text-[14px] leading-[1.55] text-foreground/85">
+        Every hue is a forest object, at full strength — the floor and canopy of a forest and what a bear eats off it.
+        Every colour a menu surface paints is in this table, grouped by the element it is, with why it belongs.
+        <span className="ml-2 inline-flex items-center gap-2 align-middle text-[12px] text-muted-foreground">
+          Not in the forest, so not in the palette:
+          {NOT_THESE.map((c) => (
+            <span key={c.label} className="inline-flex items-center gap-1 line-through">
+              <span aria-hidden className="inline-block h-3.5 w-5 rounded-sm" style={{ background: c.value }} />
+              {c.label}
+            </span>
+          ))}
+        </span>
+      </p>
+
+      <div className="mt-5 overflow-x-auto rounded-xl border border-border">
+        <table className="w-full min-w-[1180px] border-collapse text-[13px]">
+          <thead className="bg-muted/60">
+            <tr>
+              <th className={`${TH} w-[290px]`}>Element · why it belongs</th>
+              <th className={TH}>Card fields · the three tints</th>
+              <th className={TH}>Family cards · chips, price band, photo tint</th>
+              <th className={TH}>Intent tiles</th>
+            </tr>
+          </thead>
+          <tbody>
+            {ROWS.map((row) => (
+              <tr key={row.element} className="border-t border-border">
+                <td className={TD}>
+                  <div className="text-[15px] font-extrabold tracking-[-0.01em]">{row.element}</div>
+                  <p className="mt-1 text-[12.5px] leading-[1.5] text-foreground/85">{row.why}</p>
+                </td>
+                <td className={TD}>
+                  {row.field ? (
+                    <div className="flex flex-col gap-2">
+                      <div className="flex gap-2">
+                        {row.field.tints.map((tint, index) => (
+                          <Swatch key={tint} label={`${row.field!.family}-${index}`} value={tint} tall />
+                        ))}
+                      </div>
+                      <div className="text-[11.5px] text-muted-foreground">
+                        <span className="font-semibold text-foreground/80">draws</span> {row.field.draws}
+                      </div>
+                    </div>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </td>
+                <td className={TD}>
+                  {row.familyCards.length ? (
+                    <div className="flex gap-2">
+                      {row.familyCards.map((c) => (
+                        <Swatch key={c.label} {...c} angle={150} />
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </td>
+                <td className={TD}>
+                  {row.intents.length ? (
+                    <div className="flex gap-2">
+                      {row.intents.map((c) => (
+                        <Swatch key={c.label} {...c} angle={150} />
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-8 grid gap-8 md:grid-cols-3">
+        <section>
+          <h2 className="text-[15px] font-extrabold">How a colour is chosen</h2>
+          <ol className="mt-2 list-decimal space-y-1.5 pl-4 text-[13px] leading-[1.55] text-foreground/85">
+            <li><b>What is the family made of, or where is it consumed?</b> Grain, fire, water, sugar, leaf; a night out, a morning, the town.</li>
+            <li><b>Which forest element already has that colour — literally?</b> Wheat is gold, embers are red, lake water is blue-green. If nothing in a forest has it, it does not go in; that is how violet and magenta left.</li>
+            <li><b>Take it at full strength.</b> An early pass pulled every chroma down to feel earthy and read as faded. Keep lightness 0.44–0.62 so white type at 0.26–0.30 alpha stays readable.</li>
+          </ol>
+        </section>
+        <section>
+          <h2 className="text-[15px] font-extrabold">The colour names a family, never an item</h2>
+          <p className="mt-2 text-[13px] leading-[1.55] text-foreground/85">
+            Sixteen appetizers draw one colour. Two dishes in one family differ only by one of the three tints, keyed on the parent concept so the same dish is the same tint on every menu and after every re-sort. A category's section mark always uses tint <code>-0</code>. Where a family has both a card and an intent tile, they share the value so the two doors to one page agree.
+          </p>
+        </section>
+        <section>
+          <h2 className="text-[15px] font-extrabold">Where the values live</h2>
+          <p className="mt-2 text-[13px] leading-[1.55] text-foreground/85">
+            The design system owns the typography, the falloff and the layering (<code>MenuField</code>, <code>MenuFamilyCard</code>, <code>MenuIntentTiles</code>) and takes a finished colour as a prop. The palette lives in the fe app: the eighteen <code>--menu-field-*</code> tokens in <code>app/globals.css</code>, <code>FAMILY_HUES</code> and <code>INTENT_GRADIENTS</code> in <code>hub-gradients.ts</code>, category → family in <code>category-colors.ts</code>. The Storybook mocks carry the same values so post-generator films what the app paints.
+          </p>
+        </section>
+      </div>
+    </article>
+  );
+}
+
+const meta: Meta<typeof ColourDictionaryPage> = {
+  title: "Foundations/Colour dictionary",
+  component: ColourDictionaryPage,
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+export const Page: StoryObj<typeof ColourDictionaryPage> = {};

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { ConceptCompare } from "./concept-compare";
+import { mockConcept, mockGradients } from "./menu-mocks";
+
+const labels = {
+  kind: "DISH CONCEPT",
+  alias: "ON THEIR MENU AS",
+  perPortion: "per portion",
+  cheapest: "cheapest shown",
+};
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+
+const formatPrice = (amount: number) => `${amount} lei`;
+
+const hrefs = Object.fromEntries(
+  (mockConcept.rows ?? []).map((row) => [row.place_slug, `/places/${row.place_slug}`])
+);
+
+const meta: Meta<typeof ConceptCompare> = {
+  title: "Menu/ConceptCompare",
+  component: ConceptCompare,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    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.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptCompare>;
+
+export const Default: 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,
+    footnote: "Prices read from each menu as it stands. Portions normalised where the menu states them.",
+    actions: <Button size="sm">See all 44</Button>,
+  },
+};
+
+/** Below `lg` every row is a `MenuItem`, the alias leading. */
+export const Mobile: 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,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** 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,
+  },
+};

package/src/components/concept-compare.tsx

@@ -0,0 +1,276 @@
+import { MessageSquare, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { MenuField } from "./menu-field";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * ConceptCompare — one dish or drink across every kitchen that makes it, under
+ * whatever name each of them uses.
+ *
+ * The keystone module: a single menu can list papanași, only a catalogue can
+ * say that seventy kitchens make them under fifty different names between 8 and
+ * 44 lei. The alias column is what makes it honest — these are not the same row
+ * seventy times, they are seventy differently-named rows we matched, and
+ * showing each kitchen's own wording is the evidence for that.
+ *
+ * ## The row is place-led
+ *
+ * Each row leads with the VENUE PHOTOGRAPH, which is real and licensed. It
+ * replaced a price bar, and the trade is not close: the bar measured the one
+ * value already printed beside it in words, while the thing a reader is
+ * actually choosing between — the restaurant — had no image at all. Five
+ * restaurants that disagree about a name is the story; five bars of similar
+ * length is not.
+ *
+ * ## Two layouts, one component
+ *
+ * From `lg` the row is a table: rank, venue, alias, mentions, price. Below it,
+ * the rows become the production `<MenuItem>` — the alias as the name, the
+ * venue underneath — because a five-column table does not survive 390px and
+ * the item row already solves this exact shape everywhere else in the app.
+ */
+
+/** @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". */
+  value: string;
+  label: string;
+};
+
+export type ConceptCompareLabels = {
+  /** Small caps kicker, e.g. "DISH CONCEPT". */
+  kind: string;
+  /** Column heading over the aliases, e.g. "ON THEIR MENU AS". */
+  alias: string;
+  /** Under each price, e.g. "per portion". */
+  perPortion?: string;
+  /** Badge on the lowest-priced row, e.g. "cheapest shown". */
+  cheapest?: string;
+};
+
+export type ConceptCompareProps = {
+  concept: MenuConceptPreview;
+  labels: ConceptCompareLabels;
+  /** Passed to the mobile `<MenuItem>` rows. */
+  itemLabels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  /** CSS gradient for the header swatch, when there is no photograph. */
+  gradient: string;
+  /** A real photograph of the concept, when the matched menu row carries one. */
+  imageUrl?: string;
+  figures?: ConceptCompareFigure[];
+  /** Destination per row, keyed by place slug. */
+  hrefs?: Record<string, string>;
+  /** The provenance note in the footer. */
+  footnote?: string;
+  /** Actions in the footer — pass rendered links or buttons. */
+  actions?: React.ReactNode;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function ConceptCompare({
+  concept,
+  labels,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  gradient,
+  imageUrl,
+  figures,
+  hrefs,
+  footnote,
+  actions,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: ConceptCompareProps) {
+  const rows = concept.rows ?? [];
+  // Derived, not passed: the cheapest row is a fact about THIS list, and a
+  // caller computing it separately could disagree with what is rendered.
+  const cheapest = rows.reduce<number | undefined>(
+    (lowest, row) => (lowest === undefined || row.price < lowest ? row.price : lowest),
+    undefined
+  );
+
+  return (
+    <div className={cn("overflow-hidden rounded-[18px] border border-border bg-card", className)}>
+      <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:gap-6 lg:p-5">
+        {imageUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={imageUrl}
+            alt=""
+            className="aspect-[16/9] w-full shrink-0 rounded-xl object-cover lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+          />
+        ) : (
+          <MenuField
+            name={concept.title}
+            gradient={gradient}
+            seedKey={concept.slug}
+            className="aspect-[16/9] w-full shrink-0 rounded-xl lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+          />
+        )}
+
+        <div className="min-w-0 flex-1">
+          <span className="text-[9.5px] font-bold uppercase tracking-[0.12em] text-muted-foreground">
+            {labels.kind}
+          </span>
+          <h3 className="mt-1 font-serif text-2xl font-semibold tracking-[-0.02em] lg:text-[30px]">
+            {concept.title}
+          </h3>
+        </div>
+
+        {figures && figures.length > 0 && (
+          <div className="flex shrink-0 gap-6 lg:gap-8">
+            {figures.map((figure) => (
+              <div key={figure.label} className="text-left lg:text-right">
+                <div className="text-xl font-extrabold leading-none tracking-[-0.03em] tabular-nums lg:text-2xl">
+                  {figure.value}
+                </div>
+                <div className="mt-1 text-[10.5px] text-muted-foreground">{figure.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ── Below `lg`: the production item row ─────────────────────────── */}
+      <ul className="border-t border-border lg:hidden">
+        {rows.map((row) => (
+          <li key={row.place_slug} className="border-b border-border last:border-b-0">
+            <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={formatPrice}
+              formatCount={formatCount}
+              venueName={row.place_name}
+              href={hrefs?.[row.place_slug]}
+              linkComponent={LinkComponent}
+              className={cn(row.price === cheapest && "bg-accent-subtle/40")}
+            />
+          </li>
+        ))}
+      </ul>
+
+      {/* ── From `lg`: the comparison table ─────────────────────────────── */}
+      <ol className="hidden border-t border-border lg:block">
+        {rows.map((row, index) => {
+          const isCheapest = row.price === cheapest;
+
+          const content = (
+            <>
+              <span className="w-5 shrink-0 text-center text-xs font-bold tabular-nums text-muted-foreground">
+                {index + 1}
+              </span>
+
+              <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)]">
+                {row.place_thumbnail_url && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={row.place_thumbnail_url}
+                    alt=""
+                    loading="lazy"
+                    className="h-full w-full object-cover"
+                  />
+                )}
+                {row.open_now && (
+                  <i
+                    aria-hidden
+                    className="absolute right-0.5 top-0.5 h-[6px] w-[6px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+                  />
+                )}
+              </span>
+
+              <span className="min-w-0 w-[200px] shrink-0">
+                <span className="block truncate text-sm font-bold tracking-[-0.01em]">
+                  {row.place_name}
+                </span>
+                <span className="mt-px flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                  {row.rating != null && (
+                    <>
+                      <Star className="h-2.5 w-2.5" aria-hidden />
+                      <span className="tabular-nums">{row.rating}</span>
+                    </>
+                  )}
+                  {row.place_area && <span className="truncate">{row.place_area}</span>}
+                </span>
+              </span>
+
+              <span className="min-w-0 flex-1">
+                <span className="block text-[9.5px] font-bold uppercase tracking-[0.1em] text-muted-foreground">
+                  {labels.alias}
+                </span>
+                <span className="block truncate font-serif text-[13px] italic">{row.alias}</span>
+              </span>
+
+              {row.mentions != null && row.mentions > 0 && (
+                <span className="inline-flex shrink-0 items-center gap-1 text-[11px] tabular-nums text-muted-foreground">
+                  <MessageSquare className="h-[11px] w-[11px]" aria-hidden />
+                  {row.mentions}
+                </span>
+              )}
+
+              <span className="w-[92px] shrink-0 text-right">
+                <b
+                  className={cn(
+                    "block text-sm font-extrabold tabular-nums",
+                    isCheapest && "text-[var(--free,currentColor)]"
+                  )}
+                >
+                  {formatPrice(row.price)}
+                </b>
+                <span className="block text-[10px] text-muted-foreground">
+                  {isCheapest && labels.cheapest ? labels.cheapest : labels.perPortion}
+                </span>
+              </span>
+            </>
+          );
+
+          const rowClasses = "flex items-center gap-4 px-5 py-3";
+
+          return (
+            <li key={row.place_slug} className="border-b border-border last:border-b-0">
+              {hrefs?.[row.place_slug] ? (
+                <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"
+                  )}
+                >
+                  {content}
+                </LinkComponent>
+              ) : (
+                <div className={rowClasses}>{content}</div>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+
+      {(footnote || actions) && (
+        <div className="flex flex-wrap items-center gap-3 p-4">
+          {footnote && <span className="text-[11.5px] text-muted-foreground">{footnote}</span>}
+          {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/event-compact-row.tsx

@@ -74,7 +74,7 @@ export type EventCompactRowProps = {
    * repeating it on each one is noise — the caller has something more
    * differentiating to say instead (the event's own description). The
    * timeline keeps the default: there the venue IS what tells rows apart
-   * across the night. Mirrors `menu-item-row.tsx`'s prop of the same name and
+   * across the night. Mirrors `menu-item.tsx`'s prop of the same name and
    * intent.
    */
   subtitle?: string;