@bearmenu/ui 0.8.6 → 0.8.8

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

@@ -5,7 +5,7 @@ type PosterWallTile = {
     src?: string;
 };
 type PosterWallProps = {
-    /** Background tiles. Desktop renders 48, `compact` renders 36 — shorter arrays are padded with placeholders. */
+    /** Background tiles. The grid sizes itself to how many there are (see above); with none, a placeholder grid renders. */
     tiles?: PosterWallTile[];
     /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
     variant?: "default" | "compact";
@@ -13,13 +13,13 @@ type PosterWallProps = {
     children?: React.ReactNode;
     className?: string;
 };
-declare function PosterWall({ tiles, variant, children, className }: PosterWallProps): react_jsx_runtime.JSX.Element;
+declare function PosterWall({ tiles, variant, children, className, }: PosterWallProps): react_jsx_runtime.JSX.Element;
 type PosterWallSkeletonProps = {
     /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
     variant?: "default" | "compact";
     className?: string;
 };
 /** The tile grid at rest — the sweeping light never renders in the loading state. */
-declare function PosterWallSkeleton({ variant, className }: PosterWallSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PosterWallSkeleton({ variant, className, }: PosterWallSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { PosterWall, type PosterWallProps, PosterWallSkeleton, type PosterWallSkeletonProps, type PosterWallTile };

package/dist/components/poster-wall.js

@@ -25,24 +25,60 @@ function useInViewport() {
   React.useEffect(() => {
     const node = ref.current;
     if (!node || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      threshold: 0
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      {
+        threshold: 0
+      }
+    );
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
   return [ref, inView];
 }
-function PosterWall({ tiles, variant = "default", children, className }) {
+function PosterWall({
+  tiles,
+  variant = "default",
+  children,
+  className
+}) {
   const isCompact = variant === "compact";
-  const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
-  const slots = Array.from({ length: tileCount }, (_, index) => {
-    var _a;
-    return (_a = tiles == null ? void 0 : tiles[index]) != null ? _a : {};
-  });
+  const maxCols = isCompact ? 6 : 12;
+  const maxSlots = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
+  const heightPx = isCompact ? 330 : 420;
+  const pictures = React.useMemo(
+    () => (tiles != null ? tiles : []).filter((tile) => !!tile.src),
+    [tiles]
+  );
   const prefersReducedMotion = usePrefersReducedMotion();
   const [wallRef, inView] = useInViewport();
   const isSweepPaused = prefersReducedMotion || !inView;
+  const [width, setWidth] = React.useState(isCompact ? 390 : 1200);
+  React.useEffect(() => {
+    const node = wallRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(
+      ([entry]) => setWidth(entry.contentRect.width)
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [wallRef]);
+  let cols = maxCols;
+  let slots;
+  if (pictures.length === 0) {
+    slots = Array.from({ length: maxSlots }, () => ({}));
+  } else {
+    const shown = Math.min(pictures.length, maxSlots);
+    cols = Math.min(
+      maxCols,
+      Math.max(2, Math.round(Math.sqrt(shown * width / heightPx)))
+    );
+    const rows = Math.max(1, Math.ceil(shown / cols));
+    slots = Array.from(
+      { length: cols * rows },
+      (_, index) => pictures[index % pictures.length]
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -62,10 +98,8 @@ function PosterWall({ tiles, variant = "default", children, className }) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
-              isCompact ? "grid-cols-6" : "grid-cols-12"
-            ),
+            className: "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
+            style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
             "aria-hidden": true,
             children: slots.map(
               (tile, index) => tile.src ? (
@@ -130,7 +164,10 @@ function PosterWall({ tiles, variant = "default", children, className }) {
     }
   );
 }
-function PosterWallSkeleton({ variant = "default", className }) {
+function PosterWallSkeleton({
+  variant = "default",
+  className
+}) {
   const isCompact = variant === "compact";
   const tileCount = isCompact ? POSTER_WALL_COMPACT_TILE_COUNT : POSTER_WALL_DESKTOP_TILE_COUNT;
   return /* @__PURE__ */ jsxs(
@@ -150,7 +187,13 @@ function PosterWallSkeleton({ variant = "default", className }) {
               "absolute inset-0 grid auto-rows-fr gap-[2px] opacity-50",
               isCompact ? "grid-cols-6" : "grid-cols-12"
             ),
-            children: Array.from({ length: tileCount }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-none bg-white/10" }, index))
+            children: Array.from({ length: tileCount }, (_, index) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                className: "h-full w-full rounded-none bg-white/10"
+              },
+              index
+            ))
           }
         ),
         /* @__PURE__ */ jsx(
@@ -170,8 +213,21 @@ function PosterWallSkeleton({ variant = "default", className }) {
               isCompact ? "justify-end gap-[11px] p-5" : "justify-center gap-[15px] px-12"
             ),
             children: [
-              /* @__PURE__ */ jsx(Skeleton, { className: cn("bg-white/15", isCompact ? "h-[11px] w-40" : "h-3 w-52") }),
-              /* @__PURE__ */ jsx(Skeleton, { className: cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96") })
+              /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: cn(
+                    "bg-white/15",
+                    isCompact ? "h-[11px] w-40" : "h-3 w-52"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: cn("bg-white/20", isCompact ? "h-7 w-64" : "h-10 w-96")
+                }
+              )
             ]
           }
         )

package/dist/components/section-header.d.ts

@@ -25,6 +25,21 @@ type SectionHeaderProps = {
     /** Trailing action label, e.g. "See all". */
     action?: string;
     actionHref?: string;
+    /**
+     * `muted` (default): 14px in `--muted-foreground`, at every width. `app`:
+     * BELOW `lg`, 12.5px semibold in `--accent` — the way an app's "All ›" reads
+     * at the end of a card's title row, quieter in size and louder in colour so
+     * it sits in the count's tier rather than competing with the title. From
+     * `lg` it falls back to `muted`: the app treatment is a phone treatment, and
+     * the desktop page it shares a header with is unchanged by it.
+     */
+    actionTone?: "muted" | "app";
+    /**
+     * `always` (default) shows the subtitle at every width. `lg` hides it below
+     * the `lg` breakpoint for surfaces that narrate on desktop and not on a
+     * phone, where a card title with a count is the whole header.
+     */
+    subtitleFrom?: "always" | "lg";
     /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
     linkComponent?: React.ComponentType<SectionHeaderLinkProps>;
     onAction?: (mouseEvent: React.MouseEvent) => void;
@@ -37,7 +52,7 @@ type SectionHeaderProps = {
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
     className?: string;
 };
-declare function SectionHeader({ title, count, subtitle, action, actionHref, linkComponent: LinkComponent, onAction, as: Heading, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ title, count, subtitle, action, actionHref, actionTone, subtitleFrom, linkComponent: LinkComponent, onAction, as: Heading, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 type SectionHeaderSkeletonProps = {
     /** Shows the inline count placeholder, matching `SectionHeaderProps["count"]`. */
     showCount?: boolean;

package/dist/components/section-header.js

@@ -8,38 +8,57 @@ function DefaultLink(_a) {
   var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
 }
-var ACTION_CLASSES = cn(
-  "inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[14px] text-muted-foreground",
-  "transition-colors duration-150 hover:text-foreground motion-reduce:transition-none",
+var ACTION_BASE_CLASSES = cn(
+  "inline-flex min-h-11 shrink-0 items-center gap-0.5 rounded-sm -my-2 py-2 -mr-1 pr-1",
+  "transition-colors duration-150 motion-reduce:transition-none",
   "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );
+var ACTION_TONE_CLASSES = {
+  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  app: cn(
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+  )
+};
 function SectionHeader({
   title,
   count,
   subtitle,
   action,
   actionHref,
+  actionTone = "muted",
+  subtitleFrom = "always",
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
   className
 }) {
   const actionIcon = /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true });
+  const actionClasses = cn(ACTION_BASE_CLASSES, ACTION_TONE_CLASSES[actionTone]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col mb-3.5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline", children: [
         /* @__PURE__ */ jsx(Heading, { className: "truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]", children: title }),
-        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-0.5 shrink-0 text-[12px] text-muted-foreground", children: count })
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-1.5 shrink-0 text-[12px] tabular-nums text-muted-foreground lg:ml-0.5", children: count })
       ] }),
-      action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: ACTION_CLASSES, onClick: onAction, children: [
+      action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: actionClasses, onClick: onAction, children: [
         action,
         actionIcon
-      ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: ACTION_CLASSES, onClick: onAction, children: [
+      ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: actionClasses, onClick: onAction, children: [
         action,
         actionIcon
       ] }) : null)
     ] }),
-    subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]", children: subtitle })
+    subtitle && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]",
+          subtitleFrom === "lg" && "hidden lg:block"
+        ),
+        children: subtitle
+      }
+    )
   ] });
 }
 function SectionHeaderSkeleton({

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

@@ -0,0 +1,34 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * SnapRail — a horizontal, finger-driven rail with mandatory snap points, the
+ * way a native app lays out a row of cards. Not `DriftRail`: that one moves on
+ * its own and is for ambience; this one waits to be swiped and is for content
+ * the reader is expected to reach.
+ *
+ * Every direct child becomes a snap target and takes the rail's item width, so
+ * callers pass bare cards — no wrapper, no per-item width. Widths are
+ * percentages of the rail, so the peek of the next card is what tells the
+ * reader there is more; there is no scrollbar and no edge fade.
+ *
+ * `bleed` cancels the host's horizontal padding and restores it as scroll
+ * padding, so the first card lines up with the host's content edge and the
+ * rail still snaps to that same edge after a swipe. Without it, the rail
+ * snaps flush to the host's rounded corner and loads looking pre-scrolled.
+ * `card` is the 14px inset of a hub card; `page` is the 16px page gutter.
+ */
+declare const snapRailVariants: (props?: ({
+    itemWidth?: "sm" | "lg" | "md" | null | undefined;
+    gap?: "default" | "sm" | null | undefined;
+    bleed?: "none" | "page" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SnapRailProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof snapRailVariants>;
+declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    itemWidth?: "sm" | "lg" | "md" | null | undefined;
+    gap?: "default" | "sm" | null | undefined;
+    bleed?: "none" | "page" | "card" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+
+export { SnapRail, type SnapRailProps };

package/dist/components/snap-rail.js

@@ -0,0 +1,51 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var snapRailVariants = cva(
+  cn(
+    "flex snap-x snap-mandatory overflow-x-auto pb-0.5 scrollbar-hide",
+    "[&>*]:shrink-0 [&>*]:snap-start"
+  ),
+  {
+    variants: {
+      itemWidth: {
+        sm: "[&>*]:w-[46%]",
+        md: "[&>*]:w-[60%]",
+        lg: "[&>*]:w-[80%]"
+      },
+      gap: {
+        sm: "gap-2",
+        default: "gap-3"
+      },
+      bleed: {
+        none: "",
+        card: "-mx-3.5 px-3.5 scroll-px-3.5",
+        page: "-mx-4 px-4 scroll-px-4"
+      }
+    },
+    defaultVariants: {
+      itemWidth: "sm",
+      gap: "default",
+      bleed: "none"
+    }
+  }
+);
+var SnapRail = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, itemWidth, gap, bleed } = _b, props = __objRest(_b, ["className", "itemWidth", "gap", "bleed"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        "data-slot": "snap-rail",
+        className: cn(snapRailVariants({ itemWidth, gap, bleed }), className)
+      }, props)
+    );
+  }
+);
+SnapRail.displayName = "SnapRail";
+
+export { SnapRail };

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-band.d.ts

@@ -1,6 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+/**
+ * The mobile axis gutter, shared by `HourBand` 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;
@@ -8,6 +16,16 @@ type TimelineHourPuckProps = {
     isLive?: boolean;
     /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
     liveLabel?: string;
+    /**
+     * `station` (default): 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 mobile gutter — an app's time label, not a
+     * station on a rail. In `chip` 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";
     className?: string;
 };
 /**
@@ -25,7 +43,7 @@ type TimelineHourPuckProps = {
  * 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, className }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
+declare function TimelineHourPuck({ time, isLive, liveLabel, variant, className, }: TimelineHourPuckProps): react_jsx_runtime.JSX.Element;
 type TimelineBandProps = {
     /** The lane column — usually a poster card, or empty for a quiet hour. */
     lane: React.ReactNode;
@@ -43,4 +61,4 @@ type TimelineBandSkeletonProps = {
  */
 declare function TimelineBandSkeleton({ className }: TimelineBandSkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { TimelineBand, type TimelineBandProps, TimelineBandSkeleton, type TimelineBandSkeletonProps, TimelineHourPuck, type TimelineHourPuckProps };
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, type TimelineBandProps, TimelineBandSkeleton, type TimelineBandSkeletonProps, TimelineHourPuck, type TimelineHourPuckProps };

package/dist/components/timeline-band.js

@@ -1,4 +1,4 @@
-export { TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-637L7XQ3.js';
+export { TIMELINE_MOBILE_GUTTER_CLASS, TimelineBand, TimelineBandSkeleton, TimelineHourPuck } from '../chunk-3TNPSN4D.js';
 import '../chunk-WSRWFA6K.js';
 import '../chunk-QXHMPJ35.js';
 import '../chunk-FEK5XGZW.js';

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

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * TimelinePlayhead — the "you are here" mark on the mobile timeline: the
+ * current time in the axis gutter, a dashed rule across the content column,
+ * and a filled NOW pill at the far edge.
+ *
+ * It sits BETWEEN hour bands, at the point where the wall clock falls, so the
+ * reader can see at a glance which hours are behind them and which are ahead.
+ * The live hour band's tinted chip says "this hour is running"; the playhead
+ * says exactly how far into it we are. Both are needed: a band spans an hour
+ * and the hour is mostly not "now".
+ *
+ * The time label shares the gutter width with `HourBand` so it lines up under
+ * the hour chips. Both strings arrive formatted — the DS holds no clock.
+ */
+type TimelinePlayheadProps = {
+    /** The current time, already formatted — "21:38". */
+    time: string;
+    /** The pill text, e.g. "NOW". */
+    label: string;
+    className?: string;
+};
+declare function TimelinePlayhead({ time, label, className }: TimelinePlayheadProps): react_jsx_runtime.JSX.Element;
+
+export { TimelinePlayhead, type TimelinePlayheadProps };

package/dist/components/timeline-playhead.js

@@ -0,0 +1,25 @@
+import { TIMELINE_MOBILE_GUTTER_CLASS } from '../chunk-3TNPSN4D.js';
+import '../chunk-WSRWFA6K.js';
+import '../chunk-QXHMPJ35.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimelinePlayhead({ time, label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5 pt-3", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          TIMELINE_MOBILE_GUTTER_CLASS,
+          "shrink-0 text-center font-mono text-[11px] font-bold tabular-nums text-success"
+        ),
+        children: time
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-0 flex-1 border-t-[1.5px] border-dashed border-success/50" }),
+    /* @__PURE__ */ jsx("span", { className: "rounded-full bg-success px-2 py-0.5 text-[9.5px] font-extrabold tracking-[0.1em] text-success-foreground", children: label })
+  ] });
+}
+
+export { TimelinePlayhead };

package/dist/components/weekend-panel.d.ts

@@ -22,14 +22,15 @@ type WeekendPanelProps = {
     linkComponent?: React.ComponentType<WeekendPanelLinkProps>;
     onActionClick?: () => void;
     isHighlighted?: boolean;
-    /** Loop duration for the slide/dots animation. Default 7 — sibling panels typically stagger at 8.5 and 10. */
+    /** Desktop autoplay loop duration — the page turns every half of it. Default 7; sibling panels typically stagger at 8.5 and 10. */
     durationSeconds?: number;
     /**
      * Accessible names for the pause/play toggle. Required — the control is
-     * only omitted under `prefers-reduced-motion`, where the labels go unused.
+     * only rendered on desktop and not under `prefers-reduced-motion`, but the
+     * DS owns no copy.
      */
     labels: WeekendPanelLabels;
-    /** The event cards. The animation is built around exactly four (two pages of two). */
+    /** The event cards. Built around exactly four (two pages of two). */
     children?: React.ReactNode;
     className?: string;
 };
@@ -39,6 +40,6 @@ type WeekendPanelSkeletonProps = {
     className?: string;
 };
 /** The panel at rest: the two visible cards of the two-up carousel, no slide. */
-declare function WeekendPanelSkeleton({ isHighlighted, className }: WeekendPanelSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function WeekendPanelSkeleton({ isHighlighted, className, }: WeekendPanelSkeletonProps): react_jsx_runtime.JSX.Element;
 
 export { WeekendPanel, type WeekendPanelLabels, type WeekendPanelLinkProps, type WeekendPanelProps, WeekendPanelSkeleton, type WeekendPanelSkeletonProps };