@bearmenu/ui 0.8.8 → 0.8.10

package/dist/components/stat-banner.js

@@ -0,0 +1,61 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var bannerVariants = cva(
+  "relative flex flex-col gap-2 overflow-hidden rounded-[18px] p-5",
+  {
+    variants: {
+      tone: {
+        /** Dark ground, for the claim that needs the most weight. */
+        dark: "bg-[oklch(0.21_0.012_55)] text-white",
+        /** Tinted ground, for the supporting figure beside it. */
+        warm: "bg-accent-subtle text-foreground"
+      }
+    },
+    defaultVariants: { tone: "dark" }
+  }
+);
+function StatBanner({
+  tone,
+  kicker,
+  headline,
+  body,
+  figure,
+  figureUnit,
+  watermark,
+  scale,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(bannerVariants({ tone }), className), children: [
+    watermark && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute -bottom-8 right-2 select-none font-serif text-[150px] font-bold leading-none opacity-[0.08]",
+        children: watermark
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-[1] flex flex-1 flex-col gap-2", children: [
+      kicker && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-[0.11em] opacity-80", children: kicker }),
+      figure && /* @__PURE__ */ jsxs("div", { className: "text-[40px] font-extrabold leading-none tracking-[-0.03em] tabular-nums", children: [
+        figure,
+        figureUnit && /* @__PURE__ */ jsx("span", { className: "ml-1 text-lg font-extrabold", children: figureUnit })
+      ] }),
+      headline && /* @__PURE__ */ jsx("h3", { className: "font-serif text-xl font-semibold leading-[1.2] tracking-[-0.02em] lg:text-2xl", children: headline }),
+      body && /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-[1.5] opacity-85", children: body }),
+      scale && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-[11px] tabular-nums opacity-70", children: [
+        /* @__PURE__ */ jsx("span", { children: scale[0] }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-current opacity-30" }),
+        /* @__PURE__ */ jsx("span", { children: scale[1] }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-current opacity-30" }),
+        /* @__PURE__ */ jsx("span", { children: scale[2] })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "mt-auto flex items-center pt-3", children: action })
+    ] })
+  ] });
+}
+
+export { StatBanner };

package/dist/components/story.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type StoryProviderProps = {
+    /** How many parts the story has. */
+    count: number;
+    /** How long each part shows. */
+    durationMs?: number;
+    /** Accessible name of the tap-to-advance, e.g. "Next". */
+    nextLabel: string;
+    className?: string;
+    children: React.ReactNode;
+};
+declare function StoryProvider({ count, durationMs, nextLabel, className, children, }: StoryProviderProps): react_jsx_runtime.JSX.Element;
+type StorySegmentsProps = {
+    /**
+     * Accessible name per segment, one per part, e.g. `["Part 1 of 3", …]`.
+     * Strings rather than a function: a server component renders this and a
+     * function cannot cross into a client one.
+     */
+    labels: string[];
+    className?: string;
+};
+/** The segments: one per part, the active one filling on the timer. */
+declare function StorySegments({ labels, className }: StorySegmentsProps): react_jsx_runtime.JSX.Element | null;
+type StoryPanelProps = {
+    /** The parts, in order. Rendered by the caller; shown one at a time. */
+    parts: React.ReactNode[];
+    className?: string;
+};
+/** The panel: every part in one cell, the active one visible. */
+declare function StoryPanel({ parts, className }: StoryPanelProps): react_jsx_runtime.JSX.Element;
+
+export { StoryPanel, type StoryPanelProps, StoryProvider, type StoryProviderProps, StorySegments, type StorySegmentsProps };

package/dist/components/story.js

@@ -0,0 +1,3 @@
+export { StoryPanel, StoryProvider, StorySegments } from '../chunk-F6FMZJDG.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,7 +22,7 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "label" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
     color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent } from './menu-types.js';
+import { TopComparisonRow } from './top-types.js';
+import 'react';
+import './place-types.js';
+
+type TopComparisonLabels = {
+    venue: string;
+    grade: string;
+    signature: string;
+    price: string;
+    late: string;
+    terrace: string;
+    /** Screen-reader text for a "no" cell — never an empty cell. */
+    no: string;
+    yes: string;
+};
+type TopComparisonProps = {
+    rows: TopComparisonRow[];
+    labels: TopComparisonLabels;
+    /** Accessible name for the table. */
+    caption: string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopComparison({ rows, labels, caption, linkComponent: LinkComponent, className, }: TopComparisonProps): react_jsx_runtime.JSX.Element;
+
+export { TopComparison, type TopComparisonLabels, type TopComparisonProps };

package/dist/components/top-comparison.js

@@ -0,0 +1,76 @@
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Moon, Sun } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function TopComparison({
+  rows,
+  labels,
+  caption,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden overflow-x-auto lg:block", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-[13px]", children: [
+      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border text-left text-[11px] font-bold uppercase tracking-[0.07em] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 py-2 font-bold", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "#" }) }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.venue }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.grade }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.signature }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.price }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.late }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "py-2 font-bold", children: labels.terrace })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60", children: [
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 tabular-nums text-muted-foreground", children: String(row.rank).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 font-semibold", children: /* @__PURE__ */ jsx(
+            LinkComponent,
+            {
+              href: row.href,
+              className: "hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: row.name
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 font-bold tabular-nums text-accent", children: (_a = row.gradeLabel) != null ? _a : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 text-muted-foreground", children: (_b = row.signature) != null ? _b : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5 tabular-nums", children: (_c = row.priceLabel) != null ? _c : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5", children: /* @__PURE__ */ jsx(Mark, { on: row.late, yes: labels.yes, no: labels.no }) }),
+          /* @__PURE__ */ jsx("td", { className: "py-2.5", children: /* @__PURE__ */ jsx(Mark, { on: row.terrace, yes: labels.yes, no: labels.no }) })
+        ] }, row.name);
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("ul", { className: "lg:hidden", children: rows.map((row) => /* @__PURE__ */ jsx("li", { className: "border-t border-border first:border-t-0", children: /* @__PURE__ */ jsxs(
+      LinkComponent,
+      {
+        href: row.href,
+        className: "flex items-center gap-3 py-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0 text-[13px] font-bold tabular-nums text-muted-foreground", children: String(row.rank).padStart(2, "0") }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[13.5px] font-bold", children: row.name }),
+            (row.signature || row.priceLabel) && /* @__PURE__ */ jsx("span", { className: "block truncate text-[11.5px] text-muted-foreground", children: [row.signature, row.priceLabel].filter(Boolean).join(" \xB7 ") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+            row.late && /* @__PURE__ */ jsx(Moon, { className: "h-3.5 w-3.5", "aria-label": labels.late }),
+            row.terrace && /* @__PURE__ */ jsx(Sun, { className: "h-3.5 w-3.5", "aria-label": labels.terrace })
+          ] }),
+          row.gradeLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[13px] font-extrabold tabular-nums text-accent", children: row.gradeLabel })
+        ]
+      }
+    ) }, row.name)) })
+  ] });
+}
+function Mark({ on, yes, no }) {
+  return on ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-[color:var(--free,oklch(0.45_0.13_155))]", children: yes }) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2014" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: no })
+  ] });
+}
+
+export { TopComparison };

package/dist/components/top-cross-link.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuLinkComponent } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+type TopCrossLinkProps = {
+    /**
+     * `row` (default) — the way OUT of the ranking, full width under the list.
+     * `panel` — the way IN, stacked, for a narrow column beside a browse list.
+     */
+    variant?: "row" | "panel";
+    /** e.g. "RANKED". `panel` only; drawn over the title with `icon` inline. */
+    kicker?: string;
+    title: string;
+    description: string;
+    /**
+     * The link's text. Prefer the destination's own headline over a generic
+     * "see more": the reader lands on a page whose `<h1>` is the string they
+     * tapped, and it is the anchor text the destination actually wants.
+     */
+    cta: string;
+    href: string;
+    /** Finished CSS gradient for the ground. `panel` only. */
+    gradient?: string;
+    /** Names the DESTINATION. Defaults to `LayoutList` on `row`, `Trophy` on `panel`. */
+    icon?: React.ReactNode;
+    /** The title's element. `b` by default on `row`, `h2` on `panel`. */
+    as?: "h2" | "h3" | "b";
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopCrossLink({ variant, kicker, title, description, cta, href, gradient, icon, as, linkComponent: LinkComponent, className, }: TopCrossLinkProps): react_jsx_runtime.JSX.Element;
+
+export { TopCrossLink, type TopCrossLinkProps };

package/dist/components/top-cross-link.js

@@ -0,0 +1,101 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { ArrowRight, Trophy, LayoutList } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var CTA = cn(
+  "rounded-xl bg-accent font-bold text-accent-foreground",
+  "transition-opacity duration-150 hover:opacity-90",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  "motion-reduce:transition-none"
+);
+function TopCrossLink({
+  variant = "row",
+  kicker,
+  title,
+  description,
+  cta,
+  href,
+  gradient,
+  icon,
+  as,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const isPanel = variant === "panel";
+  const Heading = as != null ? as : isPanel ? "h2" : "b";
+  const glyph = icon != null ? icon : isPanel ? /* @__PURE__ */ jsx(Trophy, {}) : /* @__PURE__ */ jsx(LayoutList, {});
+  if (!isPanel) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-3 rounded-[18px] border border-border bg-card p-4",
+          "lg:flex-row lg:items-center lg:gap-5 lg:p-5",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground [&>svg]:h-5 [&>svg]:w-5", children: glyph }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Heading, { className: "block text-[15px] font-bold tracking-[-0.01em]", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[13px] leading-relaxed text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href,
+              className: cn(
+                CTA,
+                "inline-flex min-h-11 shrink-0 items-center justify-center gap-2 px-5 py-2.5 text-sm"
+              ),
+              children: [
+                cta,
+                /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 shrink-0", "aria-hidden": true })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-[18px] border border-border bg-card shadow-[var(--shadow-card)]",
+        className
+      ),
+      children: [
+        gradient && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-0", style: { backgroundImage: gradient } }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1] p-4 lg:p-5", children: [
+          kicker && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[10.5px] font-extrabold uppercase tracking-[0.13em] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "[&>svg]:h-3 [&>svg]:w-3 [&>svg]:shrink-0", children: glyph }),
+            kicker
+          ] }),
+          /* @__PURE__ */ jsx(Heading, { className: "mt-2 block font-serif text-[20px] font-bold leading-[1.12] tracking-[-0.02em] text-foreground lg:text-[21px]", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[13px] leading-relaxed text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href,
+              className: cn(
+                CTA,
+                "mt-4 flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-[13.5px] leading-snug"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: cta }),
+                /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 shrink-0", "aria-hidden": true })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { TopCrossLink };

package/dist/components/top-ranking-entry.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuItemLabels } from './menu-item.js';
+import { MenuItemPreview, MenuLinkComponent } from './menu-types.js';
+import { TopRankEntry } from './top-types.js';
+import 'react';
+import './place-types.js';
+
+type TopRankingEntryLabels = {
+    /** Heading over the menu rows when the venue's own group is unknown. */
+    signature: string;
+    /** Accessible name for the dish link. */
+    openDish: (name: string) => string;
+    /** Passed through to the production `<MenuItem>`. */
+    item: MenuItemLabels;
+    /**
+     * Opens an item's drawer. The DS owns no routing, so the caller composes it.
+     *
+     * Takes the ITEM, not its slug: a menu row is a dish or a drink and the two
+     * resolve through different endpoints, so the caller has to see `kind` to
+     * build the right link. `undefined` leaves the row inert, which is the
+     * text-only must-try mention with no live menu row behind it.
+     */
+    itemHref: (item: MenuItemPreview) => string | undefined;
+};
+type TopRankingEntryProps = {
+    entry: TopRankEntry;
+    labels: TopRankingEntryLabels;
+    formatPrice: (amount: number) => string;
+    formatCount?: (value: number) => string;
+    /** The category's hue, for the menu rows' colour mark. */
+    markGradient?: string;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function TopRankingEntry({ entry, labels, formatPrice, formatCount, markGradient, linkComponent: LinkComponent, className, }: TopRankingEntryProps): react_jsx_runtime.JSX.Element;
+/**
+ * The entry's own loading state, at the entry's footprint.
+ *
+ * The cover keeps its 3:2 on the phone and its 4:5 at 300px wide on desktop, so
+ * the article does not jump when the photographs land — the one reflow a long,
+ * scrolled page cannot afford. (This said "4:3 … 300×225" for a while after the
+ * cover changed underneath it, which is the failure mode a skeleton in the same
+ * file as its component is supposed to prevent.)
+ */
+declare function TopRankingEntrySkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/** A run of entries — the ranking's loading state. */
+declare function TopRankingListSkeleton({ rows }: {
+    rows?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { TopRankingEntry, type TopRankingEntryLabels, type TopRankingEntryProps, TopRankingEntrySkeleton, TopRankingListSkeleton };

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

@@ -0,0 +1,217 @@
+import { MenuItem } from '../chunk-TH6W2PWG.js';
+import '../chunk-Q6QH52LJ.js';
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { Skeleton } from '../chunk-QXHMPJ35.js';
+import '../chunk-UKBNQO6Q.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { MapPin, Star, MessageSquareQuote } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+var ENTRY_COVER_SCRIM = "bg-[linear-gradient(180deg,oklch(0.16_0.012_55_/_0)_0px,oklch(0.16_0.012_55_/_0.06)_16px,oklch(0.16_0.012_55_/_0.3)_32px,oklch(0.16_0.012_55_/_0.72)_48px,oklch(0.16_0.012_55_/_0.95)_100%)]";
+function TopRankingEntry({
+  entry,
+  labels,
+  formatPrice,
+  formatCount,
+  markGradient,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  var _a, _b, _c;
+  const initial = ((_b = (_a = entry.name.match(new RegExp("\\p{L}", "u"))) == null ? void 0 : _a[0]) != null ? _b : "").toLocaleUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      id: entry.slug,
+      className: cn("grid grid-cols-1 gap-0 py-6 lg:flex lg:flex-row lg:gap-7", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: entry.href,
+            className: "col-start-1 row-start-1 block shrink-0 overflow-hidden rounded-xl transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:opacity-90 motion-reduce:transition-none lg:sticky lg:top-4 lg:w-[300px] lg:self-start",
+            children: /* @__PURE__ */ jsx("span", { className: "relative block aspect-[3/2] w-full bg-[oklch(0.21_0.012_55)] lg:aspect-[4/5] lg:bg-[repeating-linear-gradient(135deg,oklch(0.82_0.014_55)_0_10px,oklch(0.87_0.01_58)_10px_20px)]", children: entry.coverUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: entry.coverUrl,
+                  alt: "",
+                  loading: "lazy",
+                  decoding: "async",
+                  className: "h-full w-full object-cover"
+                }
+              )
+            ) : (
+              /* Never a grey box: the warm ground with the venue's initial, the
+                 rule `MenuFamilyBlock` states. Phone only — desktop keeps its
+                 stripes. The stripes are a LIGHT surface in both themes, so at
+                 this size they would be a pale rectangle under white type.
+                 The ground stays on the parent span, so a 404 on `coverUrl`
+                 degrades to the same surface for free. */
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-0 flex items-center justify-center lg:hidden",
+                  children: /* @__PURE__ */ jsx("span", { className: "font-serif text-[64px] font-semibold leading-none text-white/25", children: initial })
+                }
+              )
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "contents lg:block lg:min-w-0 lg:flex-1", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                /* `relative z-[1]`: without it this block's background is a
+                   non-positioned box's background, which paints in an earlier phase
+                   than the cover's replaced `<img>` — so the scrim went UNDER the
+                   photograph and the white type landed on bare image. Positioning
+                   it lifts the whole block, background included, above the image.
+                   Harmless at `lg`, where the two no longer overlap. */
+                "pointer-events-none relative z-[1] col-start-1 row-start-1 flex flex-wrap items-end gap-x-3 gap-y-0 self-end",
+                "rounded-b-xl px-3.5 pb-3.5 pt-12 [text-shadow:0_1px_2px_oklch(0.16_0.012_55_/_0.45)]",
+                ENTRY_COVER_SCRIM,
+                "lg:pointer-events-auto lg:flex-nowrap lg:items-start lg:gap-3 lg:rounded-none lg:bg-none lg:p-0 lg:[text-shadow:none]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "basis-full text-[11px] font-bold leading-none tabular-nums text-white/70 lg:basis-auto lg:font-serif lg:text-[28px] lg:font-semibold lg:text-muted-foreground",
+                    children: entry.rank
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 text-lg font-bold leading-tight tracking-[-0.015em] text-white lg:line-clamp-none lg:text-foreground", children: /* @__PURE__ */ jsx(
+                    LinkComponent,
+                    {
+                      href: entry.href,
+                      className: "pointer-events-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white lg:focus-visible:ring-ring lg:hover:text-accent",
+                      children: entry.name
+                    }
+                  ) }),
+                  entry.district && /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex items-center gap-1 text-[12.5px] text-white/80 lg:text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+                    entry.district
+                  ] })
+                ] }),
+                entry.gradeLabel ? /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5 rounded-full bg-white/95 px-2.5 py-1 backdrop-blur-[2px] lg:gap-2 lg:rounded-lg lg:bg-accent-subtle lg:px-2.5 lg:py-1.5 lg:backdrop-blur-none", children: [
+                  /* @__PURE__ */ jsx("b", { className: "text-[15px] font-extrabold tabular-nums text-[oklch(0.21_0.012_55)] lg:text-accent", children: entry.gradeLabel }),
+                  entry.tierLabel && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-[oklch(0.21_0.012_55)]/70 lg:text-muted-foreground", children: entry.tierLabel })
+                ] }) : entry.rating !== void 0 && /* The star fallback inverts the same way as the grade — a white
+                   pill, deliberately quieter than a grade, because a third-party
+                   rating is weaker evidence and should look it. Filled, since an
+                   outlined star at this size disappears over photography. */
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-white/95 px-2.5 py-1 text-[13px] font-semibold tabular-nums text-[oklch(0.21_0.012_55)] backdrop-blur-[2px] lg:bg-transparent lg:px-0 lg:py-0 lg:text-foreground lg:backdrop-blur-none", children: [
+                  /* @__PURE__ */ jsx(
+                    Star,
+                    {
+                      className: "h-3.5 w-3.5 shrink-0 fill-[oklch(0.21_0.012_55)] lg:fill-none",
+                      "aria-hidden": true
+                    }
+                  ),
+                  entry.rating
+                ] })
+              ]
+            }
+          ),
+          entry.editorial && /* The article's row gap is 0 on the phone now that the identity block
+             lives inside the photograph, so the paragraph owns the space under
+             it and gives it back at `lg`. */
+          /* @__PURE__ */ jsx("p", { className: "mt-4 font-serif text-[17px] italic leading-[1.65] text-muted-foreground [text-wrap:pretty] lg:mt-3", children: entry.editorial }),
+          entry.menuItems && entry.menuItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "block pb-1.5 text-[15px] font-bold tracking-[-0.01em]", children: (_c = entry.menuGroupLabel) != null ? _c : labels.signature }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            entry.menuItems.map((item) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                item,
+                labels: labels.item,
+                formatPrice,
+                formatCount,
+                markGradient,
+                href: labels.itemHref(item),
+                linkLabel: labels.openDish(item.name),
+                linkComponent: LinkComponent
+              },
+              item.id
+            ))
+          ] }),
+          entry.evidence && /* @__PURE__ */ jsxs("figure", { className: "mt-4 border-l-[3px] border-border pl-4", children: [
+            entry.evidence.quote && /* @__PURE__ */ jsx("blockquote", { className: "text-[13.5px] leading-relaxed text-muted-foreground [text-wrap:pretty]", children: `\u201C${entry.evidence.quote}\u201D` }),
+            /* @__PURE__ */ jsxs(
+              "figcaption",
+              {
+                className: cn(
+                  "flex items-center gap-1.5 text-[11.5px] text-muted-foreground",
+                  entry.evidence.quote && "mt-1.5"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(MessageSquareQuote, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": true }),
+                  entry.evidence.count && /* @__PURE__ */ jsx("b", { className: "font-bold tabular-nums text-foreground", children: entry.evidence.count }),
+                  entry.evidence.sourceLabel
+                ]
+              }
+            ),
+            entry.evidence.extraQuotes && entry.evidence.extraQuotes.length > 0 && /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
+              /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-[11.5px] font-semibold text-accent hover:underline", children: entry.evidence.extraLabel }),
+              /* @__PURE__ */ jsx("ul", { className: "mt-2 flex flex-col gap-2", children: entry.evidence.extraQuotes.map((quote) => /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: "text-[13px] leading-relaxed text-muted-foreground [text-wrap:pretty]",
+                  children: `\u201C${quote}\u201D`
+                },
+                quote
+              )) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TopRankingEntrySkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-0 py-6 lg:flex-row lg:gap-7", className),
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[3/2] w-full shrink-0 rounded-xl lg:aspect-[4/5] lg:w-[300px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-start gap-3 lg:flex", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-6" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-[220px]" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[100px]" })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-[110px] rounded-lg" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-2 lg:mt-3", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[92%]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[64%]" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-[62px] w-full rounded-lg" })
+        ] })
+      ]
+    }
+  );
+}
+function TopRankingListSkeleton({ rows = 6 }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
+    index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(TopRankingEntrySkeleton, {})
+  ] }, index)) });
+}
+
+export { TopRankingEntry, TopRankingEntrySkeleton, TopRankingListSkeleton };