@bearmenu/ui 0.8.17 → 0.8.18

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

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { ArrowRight, CalendarDays, 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 && (
+        <ArrowRight 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-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,28 @@ type PosterSlotConfig = {
   zIndexClassName?: string;
 };
 
+/**
+ * Phone geometry fits a 343px column (375 minus the 16px gutters): the third
+ * poster used to reach 358px and ran into the right gutter. 112 / 128 / 112
+ * wide, 212px tall — 38px shorter than before, which is what lets the door
+ * row land in the first screen. Touch targets are 112×149 and 128×171.
+ */
 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 +121,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 +154,41 @@ 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-[212px] md:h-[400px]", 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 +199,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 +212,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: {

package/src/components/timeline-day.stories.tsx

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimelineDay, TimelineDaySkeleton } from "./timeline-day";
+import { TimelineHour } from "./timeline-hour";
+import { EventCard } from "./event-card";
+import { EventDayHeader } from "./event-day-header";
+import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
+
+const formatters: EventFormatters = {
+  time: (iso) => iso.slice(11, 16),
+  day: () => "Thu, Sep 3",
+  price: (amount) => `${amount} RON`,
+};
+
+const POSTER =
+  "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=640&q=70&auto=format&fit=crop";
+
+const event = (
+  id: string,
+  title: string,
+  place: string,
+  hour: string,
+  fee?: number,
+  poster = POSTER
+): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: `2026-09-03T${hour}:00`,
+  entry_fee: fee,
+  poster_url: poster,
+});
+
+const meta: Meta<typeof TimelineDay> = {
+  title: "Events/TimelineDay",
+  component: TimelineDay,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="mx-auto max-w-[1180px] bg-background px-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "One day of the timeline, ONE DOM for both viewports. Below `lg` it is a column of hours, each a `TimelineHour` with a gutter chip and the hour's cards. From `lg` the same nodes become lane │ spine │ content: the hour with `role=\"hero\"` is placed in the lane by the grid and pins, every other hour stations itself on the spine, and cards past the cap paint as rows (`EventCard density=\"row-lg\"`). Resize the canvas across 1024px to watch one tree change shape. `rows` counts the column-3 children.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimelineDay>;
+
+function Card(props: {
+  ev: EventPreview;
+  emphasis?: boolean | "lg";
+  hideWhen?: boolean | "below-lg";
+  density?: "card" | "row-lg";
+  liveStatus?: string;
+  priority?: boolean;
+}) {
+  return (
+    <EventCard
+      event={props.ev}
+      labels={labels}
+      formatters={formatters}
+      emphasis={props.emphasis}
+      hideWhen={props.hideWhen ?? true}
+      density={props.density}
+      liveStatus={props.liveStatus}
+      showPrice
+      tags={["Live music", "Jazz"]}
+      href={`#${props.ev.id}`}
+      priority={props.priority}
+    />
+  );
+}
+
+/**
+ * A six-hour Friday with the hero in the middle: 19:00 opens, the 20:00 hero
+ * is lifted into the lane on desktop while its hour's other event stays as a
+ * continuation, later hours demote to rows past the cap, and a group of
+ * events the ingest never timed trails the day off the axis.
+ */
+export const FullDay: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 py-6">
+      <EventDayHeader
+        dayNumber="03"
+        weekday="Thursday"
+        meta="September · 9 events · 1 live"
+        size="responsive"
+      />
+      <TimelineDay rows={6} laneTop="16px">
+        <TimelineHour time="19:00" countLabel="2 events">
+          <Card ev={event("a", "Vinyl night at the bar", "Joben Bistro", "19:00", 0)} priority />
+          <Card ev={event("b", "Pub quiz: nineties", "Klausen", "19:00", 20)} />
+        </TimelineHour>
+        <TimelineHour time="20:00" role="hero" isLive liveLabel="NOW ON" countLabel="1 event">
+          <Card
+            ev={event("c", "Subcarpați live — sold-out tour warm-up", "Form Space", "20:00", 60)}
+            emphasis="lg"
+            hideWhen="below-lg"
+            liveStatus="Live now · ends around 23:00"
+          />
+        </TimelineHour>
+        <TimelineHour time="20:00" role="continuation" isLive liveLabel="NOW ON" countLabel="1 event">
+          <Card ev={event("d", "Wine tasting: Dealu Mare", "Enoteca", "20:00", 90)} />
+        </TimelineHour>
+        <TimelineHour time="21:00" countLabel="3 events" layout="rows">
+          <Card ev={event("e", "Comedy open mic", "Flying Circus", "21:00", 25)} density="row-lg" />
+          <Card ev={event("f", "Techno: Berlin calling", "Mansion", "21:00", 40)} density="row-lg" />
+          <Card ev={event("g", "Salsa social", "Casa Tranzit", "21:00", 0)} density="row-lg" />
+        </TimelineHour>
+        <TimelineHour time="23:00" countLabel="1 event" layout="rows">
+          <Card ev={event("h", "Late-night jazz jam", "Jazz Club", "23:00")} density="row-lg" />
+        </TimelineHour>
+        <TimelineHour
+          time="Time to be confirmed"
+          role="unscheduled"
+          countLabel="1 event"
+          note="The venue has not published a start time."
+        >
+          <Card ev={event("i", "Board games afternoon", "Insomnia Café", "00:00", 0)} />
+        </TimelineHour>
+      </TimelineDay>
+    </div>
+  ),
+};
+
+/** A quiet Tuesday: one hour, one event, no hero — no lane on desktop either. */
+export const OneHour: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 py-6">
+      <EventDayHeader dayNumber="08" weekday="Tuesday" meta="September · 1 event" size="responsive" />
+      <TimelineDay rows={1}>
+        <TimelineHour time="19:30" countLabel="1 event">
+          <Card ev={event("a", "Book club: Cărtărescu", "Cărturești", "19:30", 0)} priority />
+        </TimelineHour>
+      </TimelineDay>
+    </div>
+  ),
+};
+
+/**
+ * Two full days stacked, so the lane's pin and release can be watched at
+ * 1024 and 1440: scroll the canvas and the first day's poster holds until
+ * its column runs out, then the second day's takes over.
+ */
+export const StickyLane: Story = {
+  render: () => (
+    <div className="flex flex-col gap-10 py-6">
+      {["03", "04"].map((day) => (
+        <div key={day} className="flex flex-col gap-3">
+          <EventDayHeader
+            dayNumber={day}
+            weekday={day === "03" ? "Thursday" : "Friday"}
+            meta="September · 7 events"
+            size="responsive"
+          />
+          <TimelineDay rows={4} laneTop="16px">
+            <TimelineHour time="18:00" role="hero" countLabel="1 event">
+              <Card
+                ev={event(`${day}-hero`, "Headliner of the night", "Form Space", "18:00", 50)}
+                emphasis="lg"
+                hideWhen="below-lg"
+              />
+            </TimelineHour>
+            {["19:00", "20:00", "21:00", "22:00"].map((hour) => (
+              <TimelineHour key={hour} time={hour} countLabel="2 events" layout="rows">
+                <Card
+                  ev={event(`${day}-${hour}-1`, `Something at ${hour}`, "Klausen", hour, 20)}
+                  density="row-lg"
+                />
+                <Card
+                  ev={event(`${day}-${hour}-2`, `Something else at ${hour}`, "Joben", hour, 0)}
+                  density="row-lg"
+                />
+              </TimelineHour>
+            ))}
+          </TimelineDay>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => (
+    <div className="py-6">
+      <TimelineDaySkeleton hourCount={3} />
+    </div>
+  ),
+};