@bearmenu/ui 0.8.16 → 0.8.18

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-detail-panel.js

@@ -1,8 +1,8 @@
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-36KEHCET.js';
+import { Button } from '../chunk-5LTILG3L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * EventDoor — a square tile that is a category's entry point: a photograph of
+ * the KIND of night (a stage, a dance floor, a terrace), a scrim, the name.
+ *
+ * A door and an event row must not look alike. `CategoryDeck` fans four event
+ * posters and prints a count, which reads as "these four events"; a card with
+ * a single event's poster reads as "tap = that event" and changes daily. The
+ * 1:1 shape with the name INSIDE the image is what says "door, not event", and
+ * it carries no count — a count is a claim about scale the hub's figures
+ * already make, and on a door it competes with the name.
+ *
+ * Always an anchor: a door with no destination is not a door, so `href` is
+ * required. The scrim is a gradient over a photograph, which is mode-
+ * independent — the same measured treatment `DoorwayTiles` uses.
+ */
+type EventDoorLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type EventDoorProps = {
+    /** The category's name — the anchor's accessible name and the tile's label. */
+    name: string;
+    href: string;
+    imageSrc?: string;
+    /** Rendered when `imageSrc` is absent or fails. Defaults to `<EventPosterFallback />`. */
+    fallback?: React.ReactNode;
+    linkComponent?: React.ComponentType<EventDoorLinkProps>;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+    className?: string;
+};
+declare function EventDoor({ name, href, imageSrc, fallback, linkComponent: LinkComponent, onClick, className, }: EventDoorProps): react_jsx_runtime.JSX.Element;
+declare function EventDoorSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EventDoor, type EventDoorLinkProps, type EventDoorProps, EventDoorSkeleton };

package/dist/components/event-door.js

@@ -0,0 +1,65 @@
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function EventDoor({
+  name,
+  href,
+  imageSrc,
+  fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className
+}) {
+  const [failed, setFailed] = useState(false);
+  const showImage = !!imageSrc && !failed;
+  return /* @__PURE__ */ jsxs(
+    LinkComponent,
+    {
+      href,
+      onClick,
+      className: cn(
+        "group relative block aspect-square overflow-hidden rounded-xl bg-muted",
+        "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",
+        className
+      ),
+      children: [
+        showImage ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: imageSrc,
+              alt: "",
+              loading: "lazy",
+              decoding: "async",
+              className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none",
+              onError: () => setFailed(true)
+            }
+          )
+        ) : fallback,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black/65 via-black/45 to-transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-2 bottom-2 line-clamp-2 text-[12.5px] font-bold leading-[1.2] tracking-[-0.01em] text-white", children: name })
+      ]
+    }
+  );
+}
+function EventDoorSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(Skeleton, { className: cn("aspect-square w-full rounded-xl", className) });
+}
+
+export { EventDoor, EventDoorSkeleton };

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

@@ -42,14 +42,22 @@ type EventHubHeroProps = {
     statsLabel?: string;
     /** The right-column slot — the poster stack in the source design. */
     aside?: React.ReactNode;
+    /**
+     * The text column's last row, under the figures — 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.
+     */
+    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 };

package/dist/components/event-hub-hero.js

@@ -10,13 +10,17 @@ function EventHubHero({
   stats,
   statsLabel,
   aside,
+  footer,
   className
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 16px between the text column and the aside on a phone: with a
+        // tappable poster stack the aside is content, not decoration, and
+        // gets the within-section rhythm rather than a section gap.
+        "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
         className
       ),
       children: [
@@ -82,20 +86,21 @@ function EventHubHero({
                 );
               })
             }
-          )
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: "order-4 pt-1.5 lg:order-none lg:pt-2", children: footer })
         ] }),
         aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
       ]
     }
   );
 }
-function EventHubHeroSkeleton({ aside, className }) {
+function EventHubHeroSkeleton({ aside, footer, className }) {
   return /* @__PURE__ */ jsxs(
     "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-4 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
         className
       ),
       children: [
@@ -116,7 +121,8 @@ function EventHubHeroSkeleton({ aside, className }) {
               ]
             },
             index
-          )) })
+          )) }),
+          footer && /* @__PURE__ */ jsx("div", { className: "order-4 pt-1.5 lg:order-none lg:pt-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[52px] w-full rounded-[14px]" }) })
         ] }),
         aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
       ]

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

@@ -1,7 +1,7 @@
 import { TagGroup } from '../chunk-PX6RICS5.js';
 import { Tag } from '../chunk-MWB7S54O.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/components/event-list-row-wide.js

@@ -1,9 +1,9 @@
 import { Tag } from '../chunk-MWB7S54O.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-36KEHCET.js';
+import { buttonVariants } from '../chunk-5LTILG3L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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

@@ -1,8 +1,8 @@
 import { TagGroup } from '../chunk-PX6RICS5.js';
 import { Tag } from '../chunk-MWB7S54O.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/dist/components/event-tonight-strip.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * 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.
+ */
+type EventTonightStripTone = "live" | "tonight" | "quiet" | "none";
+type EventTonightStripLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+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;
+};
+declare function EventTonightStrip({ tone, lead, details, actionLabel, href, linkComponent: LinkComponent, className, }: EventTonightStripProps): react_jsx_runtime.JSX.Element;
+declare function EventTonightStripSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EventTonightStrip, type EventTonightStripLinkProps, type EventTonightStripProps, EventTonightStripSkeleton, type EventTonightStripTone };

package/dist/components/event-tonight-strip.js

@@ -0,0 +1,67 @@
+import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { Clock, CalendarDays, ArrowRight } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function EventTonightStrip({
+  tone,
+  lead,
+  details = [],
+  actionLabel,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const interactive = !!href;
+  const mark = tone === "live" ? /* @__PURE__ */ jsxs("span", { className: "relative flex h-2.5 w-2.5", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full rounded-full bg-success/40 motion-live-pulse motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2.5 w-2.5 rounded-full bg-success" })
+  ] }) : tone === "tonight" ? /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(
+    CalendarDays,
+    {
+      className: cn("h-4 w-4", tone === "none" ? "text-muted-foreground/70" : "text-muted-foreground"),
+      "aria-hidden": true
+    }
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: mark }),
+    /* @__PURE__ */ jsxs("span", { className: "line-clamp-2 min-w-0 flex-1 text-[13px] leading-[1.3] tabular-nums lg:line-clamp-1 lg:text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: lead }),
+      details.map((detail) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\xB7" }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: detail })
+      ] }, detail)),
+      interactive && actionLabel && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        ". ",
+        actionLabel
+      ] })
+    ] }),
+    interactive && /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+  ] });
+  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 /* @__PURE__ */ jsx(LinkComponent, { href, className: rootClasses, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "status", className: rootClasses, children: body });
+}
+function EventTonightStripSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(Skeleton, { className: cn("h-[52px] w-full rounded-[14px]", className) });
+}
+
+export { EventTonightStrip, EventTonightStripSkeleton };

package/dist/components/facet-group.d.ts

@@ -75,9 +75,16 @@ type FacetGroupProps = Omit<ComponentPropsWithoutRef<"fieldset">, "title" | "chi
     /** e.g. "Show all". Omit to hide the trailing action. */
     moreLabel?: string;
     onMore?: () => void;
+    /**
+     * Whether the trailing action has already expanded the options it controls
+     * — set it when `onMore` reveals more rows in place (and `moreLabel` reads
+     * "Show fewer"), so the button carries `aria-expanded`. Leave it unset when
+     * the action opens another surface.
+     */
+    moreExpanded?: boolean;
     className?: string;
 };
-declare function FacetGroup({ title, icon: Icon, options, selection, name, size, collapsible, defaultOpen, onToggle, moreLabel, onMore, className, ...rest }: FacetGroupProps): react_jsx_runtime.JSX.Element;
+declare function FacetGroup({ title, icon: Icon, options, selection, name, size, collapsible, defaultOpen, onToggle, moreLabel, onMore, moreExpanded, className, ...rest }: FacetGroupProps): react_jsx_runtime.JSX.Element;
 type FacetGroupSkeletonProps = {
     /** How many option rows to draw — match the expected/last-known option count. */
     optionCount?: number;

package/dist/components/facet-group.js

@@ -26,6 +26,7 @@ function FacetGroup(_a) {
     onToggle,
     moreLabel,
     onMore,
+    moreExpanded,
     className
   } = _b, rest = __objRest(_b, [
     "title",
@@ -39,6 +40,7 @@ function FacetGroup(_a) {
     "onToggle",
     "moreLabel",
     "onMore",
+    "moreExpanded",
     "className"
   ]);
   const isSingle = selection === "single";
@@ -191,6 +193,7 @@ function FacetGroup(_a) {
         {
           type: "button",
           onClick: onMore,
+          "aria-expanded": moreExpanded,
           className: "cursor-pointer pt-[11px] text-[12.5px] font-bold text-primary transition-colors duration-150 hover:text-primary/80 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
           children: moreLabel
         }