@bearmenu/ui 0.8.17 → 0.8.18

package/dist/components/poster-stack.d.ts

@@ -1,9 +1,27 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 /**
  * PosterStack — three overlapping, gently rotated posters that float, the
  * hub hero's aside slot in the source design.
  *
+ * TAPPABLE SINCE 0.8.18. The stack was three decorative images: the loudest
+ * thing on the hub's first screen, and the one thing on it a reader could not
+ * tap. A poster with `href` is an anchor now — the event's detail page for
+ * the crawler and a modified click, whatever the app's `linkComponent` does
+ * for a plain tap (the hub opens its preview drawer). `caption` prints the
+ * title at the poster's foot: it gives the tap a visible reason on touch,
+ * where there is no hover, and it is the anchor's accessible name, so the
+ * `<img>` goes `alt=""` whenever a caption is set. Without `href` a poster is
+ * decorative, as before.
+ *
+ * The float and the press live on DIFFERENT elements. The wrapper carries
+ * the keyframe `transform` (rotation + drift); the anchor inside it carries
+ * the press scale and the focus ring. One element cannot animate one
+ * `transform` and transition another. The pointed poster comes to the front
+ * (`hover:z-[4]`, `focus-within:z-[4]`) — z-index is not animated, it is the
+ * "pick this one" cue.
+ *
  * Two motion rules, both mandatory:
  *   1. Stops entirely under `prefers-reduced-motion: reduce` — enforced via
  *      an injected `<style>` media query rather than relying on Tailwind's
@@ -15,16 +33,31 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  *      spends a paint budget while it isn't visible. Skipped entirely when
  *      reduced motion is on, since nothing is animating to pause.
  */
+type PosterStackLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
 type PosterStackPoster = {
-    /** Absent renders a neutral placeholder block instead of an image. */
+    /** Absent renders `fallback` instead of an image. */
     src?: string;
     alt: string;
+    /** The event's detail page. With it the poster is an anchor; without it, decorative. */
+    href?: string;
+    /** Caption at the poster's foot — the event title. Becomes the anchor's
+     *  accessible name; the `<img>` then gets `alt=""`. */
+    caption?: string;
+    /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
+    fallback?: React.ReactNode;
 };
 type PosterStackProps = {
     /** Rendered in order; only the first three are shown. */
     posters: PosterStackPoster[];
+    /** Defaults to a plain `<a>`. Pass `next/link`, or an anchor that opens the app's preview. */
+    linkComponent?: React.ComponentType<PosterStackLinkProps>;
     className?: string;
 };
-declare function PosterStack({ posters, className }: PosterStackProps): react_jsx_runtime.JSX.Element;
+declare function PosterStack({ posters, linkComponent: LinkComponent, className, }: PosterStackProps): react_jsx_runtime.JSX.Element;
 
-export { PosterStack, type PosterStackPoster, type PosterStackProps };
+export { PosterStack, type PosterStackLinkProps, type PosterStackPoster, type PosterStackProps };

package/dist/components/poster-stack.js

@@ -1,8 +1,13 @@
+import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { useRef, useState, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+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));
+}
 var POSTER_STACK_OBSERVER_ROOT_MARGIN = "200px";
 var POSTER_STACK_ANIMATION_STYLE = `
 @keyframes ds-poster-stack-float-1 { to { transform: rotate(-5deg) translateY(-16px); } }
@@ -14,27 +19,31 @@ var POSTER_STACK_ANIMATION_STYLE = `
 `;
 var POSTER_SLOTS = [
   {
-    positionClassName: "left-[6px] top-[34px] w-[120px] md:left-0 md:top-[52px] md:w-[196px]",
+    positionClassName: "left-0 top-[28px] w-[112px] md:left-0 md:top-[52px] md:w-[196px]",
     restTransform: "rotate(-5deg)",
     animationName: "ds-poster-stack-float-1",
     animationDurationMs: 9e3
   },
   {
-    positionClassName: "left-[110px] top-0 w-[140px] md:left-[168px] md:w-[232px]",
+    positionClassName: "left-[104px] top-0 w-[128px] md:left-[168px] md:w-[232px]",
     restTransform: "rotate(3deg)",
     animationName: "ds-poster-stack-float-2",
     animationDurationMs: 11e3,
     zIndexClassName: "z-[3]"
   },
   {
-    positionClassName: "left-[238px] top-[58px] w-[120px] md:left-[378px] md:top-24 md:w-[196px]",
+    positionClassName: "left-[224px] top-[44px] w-[112px] md:left-[378px] md:top-24 md:w-[196px]",
     restTransform: "rotate(6deg)",
     animationName: "ds-poster-stack-float-3",
     animationDurationMs: 1e4
   }
 ];
 var POSTER_SHADOW = "0 22px 50px oklch(0.3 0.02 60 / 0.24)";
-function PosterStack({ posters, className }) {
+function PosterStack({
+  posters,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
   const containerRef = useRef(null);
   const posterRefs = useRef([]);
   const [failedIndices, setFailedIndices] = useState(/* @__PURE__ */ new Set());
@@ -56,11 +65,32 @@ function PosterStack({ posters, className }) {
     return () => observer.disconnect();
   }, []);
   const visiblePosters = posters.slice(0, POSTER_SLOTS.length);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative h-[250px] md:h-[400px]", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative h-[212px] md:h-[400px]", className), children: [
     /* @__PURE__ */ jsx("style", { children: POSTER_STACK_ANIMATION_STYLE }),
     visiblePosters.map((poster, index) => {
+      var _a;
       const slot = POSTER_SLOTS[index];
       const showPoster = !!poster.src && !failedIndices.has(index);
+      const face = /* @__PURE__ */ jsxs(Fragment, { children: [
+        showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: poster.src,
+              alt: poster.caption ? "" : poster.alt,
+              loading: "lazy",
+              decoding: "async",
+              className: cn(
+                "h-full w-full object-cover",
+                poster.href && "transition-transform duration-300 group-hover/poster:scale-[1.03] motion-reduce:transition-none"
+              ),
+              onError: () => setFailedIndices((current) => new Set(current).add(index))
+            }
+          )
+        ) : (_a = poster.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}),
+        poster.caption && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-2 pb-2 pt-6", children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[11px] font-semibold leading-[1.25] text-white md:text-[12.5px]", children: poster.caption }) })
+      ] });
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -71,7 +101,8 @@ function PosterStack({ posters, className }) {
           className: cn(
             "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
             slot.positionClassName,
-            slot.zIndexClassName
+            slot.zIndexClassName,
+            poster.href && "hover:z-[4] focus-within:z-[4]"
           ),
           style: {
             transform: slot.restTransform,
@@ -82,18 +113,18 @@ function PosterStack({ posters, className }) {
             animationIterationCount: "infinite",
             animationDirection: "alternate"
           },
-          children: showPoster && // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
+          children: poster.href ? /* @__PURE__ */ jsx(
+            LinkComponent,
             {
-              src: poster.src,
-              alt: poster.alt,
-              loading: "lazy",
-              decoding: "async",
-              className: "h-full w-full object-cover",
-              onError: () => setFailedIndices((current) => new Set(current).add(index))
+              href: poster.href,
+              className: cn(
+                "group/poster relative block h-full w-full overflow-hidden rounded-xl",
+                "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"
+              ),
+              children: face
             }
-          )
+          ) : /* @__PURE__ */ jsx("div", { className: "relative h-full w-full", children: face })
         },
         poster.alt || index
       );

package/dist/components/snap-rail.d.ts

@@ -21,7 +21,7 @@ import { VariantProps } from 'class-variance-authority';
  * `card` is the 14px inset of a hub card; `page` is the 16px page gutter.
  */
 declare const snapRailVariants: (props?: ({
-    itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
+    itemWidth?: "xs" | "sm" | "lg" | "full" | "md" | null | undefined;
     gap?: "default" | "sm" | null | undefined;
     bleed?: "none" | "page" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -43,7 +43,7 @@ type SnapRailProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof
     onActiveChange?: (index: number) => void;
 };
 declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    itemWidth?: "sm" | "lg" | "full" | "md" | null | undefined;
+    itemWidth?: "xs" | "sm" | "lg" | "full" | "md" | null | undefined;
     gap?: "default" | "sm" | null | undefined;
     bleed?: "none" | "page" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {

package/dist/components/snap-rail.js

@@ -1,3 +1,3 @@
-export { SnapRail, SnapRailDots } from '../chunk-WYTJR2YU.js';
+export { SnapRail, SnapRailDots } from '../chunk-5CPBSNWQ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | "outline" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,9 +22,9 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
-    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+    variant?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "label" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/timeline-day.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * 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.
+ */
+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;
+};
+declare function TimelineDay({ rows, laneTop, children, className }: TimelineDayProps): react_jsx_runtime.JSX.Element;
+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.
+ */
+declare function TimelineDaySkeleton({ hourCount, className }: TimelineDaySkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { TimelineDay, type TimelineDayProps, TimelineDaySkeleton, type TimelineDaySkeletonProps };

package/dist/components/timeline-day.js

@@ -0,0 +1,65 @@
+import { TimelineHourSkeleton } from '../chunk-LYREUZH6.js';
+import '../chunk-PW247TG2.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
+import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __spreadValues } from '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimelineDay({ rows, laneTop, children, className }) {
+  const style = __spreadValues({
+    "--timeline-rows": String(Math.max(rows, 1))
+  }, laneTop !== void 0 ? { "--timeline-lane-top": laneTop } : {});
+  return /* @__PURE__ */ jsxs(
+    "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,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            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)]"
+            ),
+            children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function TimelineDaySkeleton({ hourCount = 2, className }) {
+  return /* @__PURE__ */ jsxs(
+    "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) },
+      children: [
+        /* @__PURE__ */ jsxs("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)]", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[3/4] w-full rounded-xl" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[18px] w-[70%]" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-[13px] w-[45%]" })
+        ] }),
+        /* @__PURE__ */ jsx("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)]", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-full" }) }),
+        Array.from({ length: hourCount }, (_, index) => /* @__PURE__ */ jsx(TimelineHourSkeleton, { cardCount: index === 0 ? 3 : 2 }, index))
+      ]
+    }
+  );
+}
+
+export { TimelineDay, TimelineDaySkeleton };

package/dist/components/timeline-hour-puck.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * 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.
+ */
+declare const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+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.
+ */
+declare function TimelineHourPuck({ time, isLive, liveLabel, variant, className, }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
+
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck, type TimelineHourPuckProps };

package/dist/components/timeline-hour-puck.js

@@ -0,0 +1,3 @@
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from '../chunk-PW247TG2.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';

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

@@ -0,0 +1,96 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * 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.
+ */
+type TimelineHourRole = "hour" | "hero" | "continuation" | "unscheduled";
+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;
+};
+declare function TimelineHour({ time, role, isLive, liveLabel, countLabel, note, layout, children, overflow, className, }: TimelineHourProps): react_jsx_runtime.JSX.Element;
+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.
+ */
+declare function TimelineHourSkeleton({ cardCount, className }: TimelineHourSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { TimelineHour, type TimelineHourProps, type TimelineHourRole, TimelineHourSkeleton, type TimelineHourSkeletonProps };

package/dist/components/{timeline-band.js → timeline-hour.js}

@@ -1,4 +1,5 @@
-export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-NSNEANOQ.js';
+export { TimelineHour, TimelineHourSkeleton } from '../chunk-LYREUZH6.js';
+import '../chunk-PW247TG2.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/timeline-playhead.js

@@ -1,6 +1,4 @@
-import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-NSNEANOQ.js';
-import '../chunk-NWZGSLPU.js';
-import '../chunk-XBBEX4SF.js';
+import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-PW247TG2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {