@bearmenu/ui 0.8.7 → 0.8.9

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;

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

@@ -3,7 +3,15 @@ import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function EventHubHero({ eyebrow, title, intro, stats, aside, className }) {
+function EventHubHero({
+  eyebrow,
+  title,
+  intro,
+  stats,
+  statsLabel,
+  aside,
+  className
+}) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -12,14 +20,69 @@ function EventHubHero({ eyebrow, title, intro, stats, aside, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[11.5px] font-extrabold tracking-[0.12em] text-muted-foreground", children: eyebrow }),
-          /* @__PURE__ */ jsx("h1", { className: "text-[31px] font-black leading-[1.05] tracking-[-0.035em] text-foreground md:text-[42px] md:tracking-[-0.04em]", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "max-w-[520px] text-[14px] leading-[1.6] text-muted-foreground md:text-[15px] md:leading-[1.65]", children: intro }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-[22px] pt-1.5 md:gap-[30px]", children: stats.map((stat) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[24px] font-black leading-none tracking-[-0.03em] tabular-nums text-foreground md:text-[30px]", children: stat.value }),
-            /* @__PURE__ */ jsx("span", { className: "mt-1 text-[11px] text-muted-foreground md:mt-[5px] md:text-[12.5px]", children: stat.label })
-          ] }, stat.label)) })
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 lg:gap-4", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "order-2 text-[13px] text-muted-foreground",
+                "lg:order-none lg:text-[11.5px] lg:font-extrabold lg:tracking-[0.12em]"
+              ),
+              children: eyebrow
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "order-1 text-[26px] font-black leading-[1.1] tracking-[-0.035em] text-foreground",
+                "lg:order-none lg:text-[42px] lg:leading-[1.05] lg:tracking-[-0.04em]"
+              ),
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "hidden max-w-[520px] text-[15px] leading-[1.65] text-muted-foreground lg:order-none lg:block", children: intro }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: statsLabel ? "region" : void 0,
+              "aria-label": statsLabel,
+              tabIndex: statsLabel ? 0 : void 0,
+              className: cn(
+                "order-3 -mx-4 flex gap-2 overflow-x-auto px-4 pt-2 scrollbar-hide",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "lg:order-none lg:mx-0 lg:gap-[30px] lg:overflow-visible lg:px-0 lg:pt-1.5"
+              ),
+              children: stats.map((stat) => {
+                const isLive = stat.tone === "live";
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex min-w-[106px] shrink-0 flex-col rounded-[14px] border bg-card px-[13px] py-2.5",
+                      isLive ? "border-success/40" : "border-border",
+                      "lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "text-[19px] font-black leading-none tracking-[-0.02em] tabular-nums",
+                            isLive ? "text-success" : "text-foreground",
+                            "lg:text-[30px] lg:tracking-[-0.03em]"
+                          ),
+                          children: stat.value
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[11px] text-muted-foreground lg:mt-[5px] lg:text-[12.5px]", children: stat.label })
+                    ]
+                  },
+                  stat.label
+                );
+              })
+            }
+          )
         ] }),
         aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
       ]
@@ -36,17 +99,24 @@ function EventHubHeroSkeleton({ aside, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-[11.5px] w-28" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-[31px] w-full max-w-[420px] md:h-[42px]" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex max-w-[520px] flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-full md:h-[15px]" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-4/5 md:h-[15px]" })
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 lg:gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "order-2 h-[13px] w-40 lg:order-none lg:h-[11.5px] lg:w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "order-1 h-[26px] w-full max-w-[420px] lg:order-none lg:h-[42px]" }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden max-w-[520px] flex-col gap-1.5 lg:flex", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-4/5" })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-[22px] pt-1.5 md:gap-[30px]", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-[24px] w-10 md:h-[30px]" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-[11px] w-16 md:mt-[5px] md:h-[12.5px]" })
-          ] }, index)) })
+          /* @__PURE__ */ jsx("div", { className: "order-3 -mx-4 flex gap-2 overflow-hidden px-4 pt-2 lg:order-none lg:mx-0 lg:gap-[30px] lg:px-0 lg:pt-1.5", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex min-w-[106px] shrink-0 flex-col rounded-[14px] border border-border bg-card px-[13px] py-2.5 lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-[19px] w-8 lg:h-[30px] lg:w-10" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "mt-0.5 h-[11px] w-16 lg:mt-[5px] lg:h-[12.5px]" })
+              ]
+            },
+            index
+          )) })
         ] }),
         aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
       ]

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

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-WSRWFA6K.js';
-import { Tag } from '../chunk-ZDAHKI3A.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { buttonVariants } from '../chunk-H3BV4VAG.js';

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

@@ -21,11 +21,17 @@ import { EventPreview, EventListRowLabels, EventDateBadgeFormatters } from './ev
  * has the width for one and its row root is a container rather than a single
  * anchor. If a CTA comes back here, it has to be a real one, not a span.
  *
- * NOTE ON WEIGHT: nothing in this row is heavier than 600, and only the title
- * and the date badge reach it. Eight of these stack per screen, and at that
- * density hierarchy comes from size and ink tier, not from weight — a field of
- * bold text has no foreground. `Free` is the one exception (600 plus
- * `text-success`), because it is an inducement rather than an attribute.
+ * NOTE ON WEIGHT: the title and the fee are the only bold things in this row.
+ * Eight of these stack per screen, and at that density hierarchy comes from
+ * size and ink tier as much as weight — so everything below the title line is
+ * regular, muted, and small. The fee is bold because it is the row's one
+ * inducement, and it sits on the TITLE line, right-aligned, where a price is
+ * read against the thing it buys rather than lost among the meta.
+ *
+ * NOTE ON THE DATE BADGE: `hideDate` drops it. Inside a dated group — the list
+ * view's "Today · Monday 7 September" separators — every row's badge repeats
+ * the heading eight times per screen; the heading carries the date and the
+ * rows carry the time. The badge stays available for undated lists.
  *
  * Same contract as the rest: DS-owned view model, injected labels and
  * formatters, plain `<img>`, anchor whenever `href` is given.
@@ -67,16 +73,23 @@ type EventListRowProps = {
      * line. Same prop and same reason as `EventListRowWide` and `EventIndexRow`.
      */
     hideRule?: boolean;
+    /**
+     * Drops the leading date badge. Pass it when the rows sit under a dated
+     * heading that already names the day; the row then leads with its poster.
+     */
+    hideDate?: boolean;
 };
 declare const EventListRow: React$1.NamedExoticComponent<EventListRowProps>;
 type EventListRowSkeletonProps = {
     /** Matches `EventListRowProps["hideRule"]` — drop the top rule on the first row of a day group. */
     hideRule?: boolean;
+    /** Matches `EventListRowProps["hideDate"]`. */
+    hideDate?: boolean;
     /** Reserve the chip line. Matches the real row, where it collapses on events with no live status and no tags. */
     showTags?: boolean;
     className?: string;
 };
 /** Mirrors `<EventListRow>`'s geometry exactly so nothing shifts when data lands. */
-declare function EventListRowSkeleton({ hideRule, showTags, className, }: EventListRowSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function EventListRowSkeleton({ hideRule, hideDate, showTags, className, }: EventListRowSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { EventListRow, type EventListRowLinkProps, type EventListRowProps, EventListRowSkeleton, type EventListRowSkeletonProps };

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

@@ -1,7 +1,7 @@
 import { Separator } from '../chunk-WSRWFA6K.js';
 import { TagGroup } from '../chunk-6XMYEZVR.js';
-import { Tag } from '../chunk-ZDAHKI3A.js';
 import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
+import { Tag } from '../chunk-ZDAHKI3A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';
@@ -27,7 +27,8 @@ var EventListRow = memo(function EventListRow2({
   priority,
   tags,
   fallback = /* @__PURE__ */ jsx(EventPosterFallback, {}),
-  hideRule
+  hideRule,
+  hideDate
 }) {
   var _a;
   const [imgError, setImgError] = useState(false);
@@ -37,10 +38,13 @@ var EventListRow = memo(function EventListRow2({
   const priceText = fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : void 0;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-    /* @__PURE__ */ jsxs(
+    !hideDate && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", isLive && "bg-success/10"),
+        className: cn(
+          "w-[42px] shrink-0 rounded-[9px] py-1.5 text-center",
+          isLive && "bg-success/10"
+        ),
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -65,7 +69,7 @@ var EventListRow = memo(function EventListRow2({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted", children: showPoster ? (
+    /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-[58px] shrink-0 overflow-hidden rounded-[10px] bg-muted", children: showPoster ? (
       // eslint-disable-next-line @next/next/no-img-element
       /* @__PURE__ */ jsx(
         "img",
@@ -80,38 +84,64 @@ var EventListRow = memo(function EventListRow2({
       )
     ) : fallback }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[15px] font-semibold leading-[1.3] tracking-[-0.01em]", children: event.title }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-foreground", children: formatters.time(event.starts_at) }),
-        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1", children: [
-          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
-        ] }),
-        isSoldOut ? /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", className: "shrink-0 whitespace-nowrap", children: labels.soldOut }) : priceText && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-[14px] font-bold leading-[1.3] tracking-[-0.01em]", children: event.title }),
+        isSoldOut ? /* @__PURE__ */ jsx(
+          Tag,
+          {
+            size: "sm",
+            variant: "quiet",
+            className: "shrink-0 whitespace-nowrap",
+            children: labels.soldOut
+          }
+        ) : priceText && /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
-              "shrink-0 tabular-nums",
-              fee.kind === "free" && "font-semibold text-success"
+              "shrink-0 text-[13.5px] font-extrabold tabular-nums",
+              fee.kind === "free" ? "text-success" : "text-foreground"
             ),
             children: priceText
           }
         )
       ] }),
-      (isLive || tags && tags.length > 0) && /* @__PURE__ */ jsxs(TagGroup, { className: "mt-1.5 h-[22px] overflow-hidden", children: [
-        isLive && /* @__PURE__ */ jsxs(Tag, { size: "sm", variant: "success", className: "shrink-0 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5", "aria-hidden": true }),
-          labels.liveNow
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono tabular-nums", children: formatters.time(event.starts_at) }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: venue })
         ] }),
-        tags == null ? void 0 : tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "quiet", className: "shrink-0 whitespace-nowrap", children: tag }, tag))
-      ] })
+        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
+            ]
+          }
+        )
+      ] }),
+      tags && tags.length > 0 && /* @__PURE__ */ jsx(TagGroup, { className: "mt-1.5 h-[22px] overflow-hidden", children: tags.map((tag) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          size: "sm",
+          variant: "quiet",
+          className: "shrink-0 whitespace-nowrap",
+          children: tag
+        },
+        tag
+      )) })
     ] })
   ] });
   const rootClasses = cn(
-    // `py-3`, not `py-3.5`: the chip line adds a third line back, and 8px of
-    // padding pays for most of it. Rows with a one-line title and no chips are
-    // still poster-driven and end up SHORTER than before.
-    "relative flex w-full items-start gap-3 py-3 text-left",
+    // `py-[11px]`: the poster is 72px tall and a one-line title, meta and a
+    // chip line come to ~70px, so the row is poster-driven at ~94px — about
+    // eight per screen, which is the list view's reason to exist.
+    "relative flex w-full items-start gap-3 py-[11px] text-left",
     isSoldOut && "opacity-60",
     (href || onClick) && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     className
@@ -128,12 +158,21 @@ var EventListRow = memo(function EventListRow2({
     );
   }
   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 EventListRowSkeleton({
   hideRule,
+  hideDate,
   showTags = true,
   className
 }) {
@@ -141,24 +180,29 @@ function EventListRowSkeleton({
     "div",
     {
       "aria-hidden": "true",
-      className: cn("relative flex w-full items-start gap-3 py-3 text-left", className),
+      className: cn(
+        "relative flex w-full items-start gap-3 py-[11px] text-left",
+        className
+      ),
       children: [
         !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-        /* @__PURE__ */ jsxs("div", { className: "w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", children: [
+        !hideDate && /* @__PURE__ */ jsxs("div", { className: "w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", children: [
           /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto h-4 w-5" }),
           /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto mt-[3px] h-[10px] w-6" })
         ] }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-[72px] shrink-0 rounded-[9px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-[58px] shrink-0 rounded-[10px]" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-full" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-[15px] w-2/3" })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-full" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-2/3" })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[13.5px] w-12 shrink-0" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-10" }),
             /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 shrink-0 rounded-full" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-12" })
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
           ] }),
           showTags && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-14 rounded-full" }),

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

@@ -4,65 +4,63 @@ import * as React from 'react';
 /**
  * HourBand — one hour on the timeline's axis, with that hour's events beside it.
  *
- * The design's mobile timeline is deliberately plain: a 52px gutter carrying a
- * hairline and an hour puck, and full-width cards to its right. Nothing else.
- * The cards inside carry no timestamp of their own — this band IS the
- * timestamp, which is why `EventCard` has `hideWhen`.
+ * The mobile timeline is an app list, not a page: a 58px gutter carrying a
+ * filled hour chip with a hairline dropping from beneath it, and the hour's
+ * rows to the right, separated by hairlines of their own. The rows carry no
+ * timestamp — this band IS the timestamp, which is why `EventCard` has
+ * `hideWhen` and `EventCompactRow` has `hideTime`.
  *
- * The puck is the shared `TimelineHourPuck`, sitting ON the line with a
- * background fill punching through it so the hairline reads as continuous
- * behind the label. It used to be a second, hand-rolled copy of the desktop
- * band's puck, and the two had drifted apart — this one borderless and
- * `rounded-md px-1.5`, the desktop one bordered and `rounded-[7px] px-[7px]`.
- * Sharing the object changes this gutter's pixels: the mobile puck now carries
- * a border, which is what makes it read as clipped onto the rail rather than
- * text floating over it, and matches the station on the desktop spine.
+ * The chip is the shared `TimelineHourPuck` in its `chip` variant, so the
+ * desktop spine's station and this gutter's label are one object with two
+ * looks rather than two objects that drift. The hairline starts BELOW the chip
+ * rather than running behind it: a chip is a label at the top of its hour, a
+ * station is a tick on a continuous rail, and the two read differently.
  *
- * `isLive` turns the puck green-bordered and reveals the NOW label beneath it,
- * which is why live bands need extra top padding on the content column — the
- * label occupies space the cards would otherwise start in.
+ * `isLive` tints the chip and the hairline with `--success`; the live label is
+ * kept for screen readers (the chip variant hides it visually). The playhead —
+ * the exact current time — is a separate `TimelinePlayhead` rendered between
+ * bands by the caller, because an hour spans sixty minutes and "now" is one of
+ * them.
  *
- * ── Why the gap is 24px and not 12px ──────────────────────────────────────
- * THE PUCK IS WIDER THAN THE GUTTER IT SITS IN, and the gap is what absorbs
- * the difference. A 12-hour locale renders "09:00 AM" — 8 monospace glyphs at
- * 12.5px (~60px) plus `px-[7px]` twice and a border twice, so ~76px of puck
- * centred on a 52px gutter, overflowing ~12px on each side. At the original
- * `gap-3` that right-hand overflow exactly consumed the gap and the puck's
- * edge landed ON the content column, which read as the hairline colliding
- * with the rows beside it.
- *
- * 24px leaves ~12px of real clearance at the widest label. Do not tighten it
- * back without re-deriving against a 12-hour locale: a 24-hour one ("09:00")
- * is ~30px narrower and hides the problem completely.
+ * ROWS ARE SEPARATED HERE, NOT IN THE ROW. `EventCompactRow` deliberately
+ * draws no divider (its container does — see its docblock), so this band wraps
+ * each child and rules between them. The wrapper, not the child, carries the
+ * rule, so the row's own negative-margin hover wash is untouched. 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 — a fragment is one child and gets one wrapper.
  */
 type HourBandProps = {
     /** The hour, already formatted and localised — "20:00". */
     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. */
+    /** Screen-reader text for the live hour, e.g. "Now on". Required to render it. */
     liveLabel?: string;
-    /** The hour's events. */
+    /** The hour's events. Each direct child is one row or card. */
     children: React.ReactNode;
+    /**
+     * `rows` (default): compact rows, ruled between with a Separator. `cards`:
+     * poster cards, stacked with a 16px gap and no rules — a card is its own
+     * frame, and a hairline between two posters reads as a third object.
+     */
+    layout?: "rows" | "cards";
     className?: string;
 };
-declare function HourBand({ time, isLive, liveLabel, children, className }: HourBandProps): react_jsx_runtime.JSX.Element;
+declare function HourBand({ time, isLive, liveLabel, children, layout, className, }: HourBandProps): react_jsx_runtime.JSX.Element;
 type HourBandSkeletonProps = {
-    /** Cards to reserve space for. The design's loading frame shows two. */
+    /** Rows to reserve space for. */
     cardCount?: number;
     className?: string;
 };
 /**
- * The mobile timeline's loading state, mirroring `HourBand` exactly — same 52px
- * gutter, same hairline, same content gap — so nothing jumps when data lands.
- *
- * The puck is omitted rather than blocked out: the hour is not known until the
- * data arrives, and a grey lozenge on the axis reads as a real, unreadable
- * timestamp. The hairline alone still says "this is a time axis".
+ * The mobile timeline's loading state, mirroring `HourBand` exactly — same
+ * gutter, same hairline, same row rhythm — so nothing jumps when data lands.
  *
- * Card footprints come from the design's own loading frame: a 220px poster with
- * an 16px title bar and a 12px meta bar, then a 170px poster with a 15px title.
+ * The chip is blocked out at its real size rather than omitted: it is a fixed
+ * 58x24 lozenge, so a grey one reads as "a time goes here" without inventing
+ * a time. Row footprints mirror `EventCompactRowSkeleton`.
  */
-declare function HourBandSkeleton({ cardCount, className }: HourBandSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function HourBandSkeleton({ cardCount, className, }: HourBandSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { HourBand, type HourBandProps, HourBandSkeleton, type HourBandSkeletonProps };