@bearmenu/ui 0.8.7 → 0.8.9

package/dist/components/poster-wall.js

@@ -25,24 +25,60 @@ function useInViewport() {
   React.useEffect(() => {
     const node = ref.current;
     if (!node || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      threshold: 0
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      {
+        threshold: 0
+      }
+    );
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
   return [ref, inView];
 }
-function PosterWall({ tiles, variant = "default", children, className }) {
+function PosterWall({
+  tiles,
+  variant = "default",
+  children,
+  className
+}) {
   const isCompact = variant === "compact";
-  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
-  const slots = Array.from({ length: tileCount }, (_, index) => {
-    var _a;
-    return (_a = tiles == null ? void 0 : tiles[index]) != null ? _a : {};
-  });
+  const maxCols = isCompact ? 6 : 12;
+  const maxSlots = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const heightPx = isCompact ? 330 : 420;
+  const pictures = React.useMemo(
+    () => (tiles != null ? tiles : []).filter((tile) => !!tile.src),
+    [tiles]
+  );
   const prefersReducedMotion = usePrefersReducedMotion();
   const [wallRef, inView] = useInViewport();
   const isSweepPaused = prefersReducedMotion || !inView;
+  const [width, setWidth] = React.useState(isCompact ? 390 : 1200);
+  React.useEffect(() => {
+    const node = wallRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(
+      ([entry]) => setWidth(entry.contentRect.width)
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [wallRef]);
+  let cols = maxCols;
+  let slots;
+  if (pictures.length === 0) {
+    slots = Array.from({ length: maxSlots }, () => ({}));
+  } else {
+    const shown = Math.min(pictures.length, maxSlots);
+    cols = Math.min(
+      maxCols,
+      Math.max(2, Math.round(Math.sqrt(shown * width / heightPx)))
+    );
+    const rows = Math.max(1, Math.ceil(shown / cols));
+    slots = Array.from(
+      { length: cols * rows },
+      (_, index) => pictures[index % pictures.length]
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -62,10 +98,8 @@ function PosterWall({ tiles, variant = "default", children, className }) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
-              isCompact ? "grid-cols-6" : "grid-cols-12"
-            ),
+            className: "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+            style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
             "aria-hidden": true,
             children: slots.map(
               (tile, index) => tile.src ? (
@@ -130,7 +164,10 @@ function PosterWall({ tiles, variant = "default", children, className }) {
     }
   );
 }
-function PosterWallSkeleton({ variant = "default", className }) {
+function PosterWallSkeleton({
+  variant = "default",
+  className
+}) {
   const isCompact = variant === "compact";
   const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
   return /* @__PURE__ */ jsxs(
@@ -150,7 +187,13 @@ function PosterWallSkeleton({ variant = "default", className }) {
               "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
               isCompact ? "grid-cols-6" : "grid-cols-12"
             ),
-            children: Array.from({ length: tileCount }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-none bg-white/10" }, index))
+            children: Array.from({ length: tileCount }, (_, index) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                className: "h-full w-full rounded-none bg-white/10"
+              },
+              index
+            ))
           }
         ),
         /* @__PURE__ */ jsx(
@@ -170,8 +213,21 @@ function PosterWallSkeleton({ variant = "default", className }) {
               isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
             ),
             children: [
-              /* @__PURE__ */ jsx(Skeleton, { className: cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52") }),
-              /* @__PURE__ */ jsx(Skeleton, { className: cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96") })
+              /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: cn(
+                    "bg-white/15",
+                    isCompact ? "h-[11px] w-40" : "h-3 w-52"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")
+                }
+              )
             ]
           }
         )

package/dist/components/ranked-venue-list.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuVenuePreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * RankedVenueList — venues ordered by how often reviews name their dishes.
+ *
+ * The answer to "best Italian in Cluj", and the reason it is defensible is the
+ * mention count sitting on every row: the order is evidence, not opinion. A
+ * caller that cannot supply mentions should use a different surface rather than
+ * this one with the column blank — an unexplained ranking is worse than none.
+ *
+ * The tab strip re-ranks in place and never navigates, so `activeTab` and
+ * `onTabChange` are controlled by the caller. Omit `tabs` entirely and the
+ * header is just a heading.
+ *
+ * No directive: without `tabs` the list renders on the server, which is the
+ * common case on a hub.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+type RankedVenueListLinkProps = MenuLinkProps;
+type RankedVenueListTab = {
+    slug: string;
+    label: string;
+};
+type RankedVenueListProps = {
+    venues: MenuVenuePreview[];
+    /** Section heading, e.g. "The kitchens Cluj rates for Italian". */
+    heading?: string;
+    /** The basis of the order, e.g. "by how often reviews name their dishes". */
+    caption?: string;
+    tabs?: RankedVenueListTab[];
+    activeTab?: string;
+    onTabChange?: (slug: string) => void;
+    /** Composed price band per venue, keyed by place slug, e.g. "38—84". */
+    priceBandLabels?: Record<string, string>;
+    /**
+     * The app's own grade per venue slug, already formatted ("8.7"). Shown in
+     * place of the star rating when present — the star is the third-party
+     * fallback for a venue the reviews have not graded yet.
+     */
+    gradeLabels?: Record<string, string>;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function RankedVenueList({ venues, heading, caption, tabs, activeTab, onTabChange, priceBandLabels, gradeLabels, linkComponent: LinkComponent, className, }: RankedVenueListProps): react_jsx_runtime.JSX.Element;
+
+export { RankedVenueList, type RankedVenueListLinkProps, type RankedVenueListProps, type RankedVenueListTab };

package/dist/components/ranked-venue-list.js

@@ -0,0 +1,87 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { MessageSquare, Star, ChevronRight } 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 RankedVenueList({
+  venues,
+  heading,
+  caption,
+  tabs,
+  activeTab,
+  onTabChange,
+  priceBandLabels,
+  gradeLabels,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-[14px] border border-border bg-card", className), children: [
+    (heading || tabs) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border p-3.5", children: [
+      heading && /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-bold leading-tight tracking-[-0.01em]", children: heading }),
+      caption && /* @__PURE__ */ jsx("span", { className: "text-[12.5px] text-muted-foreground", children: caption }),
+      tabs && tabs.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-auto flex flex-wrap gap-1.5", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": tab.slug === activeTab,
+          onClick: () => onTabChange == null ? void 0 : onTabChange(tab.slug),
+          className: cn(
+            "inline-flex h-7 items-center rounded-full border px-2.5 text-xs font-semibold transition-colors",
+            tab.slug === activeTab ? "border-accent bg-accent-subtle text-accent" : "border-border text-muted-foreground hover:bg-muted/50"
+          ),
+          children: tab.label
+        },
+        tab.slug
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { children: venues.map((venue, index) => {
+      var _a;
+      const { place, signature } = venue;
+      const mentions = (_a = signature == null ? void 0 : signature.item.mentions) != null ? _a : 0;
+      return /* @__PURE__ */ jsxs("li", { children: [
+        index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs(
+          LinkComponent,
+          {
+            href: venue.href,
+            className: "flex items-center gap-3 p-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0 text-center text-[13px] font-extrabold tabular-nums text-accent", children: index + 1 }),
+              /* @__PURE__ */ jsx("span", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]", children: place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: place.thumbnail_url,
+                  alt: "",
+                  className: "h-full w-full object-cover",
+                  loading: "lazy"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm font-bold leading-snug tracking-[-0.01em]", children: place.name }),
+                (signature == null ? void 0 : signature.item.name) && /* @__PURE__ */ jsx("span", { className: "mt-px block truncate font-serif text-xs italic text-muted-foreground", children: `\u201C${signature.item.name}\u201D` })
+              ] }),
+              mentions > 0 && /* @__PURE__ */ jsxs("span", { className: "hidden shrink-0 items-center gap-1 text-[11.5px] tabular-nums text-muted-foreground sm:inline-flex", children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "h-[11px] w-[11px]", "aria-hidden": true }),
+                mentions
+              ] }),
+              (gradeLabels == null ? void 0 : gradeLabels[place.slug]) ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-6 shrink-0 items-center rounded-md bg-foreground px-1.5 text-[12px] font-extrabold tabular-nums text-background", children: gradeLabels[place.slug] }) : place.rating && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[12.5px] font-semibold tabular-nums", children: [
+                /* @__PURE__ */ jsx(Star, { className: "h-3 w-3", "aria-hidden": true }),
+                place.rating.rating
+              ] }),
+              (priceBandLabels == null ? void 0 : priceBandLabels[place.slug]) && /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-[12.5px] tabular-nums text-muted-foreground sm:block", children: priceBandLabels[place.slug] }),
+              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+            ]
+          }
+        )
+      ] }, place.slug);
+    }) })
+  ] });
+}
+
+export { RankedVenueList };

package/dist/components/section-header.d.ts

@@ -25,6 +25,21 @@ type SectionHeaderProps = {
     /** Trailing action label, e.g. "See all". */
     action?: string;
     actionHref?: string;
+    /**
+     * `muted` (default): 14px in `--muted-foreground`, at every width. `app`:
+     * BELOW `lg`, 12.5px semibold in `--accent` — the way an app's "All ›" reads
+     * at the end of a card's title row, quieter in size and louder in colour so
+     * it sits in the count's tier rather than competing with the title. From
+     * `lg` it falls back to `muted`: the app treatment is a phone treatment, and
+     * the desktop page it shares a header with is unchanged by it.
+     */
+    actionTone?: "muted" | "app";
+    /**
+     * `always` (default) shows the subtitle at every width. `lg` hides it below
+     * the `lg` breakpoint for surfaces that narrate on desktop and not on a
+     * phone, where a card title with a count is the whole header.
+     */
+    subtitleFrom?: "always" | "lg";
     /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
     linkComponent?: React.ComponentType<SectionHeaderLinkProps>;
     onAction?: (mouseEvent: React.MouseEvent) => void;
@@ -37,7 +52,7 @@ type SectionHeaderProps = {
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
     className?: string;
 };
-declare function SectionHeader({ title, count, subtitle, action, actionHref, linkComponent: LinkComponent, onAction, as: Heading, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ title, count, subtitle, action, actionHref, actionTone, subtitleFrom, linkComponent: LinkComponent, onAction, as: Heading, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 type SectionHeaderSkeletonProps = {
     /** Shows the inline count placeholder, matching `SectionHeaderProps["count"]`. */
     showCount?: boolean;

package/dist/components/section-header.js

@@ -8,38 +8,57 @@ function DefaultLink(_a) {
   var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
 }
-var ACTION_CLASSES = cn(
-  "inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[14px] text-muted-foreground",
-  "transition-colors duration-150 hover:text-foreground motion-reduce:transition-none",
+var ACTION_BASE_CLASSES = cn(
+  "inline-flex min-h-11 shrink-0 items-center gap-0.5 rounded-sm -my-2 py-2 -mr-1 pr-1",
+  "transition-colors duration-150 motion-reduce:transition-none",
   "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );
+var ACTION_TONE_CLASSES = {
+  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  app: cn(
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+  )
+};
 function SectionHeader({
   title,
   count,
   subtitle,
   action,
   actionHref,
+  actionTone = "muted",
+  subtitleFrom = "always",
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
   className
 }) {
   const actionIcon = /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true });
+  const actionClasses = cn(ACTION_BASE_CLASSES, ACTION_TONE_CLASSES[actionTone]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col mb-3.5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline", children: [
         /* @__PURE__ */ jsx(Heading, { className: "truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]", children: title }),
-        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-0.5 shrink-0 text-[12px] text-muted-foreground", children: count })
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-1.5 shrink-0 text-[12px] tabular-nums text-muted-foreground lg:ml-0.5", children: count })
       ] }),
-      action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: ACTION_CLASSES, onClick: onAction, children: [
+      action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: actionClasses, onClick: onAction, children: [
         action,
         actionIcon
-      ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: ACTION_CLASSES, onClick: onAction, children: [
+      ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: actionClasses, onClick: onAction, children: [
         action,
         actionIcon
       ] }) : null)
     ] }),
-    subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]", children: subtitle })
+    subtitle && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]",
+          subtitleFrom === "lg" && "hidden lg:block"
+        ),
+        children: subtitle
+      }
+    )
   ] });
 }
 function SectionHeaderSkeleton({

package/dist/components/signature-chip.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * "Signature" / "Mentioned" — the marker for a menu item the review digest
+ * backs, shared by `<MenuItem>` and the dish/drink cards so the same claim
+ * never renders two different ways.
+ *
+ * When `onEvidence` is supplied the chip becomes a button that opens the
+ * reviews behind it, and takes a dashed outline to read as interactive. That is
+ * the whole differentiator: every competitor badges items ("Nou", "NEW"), none
+ * can show you why. Without evidence it degrades to a plain label rather than
+ * offering a tap that would reveal nothing.
+ *
+ * `stopPropagation` matters on every host: the row is a `role="button"` and the
+ * cards carry a stretched crawlable `<a>` overlay, so an un-stopped click would
+ * also open the item drawer. On the cards it must additionally out-rank that
+ * overlay's `z-[1]`, hence `relative z-[2]` from the caller.
+ *
+ * `surface="image"` is for card covers, where the chip sits over the photo
+ * rather than in the caption block. The accent-on-canvas palette has no
+ * contrast guarantee over an arbitrary photo, so it swaps to the same frosted
+ * fill the place badge uses there and keeps the dashed edge — which is what
+ * says "there is evidence behind this" — in the inverted colour.
+ *
+ * The label is passed in: the DS owns no translation keys.
+ */
+type SignatureChipProps = {
+    /** Already translated. `strong` → "Signature", `weak` → "Mentioned". */
+    label: string;
+    onEvidence?: () => void;
+    /** `image` = over a card cover; `canvas` = in a caption or row. */
+    surface?: "canvas" | "image";
+    className?: string;
+};
+declare function SignatureChip({ label, onEvidence, surface, className, }: SignatureChipProps): react_jsx_runtime.JSX.Element;
+
+export { SignatureChip, type SignatureChipProps };

package/dist/components/signature-chip.js

@@ -0,0 +1,4 @@
+export { SignatureChip } from '../chunk-Q6QH52LJ.js';
+import '../chunk-UKBNQO6Q.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/signature-line-list.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MenuItemLabels } from './menu-item.js';
+import { MenuVenuePreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
+import 'react';
+import './place-types.js';
+
+/**
+ * SignatureLineList — family, venue, dish, price and reputation on one line.
+ *
+ * The densest surface on the hub, and the one that most nearly justifies the
+ * whole catalogue: every row ties a kitchen to the single thing its reviewers
+ * keep naming, with the price and the count that back it.
+ *
+ * ## Two targets per row, deliberately
+ *
+ * The venue line goes to the venue; the item row goes to the item across every
+ * kitchen that makes it. Those are genuinely different destinations, and
+ * collapsing them into one tap loses the comparison that makes the item worth
+ * showing. They are separate anchors rather than one anchor with a nested
+ * button, which would be invalid markup.
+ *
+ * Below `lg` the row stacks: venue line first, then the full `<MenuItem>`
+ * underneath. The desktop layout puts them side by side. Same markup, one
+ * breakpoint — no second component.
+ *
+ * Server-safe.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+type SignatureLineListLinkProps = MenuLinkProps;
+type SignatureLineListProps = {
+    venues: MenuVenuePreview[];
+    /** Passed through to each `<MenuItem>`. */
+    labels: MenuItemLabels;
+    formatPrice: (amount: number) => string;
+    formatCount?: (value: number) => string;
+    /** Composed meta line per venue, keyed by place slug, e.g. "romanian · Centru". */
+    metaLabels?: Record<string, string>;
+    /** The row's category mark per venue, keyed by place slug. */
+    hues?: Record<string, string>;
+    linkComponent?: MenuLinkComponent;
+    className?: string;
+};
+declare function SignatureLineList({ venues, labels, formatPrice, formatCount, metaLabels, hues, linkComponent: LinkComponent, className, }: SignatureLineListProps): react_jsx_runtime.JSX.Element;
+
+export { SignatureLineList, type SignatureLineListLinkProps, type SignatureLineListProps };

package/dist/components/signature-line-list.js

@@ -0,0 +1,99 @@
+import { Separator } from '../chunk-WSRWFA6K.js';
+import { MenuItem } from '../chunk-TH6W2PWG.js';
+import '../chunk-Q6QH52LJ.js';
+import '../chunk-UKBNQO6Q.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Star, ChevronRight } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function SignatureLineList({
+  venues,
+  labels,
+  formatPrice,
+  formatCount,
+  metaLabels,
+  hues,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col", className), children: venues.map((venue, index) => {
+    const { place, signature } = venue;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "grid gap-x-4 py-3.5 lg:grid-cols-[minmax(0,260px)_minmax(0,1fr)] lg:items-center",
+        children: [
+          index > 0 && /* @__PURE__ */ jsx(Separator, { className: "mb-3.5 lg:col-span-2" }),
+          /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href: venue.href,
+              className: "flex items-center gap-3 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-16 lg:w-16", children: [
+                  place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: place.thumbnail_url,
+                      alt: "",
+                      className: "h-full w-full object-cover",
+                      loading: "lazy"
+                    }
+                  ),
+                  place.open_now && /* @__PURE__ */ jsx(
+                    "i",
+                    {
+                      "aria-hidden": true,
+                      className: "absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-[15px] font-bold tracking-[-0.01em]", children: place.name }),
+                  /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+                    place.rating && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Star, { className: "h-[11px] w-[11px]", "aria-hidden": true }),
+                      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: place.rating.rating })
+                    ] }),
+                    (metaLabels == null ? void 0 : metaLabels[place.slug]) && /* @__PURE__ */ jsx("span", { className: "truncate", children: metaLabels[place.slug] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    className: "h-4 w-4 shrink-0 text-muted-foreground lg:hidden",
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            }
+          ),
+          signature && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              item: signature.item,
+              labels,
+              formatPrice,
+              formatCount,
+              markGradient: hues == null ? void 0 : hues[place.slug],
+              subtitle: signature.why,
+              showSignatureBadge: signature.isSignature,
+              href: signature.href,
+              linkComponent: LinkComponent,
+              className: "min-w-0"
+            }
+          )
+        ]
+      },
+      place.slug
+    );
+  }) });
+}
+
+export { SignatureLineList };

package/dist/components/snap-rail.d.ts

@@ -0,0 +1,54 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * SnapRail — a horizontal, finger-driven rail with mandatory snap points, the
+ * way a native app lays out a row of cards. Not `DriftRail`: that one moves on
+ * its own and is for ambience; this one waits to be swiped and is for content
+ * the reader is expected to reach.
+ *
+ * Every direct child becomes a snap target and takes the rail's item width, so
+ * callers pass bare cards — no wrapper, no per-item width. Widths are
+ * percentages of the rail, so the peek of the next card is what tells the
+ * reader there is more; there is no scrollbar and no edge fade.
+ *
+ * `bleed` cancels the host's horizontal padding and restores it as scroll
+ * padding, so the first card lines up with the host's content edge and the
+ * rail still snaps to that same edge after a swipe. Without it, the rail
+ * snaps flush to the host's rounded corner and loads looking pre-scrolled.
+ * `card` is the 14px inset of a hub card; `page` is the 16px page gutter.
+ */
+declare const snapRailVariants: (props?: ({
+    itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
+    gap?: "default" | "sm" | null | undefined;
+    bleed?: "none" | "page" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SnapRailProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof snapRailVariants> & {
+    /**
+     * Page dots under the rail, one per child, the current one filled. For
+     * `itemWidth="full"`, where no next card peeks in to say there is more.
+     * Decorative: the rail itself is the control, and every card is reachable
+     * by scrolling, so the dots are `aria-hidden`.
+     */
+    dots?: boolean;
+    /** Classes for the dots row, e.g. `lg:hidden` where the rail becomes a grid. */
+    dotsClassName?: string;
+};
+declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
+    gap?: "default" | "sm" | null | undefined;
+    bleed?: "none" | "page" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * Page dots under the rail, one per child, the current one filled. For
+     * `itemWidth="full"`, where no next card peeks in to say there is more.
+     * Decorative: the rail itself is the control, and every card is reachable
+     * by scrolling, so the dots are `aria-hidden`.
+     */
+    dots?: boolean;
+    /** Classes for the dots row, e.g. `lg:hidden` where the rail becomes a grid. */
+    dotsClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { SnapRail, type SnapRailProps };