@bearmenu/ui 0.8.17 → 0.8.19

package/src/components/event-tonight-strip.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { CalendarDays, ChevronRight, Clock } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventTonightStrip — the hub's state line: what is on right now, what is
+ * later tonight, and one tap into the timeline.
+ *
+ * The hero's figures say SCALE ("52 events · 14 days"); this says STATE ("3
+ * live now · 12 more tonight · next at 20:00"). It is the one thing on the
+ * hub's first screen a reader can tap into today's programme, so it is a real
+ * anchor whenever there is a day to open — never a sheet trigger.
+ *
+ * Copy is caller-composed and carries only absolute facts: counts and
+ * wall-clock start times. Never a countdown or "in 12 minutes" — the hub is
+ * ISR-cached, and a ten-minute-old snapshot that says "next at 20:00" is at
+ * worst one boundary off, while "in 12 minutes" is simply wrong. The DS keeps
+ * no clock, no Intl and no i18n: the app derives `tone`, `lead` and `details`
+ * from its own clock and re-derives them after hydration.
+ *
+ * The lead stays `text-foreground`, not `--success`: 13px bold success on a
+ * card computes to roughly 4.5:1 in both modes, too close to the floor for
+ * the strip's one claim. The dot and the border carry the colour.
+ */
+
+export type EventTonightStripTone = "live" | "tonight" | "quiet" | "none";
+
+export type EventTonightStripLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventTonightStripLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventTonightStripProps = {
+  tone: EventTonightStripTone;
+  /** The lead segment, bold — "3 live now". */
+  lead: string;
+  /** Trailing segments, muted, joined with " · " — ["12 more tonight", "next at 20:00"]. */
+  details?: string[];
+  /** Screen-reader suffix for the anchor — "Open tonight in the schedule". */
+  actionLabel?: string;
+  /** Absent (tone `none`) renders a non-interactive `role="status"` line. */
+  href?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<EventTonightStripLinkProps>;
+  className?: string;
+};
+
+export function EventTonightStrip({
+  tone,
+  lead,
+  details = [],
+  actionLabel,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: EventTonightStripProps) {
+  const interactive = !!href;
+
+  const mark =
+    tone === "live" ? (
+      <span className="relative flex h-2.5 w-2.5" aria-hidden>
+        <span className="absolute inline-flex h-full w-full rounded-full bg-success/40 motion-live-pulse motion-reduce:animate-none" />
+        <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-success" />
+      </span>
+    ) : tone === "tonight" ? (
+      <Clock className="h-4 w-4 text-muted-foreground" aria-hidden />
+    ) : (
+      <CalendarDays
+        className={cn("h-4 w-4", tone === "none" ? "text-muted-foreground/70" : "text-muted-foreground")}
+        aria-hidden
+      />
+    );
+
+  const body = (
+    <>
+      <span className="flex h-4 w-4 shrink-0 items-center justify-center">{mark}</span>
+      <span className="line-clamp-2 min-w-0 flex-1 text-[13px] leading-[1.3] tabular-nums lg:line-clamp-1 lg:text-sm">
+        <span className="font-bold text-foreground">{lead}</span>
+        {details.map((detail) => (
+          <React.Fragment key={detail}>
+            {/* The glyph is decoration; the spaces around it are real, so the
+                accessible name reads as words, not one run-on string. */}{" "}
+            <span className="text-muted-foreground" aria-hidden>
+              ·
+            </span>{" "}
+            <span className="text-muted-foreground">{detail}</span>
+          </React.Fragment>
+        ))}
+        {interactive && actionLabel && <span className="sr-only">. {actionLabel}</span>}
+      </span>
+      {interactive && (
+        <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+      )}
+    </>
+  );
+
+  const rootClasses = cn(
+    "flex min-h-[52px] w-full items-center gap-2.5 rounded-[14px] border bg-card px-3.5 py-2 text-left",
+    tone === "live" ? "border-success/40" : "border-border",
+    interactive &&
+      cn(
+        "cursor-pointer transition-colors duration-150 hover:bg-accent-subtle active:scale-[0.99] motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      ),
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent href={href} className={rootClasses}>
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  return (
+    <div role="status" className={rootClasses}>
+      {body}
+    </div>
+  );
+}
+
+export function EventTonightStripSkeleton({ className }: { className?: string }) {
+  return <Skeleton className={cn("h-[52px] w-full rounded-[14px]", className)} />;
+}

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

@@ -123,12 +123,18 @@ const GROUND = PHOTO_GROUND;
 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.
+ * From `lg` the ramp runs to the right: 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.
+ *
+ * THE ONLY GRADIENT FROM `lg`. The phone's local text scrim (below) is off
+ * at this width: a vertical scrim rising from the photo column's foot met
+ * this horizontal ramp at the column's bottom-right corner and the two read
+ * as a seam. Its contrast job moved here — the ramp opens at 0.5 rather
+ * than 0.32, which is what the name and count needed on a bright photograph.
  */
 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%)]";
+  "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.5)_0%,oklch(0.16_0.012_55_/_0.66)_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
@@ -200,8 +206,9 @@ export function MenuFamilyBlock({
         <div
           className={cn(
             "relative flex min-h-[220px] flex-col justify-end p-3.5",
-            wide && "lg:min-h-[320px] lg:p-5",
-            TEXT_SCRIM
+            TEXT_SCRIM,
+            // The two-column card has ONE gradient from `lg` — see `INK_WIDE`.
+            wide && "lg:min-h-[320px] lg:p-5 lg:before:hidden"
           )}
         >
           {pill && (

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/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>
+    ),
+  ],
+};

package/src/components/poster-stack.tsx

@@ -3,11 +3,29 @@
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
  * PosterStack — three overlapping, gently rotated posters that float, the
  * hub hero's aside slot in the source design.
  *
+ * TAPPABLE SINCE 0.8.18. The stack was three decorative images: the loudest
+ * thing on the hub's first screen, and the one thing on it a reader could not
+ * tap. A poster with `href` is an anchor now — the event's detail page for
+ * the crawler and a modified click, whatever the app's `linkComponent` does
+ * for a plain tap (the hub opens its preview drawer). `caption` prints the
+ * title at the poster's foot: it gives the tap a visible reason on touch,
+ * where there is no hover, and it is the anchor's accessible name, so the
+ * `<img>` goes `alt=""` whenever a caption is set. Without `href` a poster is
+ * decorative, as before.
+ *
+ * The float and the press live on DIFFERENT elements. The wrapper carries
+ * the keyframe `transform` (rotation + drift); the anchor inside it carries
+ * the press scale and the focus ring. One element cannot animate one
+ * `transform` and transition another. The pointed poster comes to the front
+ * (`hover:z-[4]`, `focus-within:z-[4]`) — z-index is not animated, it is the
+ * "pick this one" cue.
+ *
  * Two motion rules, both mandatory:
  *   1. Stops entirely under `prefers-reduced-motion: reduce` — enforced via
  *      an injected `<style>` media query rather than relying on Tailwind's
@@ -20,15 +38,35 @@ import { cn } from "../lib/utils";
  *      reduced motion is on, since nothing is animating to pause.
  */
 
+export type PosterStackLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: PosterStackLinkProps) {
+  return <a href={href} {...props} />;
+}
+
 export type PosterStackPoster = {
-  /** Absent renders a neutral placeholder block instead of an image. */
+  /** Absent renders `fallback` instead of an image. */
   src?: string;
   alt: string;
+  /** The event's detail page. With it the poster is an anchor; without it, decorative. */
+  href?: string;
+  /** Caption at the poster's foot — the event title. Becomes the anchor's
+   *  accessible name; the `<img>` then gets `alt=""`. */
+  caption?: string;
+  /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
+  fallback?: React.ReactNode;
 };
 
 export type PosterStackProps = {
   /** Rendered in order; only the first three are shown. */
   posters: PosterStackPoster[];
+  /** Defaults to a plain `<a>`. Pass `next/link`, or an anchor that opens the app's preview. */
+  linkComponent?: React.ComponentType<PosterStackLinkProps>;
   className?: string;
 };
 
@@ -51,22 +89,31 @@ type PosterSlotConfig = {
   zIndexClassName?: string;
 };
 
+/**
+ * Phone geometry: the three slots span 336px (112 / 128 / 112 wide, the
+ * outer two overlapping the middle by 8px each side), inside a stage the
+ * component centres in whatever column it is given — the stack used to hug
+ * the left gutter. 196px tall, the height the lowest slot actually reaches,
+ * so the block below sits at the page's rhythm rather than under 20px of
+ * empty stage. Touch targets are 112×149 and 128×171.
+ */
+const PHONE_STAGE_CLASS = "mx-auto w-[336px] max-w-full";
 const POSTER_SLOTS: PosterSlotConfig[] = [
   {
-    positionClassName: "left-[6px] top-[34px] w-[120px] md:left-0 md:top-[52px] md:w-[196px]",
+    positionClassName: "left-0 top-[28px] w-[112px] md:left-0 md:top-[52px] md:w-[196px]",
     restTransform: "rotate(-5deg)",
     animationName: "ds-poster-stack-float-1",
     animationDurationMs: 9000,
   },
   {
-    positionClassName: "left-[110px] top-0 w-[140px] md:left-[168px] md:w-[232px]",
+    positionClassName: "left-[104px] top-0 w-[128px] md:left-[168px] md:w-[232px]",
     restTransform: "rotate(3deg)",
     animationName: "ds-poster-stack-float-2",
     animationDurationMs: 11000,
     zIndexClassName: "z-[3]",
   },
   {
-    positionClassName: "left-[238px] top-[58px] w-[120px] md:left-[378px] md:top-24 md:w-[196px]",
+    positionClassName: "left-[224px] top-[44px] w-[112px] md:left-[378px] md:top-24 md:w-[196px]",
     restTransform: "rotate(6deg)",
     animationName: "ds-poster-stack-float-3",
     animationDurationMs: 10000,
@@ -77,7 +124,11 @@ const POSTER_SLOTS: PosterSlotConfig[] = [
  * shadow is an art-directed literal rather than a `--shadow-card` token. */
 const POSTER_SHADOW = "0 22px 50px oklch(0.3 0.02 60 / 0.24)";
 
-export function PosterStack({ posters, className }: PosterStackProps) {
+export function PosterStack({
+  posters,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: PosterStackProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const posterRefs = useRef<Array<HTMLDivElement | null>>([]);
   const [failedIndices, setFailedIndices] = useState<Set<number>>(new Set());
@@ -106,12 +157,44 @@ export function PosterStack({ posters, className }: PosterStackProps) {
   const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
 
   return (
-    <div ref={containerRef} className={cn("relative h-[250px] md:h-[400px]", className)}>
+    <div
+      ref={containerRef}
+      className={cn("relative h-[196px] md:h-[400px] md:w-auto md:mx-0", PHONE_STAGE_CLASS, className)}
+    >
       <style>{POSTER_STACK_ANIMATION_STYLE}</style>
 
       {visiblePosters.map((poster, index) => {
         const slot = POSTER_SLOTS[index];
         const showPoster = !!poster.src && !failedIndices.has(index);
+        const face = (
+          <>
+            {showPoster ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={poster.src}
+                alt={poster.caption ? "" : poster.alt}
+                loading="lazy"
+                decoding="async"
+                className={cn(
+                  "h-full w-full object-cover",
+                  poster.href &&
+                    "transition-transform duration-300 group-hover/poster:scale-[1.03] motion-reduce:transition-none"
+                )}
+                onError={() => setFailedIndices((current) => new Set(current).add(index))}
+              />
+            ) : (
+              (poster.fallback ?? <EventPosterFallback />)
+            )}
+            {poster.caption && (
+              <span className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-2 pb-2 pt-6">
+                <span className="line-clamp-2 text-[11px] font-semibold leading-[1.25] text-white md:text-[12.5px]">
+                  {poster.caption}
+                </span>
+              </span>
+            )}
+          </>
+        );
+
         return (
           <div
             key={poster.alt || index}
@@ -122,7 +205,8 @@ export function PosterStack({ posters, className }: PosterStackProps) {
             className={cn(
               "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
               slot.positionClassName,
-              slot.zIndexClassName
+              slot.zIndexClassName,
+              poster.href && "hover:z-[4] focus-within:z-[4]"
             )}
             style={{
               transform: slot.restTransform,
@@ -134,18 +218,19 @@ export function PosterStack({ posters, className }: PosterStackProps) {
               animationDirection: "alternate",
             }}
           >
-            {showPoster && (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={poster.src}
-                alt={poster.alt}
-                loading="lazy"
-                decoding="async"
-                className="h-full w-full object-cover"
-                onError={() =>
-                  setFailedIndices((current) => new Set(current).add(index))
-                }
-              />
+            {poster.href ? (
+              <LinkComponent
+                href={poster.href}
+                className={cn(
+                  "group/poster relative block h-full w-full overflow-hidden rounded-xl",
+                  "transition-transform duration-150 active:scale-[0.98] motion-reduce:transition-none",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                )}
+              >
+                {face}
+              </LinkComponent>
+            ) : (
+              <div className="relative h-full w-full">{face}</div>
             )}
           </div>
         );

package/src/components/snap-rail.tsx

@@ -29,6 +29,9 @@ const snapRailVariants = cva(
   {
     variants: {
       itemWidth: {
+        /** Square door tiles — three and a third per phone screen, so the
+         *  cut fourth says "swipe"; more as the viewport widens. */
+        xs: "[&>*]:w-[30%] sm:[&>*]:w-[22%] md:[&>*]:w-[18%]",
         sm: "[&>*]:w-[46%]",
         md: "[&>*]:w-[60%]",
         lg: "[&>*]:w-[80%]",
@@ -42,7 +45,9 @@ const snapRailVariants = cva(
       bleed: {
         none: "",
         card: "-mx-3.5 px-3.5 scroll-px-3.5",
-        page: "-mx-4 px-4 scroll-px-4",
+        /** The consumer's page gutter, read from `--page-gutter` (16px on a
+         *  phone, 24px from md) — a fixed `-mx-4` was 8px short at md. */
+        page: "-mx-[var(--page-gutter,1rem)] px-[var(--page-gutter,1rem)] scroll-px-[var(--page-gutter,1rem)]",
       },
     },
     defaultVariants: {