@bearmenu/ui 0.8.53 → 0.8.55

package/dist/{chunk-4WW3HPIW.js → chunk-CBBECMBD.js}

@@ -2,7 +2,7 @@ import { SignatureChip } from './chunk-6PQINSAA.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';
-import { Star, MessageSquareQuote } from 'lucide-react';
+import { Star, ThumbsUp, MessageSquareQuote } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -13,10 +13,12 @@ function MentionSignal({
   label,
   count,
   onMentions,
-  formatCount = String
+  formatCount = String,
+  countKind = "mentions"
 }) {
+  const Glyph = countKind === "praise" ? ThumbsUp : MessageSquareQuote;
   const content = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx(MessageSquareQuote, { className: "h-3.5 w-3.5 opacity-60", "aria-hidden": true }),
+    /* @__PURE__ */ jsx(Glyph, { className: "h-3.5 w-3.5 opacity-60", "aria-hidden": true }),
     /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatCount(count) })
   ] });
   const shared = cn(
@@ -75,6 +77,8 @@ var MenuItem = memo(function MenuItem2({
   signatureTier = "strong",
   onSignatureEvidence,
   onMentions,
+  countKind = "mentions",
+  emphasis = "price",
   externalRating,
   formatRating = (score) => score.toFixed(1),
   markGradient,
@@ -203,7 +207,16 @@ var MenuItem = memo(function MenuItem2({
           (minPrice != null || hasQuantity || mentionCount > 0 || ratingText != null) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-baseline justify-between gap-x-2 gap-y-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-x-2", children: [
               minPrice != null && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold tabular-nums text-foreground", children: isPriceRange ? `${formatPrice(minPrice)}\u2013${formatPrice(maxPrice)}` : formatPrice(minPrice) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "tabular-nums",
+                      emphasis === "praise" ? "text-[13px] font-medium text-muted-foreground" : "text-[15px] font-bold text-foreground"
+                    ),
+                    children: isPriceRange ? `${formatPrice(minPrice)}\u2013${formatPrice(maxPrice)}` : formatPrice(minPrice)
+                  }
+                ),
                 /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: labels.currency })
               ] }),
               hasQuantity && /* @__PURE__ */ jsxs("span", { className: "text-[12px] tabular-nums text-muted-foreground", children: [
@@ -225,7 +238,8 @@ var MenuItem = memo(function MenuItem2({
                   label: labels.mentions(mentionCount),
                   count: mentionCount,
                   onMentions,
-                  formatCount
+                  formatCount,
+                  countKind
                 }
               )
             ] })

package/dist/{chunk-2ADCZXZJ.js → chunk-RXXD3UYP.js}

@@ -19,7 +19,9 @@ var PopoverContent = React.forwardRef((_a, ref) => {
       sideOffset,
       collisionPadding,
       className: cn(
-        "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+        // Drawers and sheets use layer 1000. A body-portalled popover must
+        // clear that layer or its visible actions cannot receive a pointer.
+        "z-[1010] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
         "max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className

package/dist/components/combobox.js

@@ -1,4 +1,4 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-RXXD3UYP.js';
 import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
 import { Button } from '../chunk-GHKTVHQG.js';

package/dist/components/event-detail-panel.d.ts

@@ -111,8 +111,19 @@ 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. */
@@ -137,7 +148,7 @@ type EventDetailPanelProps = {
     /** Rendered instead of the poster when it's absent. Defaults to `<EventPosterFallback />`. */
     fallback?: React.ReactNode;
 };
-declare function EventDetailPanel({ event, labels, formatters, dateLine, dateTime, status, soonLabel, hype, venue, tags, performers, performersPreview, showAllPerformersLabel, headerActions, footer, externalLink, heroHeight, size, linkComponent: LinkComponent, className, fallback, }: EventDetailPanelProps): react_jsx_runtime.JSX.Element;
+declare function EventDetailPanel({ event, labels, formatters, dateLine, dateTime, status, soonLabel, hype, venue, tags, entryDetails, performers, performersPreview, showAllPerformersLabel, headerActions, footer, externalLink, heroHeight, size, linkComponent: LinkComponent, className, fallback, }: EventDetailPanelProps): react_jsx_runtime.JSX.Element;
 type EventDetailFooterProps = {
     /**
      * The one primary action — a `Button` (reserve, tickets, directions when
@@ -205,17 +216,17 @@ type EventDetailPanelSkeletonProps = {
 };
 /** Mirrors `<EventDetailPanel>`'s geometry: capped hero, two title lines, when-line, chips, venue card, line-up, about, ghost row and primary. */
 declare function EventDetailPanelSkeleton({ size, heroHeight, headerActions, label, className, }: EventDetailPanelSkeletonProps): react_jsx_runtime.JSX.Element;
-type EventDetailChipRowProps = Pick<EventDetailPanelProps, "event" | "formatters" | "status" | "soonLabel" | "hype" | "tags"> & {
+type EventDetailChipRowProps = Pick<EventDetailPanelProps, "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">;
     className?: string;
 };
 /**
- * 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.
  */
-declare function EventDetailChipRow({ event, labels, formatters, status, soonLabel, hype, tags, className, }: EventDetailChipRowProps): react_jsx_runtime.JSX.Element;
+declare function EventDetailChipRow({ event, labels, formatters, status, soonLabel, hype, tags, entryDetails, linkComponent: LinkComponent, className, }: EventDetailChipRowProps): react_jsx_runtime.JSX.Element;
 type EventDetailVenueCardProps = {
     venue: EventDetailVenue;
     labels: Pick<EventDetailPanelLabels, "venueNoPage" | "grade">;

package/dist/components/event-detail-panel.js

@@ -4,13 +4,14 @@ import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-RXXD3UYP.js';
 import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues, __objRest } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
-import { Calendar, User, CalendarX, Unplug, RefreshCw, Timer, Gift, Ticket, MapPin, Star, ChevronRight } from 'lucide-react';
+import { Calendar, User, CalendarX, Unplug, RefreshCw, Gift, Ticket, Timer, ChevronRight, MapPin, Star } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -34,6 +35,7 @@ function EventDetailPanel({
   hype,
   venue,
   tags,
+  entryDetails,
   performers,
   performersPreview = 5,
   showAllPerformersLabel,
@@ -122,7 +124,9 @@ function EventDetailPanel({
                 status,
                 soonLabel,
                 hype,
-                tags
+                tags,
+                entryDetails,
+                linkComponent: LinkComponent
               }
             ),
             venue && /* @__PURE__ */ jsxs("div", { children: [
@@ -396,10 +400,14 @@ function EventDetailChipRow({
   soonLabel,
   hype,
   tags,
+  entryDetails,
+  linkComponent: LinkComponent = DefaultLink,
   className
 }) {
   const fee = resolveEventEntryFee(event);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-[7px]", className), children: [
+  const priceLabel = fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : null;
+  const priceIcon = fee.kind === "free" ? /* @__PURE__ */ jsx(Gift, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(Ticket, { className: "h-3.5 w-3.5", "aria-hidden": true });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-[7px]", className), children: [
     status === "live" && /* @__PURE__ */ jsxs(
       "span",
       {
@@ -436,7 +444,35 @@ function EventDetailChipRow({
         children: labels.ended
       }
     ),
-    fee.kind === "free" && /* @__PURE__ */ jsxs(
+    priceLabel && entryDetails ? /* @__PURE__ */ jsxs(Popover, { onOpenChange: entryDetails.onOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "min-h-11 rounded-full",
+          "aria-label": entryDetails.label,
+          children: [
+            priceIcon,
+            priceLabel,
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          align: "start",
+          "aria-label": entryDetails.label,
+          className: "flex max-w-[calc(100vw-2rem)] flex-col gap-3",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: priceLabel }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: entryDetails.description }),
+            entryDetails.action
+          ]
+        }
+      )
+    ] }) : fee.kind === "free" ? /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
@@ -448,13 +484,27 @@ function EventDetailChipRow({
           labels.free
         ]
       }
-    ),
-    fee.kind === "paid" && /* @__PURE__ */ jsxs("span", { className: cn(CHIP, "text-foreground"), children: [
+    ) : fee.kind === "paid" ? /* @__PURE__ */ jsxs("span", { className: cn(CHIP, "text-foreground"), children: [
       /* @__PURE__ */ jsx(Ticket, { className: "h-3 w-3", "aria-hidden": true }),
       formatters.price(fee.amountRon)
-    ] }),
+    ] }) : null,
     hype,
-    tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx("span", { className: CHIP, children: tag }, tag))
+    tags == null ? void 0 : tags.map(
+      (tag) => typeof tag === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: tag }, tag) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          asChild: true,
+          variant: "outline",
+          size: "sm",
+          className: "min-h-11 rounded-full",
+          children: /* @__PURE__ */ jsxs(LinkComponent, { href: tag.href, onClick: tag.onClick, children: [
+            tag.label,
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true })
+          ] })
+        },
+        tag.href
+      )
+    )
   ] });
 }
 function EventDetailVenueCard({

package/dist/components/menu-item.d.ts

@@ -64,6 +64,18 @@ type MenuItemLabels = {
      */
     externalRating?: (score: string) => string;
 };
+/**
+ * What the count beside the row counts.
+ *
+ * - `"mentions"`: every review that named the item, complaints included. Drawn
+ *   with the quote glyph.
+ * - `"praise"`: only the reviews that praised it. Drawn with a thumbs-up.
+ *
+ * The caller decides, because only the caller knows which number it passed in
+ * `item.mentions`. A thumbs-up must never sit on a count that includes
+ * complaints, so `"mentions"` is the default.
+ */
+type MenuItemCountKind = "praise" | "mentions";
 type MenuItemProps = {
     item: MenuItemPreview;
     labels: MenuItemLabels;
@@ -85,6 +97,20 @@ type MenuItemProps = {
     onSignatureEvidence?: () => void;
     /** Opens the reviews behind the mention count. */
     onMentions?: () => void;
+    /**
+     * Whether the count is praise or every mention. Sets the glyph before the
+     * numeral: a thumbs-up for `"praise"`, the quote glyph for `"mentions"`.
+     * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
+     */
+    countKind?: MenuItemCountKind;
+    /**
+     * What the meta row leads with. `"price"` (default): the price is bold, the
+     * count's peer at the other end. `"praise"`: on surfaces where reviews'
+     * praise is the point (the map's lists), the price steps down to secondary
+     * text, a fact to check rather than the row's headline, and the praise count
+     * keeps the bold accent.
+     */
+    emphasis?: "price" | "praise";
     /**
      * An outside aggregate score for the item (a wine's Vivino rating, a beer's
      * Untappd one), shown as a star and the score beside the mention count.
@@ -128,17 +154,20 @@ type MenuItemProps = {
     className?: string;
 };
 /**
- * The mention count: a filled quote glyph and the numeral, pinned right.
+ * The mention count: a glyph and the numeral, pinned right. The glyph is the
+ * quote glyph for every mention, or a thumbs-up when the count is praise only
+ * (see `MenuItemCountKind`).
  *
  * Deliberately NOT a badge — a chip would add a filled shape to a row that has
  * none, and would read as a status label the venue was given rather than a
  * count drawn from the same reviews.
  */
-declare function MentionSignal({ label, count, onMentions, formatCount, }: {
+declare function MentionSignal({ label, count, onMentions, formatCount, countKind, }: {
     label: string;
     count: number;
     onMentions?: () => void;
     formatCount?: (value: number) => string;
+    countKind?: MenuItemCountKind;
 }): react_jsx_runtime.JSX.Element;
 /**
  * An external aggregate score: a star and the numeral, in the neutral muted
@@ -152,4 +181,4 @@ declare function ExternalRatingSignal({ label, value }: {
 }): react_jsx_runtime.JSX.Element;
 declare const MenuItem: React.NamedExoticComponent<MenuItemProps>;
 
-export { ExternalRatingSignal, MentionSignal, MenuItem, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };
+export { ExternalRatingSignal, MentionSignal, MenuItem, type MenuItemCountKind, type MenuItemLabels, type MenuItemLinkProps, type MenuItemProps };

package/dist/components/menu-item.js

@@ -1,4 +1,4 @@
-export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-4WW3HPIW.js';
+export { ExternalRatingSignal, MentionSignal, MenuItem } from '../chunk-CBBECMBD.js';
 import '../chunk-6PQINSAA.js';
 import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/multi-select-combobox.js

@@ -1,5 +1,5 @@
 import { Checkbox } from '../chunk-L3CDXVEP.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-RXXD3UYP.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
 import { Button } from '../chunk-GHKTVHQG.js';

package/dist/components/popover.js

@@ -1,3 +1,3 @@
-export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-2ADCZXZJ.js';
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-RXXD3UYP.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/searchable-select.js

@@ -1,4 +1,4 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-RXXD3UYP.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
 import { Button } from '../chunk-GHKTVHQG.js';

package/dist/components/tabs.js

@@ -93,7 +93,9 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
             transition: archetype.indicatorMorph,
             className: cn(
               "absolute inset-0 -z-0 motion-reduce:hidden",
-              variant === "pill" && "rounded-xl bg-background shadow-sm",
+              // Dark: `bg-background` is darker than the `bg-muted` track, so the
+              // selection read as a hole; it lifts to the raised surface instead.
+              variant === "pill" && "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
               variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
               variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
             )
@@ -105,7 +107,9 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
             "aria-hidden": true,
             className: cn(
               "absolute inset-0 -z-0 hidden motion-reduce:block",
-              variant === "pill" && "rounded-xl bg-background shadow-sm",
+              // Dark: `bg-background` is darker than the `bg-muted` track, so the
+              // selection read as a hole; it lifts to the raised surface instead.
+              variant === "pill" && "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
               variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
               variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
             )

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

@@ -1,4 +1,4 @@
-import { MenuItem } from '../chunk-4WW3HPIW.js';
+import { MenuItem } from '../chunk-CBBECMBD.js';
 import '../chunk-6PQINSAA.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

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.55",
+  "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,79 @@ 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"
+    );
+  });
+});
+
+// Where reviews' praise is the point (the map's lists), the price is a fact a
+// person checks, not the row's headline: it steps down to secondary text and
+// the praise count keeps the bold accent (HIG review, 2026-11-08).
+describe("MenuItem emphasis", () => {
+  it("keeps the price bold by default", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} onOpen={() => {}} />);
+    const price = screen.getByText("169");
+    expect(price.className).toContain("font-bold");
+    expect(price.className).toContain("text-foreground");
+  });
+
+  it("sets the price as secondary text when praise leads", () => {
+    render(
+      <MenuItem item={wine} labels={labels} formatPrice={String} emphasis="praise" onOpen={() => {}} />
+    );
+    const price = screen.getByText("169");
+    expect(price.className).not.toContain("font-bold");
+    expect(price.className).toContain("text-muted-foreground");
+    expect(price.className).toContain("text-[13px]");
+  });
+});

package/src/components/menu-item.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { MessageSquareQuote, Star } from "lucide-react";
+import { MessageSquareQuote, Star, ThumbsUp } from "lucide-react";
 import { cn } from "../lib/utils";
 import { SignatureChip } from "./signature-chip";
 import type { MenuItemPreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
@@ -71,6 +71,19 @@ export type MenuItemLabels = {
   externalRating?: (score: string) => string;
 };
 
+/**
+ * What the count beside the row counts.
+ *
+ * - `"mentions"`: every review that named the item, complaints included. Drawn
+ *   with the quote glyph.
+ * - `"praise"`: only the reviews that praised it. Drawn with a thumbs-up.
+ *
+ * The caller decides, because only the caller knows which number it passed in
+ * `item.mentions`. A thumbs-up must never sit on a count that includes
+ * complaints, so `"mentions"` is the default.
+ */
+export type MenuItemCountKind = "praise" | "mentions";
+
 export type MenuItemProps = {
   item: MenuItemPreview;
   labels: MenuItemLabels;
@@ -92,6 +105,20 @@ export type MenuItemProps = {
   onSignatureEvidence?: () => void;
   /** Opens the reviews behind the mention count. */
   onMentions?: () => void;
+  /**
+   * Whether the count is praise or every mention. Sets the glyph before the
+   * numeral: a thumbs-up for `"praise"`, the quote glyph for `"mentions"`.
+   * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
+   */
+  countKind?: MenuItemCountKind;
+  /**
+   * What the meta row leads with. `"price"` (default): the price is bold, the
+   * count's peer at the other end. `"praise"`: on surfaces where reviews'
+   * praise is the point (the map's lists), the price steps down to secondary
+   * text, a fact to check rather than the row's headline, and the praise count
+   * keeps the bold accent.
+   */
+  emphasis?: "price" | "praise";
   /**
    * An outside aggregate score for the item (a wine's Vivino rating, a beer's
    * Untappd one), shown as a star and the score beside the mention count.
@@ -136,7 +163,9 @@ export type MenuItemProps = {
 };
 
 /**
- * The mention count: a filled quote glyph and the numeral, pinned right.
+ * The mention count: a glyph and the numeral, pinned right. The glyph is the
+ * quote glyph for every mention, or a thumbs-up when the count is praise only
+ * (see `MenuItemCountKind`).
  *
  * Deliberately NOT a badge — a chip would add a filled shape to a row that has
  * none, and would read as a status label the venue was given rather than a
@@ -147,18 +176,22 @@ export function MentionSignal({
   count,
   onMentions,
   formatCount = String,
+  countKind = "mentions",
 }: {
   label: string;
   count: number;
   onMentions?: () => void;
   formatCount?: (value: number) => string;
+  countKind?: MenuItemCountKind;
 }) {
   /* The glyph and the numeral have to read as ONE object: `gap-0.5` instead of
      4, and the glyph lighter and a step smaller than the numeral so it reads as
-     a prefix mark qualifying the value rather than a peer competing with it. */
+     a prefix mark qualifying the value rather than a peer competing with it.
+     Both glyphs take the same slot, so switching the kind moves nothing. */
+  const Glyph = countKind === "praise" ? ThumbsUp : MessageSquareQuote;
   const content = (
     <span className="inline-flex items-center gap-0.5">
-      <MessageSquareQuote className="h-3.5 w-3.5 opacity-60" aria-hidden />
+      <Glyph className="h-3.5 w-3.5 opacity-60" aria-hidden />
       <span className="tabular-nums">{formatCount(count)}</span>
     </span>
   );
@@ -233,6 +266,8 @@ export const MenuItem = memo(function MenuItem({
   signatureTier = "strong",
   onSignatureEvidence,
   onMentions,
+  countKind = "mentions",
+  emphasis = "price",
   externalRating,
   formatRating = (score) => score.toFixed(1),
   markGradient,
@@ -422,7 +457,14 @@ export const MenuItem = memo(function MenuItem({
             <div className="flex min-w-0 items-baseline gap-x-2">
               {minPrice != null && (
                 <span className="flex items-baseline gap-1">
-                  <span className="text-[15px] font-bold tabular-nums text-foreground">
+                  <span
+                    className={cn(
+                      "tabular-nums",
+                      emphasis === "praise"
+                        ? "text-[13px] font-medium text-muted-foreground"
+                        : "text-[15px] font-bold text-foreground"
+                    )}
+                  >
                     {isPriceRange
                       ? `${formatPrice(minPrice)}–${formatPrice(maxPrice!)}`
                       : formatPrice(minPrice)}
@@ -455,6 +497,7 @@ export const MenuItem = memo(function MenuItem({
                     count={mentionCount}
                     onMentions={onMentions}
                     formatCount={formatCount}
+                    countKind={countKind}
                   />
                 )}
               </div>

package/src/components/popover.tsx

@@ -27,7 +27,9 @@ const PopoverContent = React.forwardRef<
       // than escape.
       collisionPadding={collisionPadding}
       className={cn(
-        "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+        // Drawers and sheets use layer 1000. A body-portalled popover must
+        // clear that layer or its visible actions cannot receive a pointer.
+        "z-[1010] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
         "max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className

package/src/components/tabs.test.tsx

@@ -169,3 +169,17 @@ describe("Tabs", () => {
     expect(screen.getByText("Panel A")).toBeInTheDocument();
   });
 });
+
+// In dark mode `bg-background` is darker than the pill track (`bg-muted`), so
+// the selected segment read as a hole; it lifts to the raised surface there.
+describe("pill indicator in dark mode", () => {
+  it("raises the selected segment above the track", () => {
+    const { container } = render(<Triplet />);
+    const indicators = container.querySelectorAll('[role="tab"][data-state="active"] > span[aria-hidden]');
+    expect(indicators.length).toBeGreaterThan(0);
+    indicators.forEach((indicator) => {
+      expect(indicator.className).toContain("dark:bg-surface-2");
+      expect(indicator.className).toContain("dark:ring-1");
+    });
+  });
+});

package/src/components/tabs.tsx

@@ -153,7 +153,10 @@ const TabsTrigger = React.forwardRef<
           transition={archetype.indicatorMorph}
           className={cn(
             "absolute inset-0 -z-0 motion-reduce:hidden",
-            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            // Dark: `bg-background` is darker than the `bg-muted` track, so the
+            // selection read as a hole; it lifts to the raised surface instead.
+            variant === "pill" &&
+              "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
             variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
             variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
           )}
@@ -165,7 +168,10 @@ const TabsTrigger = React.forwardRef<
           aria-hidden
           className={cn(
             "absolute inset-0 -z-0 hidden motion-reduce:block",
-            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            // Dark: `bg-background` is darker than the `bg-muted` track, so the
+            // selection read as a hole; it lifts to the raised surface instead.
+            variant === "pill" &&
+              "rounded-xl bg-background shadow-sm dark:bg-surface-2 dark:ring-1 dark:ring-border",
             variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
             variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
           )}