@bearmenu/ui 0.8.16 → 0.8.18

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

@@ -99,6 +99,13 @@ export type MenuFamilyBlockProps = {
   hue?: string;
   /** Finished CSS gradient — the family's colour over the mosaic. */
   gradient?: string;
+  /**
+   * `wide` (default): the phone card below `lg`, the two-column card — photo
+   * third, rows beside it — from `lg`. `compact`: the phone card at every
+   * width, for a rail on a desktop page where the two-column card is too much
+   * to scan across (the browse page's concept rail).
+   */
+  variant?: "wide" | "compact";
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -108,17 +115,20 @@ const GROUND = PHOTO_GROUND;
 
 /**
  * The ink. Nearly absent at the top, heavier at the foot on the phone — the
- * top 40% is the photograph, the rows sit on 0.92+; a to-right ramp from
- * `lg`, where the row column brings its own opaque paper anyway. It is the
- * layer the contrast rests on. Literal rather than `var(--scrim)`: that token
- * lives in the app's stylesheet, not this package's, so a DS component reading
- * it renders nothing in Storybook and the other three consumers.
+ * top 40% is the photograph, the rows sit on 0.92+. It is the layer the
+ * contrast rests on. Literal rather than `var(--scrim)`: that token lives in
+ * the app's stylesheet, not this package's, so a DS component reading it
+ * renders nothing in Storybook and the other three consumers.
  */
-const INK =
-  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
-
-/** The row column's paper from `lg`: the card's dark, opaque. */
-const PAPER = "lg:bg-[oklch(0.21_0.012_55)]";
+const INK_PHONE =
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+/**
+ * From `lg` the ramp runs to the right: clear over the photo third, dark
+ * under the rows — the rows sit on the ink itself, no opaque paper, so the
+ * photograph still reads through the ramp's shoulder.
+ */
+const INK_WIDE =
+  "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.32)_0%,oklch(0.16_0.012_55_/_0.62)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 
 /**
  * A second, LOCAL scrim under the name, count and action — the photo column's
@@ -144,9 +154,11 @@ export function MenuFamilyBlock({
   formatCount = String,
   hue,
   gradient,
+  variant = "wide",
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuFamilyBlockProps) {
+  const wide = variant === "wide";
   const [photo] = family.photoUrls ?? [];
   // "+N more" counts past the rows shown, which are the venues the reader can
   // see — the photograph is one of them, not a venue on its own.
@@ -161,7 +173,9 @@ export function MenuFamilyBlock({
       className={cn(
         /* `isolate` confines the blend and the backdrop-filter to this card.
            `dark` scopes every token inside to its dark-theme value. */
-        "dark relative isolate overflow-hidden rounded-[14px] text-foreground",
+        /* A flex column, so a `h-full` card in a rail fills its row: siblings
+           with two rows and with three end on the same baseline. */
+        "dark relative isolate flex flex-col overflow-hidden rounded-[14px] text-foreground",
         GROUND,
         className
       )}
@@ -171,21 +185,32 @@ export function MenuFamilyBlock({
       <PhotoGround photos={[photo]} initials={initial} mode="stack" gradient={gradient} />
 
       {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
-      <span aria-hidden className={cn("absolute inset-0", INK)} />
+      <span aria-hidden className={cn("absolute inset-0", INK_PHONE, wide && INK_WIDE)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
-      <div className="relative grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+      <div
+        className={cn(
+          "relative grid flex-1 grid-cols-1 grid-rows-[auto_1fr]",
+          wide && "lg:grid-cols-[34%_1fr] lg:grid-rows-1"
+        )}
+      >
         {/* The photo column. On the phone it is the card's head, with the
             overflow pill pinned to the corner and the photograph clear above
             the name; on desktop the left third, its stack anchored to the foot. */}
         <div
           className={cn(
-            "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5",
+            "relative flex min-h-[220px] flex-col justify-end p-3.5",
+            wide && "lg:min-h-[320px] lg:p-5",
             TEXT_SCRIM
           )}
         >
           {pill && (
-            <span className="absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:static lg:mb-3 lg:self-start">
+            <span
+              className={cn(
+                "absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white",
+                wide && "lg:static lg:mb-3 lg:self-start"
+              )}
+            >
               {pill}
             </span>
           )}
@@ -195,7 +220,12 @@ export function MenuFamilyBlock({
               {family.kicker}
             </span>
           )}
-          <h3 className="text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]">
+          <h3
+            className={cn(
+              "text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white",
+              wide && "lg:text-[30px]"
+            )}
+          >
             {family.name}
           </h3>
           {/* The count, the facts and the band on one line: a few facts about
@@ -230,7 +260,7 @@ export function MenuFamilyBlock({
             aria-label={labels.browse}
             className={cn(buttonVariants({ variant: "ink", size: "pill" }), "mt-3.5 w-max max-w-full")}
           >
-            {labels.browseShort ? (
+            {labels.browseShort && wide ? (
               <>
                 <span className="lg:hidden">{labels.browse}</span>
                 <span className="hidden lg:inline">{labels.browseShort}</span>
@@ -241,10 +271,10 @@ export function MenuFamilyBlock({
           </LinkComponent>
         </div>
 
-        {/* The row column: chips, then the rows, on paper from `lg`. */}
-        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", PAPER)}>
+        {/* The row column: chips, then the rows, on the ink's dark shoulder. */}
+        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5", wide && "lg:p-5")}>
           {family.chips && family.chips.length > 0 && (
-            <ul className="flex flex-wrap items-center gap-1.5 lg:justify-end">
+            <ul className={cn("flex flex-wrap items-center gap-1.5", wide && "lg:justify-end")}>
               {family.chips.map((chip) => (
                 /* Label only. The counts are VENUES beside a dish group's name,
                    which every reader takes for dishes. */
@@ -261,6 +291,9 @@ export function MenuFamilyBlock({
               <MenuKitchenList
                 kitchens={venues}
                 labels={labels.kitchens}
+                /* A half-width column: the dish goes under the venue, not
+                   beside it. The compact card is the phone row throughout. */
+                layout={wide ? "stacked" : "phone"}
                 linkComponent={LinkComponent}
               />
             </>

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

@@ -59,11 +59,19 @@ export type MenuFilterChipsProps = {
   onMorePointerDown?: () => void;
   /** Locale-aware integer formatter for the counts. Defaults to `String`. */
   formatCount?: (value: number) => string;
+  /**
+   * `sm` (36px) is the row under a page header. `lg` (44px) is for a row
+   * inside a sticky bar, where the chips are the only thing the thumb can
+   * reach and 36px sits under the target floor.
+   */
+  chipSize?: MenuFilterChipSize;
   /** Accessible name for the row. */
   ariaLabel?: string;
   className?: string;
 };
 
+export type MenuFilterChipSize = "sm" | "lg";
+
 export function MenuFilterChips({
   chips,
   onToggle,
@@ -73,6 +81,7 @@ export function MenuFilterChips({
   moreIcon,
   onMorePointerDown,
   formatCount = String,
+  chipSize = "sm",
   ariaLabel,
   className,
 }: MenuFilterChipsProps) {
@@ -99,6 +108,7 @@ export function MenuFilterChips({
             <Chip
               key={chip.key}
               chip={chip}
+              size={chipSize}
               onToggle={() => onToggle(chip.key)}
               formatCount={formatCount}
             />
@@ -120,7 +130,11 @@ export function MenuFilterChips({
               onPointerDown={onMorePointerDown}
               aria-label={moreLabel}
               aria-haspopup="dialog"
-              className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden"
+              className={cn(
+                "inline-flex shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden",
+                // The one control that never scrolls keeps the chips' height.
+                chipSize === "lg" ? "size-11" : "size-10"
+              )}
             >
               {moreIcon}
             </button>
@@ -143,10 +157,12 @@ export function MenuFilterChips({
 
 function Chip({
   chip,
+  size,
   onToggle,
   formatCount,
 }: {
   chip: MenuFilterChip;
+  size: MenuFilterChipSize;
   onToggle: () => void;
   formatCount: (value: number) => string;
 }) {
@@ -156,7 +172,8 @@ function Chip({
       onClick={onToggle}
       aria-pressed={chip.active}
       className={cn(
-        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        size === "lg" ? "h-11" : "h-9",
         chip.active
           ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]"
           : "border-border bg-card text-foreground hover:border-accent/40",
@@ -226,12 +243,23 @@ export function MenuFilterSummary({
  */
 const CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
 
-export function MenuFilterChipsSkeleton({ className }: { className?: string }) {
+export function MenuFilterChipsSkeleton({
+  className,
+  chipSize = "sm",
+}: {
+  className?: string;
+  /** Match the row it stands in for, so the chips do not jump 8px on load. */
+  chipSize?: MenuFilterChipSize;
+}) {
   return (
     <div className={cn("flex items-center gap-2 overflow-hidden", className)} aria-hidden>
       <Skeleton className="h-3 w-[92px] shrink-0" />
       {CHIP_WIDTHS.map((width, index) => (
-        <Skeleton key={index} className="h-9 shrink-0 rounded-full" style={{ width }} />
+        <Skeleton
+          key={index}
+          className={cn("shrink-0 rounded-full", chipSize === "lg" ? "h-11" : "h-9")}
+          style={{ width }}
+        />
       ))}
     </div>
   );

package/src/components/menu-hub-hero.test.tsx

@@ -28,6 +28,19 @@ describe("MenuHubHero mosaic", () => {
   });
 });
 
+describe("MenuHubHero heading level", () => {
+  it("renders the headline as h1 by default", () => {
+    render(<MenuHubHero headline="Every kitchen" />);
+    expect(document.querySelector("h1")?.textContent).toBe("Every kitchen");
+  });
+
+  it("renders as h2 for a page that already owns its h1", () => {
+    render(<MenuHubHero headline="Every kitchen" headingLevel="h2" />);
+    expect(document.querySelector("h1")).toBeNull();
+    expect(document.querySelector("h2")?.textContent).toBe("Every kitchen");
+  });
+});
+
 describe("VenueWall mosaic", () => {
   it("follows the hero's rule: six on the phone, eighteen from lg", () => {
     render(<VenueWall places={[]} headline="Every menu" tileUrls={tiles} />);

package/src/components/menu-hub-hero.tsx

@@ -60,6 +60,12 @@ export type MenuHubHeroProps = {
    * a 1440px hero.
    */
   tileUrls?: string[];
+  /**
+   * The element the headline renders as. `h1` by default; a page that
+   * already owns its `<h1>` (an sr-only SEO heading, as on `/menu`) passes
+   * `h2` so the document has one h1, not two.
+   */
+  headingLevel?: "h1" | "h2";
   className?: string;
 };
 
@@ -84,6 +90,7 @@ export function MenuHubHero({
   action,
   backgroundUrl,
   tileUrls,
+  headingLevel: Heading = "h1",
   className,
 }: MenuHubHeroProps) {
   return (
@@ -160,9 +167,9 @@ export function MenuHubHero({
 
         {/* 28px on a phone: 32px on a 358px column is five or six words a
             line, which left "walk in blind." wrapping alone. */}
-        <h1 className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]">
+        <Heading className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]">
           {headline}
-        </h1>
+        </Heading>
 
         {body && (
           <p className="hidden max-w-[540px] text-sm leading-[1.6] opacity-[0.84] lg:block lg:text-[15.5px]">

package/src/components/menu-kitchen-list.tsx

@@ -61,6 +61,18 @@ export type MenuKitchenListLabels = {
   showMore?: string;
 };
 
+/**
+ * `wide` (default): the intent page's full-width list — from `lg` the venue
+ * takes a fixed 226px column and the dish stands beside it in a column of its
+ * own. `stacked`: the list sits in a narrow column (a concept card's row
+ * half), so the venue keeps the row and the dish takes a SECOND LINE under it
+ * from `lg`; in a half-width card the dish column had ~100px and its kicker,
+ * name and meta wrapped into a stack of single words. `phone`: the phone row
+ * at every width — no dish line, the venue and its price only — for a card
+ * that keeps its phone form on a desktop rail.
+ */
+export type MenuKitchenListLayout = "wide" | "stacked" | "phone";
+
 export type MenuKitchenListProps = {
   kitchens: MenuKitchenPreview[];
   labels: MenuKitchenListLabels;
@@ -69,6 +81,7 @@ export type MenuKitchenListProps = {
    * navigates for the eleventh — the list is the page.
    */
   onShowMore?: () => void;
+  layout?: MenuKitchenListLayout;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -77,6 +90,7 @@ export function MenuKitchenList({
   kitchens,
   labels,
   onShowMore,
+  layout = "wide",
   linkComponent = DefaultLink,
   className,
 }: MenuKitchenListProps) {
@@ -90,7 +104,12 @@ export function MenuKitchenList({
                 because `<ol>` admits only list items, so a sibling element
                 between them would be invalid markup. */}
             {index > 0 && <Separator />}
-            <KitchenRow kitchen={kitchen} labels={labels} linkComponent={linkComponent} />
+            <KitchenRow
+              kitchen={kitchen}
+              labels={labels}
+              layout={layout}
+              linkComponent={linkComponent}
+            />
           </li>
         ))}
       </ol>
@@ -111,17 +130,25 @@ export function MenuKitchenList({
 function KitchenRow({
   kitchen,
   labels,
+  layout,
   linkComponent: LinkComponent,
 }: {
   kitchen: MenuKitchenPreview;
   labels: MenuKitchenListLabels;
+  layout: MenuKitchenListLayout;
   linkComponent: MenuLinkComponent;
 }) {
   const { place, dish } = kitchen;
   const openNow = place.open_now === true;
+  const wide = layout === "wide";
 
   return (
-    <div className="relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5">
+    <div
+      className={cn(
+        "relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:gap-4 lg:py-3.5",
+        wide && "lg:flex-nowrap"
+      )}
+    >
       {/* The venue link, stretched. `z-[1]` — the dish link sits above it. */}
       <LinkComponent
         href={kitchen.href}
@@ -149,7 +176,12 @@ function KitchenRow({
         />
       </span>
 
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 flex-col gap-0.5",
+          wide && "lg:w-[226px] lg:flex-none"
+        )}
+      >
         {/* One line with an ellipsis on a phone, where the row is the whole
             width; two lines from `lg`, where the column is 226px and
             "ADRIATICA GELATERIA ITALIANA" would otherwise lose its half. */}
@@ -190,8 +222,15 @@ function KitchenRow({
            one tap away on the venue's own page, with room to state it.
 
            `order-5` puts it last in the visual order without moving it in the
-           DOM, where it belongs to the venue. */
-        <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+           DOM, where it belongs to the venue. In the `stacked` layout it is a
+           second LINE under the venue, indented past the thumbnail. */
+        <div
+          className={cn(
+            "hidden min-w-0 basis-full pl-[57px]",
+            layout !== "phone" && "lg:block",
+            wide ? "lg:order-none lg:flex-1 lg:basis-auto lg:pl-0" : "lg:order-5 lg:pl-[74px]"
+          )}
+        >
           <span
             className={cn(
               "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
@@ -230,7 +269,7 @@ function KitchenRow({
         </div>
       )}
 
-      <div className="ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0">
+      <div className={cn("ml-auto flex shrink-0 items-center gap-[11px]", wide && "lg:ml-0")}>
         {kitchen.priceLabel && (
           <span className="text-base font-extrabold tabular-nums text-accent">
             {kitchen.priceLabel}

package/src/components/photo-ground.tsx

@@ -38,6 +38,13 @@ import { cn } from "../lib/utils";
 /** The ground under the photography. Fixed, and deliberately not a token. */
 export const PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
 
+/**
+ * The shadow a glyph wears when it stands on `PHOTO_GROUND` in a photograph's
+ * place — the card family's fallback treatment: a ground and a lifted glyph,
+ * never a bare icon on a flat fill. Same literal family as the ground.
+ */
+export const PHOTO_GLYPH_SHADOW = "drop-shadow-[0_2px_6px_oklch(0.16_0.012_55_/_0.6)]";
+
 /** The uniform dark overlay a card may put over every photograph. */
 const OVERLAY = "absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.5)]";
 

package/src/components/poster-stack.stories.tsx

@@ -56,7 +56,7 @@ export const TwoPosters: Story = {
   },
 };
 
-/** No `src` renders the neutral placeholder block, same as `EventCard`. */
+/** No `src` renders the poster fallback, same as `EventCard`. */
 export const MissingSources: Story = {
   args: {
     posters: [
@@ -66,3 +66,45 @@ export const MissingSources: Story = {
     ],
   },
 };
+
+/**
+ * Tappable: every poster an anchor to its event, the title captioned at its
+ * foot. Hover or focus a poster and it comes to the front; the press scale
+ * is on the anchor, the float on the wrapper, so the two never fight.
+ */
+export const Tappable: Story = {
+  args: {
+    posters: [
+      {
+        src: posterDataUri("1", "#7a5c46"),
+        alt: "Psihotrop poster",
+        caption: "Psihotrop — live at Form Space",
+        href: "#psihotrop",
+      },
+      {
+        src: posterDataUri("2", "#4a6a5c"),
+        alt: "Warehouse rave poster",
+        caption: "Warehouse rave: all night long",
+        href: "#warehouse",
+      },
+      {
+        src: posterDataUri("3", "#6a5c8a"),
+        alt: "Jazz night poster",
+        caption: "Jazz night at the Jazz Club",
+        href: "#jazz",
+      },
+    ],
+  },
+};
+
+/** The phone geometry: three posters inside a 343px column, none past the gutter. */
+export const Phone: Story = {
+  ...Tappable,
+  decorators: [
+    (Story) => (
+      <div className="w-[343px] border-x border-dashed border-border">
+        <Story />
+      </div>
+    ),
+  ],
+};