@bearmenu/ui 0.8.9 → 0.8.10

package/src/components/menu-filter-chips.tsx

@@ -0,0 +1,238 @@
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { ScrollFade } from "./scroll-fade";
+import { Skeleton } from "./skeleton";
+import type { MenuFilterChip } from "./menu-types";
+
+/**
+ * MenuFilterChips — the intent page's filter row.
+ *
+ * ## One unit, one list that moves
+ *
+ * Every chip counts KITCHENS, whatever facet is behind it. A dietary chip reads
+ * "has a vegetarian dish" and counts venues; a dish-group chip reads "has a
+ * pizza" and counts venues. The earlier version mixed venue counts and dish
+ * counts in one row and became unreadable — you could not tell what a number
+ * was counting without reading the label that produced it. The unit is stated
+ * once, at the head of the row (`unitLabel`, e.g. "KITCHENS · 247"), and never
+ * again.
+ *
+ * ## A zero-count chip is dimmed, not disabled
+ *
+ * `empty` chips stay tappable. Pressing one swaps it in and drops whichever
+ * active filter conflicts with it, and the caller says which in a line beneath.
+ * Disabling it would refuse the reader the thing they asked for and give no
+ * reason; this way the row answers the question by being pressed. Facets the
+ * API says are unavailable for this intent are not passed in at all — not
+ * drawn, rather than drawn dead.
+ *
+ * ## The row scrolls; the escape hatch does not
+ *
+ * One line in every state. Chips scroll horizontally under a `<ScrollFade>`,
+ * and "More filters" is pinned opposite the unit label rather than wrapping,
+ * so the way out of a full row is always in the same place.
+ *
+ * Interactive: the consumer marks its own module `"use client"`.
+ */
+
+export type MenuFilterChipsProps = {
+  chips: MenuFilterChip[];
+  onToggle: (key: string) => void;
+  /** The unit and the current total, composed by the caller, e.g. "KITCHENS · 247". */
+  unitLabel?: string;
+  /** Opens the full filter sheet. Omit for a row where every facet is a chip. */
+  onMore?: () => void;
+  moreLabel?: string;
+  /**
+   * A glyph for the phone's icon-only "more filters" button.
+   *
+   * The label is the widest fixed element in the row — "More filters" is ~80px
+   * of a 358px viewport, and it is the one thing that never scrolls, so it eats
+   * the chips' runway on every phone. Given an icon, the button collapses to a
+   * square below `lg` and keeps `moreLabel` as its accessible name.
+   *
+   * A node rather than a name because the app owns its iconography, and this
+   * one is animated on press — the DS neither knows the glyph nor drives it.
+   */
+  moreIcon?: React.ReactNode;
+  /** Press handler for the icon button, e.g. to replay the glyph's animation. */
+  onMorePointerDown?: () => void;
+  /** Locale-aware integer formatter for the counts. Defaults to `String`. */
+  formatCount?: (value: number) => string;
+  /** Accessible name for the row. */
+  ariaLabel?: string;
+  className?: string;
+};
+
+export function MenuFilterChips({
+  chips,
+  onToggle,
+  unitLabel,
+  onMore,
+  moreLabel,
+  moreIcon,
+  onMorePointerDown,
+  formatCount = String,
+  ariaLabel,
+  className,
+}: MenuFilterChipsProps) {
+  return (
+    <div className={cn("relative flex items-center gap-2", className)}>
+      {/* Desktop only. It states a unit and a total that the section heading
+          directly below already gives in full ("The kitchens Cluj-Napoca rates
+          for Italian · 247"), and on a phone it is a fixed 110px bitten out of
+          the one row that needs every pixel to scroll. */}
+      {unitLabel && (
+        <span className="hidden shrink-0 pr-0.5 text-[11px] font-extrabold uppercase tracking-[0.1em] text-muted-foreground lg:inline">
+          {unitLabel}
+        </span>
+      )}
+
+      <ScrollFade
+        orientation="horizontal"
+        size="sm"
+        className="min-w-0 flex-1"
+        scrollClassName="scrollbar-hide"
+      >
+        <div className="flex items-center gap-2" role="group" aria-label={ariaLabel}>
+          {chips.map((chip) => (
+            <Chip
+              key={chip.key}
+              chip={chip}
+              onToggle={() => onToggle(chip.key)}
+              formatCount={formatCount}
+            />
+          ))}
+        </div>
+      </ScrollFade>
+
+      {onMore && (
+        <>
+          {/* One control, two shapes. On a phone it is a 40px square carrying
+              the caller's glyph, with `moreLabel` as its accessible name; from
+              `lg` it is the text link it has always been. Two elements rather
+              than one so neither has to carry the other's padding, and both
+              stay `shrink-0` against the scrolling chips. */}
+          {moreIcon && (
+            <button
+              type="button"
+              onClick={onMore}
+              onPointerDown={onMorePointerDown}
+              aria-label={moreLabel}
+              aria-haspopup="dialog"
+              className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden"
+            >
+              {moreIcon}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onMore}
+            className={cn(
+              "shrink-0 rounded-md pl-2 text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+              moreIcon && "hidden lg:inline"
+            )}
+          >
+            {moreLabel}
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Chip({
+  chip,
+  onToggle,
+  formatCount,
+}: {
+  chip: MenuFilterChip;
+  onToggle: () => void;
+  formatCount: (value: number) => string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={chip.active}
+      className={cn(
+        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        chip.active
+          ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]"
+          : "border-border bg-card text-foreground hover:border-accent/40",
+        // Dimmed, never disabled — pressing it is how the reader finds out
+        // which active filter is in the way.
+        chip.empty && "opacity-45"
+      )}
+    >
+      {chip.icon}
+      {chip.label}
+      {chip.count !== undefined && (
+        <span className={cn("tabular-nums", chip.active ? "text-accent" : "text-muted-foreground")}>
+          {formatCount(chip.count)}
+        </span>
+      )}
+      {chip.active && <X className="h-3 w-3 shrink-0" aria-hidden />}
+    </button>
+  );
+}
+
+/**
+ * MenuFilterSummary — what the active filters did, and the way out.
+ *
+ * Sits under the row whenever anything is on. The sentence is composed by the
+ * caller because it is a real sentence in two languages ("Three filters · 34 of
+ * 247 kitchens are mid-range, have a vegetarian Italian dish, and are open
+ * now") and assembling it from fragments here would produce translated
+ * word-salad in one of them.
+ */
+export type MenuFilterSummaryProps = {
+  /** The composed sentence. */
+  summary: React.ReactNode;
+  clearLabel: string;
+  onClear: () => void;
+  className?: string;
+};
+
+export function MenuFilterSummary({
+  summary,
+  clearLabel,
+  onClear,
+  className,
+}: MenuFilterSummaryProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2.5 pt-3.5", className)}>
+      <span className="text-[13px] text-muted-foreground [&_b]:font-bold [&_b]:text-foreground">
+        {summary}
+      </span>
+      <button
+        type="button"
+        onClick={onClear}
+        className="ml-auto shrink-0 rounded-md text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+      >
+        {clearLabel}
+      </button>
+    </div>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/**
+ * One line, as the row itself renders — never a wrapped block.
+ *
+ * The widths vary deliberately: six identical pills read as a progress bar, and
+ * the real row is a set of labels of different lengths.
+ */
+const CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
+
+export function MenuFilterChipsSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex items-center gap-2 overflow-hidden", className)} aria-hidden>
+      <Skeleton className="h-3 w-[92px] shrink-0" />
+      {CHIP_WIDTHS.map((width, index) => (
+        <Skeleton key={index} className="h-9 shrink-0 rounded-full" style={{ width }} />
+      ))}
+    </div>
+  );
+}

package/src/components/menu-group-rows.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuGroupRows } from "./menu-group-rows";
+import { mockGradients } from "./menu-mocks";
+
+const meta: Meta<typeof MenuGroupRows> = {
+  title: "Menu/MenuGroupRows",
+  component: MenuGroupRows,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[380px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "What an intent consists of — the `dish_groups` facet on a cuisine page, digest tags and graded strengths on a going-out page. One component for both, because both are the same object: a facet value, its venue count and a range. The counts are VENUES: no endpoint counts dishes per cuisine, so *120* is a hundred and twenty kitchens that make a pizza, and the `meta` line is composed by the caller so it can say which.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuGroupRows>;
+
+export const Cuisine: Story = {
+  args: {
+    rows: [
+      { slug: "pizza", name: "Pizza", meta: "120 kitchens", rangeLabel: "30—68", href: "#", gradient: mockGradients.pasta },
+      { slug: "pasta", name: "Pasta", meta: "96 kitchens", rangeLabel: "38—84", href: "#", gradient: mockGradients.pasta },
+      { slug: "salad", name: "Salad", meta: "88 kitchens", rangeLabel: "22—56", href: "#", gradient: mockGradients.greens },
+      { slug: "beef", name: "Beef", meta: "77 kitchens", rangeLabel: "34—72", href: "#", gradient: mockGradients.meat },
+    ],
+  },
+};
+
+/** The going-out side: tags and strengths, and no price range behind them. */
+export const GoingOut: Story = {
+  args: {
+    rows: [
+      { slug: "cocktails", name: "Cocktails", meta: "63 places", href: "#", gradient: mockGradients.cocktail },
+      { slug: "late_night", name: "Open late", meta: "59 places", href: "#", gradient: mockGradients.meat },
+      { slug: "drinks_quality", name: "Strong on drinks", meta: "131 places", href: "#", gradient: mockGradients.sweet },
+    ],
+  },
+};
+
+/** No gradient and no range — the row still reads. */
+export const Bare: Story = {
+  args: { rows: [{ slug: "soup", name: "Soup", meta: "169 kitchens" }] },
+};

package/src/components/menu-group-rows.tsx

@@ -0,0 +1,133 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import type { MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuGroupRows — what an intent consists of.
+ *
+ * On a cuisine page this is the `dish_groups` facet narrowed by the cuisine
+ * ("Pizza · 120 kitchens · 30–68"); on a going-out page it is the digest tags
+ * and graded strengths ("Cocktails · 63 places"). One component for both,
+ * because both are the same object: a facet value, its venue count, and a range.
+ *
+ * ## The counts are VENUES, and the label has to say so
+ *
+ * There is no endpoint that counts dishes per cuisine — `/dishes` accepts
+ * `cuisine_slugs` and ignores it — so "120" here is a hundred and twenty
+ * kitchens that make a pizza, not a hundred and twenty pizzas. The `meta` line
+ * is composed by the caller precisely so that it can say which, in a language
+ * where the two words differ.
+ *
+ * ## Not `<ConceptCard>`
+ *
+ * That one is a cover-led card for a thing with a date and a venue. This is a
+ * row in a sidebar: a hue bar, a name, a count and a range. Giving it a cover
+ * would mean finding a photograph of "pasta", which is the kind of picture that
+ * makes a page look generated.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type MenuGroupRowsLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuGroupRowsLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuGroupRow = {
+  slug: string;
+  name: string;
+  /** Venue count line, e.g. "120 kitchens". Pluralised by the caller. */
+  meta: string;
+  /** Price range, already formatted, e.g. "30—68". Omitted where none is known. */
+  rangeLabel?: string;
+  href?: string;
+  /** Finished CSS gradient for the bar. A missing one falls back to the border colour. */
+  gradient?: string;
+};
+
+export type MenuGroupRowsProps = {
+  rows: MenuGroupRow[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuGroupRows({
+  rows,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuGroupRowsProps) {
+  return (
+    <ul className={cn("flex flex-col", className)}>
+      {rows.map((row) => {
+        const body = (
+          <>
+            <span
+              aria-hidden
+              className={cn(
+                "h-[34px] w-2 shrink-0 rounded-full",
+                !row.gradient && "bg-border"
+              )}
+              style={row.gradient ? { backgroundImage: row.gradient } : undefined}
+            />
+            <span className="min-w-0 flex-1">
+              <span className="block truncate text-sm font-bold">{row.name}</span>
+              <span className="mt-px block truncate text-[11.5px] text-muted-foreground">
+                {row.meta}
+              </span>
+            </span>
+            {row.rangeLabel && (
+              <span className="shrink-0 font-mono text-xs tabular-nums text-muted-foreground">
+                {row.rangeLabel}
+              </span>
+            )}
+            <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
+          </>
+        );
+
+        return (
+          <li key={row.slug} className="border-t border-border first:border-t-0">
+            {row.href ? (
+              <LinkComponent
+                href={row.href}
+                className="flex items-center gap-3 py-3 transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+              >
+                {body}
+              </LinkComponent>
+            ) : (
+              <span className="flex items-center gap-3 py-3">{body}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+export function MenuGroupRowsSkeleton({
+  rows = 5,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col", className)} aria-hidden>
+      {Array.from({ length: rows }, (_, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-3 border-t border-border py-3 first:border-t-0"
+        >
+          <Skeleton className="h-[34px] w-2 rounded-full" />
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+            <Skeleton className="h-3.5 w-[50%]" />
+            <Skeleton className="h-3 w-[35%]" />
+          </div>
+          <Skeleton className="h-3 w-[52px]" />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/menu-index-header.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UtensilsCrossed, Wine } from "lucide-react";
+import { MenuIndexHeader, MenuJumpStrip } from "./menu-index-header";
+import { SegmentedNav } from "./segmented-nav";
+import { mockIndexEntries } from "./menu-mocks";
+
+const scopeSwitch = (
+  <SegmentedNav
+    label="Menu scope"
+    activeId="food"
+    items={[
+      { id: "food", href: "/menu/cuisines", label: "Food", icon: <UtensilsCrossed className="h-4 w-4" /> },
+      { id: "drinks", href: "/menu/drinks/families", label: "Drinks", icon: <Wine className="h-4 w-4" /> },
+    ]}
+  />
+);
+
+const meta: Meta<typeof MenuIndexHeader> = {
+  title: "Menu/MenuIndexHeader",
+  component: MenuIndexHeader,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "MENU · CLUJ-NAPOCA",
+    title: "Browse by cuisine",
+    count: "38 cuisines",
+    subtitle: "Kitchens, the plates that define them, and what they cost.",
+    scopeSwitch,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's own section title, opened up — so the page reads as that section rather than as somewhere new, which is what the *All 38 cuisines* link promised. The scope switch is a slot, not a prop set: the two scopes are two ROUTES, so the caller passes a `SegmentedNav` with real hrefs and the DS stays out of routing.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIndexHeader>;
+
+export const Default: Story = {};
+
+export const Drinks: Story = {
+  args: {
+    title: "Where to go out",
+    count: "5 kinds of night",
+    subtitle: "Bars, the glass that defines them, and what it costs.",
+  },
+};
+
+/** The strip lists only the families drawn in full — otherwise it is the index, twice. */
+export const JumpStrip: StoryObj<typeof MenuJumpStrip> = {
+  render: () => <MenuJumpStrip entries={mockIndexEntries.slice(0, 8)} ariaLabel="Jump to a cuisine" />,
+};
+
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

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

@@ -0,0 +1,125 @@
+import { cn } from "../lib/utils";
+import { ScrollFade } from "./scroll-fade";
+import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuIndexHeader — the head of a browse index.
+ *
+ * The hub's own section title, opened up: the page reads as that section rather
+ * than as a new place, which is the whole promise of the "All 38 cuisines" link
+ * that got the reader here.
+ *
+ * The scope switch is a slot rather than a prop set, because the two scopes are
+ * two ROUTES — the caller passes a `<SegmentedNav>` with real hrefs and the DS
+ * stays out of routing.
+ */
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuIndexHeaderProps = {
+  /** Small caps over the title, e.g. "MENU · CLUJ-NAPOCA". */
+  eyebrow?: string;
+  title: string;
+  /** Sits beside the title, e.g. "38 cuisines". Pluralised by the caller. */
+  count?: string;
+  subtitle?: string;
+  /** The Food / Drinks control. A `<SegmentedNav>`, composed by the caller. */
+  scopeSwitch?: React.ReactNode;
+  className?: string;
+};
+
+export function MenuIndexHeader({
+  eyebrow,
+  title,
+  count,
+  subtitle,
+  scopeSwitch,
+  className,
+}: MenuIndexHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-8", className)}>
+      <div className="min-w-0 flex-1">
+        {eyebrow && (
+          <p className="text-[11px] font-bold uppercase tracking-[0.1em] text-muted-foreground">
+            {eyebrow}
+          </p>
+        )}
+        <h1 className="mt-1.5 text-[30px] font-black leading-[1.05] tracking-[-0.035em] lg:text-[40px]">
+          {title}
+          {count && (
+            <span className="ml-2.5 align-middle text-base font-semibold text-muted-foreground lg:text-lg">
+              {count}
+            </span>
+          )}
+        </h1>
+        {subtitle && (
+          <p className="mt-2 max-w-[60ch] text-sm text-muted-foreground">{subtitle}</p>
+        )}
+      </div>
+
+      {/* Sticky under the header on the phone: the list below is several screens
+          and a reader who wants the other scope should not have to scroll back
+          up to a control they can see from anywhere else on the page. */}
+      {scopeSwitch && (
+        <div className="sticky top-0 z-10 -mx-[var(--page-gutter)] bg-background px-[var(--page-gutter)] py-2 lg:static lg:mx-0 lg:bg-transparent lg:px-0 lg:py-0">
+          {scopeSwitch}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * MenuJumpStrip — the page's contents, as chips.
+ *
+ * It answers "move between families without going back to the hub", and it
+ * doubles as a table of contents: each chip carries the family's mark and its
+ * count, so the strip says how long the page is before the reader scrolls it.
+ *
+ * Only the families drawn in full belong here. A strip listing every value in
+ * the index below would be the index, twice.
+ */
+export type MenuJumpStripProps = {
+  entries: MenuIndexEntry[];
+  formatCount?: (value: number) => string;
+  ariaLabel?: string;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuJumpStrip({
+  entries,
+  formatCount = String,
+  ariaLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuJumpStripProps) {
+  return (
+    <ScrollFade
+      orientation="horizontal"
+      size="sm"
+      className={className}
+      scrollClassName="scrollbar-hide"
+    >
+      <nav aria-label={ariaLabel} className="flex items-center gap-2">
+        {entries.map((entry) => (
+          <LinkComponent
+            key={entry.slug}
+            href={entry.href}
+            className="inline-flex h-9 shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-card px-4 text-sm transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+          >
+            <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}
+            />
+            {entry.name}
+            <span className="tabular-nums text-muted-foreground">{formatCount(entry.count)}</span>
+          </LinkComponent>
+        ))}
+      </nav>
+    </ScrollFade>
+  );
+}

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuIndexList } from "./menu-index-list";
+import { mockIndexEntries } from "./menu-mocks";
+
+const meta: Meta<typeof MenuIndexList> = {
+  title: "Menu/MenuIndexList",
+  component: MenuIndexList,
+  tags: ["autodocs"],
+  args: {
+    entries: mockIndexEntries,
+    title: `All ${mockIndexEntries.length} cuisines`,
+    subtitle: "Ordered by kitchens — every one has its own page",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The complete set, four across — and the reason the page below it can be progressive. This block carries a crawlable link to **every** destination the city has, so the richer blocks underneath are free to load ten at a time behind a *show more* without hiding anything a crawler needs. Get that backwards and the page silently stops linking to the twenty-eight it is supposed to index. Note the counts overlap: cuisines are non-exclusive tags (Cluj's thirty-eight sum to 3,182 against 767 places), so this is a ranked list of ways in, never a breakdown.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIndexList>;
+
+export const Default: Story = {};
+
+/** The long tail, which is where a layout tuned on the head of the list breaks. */
+export const Tail: Story = {
+  args: { entries: mockIndexEntries.slice(-8), title: "The tail" },
+};
+
+/** Two columns, not one: thirty-eight rows in one column is four screens. */
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};