@bearmenu/ui 0.8.11 → 0.8.13

package/src/components/menu-index-list.tsx

@@ -1,23 +1,32 @@
-import { ChevronRight } from "lucide-react";
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
 
 /**
- * MenuIndexList — the complete set, four across.
+ * MenuIndexList — the complete set: one column on a phone, three from `lg`.
  *
  * ## This block is why the page can afford to be progressive
  *
  * It carries a crawlable link to EVERY destination the city has — all
- * thirty-eight cuisines, not the ten the page draws in full below. That makes
- * it the page's entire link-equity job, which in turn means the rich blocks
- * underneath are free to load ten at a time behind a "show more": nothing a
- * crawler needs is hidden behind that control, because it is all up here.
+ * thirty-eight cuisines, in the markup at every width. That makes it the
+ * page's entire link-equity job, which in turn means the rich cards above
+ * are free to be a swipe rail on a phone: nothing a crawler needs waits on a
+ * swipe, because it is all here.
+ *
+ * The phone's own "show all" is CSS, not markup: every row is in the DOM and
+ * the ones past `collapsedCount` are hidden below `lg` until the button is
+ * pressed. A list that mounted its tail on tap would have taken twenty-six
+ * links out of the page for the crawler that never taps.
  *
- * Get this backwards — put the whole set behind the disclosure and only ten
- * links in the markup — and the page silently stops linking to twenty-eight
- * pages it is supposed to be the index for.
+ * Get this backwards — mount the rows behind the expander on tap — and the
+ * page silently stops linking to twenty-six pages it is supposed to be the
+ * index for.
  *
  * ## Ordered by count, and the counts overlap
  *
@@ -25,6 +34,10 @@ import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-ty
  * places, because a trattoria is Italian AND pizza AND international. So this
  * is a ranked list of ways in, never a partition, and no copy near it may total
  * the numbers or call them a breakdown.
+ *
+ * A client component for the one piece of state the expander needs; the
+ * `linkComponent` a server caller hands in must therefore be a client
+ * reference (`ClientLink`), not `next/link` itself.
  */
 
 /** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
@@ -40,8 +53,15 @@ export type MenuIndexListProps = {
   title: string;
   /** One line under it, e.g. "Ordered by kitchens — every one has its own page". */
   subtitle?: string;
-  /** Locale-aware integer formatter. Defaults to `String`. */
-  formatCount?: (value: number) => string;
+  /**
+   * Rows shown on a phone before the expander; the rest are hidden below `lg`
+   * until it is pressed. Omit to show every row at every width.
+   */
+  collapsedCount?: number;
+  /** The expander's labels, e.g. "Show all 38 cuisines" / "Show fewer". */
+  expandLabels?: { showAll: string; showFewer: string };
+  /** The colour mark beside each name, keyed by slug. Falls back to the border colour. */
+  hues?: Record<string, string>;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -50,10 +70,16 @@ export function MenuIndexList({
   entries,
   title,
   subtitle,
-  formatCount = String,
+  collapsedCount,
+  expandLabels,
+  hues,
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuIndexListProps) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsible =
+    collapsedCount !== undefined && expandLabels !== undefined && entries.length > collapsedCount;
+
   return (
     <section
       className={cn(
@@ -68,55 +94,76 @@ export function MenuIndexList({
         )}
       </div>
 
-      {/*
-        Two columns on a phone, four from `lg`. One column at 390px turns
-        thirty-eight rows into four screens of scrolling for a list whose whole
-        job is to be scanned; two halves that, and the row still holds a name of
-        realistic length beside its count.
-      */}
-      <ul className="grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
-        {entries.map((entry) => (
-          <li key={entry.slug}>
-            {/* The DS `Separator`, above every row including the first.
-                It was `border-t … first:border-t-0 lg:first:border-t`, which
-                only exempted the very FIRST entry — so in the two-column phone
-                layout the top-left row had no rule and the top-right one, its
-                own neighbour, did. Ruling every row is both uniform and simpler
-                than restoring the exception per breakpoint. */}
-            <Separator />
-            <LinkComponent
-              href={entry.href}
-              className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+      {/* One column on a phone — a row holds a name of realistic length, its
+          count and the chevron with room to spare, and the expander keeps the
+          list to twelve rows until asked. Three from `lg`. */}
+      <ul className="grid grid-cols-1 lg:grid-cols-3 lg:gap-x-8">
+        {entries.map((entry, index) => {
+          const hue = hues?.[entry.slug];
+          return (
+            <li
+              key={entry.slug}
+              className={cn(
+                collapsible && !expanded && index >= collapsedCount && "max-lg:hidden"
+              )}
             >
-              <span
-                aria-hidden
-                className={cn(
-                  "h-2.5 w-2.5 shrink-0 rounded-[3px]",
-                  !entry.gradient && "bg-border"
-                )}
-                style={entry.gradient ? { backgroundImage: entry.gradient } : undefined}
-              />
-              <span className="min-w-0 flex-1 truncate text-[13.5px]">{entry.name}</span>
-              <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
-                {formatCount(entry.count)}
-              </span>
-              <ChevronRight
-                className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
-                aria-hidden
-              />
-            </LinkComponent>
-          </li>
-        ))}
+              {/* The DS `Separator`, above every row including the first, so
+                  the rule is uniform across columns. */}
+              <Separator />
+              <LinkComponent
+                href={entry.href}
+                className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+              >
+                {/* The family's mark: a dot in its hue. */}
+                <span
+                  aria-hidden
+                  className={cn("h-2 w-2 shrink-0 rounded-full", !hue && !entry.gradient && "bg-border")}
+                  style={
+                    hue
+                      ? { backgroundColor: hue }
+                      : entry.gradient
+                        ? { backgroundImage: entry.gradient }
+                        : undefined
+                  }
+                />
+                <span className="min-w-0 flex-1 truncate text-sm font-medium">{entry.name}</span>
+                <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
+                  {entry.countLabel ?? String(entry.count)}
+                </span>
+                <ChevronRight
+                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
+                  aria-hidden
+                />
+              </LinkComponent>
+            </li>
+          );
+        })}
       </ul>
+
+      {collapsible && (
+        <Button
+          variant="outline"
+          fullWidth
+          className="mt-2 lg:hidden"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((open) => !open)}
+        >
+          {expanded ? expandLabels.showFewer : expandLabels.showAll}
+          <ChevronDown
+            className={cn("transition-transform motion-reduce:transition-none", expanded && "rotate-180")}
+            aria-hidden
+          />
+        </Button>
+      )}
     </section>
   );
 }
 
 // ─── Skeleton ───────────────────────────────────────────────────────────────
 
-/** Two columns on a phone, four from `lg` — the grid the list itself renders. */
+/** One column on a phone, three from `lg` — the grid the list itself renders. */
 export function MenuIndexListSkeleton({
-  rows = 24,
+  rows = 12,
   className,
 }: {
   rows?: number;
@@ -132,12 +179,12 @@ export function MenuIndexListSkeleton({
     >
       <Skeleton className="h-[15px] w-[140px]" />
       <Skeleton className="mt-1.5 h-3 w-[240px]" />
-      <ul className="mt-2 grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
+      <ul className="mt-2 grid grid-cols-1 lg:grid-cols-3 lg:gap-x-8">
         {Array.from({ length: rows }, (_, index) => (
           <li key={index}>
             <Separator />
             <div className="flex items-center gap-2.5 py-2.5">
-              <Skeleton className="h-2.5 w-2.5 rounded-[3px]" />
+              <Skeleton className="h-2 w-2 rounded-full" />
               <Skeleton className="h-3.5 flex-1" />
               <Skeleton className="h-3 w-6" />
             </div>

package/src/components/menu-intent-hero.tsx

@@ -55,7 +55,7 @@ export type MenuIntentHeroProps = {
    * Finished CSS gradient for the ground, e.g. `linear-gradient(140deg, …)`.
    *
    * A gradient rather than a token name, for the same reason `<MenuField>` and
-   * `<MenuIntentTiles>` take one: the hue tables are app-owned, and a component
+   * `<MenuFamilyTiles>` take one: the hue tables are app-owned, and a component
    * referencing `var(--h-pizza)` renders an unstyled panel in any consumer that
    * does not define it. Missing, the panel falls back to the foreground colour
    * — visibly unstyled rather than white text on white.

package/src/components/menu-kitchen-list.tsx

@@ -150,7 +150,10 @@ function KitchenRow({
       </span>
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
-        <span className="truncate text-[14.5px] font-bold tracking-[-0.01em] lg:text-[15.5px]">
+        {/* One line with an ellipsis on a phone, where the row is the whole
+            width; two lines from `lg`, where the column is 226px and
+            "ADRIATICA GELATERIA ITALIANA" would otherwise lose its half. */}
+        <span className="truncate text-[14.5px] font-bold tracking-[-0.01em] lg:line-clamp-2 lg:whitespace-normal lg:text-[15.5px] lg:leading-tight">
           {place.name}
         </span>
         <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">

package/src/components/menu-mocks.ts

@@ -25,7 +25,7 @@ import type {
   MenuFilterChip,
   MenuIndexEntry,
   MenuIntentFigure,
-  MenuIntentTile,
+  MenuFamilyTile,
   MenuItemPreview,
   MenuKitchenPreview,
   MenuLoosenOption,
@@ -372,18 +372,41 @@ export const mockDrinkFamily: MenuFamilyPreview = {
   venue_photo_urls: [],
 };
 
-const intentGradient = (hue: number) =>
+const familyGradient = (hue: number) =>
   `linear-gradient(150deg, oklch(0.52 0.14 ${hue}), oklch(0.43 0.13 ${hue - 4}))`;
 
-export const mockIntentTiles: MenuIntentTile[] = [
-  { slug: "italian", label: "Italian tonight", caption: "247 kitchens", href: "/top/italian?open=now", gradient: intentGradient(40) },
-  { slug: "burgeri", label: "Burgers", caption: "229 kitchens", href: "/top/burgeri", gradient: intentGradient(25) },
-  { slug: "restaurante", label: "Open right now", caption: "by the hour", href: "/top/restaurante?open=now", gradient: intentGradient(60) },
-  { slug: "brunch", label: "Brunch", caption: "314 kitchens", href: "/top/brunch", gradient: intentGradient(75) },
-  { slug: "vegan", label: "Vegan", caption: "108 kitchens", href: "/top/vegan", gradient: intentGradient(148) },
-  { slug: "centru", label: "In Centru", caption: "by neighbourhood", href: "/top/centru", gradient: intentGradient(300) },
+/** A venue photograph stand-in: a tinted room, not a plate. */
+const familyPhoto = (hue: number) =>
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 28% 60%)"/><stop offset="1" stop-color="hsl(${hue} 22% 26%)"/></linearGradient></defs><rect width="320" height="320" fill="url(#g)"/><circle cx="100" cy="110" r="56" fill="hsl(${hue} 40% 82%)" opacity=".55"/><rect x="170" y="190" width="120" height="90" fill="hsl(${hue} 15% 18%)" opacity=".7"/></svg>`
+  );
+
+/**
+ * The hub's seven cuisines, in the registry's order. The photograph is a
+ * venue's, never a plate's; the last one ships without, so the story shows
+ * the initial fallback beside six real tiles.
+ */
+export const mockFamilyTiles: MenuFamilyTile[] = [
+  { slug: "italian", label: "Italian", countLabel: "66", href: "/menu/cuisines/italian", gradient: familyGradient(38), photoUrl: familyPhoto(30) },
+  { slug: "romanian", label: "Romanian", countLabel: "64", href: "/menu/cuisines/romanian", gradient: familyGradient(25), photoUrl: familyPhoto(10) },
+  { slug: "breakfast-brunch", label: "Breakfast & brunch", countLabel: "64", href: "/menu/cuisines/breakfast-brunch", gradient: familyGradient(82), photoUrl: familyPhoto(45) },
+  { slug: "vegetarian", label: "Vegetarian", countLabel: "64", href: "/menu/cuisines/vegetarian", gradient: familyGradient(148), photoUrl: familyPhoto(120) },
+  { slug: "pizza", label: "Pizza", countLabel: "63", href: "/menu/cuisines/pizza", gradient: familyGradient(58), photoUrl: familyPhoto(20) },
+  { slug: "vegan", label: "Vegan", countLabel: "38", href: "/menu/cuisines/vegan", gradient: familyGradient(135), photoUrl: familyPhoto(100) },
+  { slug: "bakery", label: "Bakeries & patisseries", countLabel: "65", href: "/menu/cuisines/bakery", gradient: familyGradient(72) },
 ];
 
+/** The closing tile: stone, so it reads as the index and not as an eighth cuisine. */
+export const mockFamilyTilesAll: MenuFamilyTile = {
+  slug: "all",
+  label: "All 38 cuisines",
+  countLabel: "The full index",
+  href: "/menu/cuisines",
+  gradient: "linear-gradient(150deg, oklch(0.50 0.03 70), oklch(0.40 0.028 64))",
+  photoUrl: familyPhoto(60),
+};
+
 /** Formatters the stories pass. Real callers inject locale-aware ones. */
 export const mockFormatters = {
   price: (value: number) => `${value} lei`,

package/src/components/menu-types.ts

@@ -134,6 +134,20 @@ export type MenuConceptRow = {
   featured?: boolean
   /** Portion, already formatted with its unit, e.g. "260g". */
   portion_label?: string
+  /**
+   * What this room WON — "CHEAPEST", "MOST NAMED", "HIGHEST GRADE",
+   * "DEAREST" — already localised. A card whose rooms are four winners rather
+   * than four ranks sets one per room; without it the card falls back to
+   * "cheapest, then #2, #3, #4".
+   */
+  badge?: string
+  /** Which figure the badge is about; that figure is emphasised. */
+  lead?: 'price' | 'mentions' | 'grade'
+  /**
+   * The venue's BearMenu grade, pre-formatted ("9.2"). Takes the star's
+   * place beside the kitchen's name; `rating` (Google's) shows only without it.
+   */
+  grade?: string
 }
 
 /**
@@ -203,17 +217,21 @@ export type MenuVenueSignature = {
 }
 
 /**
- * An intent tile — a family plus a constraint, resolving to a category page.
+ * A family tile — a cuisine on the dishes tab, a going-out family on the
+ * drinks tab — as the hub's doorway grid draws it: a hue, a name, a venue
+ * count and one venue's photograph.
  *
- * Only about thirty-two of the thirty-eight cuisines have a page, so `href` is
- * required: a tile that cannot resolve to a real destination is not rendered
- * rather than linking nowhere.
+ * `href` is required: a tile that cannot resolve to a real destination is not
+ * rendered rather than linking nowhere.
  */
-export type MenuIntentTile = {
+export type MenuFamilyTile = {
   slug: string
   label: string
-  /** Supporting line, e.g. "247 kitchens". Already formatted by the caller. */
-  caption?: string
+  /**
+   * The venue count, already formatted by the caller — "64", "1,204" — because
+   * thousands separators are locale-dependent and the DS owns no locale.
+   */
+  countLabel?: string
   href: string
   /**
    * Finished CSS gradient for the tile's ground, e.g.
@@ -226,8 +244,8 @@ export type MenuIntentTile = {
    * — visible and obviously unstyled, rather than white text on white.
    */
   gradient?: string
-  /** Icon node, resolved by the caller — the DS does not pick icons for it. */
-  icon?: ReactNode
+  /** Pre-resolved VENUE photograph. Venue photography is real; item photography is not. */
+  photoUrl?: string
 }
 
 /**
@@ -351,6 +369,11 @@ export type MenuIndexEntry = {
   slug: string
   name: string
   count: number
+  /**
+   * `count`, already formatted ("1,204"). The list is a client component and a
+   * formatter cannot cross into it from a server caller; a string can.
+   */
+  countLabel?: string
   href: string
   /** Finished CSS gradient for the mark. Falls back to the border colour. */
   gradient?: string

package/src/components/photo-ground.tsx

@@ -62,6 +62,12 @@ export type PhotoGroundProps = {
   overlayClassName?: string;
   /** How eagerly the first photograph loads. `stack` grounds are above the fold. */
   loading?: "lazy" | "eager";
+  /**
+   * Classes on the fallback initial — its size, when the ground is smaller
+   * than a card. The 64px default fills a card cell; a tile's 88px polaroid
+   * passes `text-[44px]`.
+   */
+  glyphClassName?: string;
   className?: string;
 };
 
@@ -76,6 +82,7 @@ export function PhotoGround({
   overlay,
   overlayClassName,
   loading = "lazy",
+  glyphClassName,
   className,
 }: PhotoGroundProps) {
   const initialOf = (index: number) =>
@@ -100,7 +107,12 @@ export function PhotoGround({
              photograph is not a broken image, and drawing one as a placeholder
              makes a real city look unfinished. */
           <span className="absolute inset-0 flex items-center justify-center">
-            <span className="font-serif text-[64px] font-semibold leading-none text-white/15">
+            <span
+              className={cn(
+                "font-serif text-[64px] font-semibold leading-none text-white/15",
+                glyphClassName
+              )}
+            >
               {initialOf(index)}
             </span>
           </span>

package/src/components/snap-rail.tsx

@@ -166,6 +166,14 @@ SnapRail.displayName = "SnapRail";
  * `onActiveChange` and wants the dots somewhere other than directly under it —
  * inside a foot band, say. Decorative, as on the rail: the rail is the control.
  */
+/**
+ * Past this many pages the dots stop being a picture of the rail — twelve
+ * 6px dots with their gaps already run 138px, and a cuisines index has
+ * thirty-six — so the row becomes a counter, "7 / 36", which says the same
+ * two things (where, and how far) at any length.
+ */
+const MAX_DOTS = 12;
+
 export function SnapRailDots({
   count,
   active,
@@ -175,6 +183,17 @@ export function SnapRailDots({
   active: number;
   className?: string;
 }) {
+  if (count > MAX_DOTS) {
+    return (
+      <div
+        aria-hidden
+        className={cn("flex justify-center text-[11px] tabular-nums text-muted-foreground", className)}
+      >
+        {active + 1} / {count}
+      </div>
+    );
+  }
+
   return (
     <div aria-hidden className={cn("flex justify-center gap-1.5", className)}>
       {Array.from({ length: count }, (_, index) => (

package/src/components/venue-grade-dimensions.tsx

@@ -74,12 +74,19 @@ export function VenueGradeDimensions({
           <dd className="text-[15px] font-extrabold tracking-[-0.02em] tabular-nums">
             {formatScore(value)}
           </dd>
+          {/* The track is `currentColor` at low alpha rather than `bg-muted`:
+              on the dossier's ink `--muted` is within a hair of the ground
+              and the empty bar vanished. */}
           <div
             aria-hidden
-            className="relative block h-[3px] overflow-hidden rounded-full bg-muted"
+            className="relative block h-[3px] overflow-hidden rounded-full bg-current/15"
           >
+            {/* `bg-[image:…]`, not `bg-[…]`: `--gradient-primary` is a
+                linear-gradient, and as a background-COLOR it is an invalid
+                declaration the browser drops — the fill rendered at the right
+                width with no paint at all. */}
             <span
-              className="absolute inset-y-0 left-0 rounded-full bg-[var(--gradient-primary,currentColor)]"
+              className="absolute inset-y-0 left-0 rounded-full bg-current bg-[image:var(--gradient-primary)]"
               style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
             />
           </div>

package/src/components/weekday-theme-banner.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Calendar, PanelRightOpen } from "lucide-react";
+import { Calendar, ChevronRight } from "lucide-react";
 import { Button } from "./button";
 import { WeekdayThemeBanner, type WeekdayThemeDay } from "./weekday-theme-banner";
 
@@ -56,9 +56,9 @@ export const Default: Story = {
     body: "186 of them across 11 kitchens, from 32 lei. Two do a vegetarian version and four keep the grill on past midnight.",
     weekLabel: "THE WEEK",
     action: (
-      <Button size="sm" variant="secondary">
-        <PanelRightOpen className="h-3.5 w-3.5" />
+      <Button size="pill" variant="ink">
         See today&apos;s picks
+        <ChevronRight aria-hidden />
       </Button>
     ),
     actionNote: "Bruno picks nine, ranked on review mentions",
@@ -66,6 +66,40 @@ export const Default: Story = {
   },
 };
 
+/**
+ * The phone: no labelled button — the banner is the target and the chevron
+ * on the right is the signal, so the banner stays as tall as its title.
+ */
+export const CompactAction: Story = {
+  args: {
+    days: days.map((day) => ({ ...day, name: `${day.name} in Cluj-Napoca`, shortHeadline: day.name })),
+    activeDay: 3,
+    imageUrl:
+      "data:image/svg+xml;utf8," +
+      encodeURIComponent(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="630"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(30 30% 40%)"/><stop offset="1" stop-color="hsl(20 40% 20%)"/></linearGradient></defs><rect width="1440" height="630" fill="url(#g)"/><circle cx="1000" cy="330" r="220" fill="hsl(40 60% 70%)"/><circle cx="1000" cy="330" r="150" fill="hsl(25 70% 45%)"/></svg>'
+      ),
+    kicker: "TODAY'S THEME",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    weekLabel: "THE WEEK",
+    action: (
+      <Button size="pill" variant="ink">
+        See today&apos;s picks
+        <ChevronRight aria-hidden />
+      </Button>
+    ),
+    compactAction: { label: "See today's picks", onClick: () => {} },
+  },
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 /** The drinks tab, same component. */
 export const DrinksTab: Story = {
   args: {
@@ -101,7 +135,12 @@ export const Mobile: Story = {
     kickerIcon: <Calendar className="h-3 w-3" />,
     body: "186 of them across 11 kitchens, from 32 lei.",
     weekLabel: "THE WEEK",
-    action: <Button size="sm" variant="secondary">See today&apos;s picks</Button>,
+    action: (
+      <Button size="pill" variant="ink">
+        See today&apos;s picks
+        <ChevronRight aria-hidden />
+      </Button>
+    ),
   },
   decorators: [
     (Story) => (