@bearmenu/ui 0.8.6 → 0.8.8

package/dist/components/drift-rail.d.ts

@@ -2,22 +2,36 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * DriftRail — an infinite horizontal marquee for logos, tag chips or small
- * poster tiles. The caller passes one set of children; the component renders
- * a second, `aria-hidden` copy right after it so a `translateX(-50%)` loop is
- * seamless. Because the loop depends on the duplicate being pixel-identical
- * to the first pass, keep `children` a fixed, ordered list — no per-render
- * randomisation.
+ * poster tiles that the reader can take hold of. The caller passes one set of
+ * children; the component renders a second, `aria-hidden` copy right after it
+ * so the loop is seamless. Because the loop depends on the duplicate being
+ * pixel-identical to the first pass, keep `children` a fixed, ordered list —
+ * no per-render randomisation.
  *
- * Motion is scoped to this instance via a generated id (no shared stylesheet,
- * no class collisions between multiple rails on one page) and is paused two
- * ways, per the source design: an `IntersectionObserver` stops the loop the
- * moment the rail scrolls off-screen, and `prefers-reduced-motion: reduce`
- * removes the animation outright rather than merely slowing it.
+ * IT IS A SCROLLER THAT DRIFTS, NOT AN ANIMATION. It used to be a CSS
+ * `translateX` keyframe, which is cheap but cannot be grabbed: a finger on it
+ * did nothing, and a marquee that ignores the hand on it reads as a broken
+ * scroller. Now the rail is a real horizontal scroll container with the
+ * scrollbar hidden, and a `requestAnimationFrame` loop advances `scrollLeft`
+ * at `width / durationSeconds` per second. When the scroll position passes
+ * the first copy it is wrapped back by exactly one copy's width — the two
+ * copies are identical, so the jump is invisible — and the same wrap holds
+ * while the reader scrolls, in either direction, so there is no end to hit.
+ *
+ * THE READER WINS. A touch scrolls natively (momentum and all); a mouse drag
+ * scrolls the rail by the drag distance; a wheel works because it is a
+ * scroller. Any of those stops the drift, and it resumes a few seconds after
+ * the last interaction. Hover pauses it too (`pauseOnHover`), and an
+ * `IntersectionObserver` stops the loop off-screen so the page is not doing
+ * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
+ * the rail stays scrollable by hand, which is more than the static strip it
+ * used to collapse to.
  */
 type DriftRailProps = {
     children: React.ReactNode;
     /** Runs the loop right-to-left instead of left-to-right. */
     reverse?: boolean;
+    /** Seconds for one full pass of the children. */
     durationSeconds?: number;
     /** Pauses the loop while the pointer hovers the rail. */
     pauseOnHover?: boolean;

package/dist/components/drift-rail.js

@@ -1,3 +1,3 @@
-export { DriftRail } from '../chunk-GPH6L4DX.js';
+export { DriftRail } from '../chunk-AHL45DD2.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/event-card.d.ts

@@ -61,6 +61,14 @@ type EventCardProps = {
     liveStatus?: string;
     /** Hide the day/time line — the timeline supplies its own hour heading. */
     hideWhen?: boolean;
+    /**
+     * Already over — dims the poster, mutes the title and shows the `endedLabel`
+     * chip. Never row-level opacity, which composites the text below AA. Same
+     * contract as `EventCompactRow`.
+     */
+    isEnded?: boolean;
+    /** Chip text for an ended event, e.g. "Ended". Required to render the chip. */
+    endedLabel?: string;
     /** Overrides the day label when the card appears outside its own day section. */
     dayLabel?: string;
     /** Append the entry fee to the meta line. Off by default, matching the design's base card. */

package/dist/components/event-card.js

@@ -25,6 +25,8 @@ var EventCard = memo(function EventCard2({
   tags,
   liveStatus,
   hideWhen,
+  isEnded,
+  endedLabel,
   dayLabel,
   showPrice,
   href,
@@ -36,6 +38,8 @@ var EventCard = memo(function EventCard2({
 }) {
   var _a;
   const [imgError, setImgError] = useState(false);
+  const showEnded = isEnded && !!endedLabel;
+  const time = hideWhen ? "" : formatters.time(event.starts_at);
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
   const venue = (_a = event.place_name) != null ? _a : event.location;
@@ -45,6 +49,7 @@ var EventCard = memo(function EventCard2({
       {
         className: cn(
           "relative overflow-hidden rounded-xl bg-muted",
+          isEnded && "opacity-45",
           posterAspect === "3/4" ? "aspect-[3/4]" : posterAspect === "4/5" ? "aspect-[4/5]" : "aspect-[4/3]"
         ),
         children: [
@@ -65,10 +70,19 @@ var EventCard = memo(function EventCard2({
           ) : fallback,
           /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-2 top-2 flex items-start justify-between gap-2", children: [
             badge ? /* @__PURE__ */ jsx("span", { className: cn(PILL_BASE, "bg-black/55 text-white"), children: badge }) : /* @__PURE__ */ jsx("span", {}),
-            fee.kind === "free" && /* @__PURE__ */ jsxs("span", { className: cn(PILL_BASE, "bg-success font-bold text-success-foreground"), children: [
-              /* @__PURE__ */ jsx(Gift, { className: "h-3 w-3", "aria-hidden": true }),
-              labels.free
-            ] })
+            fee.kind === "free" && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  PILL_BASE,
+                  "bg-success font-bold text-success-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Gift, { className: "h-3 w-3", "aria-hidden": true }),
+                  labels.free
+                ]
+              }
+            )
           ] }),
           tagLabel && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 bottom-2 flex gap-1", children: /* @__PURE__ */ jsx("span", { className: cn(PILL_BASE, "bg-black/55 text-white"), children: tagLabel }) })
         ]
@@ -79,7 +93,8 @@ var EventCard = memo(function EventCard2({
       {
         className: cn(
           "mt-2.5 leading-[1.35]",
-          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold"
+          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold",
+          isEnded && "text-muted-foreground"
         ),
         children: event.title
       }
@@ -90,8 +105,10 @@ var EventCard = memo(function EventCard2({
     ] }),
     !hideWhen && /* @__PURE__ */ jsxs("div", { className: "mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: dayLabel != null ? dayLabel : formatters.day(event.starts_at) }),
-      /* @__PURE__ */ jsx("span", { className: "text-border", "aria-hidden": true, children: "\xB7" }),
-      /* @__PURE__ */ jsx("span", { children: formatters.time(event.starts_at) }),
+      time && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-border", "aria-hidden": true, children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: time })
+      ] }),
       showPrice && fee.kind === "paid" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "text-border", "aria-hidden": true, children: "\xB7" }),
         /* @__PURE__ */ jsx("span", { children: formatters.price(fee.amountRon) })
@@ -101,7 +118,8 @@ var EventCard = memo(function EventCard2({
     liveStatus && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5 text-xs font-bold text-success", children: [
       /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
       liveStatus
-    ] })
+    ] }),
+    showEnded && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "default", className: "font-extrabold", children: endedLabel }) })
   ] });
   const rootClasses = cn(
     "flex min-w-0 flex-col text-left",
@@ -120,7 +138,15 @@ var EventCard = memo(function EventCard2({
     );
   }
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: rootClasses,
+        onClick: (e) => onClick(event, e),
+        children: body
+      }
+    );
   }
   return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
 });
@@ -130,32 +156,39 @@ function EventCardSkeleton({
   hideWhen,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: cn("flex min-w-0 flex-col text-left", className), children: [
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        className: cn(
-          posterAspect === "3/4" ? "aspect-[3/4]" : posterAspect === "4/5" ? "aspect-[4/5]" : "aspect-[4/3]"
-        )
-      }
-    ),
-    emphasis ? /* @__PURE__ */ jsxs("div", { className: "mt-2.5 space-y-2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/2" })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "mt-2.5 space-y-1.5", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/3" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 shrink-0 rounded-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
-    ] }),
-    !hideWhen && /* @__PURE__ */ jsxs("div", { className: "mt-[3px] flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("flex min-w-0 flex-col text-left", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: cn(
+              posterAspect === "3/4" ? "aspect-[3/4]" : posterAspect === "4/5" ? "aspect-[4/5]" : "aspect-[4/3]"
+            )
+          }
+        ),
+        emphasis ? /* @__PURE__ */ jsxs("div", { className: "mt-2.5 space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/2" })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "mt-2.5 space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/3" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 shrink-0 rounded-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+        ] }),
+        !hideWhen && /* @__PURE__ */ jsxs("div", { className: "mt-[3px] flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" })
+        ] })
+      ]
+    }
+  );
 }
 
 export { EventCard, EventCardSkeleton };

package/dist/components/event-compact-row.d.ts

@@ -14,10 +14,25 @@ import { EventPreview, EventCardLabels, EventFormatters } from './event-types.js
  *
  * THIS ROW DOES NOT DRAW DIVIDERS; ITS CONTAINER DOES. `<HourGroup>` already
  * draws the rule under the hour heading, so a row-level top separator here
- * doubled it directly beneath every hour. `<EventListRow>` and
- * `<EventListRowWide>` are different: they stack in a plain list with no
- * other rule around them, so their own top separator is the only one there —
- * do not carry this rule over to them.
+ * doubled it directly beneath every hour; `<HourBand>` rules between its rows
+ * with a wrapper. `<EventListRow>` and `<EventListRowWide>` are different:
+ * they stack in a plain list with no other rule around them, so their own top
+ * separator is the only one there — do not carry this rule over to them.
+ *
+ * STATE LIVES ON THE META LINE. `isLive` adds the on-air chip and `isEnded`
+ * the ended chip beside the time and venue, so a row's state is read in the
+ * same glance as its facts. Ended dims the POSTER and moves the title to
+ * `--muted-foreground` — never row-level opacity, which composites the text
+ * below AA.
+ *
+ * THE PRICE IS ON THE LAST ROW, right-aligned beside the tags, not on the
+ * title line. Two bold things on one line compete — the title and a price
+ * both in 700 read as one shout — and the title is the thing the reader is
+ * scanning for. `showPrice` renders it (free in `--success`, paid in
+ * `--foreground`); without it the row keeps its trailing free pill for the
+ * hub's venue block. This is ONE row for the timeline and the list view:
+ * the list used to have its own, and the reader met two anatomies for the
+ * same object.
  *
  * Same contract as the rest: DS-owned view model, injected labels/formatters,
  * plain `<img>`, anchor whenever `href` is given.
@@ -32,7 +47,8 @@ type EventCompactRowProps = {
     event: EventPreview;
     labels: EventCardLabels;
     formatters: EventFormatters;
-    /** Drops the leading time from the sub line. */
+    /** Drops the leading time from the sub line. An empty `formatters.time`
+     *  result (hour unknown) drops it the same way, without the prop. */
     hideTime?: boolean;
     /**
      * Replaces the default "time · venue" sub-line entirely. For surfaces where
@@ -50,6 +66,18 @@ type EventCompactRowProps = {
      *  rather than truncate, so a chip's own text is never cut mid-word. Cap
      *  the count at the call site — this row does not. */
     tags?: string[];
+    /** Currently running — adds the `labels.liveNow` chip to the meta line. */
+    isLive?: boolean;
+    /** Already over — dims the poster, mutes the title, adds the `endedLabel` chip. */
+    isEnded?: boolean;
+    /** Chip text for an ended event, e.g. "Ended". Required to render the chip. */
+    endedLabel?: string;
+    /**
+     * Prints the fee on the meta line — `labels.free` in `--success`, a paid
+     * amount via `formatters.price` — instead of the trailing free pill. An
+     * unknown fee prints nothing, same as every sibling row.
+     */
+    showPrice?: boolean;
     size?: "sm" | "default";
     href?: string;
     linkComponent?: React.ComponentType<EventCompactRowLinkProps>;
@@ -67,6 +95,6 @@ type EventCompactRowSkeletonProps = {
     className?: string;
 };
 /** Mirrors `<EventCompactRow>`'s geometry exactly so nothing shifts when data lands. */
-declare function EventCompactRowSkeleton({ size, className }: EventCompactRowSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function EventCompactRowSkeleton({ size, className, }: EventCompactRowSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { EventCompactRow, type EventCompactRowLinkProps, type EventCompactRowProps, EventCompactRowSkeleton, type EventCompactRowSkeletonProps };

package/dist/components/event-compact-row.js

@@ -6,6 +6,7 @@ import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { memo, useState } from 'react';
+import { Radio } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function DefaultLink(_a) {
@@ -19,6 +20,10 @@ var EventCompactRow = memo(function EventCompactRow2({
   hideTime,
   subtitle,
   tags,
+  isLive,
+  isEnded,
+  endedLabel,
+  showPrice,
   size = "default",
   href,
   linkComponent: LinkComponent = DefaultLink,
@@ -33,50 +38,108 @@ var EventCompactRow = memo(function EventCompactRow2({
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
   const venue = (_a = event.place_name) != null ? _a : event.location;
+  const time = formatters.time(event.starts_at);
+  const priceText = fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : void 0;
+  const showEnded = isEnded && !!endedLabel;
+  const separator = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" });
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[9px] bg-muted", children: showPoster ? (
-      // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: event.poster_url,
-          alt: "",
-          loading: priority ? "eager" : "lazy",
-          decoding: "async",
-          className: "h-full w-full object-cover",
-          onError: () => setImgError(true)
-        }
-      )
-    ) : (
-      // A bare `bg-muted` rectangle was survivable at 34px. At 64x80 beside
-      // real posters it reads as a broken image rather than an absent one —
-      // so this row finally joins every sibling in the family in having a
-      // designed fallback.
-      fallback
-    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[10px] bg-muted",
+          isEnded && "opacity-45"
+        ),
+        children: showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: event.poster_url,
+              alt: "",
+              loading: priority ? "eager" : "lazy",
+              decoding: "async",
+              className: "h-full w-full object-cover",
+              onError: () => setImgError(true)
+            }
+          )
+        ) : (
+          // A bare `bg-muted` rectangle was survivable at 34px. At 58x72 beside
+          // real posters it reads as a broken image rather than an absent one —
+          // so this row finally joins every sibling in the family in having a
+          // designed fallback.
+          fallback
+        )
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "font-semibold leading-[1.35]",
+            "leading-[1.3]",
             "transition-colors duration-150 motion-reduce:transition-none",
-            isSm ? "text-[13.5px]" : "text-[13px]",
+            isSm ? "text-[14.5px] lg:text-[13.5px]" : "text-[14px] lg:text-[13px]",
+            isEnded ? "font-semibold text-muted-foreground" : "font-bold text-foreground lg:font-semibold",
             (href || onClick) && "group-hover:text-primary"
           ),
           children: event.title
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "truncate text-[11.5px] text-muted-foreground", children: subtitle ? subtitle : /* @__PURE__ */ jsxs(Fragment, { children: [
-        !hideTime && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: formatters.time(event.starts_at) }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \xB7 " })
-        ] }),
-        venue
-      ] }) }),
-      tags && tags.length > 0 && /* @__PURE__ */ jsx(TagGroup, { className: "mt-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", children: tag }, tag)) })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground",
+            isLive || showEnded ? "flex-wrap" : "truncate"
+          ),
+          children: [
+            subtitle ? subtitle : /* @__PURE__ */ jsxs(Fragment, { children: [
+              !hideTime && time && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: time }),
+                separator
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: venue })
+            ] }),
+            isLive && /* @__PURE__ */ jsxs(
+              Tag,
+              {
+                size: "sm",
+                variant: "success",
+                className: "shrink-0 whitespace-nowrap font-extrabold",
+                children: [
+                  /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5", "aria-hidden": true }),
+                  labels.liveNow
+                ]
+              }
+            ),
+            showEnded && /* @__PURE__ */ jsx(
+              Tag,
+              {
+                size: "sm",
+                variant: "default",
+                className: "shrink-0 whitespace-nowrap font-extrabold",
+                children: endedLabel
+              }
+            )
+          ]
+        }
+      ),
+      (tags && tags.length > 0 || showPrice && priceText) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [
+        tags && tags.length > 0 ? /* @__PURE__ */ jsx(TagGroup, { className: "min-w-0 flex-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", children: tag }, tag)) }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        showPrice && priceText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-[13px] tabular-nums",
+              fee.kind === "free" ? "font-semibold text-success" : "font-bold text-foreground"
+            ),
+            children: priceText
+          }
+        )
+      ] })
     ] }),
-    fee.kind === "free" && /* @__PURE__ */ jsx(
+    !showPrice && fee.kind === "free" && /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
@@ -88,7 +151,7 @@ var EventCompactRow = memo(function EventCompactRow2({
     )
   ] });
   const rootClasses = cn(
-    "group relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+    "group relative -mx-2.5 flex w-full items-start gap-3 rounded-lg px-2.5 py-[11px] text-left lg:gap-[11px] lg:py-2",
     "transition-colors duration-150 motion-reduce:transition-none",
     (href || onClick) && "cursor-pointer hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     className
@@ -105,25 +168,44 @@ var EventCompactRow = memo(function EventCompactRow2({
     );
   }
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", className: rootClasses, onClick: (e) => onClick(event, e), children: body });
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: rootClasses,
+        onClick: (e) => onClick(event, e),
+        children: body
+      }
+    );
   }
   return /* @__PURE__ */ jsx("div", { className: rootClasses, children: body });
 });
-function EventCompactRowSkeleton({ size = "default", className }) {
+function EventCompactRowSkeleton({
+  size = "default",
+  className
+}) {
   const isSm = size === "sm";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-hidden": "true",
       className: cn(
-        "relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+        "relative -mx-2.5 flex w-full items-start gap-3 rounded-lg px-2.5 py-[11px] text-left lg:gap-[11px] lg:py-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[9px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[10px]" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: cn(isSm ? "h-[13.5px]" : "h-[13px]", "w-2/5") }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-0.5 h-[11.5px] w-1/3" })
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              className: cn(
+                isSm ? "h-[14.5px] lg:h-[13.5px]" : "h-[14px] lg:h-[13px]",
+                "w-3/5"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-[11.5px] w-1/3" })
         ] })
       ]
     }

package/dist/components/event-day-header.js

@@ -27,7 +27,9 @@ function EventDayHeader({
       {
         className: cn(
           "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
-          large ? "text-[58px]" : "text-[40px]"
+          // `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]"
         ),
         children: dayNumber
       }

package/dist/components/event-day-separator.d.ts

@@ -25,6 +25,12 @@ import { ElementType } from 'react';
  * `<Separator>` above the label), not the weight.
  */
 type EventDaySeparatorProps = {
+    /**
+     * `always` (default) draws the trailing rule at every width. `lg` drops it
+     * below `lg`, where the list is an app sheet whose day heads are bold
+     * labels alone — the rows below rule themselves — and keeps it from `lg`.
+     */
+    rule?: "always" | "lg";
     label: string;
     count?: string;
     size?: "sm" | "default";
@@ -32,7 +38,7 @@ type EventDaySeparatorProps = {
     as?: ElementType;
     className?: string;
 };
-declare function EventDaySeparator({ label, count, size, as: Tag, className, }: EventDaySeparatorProps): react_jsx_runtime.JSX.Element;
+declare function EventDaySeparator({ label, count, size, as: Tag, className, rule, }: EventDaySeparatorProps): react_jsx_runtime.JSX.Element;
 type EventDaySeparatorSkeletonProps = {
     /** Matches `EventDaySeparatorProps["size"]`. */
     size?: "sm" | "default";

package/dist/components/event-day-separator.js

@@ -9,7 +9,8 @@ function EventDaySeparator({
   count,
   size = "default",
   as: Tag = "h2",
-  className
+  className,
+  rule = "always"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -22,7 +23,7 @@ function EventDaySeparator({
       children: [
         /* @__PURE__ */ jsx(Tag, { className: cn("font-semibold", size === "sm" ? "text-[13px]" : "text-sm"), children: label }),
         count && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", size === "sm" ? "text-[11.5px]" : "text-xs"), children: count }),
-        /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
+        /* @__PURE__ */ jsx(Separator, { className: cn("flex-1", rule === "lg" && "hidden lg:block") })
       ]
     }
   );

package/dist/components/event-hub-hero.d.ts

@@ -2,9 +2,20 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 /**
- * EventHubHero — the hub's opening block: an eyebrow, a big headline, an
- * intro line and a stats row on the left; an arbitrary slot (the poster
- * stack, in the source design) on the right. Stacks on mobile.
+ * EventHubHero — the hub's opening block. On desktop: an eyebrow, a big
+ * headline, an intro paragraph and a stats row on the left; an arbitrary slot
+ * (the poster stack, in the source design) on the right.
+ *
+ * BELOW `lg` IT IS A MASTHEAD, NOT A HERO. One headline line, the eyebrow
+ * demoted to a sub-line beneath it, no intro, and the figures as a swipeable
+ * rail of chips that bleeds to the screen edge. The first real content lands
+ * roughly 250px sooner than under the web-shaped hero — on a phone the page
+ * should show, not narrate. Same markup at every width; only the classes
+ * change, so the copy is authored once.
+ *
+ * A stat with `tone: "live"` is the one that is happening right now: its
+ * chip takes a `--success` border and value, the same live colour every
+ * events surface uses.
  *
  * All copy and stat values arrive pre-formatted — the DS holds no `Intl`
  * locale and does not format numbers.
@@ -12,6 +23,8 @@ import * as React from 'react';
 type EventHubHeroStat = {
     value: string;
     label: string;
+    /** `live` marks the figure that is happening right now. */
+    tone?: "default" | "live";
 };
 type EventHubHeroProps = {
     /** Small caps-style label above the title, e.g. "Updated today". */
@@ -19,11 +32,19 @@ type EventHubHeroProps = {
     title: string;
     intro: string;
     stats: EventHubHeroStat[];
+    /**
+     * Accessible name for the stats rail, e.g. "Key figures". When given, the
+     * rail is a named, focusable region so a keyboard can reach chips clipped
+     * by the phone's edge. Optional so existing consumers keep compiling — but
+     * pass it: without a name the rail cannot be focusable, and a phone reader
+     * on a keyboard cannot reach the last figures.
+     */
+    statsLabel?: string;
     /** The right-column slot — the poster stack in the source design. */
     aside?: React.ReactNode;
     className?: string;
 };
-declare function EventHubHero({ eyebrow, title, intro, stats, aside, className }: EventHubHeroProps): react_jsx_runtime.JSX.Element;
+declare function EventHubHero({ eyebrow, title, intro, stats, statsLabel, aside, className, }: EventHubHeroProps): react_jsx_runtime.JSX.Element;
 type EventHubHeroSkeletonProps = {
     /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
     aside?: React.ReactNode;