@bearmenu/ui 0.8.9 → 0.8.10

package/src/components/menu-family-card.stories.tsx

@@ -1,28 +1,32 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { MenuFamilyCard } from "./menu-family-card";
-import { mockDrinkFamily, mockFamily } from "./menu-mocks";
-
-const itemLabels = {
-  currency: "lei",
-  mentions: (count: number) => `${count} mentions`,
-  signature: "SIGNATURE",
-  mentioned: "MENTIONED",
-};
-const formatPrice = (amount: number) => String(amount);
+import { mockDrinkFamily, mockFamily, mockGradients } from "./menu-mocks";
 
 const labels = {
-  venueUnit: "KITCHENS",
-  mostNamed: "Most named",
+  venueUnit: "kitchens",
   priceBand: "kitchen price band",
+  browse: "Browse Italian",
 };
 
+/** A stand-in photograph with enough variance that the frost has something to soften. */
+function photo(hue: number, label: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 30% 62%)"/><stop offset="1" stop-color="hsl(${hue} 20% 28%)"/></linearGradient></defs><rect width="320" height="240" fill="url(#g)"/><circle cx="80" cy="70" r="44" fill="hsl(${hue} 40% 80%)" opacity=".6"/><rect x="170" y="130" width="120" height="80" fill="hsl(${hue} 15% 20%)" opacity=".7"/><text x="50%" y="88%" font-family="monospace" font-size="16" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+const PHOTOS = [40, 200, 90, 300].map((h, i) => photo(h, `venue ${i + 1}`));
+
 const meta: Meta<typeof MenuFamilyCard> = {
   title: "Menu/MenuFamilyCard",
   component: MenuFamilyCard,
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="w-[300px] bg-background p-4">
+      <div className="w-[360px] bg-background p-4">
         <Story />
       </div>
     ),
@@ -31,7 +35,7 @@ const meta: Meta<typeof MenuFamilyCard> = {
     docs: {
       description: {
         component:
-          "A browsable grouping of venues — a cuisine on the dishes tab, a drink family on the drinks tab. Two halves with two jobs: the dark panel is for scanning a row of four (one number, one name, the groups the family consists of, over a mosaic of its venues), and the white half underneath answers what you would actually order, as the production `MenuItem`. Both halves count VENUES: cuisine exists only on places, so a card counting dishes cannot be built.",
+          "The hub's doorway to a family — a cuisine on the dishes tab, a drink family on the drinks tab. The same photo language as `MenuFamilyBlock` (the mosaic is the ground, wearing the family's hue; a masked frost and an ink gradient carry the type) drawn one step earlier, in a row of three, where the reader is choosing a family and not yet a venue: one number, one name, the groups the family consists of, and the `Browse` pill. It lists no venue. The count is VENUES: cuisine exists only on places, so a card counting dishes cannot be built. The whole card is one link.",
       },
     },
   },
@@ -42,12 +46,11 @@ type Story = StoryObj<typeof MenuFamilyCard>;
 
 export const Default: Story = {
   args: {
-    family: mockFamily,
+    family: { ...mockFamily, venue_photo_urls: PHOTOS },
     labels,
-    itemLabels,
-    formatPrice,
-    href: "/top/italian",
+    href: "/menu/cuisines/italian",
     hue: "oklch(0.55 0.15 40)",
+    gradient: mockGradients.pasta,
     priceBandLabel: "32–84 lei",
   },
 };
@@ -55,12 +58,11 @@ export const Default: Story = {
 /** The drinks tab. Same card, different unit and vocabulary. */
 export const DrinkFamily: Story = {
   args: {
-    family: mockDrinkFamily,
-    labels: { venueUnit: "BARS", mostNamed: "Most named", priceBand: "bar price band" },
-    itemLabels,
-    formatPrice,
-    href: "/top/baruri",
+    family: { ...mockDrinkFamily, venue_photo_urls: PHOTOS },
+    labels: { venueUnit: "bars", priceBand: "bar price band", browse: "Browse cocktails" },
+    href: "/menu/drinks/cocktail",
     hue: "oklch(0.5 0.13 240)",
+    gradient: mockGradients.cocktail,
     priceBandLabel: "18–54 lei",
   },
 };
@@ -73,30 +75,36 @@ export const Sparse: Story = {
       name: "Portuguese",
       venue_count: 1,
       chips: [{ slug: "seafood-dish", label: "seafood" }],
-      signature: mockFamily.signature,
+      venue_photo_urls: PHOTOS.slice(0, 1),
     },
-    labels,
-    itemLabels,
-    formatPrice,
-    href: "/top/restaurante",
+    labels: { ...labels, browse: "Browse Portuguese" },
+    href: "/menu/cuisines/portuguese",
     hue: "oklch(0.52 0.13 340)",
+    gradient: mockGradients.sweet,
     priceBandLabel: "42–88 lei",
   },
 };
 
-/** The row of four the card is designed to be scanned in. */
+/** No photography at all: the ground with the family's initial, and no tint. */
+export const NoPhotos: Story = {
+  args: {
+    ...Default.args,
+    family: { ...mockFamily, venue_photo_urls: [] },
+  },
+};
+
+/** The row of three the card is designed to be scanned in. */
 export const Row: Story = {
   render: () => (
-    <div className="grid grid-cols-4 gap-5">
-      {[mockFamily, mockDrinkFamily, mockFamily, mockDrinkFamily].map((family, index) => (
+    <div className="grid grid-cols-3 gap-5">
+      {[mockFamily, mockDrinkFamily, mockFamily].map((family, index) => (
         <MenuFamilyCard
           key={index}
-          family={family}
+          family={{ ...family, venue_photo_urls: PHOTOS }}
           labels={labels}
-          itemLabels={itemLabels}
-          formatPrice={formatPrice}
-          href={`/top/${family.slug}`}
+          href={`/menu/cuisines/${family.slug}`}
           hue="oklch(0.55 0.15 40)"
+          gradient={Object.values(mockGradients)[index]}
           priceBandLabel="32–84 lei"
         />
       ))}
@@ -104,7 +112,7 @@ export const Row: Story = {
   ),
   decorators: [
     (Story) => (
-      <div className="w-[1200px] bg-background p-4">
+      <div className="w-[1100px] bg-background p-4">
         <Story />
       </div>
     ),

package/src/components/menu-family-card.tsx

@@ -1,32 +1,38 @@
 import { Wallet } from "lucide-react";
 import { cn } from "../lib/utils";
-import { MenuItem, type MenuItemLabels } from "./menu-item";
+import { HueChip } from "./hue-chip";
 import type { MenuFamilyPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
 
 /**
  * MenuFamilyCard — a browsable grouping of venues: a cuisine on the dishes tab,
- * a drink family on the drinks tab.
+ * a drink family on the drinks tab. The hub's doorway to a family.
  *
- * ## The count does the scanning, the item answers the question
+ * ## A doorway, not a summary
  *
- * The card is two halves with two jobs. The dark panel is for scanning a row of
- * four: one number, one name, and the groups the family consists of, over a
- * mosaic of its venues. The white half underneath answers what you would
- * actually order — the production `<MenuItem>`, with its price, portion and
- * mention count, so the recommendation is the review census rather than an
- * editorial pick.
+ * The cuisines index's `MenuFamilyBlock` is the family's SUMMARY: photography,
+ * chips, a price band and three venues. This card is the same family drawn
+ * one step earlier, in a row of three on the hub, where the reader is choosing
+ * a family and not yet a venue — so it carries the same photography, the same
+ * chips and the same "Browse" action, and lists no venue. A venue on the hub
+ * card was tried and it was the first venue's signature relabelled as the
+ * family's most named, which was a lie at three-card width.
  *
- * ## Both halves count VENUES
+ * ## The count does the scanning
  *
- * Cuisine exists on places and nowhere else — no listing endpoint will tell you
- * how many dishes are Italian — so a card counting dishes cannot be built and
- * this one does not try. The groups line is a plain list without counts: at
- * four cards across, four chips each carrying a number turned the panel into a
- * table, and the numbers were kitchens, which nobody reads a chip as.
+ * The card is one number, one name and the groups the family consists of,
+ * over a mosaic of its venues. The count is VENUES: cuisine exists on places
+ * and nowhere else — no listing endpoint will tell you how many dishes are
+ * Italian — so a card counting dishes cannot be built and this one does not
+ * try. The chips are plain labels: at three cards across, chips carrying
+ * numbers turned the panel into a table, and the numbers were kitchens, which
+ * nobody reads a chip as.
  *
- * The mosaic holds VENUE photographs, which are real. It dims them hard — this
- * is a ground for a number, not a gallery, and at this size a legible photo
- * competes with the count for the same glance.
+ * ## One link
+ *
+ * The whole card is the link and the "Browse" pill is its visible affordance,
+ * not a second link — a pill inside a link is a nested anchor, and a pill that
+ * is the only link leaves the photography, the number and the name inert.
  */
 
 /** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
@@ -39,22 +45,24 @@ function DefaultLink({ href, ...props }: MenuFamilyCardLinkProps) {
 export type MenuFamilyCardLabels = {
   /** Unit under the count, e.g. "KITCHENS". */
   venueUnit: string;
-  /** Kicker over the featured item, e.g. "MOST NAMED". */
-  mostNamed: string;
-  /** Footer caption, e.g. "kitchen price band". */
+  /**
+   * Price-band caption, e.g. "kitchen price band". Never drawn — it names the
+   * pill for a screen reader, which would otherwise be read two numbers and a
+   * currency.
+   */
   priceBand: string;
+  /** The action pill, e.g. "Browse Italian". Sits on the photography — keep it short. */
+  browse: string;
 };
 
 export type MenuFamilyCardProps = {
   family: MenuFamilyPreview;
   labels: MenuFamilyCardLabels;
-  /** Passed through to the featured `<MenuItem>`. */
-  itemLabels: MenuItemLabels;
-  formatPrice: (amount: number) => string;
-  formatCount?: (value: number) => string;
   href: string;
-  /** Finished CSS colour for the featured item's category mark. */
+  /** Finished CSS colour for the chips. */
   hue?: string;
+  /** Finished CSS gradient — the family's colour over the mosaic. */
+  gradient?: string;
   /** Composed price band, e.g. "32–84 lei". */
   priceBandLabel?: string;
   linkComponent?: MenuLinkComponent;
@@ -65,147 +73,119 @@ export type MenuFamilyCardProps = {
  * A 2×2, not a 2×4.
  *
  * Four cells at card width give each photograph enough room to read as a room
- * rather than as a swatch, and — the reason it changed — four cells match the
- * four venues a caller actually has, so no photo repeats. At eight cells the
- * list wrapped and put the SAME image directly above itself in a column, which
- * is the one repeat a mosaic cannot hide.
+ * rather than as a swatch, and four cells match the four venues a caller
+ * actually has, so no photo repeats. At eight cells the list wrapped and put
+ * the SAME image directly above itself in a column, which is the one repeat a
+ * mosaic cannot hide.
  */
 const MOSAIC_CELLS = 4;
 
+/** The card's ground is `PhotoGround`'s, so the two cannot differ. */
+const GROUND = PHOTO_GROUND;
+
+/**
+ * The frost: absent over the top half, full at the foot, where the chips and
+ * the pill sit. The mask is what makes it a gradient of softness rather than
+ * a frosted pane — the rooms stay sharp behind the number.
+ */
+const FROST = "backdrop-blur-xl [mask-image:linear-gradient(to_bottom,transparent_28%,black_58%)]";
+
+/**
+ * The ink. The count and the name sit at opposite ends of the card, so both
+ * ends are dark — a gradient that cleared in the middle looked better empty
+ * and made the type unreadable the moment there were real photographs behind
+ * it. Literal rather than `var(--scrim)`: that token lives in the app's
+ * stylesheet, not this package's.
+ */
+const INK =
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.78)_0%,oklch(0.16_0.012_55_/_0.5)_34%,oklch(0.16_0.012_55_/_0.86)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+
 export function MenuFamilyCard({
   family,
   labels,
-  itemLabels,
-  formatPrice,
-  formatCount,
   href,
   hue,
+  gradient,
   priceBandLabel,
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuFamilyCardProps) {
   const photos = family.venue_photo_urls ?? [];
-  const groups = (family.chips ?? []).map((chip) => chip.label);
+  /* Fewer venues than cells: the mosaic repeats rather than leaving bare
+     ground, because under the tint and the ink a repeated room is a texture
+     and an empty cell is a hole. No venues at all: one cell, the initial. */
+  const tiles = photos.length
+    ? Array.from({ length: MOSAIC_CELLS }, (_, cell) => photos[cell % photos.length])
+    : [undefined];
 
   return (
-    <div
+    <LinkComponent
+      href={href}
       className={cn(
-        "flex h-full flex-col overflow-hidden rounded-[14px] border border-border bg-card",
+        "group dark relative isolate flex min-h-[280px] flex-col justify-between overflow-hidden rounded-[14px] border border-border p-3.5",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white",
+        GROUND,
         className
       )}
     >
-      <LinkComponent
-        href={href}
-        className="relative block overflow-hidden bg-[oklch(0.21_0.012_55)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-      >
-        <span aria-hidden className="absolute inset-0 grid grid-cols-2 grid-rows-2 gap-px">
-          {Array.from({ length: MOSAIC_CELLS }, (_, cell) =>
-            photos.length ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                key={cell}
-                src={photos[cell % photos.length]}
-                alt=""
-                loading="lazy"
-                decoding="async"
-                className="h-full w-full object-cover"
-              />
-            ) : (
-              <span
-                key={cell}
-                className="bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
-              />
-            )
-          )}
+      {/* ── Layer 1: the mosaic ─────────────────────────────────────────── */}
+      <PhotoGround
+        className="-z-30"
+        photos={tiles}
+        initials={family.name.charAt(0)}
+        mosaicClassName={photos.length ? "grid-cols-2 grid-rows-2" : "grid-cols-1"}
+        gradient={gradient}
+      />
+
+      {/* ── Layer 2: the frost ──────────────────────────────────────────── */}
+      <span aria-hidden className={cn("absolute inset-0 -z-20", FROST)} />
+
+      {/* ── Layer 3: the ink ────────────────────────────────────────────── */}
+      <span aria-hidden className={cn("absolute inset-0 -z-10", INK)} />
+
+      {/* ── The content, floating ───────────────────────────────────────── */}
+      <span className="block text-white">
+        <b className="block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums">
+          {family.venue_count}
+        </b>
+        <span className="mt-1 block text-[9.5px] font-bold uppercase tracking-[0.12em] opacity-80">
+          {labels.venueUnit}
         </span>
+      </span>
 
-        {/*
-          The family's colour over the photography, when the caller passes a
-          `hue`. `mix-blend-mode: color` keeps every photo's luminance and
-          replaces its chroma with the family's, so four cards of four
-          different rooms read as one cocktail-blue, one wine-red, one
-          beer-gold, one coffee-brown — the same dictionary the chips and the
-          price band already use (`markGradient`). The scrim below still owns
-          the contrast; this layer only says which family the room belongs to.
-        */}
-        {hue && (
-          <span
-            aria-hidden
-            className="absolute inset-0 opacity-90 mix-blend-color"
-            style={{ backgroundColor: hue }}
-          />
-        )}
-
-        {/*
-          The hero's scrim, not a light tint.
-          The count and the name sit at opposite ends of this panel, so both
-          ends need to be dark — a gradient that clears in the middle looked
-          better empty and made the type unreadable the moment there were real
-          photographs behind it. Dimming the images themselves was tried first
-          and is worse: it greys the photography without ever guaranteeing
-          contrast, because the guarantee has to come from a fixed layer.
-        */}
-        <span
-          aria-hidden
-          className="absolute inset-0 bg-[linear-gradient(180deg,oklch(0.16_0.012_55_/_0.9)_0%,oklch(0.16_0.012_55_/_0.62)_45%,oklch(0.16_0.012_55_/_0.94)_100%)]"
-        />
-
-        {/* Taller than the half below it: the photography is what makes a row
-            of four scannable, and it was losing the card to a text block. */}
-        <span className="relative flex min-h-[260px] flex-col justify-between p-3.5 text-white">
-          <span className="block">
-            <b className="block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums">
-              {family.venue_count}
-            </b>
-            <span className="mt-1 block text-[9.5px] font-bold tracking-[0.12em] opacity-80">
-              {labels.venueUnit}
-            </span>
-          </span>
-
-          <span className="block">
-            <span className="block text-[17px] font-bold tracking-[-0.01em]">{family.name}</span>
-            {groups.length > 0 && (
-              <span className="mt-0.5 block truncate text-[11.5px] opacity-75">
-                {groups.join(" · ")}
-              </span>
-            )}
+      <span className="block">
+        <span className="block text-balance font-serif text-[24px] font-semibold leading-tight tracking-[-0.02em] text-white">
+          {family.name}
+        </span>
 
-            {/* The band belongs up here with the other facts ABOUT the family.
-                Below, it was a third block competing with the one thing that
-                half is for — the item you might actually order. */}
+        {(priceBandLabel || (family.chips?.length ?? 0) > 0) && (
+          <span className="mt-2.5 flex flex-wrap items-center gap-1.5">
             {priceBandLabel && (
-              <span className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[11px] backdrop-blur-[2px]">
-                <Wallet className="h-3 w-3 shrink-0" aria-hidden />
-                <span className="opacity-80">{labels.priceBand}</span>
-                <b className="font-semibold tabular-nums">{priceBandLabel}</b>
-              </span>
+              /* No hue: a fact about money, not about the family. In the dark
+                 scope `HueChip`'s `--muted` fallback is the dark pill. */
+              <HueChip
+                className="font-bold tabular-nums"
+                aria-label={`${labels.priceBand}: ${priceBandLabel}`}
+                icon={<Wallet className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />}
+              >
+                {priceBandLabel}
+              </HueChip>
             )}
+            {family.chips?.map((chip) => (
+              <HueChip key={chip.slug} hue={hue}>
+                {chip.label}
+              </HueChip>
+            ))}
           </span>
-        </span>
-      </LinkComponent>
-
-      {family.signature && (
-        <div className="flex flex-1 flex-col px-2 pb-2 pt-3">
-          <span className="px-2 text-[9.5px] font-bold uppercase tracking-[0.09em] text-muted-foreground">
-            {labels.mostNamed}
-          </span>
+        )}
 
-          {/* MenuItem's own `px-4`: its colour mark is drawn at `-ml-4` and
-              needs that gutter — a tighter padding clipped it to a grey stub. */}
-          <MenuItem
-            className="min-h-0"
-            item={family.signature.item}
-            labels={itemLabels}
-            formatPrice={formatPrice}
-            formatCount={formatCount}
-            markGradient={hue}
-            subtitle={family.signature.why}
-            href={family.signature.href ?? href}
-            linkComponent={LinkComponent}
-          />
-
-        </div>
-      )}
-    </div>
+        {/* The action, as a frosted pill on the photography — the block's
+            pill, so the two cards read as one family. A `span`, because the
+            card is already the link. */}
+        <span className="mt-3.5 inline-flex h-10 items-center rounded-full border border-white/20 bg-white/[0.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md transition-colors group-hover:bg-white/20 motion-reduce:transition-none">
+          {labels.browse}
+        </span>
+      </span>
+    </LinkComponent>
   );
 }

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

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Clock, Leaf, MapPin, Moon, Sun, Wallet } from "lucide-react";
+import { MenuFilterChips, MenuFilterSummary } from "./menu-filter-chips";
+import { mockFilterChips } from "./menu-mocks";
+
+const icons: Record<string, React.ReactNode> = {
+  open: <Clock className="h-3 w-3" />,
+  price: <Wallet className="h-3 w-3" />,
+  terrace: <Sun className="h-3 w-3" />,
+  veg: <Leaf className="h-3 w-3" />,
+  late: <Moon className="h-3 w-3" />,
+  centru: <MapPin className="h-3 w-3" />,
+};
+
+const chips = mockFilterChips.map((chip) => ({ ...chip, icon: icons[chip.key] }));
+
+const meta: Meta<typeof MenuFilterChips> = {
+  title: "Menu/MenuFilterChips",
+  component: MenuFilterChips,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Every chip counts KITCHENS, whatever facet is behind it — a dietary chip reads *has a vegetarian dish* and counts venues, not dishes. The unit is stated once at the head of the row and never again; the earlier version mixed venue counts and item counts and you could not tell what a number meant without re-reading the label that produced it. One line in every state: the chips scroll under a `ScrollFade`, and *More filters* is pinned opposite the unit label rather than wrapping.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFilterChips>;
+
+function Interactive({ initial }: { initial: typeof chips }) {
+  const [state, setState] = useState(initial);
+  const active = state.filter((chip) => chip.active).length;
+
+  return (
+    <>
+      <MenuFilterChips
+        chips={state}
+        unitLabel="KITCHENS · 247"
+        moreLabel="More filters"
+        onMore={() => {}}
+        ariaLabel="Filter kitchens"
+        onToggle={(key) =>
+          setState((chips) =>
+            chips.map((chip) => (chip.key === key ? { ...chip, active: !chip.active } : chip))
+          )
+        }
+      />
+      {active > 0 && (
+        <MenuFilterSummary
+          summary={
+            <>
+              {active} filters · <b>34 of 247 kitchens</b> match
+            </>
+          }
+          clearLabel="Clear all"
+          onClear={() => setState((chips) => chips.map((c) => ({ ...c, active: false })))}
+        />
+      )}
+    </>
+  );
+}
+
+export const Default: Story = { render: () => <Interactive initial={chips} /> };
+
+/**
+ * A chip that has gone empty.
+ *
+ * The facets endpoint omits values that would match nothing, so this state
+ * cannot arrive from the API — a chip only becomes `empty` client-side, after
+ * it was offered and the reader's next filter emptied it. It stays TAPPABLE:
+ * pressing it swaps it in and drops whichever active filter conflicts. Disabling
+ * it would refuse the reader the thing they asked for and give no reason.
+ */
+export const Dead: Story = {
+  render: () => (
+    <MenuFilterChips
+      chips={chips.map((chip) =>
+        chip.key === "late" ? { ...chip, count: 0, empty: true } : chip
+      )}
+      unitLabel="KITCHENS · 247"
+      onToggle={() => {}}
+    />
+  ),
+};
+
+export const Mobile: Story = {
+  render: () => <Interactive initial={chips} />,
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};