@bearmenu/ui 0.8.17 → 0.8.19

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

@@ -10,13 +10,17 @@ function EventHubHero({
   stats,
   statsLabel,
   aside,
+  footer,
   className
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        // 12px between the phone's blocks — the page's rhythm, the same as
+        // between the sections below: with a tappable poster stack the aside
+        // is content, not decoration, and gets no section gap of its own.
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       ),
       children: [
@@ -84,18 +88,19 @@ function EventHubHero({
             }
           )
         ] }),
-        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
+        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside }),
+        footer && /* @__PURE__ */ jsx("div", { className: "lg:col-span-2 lg:w-fit lg:min-w-[480px]", children: footer })
       ]
     }
   );
 }
-function EventHubHeroSkeleton({ aside, className }) {
+function EventHubHeroSkeleton({ aside, footer, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-hidden": "true",
       className: cn(
-        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        "grid grid-cols-1 gap-3 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-x-10 lg:gap-y-6",
         className
       ),
       children: [
@@ -118,7 +123,8 @@ function EventHubHeroSkeleton({ aside, className }) {
             index
           )) })
         ] }),
-        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside })
+        aside && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: aside }),
+        footer && /* @__PURE__ */ jsx("div", { className: "lg:col-span-2 lg:w-fit lg:min-w-[480px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[52px] w-full rounded-[14px]" }) })
       ]
     }
   );

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

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * EventTonightStrip — the hub's state line: what is on right now, what is
+ * later tonight, and one tap into the timeline.
+ *
+ * The hero's figures say SCALE ("52 events · 14 days"); this says STATE ("3
+ * live now · 12 more tonight · next at 20:00"). It is the one thing on the
+ * hub's first screen a reader can tap into today's programme, so it is a real
+ * anchor whenever there is a day to open — never a sheet trigger.
+ *
+ * Copy is caller-composed and carries only absolute facts: counts and
+ * wall-clock start times. Never a countdown or "in 12 minutes" — the hub is
+ * ISR-cached, and a ten-minute-old snapshot that says "next at 20:00" is at
+ * worst one boundary off, while "in 12 minutes" is simply wrong. The DS keeps
+ * no clock, no Intl and no i18n: the app derives `tone`, `lead` and `details`
+ * from its own clock and re-derives them after hydration.
+ *
+ * The lead stays `text-foreground`, not `--success`: 13px bold success on a
+ * card computes to roughly 4.5:1 in both modes, too close to the floor for
+ * the strip's one claim. The dot and the border carry the colour.
+ */
+type EventTonightStripTone = "live" | "tonight" | "quiet" | "none";
+type EventTonightStripLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+type EventTonightStripProps = {
+    tone: EventTonightStripTone;
+    /** The lead segment, bold — "3 live now". */
+    lead: string;
+    /** Trailing segments, muted, joined with " · " — ["12 more tonight", "next at 20:00"]. */
+    details?: string[];
+    /** Screen-reader suffix for the anchor — "Open tonight in the schedule". */
+    actionLabel?: string;
+    /** Absent (tone `none`) renders a non-interactive `role="status"` line. */
+    href?: string;
+    /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+    linkComponent?: React.ComponentType<EventTonightStripLinkProps>;
+    className?: string;
+};
+declare function EventTonightStrip({ tone, lead, details, actionLabel, href, linkComponent: LinkComponent, className, }: EventTonightStripProps): react_jsx_runtime.JSX.Element;
+declare function EventTonightStripSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EventTonightStrip, type EventTonightStripLinkProps, type EventTonightStripProps, EventTonightStripSkeleton, type EventTonightStripTone };

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

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

package/dist/components/menu-family-block.js

@@ -17,7 +17,7 @@ function DefaultLink(_a) {
 }
 var GROUND = PHOTO_GROUND;
 var INK_PHONE = "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
-var INK_WIDE = "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.32)_0%,oklch(0.16_0.012_55_/_0.62)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+var INK_WIDE = "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.5)_0%,oklch(0.16_0.012_55_/_0.66)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 var TEXT_SCRIM = (
   /* `isolate` + `before:-z-10`: a positioned pseudo-element paints ABOVE the
      column's in-flow text unless the column is its own stacking context and
@@ -70,8 +70,9 @@ function MenuFamilyBlock({
                 {
                   className: cn(
                     "relative flex min-h-[220px] flex-col justify-end p-3.5",
-                    wide && "lg:min-h-[320px] lg:p-5",
-                    TEXT_SCRIM
+                    TEXT_SCRIM,
+                    // The two-column card has ONE gradient from `lg` — see `INK_WIDE`.
+                    wide && "lg:min-h-[320px] lg:p-5 lg:before:hidden"
                   ),
                   children: [
                     pill && /* @__PURE__ */ jsx(

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

@@ -58,8 +58,14 @@ type MenuHubHeroProps = {
      * a 1440px hero.
      */
     tileUrls?: string[];
+    /**
+     * The element the headline renders as. `h1` by default; a page that
+     * already owns its `<h1>` (an sr-only SEO heading, as on `/menu`) passes
+     * `h2` so the document has one h1, not two.
+     */
+    headingLevel?: "h1" | "h2";
     className?: string;
 };
-declare function MenuHubHero({ kicker, kickerIcon, headline, body, figures, proof, proofIcon, action, backgroundUrl, tileUrls, className, }: MenuHubHeroProps): react_jsx_runtime.JSX.Element;
+declare function MenuHubHero({ kicker, kickerIcon, headline, body, figures, proof, proofIcon, action, backgroundUrl, tileUrls, headingLevel: Heading, className, }: MenuHubHeroProps): react_jsx_runtime.JSX.Element;
 
 export { MenuHubHero, type MenuHubHeroFigure, type MenuHubHeroProps };

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

@@ -15,6 +15,7 @@ function MenuHubHero({
   action,
   backgroundUrl,
   tileUrls,
+  headingLevel: Heading = "h1",
   className
 }) {
   return /* @__PURE__ */ jsxs(
@@ -85,7 +86,7 @@ function MenuHubHero({
             kickerIcon,
             kicker
           ] }),
-          /* @__PURE__ */ jsx("h1", { className: "max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]", children: headline }),
+          /* @__PURE__ */ jsx(Heading, { className: "max-w-[640px] font-serif text-[28px] font-semibold leading-[1.06] tracking-[-0.025em] lg:text-[50px] lg:leading-[1.04]", children: headline }),
           body && /* @__PURE__ */ jsx("p", { className: "hidden max-w-[540px] text-sm leading-[1.6] opacity-[0.84] lg:block lg:text-[15.5px]", children: body }),
           figures && figures.length > 0 && // One row of four on the phone. It was two by two, which was the
           // taller half of a 500px hero; at 20px the widest figure ("19,090")

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); } }
@@ -12,29 +17,34 @@ var POSTER_STACK_ANIMATION_STYLE = `
   [data-ds-poster-stack-item] { animation: none !important; }
 }
 `;
+var PHONE_STAGE_CLASS = "mx-auto w-[336px] max-w-full";
 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,49 +66,78 @@ 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: [
-    /* @__PURE__ */ jsx("style", { children: POSTER_STACK_ANIMATION_STYLE }),
-    visiblePosters.map((poster, index) => {
-      const slot = POSTER_SLOTS[index];
-      const showPoster = !!poster.src && !failedIndices.has(index);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: (node) => {
-            posterRefs.current[index] = node;
-          },
-          "data-ds-poster-stack-item": true,
-          className: cn(
-            "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
-            slot.positionClassName,
-            slot.zIndexClassName
-          ),
-          style: {
-            transform: slot.restTransform,
-            boxShadow: POSTER_SHADOW,
-            animationName: slot.animationName,
-            animationDuration: `${slot.animationDurationMs}ms`,
-            animationTimingFunction: "ease-in-out",
-            animationIterationCount: "infinite",
-            animationDirection: "alternate"
-          },
-          children: showPoster && // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx(
-            "img",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative h-[196px] md:h-[400px] md:w-auto md:mx-0", PHONE_STAGE_CLASS, 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",
             {
-              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))
-            }
-          )
-        },
-        poster.alt || index
-      );
-    })
-  ] });
+              ref: (node) => {
+                posterRefs.current[index] = node;
+              },
+              "data-ds-poster-stack-item": true,
+              className: cn(
+                "absolute aspect-[3/4] overflow-hidden rounded-xl bg-muted",
+                slot.positionClassName,
+                slot.zIndexClassName,
+                poster.href && "hover:z-[4] focus-within:z-[4]"
+              ),
+              style: {
+                transform: slot.restTransform,
+                boxShadow: POSTER_SHADOW,
+                animationName: slot.animationName,
+                animationDuration: `${slot.animationDurationMs}ms`,
+                animationTimingFunction: "ease-in-out",
+                animationIterationCount: "infinite",
+                animationDirection: "alternate"
+              },
+              children: poster.href ? /* @__PURE__ */ jsx(
+                LinkComponent,
+                {
+                  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
+          );
+        })
+      ]
+    }
+  );
 }
 
 export { PosterStack };

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/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-QRSIJC4X.js';
+import '../chunk-BRXI6EDO.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 };