@bearmenu/ui 0.8.17 → 0.8.19

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

package/dist/chunk-NSNEANOQ.js

@@ -1,104 +0,0 @@
-import { Separator } from './chunk-NWZGSLPU.js';
-import { Skeleton } from './chunk-XBBEX4SF.js';
-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 = "station",
-  className
-}) {
-  const isChip = variant === "chip";
-  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",
-          isChip ? cn(
-            "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] px-1 text-[12px] font-medium",
-            isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
-          ) : 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"
-          )
-        ),
-        children: [
-          isChip && isLive && /* @__PURE__ */ jsx(Radio, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-          time
-        ]
-      }
-    ),
-    isLive && !!liveLabel && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          isChip ? "sr-only" : cn(
-            "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
-            "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
-          )
-        ),
-        children: liveLabel
-      }
-    )
-  ] });
-}
-function TimelineBand({ lane, children, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-stretch", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-[var(--timeline-lane)] shrink-0", children: lane }),
-    /* @__PURE__ */ jsx("div", { className: "relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children })
-  ] });
-}
-function sk(width, height, radiusPx = 12) {
-  return /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      style: { width, height: `${height}px`, borderRadius: `${radiusPx}px` }
-    }
-  );
-}
-function TimelineBandSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-stretch", className), "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-[var(--timeline-lane)] shrink-0 flex-col gap-3", children: [
-      sk("100%", 297, 12),
-      sk("70%", 18),
-      sk("45%", 13)
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-[10px]", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        sk("100%", 190, 12),
-        sk("85%", 15),
-        sk("55%", 12)
-      ] }, index)) }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-[11px] py-2", children: [
-        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-[34px] w-[34px] shrink-0 rounded-md" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-          sk("60%", 13),
-          sk("40%", 11.5)
-        ] })
-      ] }, index)) })
-    ] })
-  ] });
-}
-
-export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck };

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

@@ -1,66 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-/**
- * HourBand — one hour on the timeline's axis, with that hour's events beside it.
- *
- * 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 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` 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.
- *
- * 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;
-    /** Screen-reader text for the live hour, e.g. "Now on". Required to render it. */
-    liveLabel?: string;
-    /** 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, layout, className, }: HourBandProps): react_jsx_runtime.JSX.Element;
-type HourBandSkeletonProps = {
-    /** Rows to reserve space for. */
-    cardCount?: number;
-    className?: string;
-};
-/**
- * The mobile timeline's loading state, mirroring `HourBand` exactly — same
- * gutter, same hairline, same row rhythm — so nothing jumps when data lands.
- *
- * 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;
-
-export { HourBand, type HourBandProps, HourBandSkeleton, type HourBandSkeletonProps };

package/dist/components/hour-band.js

@@ -1,81 +0,0 @@
-import { TimelineHourPuck, TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-NSNEANOQ.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
-import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
-import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function HourBand({
-  time,
-  isLive,
-  liveLabel,
-  children,
-  layout = "rows",
-  className
-}) {
-  const isCards = layout === "cards";
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 pt-2.5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS), children: [
-      /* @__PURE__ */ jsx(
-        TimelineHourPuck,
-        {
-          time,
-          isLive,
-          liveLabel,
-          variant: "chip"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Separator,
-        {
-          orientation: "vertical",
-          className: cn(
-            "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2",
-            isLive && "bg-success/30"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex min-w-0 flex-1 flex-col", isCards && "gap-4 pb-2"),
-        children: React.Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
-          !isCards && index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-          child
-        ] }, index))
-      }
-    )
-  ] });
-}
-function HourBandSkeleton({
-  cardCount = 2,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 pt-2.5", className), "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", TIMELINE_MOBILE_GUTTER_CLASS), children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-[58px] rounded-[7px]" }),
-      /* @__PURE__ */ jsx(
-        Separator,
-        {
-          orientation: "vertical",
-          className: "absolute bottom-[-10px] left-1/2 top-[30px] h-auto -translate-x-1/2"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsxs("div", { children: [
-      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 py-[11px]", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-16 shrink-0 rounded-[10px]" }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-[14px] w-3/4" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-[11.5px] w-1/2" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-[22px] w-16 rounded-full" })
-        ] })
-      ] })
-    ] }, index)) })
-  ] });
-}
-
-export { HourBand, HourBandSkeleton };

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

@@ -1,67 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-/**
- * HourGroup — an hour heading inside `<TimelineBand>`'s content column: a
- * time, a rule, and a count, with that hour's rows beneath and an optional
- * trailing note (e.g. "3 more not shown").
- *
- * ── `spine` — the desktop default ────────────────────────────────────────
- * Inside a `<TimelineBand>`, pass `spine` and the hour renders as a
- * `TimelineHourPuck` out ON the axis, centred on this heading's own rule,
- * instead of as inline text at the head of the content column. Every hour of
- * the day then reads as a station on the same rail, which is the entire point
- * of the rail; the band itself no longer draws any hour, so there is nothing
- * left to collide with.
- *
- * The offset is `calc(var(--timeline-spine) * -0.5)` — half the gutter, back
- * from the content column's left edge, which lands on the hairline. Written
- * with `*-0.5` rather than `/2` because a slash inside a Tailwind arbitrary
- * value collides with the opacity-modifier parse. The `w-0` wrapper plus the
- * puck's own `justify-center` is what centres it, so no `-translate-x-1/2` is
- * needed and the live label centres on the same line for free.
- *
- * `spine` implies the inline time is suppressed — no caller should have to
- * pass `spine hideTime` to avoid printing the hour twice.
- *
- * Keep the rule and the count. The rule is the only thing tying a puck to the
- * rows it labels across the empty gutter; without it the puck reads as a
- * sticker rather than a station on a track. The count carries information
- * present nowhere else and terminates the rule so it doesn't dissolve.
- *
- * Where a group's rows already carry their own timestamps, `hideTime` drops the
- * time and keeps the rule and count, so the hour is stated exactly once.
- *
- * `size="sm"` is the mobile variant, shrinking the type a half-step and
- * matching `<HourBand>`'s own top offset (18px) rather than the desktop
- * default (22px).
- */
-type HourGroupProps = {
-    /** The hour, already formatted and localised — "20:00". */
-    time: string;
-    /**
-     * Render the hour as a puck out on `<TimelineBand>`'s spine instead of as
-     * inline text. The desktop timeline's default; implies `hideTime`.
-     */
-    spine?: boolean;
-    /** Marks this hour as the one currently in progress. `spine` only. */
-    isLive?: boolean;
-    /** Shown under the puck when live, e.g. "NOW". `spine` only. */
-    liveLabel?: string;
-    /**
-     * Drop the leading time, keeping the rule and count. For groups whose rows
-     * state their own time.
-     */
-    hideTime?: boolean;
-    /** Caller-composed, e.g. "2 events" — mirrors `EventDayHeader`'s `meta`. */
-    countLabel: string;
-    /** Trailing note shown after the rows, e.g. "3 more not shown". */
-    note?: string;
-    /** The hour's rows. */
-    children?: React.ReactNode;
-    size?: "sm" | "default";
-    className?: string;
-};
-declare function HourGroup({ time, spine, isLive, liveLabel, hideTime, countLabel, note, children, size, className, }: HourGroupProps): react_jsx_runtime.JSX.Element;
-
-export { HourGroup, type HourGroupProps };

package/dist/components/hour-group.js

@@ -1,59 +0,0 @@
-import { TimelineHourPuck } from '../chunk-NSNEANOQ.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
-import '../chunk-XBBEX4SF.js';
-import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function HourGroup({
-  time,
-  spine,
-  isLive,
-  liveLabel,
-  hideTime,
-  countLabel,
-  note,
-  children,
-  size = "default",
-  className
-}) {
-  const isSm = size === "sm";
-  return (
-    // The group's top padding lives HERE, not on the heading row, and that is
-    // load-bearing for `spine`: `top-1/2` resolves against the heading row's
-    // PADDING box while `items-center` centres the rule in its CONTENT box, so
-    // with `pt-[22px]` on the row the puck landed 19.25px down and the rule at
-    // 30.25px — 11px apart, the puck visibly riding above the line it is
-    // supposed to sit on. Unpadded, both resolve against the same box and the
-    // puck's centre, the rule and the spine hairline are one line.
-    /* @__PURE__ */ jsxs("div", { className: cn(isSm ? "pt-[18px]" : "pt-[22px]", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", spine && "relative"), children: [
-        spine && /* @__PURE__ */ jsx(
-          TimelineHourPuck,
-          {
-            time,
-            isLive,
-            liveLabel,
-            className: "absolute left-[calc(var(--timeline-spine)*-0.5)] top-1/2 w-0 -translate-y-1/2"
-          }
-        ),
-        !hideTime && !spine && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "font-mono text-muted-foreground tabular-nums",
-              isSm ? "text-[11.5px]" : "text-xs"
-            ),
-            children: time
-          }
-        ),
-        /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
-        /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground/70", isSm ? "text-[10.5px]" : "text-[11px]"), children: countLabel })
-      ] }),
-      children,
-      note && /* @__PURE__ */ jsx("p", { className: "pt-[9px] text-[11.5px] text-muted-foreground", children: note })
-    ] })
-  );
-}
-
-export { HourGroup };