@bearmenu/ui 0.8.9 → 0.8.11

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

@@ -0,0 +1,124 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ACTIVE_BAND = "-20% 0px -75% 0px";
+function TopRankingLegend({ groups, heading, meta, className }) {
+  const entries = groups.flatMap((group) => group.entries);
+  const [activeSlug, setActiveSlug] = useState(null);
+  useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return void 0;
+    const nodes = entries.map((entry) => document.getElementById(entry.slug)).filter((node) => Boolean(node));
+    if (nodes.length === 0) return void 0;
+    const observer = new IntersectionObserver(
+      (observed) => {
+        const inBand = observed.filter((record) => record.isIntersecting);
+        if (inBand.length === 0) return;
+        const topmost = inBand.reduce(
+          (best, record) => record.boundingClientRect.top < best.boundingClientRect.top ? record : best
+        );
+        setActiveSlug(topmost.target.id);
+      },
+      { rootMargin: ACTIVE_BAND }
+    );
+    nodes.forEach((node) => observer.observe(node));
+    return () => observer.disconnect();
+  }, [entries.map((entry) => entry.slug).join("|")]);
+  return (
+    /*
+     * The height cap is a safety net, not the navigation model.
+     *
+     * `position: sticky` on an element TALLER than the viewport leaves its
+     * bottom permanently unreachable — at twenty-five rows on a 900px laptop
+     * you could never see ranks 20–25, however you scrolled. That is broken
+     * rather than merely tight, so the column scrolls internally once it
+     * exceeds the space available.
+     *
+     * It only ever engages on a viewport too short to fit the list: `max-height`
+     * with `overflow-y-auto` is inert when the content already fits, so nothing
+     * changes on a tall screen. `overscroll-contain` stops a flick inside the
+     * column from carrying on into the article behind it.
+     */
+    /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": heading,
+        className: cn(
+          /*
+           * Sticky at BOTH widths now, with a different offset and a different
+           * shape at each.
+           *
+           * On desktop it is the grouped column, pinned beside the article. On a
+           * phone it is the flat chip rail, pinned for the same reason the column
+           * is: this page is twenty-five long entries, so a reader at rank 14 is
+           * several screens from any means of jumping, and the rail scrolled away
+           * inside the first entry.
+           *
+           * The phone offset comes from `--legend-sticky-top`, which the CALLER
+           * sets, because it is that app's chrome — the consumer app pins under a
+           * fixed header at `calc(var(--header-offset) + env(safe-area-inset-top))`,
+           * exactly as its events day rail does. Reading the app's own
+           * `--header-offset` here would resolve to nothing in Storybook and in
+           * the other three consumers, and an invalid `calc` silently kills
+           * `top`, which turns the rail from mispositioned into not-sticky.
+           */
+          "sticky top-[var(--legend-sticky-top,0px)] z-20 lg:top-4 lg:z-auto",
+          "lg:max-h-[calc(100vh-2rem)] lg:self-start lg:overflow-y-auto lg:overscroll-contain",
+          "lg:[scrollbar-width:thin]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden lg:block", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold tracking-[-0.01em]", children: heading }),
+            meta && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11.5px] text-muted-foreground", children: meta })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "scrollbar-hide -mx-[var(--page-gutter)] flex gap-2 overflow-x-auto bg-background px-[var(--page-gutter)] pb-3 pt-1 lg:hidden", children: entries.map((entry) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: `#${entry.slug}`,
+              className: "inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-card px-3.5 text-[13px] transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-bold tabular-nums text-muted-foreground", children: entry.rank }),
+                entry.name
+              ]
+            }
+          ) }, entry.slug)) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:mt-5 lg:-mx-3 lg:block", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-4 last:mb-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "px-3 pb-1.5 text-[10.5px] font-bold uppercase tracking-[0.11em] text-muted-foreground", children: group.label }),
+            /* @__PURE__ */ jsx("ul", { children: group.entries.map((entry) => {
+              const isActive = entry.slug === activeSlug;
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: `#${entry.slug}`,
+                  "aria-current": isActive ? "location" : void 0,
+                  className: cn(
+                    "flex gap-2.5 rounded-lg px-3 py-2 text-[13px] leading-snug transition-colors motion-reduce:transition-none",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    isActive ? "bg-accent-subtle font-semibold text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "w-5 shrink-0 text-right font-bold tabular-nums",
+                          isActive ? "text-accent" : "text-muted-foreground/70"
+                        ),
+                        children: entry.rank
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: entry.name })
+                  ]
+                }
+              ) }, entry.slug);
+            }) })
+          ] }, group.key)) })
+        ]
+      }
+    )
+  );
+}
+
+export { TopRankingLegend };

package/dist/components/top-types.d.ts

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { MenuItemPreview } from './menu-types.js';
+import './place-types.js';
+
+/**
+ * The editorial ranking's view model — `/top/[category]`.
+ *
+ * Separate from `menu-types.ts` on purpose. The menu surfaces describe what a
+ * city HAS; these describe an argument the product is making about it, and the
+ * shapes reflect that: an entry carries a cited quote and a dated price because
+ * a rank is a claim and the page has to show why.
+ *
+ * Same contract as everywhere else: no app schemas, no hooks, no i18n. Strings
+ * arrive through labels, destinations through `href`, numbers through injected
+ * formatters.
+ */
+
+/** One entry in the ranking. */
+type TopRankEntry = {
+    rank: number;
+    slug: string;
+    name: string;
+    /** The venue page. */
+    href: string;
+    /** Neighbourhood, e.g. "Centru". */
+    district?: string;
+    /** Pre-resolved venue photograph. */
+    coverUrl?: string;
+    /** The app's grade, already formatted — "9.4". Absent where none exists. */
+    gradeLabel?: string;
+    /** The band that grade falls in, e.g. "Exceptional". Composed by the caller. */
+    tierLabel?: string;
+    /** Third-party star rating, shown only where there is no grade. */
+    rating?: number;
+    /**
+     * The editorial line — why this one is here, in the product's own voice.
+     *
+     * Distinct from `evidence`, which is a reviewer's words. Conflating them was
+     * the old page's problem: a quote presented as editorial reads as invented,
+     * and editorial presented as a quote reads as dishonest.
+     */
+    editorial?: string;
+    /**
+     * The dishes this venue is named for, as PRODUCTION MENU ROWS.
+     *
+     * `MenuItemPreview`, so the entry renders the same `<MenuItem>` a venue's own
+     * menu and every hub surface renders. The first pass here hand-rolled a row —
+     * a bold name, a muted description, a price — which drifted from the real one
+     * immediately and meant a dish looked like a different object on this page
+     * than on every other.
+     *
+     * More than one, because a rank is a claim about a kitchen and one dish
+     * rarely carries it: the live page shows the group and two or three of its
+     * most-named plates.
+     */
+    menuItems?: MenuItemPreview[];
+    /** The group those items sit in, e.g. "Pizza". From the venue's own menu. */
+    menuGroupLabel?: string;
+    /** A reviewer's own words, and how many said it. */
+    evidence?: TopEvidence;
+};
+type TopEvidence = {
+    /**
+     * A reviewer's own words. OPTIONAL: a venue can carry a mention count with no
+     * quotable snippet behind it, and the count is evidence in its own right —
+     * dropping the whole block for want of a quote loses the number that
+     * justifies the rank.
+     */
+    quote?: string;
+    /**
+     * How many reviews back it — the figure alone, e.g. "37". Rendered as its own
+     * element beside `sourceLabel` so the number reads as a figure rather than as
+     * the first word of a sentence.
+     */
+    count?: string;
+    /** What the count is evidence OF, e.g. "reviews praise the shawarma here". */
+    sourceLabel: string;
+    /**
+     * The rest of the cited reviews, behind a disclosure.
+     *
+     * A `<details>`, not a drawer, and that is the whole point: its contents stay
+     * in the HTML, so the evidence is crawlable and readable with no JavaScript.
+     * A page whose entire argument is "here is why" cannot ship most of the why
+     * in a modal.
+     */
+    extraQuotes?: string[];
+    /** Summary text for the disclosure, e.g. "2 more reviews". Pluralised by the caller. */
+    extraLabel?: string;
+};
+/** One row of the side-by-side comparison. */
+type TopComparisonRow = {
+    rank: number;
+    name: string;
+    href: string;
+    gradeLabel?: string;
+    signature?: string;
+    priceLabel?: string;
+    /** Kitchen serving past midnight. */
+    late?: boolean;
+    terrace?: boolean;
+};
+/** A way out of the article and into the browsing tool. */
+type TopExit = {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+};
+
+export type { TopComparisonRow, TopEvidence, TopExit, TopRankEntry };

package/dist/components/top-types.js

@@ -0,0 +1 @@
+

package/dist/components/venue-grade-dimensions.d.ts

@@ -21,6 +21,8 @@ import { PlaceGradeDimensions } from './place-types.js';
  * Server-safe.
  */
 type VenueGradeDimensionKey = keyof PlaceGradeDimensions;
+/** Canonical order. Quality leads, and the three quality keys are mutually exclusive. */
+declare const DIMENSION_ORDER: VenueGradeDimensionKey[];
 type VenueGradeDimensionsProps = {
     dimensions: PlaceGradeDimensions;
     /** Dimension key → translated label. Keys with no label fall back to the key. */
@@ -33,4 +35,4 @@ type VenueGradeDimensionsProps = {
 };
 declare function VenueGradeDimensions({ dimensions, labels, order, formatScore, className, }: VenueGradeDimensionsProps): react_jsx_runtime.JSX.Element | null;
 
-export { type VenueGradeDimensionKey, VenueGradeDimensions, type VenueGradeDimensionsProps };
+export { DIMENSION_ORDER, type VenueGradeDimensionKey, VenueGradeDimensions, type VenueGradeDimensionsProps };

package/dist/components/venue-grade-dimensions.js

@@ -1,3 +1,3 @@
-export { VenueGradeDimensions } from '../chunk-AXV5O2IZ.js';
+export { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-AKQ57NXY.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/venue-quotes.d.ts

@@ -6,7 +6,7 @@ import { CitedText } from './place-types.js';
  *
  * These are `reviews_digest.highlights`: one to three short positives already
  * resolved into the request locale. They are the only place on a hub where a
- * reviewer speaks in their own register, so they are set in serif italic
+ * reviewer speaks in their own register, so they are set in quoted serif
  * against the sans everything else uses.
  *
  * `onCite` turns a quote into a button that opens the reviews behind it —

package/dist/components/venue-quotes.js

@@ -1,3 +1,3 @@
-export { VenueQuotes } from '../chunk-62ES6N32.js';
+export { VenueQuotes } from '../chunk-43RC7MHY.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/venue-wall.js

@@ -6,6 +6,8 @@ function DefaultLink(_a) {
   var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
 }
+var WALL_CELLS = 18;
+var PHONE_CELLS = 6;
 function VenueWall({
   places,
   hrefs,
@@ -28,7 +30,7 @@ function VenueWall({
       ),
       children: [
         (tileUrls == null ? void 0 : tileUrls.length) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-6", children: Array.from({ length: 18 }, (_, cell) => (
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-6", children: Array.from({ length: WALL_CELLS }, (_, cell) => (
             // eslint-disable-next-line @next/next/no-img-element
             /* @__PURE__ */ jsx(
               "img",
@@ -37,7 +39,7 @@ function VenueWall({
                 alt: "",
                 loading: "lazy",
                 decoding: "async",
-                className: "h-full w-full object-cover"
+                className: cn("h-full w-full object-cover", cell >= PHONE_CELLS && "hidden lg:block")
               },
               cell
             )
@@ -94,7 +96,7 @@ function VenueWall({
               ) }),
               /* @__PURE__ */ jsx("span", { className: "truncate text-[12.5px] font-medium", children: place.name })
             ] });
-            const chipClasses = "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/10 py-1 pl-1 pr-3.5 backdrop-blur-[6px]";
+            const chipClasses = "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/[0.14] py-1 pl-1 pr-3.5";
             return /* @__PURE__ */ jsx("li", { children: (hrefs == null ? void 0 : hrefs[place.slug]) ? /* @__PURE__ */ jsx(
               LinkComponent,
               {

package/dist/components/weekday-theme-banner.js

@@ -76,7 +76,7 @@ function WeekdayThemeBanner({
               "relative z-[1] hidden border-t border-white/15 p-4 lg:block lg:min-w-[240px] lg:border-l lg:border-t-0 lg:p-5",
               // Over a photograph the rail needs its own ground, or seven lines of
               // small type land on whatever the plate happens to be.
-              imageUrl && "bg-black/45 backdrop-blur-[2px]"
+              imageUrl && "bg-black/55"
             ),
             children: [
               weekLabel && /* @__PURE__ */ jsx("div", { className: "mb-2 text-[10px] font-bold tracking-[0.12em] opacity-70", children: weekLabel }),

package/dist/components/weekend-panel.js

@@ -1,6 +1,6 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
-import { MotionPlayPause } from '../chunk-TT3WFS6S.js';
-import '../chunk-2WDJR6K7.js';
+import { MotionPlayPause } from '../chunk-YOKHBAIH.js';
+import '../chunk-G7IFL4Z4.js';
 import { useDragSwipe } from '../chunk-IYDH5IU6.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.tsx

@@ -14,7 +14,7 @@ const badgeVariants = cva(
           "border-transparent bg-destructive text-destructive-foreground",
         outline: "text-foreground border-border",
         overlay:
-          "border-transparent bg-foreground/70 text-background backdrop-blur-sm",
+          "border-transparent bg-foreground/80 text-background",
         glass: "glass text-foreground border-border/50",
         success:
           "border-transparent bg-success text-success-foreground",

package/src/components/button.tsx

@@ -28,14 +28,14 @@ const buttonVariants = cva(
          * into a dark photo.
          *
          * Deliberately NOT theme-aware, and so deliberately different from
-         * `Badge`'s `overlay` (`bg-foreground/70 text-background`, which
+         * `Badge`'s `overlay` (`bg-foreground/80 text-background`, which
          * inverts). A photo is equally a photo in both themes — this chrome has
          * to contrast with the image beneath it, not with the app canvas, so it
          * stays dark-on-light-glyph either way. Reconcile Badge to this, not the
          * reverse, if the two are ever unified.
          */
         overlay:
-          "bg-black/40 text-white backdrop-blur-sm hover:bg-black/60 focus-visible:ring-white/70",
+          "bg-black/50 text-white hover:bg-black/65 focus-visible:ring-white/70",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:

package/src/components/concept-compare-rail.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { PhotoGround } from "./photo-ground";
+import { SnapRail, SnapRailDots } from "./snap-rail";
+
+/**
+ * ConceptCompareRail — the rooms as a rail, the card's backdrop following the
+ * active room, and the foot band that carries the page dots.
+ *
+ * On the phone the card IS the current room's photograph: the head, the rail
+ * and the foot all sit on it, and it cross-fades to the next room as the
+ * reader swipes. That needs the rail's active index, which is state — so this
+ * is the one client boundary in `ConceptCompare`. It takes only what can cross
+ * that boundary: photograph URLs, initials, and the pre-rendered rooms and
+ * foot as children. `labels`, `formatPrice` and the rest stay server-side.
+ *
+ * ## Why the backdrop lives here and not in each slide
+ *
+ * A slide carrying its own photograph is a boxed card sliding over a dark
+ * ground; the backdrop changing under a transparent slide is the reader
+ * turning to look at the next room. The second is the smoother thing, and it
+ * is also cheaper to look at — one photograph at a time instead of the edge of
+ * the next one peeking in.
+ *
+ * ## Why the foot is here too
+ *
+ * The dots need the rail's state, and on the phone they belong INSIDE the foot
+ * band's glass — under the rail they sat on a strip of bare photograph between
+ * the room's scrim and the foot's. So the foot renders here, with the dots as
+ * its first row below `lg`, and `ConceptCompare` hands it the foot's content.
+ *
+ * Desktop ignores the backdrop and the dots (`lg:hidden`); each room carries
+ * its own photograph there, side by side, and the foot is an absolute glass
+ * band over them.
+ */
+
+export type ConceptCompareBackdrop = {
+  /** The room's photograph. Absent: the ground with the venue's initial. */
+  src?: string;
+  /** The venue's first letter, for the no-photograph fallback. */
+  initial: string;
+};
+
+export type ConceptCompareRailProps = {
+  backdrops: ConceptCompareBackdrop[];
+  /** Classes for the rail itself — the desktop grid lives here. */
+  railClassName?: string;
+  /** The foot's content: the note and the action. Omit for no foot. */
+  foot?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+/**
+ * The foot band's glass — two behaviours, one element.
+ *
+ * On the phone the band sits directly under a slide whose own scrim has
+ * already reached 0.9 at its bottom edge, so the glass is SOLID from its first
+ * pixel: a fade-in here left a lighter strip at the seam where the photograph
+ * showed through between the slide's darkness and the foot's, and the two read
+ * as disconnected pieces. From `lg` the foot floats over open photography with
+ * the room text well above it, so there it fades out over its top edge on the
+ * same curve as its mask, the way the head does at its underside.
+ *
+ * Same literal as every other scrim on the card, so they read as one shadow;
+ * not `var(--scrim)`, which is the app's token and not this package's.
+ */
+const FOOT_GLASS = cn(
+  // Ink only — no backdrop-blur; see `GlassGround` for the measurement.
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
+  "before:bg-[oklch(0.16_0.012_55_/_0.9)]",
+  "lg:before:[mask-image:linear-gradient(to_top,black_60%,transparent_100%)] lg:before:bg-[linear-gradient(to_top,oklch(0.16_0.012_55_/_0.88)_0%,oklch(0.16_0.012_55_/_0.84)_60%,oklch(0.16_0.012_55_/_0.4)_85%,oklch(0.16_0.012_55_/_0)_100%)]"
+);
+
+export function ConceptCompareRail({
+  backdrops,
+  railClassName,
+  foot,
+  children,
+}: ConceptCompareRailProps) {
+  const [active, setActive] = React.useState(0);
+  const count = React.Children.count(children);
+
+  return (
+    <>
+      {/* The backdrop: every room's photograph stacked, the active one shown,
+          cross-fading on swipe. Positioned against the CARD — `ConceptCompare`
+          renders this inside its `relative isolate` frame. Desktop hides it;
+          each room carries its own photograph there. */}
+      <PhotoGround
+        className="-z-10 lg:hidden"
+        mode="stack"
+        active={active}
+        photos={backdrops.map((backdrop) => backdrop.src)}
+        initials={backdrops.map((backdrop) => backdrop.initial)}
+        overlay
+        loading="eager"
+      />
+
+      {/* `pb-0` over the rail's default `pb-0.5`: two pixels of half-inked
+          photograph between the slide's scrim and the foot's glass reads as a
+          hairline where none was drawn.
+
+          `overscroll-x-contain`, because this card is itself a slide in the
+          hub's concept carousel. Without it a swipe that reaches the last room
+          chains into the outer rail and jumps to the next concept — the reader
+          asked to see the fourth kitchen and got a different dish. */}
+      <SnapRail
+        itemWidth="full"
+        gap="sm"
+        onActiveChange={setActive}
+        className={cn("pb-0 overscroll-x-contain", railClassName)}
+      >
+        {children}
+      </SnapRail>
+
+      {foot && (
+        <div
+          className={cn(
+            "relative isolate flex flex-col gap-3 px-4 pb-4 pt-3",
+            "lg:absolute lg:inset-x-0 lg:bottom-0 lg:z-10 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6",
+            FOOT_GLASS
+          )}
+        >
+          <SnapRailDots count={count} active={active} className="lg:hidden" />
+          {foot}
+        </div>
+      )}
+    </>
+  );
+}