@bearmenu/ui 0.8.17 → 0.8.18

package/src/components/timeline-day.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TimelineDay } from "./timeline-day";
+import { TimelineHour } from "./timeline-hour";
+
+describe("TimelineDay", () => {
+  it("renders every hour in source order, hero included, with one puck per stationed hour", () => {
+    const { container } = render(
+      <TimelineDay rows={2}>
+        <TimelineHour time="19:00" countLabel="1 event">
+          <p>Early</p>
+        </TimelineHour>
+        <TimelineHour time="20:00" role="hero">
+          <p>Hero</p>
+        </TimelineHour>
+        <TimelineHour time="21:00" countLabel="1 event">
+          <p>Late</p>
+        </TimelineHour>
+      </TimelineDay>
+    );
+
+    const hours = [...container.querySelectorAll("[data-timeline-hour]")];
+    expect(hours.map((hour) => hour.getAttribute("data-timeline-hour"))).toEqual([
+      "hour",
+      "hero",
+      "hour",
+    ]);
+    // Chronological in the DOM — the phone's visual order and the reading order.
+    expect(container.textContent).toMatch(/19:00[^]*Early[^]*20:00[^]*Hero[^]*21:00[^]*Late/);
+    expect(screen.getAllByText(/^\d\d:00$/)).toHaveLength(3);
+  });
+
+  it("sets the row count the lane and spine span", () => {
+    const { container } = render(
+      <TimelineDay rows={5} laneTop="120px">
+        <TimelineHour time="19:00">
+          <p>x</p>
+        </TimelineHour>
+      </TimelineDay>
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.style.getPropertyValue("--timeline-rows")).toBe("5");
+    expect(root.style.getPropertyValue("--timeline-lane-top")).toBe("120px");
+  });
+
+  it("gives an unscheduled group an inline heading and no station", () => {
+    const { container } = render(
+      <TimelineDay rows={1}>
+        <TimelineHour time="Time to be confirmed" role="unscheduled" countLabel="2 events" note="No hour">
+          <p>a</p>
+          <p>b</p>
+        </TimelineHour>
+      </TimelineDay>
+    );
+    expect(screen.getByText("Time to be confirmed")).toBeInTheDocument();
+    expect(screen.getByText("2 events")).toBeInTheDocument();
+    expect(screen.getByText("No hour")).toBeInTheDocument();
+    expect(container.querySelector(".font-mono.tabular-nums.whitespace-nowrap")).toBeNull();
+  });
+
+  it("rules between rows but not between cards", () => {
+    const { container: rows } = render(
+      <TimelineHour time="21:00" layout="rows">
+        <p>a</p>
+        <p>b</p>
+      </TimelineHour>
+    );
+    const { container: cards } = render(
+      <TimelineHour time="21:00" layout="cards">
+        <p>a</p>
+        <p>b</p>
+      </TimelineHour>
+    );
+    // The hour's own hairline (vertical) plus the heading rule plus one between the two rows.
+    expect(rows.querySelectorAll('[data-orientation="horizontal"]').length).toBe(2);
+    expect(cards.querySelectorAll('[data-orientation="horizontal"]').length).toBe(1);
+  });
+});

package/src/components/timeline-day.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TimelineHourSkeleton } from "./timeline-hour";
+
+/**
+ * TimelineDay — one day's programme on the timeline: a column of
+ * `TimelineHour`s that becomes, from `lg`, the three-column row
+ * lane │ spine │ content that `TimelineBand` used to draw.
+ *
+ * ONE DOM FOR BOTH VIEWPORTS. `TimelineBand` took the lane as a prop — a
+ * second parent — which forced the consumer to render two trees and pick one
+ * in JavaScript, and a server render cannot pick. Here the lane is grid
+ * column 1, and the day's hero is an ordinary child in its chronological
+ * slot that the grid PLACES in that column from `lg` (see `TimelineHour`
+ * `role="hero"`). Source order is the phone's visual order, which is the
+ * primary surface and the one a screen reader gets on both.
+ *
+ * `rows` is the number of children that are NOT the hero — the column-3
+ * items. It sets `--timeline-rows`, which both the lane and the spine span,
+ * and the explicit row track count. It has to be a number the caller
+ * supplies: the grid needs the lane to cover every row so auto-placement
+ * never drops a later hour into the lane column, and this component cannot
+ * tell a hero child from an hour child without inspecting props.
+ *
+ * `laneTop` is the lane's sticky `top` as a CSS value. `position: sticky` on
+ * a grid item is bounded by its grid area — column 1, rows 1…N, the day's
+ * full height — so the poster holds while column 3 scrolls and releases when
+ * the day runs out, with no scroll listener and no measured height.
+ *
+ * The spine is a vertical `Separator` in column 2 spanning every row, drawn
+ * here so consumers never forget it; the pucks that sit on it are
+ * `TimelineHour`'s.
+ */
+
+export type TimelineDayProps = {
+  /** The column-3 children count — every child except the hero. */
+  rows: number;
+  /** Sticky `top` for the lane, as a CSS value. Omitted, the lane scrolls. */
+  laneTop?: string;
+  /** `TimelineHour`s, in chronological order, the hero among them. */
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function TimelineDay({ rows, laneTop, children, className }: TimelineDayProps) {
+  const style = {
+    "--timeline-rows": String(Math.max(rows, 1)),
+    ...(laneTop !== undefined ? { "--timeline-lane-top": laneTop } : {}),
+  } as React.CSSProperties;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+        "lg:grid lg:grid-cols-[var(--timeline-lane)_var(--timeline-spine)_minmax(0,1fr)]",
+        "lg:[grid-template-rows:repeat(var(--timeline-rows),auto)]",
+        className
+      )}
+      style={style}
+    >
+      <div
+        aria-hidden
+        className={cn(
+          "hidden lg:col-start-2 lg:row-start-1 lg:flex lg:justify-center lg:self-stretch",
+          "lg:[grid-row-end:span_var(--timeline-rows)]"
+        )}
+      >
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export type TimelineDaySkeletonProps = {
+  /** Hours to reserve space for. */
+  hourCount?: number;
+  className?: string;
+};
+
+/**
+ * Holds the day's geometry at both widths so nothing jumps when data lands:
+ * the phone's stacked hours, the desktop's lane / spine / grid.
+ */
+export function TimelineDaySkeleton({ hourCount = 2, className }: TimelineDaySkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "flex flex-col",
+        "lg:grid lg:grid-cols-[var(--timeline-lane)_var(--timeline-spine)_minmax(0,1fr)]",
+        "lg:[grid-template-rows:repeat(var(--timeline-rows),auto)]",
+        className
+      )}
+      style={{ "--timeline-rows": String(hourCount) } as React.CSSProperties}
+    >
+      <div className="hidden lg:col-start-1 lg:row-start-1 lg:flex lg:flex-col lg:gap-3 lg:pt-3.5 lg:[grid-row-end:span_var(--timeline-rows)]">
+        <Skeleton className="aspect-[3/4] w-full rounded-xl" />
+        <Skeleton className="h-[18px] w-[70%]" />
+        <Skeleton className="h-[13px] w-[45%]" />
+      </div>
+      <div className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:justify-center lg:self-stretch lg:[grid-row-end:span_var(--timeline-rows)]">
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+      {Array.from({ length: hourCount }, (_, index) => (
+        <TimelineHourSkeleton key={index} cardCount={index === 0 ? 3 : 2} />
+      ))}
+    </div>
+  );
+}

package/src/components/timeline-hour-puck.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import { Radio } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Ring pulse on the live puck — inherited from an earlier `TimelinePlayhead`,
+ * which carried this surface's only motion. Kept at its 2.4s `ease-in-out` and
+ * its reduced-motion kill switch, but BOX-SHADOW ONLY: a `transform: scale`
+ * would make the hairline visibly breathe here, because this puck sits ON the
+ * rail. (Today's `timeline-playhead.tsx` is static and sits between bands.)
+ */
+const LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
+
+/**
+ * The phone axis gutter, shared by `TimelineHour` and `TimelinePlayhead` so
+ * the hour chips and the current-time label sit in one column. 58px is the
+ * width of a five-glyph 24-hour label ("20:00") in the chip's mono type plus
+ * its padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
+ * reasons the events surfaces format 24-hour everywhere.
+ */
+export const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+
+export type TimelineHourPuckProps = {
+  /** The hour, already formatted and localised — or an em dash for a quiet day. */
+  time: string;
+  /** Marks this as the hour currently in progress. */
+  isLive?: boolean;
+  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+  liveLabel?: string;
+  /**
+   * `station`: the bordered puck that sits ON the hairline, for the desktop
+   * spine. `chip`: a filled, fixed-width lozenge with the hairline starting
+   * BELOW it, for the phone gutter — an app's time label, not a station on a
+   * rail. `responsive` (the default): the chip below `lg`, the station from
+   * `lg` — ONE node that changes its look with the viewport, so a
+   * server-rendered timeline carries a single DOM for both widths. In the
+   * chip look the live label is visually hidden: the tinted chip plus a small
+   * on-air glyph are the visible signal (the glyph so the state never rests on
+   * colour alone once the pulse is reduced away) and the label stays for
+   * screen readers only.
+   */
+  variant?: "station" | "chip" | "responsive";
+  className?: string;
+};
+
+/**
+ * The station on the timeline's axis — ONE object, positioned by its host
+ * (`TimelineHour`): pinned to the top of the phone gutter, centred on the
+ * hour's heading rule out on the desktop spine.
+ *
+ * The `bg-background` fill punches through the hairline so the rail reads as
+ * continuous behind the label rather than butting into it.
+ *
+ * The live label is absolutely positioned rather than a flex sibling: hosts
+ * centre this puck with `-translate-y-1/2`, and a two-item column would centre
+ * the STACK, lifting the puck off the line it exists to sit on.
+ */
+export function TimelineHourPuck({
+  time,
+  isLive,
+  liveLabel,
+  variant = "responsive",
+  className,
+}: TimelineHourPuckProps) {
+  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"
+  );
+  // `sr-only` spelled out property by property so every one has an `lg:`
+  // twin — this project's Tailwind emits no `max-*` queries, and `lg:not-sr-only`
+  // would reset `position` under the `absolute` the station needs.
+  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 (
+    <span className={cn("relative flex justify-center", className)}>
+      {isLive && (
+        <style>{`
+          @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; }
+          }
+        `}</style>
+      )}
+      <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,
+              // no fixed width. Every chip utility above has an `lg:` twin.
+              "lg:h-auto lg:min-w-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"
+            )
+        )}
+      >
+        {isLive && variant !== "station" && (
+          <Radio className={cn(glyphClasses, variant === "responsive" && "lg:hidden")} aria-hidden />
+        )}
+        {time}
+      </span>
+      {isLive && !!liveLabel && (
+        <span
+          className={cn(
+            variant === "chip" && labelHiddenClasses,
+            variant === "station" && labelStationClasses,
+            variant === "responsive" && labelResponsiveClasses
+          )}
+        >
+          {liveLabel}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/timeline-hour.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from "./timeline-hour-puck";
+
+/**
+ * TimelineHour — one hour of a day's programme, ONE DOM for both viewports.
+ *
+ * Replaces `HourBand` (the phone band: a 58px gutter with a filled chip and
+ * a hairline dropping from it, the hour's cards beside) and `HourGroup` (the
+ * desktop heading: a station out on `TimelineDay`'s spine, a rule and a
+ * count). They were two components because the timeline picked one per
+ * viewport in JavaScript, and a server render cannot know the viewport — so
+ * the server rendered nothing. This is both, with CSS deciding:
+ *
+ *   below `lg`   the section carries a 70px left inset; the puck sits at the
+ *                top-left of that gutter as a chip, a hairline drops beneath
+ *                it, and the heading row is hidden — the chip IS the heading.
+ *   from `lg`    the inset goes, the heading row shows (rule + count), and the
+ *                puck moves out to the spine, centred on that rule, as a
+ *                station. Its vertical position is a constant (`--timeline-
+ *                heading` below), which is why the heading row has a fixed
+ *                height: "top-1/2 of the row" needs the puck INSIDE the row,
+ *                and inside the row it cannot also be the phone's gutter chip.
+ *
+ * The invariant `TimelineBand` used to state still holds: AN HOUR APPEARS
+ * EXACTLY ONCE, AND ALWAYS ON THE SPINE. Roles are how a day keeps it while
+ * one of its events is lifted into the desktop lane:
+ *
+ *   hour          the default — a station, the hour's events.
+ *   hero          the day's feature. Below `lg` a normal hour holding one
+ *                 card, in its chronological slot. From `lg` the node moves
+ *                 to `TimelineDay`'s lane column (grid placement, not source
+ *                 order), pins, and loses its puck and heading — the lane
+ *                 card carries its own start time, see `EventCard` `hideWhen`
+ *                 `"below-lg"`.
+ *   continuation  what is left of the hero's hour. Below `lg` its chip is
+ *                 `invisible` (the gutter and hairline stay, so the reader sees
+ *                 ONE band for that hour, hero first); from `lg` it shows its
+ *                 station, because the hero is in the lane now and the hour
+ *                 needs its puck back. When the hero was its hour's only
+ *                 event there is no continuation, and the hour simply leaves
+ *                 the desktop column — exactly what `HourGroup`'s
+ *                 `excludeEventId` used to do.
+ *   unscheduled   events the ingest dated but never timed. No station at any
+ *                 width — the axis encodes clock position and these have none
+ *                 — and no gutter inset: an inline heading (the caller's
+ *                 label, a rule, the count) at both widths, after the day's
+ *                 real programme.
+ *
+ * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
+ * hairline between two posters reads as a third object) and from `lg` lays
+ * them on a two/three-up grid; `rows` rules between children on both widths.
+ * Children are read with `Children.toArray`, which drops `null`/`false`, so a
+ * conditional first row never inherits a rule meant for a second; pass rows
+ * as siblings, not inside a fragment.
+ */
+
+export type TimelineHourRole = "hour" | "hero" | "continuation" | "unscheduled";
+
+export type TimelineHourProps = {
+  /** The hour, already formatted and localised — "20:00". For `unscheduled`,
+   *  the caller's label for the group ("Time to be confirmed"). */
+  time: string;
+  role?: TimelineHourRole;
+  /** Marks this as the hour currently in progress. */
+  isLive?: boolean;
+  /** Under the station when live, e.g. "NOW ON"; screen-reader-only in the chip. */
+  liveLabel?: string;
+  /** Desktop heading count, e.g. "3 events" — mirrors `EventDayHeader`'s `meta`.
+   *  Also the phone heading for `unscheduled`. */
+  countLabel?: string;
+  /** Trailing note after the children, e.g. "No start time was published". */
+  note?: string;
+  layout?: "cards" | "rows";
+  /** The hour's events — each direct child one card or row. */
+  children: React.ReactNode;
+  /**
+   * Events past the hour's card cap, after `children`: cards on the phone
+   * (the same stack, same gap), rows from `lg` (ruled, under the grid) —
+   * pass `EventCard density="row-lg"`. The desktop's density ladder inside
+   * one hour: a few posters, then rows.
+   */
+  overflow?: React.ReactNode;
+  className?: string;
+};
+
+/** Where the desktop puck's centre sits: the section's `lg:pt-[22px]` plus
+ *  half the fixed 16px heading row. */
+const HEADING_CENTRE_LG = "lg:top-[30px]";
+
+export function TimelineHour({
+  time,
+  role = "hour",
+  isLive,
+  liveLabel,
+  countLabel,
+  note,
+  layout = "cards",
+  children,
+  overflow,
+  className,
+}: TimelineHourProps) {
+  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 (
+    <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
+      )}
+    >
+      {hasStation && (
+        <>
+          <TimelineHourPuck
+            time={time}
+            isLive={isLive}
+            liveLabel={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"
+            )}
+          />
+          {/* The phone hairline, from under the chip to the next hour's chip;
+              the desktop spine is `TimelineDay`'s. */}
+          <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"
+            )}
+          />
+        </>
+      )}
+
+      {/* The heading row: hidden on the phone for a stationed hour (the chip
+          says it), the hero's goes with its station from `lg`. Fixed height
+          so the puck's centre is a constant. */}
+      <div
+        className={cn(
+          "items-center gap-2.5",
+          isUnscheduled ? "flex h-4" : "hidden lg:flex lg:h-4",
+          isHero && "lg:hidden"
+        )}
+      >
+        {isUnscheduled && (
+          <span className="font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs">
+            {time}
+          </span>
+        )}
+        <Separator className="flex-1" />
+        {countLabel && (
+          <span className="text-[10.5px] text-muted-foreground/70 lg:text-[11px]">
+            {countLabel}
+          </span>
+        )}
+      </div>
+
+      <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"
+        )}
+      >
+        {isCards
+          ? items
+          : items.map((child, index) => (
+              <div key={index}>
+                {index > 0 && <Separator />}
+                {child}
+              </div>
+            ))}
+      </div>
+
+      {overflowItems.length > 0 && (
+        <div className="flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2">
+          {overflowItems.map((child, index) => (
+            <div key={index}>
+              {index > 0 && <Separator className="hidden lg:block" />}
+              {child}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {note && <p className="pt-[9px] text-[11.5px] text-muted-foreground">{note}</p>}
+    </section>
+  );
+}
+
+export type TimelineHourSkeletonProps = {
+  /** Cards to reserve space for. */
+  cardCount?: number;
+  className?: string;
+};
+
+/**
+ * Mirrors `TimelineHour` at both widths — the phone's gutter chip and
+ * hairline, the desktop's grid of poster placeholders — so nothing jumps when
+ * data lands.
+ */
+export function TimelineHourSkeleton({ cardCount = 2, className }: TimelineHourSkeletonProps) {
+  return (
+    <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)}
+    >
+      <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
+        )}
+      />
+      <Separator
+        orientation="vertical"
+        className="absolute -bottom-2.5 left-[29px] top-10 h-auto -translate-x-1/2 lg:hidden"
+      />
+      <div className="hidden h-4 items-center gap-2.5 lg:flex">
+        <Separator className="flex-1" />
+        <Skeleton className="h-3 w-12" />
+      </div>
+      <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">
+        {Array.from({ length: cardCount }, (_, index) => (
+          <div key={index} className="flex flex-col gap-2">
+            <Skeleton className="aspect-[4/3] w-full rounded-xl" />
+            <Skeleton className="h-3.5 w-4/5" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/timeline-playhead.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { TIMELINE_MOBILE_GUTTER_CLASS } from "./timeline-band";
+import { TIMELINE_MOBILE_GUTTER_CLASS } from "./timeline-hour-puck";
 
 /**
  * TimelinePlayhead — the "you are here" mark on the mobile timeline: the