@bearmenu/ui 0.8.17 → 0.8.18

package/src/components/timeline-band.tsx

@@ -1,247 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Radio } from "lucide-react";
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
-import { Skeleton } from "./skeleton";
-
-/**
- * TimelineBand — the desktop timeline's three-column row: lane │ spine │ content.
- *
- * Desktop counterpart of `<HourBand>`. Where the mobile timeline collapses the
- * axis into a 52px gutter beside full-width cards, the desktop layout gives the
- * poster its own lane (`--timeline-lane`), a dedicated spine
- * (`--timeline-spine`) carrying the hairline, and a separate content column for
- * whatever follows.
- *
- * ── The band does not draw hours ──────────────────────────────────────────
- * IT USED TO, and only for the hour it opened on. Every LATER hour was an
- * inline `HourGroup` heading in the content column instead, so one concept was
- * drawn in two grammars 48px apart — a bordered puck ON the axis at the top of
- * the day, bare muted text OFF it for the rest of it. An axis whose ticks are
- * labelled once is not an axis, and that is exactly how it read: the later
- * hours were harder to follow than the first.
- *
- * Now every hour is a station and `HourGroup` emits its own, via
- * `TimelineHourPuck` below. The band keeps the geometry and the hairline and
- * nothing else — which is also why `puckTop` is gone: each puck centres itself
- * on its own heading rule, so there is no magic offset left for a caller to
- * tune against a lane height.
- *
- * The invariant the old docblock was reaching for still holds, and states more
- * simply now: AN HOUR APPEARS EXACTLY ONCE, AND ALWAYS ON THE SPINE.
- *
- * HOW THE CONTENT COLUMN IS MEANT TO BE FILLED — the source design composes it
- * in tiers, and getting this wrong is what makes the band look flat:
- *
- *   lane      one feature card (an `EventCard` with `emphasis`), plus any
- *             "N earlier events" collapse control beneath it.
- *   content   an `<HourGroup spine>` per hour — the opening one holding a grid
- *             of `EventCard`s, later ones holding the denser
- *             `<EventCompactRow>` as the night thins out.
- *
- * So the density falls off across the row: one poster, then a few cards, then
- * rows.
- */
-
-/**
- * Ring pulse on the live puck — inherited from an earlier `TimelinePlayhead`,
- * which carried this surface's only motion. Kept at its 2.4s `ease-in-out` and
- * its reduced-motion kill switch, but BOX-SHADOW ONLY: a `transform: scale`
- * would make the hairline visibly breathe here, because this puck sits ON the
- * rail. (Today's `timeline-playhead.tsx` is static and sits between bands.)
- */
-const LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
-
-/**
- * The 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.
- */
-export const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
-
-export type TimelineHourPuckProps = {
-  /** The hour, already formatted and localised — or an em dash for a quiet day. */
-  time: string;
-  /** Marks this as the hour currently in progress. */
-  isLive?: boolean;
-  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
-  liveLabel?: string;
-  /**
-   * `station` (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;
-};
-
-/**
- * The station on the timeline's axis — ONE object, positioned by its host:
- * `HourGroup` centres it on its own heading rule out in the desktop spine,
- * `HourBand` pins it to the top of the mobile gutter.
- *
- * Extracted because it was hand-rolled twice and the copies had already
- * drifted — this one bordered and `rounded-[7px] px-[7px]`, `hour-band.tsx`'s
- * borderless and `rounded-md px-1.5`. The `bg-background` fill punches through
- * the hairline so the rail reads as continuous behind the label rather than
- * butting into it.
- *
- * The live label is absolutely positioned rather than a flex sibling: hosts
- * centre this puck with `-translate-y-1/2`, and a two-item column would centre
- * the STACK, lifting the puck off the line it exists to sit on.
- */
-export function TimelineHourPuck({
-  time,
-  isLive,
-  liveLabel,
-  variant = "station",
-  className,
-}: TimelineHourPuckProps) {
-  const isChip = variant === "chip";
-
-  return (
-    <span className={cn("relative flex justify-center", className)}>
-      {isLive && (
-        <style>{`
-          @keyframes ${LIVE_PUCK_PULSE_CLASS} {
-            0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 40%, transparent); }
-            50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 0%, transparent); }
-          }
-          .${LIVE_PUCK_PULSE_CLASS} {
-            animation: ${LIVE_PUCK_PULSE_CLASS} 2.4s ease-in-out infinite;
-          }
-          @media (prefers-reduced-motion: reduce) {
-            .${LIVE_PUCK_PULSE_CLASS} { animation: none; }
-          }
-        `}</style>
-      )}
-      <span
-        className={cn(
-          "whitespace-nowrap font-mono tabular-nums",
-          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"
-              )
-        )}
-      >
-        {isChip && isLive && <Radio className="h-2.5 w-2.5 shrink-0" aria-hidden />}
-        {time}
-      </span>
-      {isLive && !!liveLabel && (
-        <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"
-                )
-          )}
-        >
-          {liveLabel}
-        </span>
-      )}
-    </span>
-  );
-}
-
-export type TimelineBandProps = {
-  /** The lane column — usually a poster card, or empty for a quiet hour. */
-  lane: React.ReactNode;
-  /** The content column, normally one `<HourGroup spine>` per hour. */
-  children: React.ReactNode;
-  className?: string;
-};
-
-export function TimelineBand({ lane, children, className }: TimelineBandProps) {
-  return (
-    <div className={cn("flex items-stretch", className)}>
-      <div className="w-[var(--timeline-lane)] shrink-0">{lane}</div>
-
-      <div className="relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch">
-        <Separator orientation="vertical" className="h-full" />
-      </div>
-
-      <div className="flex min-w-0 flex-1 flex-col">{children}</div>
-    </div>
-  );
-}
-
-/**
- * A fixed-size shimmer block. `radiusPx` only needs to be passed for the
- * poster-sized blocks (12, matching `rounded-xl`) — every thinner text-line
- * height here (13–18px) is less than twice that radius, so the browser clamps
- * it to a pill automatically even left at the `Skeleton` default.
- */
-function sk(width: string, height: number, radiusPx = 12) {
-  return (
-    <Skeleton
-      style={{ width, height: `${height}px`, borderRadius: `${radiusPx}px` }}
-    />
-  );
-}
-
-export type TimelineBandSkeletonProps = {
-  className?: string;
-};
-
-/**
- * Holds the lane/spine/content geometry so nothing jumps when data lands.
- * The spine renders its hairline with no puck — there's no hour to show yet.
- */
-export function TimelineBandSkeleton({ className }: TimelineBandSkeletonProps) {
-  return (
-    <div className={cn("flex items-stretch", className)} aria-hidden="true">
-      <div className="flex w-[var(--timeline-lane)] shrink-0 flex-col gap-3">
-        {sk("100%", 297, 12)}
-        {sk("70%", 18)}
-        {sk("45%", 13)}
-      </div>
-
-      <div className="relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch">
-        <Separator orientation="vertical" className="h-full" />
-      </div>
-
-      <div className="flex min-w-0 flex-1 flex-col gap-4">
-        <div className="grid grid-cols-3 gap-[10px]">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="flex flex-col gap-2">
-              {sk("100%", 190, 12)}
-              {sk("85%", 15)}
-              {sk("55%", 12)}
-            </div>
-          ))}
-        </div>
-
-        <div className="flex flex-col">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="relative flex items-center gap-[11px] py-2">
-              <Separator className="absolute inset-x-0 top-0" />
-
-              <Skeleton className="h-[34px] w-[34px] shrink-0 rounded-md" />
-              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-                {sk("60%", 13)}
-                {sk("40%", 11.5)}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}