@bearmenu/ui 0.8.17 → 0.8.19

package/dist/components/timeline-hour-puck.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * The phone axis gutter, shared by `TimelineHour` and `TimelinePlayhead` so
+ * the hour chips and the current-time label sit in one column. 58px is the
+ * width of a five-glyph 24-hour label ("20:00") in the chip's mono type plus
+ * its padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
+ * reasons the events surfaces format 24-hour everywhere.
+ */
+declare const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+type TimelineHourPuckProps = {
+    /** The hour, already formatted and localised — or an em dash for a quiet day. */
+    time: string;
+    /** Marks this as the hour currently in progress. */
+    isLive?: boolean;
+    /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+    liveLabel?: string;
+    /**
+     * `station`: the bordered puck that sits ON the hairline, for the desktop
+     * spine. `chip`: a filled, fixed-width lozenge with the hairline starting
+     * BELOW it, for the phone gutter — an app's time label, not a station on a
+     * rail. `responsive` (the default): the chip below `lg`, the station from
+     * `lg` — ONE node that changes its look with the viewport, so a
+     * server-rendered timeline carries a single DOM for both widths. In the
+     * chip look the live label is visually hidden: the tinted chip plus a small
+     * on-air glyph are the visible signal (the glyph so the state never rests on
+     * colour alone once the pulse is reduced away) and the label stays for
+     * screen readers only.
+     */
+    variant?: "station" | "chip" | "responsive";
+    className?: string;
+};
+/**
+ * The station on the timeline's axis — ONE object, positioned by its host
+ * (`TimelineHour`): pinned to the top of the phone gutter, centred on the
+ * hour's heading rule out on the desktop spine.
+ *
+ * The `bg-background` fill punches through the hairline so the rail reads as
+ * continuous behind the label rather than butting into it.
+ *
+ * The live label is absolutely positioned rather than a flex sibling: hosts
+ * centre this puck with `-translate-y-1/2`, and a two-item column would centre
+ * the STACK, lifting the puck off the line it exists to sit on.
+ */
+declare function TimelineHourPuck({ time, isLive, liveLabel, variant, className, }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
+
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck, type TimelineHourPuckProps };

package/dist/components/timeline-hour-puck.js

@@ -0,0 +1,3 @@
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from '../chunk-BRXI6EDO.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';

package/dist/components/timeline-hour.d.ts

@@ -0,0 +1,96 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * TimelineHour — one hour of a day's programme, ONE DOM for both viewports.
+ *
+ * Replaces `HourBand` (the phone band: a 58px gutter with a filled chip and
+ * a hairline dropping from it, the hour's cards beside) and `HourGroup` (the
+ * desktop heading: a station out on `TimelineDay`'s spine, a rule and a
+ * count). They were two components because the timeline picked one per
+ * viewport in JavaScript, and a server render cannot know the viewport — so
+ * the server rendered nothing. This is both, with CSS deciding:
+ *
+ *   below `lg`   the section carries a 70px left inset; the puck sits at the
+ *                top-left of that gutter as a chip, a hairline drops beneath
+ *                it, and the heading row is hidden — the chip IS the heading.
+ *   from `lg`    the inset goes, the heading row shows (rule + count), and the
+ *                puck moves out to the spine, centred on that rule, as a
+ *                station. Its vertical position is a constant (`--timeline-
+ *                heading` below), which is why the heading row has a fixed
+ *                height: "top-1/2 of the row" needs the puck INSIDE the row,
+ *                and inside the row it cannot also be the phone's gutter chip.
+ *
+ * The invariant `TimelineBand` used to state still holds: AN HOUR APPEARS
+ * EXACTLY ONCE, AND ALWAYS ON THE SPINE. Roles are how a day keeps it while
+ * one of its events is lifted into the desktop lane:
+ *
+ *   hour          the default — a station, the hour's events.
+ *   hero          the day's feature. Below `lg` a normal hour holding one
+ *                 card, in its chronological slot. From `lg` the node moves
+ *                 to `TimelineDay`'s lane column (grid placement, not source
+ *                 order), pins, and loses its puck and heading — the lane
+ *                 card carries its own start time, see `EventCard` `hideWhen`
+ *                 `"below-lg"`.
+ *   continuation  what is left of the hero's hour. Below `lg` its chip is
+ *                 `invisible` (the gutter and hairline stay, so the reader sees
+ *                 ONE band for that hour, hero first); from `lg` it shows its
+ *                 station, because the hero is in the lane now and the hour
+ *                 needs its puck back. When the hero was its hour's only
+ *                 event there is no continuation, and the hour simply leaves
+ *                 the desktop column — exactly what `HourGroup`'s
+ *                 `excludeEventId` used to do.
+ *   unscheduled   events the ingest dated but never timed. No station at any
+ *                 width — the axis encodes clock position and these have none
+ *                 — and no gutter inset: an inline heading (the caller's
+ *                 label, a rule, the count) at both widths, after the day's
+ *                 real programme.
+ *
+ * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
+ * hairline between two posters reads as a third object) and from `lg` lays
+ * them on a two/three-up grid; `rows` rules between children on both widths.
+ * Children are read with `Children.toArray`, which drops `null`/`false`, so a
+ * conditional first row never inherits a rule meant for a second; pass rows
+ * as siblings, not inside a fragment.
+ */
+type TimelineHourRole = "hour" | "hero" | "continuation" | "unscheduled";
+type TimelineHourProps = {
+    /** The hour, already formatted and localised — "20:00". For `unscheduled`,
+     *  the caller's label for the group ("Time to be confirmed"). */
+    time: string;
+    role?: TimelineHourRole;
+    /** Marks this as the hour currently in progress. */
+    isLive?: boolean;
+    /** Under the station when live, e.g. "NOW ON"; screen-reader-only in the chip. */
+    liveLabel?: string;
+    /** Desktop heading count, e.g. "3 events" — mirrors `EventDayHeader`'s `meta`.
+     *  Also the phone heading for `unscheduled`. */
+    countLabel?: string;
+    /** Trailing note after the children, e.g. "No start time was published". */
+    note?: string;
+    layout?: "cards" | "rows";
+    /** The hour's events — each direct child one card or row. */
+    children: React.ReactNode;
+    /**
+     * Events past the hour's card cap, after `children`: cards on the phone
+     * (the same stack, same gap), rows from `lg` (ruled, under the grid) —
+     * pass `EventCard density="row-lg"`. The desktop's density ladder inside
+     * one hour: a few posters, then rows.
+     */
+    overflow?: React.ReactNode;
+    className?: string;
+};
+declare function TimelineHour({ time, role, isLive, liveLabel, countLabel, note, layout, children, overflow, className, }: TimelineHourProps): react_jsx_runtime.JSX.Element;
+type TimelineHourSkeletonProps = {
+    /** Cards to reserve space for. */
+    cardCount?: number;
+    className?: string;
+};
+/**
+ * Mirrors `TimelineHour` at both widths — the phone's gutter chip and
+ * hairline, the desktop's grid of poster placeholders — so nothing jumps when
+ * data lands.
+ */
+declare function TimelineHourSkeleton({ cardCount, className }: TimelineHourSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { TimelineHour, type TimelineHourProps, type TimelineHourRole, TimelineHourSkeleton, type TimelineHourSkeletonProps };

package/dist/components/{timeline-band.js → timeline-hour.js}

@@ -1,4 +1,5 @@
-export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-NSNEANOQ.js';
+export { TimelineHour, TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+import '../chunk-BRXI6EDO.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/timeline-playhead.js

@@ -1,6 +1,4 @@
-import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-NSNEANOQ.js';
-import '../chunk-NWZGSLPU.js';
-import '../chunk-XBBEX4SF.js';
+import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-BRXI6EDO.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/package.json

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

package/src/components/event-card.tsx

@@ -55,8 +55,22 @@ export type EventCardProps = {
    * `Coverflow`) — it crops less than `3/4` and is not the same as it.
    */
   posterAspect?: "4/3" | "3/4" | "4/5";
-  /** Larger title — the featured/highlight slot. Never a clamp: the title wraps in full either way. */
-  emphasis?: boolean;
+  /**
+   * Larger title — the featured/highlight slot. Never a clamp: the title
+   * wraps in full either way. `"lg"` applies it from the `lg` breakpoint
+   * only: the timeline's day hero is an ordinary card in the phone column and
+   * the lane's feature poster on desktop, one node.
+   */
+  emphasis?: boolean | "lg";
+  /**
+   * `card` (default) at every width. `row-lg`: the card below `lg`, and from
+   * `lg` the compact row `EventCompactRow` draws — a 64px portrait poster
+   * beside the text, overlay pills off, the fee as a chip on the tags row.
+   * The timeline demotes an hour's later events to rows on desktop only, and
+   * a server render cannot swap components per viewport; this is the one
+   * node that paints both.
+   */
+  density?: "card" | "row-lg";
   /** Top-left overlay pill (the design's "Busy" hype marker). Include its icon. */
   badge?: React.ReactNode;
   /** Bottom-left overlay pill naming the category. Include its icon. */
@@ -77,8 +91,12 @@ export type EventCardProps = {
    * locale, and "is this live" depends on the app's clock, not the DS's.
    */
   liveStatus?: string;
-  /** Hide the day/time line — the timeline supplies its own hour heading. */
-  hideWhen?: boolean;
+  /**
+   * Hide the day/time line — the timeline supplies its own hour heading.
+   * `"below-lg"` hides it on the phone only: the desktop lane's hero sits
+   * beside whatever hour is passing and has to carry its own start time.
+   */
+  hideWhen?: boolean | "below-lg";
   /**
    * Already over — dims the poster, mutes the title and shows the `endedLabel`
    * chip. Never row-level opacity, which composites the text below AA. Same
@@ -111,6 +129,7 @@ export const EventCard = memo(function EventCard({
   formatters,
   posterAspect = "4/3",
   emphasis,
+  density = "card",
   badge,
   tagLabel,
   tags,
@@ -129,7 +148,10 @@ export const EventCard = memo(function EventCard({
 }: EventCardProps) {
   const [imgError, setImgError] = useState(false);
   const showEnded = isEnded && !!endedLabel;
-  const time = hideWhen ? "" : formatters.time(event.starts_at);
+  // `"below-lg"` still renders the line (hidden by CSS on the phone), so the
+  // time is formatted whenever the line can show anywhere.
+  const time = hideWhen === true ? "" : formatters.time(event.starts_at);
+  const isRowLg = density === "row-lg";
 
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
@@ -146,6 +168,8 @@ export const EventCard = memo(function EventCard({
             : posterAspect === "4/5"
               ? "aspect-[4/5]"
               : "aspect-[4/3]",
+          // The compact row's poster from `lg`: 64px, portrait, tighter radius.
+          isRowLg && "lg:aspect-[4/5] lg:w-16 lg:shrink-0 lg:rounded-[10px]",
         )}
       >
         {showPoster ? (
@@ -164,8 +188,14 @@ export const EventCard = memo(function EventCard({
         )}
 
         {/* Top overlay row — hype badge left, entry fee right. The empty span
-            keeps the fee pill right-aligned when there is no badge. */}
-        <div className="absolute inset-x-2 top-2 flex items-start justify-between gap-2">
+            keeps the fee pill right-aligned when there is no badge. Off on a
+            64px row poster, where the fee moves to the tags row. */}
+        <div
+          className={cn(
+            "absolute inset-x-2 top-2 flex items-start justify-between gap-2",
+            isRowLg && "lg:hidden",
+          )}
+        >
           {badge ? (
             <span className={cn(PILL_BASE, "bg-black/55 text-white")}>
               {badge}
@@ -187,7 +217,12 @@ export const EventCard = memo(function EventCard({
         </div>
 
         {tagLabel && (
-          <div className="absolute inset-x-2 bottom-2 flex gap-1">
+          <div
+            className={cn(
+              "absolute inset-x-2 bottom-2 flex gap-1",
+              isRowLg && "lg:hidden",
+            )}
+          >
             <span className={cn(PILL_BASE, "bg-black/55 text-white")}>
               {tagLabel}
             </span>
@@ -195,6 +230,8 @@ export const EventCard = memo(function EventCard({
         )}
       </div>
 
+      {/* The text column — a wrapper so `row-lg` can lay it beside the poster. */}
+      <div className={cn("flex min-w-0 flex-col", isRowLg && "lg:flex-1")}>
       {/* NEVER CLAMPED, in any variant. The title is the one thing a card
           exists to say, and "Movie Night: Futni m…" says none of it — the
           truncated form was the reported defect. It wraps to as many lines as
@@ -205,9 +242,11 @@ export const EventCard = memo(function EventCard({
       <h3
         className={cn(
           "mt-2.5 leading-[1.35]",
-          emphasis
+          emphasis === true
             ? "text-lg font-bold tracking-[-0.02em]"
             : "text-sm font-semibold",
+          emphasis === "lg" && "lg:text-lg lg:font-bold lg:tracking-[-0.02em]",
+          isRowLg && "lg:mt-0 lg:text-[13.5px]",
           isEnded && "text-muted-foreground",
         )}
       >
@@ -219,8 +258,13 @@ export const EventCard = memo(function EventCard({
         <span className="truncate">{venue}</span>
       </div>
 
-      {!hideWhen && (
-        <div className="mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground">
+      {hideWhen !== true && (
+        <div
+          className={cn(
+            "mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground",
+            hideWhen === "below-lg" && "hidden lg:flex",
+          )}
+        >
           <span>{dayLabel ?? formatters.day(event.starts_at)}</span>
           {/* An empty time is "hour unknown" (see `EventFormatters.time`): the
               day stands alone, no dangling separator. Consumers used to have
@@ -244,13 +288,21 @@ export const EventCard = memo(function EventCard({
         </div>
       )}
 
-      {tags && tags.length > 0 && (
+      {/* The row look carries the fee as a chip here, where the compact row
+          puts it — the poster is too small for an overlay pill. */}
+      {((tags && tags.length > 0) || (isRowLg && fee.kind === "free")) && (
         <TagGroup className="mt-1.5">
-          {tags.map((tag) => (
+          {tags?.map((tag) => (
             <Tag key={tag} size="sm">
               {tag}
             </Tag>
           ))}
+          {isRowLg && fee.kind === "free" && (
+            <Tag size="sm" variant="success" className="hidden font-bold lg:inline-flex">
+              <Gift className="h-3 w-3" aria-hidden />
+              {labels.free}
+            </Tag>
+          )}
         </TagGroup>
       )}
 
@@ -268,13 +320,18 @@ export const EventCard = memo(function EventCard({
           </Tag>
         </div>
       )}
+      </div>
     </>
   );
 
   const rootClasses = cn(
     "flex min-w-0 flex-col text-left",
+    // The compact row from `lg`: poster beside text, the row's own padding
+    // and negative gutter so the hover wash bleeds like `EventCompactRow`'s.
+    isRowLg && "lg:-mx-2.5 lg:flex-row lg:items-start lg:gap-[11px] lg:rounded-lg lg:px-2.5 lg:py-2",
     (href || onClick) &&
       "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
+    (href || onClick) && isRowLg && "lg:hover:bg-foreground/5",
     className,
   );
 

package/src/components/event-day-header.tsx

@@ -47,10 +47,12 @@ export type EventDayHeaderProps = {
    */
   action?: React.ReactNode;
   /**
-   * Larger desktop scale: 58px day number, 18px weekday, 12.5px meta,
-   * against the mobile 40/15/11.5.
+   * `sm`: the phone scale (30px day number, 15px weekday, 11.5px meta).
+   * `default`: the desktop scale (58 / 18 / 12.5). `responsive`: `sm` below
+   * `lg` and `default` from it, in one node — for a server render that
+   * cannot know the viewport.
    */
-  size?: "sm" | "default";
+  size?: "sm" | "default" | "responsive";
   href?: string;
   linkComponent?: React.ComponentType<EventDayHeaderLinkProps>;
   onClick?: () => void;
@@ -70,6 +72,9 @@ export function EventDayHeader({
 }: EventDayHeaderProps) {
   const isInteractive = !!href || !!onClick;
   const large = size === "default";
+  // `responsive` is the phone scale with every `default` class as an `lg:`
+  // twin — one node for a server-rendered timeline.
+  const responsive = size === "responsive";
 
   const body = (
     <>
@@ -78,21 +83,27 @@ export function EventDayHeader({
           "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
           // `sm` is the phone scale: 30px, the design's app day head. 40px
           // was a page-scale number that took a third of a 390px row.
-          large ? "text-[58px]" : "text-[30px] leading-[0.86]"
+          large ? "text-[58px]" : "text-[30px] leading-[0.86]",
+          responsive && "lg:text-[58px] lg:leading-[0.82]"
         )}
       >
         {dayNumber}
       </div>
-      <div className={large ? "pb-1" : "pb-0.5"}>
+      <div className={cn(large ? "pb-1" : "pb-0.5", responsive && "lg:pb-1")}>
         <div
-          className={cn("font-extrabold tracking-[-0.015em]", large ? "text-lg" : "text-[15px]")}
+          className={cn(
+            "font-extrabold tracking-[-0.015em]",
+            large ? "text-lg" : "text-[15px]",
+            responsive && "lg:text-lg"
+          )}
         >
           {weekday}
         </div>
         <div
           className={cn(
             "mt-0.5 text-muted-foreground",
-            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]"
+            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]",
+            responsive && "lg:whitespace-nowrap lg:text-[12.5px]"
           )}
         >
           {meta}
@@ -132,6 +143,7 @@ export function EventDayHeader({
       className={cn(
         "relative flex w-full items-end gap-3 pb-3 pt-[18px]",
         large && "gap-[18px] pb-4",
+        responsive && "lg:gap-[18px] lg:pb-4",
         className
       )}
     >

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

@@ -47,6 +47,14 @@ export type EventHubHeroProps = {
   statsLabel?: string;
   /** The right-column slot — the poster stack in the source design. */
   aside?: React.ReactNode;
+  /**
+   * The hub's tonight state strip. The figures say scale; this says what is
+   * on right now, and it is the one thing on the first screen a reader can
+   * tap into the timeline. On a phone it follows the aside — title, figures,
+   * posters, then the one line that says what is on — and from `lg` it is a
+   * content-width row under both columns.
+   */
+  footer?: React.ReactNode;
   className?: string;
 };
 
@@ -57,12 +65,16 @@ export function EventHubHero({
   stats,
   statsLabel,
   aside,
+  footer,
   className,
 }: EventHubHeroProps) {
   return (
     <div
       className={cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 12px between the phone's blocks — the page's rhythm, the same as
+        // between the sections below: with a tappable poster stack the aside
+        // is content, not decoration, and gets no section gap of its own.
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       )}
     >
@@ -134,6 +146,8 @@ export function EventHubHero({
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}
+
+      {footer && <div className="lg:col-span-2 lg:w-fit lg:min-w-[480px]">{footer}</div>}
     </div>
   );
 }
@@ -141,15 +155,17 @@ export function EventHubHero({
 export type EventHubHeroSkeletonProps = {
   /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
   aside?: React.ReactNode;
+  /** Reserves the `footer` row — the tonight strip's 52px. */
+  footer?: boolean;
   className?: string;
 };
 
-export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps) {
+export function EventHubHeroSkeleton({ aside, footer, className }: EventHubHeroSkeletonProps) {
   return (
     <div
       aria-hidden="true"
       className={cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       )}
     >
@@ -177,6 +193,12 @@ export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonP
       </div>
 
       {aside && <div className="min-w-0">{aside}</div>}
+
+      {footer && (
+        <div className="lg:col-span-2 lg:w-fit lg:min-w-[480px]">
+          <Skeleton className="h-[52px] w-full rounded-[14px]" />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventTonightStrip, EventTonightStripSkeleton } from "./event-tonight-strip";
+
+const meta: Meta<typeof EventTonightStrip> = {
+  title: "Events/EventTonightStrip",
+  component: EventTonightStrip,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[343px] bg-surface-2 p-4 md:w-[520px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's state line under the hero: what is on right now, what is later tonight, and one tap into the timeline. Copy is caller-composed and carries only absolute facts (counts, wall-clock times) so an ISR snapshot can never say something false. Tone `none` renders a non-interactive status line.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventTonightStrip>;
+
+export const Live: Story = {
+  args: {
+    tone: "live",
+    lead: "3 live now",
+    details: ["12 more tonight", "next at 20:00"],
+    actionLabel: "Open tonight in the schedule",
+    href: "#events-day-2026-09-17",
+  },
+};
+
+export const Tonight: Story = {
+  args: {
+    tone: "tonight",
+    lead: "9 tonight",
+    details: ["first at 19:00"],
+    actionLabel: "Open tonight in the schedule",
+    href: "#events-day-2026-09-17",
+  },
+};
+
+export const Quiet: Story = {
+  args: {
+    tone: "quiet",
+    lead: "Nothing on tonight",
+    details: ["next Fri 20:00", "7 events"],
+    actionLabel: "Open Friday in the schedule",
+    href: "#events-day-2026-09-19",
+  },
+};
+
+export const Over: Story = {
+  args: {
+    tone: "quiet",
+    lead: "Tonight's events are over",
+    details: ["next tomorrow 18:00", "4 events"],
+    actionLabel: "Open tomorrow in the schedule",
+    href: "#events-day-2026-09-18",
+  },
+};
+
+export const None: Story = {
+  args: {
+    tone: "none",
+    lead: "Nothing scheduled in the next 14 days",
+    details: ["Check back soon"],
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <EventTonightStripSkeleton />,
+};

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

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EventTonightStrip } from "./event-tonight-strip";
+import { PosterStack } from "./poster-stack";
+
+describe("EventTonightStrip", () => {
+  it("is an anchor with the lead, the details and the action as its name", () => {
+    render(
+      <EventTonightStrip
+        tone="live"
+        lead="3 live now"
+        details={["12 more tonight", "next at 20:00"]}
+        actionLabel="Open tonight in the schedule"
+        href="/events/schedule#events-day-2026-09-17"
+      />
+    );
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "/events/schedule#events-day-2026-09-17");
+    expect(link).toHaveAccessibleName(
+      "3 live now 12 more tonight next at 20:00. Open tonight in the schedule"
+    );
+  });
+
+  it("renders a status line, not a link, when there is nothing to open", () => {
+    render(<EventTonightStrip tone="none" lead="Nothing scheduled" />);
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(screen.getByRole("status")).toHaveTextContent("Nothing scheduled");
+  });
+});
+
+describe("PosterStack", () => {
+  it("makes a captioned poster an anchor named by its caption", () => {
+    // The float's reduced-motion check reads matchMedia, which jsdom lacks.
+    window.matchMedia = () => ({ matches: true }) as MediaQueryList;
+    render(
+      <PosterStack
+        posters={[
+          { src: "/a.jpg", alt: "A poster", caption: "Subcarpați live", href: "/events/e/a" },
+          { src: "/b.jpg", alt: "B poster" },
+        ]}
+      />
+    );
+    const link = screen.getByRole("link", { name: "Subcarpați live" });
+    expect(link).toHaveAttribute("href", "/events/e/a");
+    // The uncaptioned poster stays decorative: no anchor, its own alt.
+    expect(screen.getAllByRole("link")).toHaveLength(1);
+    expect(screen.getByAltText("B poster")).toBeInTheDocument();
+  });
+});