@bearmenu/ui 0.8.17 → 0.8.19

package/dist/{chunk-WYTJR2YU.js → chunk-5CPBSNWQ.js}

@@ -12,6 +12,9 @@ var 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%]",
@@ -25,7 +28,9 @@ var 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/dist/chunk-BRXI6EDO.js

@@ -0,0 +1,84 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { Radio } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
+var TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+function TimelineHourPuck({
+  time,
+  isLive,
+  liveLabel,
+  variant = "responsive",
+  className
+}) {
+  const chipClasses = cn(
+    "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] border border-transparent px-1 text-[12px] font-medium",
+    isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
+  );
+  const stationClasses = cn(
+    "rounded-[7px] border bg-background px-[7px] py-[3px] text-[12.5px] font-medium",
+    isLive ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS) : "border-border text-foreground"
+  );
+  const glyphClasses = "h-2.5 w-2.5 shrink-0";
+  const labelHiddenClasses = "sr-only";
+  const labelStationClasses = cn(
+    "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
+    "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+  );
+  const labelResponsiveClasses = cn(
+    "absolute -m-px h-px w-px overflow-hidden whitespace-nowrap p-0 [clip:rect(0,0,0,0)]",
+    "lg:m-0 lg:h-auto lg:w-auto lg:overflow-visible lg:px-1 lg:[clip:auto]",
+    "lg:top-[calc(100%+6px)] lg:bg-background lg:text-[9.5px] lg:font-extrabold lg:tracking-[0.08em] lg:text-success"
+  );
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative flex justify-center", className), children: [
+    isLive && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes ${LIVE_PUCK_PULSE_CLASS} {
+            0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 40%, transparent); }
+            50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 0%, transparent); }
+          }
+          .${LIVE_PUCK_PULSE_CLASS} {
+            animation: ${LIVE_PUCK_PULSE_CLASS} 2.4s ease-in-out infinite;
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .${LIVE_PUCK_PULSE_CLASS} { animation: none; }
+          }
+        ` }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "whitespace-nowrap font-mono tabular-nums",
+          variant === "chip" && chipClasses,
+          variant === "station" && stationClasses,
+          variant === "responsive" && cn(
+            chipClasses,
+            // The station look from `lg`: bordered, background-filled,
+            // content-width. Every chip utility above has an `lg:` twin.
+            // `min-w-max`, NOT `min-w-0`: the host centres the puck inside
+            // a zero-width flex box, and a flex item allowed to shrink to 0
+            // collapses to a 24px square behind its own text.
+            "lg:h-auto lg:min-w-max lg:shrink-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
+            isLive && "lg:border-success/40 lg:bg-background lg:text-success"
+          )
+        ),
+        children: [
+          isLive && variant !== "station" && /* @__PURE__ */ jsx(Radio, { className: cn(glyphClasses, variant === "responsive" && "lg:hidden"), "aria-hidden": true }),
+          time
+        ]
+      }
+    ),
+    isLive && !!liveLabel && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          variant === "chip" && labelHiddenClasses,
+          variant === "station" && labelStationClasses,
+          variant === "responsive" && labelResponsiveClasses
+        ),
+        children: liveLabel
+      }
+    )
+  ] });
+}
+
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck };

package/dist/{chunk-54FQQZZJ.js → chunk-EQYB4Q77.js}

@@ -1,4 +1,4 @@
-import { SnapRail, SnapRailDots } from './chunk-WYTJR2YU.js';
+import { SnapRail, SnapRailDots } from './chunk-5CPBSNWQ.js';
 import { PhotoGround } from './chunk-SWD6CJ35.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import * as React from 'react';

package/dist/chunk-QRSIJC4X.js

@@ -0,0 +1,156 @@
+import { TimelineHourPuck, TIMELINE_MOBILE_GUTTER_CLASS } from './chunk-BRXI6EDO.js';
+import { Separator } from './chunk-NWZGSLPU.js';
+import { Skeleton } from './chunk-XBBEX4SF.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import * as React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var HEADING_CENTRE_LG = "lg:top-[30px]";
+function TimelineHour({
+  time,
+  role = "hour",
+  isLive,
+  liveLabel,
+  countLabel,
+  note,
+  layout = "cards",
+  children,
+  overflow,
+  className
+}) {
+  const isHero = role === "hero";
+  const isContinuation = role === "continuation";
+  const isUnscheduled = role === "unscheduled";
+  const hasStation = !isUnscheduled;
+  const isCards = layout === "cards";
+  const items = React.Children.toArray(children);
+  const overflowItems = React.Children.toArray(overflow);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-timeline-hour": role,
+      className: cn(
+        "relative flex flex-col pt-2.5",
+        // The phone gutter: the puck's column plus the 12px gap `HourBand` had.
+        hasStation && "pl-[70px] lg:pl-0",
+        "lg:pt-[22px]",
+        isHero ? cn(
+          // The lane. Placed by the grid, not by source order; `self-start`
+          // is load-bearing — a stretched item would be the day's full
+          // height and never stick.
+          // Longhands, not `grid-row`: a `/` inside an arbitrary value
+          // collides with the opacity-modifier parse.
+          "lg:col-start-1 lg:row-start-1 lg:[grid-row-end:span_var(--timeline-rows)] lg:self-start",
+          "lg:sticky lg:top-[var(--timeline-lane-top)] lg:pt-3.5"
+        ) : "lg:col-start-3",
+        className
+      ),
+      children: [
+        hasStation && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            TimelineHourPuck,
+            {
+              time,
+              isLive,
+              liveLabel,
+              className: cn(
+                "absolute left-0 top-2.5",
+                TIMELINE_MOBILE_GUTTER_CLASS,
+                // Out on the spine, centred on the heading rule.
+                "lg:left-[calc(var(--timeline-spine)*-0.5)] lg:w-0 lg:-translate-y-1/2",
+                HEADING_CENTRE_LG,
+                isContinuation && "invisible lg:visible",
+                isHero && "lg:hidden"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Separator,
+            {
+              orientation: "vertical",
+              className: cn(
+                "absolute -bottom-2.5 left-[29px] top-10 h-auto -translate-x-1/2 lg:hidden",
+                isLive && "bg-success/30"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "items-center gap-2.5",
+              isUnscheduled ? "flex h-4" : "hidden lg:flex lg:h-4",
+              isHero && "lg:hidden"
+            ),
+            children: [
+              isUnscheduled && /* @__PURE__ */ jsx("span", { className: "font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs", children: time }),
+              /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
+              countLabel && /* @__PURE__ */ jsx("span", { className: "text-[10.5px] text-muted-foreground/70 lg:text-[11px]", children: countLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-col",
+              isCards && "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3",
+              isCards && isHero && "lg:flex lg:pt-0",
+              isUnscheduled && isCards && "pt-3.5"
+            ),
+            children: isCards ? items : items.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
+              index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+              child
+            ] }, index))
+          }
+        ),
+        overflowItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2", children: overflowItems.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
+          index > 0 && /* @__PURE__ */ jsx(Separator, { className: "hidden lg:block" }),
+          child
+        ] }, index)) }),
+        note && /* @__PURE__ */ jsx("p", { className: "pt-[9px] text-[11.5px] text-muted-foreground", children: note })
+      ]
+    }
+  );
+}
+function TimelineHourSkeleton({ cardCount = 2, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("relative flex flex-col pl-[70px] pt-2.5 lg:col-start-3 lg:pl-0 lg:pt-[22px]", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: cn(
+              "absolute left-0 top-2.5 h-6 rounded-[7px]",
+              TIMELINE_MOBILE_GUTTER_CLASS,
+              "lg:left-[calc(var(--timeline-spine)*-0.5)] lg:h-[26px] lg:w-14 lg:-translate-x-1/2 lg:-translate-y-1/2",
+              HEADING_CENTRE_LG
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Separator,
+          {
+            orientation: "vertical",
+            className: "absolute -bottom-2.5 left-[29px] top-10 h-auto -translate-x-1/2 lg:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "hidden h-4 items-center gap-2.5 lg:flex", children: [
+          /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-12" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3", children: Array.from({ length: cardCount }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-xl" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-4/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
+        ] }, index)) })
+      ]
+    }
+  );
+}
+
+export { TimelineHour, TimelineHourSkeleton };

package/dist/components/concept-compare-rail.js

@@ -1,5 +1,5 @@
-export { ConceptCompareRail } from '../chunk-54FQQZZJ.js';
-import '../chunk-WYTJR2YU.js';
+export { ConceptCompareRail } from '../chunk-EQYB4Q77.js';
+import '../chunk-5CPBSNWQ.js';
 import '../chunk-SWD6CJ35.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/concept-compare.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
-import { ConceptCompareRail } from '../chunk-54FQQZZJ.js';
-import '../chunk-WYTJR2YU.js';
+import { ConceptCompareRail } from '../chunk-EQYB4Q77.js';
+import '../chunk-5CPBSNWQ.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-SWD6CJ35.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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

@@ -37,8 +37,22 @@ 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. */
@@ -59,8 +73,12 @@ 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

package/dist/components/event-card.js

@@ -20,6 +20,7 @@ var EventCard = memo(function EventCard2({
   formatters,
   posterAspect = "4/3",
   emphasis,
+  density = "card",
   badge,
   tagLabel,
   tags,
@@ -39,7 +40,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 time = hideWhen === true ? "" : formatters.time(event.starts_at);
+  const isRowLg = density === "row-lg";
   const fee = resolveEventEntryFee(event);
   const showPoster = !!event.poster_url && !imgError;
   const venue = (_a = event.place_name) != null ? _a : event.location;
@@ -50,7 +52,9 @@ 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]"
+          posterAspect === "3/4" ? "aspect-[3/4]" : 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]"
         ),
         children: [
           showPoster ? (
@@ -68,62 +72,103 @@ 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
-                ]
-              }
-            )
-          ] }),
-          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 }) })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute inset-x-2 top-2 flex items-start justify-between gap-2",
+                isRowLg && "lg:hidden"
+              ),
+              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
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          tagLabel && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-x-2 bottom-2 flex gap-1",
+                isRowLg && "lg:hidden"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: cn(PILL_BASE, "bg-black/55 text-white"), children: tagLabel })
+            }
+          )
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
-      "h3",
-      {
-        className: cn(
-          "mt-2.5 leading-[1.35]",
-          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold",
-          isEnded && "text-muted-foreground"
-        ),
-        children: event.title
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-xs font-medium text-foreground/85", children: [
-      /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
-    ] }),
-    !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) }),
-      time && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-border", "aria-hidden": true, children: "\xB7" }),
-        /* @__PURE__ */ jsx("span", { children: time })
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col", isRowLg && "lg:flex-1"), children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          className: cn(
+            "mt-2.5 leading-[1.35]",
+            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"
+          ),
+          children: event.title
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-xs font-medium text-foreground/85", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
+      ] }),
+      hideWhen !== true && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground",
+            hideWhen === "below-lg" && "hidden lg:flex"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: dayLabel != null ? dayLabel : formatters.day(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) })
+            ] })
+          ]
+        }
+      ),
+      (tags && tags.length > 0 || isRowLg && fee.kind === "free") && /* @__PURE__ */ jsxs(TagGroup, { className: "mt-1.5", children: [
+        tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", children: tag }, tag)),
+        isRowLg && fee.kind === "free" && /* @__PURE__ */ jsxs(Tag, { size: "sm", variant: "success", className: "hidden font-bold lg:inline-flex", children: [
+          /* @__PURE__ */ jsx(Gift, { className: "h-3 w-3", "aria-hidden": true }),
+          labels.free
+        ] })
+      ] }),
+      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
       ] }),
-      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) })
-      ] })
-    ] }),
-    tags && tags.length > 0 && /* @__PURE__ */ jsx(TagGroup, { className: "mt-1.5", children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", children: tag }, tag)) }),
-    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 }) })
+      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",
+    // 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
   );
   if (href) {

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

@@ -37,10 +37,12 @@ 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;

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

@@ -21,6 +21,7 @@ function EventDayHeader({
 }) {
   const isInteractive = !!href || !!onClick;
   const large = size === "default";
+  const responsive = size === "responsive";
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -29,16 +30,21 @@ 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]"
         ),
         children: dayNumber
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: large ? "pb-1" : "pb-0.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(large ? "pb-1" : "pb-0.5", responsive && "lg:pb-1"), children: [
       /* @__PURE__ */ jsx(
         "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"
+          ),
           children: weekday
         }
       ),
@@ -47,7 +53,8 @@ function EventDayHeader({
         {
           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]"
           ),
           children: meta
         }
@@ -67,6 +74,7 @@ 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
       ),
       children: [

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

@@ -42,14 +42,24 @@ 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;
 };
-declare function EventHubHero({ eyebrow, title, intro, stats, statsLabel, aside, className, }: EventHubHeroProps): react_jsx_runtime.JSX.Element;
+declare function EventHubHero({ eyebrow, title, intro, stats, statsLabel, aside, footer, 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;
+    /** Reserves the `footer` row — the tonight strip's 52px. */
+    footer?: boolean;
     className?: string;
 };
-declare function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function EventHubHeroSkeleton({ aside, footer, className }: EventHubHeroSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { EventHubHero, type EventHubHeroProps, EventHubHeroSkeleton, type EventHubHeroSkeletonProps, type EventHubHeroStat };