@bearmenu/ui 0.8.9 → 0.8.10

package/src/components/hue-chip.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Wallet } from "lucide-react";
+import { HueChip } from "./hue-chip";
+
+const meta: Meta<typeof HueChip> = {
+  title: "Menu/HueChip",
+  component: HueChip,
+  tags: ["autodocs"],
+  args: { children: "Sweet Pastry", hue: "oklch(0.62 0.14 82)" },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A pill wearing a category's colour as a pale wash. It exists because the wash has one non-obvious rule — the mix must happen `in oklab`, never `in oklch` — and that rule has to live in one place. oklch is polar, so mixing a hue into an achromatic `--card` interpolates the hue ANGLE toward 0: honey 82° arrives at 16° (pink), a bar's 205° blue at 41° (orange). The hue is runtime data from ~40 cuisines, so it is an inline custom property rather than a Tailwind class — Tailwind can only emit what it sees at build time.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HueChip>;
+
+export const Default: Story = {};
+
+/**
+ * The bug this component was extracted to prevent. Every hue survives the mix
+ * with its own identity — the cool families especially, which under `in oklch`
+ * came out orange and mustard.
+ */
+export const EveryFamily: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-1.5">
+      {[
+        ["Breakfast & Brunch", "oklch(0.62 0.14 82)"],
+        ["Romanian", "oklch(0.48 0.16 25)"],
+        ["Italian", "oklch(0.56 0.15 38)"],
+        ["Vegetarian", "oklch(0.52 0.14 148)"],
+        ["Bars", "oklch(0.47 0.10 205)"],
+        ["Clubs", "oklch(0.42 0.11 300)"],
+      ].map(([label, hue]) => (
+        <HueChip key={label} hue={hue}>
+          {label}
+        </HueChip>
+      ))}
+    </div>
+  ),
+};
+
+/** No hue — `--muted`, the right neutral for a facet with no family behind it. */
+export const Untinted: Story = {
+  args: { hue: undefined },
+};
+
+/** A price band: an icon, a bare figure, and an accessible name for it. */
+export const WithIcon: Story = {
+  args: {
+    hue: undefined,
+    className: "font-bold tabular-nums",
+    "aria-label": "kitchen price band: 22–86 lei",
+    icon: <Wallet className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />,
+    children: "22–86 lei",
+  },
+};
+
+/** In a list, which is where most of these live. */
+export const InAList: Story = {
+  render: () => (
+    <ul className="flex flex-wrap items-center gap-1.5">
+      {["Sweet Pastry", "Salad", "Cake"].map((label) => (
+        <HueChip key={label} as="li" hue="oklch(0.62 0.14 82)">
+          {label}
+        </HueChip>
+      ))}
+    </ul>
+  ),
+};

package/src/components/hue-chip.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { HueChip, hueTint } from "./hue-chip";
+
+/**
+ * The whole reason this component exists is one character of CSS, so that is
+ * what is pinned. `color-mix(in oklch, …)` interpolates the hue ANGLE, and the
+ * paper it mixes into is achromatic (`--card` is `oklch(1 0 0)`, hue 0), so
+ * every family colour was dragged a proportional fraction of the way to red:
+ * honey 82° arrived at 16°, pink. It is invisible in a diff and obvious on
+ * screen, which is exactly the kind of thing a test should hold.
+ */
+describe("hueTint", () => {
+  it("mixes in the rectangular space, never the polar one", () => {
+    const tint = hueTint("oklch(0.62 0.14 82)");
+    expect(tint).toContain("in oklab");
+    expect(tint).not.toContain("in oklch,");
+  });
+
+  it("mixes into the surface the chip sits on", () => {
+    expect(hueTint("oklch(0.62 0.14 82)")).toContain("var(--card)");
+    expect(hueTint("oklch(0.62 0.14 82)", "chip", "var(--background)")).toContain(
+      "var(--background)"
+    );
+  });
+
+  it("gives a subtle chip less of the hue than a plain one", () => {
+    expect(hueTint("oklch(0.62 0.14 82)", "chip")).toContain("20%");
+    expect(hueTint("oklch(0.62 0.14 82)", "subtle")).toContain("12%");
+  });
+});
+
+describe("HueChip", () => {
+  it("wears the tint when it has a hue", () => {
+    render(<HueChip hue="oklch(0.62 0.14 82)">Sweet Pastry</HueChip>);
+    const chip = screen.getByText("Sweet Pastry");
+    expect(chip.getAttribute("style")).toContain("oklab");
+    expect(chip.className).not.toContain("bg-muted");
+  });
+
+  it("falls back to the neutral rather than to a colour", () => {
+    // A facet with no family behind it must not borrow another family's colour.
+    render(<HueChip>Fast Food</HueChip>);
+    const chip = screen.getByText("Fast Food");
+    expect(chip.className).toContain("bg-muted");
+    expect(chip.getAttribute("style")).toBeNull();
+  });
+
+  it("renders as a list item when asked, for the lists it lives in", () => {
+    render(
+      <ul>
+        <HueChip as="li">Salad</HueChip>
+      </ul>
+    );
+    expect(screen.getByText("Salad").tagName).toBe("LI");
+  });
+
+  it("takes an accessible name for a chip whose text is a bare figure", () => {
+    render(<HueChip aria-label="kitchen price band: 22–86 lei">22–86 lei</HueChip>);
+    expect(screen.getByLabelText("kitchen price band: 22–86 lei")).toBeInTheDocument();
+  });
+});

package/src/components/hue-chip.tsx

@@ -0,0 +1,99 @@
+import { cn } from "../lib/utils";
+
+/**
+ * HueChip — a pill that wears a category's colour as a pale wash.
+ *
+ * Menu surfaces label things with a family's hue: a cuisine's dish groups, a
+ * going-out family's tags, a price band. Every one of them was an inline
+ * `style` with a hand-written `color-mix` next to a hand-written pill class
+ * list, which is how the two below drifted apart and how the mix space bug
+ * survived as long as it did — it had to be found and fixed in each copy.
+ *
+ * ## The mix space is the whole reason this is a component
+ *
+ * **`in oklab`, and never `in oklch`.** They describe the same colours, but
+ * oklch is POLAR, so `color-mix(in oklch, …)` interpolates the hue ANGLE — and
+ * the paper being mixed into is achromatic (`--card` is `oklch(1 0 0)`, hue 0).
+ * Mixing 20% of a family colour into that lands at a fifth of the family's hue:
+ * honey 82° came out at 16°, which is pink, so a Breakfast & Brunch card wore
+ * pink chips under an amber mosaic. Cool families were worse — a bar's 205°
+ * blue mixes to 41°, orange; a club's 300° violet to 60°, mustard.
+ *
+ * oklab is rectangular: mixing toward an achromatic base scales chroma along
+ * the SAME hue instead of rotating it, which is what "a pale version of this
+ * colour" has to mean.
+ *
+ * ## Why an inline style and not a Tailwind class
+ *
+ * The hue is DATA — one of ~40 cuisine values resolved by the app at request
+ * time — not one of a fixed set of variants. Tailwind can only emit classes it
+ * can see at build time, so a class-based version would mean either a
+ * safelisted colour per cuisine (a palette that must be edited to add a
+ * cuisine) or an arbitrary-value class built from a runtime string, which
+ * Tailwind cannot compile. A CSS custom property set inline is the honest
+ * mechanism; this component is the one place that writes it.
+ */
+
+/** Mix strengths, so callers say what a chip IS rather than picking a number. */
+const STRENGTH = {
+  /** A labelled facet: readable at 11.5px, still clearly the family's colour. */
+  chip: 20,
+  /** A quieter wash, for a chip that sits beside a stronger one. */
+  subtle: 12,
+} as const;
+
+export type HueChipTone = keyof typeof STRENGTH;
+
+/**
+ * The tint itself, exported for the surfaces that need the colour rather than
+ * the pill — a section ground, a hover state. Same rule: `in oklab`.
+ */
+export function hueTint(hue: string, tone: HueChipTone = "chip", base = "var(--card)"): string {
+  return `color-mix(in oklab, ${hue} ${STRENGTH[tone]}%, ${base})`;
+}
+
+export type HueChipProps = {
+  /**
+   * A finished CSS colour — the DS owns no category table, so the app resolves
+   * it. Without one the chip falls back to `--muted`, which is the right
+   * neutral for a facet that has no family behind it.
+   */
+  hue?: string;
+  tone?: HueChipTone;
+  /** The paper the wash is mixed into. Must be the surface the chip sits on. */
+  base?: string;
+  /** Drawn before the label, e.g. a wallet on a price band. */
+  icon?: React.ReactNode;
+  /** `li` inside a list, which is where most of these live. */
+  as?: "span" | "li" | "div";
+  children: React.ReactNode;
+  className?: string;
+  /** For a chip whose visible text is a bare figure, e.g. "22–86 lei". */
+  "aria-label"?: string;
+};
+
+export function HueChip({
+  hue,
+  tone = "chip",
+  base = "var(--card)",
+  icon,
+  as: Tag = "span",
+  children,
+  className,
+  "aria-label": ariaLabel,
+}: HueChipProps) {
+  return (
+    <Tag
+      aria-label={ariaLabel}
+      className={cn(
+        "inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[11.5px] text-foreground",
+        !hue && "bg-muted",
+        className
+      )}
+      style={hue ? { backgroundColor: hueTint(hue, tone, base) } : undefined}
+    >
+      {icon}
+      {children}
+    </Tag>
+  );
+}

package/src/components/kitchen-dossier.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowRight } from "lucide-react";
+import { KitchenDossier } from "./kitchen-dossier";
+import { mockVenues } from "./menu-mocks";
+
+function photo(hue: number) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="640"><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="960" height="640" fill="url(#g)"/><circle cx="240" cy="180" r="120" fill="hsl(${hue} 40% 80%)" opacity=".6"/><rect x="520" y="360" width="360" height="220" fill="hsl(${hue} 15% 20%)" opacity=".7"/></svg>`
+    )
+  );
+}
+
+const venue = mockVenues[0];
+
+const labels = {
+  knownFor: "Known for",
+  whatPeopleSay: "What people say",
+  theGrade: "The grade",
+  currency: "lei",
+  mentions: (count: number) => `${count} name it`,
+  reviewCount: "427 reviews",
+  openUntil: "Open until 22:00",
+  part: (index: number, count: number) => `Part ${index + 1} of ${count}`,
+  next: "Next",
+  dimensions: {
+    food: "Food",
+    service: "Service",
+    value: "Value",
+    ambiance: "Ambiance",
+    portion: "Portion",
+  },
+};
+
+const action = (
+  <a
+    href={venue.href}
+    className="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-white px-5 text-[13.5px] font-bold text-[oklch(0.21_0.012_55)]"
+  >
+    Open the menu
+    <ArrowRight className="h-4 w-4" aria-hidden />
+  </a>
+);
+
+const meta: Meta<typeof KitchenDossier> = {
+  title: "Menu/KitchenDossier",
+  component: KitchenDossier,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    place: { ...venue.place, thumbnail_url: photo(30) },
+    href: venue.href,
+    meta: "Restaurant · Centru",
+    signature: venue.signature,
+    quotes: [
+      { text: "Complimentary still or sparkling water with every meal, plus free coffee with brunch dishes." },
+      { text: "Incredibly attentive and friendly service that creates a truly relaxing experience." },
+    ],
+    grade: {
+      overall: "9.4",
+      dimensions: { food: 91, service: 90, value: 91, ambiance: 87, portion: 85 },
+    },
+    labels,
+    formatPrice: (amount: number) => String(amount),
+    formatScore: (value: number) => (value / 10).toFixed(1),
+    action,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One kitchen, told as a story on its own photograph. The room is clear at the top; a frosted caption rises from the foot (`GlassGround`) with the identity, and under it a panel says the three things the reviews established one at a time — the dish it is known for, what people say, the grade — with segments at the top edge. The story runs while the card is in view and pauses while pressed; a tap advances; reduced motion stops the timer and keeps the tap.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KitchenDossier>;
+
+export const Phone: Story = {};
+
+export const Desktop: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** One part only: no segments, no tap-to-advance, the panel just is. */
+export const OnePart: Story = {
+  args: { quotes: undefined, grade: undefined },
+};
+
+/** No photograph: the ground with the initial. */
+export const NoPhoto: Story = {
+  args: { place: venue.place },
+};

package/src/components/kitchen-dossier.tsx

@@ -0,0 +1,322 @@
+import type { ReactNode } from "react";
+import { MessageSquareQuote, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { GlassGround } from "./glass-ground";
+import type { MenuLinkComponent, MenuLinkProps, MenuVenueSignature } from "./menu-types";
+import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
+import type { CitedText, PlaceGradeDimensions, PlacePreview } from "./place-types";
+import { Separator } from "./separator";
+import { StoryPanel, StoryProvider, StorySegments } from "./story";
+import {
+  DIMENSION_ORDER,
+  VenueGradeDimensions,
+  type VenueGradeDimensionKey,
+} from "./venue-grade-dimensions";
+import { VenueQuotes } from "./venue-quotes";
+
+/**
+ * KitchenDossier — one kitchen, told as a story on its own photograph.
+ *
+ * The hub used to say this three times: a spotlight with everything the
+ * digest knows, a ranked row with a grade, a card with the signature dish —
+ * and the same kitchen led all three. This is the one card: the venue's
+ * photograph clear at the top, a frosted caption rising from the foot with
+ * the identity (rating, name, type · area · reviews), and under it a PANEL
+ * that says the three or four things the reviews established one at a time —
+ * the dish it is known for, what people say, the grade — with segments at the
+ * top edge showing which is up. The story runs on its own while the card is
+ * in view; a tap advances.
+ *
+ * ## A photograph with a caption, not a dark card
+ *
+ * `ConceptCompare` is a dark card with a photograph showing through two glass
+ * bands. This is the reverse — the room is the subject and the facts are its
+ * caption — which is `GlassGround` at its lightest and smallest: anchored to
+ * the CAPTION, not the card, so it covers the identity, the panel and the
+ * action plus a short lead above them and nothing else; a `sm` blur that
+ * only takes the edge off the detail; ink that never passes 0.45; a text
+ * shadow under the identity doing the rest. Everything above the caption is
+ * the photograph, untouched. The panel is its own glass, so its rule reads
+ * as a panel and not a hole. The same layout at every width; the desktop
+ * card is wider, not turned on its side.
+ *
+ * ## Two targets, and everything else is "next"
+ *
+ * The name and the action open the venue; the dish name in the first part
+ * opens the item. A tap anywhere else on the card advances the story.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type KitchenDossierLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: KitchenDossierLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type KitchenDossierLabels = {
+  /** Kickers over the three parts. */
+  knownFor: string;
+  whatPeopleSay: string;
+  theGrade: string;
+  /** Currency beside the price, e.g. "lei". */
+  currency: string;
+  /** Beside the mention count, e.g. "4 name it". */
+  mentions: (count: number) => string;
+  /** "427 reviews", composed by the caller. */
+  reviewCount?: string;
+  /** "Open until 22:00", composed by the caller. Omit when closed or unknown. */
+  openUntil?: string;
+  /** Accessible name per segment, e.g. "Part 2 of 3". */
+  part: (index: number, count: number) => string;
+  /** Accessible name of the tap-to-advance. */
+  next: string;
+  /** Dimension key → translated label. */
+  dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+};
+
+export type KitchenDossierProps = {
+  place: PlacePreview;
+  /** The venue's destination. */
+  href: string;
+  /** "Restaurant · Centru", composed by the caller. */
+  meta?: string;
+  /** Part one. */
+  signature?: MenuVenueSignature;
+  /** Part two — the digest's highlights; two are shown. */
+  quotes?: CitedText[];
+  /** Part three — the grade, with the overall already formatted. */
+  grade?: { overall?: string; dimensions?: PlaceGradeDimensions };
+  labels: KitchenDossierLabels;
+  formatPrice: (amount: number) => string;
+  /** 0–100 → display numeral. */
+  formatScore: (value: number) => string;
+  /** How long each part shows. */
+  partDurationMs?: number;
+  /** The foot's action — pass a rendered link or button. */
+  action?: ReactNode;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * How far above the caption the glass begins — the ramp from clear photograph
+ * to frost, ending exactly where the identity starts. Long, so the edge is a
+ * gradient and not a line. The glass wrapper's `-top-32` is this same 128px;
+ * the two must agree, or the identity sits on half-frost.
+ */
+const GLASS_LEAD = "128px";
+
+/** How many dimensions the grade part shows: the three strongest. */
+const DIMENSION_LIMIT = 3;
+
+/** How many quotes the second part shows. */
+const QUOTE_LIMIT = 2;
+
+const initialOf = (name: string) => (name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+
+export function KitchenDossier({
+  place,
+  href,
+  meta,
+  signature,
+  quotes,
+  grade,
+  labels,
+  formatPrice,
+  formatScore,
+  partDurationMs,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: KitchenDossierProps) {
+  const rating = place.rating?.rating;
+  const parts: ReactNode[] = [];
+
+  if (signature) {
+    const item = signature.item;
+    const firstEntry = item.sizes_and_prices?.[0];
+    const mentions = item.mentions ?? item.review_count ?? 0;
+    parts.push(
+      <Part key="signature" kicker={labels.knownFor}>
+        {signature.href ? (
+          <LinkComponent
+            href={signature.href}
+            className="w-max max-w-full text-[16px] font-bold leading-tight tracking-[-0.01em] text-white hover:underline focus-visible:outline-none focus-visible:underline"
+          >
+            {item.name}
+          </LinkComponent>
+        ) : (
+          <span className="text-[16px] font-bold leading-tight tracking-[-0.01em] text-white">{item.name}</span>
+        )}
+        {signature.why && (
+          <p className="mt-1 line-clamp-2 font-serif text-[13px] italic leading-snug text-white/75">
+            {signature.why}
+          </p>
+        )}
+        {(firstEntry || mentions > 0) && (
+          <>
+            <Separator className="my-2.5 via-white/20" />
+            <div className="flex items-end justify-between gap-3">
+              <span className="flex items-baseline gap-1.5">
+                {firstEntry && (
+                  <>
+                    <span className="text-[18px] font-extrabold leading-none tabular-nums text-white">
+                      {formatPrice(firstEntry.price)}
+                      <span className="ml-1 text-[12px] font-bold">{labels.currency}</span>
+                    </span>
+                    {firstEntry.size > 0 && (
+                      <span className="text-[11.5px] tabular-nums text-white/60">
+                        {firstEntry.size}
+                        {item.kind === "dish" ? "g" : "ml"}
+                      </span>
+                    )}
+                  </>
+                )}
+              </span>
+              {mentions > 0 && (
+                <span className="inline-flex items-center gap-1 text-[12px] font-semibold tabular-nums text-white/85">
+                  <MessageSquareQuote className="h-3.5 w-3.5" aria-hidden />
+                  {labels.mentions(mentions)}
+                </span>
+              )}
+            </div>
+          </>
+        )}
+      </Part>
+    );
+  }
+
+  if (quotes && quotes.length > 0) {
+    parts.push(
+      <Part key="quotes" kicker={labels.whatPeopleSay}>
+        <VenueQuotes quotes={quotes} limit={QUOTE_LIMIT} className="lg:grid-cols-1" />
+      </Part>
+    );
+  }
+
+  /* The three strongest, ties broken by the canonical order so that food
+     beats cleanliness at an equal score — the reader asked about a kitchen. */
+  const dimensions = grade?.dimensions;
+  const strongest = dimensions
+    ? DIMENSION_ORDER.filter((key) => typeof dimensions[key] === "number")
+        .sort((a, b) => (dimensions[b] ?? 0) - (dimensions[a] ?? 0))
+        .slice(0, DIMENSION_LIMIT)
+    : [];
+  if (grade && (grade.overall || strongest.length > 0)) {
+    parts.push(
+      <Part key="grade" kicker={labels.theGrade}>
+        <div className="flex items-end gap-4">
+          {grade.overall && (
+            <span className="text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums text-[oklch(0.82_0.15_85)]">
+              {grade.overall}
+            </span>
+          )}
+          {dimensions && strongest.length > 0 && (
+            <VenueGradeDimensions
+              className="min-w-0 flex-1"
+              dimensions={dimensions}
+              labels={labels.dimensions}
+              order={strongest}
+              formatScore={formatScore}
+            />
+          )}
+        </div>
+      </Part>
+    );
+  }
+
+  return (
+    <article
+      className={cn(
+        /* `flex flex-col` so the story fills the card's height: in a rail
+           the cards are stretched to the tallest, and a story that stopped
+           at its own min-height left a band of bare photograph under the
+           action on every shorter card. */
+        "dark relative isolate flex flex-col overflow-hidden rounded-[18px] border border-border text-foreground shadow-[var(--shadow-card)]",
+        PHOTO_GROUND,
+        className
+      )}
+    >
+      <PhotoGround className="-z-20" photos={[place.thumbnail_url]} initials={initialOf(place.name)} loading="eager" />
+
+      <StoryProvider
+        count={parts.length}
+        durationMs={partDurationMs}
+        nextLabel={labels.next}
+        className="relative flex min-h-[560px] flex-1 flex-col p-4 lg:min-h-[440px] lg:p-5"
+      >
+        <StorySegments
+          labels={parts.map((_, index) => labels.part(index, parts.length))}
+          className="-mt-1"
+        />
+
+        {/* The clear photograph, with the one fact that belongs on it. */}
+        <div className="relative min-h-[184px] flex-1">
+          {labels.openUntil && (
+            <span className="absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.72)] px-3 text-[11.5px] font-bold text-white backdrop-blur-[2px]">
+              <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
+              {labels.openUntil}
+            </span>
+          )}
+        </div>
+
+        {/* The caption: identity, the story's panel, the action — and the
+            glass, anchored to the caption rather than to the card, so it
+            covers the caption and the `GLASS_LEAD` above it and nothing more.
+            Bled to the card's edges past the story's padding. */}
+        <div className="relative flex flex-col gap-3.5">
+          <div
+            aria-hidden
+            className="pointer-events-none absolute -inset-x-4 -bottom-4 -top-32 -z-10 lg:-inset-x-5 lg:-bottom-5"
+          >
+            <GlassGround
+              stops={{ direction: "to bottom", clear: "0px", full: GLASS_LEAD }}
+              peak={0.4}
+              blur="sm"
+            />
+          </div>
+          <div className="[text-shadow:0_1px_12px_oklch(0_0_0/0.55)]">
+            <div className="flex items-baseline justify-between gap-4">
+              <h3 className="min-w-0 font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[32px]">
+                <LinkComponent href={href} className="focus-visible:outline-none focus-visible:underline">
+                  {place.name}
+                </LinkComponent>
+              </h3>
+              {rating !== undefined && (
+                <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
+                  {rating.toFixed(1)}
+                  <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+                </span>
+              )}
+            </div>
+            {(meta || labels.reviewCount) && (
+              <p className="mt-1 truncate text-[12.5px] text-white/70">
+                {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+              </p>
+            )}
+          </div>
+
+          {parts.length > 0 && (
+            <StoryPanel
+              parts={parts}
+              className="rounded-[14px] border border-white/10 bg-[oklch(0.16_0.012_55_/_0.35)] p-4 backdrop-blur-md"
+            />
+          )}
+
+          {action && <div className="flex [&>*]:w-full lg:[&>*]:w-auto">{action}</div>}
+        </div>
+      </StoryProvider>
+    </article>
+  );
+}
+
+function Part({ kicker, children }: { kicker: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col">
+      <span className="mb-1.5 block text-[9.5px] font-bold uppercase tracking-[0.12em] text-white/60">
+        {kicker}
+      </span>
+      {children}
+    </div>
+  );
+}