@bearmenu/ui 0.8.53 → 0.8.54

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.53",
-  "description": "BearMenu design system — shared UI tokens, primitives, and components",
+  "version": "0.8.54",
+  "packageManager": "pnpm@10.28.1",
+  "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -16,20 +17,226 @@
     "src"
   ],
   "exports": {
+    "./components/accordion": "./src/components/accordion.tsx",
+    "./components/action-bar": "./src/components/action-bar.tsx",
+    "./components/activity-row": "./src/components/activity-row.tsx",
+    "./components/alert": "./src/components/alert.tsx",
+    "./components/alert-dialog": "./src/components/alert-dialog.tsx",
+    "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
+    "./components/avatar": "./src/components/avatar.tsx",
+    "./components/badge": "./src/components/badge.tsx",
+    "./components/banner": "./src/components/banner.tsx",
+    "./components/booking-row": "./src/components/booking-row.tsx",
+    "./components/booking-summary-card": "./src/components/booking-summary-card.tsx",
+    "./components/breadcrumb": "./src/components/breadcrumb.tsx",
+    "./components/button": "./src/components/button.tsx",
+    "./components/button-group": "./src/components/button-group.tsx",
+    "./components/calendar": "./src/components/calendar.tsx",
+    "./components/card": "./src/components/card.tsx",
+    "./components/carousel": "./src/components/carousel.tsx",
+    "./components/category-deck": "./src/components/category-deck.tsx",
+    "./components/checkbox": "./src/components/checkbox.tsx",
+    "./components/circular-progress": "./src/components/circular-progress.tsx",
+    "./components/coach-marks": "./src/components/coach-marks.tsx",
+    "./components/collapsible": "./src/components/collapsible.tsx",
+    "./components/combobox": "./src/components/combobox.tsx",
+    "./components/command": "./src/components/command.tsx",
+    "./components/concept-card": "./src/components/concept-card.tsx",
+    "./components/concept-compare": "./src/components/concept-compare.tsx",
+    "./components/concept-compare-rail": "./src/components/concept-compare-rail.tsx",
+    "./components/concept-convergence": "./src/components/concept-convergence.tsx",
+    "./components/convergence": "./src/components/convergence.tsx",
+    "./components/coverflow": "./src/components/coverflow.tsx",
+    "./components/currency-input": "./src/components/currency-input.tsx",
+    "./components/date-input": "./src/components/date-input.tsx",
+    "./components/day-rail-chip": "./src/components/day-rail-chip.tsx",
+    "./components/description-list": "./src/components/description-list.tsx",
+    "./components/dialog": "./src/components/dialog.tsx",
+    "./components/doorway-tiles": "./src/components/doorway-tiles.tsx",
+    "./components/drawer": "./src/components/drawer.tsx",
+    "./components/drift-rail": "./src/components/drift-rail.tsx",
+    "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
+    "./components/empty-state": "./src/components/empty-state.tsx",
+    "./components/event-card": "./src/components/event-card.tsx",
+    "./components/event-compact-row": "./src/components/event-compact-row.tsx",
+    "./components/event-day-header": "./src/components/event-day-header.tsx",
+    "./components/event-day-separator": "./src/components/event-day-separator.tsx",
+    "./components/event-detail-panel": "./src/components/event-detail-panel.tsx",
+    "./components/event-hub-hero": "./src/components/event-hub-hero.tsx",
+    "./components/event-index-row": "./src/components/event-index-row.tsx",
+    "./components/event-list-row": "./src/components/event-list-row.tsx",
+    "./components/event-list-row-wide": "./src/components/event-list-row-wide.tsx",
+    "./components/event-poster-fallback": "./src/components/event-poster-fallback.tsx",
+    "./components/event-tonight-strip": "./src/components/event-tonight-strip.tsx",
+    "./components/event-types": "./src/components/event-types.ts",
+    "./components/events-empty-state": "./src/components/events-empty-state.tsx",
+    "./components/explainer-steps": "./src/components/explainer-steps.tsx",
+    "./components/facet-group": "./src/components/facet-group.tsx",
+    "./components/featured-rail-item": "./src/components/featured-rail-item.tsx",
+    "./components/field": "./src/components/field.tsx",
+    "./components/filter-category-row": "./src/components/filter-category-row.tsx",
+    "./components/form": "./src/components/form.tsx",
+    "./components/glass-ground": "./src/components/glass-ground.tsx",
+    "./components/grade-atom": "./src/components/grade-atom.tsx",
+    "./components/haptic-switch": "./src/components/haptic-switch.tsx",
+    "./components/hold-countdown": "./src/components/hold-countdown.tsx",
+    "./components/hub-surface": "./src/components/hub-surface.tsx",
+    "./components/hue-chip": "./src/components/hue-chip.tsx",
+    "./components/icon": "./src/components/icon.tsx",
+    "./components/input": "./src/components/input.tsx",
+    "./components/input-group": "./src/components/input-group.tsx",
+    "./components/input-otp": "./src/components/input-otp.tsx",
+    "./components/item": "./src/components/item.tsx",
+    "./components/kbd": "./src/components/kbd.tsx",
+    "./components/label": "./src/components/label.tsx",
+    "./components/kitchen-dossier": "./src/components/kitchen-dossier.tsx",
+    "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
+    "./components/link-button": "./src/components/link-button.tsx",
+    "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
+    "./components/menu-dead-end": "./src/components/menu-dead-end.tsx",
+    "./components/menu-family-block": "./src/components/menu-family-block.tsx",
+    "./components/menu-family-card": "./src/components/menu-family-card.tsx",
+    "./components/menu-field": "./src/components/menu-field.tsx",
+    "./components/menu-filter-chips": "./src/components/menu-filter-chips.tsx",
+    "./components/menu-group-rows": "./src/components/menu-group-rows.tsx",
+    "./components/menu-hub-hero": "./src/components/menu-hub-hero.tsx",
+    "./components/menu-index-header": "./src/components/menu-index-header.tsx",
+    "./components/menu-index-list": "./src/components/menu-index-list.tsx",
+    "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
+    "./components/menu-item": "./src/components/menu-item.tsx",
+    "./components/menu-pick-row": "./src/components/menu-pick-row.tsx",
+    "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
+    "./components/menu-mocks": "./src/components/menu-mocks.ts",
+    "./components/menu-types": "./src/components/menu-types.ts",
+    "./components/motion-icon": "./src/components/motion-icon.tsx",
+    "./components/motion-icon-actions": "./src/components/motion-icon-actions.tsx",
+    "./components/motion-icon-controls": "./src/components/motion-icon-controls.tsx",
+    "./components/motion-icon-set": "./src/components/motion-icon-set.tsx",
+    "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
+    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
+    "./components/native-select": "./src/components/native-select.tsx",
+    "./components/open-now-list": "./src/components/open-now-list.tsx",
+    "./components/pagination": "./src/components/pagination.tsx",
+    "./components/pan-zoom-viewport": "./src/components/pan-zoom-viewport.tsx",
+    "./components/party-counter": "./src/components/party-counter.tsx",
+    "./components/phone-frame": "./src/components/phone-frame.tsx",
+    "./components/photo-ground": "./src/components/photo-ground.tsx",
+    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
+    "./components/place-card": "./src/components/place-card.tsx",
+    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
+    "./components/place-schedule-week": "./src/components/place-schedule-week.tsx",
+    "./components/place-types": "./src/components/place-types.ts",
+    "./components/popover": "./src/components/popover.tsx",
+    "./components/poster-stack": "./src/components/poster-stack.tsx",
+    "./components/poster-tape": "./src/components/poster-tape.tsx",
+    "./components/poster-wall": "./src/components/poster-wall.tsx",
+    "./components/progress": "./src/components/progress.tsx",
+    "./components/qa-block": "./src/components/qa-block.tsx",
+    "./components/qr-panel": "./src/components/qr-panel.tsx",
+    "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
+    "./components/radio-group": "./src/components/radio-group.tsx",
+    "./components/reconcile-bar": "./src/components/reconcile-bar.tsx",
+    "./components/responsive-overlay": "./src/components/responsive-overlay.tsx",
+    "./components/rating": "./src/components/rating.tsx",
+    "./components/scroll-area": "./src/components/scroll-area.tsx",
+    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
+    "./components/search-bar": "./src/components/search-bar.tsx",
+    "./components/searchable-select": "./src/components/searchable-select.tsx",
+    "./components/section-header": "./src/components/section-header.tsx",
+    "./components/segmented-nav": "./src/components/segmented-nav.tsx",
+    "./components/select": "./src/components/select.tsx",
+    "./components/selection-bar": "./src/components/selection-bar.tsx",
+    "./components/separator": "./src/components/separator.tsx",
+    "./components/sheet": "./src/components/sheet.tsx",
+    "./components/signature-chip": "./src/components/signature-chip.tsx",
+    "./components/skeleton": "./src/components/skeleton.tsx",
+    "./components/skeleton-card": "./src/components/skeleton-card.tsx",
+    "./components/slider": "./src/components/slider.tsx",
+    "./components/sliding-panels": "./src/components/sliding-panels.tsx",
+    "./components/sonner": "./src/components/sonner.tsx",
+    "./components/sort-option-list": "./src/components/sort-option-list.tsx",
+    "./components/spinner": "./src/components/spinner.tsx",
+    "./components/split-share-row": "./src/components/split-share-row.tsx",
+    "./components/stat-banner": "./src/components/stat-banner.tsx",
+    "./components/stepper": "./src/components/stepper.tsx",
+    "./components/sticky-container": "./src/components/sticky-container.tsx",
+    "./components/story": "./src/components/story.tsx",
+    "./components/switch": "./src/components/switch.tsx",
+    "./components/table": "./src/components/table.tsx",
+    "./components/table-ledger-card": "./src/components/table-ledger-card.tsx",
+    "./components/table-trigger-band": "./src/components/table-trigger-band.tsx",
+    "./components/tabs": "./src/components/tabs.tsx",
+    "./components/tag": "./src/components/tag.tsx",
+    "./components/tag-group": "./src/components/tag-group.tsx",
+    "./components/text": "./src/components/text.tsx",
+    "./components/textarea": "./src/components/textarea.tsx",
+    "./components/time-slot": "./src/components/time-slot.tsx",
+    "./components/timeline-day": "./src/components/timeline-day.tsx",
+    "./components/timeline-hour": "./src/components/timeline-hour.tsx",
+    "./components/timeline-hour-puck": "./src/components/timeline-hour-puck.tsx",
+    "./components/toggle": "./src/components/toggle.tsx",
+    "./components/toggle-group": "./src/components/toggle-group.tsx",
+    "./components/tooltip": "./src/components/tooltip.tsx",
+    "./components/top-comparison": "./src/components/top-comparison.tsx",
+    "./components/top-cross-link": "./src/components/top-cross-link.tsx",
+    "./components/top-ranking-entry": "./src/components/top-ranking-entry.tsx",
+    "./components/top-ranking-hero": "./src/components/top-ranking-hero.tsx",
+    "./components/top-ranking-legend": "./src/components/top-ranking-legend.tsx",
+    "./components/top-types": "./src/components/top-types.ts",
+    "./components/use-mobile": "./src/components/use-mobile.tsx",
+    "./components/venue-events-block": "./src/components/venue-events-block.tsx",
+    "./components/venue-grade-dimensions": "./src/components/venue-grade-dimensions.tsx",
+    "./components/venue-quotes": "./src/components/venue-quotes.tsx",
+    "./components/venue-wall": "./src/components/venue-wall.tsx",
+    "./components/weekday-chip": "./src/components/weekday-chip.tsx",
+    "./components/weekday-theme-banner": "./src/components/weekday-theme-banner.tsx",
+    "./components/weekend-panel": "./src/components/weekend-panel.tsx",
     "./globals.css": "./src/globals.css",
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
-    },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
+    "./hooks/use-drag-swipe": "./src/hooks/use-drag-swipe.ts",
+    "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
+    "./hooks/use-media-query": "./src/hooks/use-media-query.ts",
+    "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
+    "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
+    "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
+    "./lib/card-hover": "./src/lib/card-hover.ts",
+    "./lib/grade": "./src/lib/grade.ts",
+    "./lib/icon-depth": "./src/lib/icon-depth.ts",
+    "./lib/icon-registry": "./src/lib/icon-registry.ts",
+    "./lib/motion": "./src/lib/motion.ts",
+    "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
+    "./lib/utils": "./src/lib/utils.ts",
+    "./components/filter-option-chip": "./src/components/filter-option-chip.tsx",
+    "./components/filter-option-group": "./src/components/filter-option-group.tsx",
+    "./components/filter-panel-footer": "./src/components/filter-panel-footer.tsx"
+  },
+  "publishConfig": {
+    "exports": {
+      "./globals.css": "./src/globals.css",
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      },
+      "./hooks/*": {
+        "types": "./dist/hooks/*.d.ts",
+        "import": "./dist/hooks/*.js"
+      },
+      "./lib/*": {
+        "types": "./dist/lib/*.d.ts",
+        "import": "./dist/lib/*.js"
+      }
     }
   },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run build"
+  },
   "peerDependencies": {
     "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
@@ -138,15 +345,5 @@
     "vaul": "^1.1.2",
     "vitest": "^4.1.5",
     "zod": "^3.25.67"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist"
   }
-}
+}

package/src/components/event-detail-panel.stories.tsx

@@ -283,6 +283,22 @@ export const Loading: Story = {
   decorators: SideSheet.decorators,
 };
 
+export const EntryAndBrowseActions: Story = {
+  args: {
+    tags: [{ label: "Party", href: "/events?tags=party" }],
+    entryDetails: {
+      label: "Entry and tickets",
+      description: "Check availability with the organizer.",
+      action: (
+        <Button asChild fullWidth>
+          <a href="https://tickets.example.com">Get tickets</a>
+        </Button>
+      ),
+    },
+  },
+  decorators: SideSheet.decorators,
+};
+
 export const Error: Story = {
   render: () => (
     <EventDetailPanelError

package/src/components/event-detail-panel.test.tsx

@@ -37,6 +37,42 @@ const event: EventPreview = {
 const base = { event, labels, formatters, dateLine: "Tuesday · 17:30" };
 
 describe("EventDetailPanel", () => {
+  it("opens entry information and exposes a separate booking link", () => {
+    render(
+      <EventDetailPanel
+        {...base}
+        entryDetails={{
+          label: "Entry and tickets",
+          description: "Book with the organizer.",
+          action: <a href="https://tickets.example.com">Get tickets</a>,
+        }}
+      />,
+    );
+    expect(
+      screen.queryByRole("link", { name: "Get tickets" }),
+    ).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Entry and tickets" }));
+    expect(screen.getByText("Book with the organizer.")).toBeVisible();
+    expect(screen.getByRole("link", { name: "Get tickets" })).toHaveAttribute(
+      "href",
+      "https://tickets.example.com",
+    );
+  });
+
+  it("gives browse tags destinations while keeping descriptive tags out of the tab order", () => {
+    render(
+      <EventDetailPanel
+        {...base}
+        tags={["Descriptive", { label: "Party", href: "/events?tags=party" }]}
+      />,
+    );
+    expect(screen.getByRole("link", { name: "Party" })).toHaveAttribute(
+      "href",
+      "/events?tags=party",
+    );
+    expect(screen.getByText("Descriptive").tagName).toBe("SPAN");
+  });
+
   it("shows the status chip for live, soon and ended, and none when upcoming", () => {
     const { rerender } = render(<EventDetailPanel {...base} />);
     expect(screen.queryByText("Now")).not.toBeInTheDocument();

package/src/components/event-detail-panel.tsx

@@ -19,6 +19,7 @@ import { cn } from "../lib/utils";
 import { GradeAtom, type GradeAtomLabels } from "./grade-atom";
 import type { PlaceGrade } from "./place-types";
 import { Button } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { EventPosterFallback } from "./event-poster-fallback";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
@@ -144,8 +145,15 @@ export type EventDetailPanelProps = {
   /** The hype tier, rendered as given (the app's own badge) in the chip row. */
   hype?: React.ReactNode;
   venue?: EventDetailVenue;
-  /** Activity tags, after status, fee and hype. */
-  tags?: string[];
+  /** Activity tags. Pass a destination to make a tag a browse action. */
+  tags?: (string | { label: string; href: string; onClick?: () => void })[];
+  /** Entry information opened by the price/free-entry control. */
+  entryDetails?: {
+    label: string;
+    description: string;
+    action?: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+  };
   /** Performer names, in the order the API gave them. */
   performers?: string[];
   /** How many performers to show before the "show all" chip. Default 5. */
@@ -197,6 +205,7 @@ export function EventDetailPanel({
   hype,
   venue,
   tags,
+  entryDetails,
   performers,
   performersPreview = 5,
   showAllPerformersLabel,
@@ -289,6 +298,8 @@ export function EventDetailPanel({
             soonLabel={soonLabel}
             hype={hype}
             tags={tags}
+            entryDetails={entryDetails}
+            linkComponent={LinkComponent}
           />
 
           {venue && (
@@ -675,7 +686,14 @@ export function EventDetailPanelSkeleton({
 
 export type EventDetailChipRowProps = Pick<
   EventDetailPanelProps,
-  "event" | "formatters" | "status" | "soonLabel" | "hype" | "tags"
+  | "event"
+  | "formatters"
+  | "status"
+  | "soonLabel"
+  | "hype"
+  | "tags"
+  | "entryDetails"
+  | "linkComponent"
 > & {
   /** Only the chip strings — a page rendering the row alone need not name the section headings. */
   labels: Pick<EventDetailPanelLabels, "free" | "liveNow" | "ended">;
@@ -683,7 +701,7 @@ export type EventDetailChipRowProps = Pick<
 };
 
 /**
- * One wrapping row, all 24px: status, fee, hype, then activity tags. Exported
+ * One wrapping row: metadata, entry information, then activity links. Exported
  * so the page renders the same row above its title — it is the panel's row,
  * not a second one.
  */
@@ -695,11 +713,25 @@ export function EventDetailChipRow({
   soonLabel,
   hype,
   tags,
+  entryDetails,
+  linkComponent: LinkComponent = DefaultLink,
   className,
 }: EventDetailChipRowProps) {
   const fee = resolveEventEntryFee(event);
+  const priceLabel =
+    fee.kind === "free"
+      ? labels.free
+      : fee.kind === "paid"
+        ? formatters.price(fee.amountRon)
+        : null;
+  const priceIcon =
+    fee.kind === "free" ? (
+      <Gift className="h-3.5 w-3.5" aria-hidden />
+    ) : (
+      <Ticket className="h-3.5 w-3.5" aria-hidden />
+    );
   return (
-    <div className={cn("flex flex-wrap gap-[7px]", className)}>
+    <div className={cn("flex flex-wrap items-center gap-[7px]", className)}>
       {status === "live" && (
         <span
           className={cn(
@@ -732,7 +764,33 @@ export function EventDetailChipRow({
           {labels.ended}
         </span>
       )}
-      {fee.kind === "free" && (
+      {priceLabel && entryDetails ? (
+        <Popover onOpenChange={entryDetails.onOpenChange}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="min-h-11 rounded-full"
+              aria-label={entryDetails.label}
+            >
+              {priceIcon}
+              {priceLabel}
+              <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            aria-label={entryDetails.label}
+            className="flex max-w-[calc(100vw-2rem)] flex-col gap-3"
+          >
+            <p className="text-sm font-semibold">{priceLabel}</p>
+            <p className="text-sm text-muted-foreground">
+              {entryDetails.description}
+            </p>
+            {entryDetails.action}
+          </PopoverContent>
+        </Popover>
+      ) : fee.kind === "free" ? (
         <span
           className={cn(
             CHIP,
@@ -742,19 +800,33 @@ export function EventDetailChipRow({
           <Gift className="h-3 w-3" aria-hidden />
           {labels.free}
         </span>
-      )}
-      {fee.kind === "paid" && (
+      ) : fee.kind === "paid" ? (
         <span className={cn(CHIP, "text-foreground")}>
           <Ticket className="h-3 w-3" aria-hidden />
           {formatters.price(fee.amountRon)}
         </span>
-      )}
+      ) : null}
       {hype}
-      {tags?.map((tag) => (
-        <span key={tag} className={CHIP}>
-          {tag}
-        </span>
-      ))}
+      {tags?.map((tag) =>
+        typeof tag === "string" ? (
+          <span key={tag} className="text-xs text-muted-foreground">
+            {tag}
+          </span>
+        ) : (
+          <Button
+            key={tag.href}
+            asChild
+            variant="outline"
+            size="sm"
+            className="min-h-11 rounded-full"
+          >
+            <LinkComponent href={tag.href} onClick={tag.onClick}>
+              {tag.label}
+              <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+            </LinkComponent>
+          </Button>
+        ),
+      )}
     </div>
   );
 }

package/src/components/menu-item.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuItemPreview } from "./menu-types";
+import { mockGradients } from "./menu-mocks";
+
+const tagliatelle: MenuItemPreview = {
+  id: "i1",
+  slug: "truffle-tagliatelle",
+  name: "Truffle Tagliatelle",
+  kind: "dish",
+  category_slug: "pasta",
+  description: "Fresh pasta, black truffle, parmesan.",
+  mentions: 17,
+  sizes_and_prices: [{ size: 320, price: 62 }],
+};
+
+const mentionLabels: MenuItemLabels = {
+  currency: "lei",
+  mentions: (count) => `Mentioned in ${count} reviews`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+
+// The label and the kind move together: "Praised in" with the thumbs-up,
+// "Mentioned in" with the quote glyph.
+const praiseLabels: MenuItemLabels = {
+  ...mentionLabels,
+  mentions: (count) => `Praised in ${count} reviews`,
+};
+
+const meta: Meta<typeof MenuItem> = {
+  title: "Menu/MenuItem",
+  component: MenuItem,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    item: tagliatelle,
+    labels: mentionLabels,
+    formatPrice: String,
+    markGradient: mockGradients.pasta,
+    onOpen: () => {},
+    onMentions: () => {},
+  },
+  argTypes: {
+    countKind: { control: "inline-radio", options: ["mentions", "praise"] },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "THE menu row. The count at the right edge is drawn with one of two glyphs, set by `countKind`. `\"mentions\"` (the default) counts every review that named the item, complaints included, and takes the quote glyph. `\"praise\"` counts only the reviews that praised it and takes a thumbs-up. A thumbs-up never sits on a count that includes complaints, so pass `\"praise\"` only when the number is praise.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuItem>;
+
+/** The default: every mention, complaints included. Quote glyph. */
+export const Mentions: Story = {};
+
+/** A praise-only count. Thumbs-up, in the same slot as the quote glyph. */
+export const Praise: Story = {
+  args: { countKind: "praise", labels: praiseLabels },
+};
+
+/** The two kinds stacked, so the glyphs can be compared in place. */
+export const CountKinds: Story = {
+  render: (args) => (
+    <div className="divide-y divide-border">
+      <MenuItem {...args} countKind="mentions" labels={mentionLabels} />
+      <MenuItem {...args} countKind="praise" labels={praiseLabels} />
+    </div>
+  ),
+};

package/src/components/menu-item.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { MenuItem, type MenuItemLabels } from "./menu-item";
+import { MentionSignal, MenuItem, type MenuItemLabels } from "./menu-item";
 import type { MenuItemPreview } from "./menu-types";
 
 const wine: MenuItemPreview = {
@@ -55,3 +55,57 @@ describe("MenuItem external rating", () => {
     expect(screen.getByRole("img", { name: "Rated 3.9 on Vivino" })).toBeTruthy();
   });
 });
+
+describe("MenuItem count glyph", () => {
+  const praiseLabels: MenuItemLabels = {
+    ...labels,
+    mentions: (count) => `Praised in ${count} reviews`,
+  };
+
+  it("draws the quote glyph when no kind is passed, so existing callers look the same", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} />);
+    const count = screen.getByLabelText("Mentioned in 4 reviews");
+    const glyph = count.querySelector("svg");
+    expect(glyph).toHaveClass("lucide-message-square-quote", "h-3.5", "w-3.5", "opacity-60");
+    expect(count.querySelector(".lucide-thumbs-up")).toBeNull();
+  });
+
+  it("draws the quote glyph for raw mentions, which can include complaints", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} countKind="mentions" />);
+    const count = screen.getByLabelText("Mentioned in 4 reviews");
+    expect(count.querySelector("svg")).toHaveClass("lucide-message-square-quote");
+    expect(count.querySelector(".lucide-thumbs-up")).toBeNull();
+  });
+
+  it("draws a thumbs-up in the quote glyph's slot when the count is praise", () => {
+    render(
+      <MenuItem
+        item={wine}
+        labels={praiseLabels}
+        formatPrice={String}
+        countKind="praise"
+        onMentions={() => {}}
+      />
+    );
+    const count = screen.getByRole("button", { name: "Praised in 4 reviews" });
+    const glyph = count.querySelector("svg");
+    expect(glyph).toHaveClass("lucide-thumbs-up", "h-3.5", "w-3.5", "opacity-60");
+    expect(glyph).toHaveAttribute("aria-hidden", "true");
+    expect(count.querySelector(".lucide-message-square-quote")).toBeNull();
+    expect(count.textContent).toBe("4");
+  });
+});
+
+describe("MentionSignal count glyph", () => {
+  it("draws the quote glyph by default and the thumbs-up only for praise", () => {
+    const { rerender } = render(<MentionSignal label="Mentioned in 9 reviews" count={9} />);
+    expect(screen.getByLabelText("Mentioned in 9 reviews").querySelector("svg")).toHaveClass(
+      "lucide-message-square-quote"
+    );
+
+    rerender(<MentionSignal label="Praised in 9 reviews" count={9} countKind="praise" />);
+    expect(screen.getByLabelText("Praised in 9 reviews").querySelector("svg")).toHaveClass(
+      "lucide-thumbs-up"
+    );
+  });
+});