@bearmenu/ui 0.8.51 → 0.8.52

package/src/components/event-compact-row.tsx

@@ -4,6 +4,7 @@ import { memo, useState } from "react";
 import { Radio } from "lucide-react";
 import { cn } from "../lib/utils";
 import { EventPosterFallback } from "./event-poster-fallback";
+import { PosterOverlayFrame } from "../lib/poster-overlay-frame";
 import { Skeleton } from "./skeleton";
 import { Tag } from "./tag";
 import { TagGroup } from "./tag-group";
@@ -105,6 +106,12 @@ export type EventCompactRowProps = {
   priority?: boolean;
   /** Rendered in place of the poster when it is absent or fails to load. Defaults to `<EventPosterFallback />`. */
   fallback?: React.ReactNode;
+  /**
+   * Decoration laid over the poster's box, unclipped (it may cross the
+   * poster's edge), above the row. Absolutely positioned, `aria-hidden`,
+   * pointer-transparent; it takes no layout.
+   */
+  posterOverlay?: React.ReactNode;
 };
 
 export const EventCompactRow = memo(function EventCompactRow({
@@ -125,6 +132,7 @@ export const EventCompactRow = memo(function EventCompactRow({
   className,
   priority,
   fallback = <EventPosterFallback />,
+  posterOverlay,
 }: EventCompactRowProps) {
   const [imgError, setImgError] = useState(false);
   const isSm = size === "sm";
@@ -169,30 +177,32 @@ export const EventCompactRow = memo(function EventCompactRow({
           phone-scoped: a 14px bold title and 11px of vertical padding below
           `lg`; from `lg` the 13px semibold title and 8px padding the desktop
           timeline and the hub's venue block already had. */}
-      <div
-        className={cn(
-          "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[10px] bg-muted",
-          isEnded && "opacity-45",
-        )}
-      >
-        {showPoster ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={event.poster_url}
-            alt=""
-            loading={priority ? "eager" : "lazy"}
-            decoding="async"
-            className="h-full w-full object-cover"
-            onError={() => setImgError(true)}
-          />
-        ) : (
-          // A bare `bg-muted` rectangle was survivable at 34px. At 58x72 beside
-          // real posters it reads as a broken image rather than an absent one —
-          // so this row finally joins every sibling in the family in having a
-          // designed fallback.
-          fallback
-        )}
-      </div>
+      <PosterOverlayFrame overlay={posterOverlay}>
+        <div
+          className={cn(
+            "relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[10px] bg-muted",
+            isEnded && "opacity-45",
+          )}
+        >
+          {showPoster ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={event.poster_url}
+              alt=""
+              loading={priority ? "eager" : "lazy"}
+              decoding="async"
+              className="h-full w-full object-cover"
+              onError={() => setImgError(true)}
+            />
+          ) : (
+            // A bare `bg-muted` rectangle was survivable at 34px. At 58x72 beside
+            // real posters it reads as a broken image rather than an absent one —
+            // so this row finally joins every sibling in the family in having a
+            // designed fallback.
+            fallback
+          )}
+        </div>
+      </PosterOverlayFrame>
 
       <div className="min-w-0 flex-1">
         {/* The title wraps in full — never truncated, in this row or any of

package/src/components/event-hub-hero.tsx

@@ -29,6 +29,11 @@ export type EventHubHeroStat = {
   label: string;
   /** `live` marks the figure that is happening right now. */
   tone?: "default" | "live";
+  /**
+   * Decoration beside the figure, absolutely positioned just past its right
+   * edge: no layout. Decorative and `aria-hidden`.
+   */
+  adornment?: React.ReactNode;
 };
 
 export type EventHubHeroProps = {
@@ -131,10 +136,19 @@ export function EventHubHero({
                   className={cn(
                     "text-[19px] font-black leading-none tracking-[-0.02em] tabular-nums",
                     isLive ? "text-success" : "text-foreground",
-                    "lg:text-[30px] lg:tracking-[-0.03em]"
+                    "lg:text-[30px] lg:tracking-[-0.03em]",
+                    stat.adornment && "relative w-fit"
                   )}
                 >
                   {stat.value}
+                  {stat.adornment && (
+                    <span
+                      className="pointer-events-none absolute left-full top-1/2 ml-1.5 -translate-y-1/2"
+                      aria-hidden
+                    >
+                      {stat.adornment}
+                    </span>
+                  )}
                 </span>
                 <span className="mt-0.5 text-[11px] text-muted-foreground lg:mt-[5px] lg:text-[12.5px]">
                   {stat.label}

package/src/components/event-list-row-wide.tsx

@@ -6,6 +6,7 @@ import { MapPin, Radio } from "lucide-react";
 import { cn } from "../lib/utils";
 import { buttonVariants } from "./button";
 import { EventPosterFallback } from "./event-poster-fallback";
+import { PosterOverlayFrame } from "../lib/poster-overlay-frame";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import { Tag } from "./tag";
@@ -106,6 +107,12 @@ export type EventListRowWideProps = {
    * line. Same prop and same reason as `EventIndexRow`.
    */
   hideRule?: boolean;
+  /**
+   * Decoration laid over the thumbnail's box, unclipped (it may cross the
+   * thumbnail's edge). Absolutely positioned, `aria-hidden`,
+   * pointer-transparent; it takes no layout.
+   */
+  posterOverlay?: ReactNode;
 };
 
 export const EventListRowWide = memo(function EventListRowWide({
@@ -123,6 +130,7 @@ export const EventListRowWide = memo(function EventListRowWide({
   priority,
   fallback = <EventPosterFallback />,
   hideRule,
+  posterOverlay,
 }: EventListRowWideProps) {
   const [imgError, setImgError] = useState(false);
 
@@ -178,21 +186,23 @@ export const EventListRowWide = memo(function EventListRowWide({
         </div>
       </div>
 
-      <div className="aspect-square w-[104px] shrink-0 overflow-hidden rounded-[10px] bg-muted">
-        {showPoster ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={event.poster_url}
-            alt=""
-            loading={priority ? "eager" : "lazy"}
-            decoding="async"
-            className="h-full w-full object-cover"
-            onError={() => setImgError(true)}
-          />
-        ) : (
-          fallback
-        )}
-      </div>
+      <PosterOverlayFrame overlay={posterOverlay}>
+        <div className="aspect-square w-[104px] shrink-0 overflow-hidden rounded-[10px] bg-muted">
+          {showPoster ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={event.poster_url}
+              alt=""
+              loading={priority ? "eager" : "lazy"}
+              decoding="async"
+              className="h-full w-full object-cover"
+              onError={() => setImgError(true)}
+            />
+          ) : (
+            fallback
+          )}
+        </div>
+      </PosterOverlayFrame>
 
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2">

package/src/components/event-tonight-strip.test.tsx

@@ -21,6 +21,18 @@ describe("EventTonightStrip", () => {
     );
   });
 
+  it("draws the live indicator in place of the pulsing dot", () => {
+    render(
+      <EventTonightStrip
+        tone="live"
+        lead="3 live now"
+        href="/events/schedule"
+        liveIndicator={<i data-testid="flame" />}
+      />
+    );
+    expect(screen.getByTestId("flame")).toBeInTheDocument();
+  });
+
   it("renders a status line, not a link, when there is nothing to open", () => {
     render(<EventTonightStrip tone="none" lead="Nothing scheduled" />);
     expect(screen.queryByRole("link")).toBeNull();

package/src/components/event-tonight-strip.tsx

@@ -51,6 +51,8 @@ export type EventTonightStripProps = {
   href?: string;
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<EventTonightStripLinkProps>;
+  /** Replaces the pulsing dot of the `live` tone, in the dot's own slot. Decorative. */
+  liveIndicator?: React.ReactNode;
   className?: string;
 };
 
@@ -61,12 +63,17 @@ export function EventTonightStrip({
   actionLabel,
   href,
   linkComponent: LinkComponent = DefaultLink,
+  liveIndicator,
   className,
 }: EventTonightStripProps) {
   const interactive = !!href;
 
   const mark =
-    tone === "live" ? (
+    tone === "live" && liveIndicator ? (
+      <span className="flex h-4 w-4 items-center justify-center" aria-hidden>
+        {liveIndicator}
+      </span>
+    ) : tone === "live" ? (
       <span className="relative flex h-2.5 w-2.5" aria-hidden>
         <span className="absolute inline-flex h-full w-full rounded-full bg-success/40 motion-live-pulse motion-reduce:animate-none" />
         <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-success" />

package/src/components/featured-rail-item.tsx

@@ -34,6 +34,8 @@ export type FeaturedRailItemProps = {
   note: string;
   /** Top-left overlay pill. Include its icon. */
   tagLabel?: React.ReactNode;
+  /** Decorative overlay inside the poster box (`relative`, clipping): an absolutely positioned, `aria-hidden` ornament. */
+  posterOverlay?: React.ReactNode;
   posterUrl?: string;
   href?: string;
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
@@ -49,6 +51,7 @@ export function FeaturedRailItem({
   venue,
   note,
   tagLabel,
+  posterOverlay,
   posterUrl,
   href,
   linkComponent: LinkComponent = DefaultLink,
@@ -84,6 +87,8 @@ export function FeaturedRailItem({
             </span>
           </div>
         )}
+
+        {posterOverlay}
       </div>
 
       <div className="px-0.5 pt-2.5">

package/src/components/kitchen-dossier.tsx

@@ -96,6 +96,12 @@ export type KitchenDossierProps = {
   partDurationMs?: number;
   /** The foot's action — pass a rendered link or button. */
   action?: ReactNode;
+  /**
+   * Drawn in place of the open-until pill's dot, in the dot's slot (roughly
+   * 16-22px square). Decorative and `aria-hidden`; only rendered with
+   * `labels.openUntil`.
+   */
+  openIndicator?: ReactNode;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -128,6 +134,7 @@ export function KitchenDossier({
   formatScore,
   partDurationMs,
   action,
+  openIndicator,
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: KitchenDossierProps) {
@@ -249,7 +256,13 @@ export function KitchenDossier({
         <div className="relative min-h-[184px] flex-1">
           {labels.openUntil && (
             <span className="absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-3 text-[11.5px] font-bold text-white">
-              <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
+              {openIndicator ? (
+                <span className="flex shrink-0 items-center justify-center" aria-hidden>
+                  {openIndicator}
+                </span>
+              ) : (
+                <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
+              )}
               {labels.openUntil}
             </span>
           )}

package/src/components/menu-hub-hero.tsx

@@ -66,6 +66,12 @@ export type MenuHubHeroProps = {
    * `h2` so the document has one h1, not two.
    */
   headingLevel?: "h1" | "h2";
+  /**
+   * A decorative layer over the photographs and their scrim, under the text:
+   * fill the banner with `absolute inset-0`. Clipped by the banner's rounded
+   * edge. Decorative and `aria-hidden`.
+   */
+  sceneOverlay?: React.ReactNode;
   className?: string;
 };
 
@@ -91,6 +97,7 @@ export function MenuHubHero({
   backgroundUrl,
   tileUrls,
   headingLevel: Heading = "h1",
+  sceneOverlay,
   className,
 }: MenuHubHeroProps) {
   return (
@@ -157,6 +164,12 @@ export function MenuHubHero({
         )}
       />
 
+      {sceneOverlay && (
+        <div aria-hidden className="pointer-events-none absolute inset-0">
+          {sceneOverlay}
+        </div>
+      )}
+
       <div className="relative z-[1] flex w-full flex-col justify-center gap-3 p-5 text-white lg:gap-4 lg:px-12 lg:py-11">
         {kicker && (
           <span className="inline-flex w-max items-center gap-[7px] rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">

package/src/components/place-card.stories.tsx

@@ -97,6 +97,16 @@ export const WithPhotoOverlay: Story = {
   },
 };
 
+/** A caller's glyph in the open-now dot's slot (16-20px); the closed badge is unchanged. */
+export const WithOpenIndicator: Story = {
+  args: {
+    place: { ...basePlace, open_now: true },
+    openIndicator: (
+      <span className="block h-[18px] w-[18px] rounded-full bg-amber-500 ring-2 ring-white/70" />
+    ),
+  },
+};
+
 export const WithFooter: Story = {
   args: {
     footer: <span className="text-xs text-muted-foreground">Served as Margherita · 45 RON · 350g</span>,

package/src/components/place-card.test.tsx

@@ -291,6 +291,37 @@ describe("PlaceCard", () => {
   });
 });
 
+describe("PlaceCard openIndicator", () => {
+  it("replaces the green dot when the place is open", () => {
+    const { container } = render(
+      <PlaceCard
+        place={makePlace({ open_now: true })}
+        labels={LABELS}
+        openIndicator={<i data-testid="indicator" />}
+      />
+    );
+    expect(screen.getByTestId("indicator")).toBeInTheDocument();
+    expect(container.querySelector(".bg-green-500")).not.toBeInTheDocument();
+  });
+
+  it("keeps the default dot without an indicator", () => {
+    const { container } = render(<PlaceCard place={makePlace({ open_now: true })} labels={LABELS} />);
+    expect(container.querySelector(".bg-green-500")).toBeInTheDocument();
+  });
+
+  it("does not render the indicator when closed, and keeps the badge", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ open_now: false })}
+        labels={LABELS}
+        openIndicator={<i data-testid="indicator" />}
+      />
+    );
+    expect(screen.queryByTestId("indicator")).not.toBeInTheDocument();
+    expect(screen.getByText("Closed")).toBeInTheDocument();
+  });
+});
+
 describe("PlaceCardSkeleton", () => {
   it("is hidden from assistive tech and reserves the footer when asked", () => {
     const { container, rerender } = render(<PlaceCardSkeleton />);

package/src/components/place-card.tsx

@@ -134,6 +134,13 @@ export type PlaceCardProps = {
    * trending badge on the API's `trending` flag).
    */
   photoOverlay?: ReactNode;
+  /**
+   * Drawn in place of the green open-now dot, in the dot's top-right slot
+   * (roughly 16-20px square). Decorative: it is only rendered when
+   * `place.open_now === true` and should be `aria-hidden`. The closed badge is
+   * untouched.
+   */
+  openIndicator?: ReactNode;
   className?: string;
 };
 
@@ -191,6 +198,7 @@ export const PlaceCard = memo(function PlaceCard({
   onOpen,
   footer,
   photoOverlay,
+  openIndicator,
   className,
 }: PlaceCardProps) {
   const [imgError, setImgError] = useState(false);
@@ -258,12 +266,20 @@ export const PlaceCard = memo(function PlaceCard({
           </div>
         )}
 
-        {place.open_now === true && (
-          <span
-            className="absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-white/70"
-            aria-hidden
-          />
-        )}
+        {place.open_now === true &&
+          (openIndicator ? (
+            <span
+              className="pointer-events-none absolute right-2 top-2 flex items-center justify-center"
+              aria-hidden
+            >
+              {openIndicator}
+            </span>
+          ) : (
+            <span
+              className="absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-white/70"
+              aria-hidden
+            />
+          ))}
         {place.open_now === false && (
           /* `Badge variant="overlay"` + the shared cover geometry: this pill and
              the caller's `photoOverlay` sit on the same photo and must match. */

package/src/components/poster-stack.tsx

@@ -60,6 +60,8 @@ export type PosterStackPoster = {
   caption?: string;
   /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
   fallback?: React.ReactNode;
+  /** Decorative overlay on the poster face (it tilts and floats with the poster): an absolutely positioned, `aria-hidden` ornament. */
+  overlay?: React.ReactNode;
   /** Load now at high priority instead of lazily. For the poster that is the
    *  page's LCP element; every other poster stays lazy. */
   eager?: boolean;
@@ -207,6 +209,7 @@ export function PosterStack({
                 </span>
               </span>
             )}
+            {poster.overlay}
           </>
         );
 

package/src/components/section-header.tsx

@@ -66,6 +66,11 @@ export type SectionHeaderProps = {
    * behaviour; it only holds the slot.
    */
   trailing?: React.ReactNode;
+  /**
+   * Absolute decoration anchored to the title group's own box. Takes no
+   * layout; the group is `relative` for it. Decorative and `aria-hidden`.
+   */
+  titleAdornment?: React.ReactNode;
   className?: string;
 };
 
@@ -98,6 +103,7 @@ export function SectionHeader({
   onAction,
   as: Heading = "h2",
   trailing,
+  titleAdornment,
   className,
 }: SectionHeaderProps) {
   const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
@@ -106,7 +112,7 @@ export function SectionHeader({
   return (
     <div className={cn("flex flex-col mb-3.5", className)}>
       <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-baseline">
+        <div className="relative flex min-w-0 items-baseline">
           <Heading className="truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]">
             {title}
           </Heading>
@@ -115,6 +121,7 @@ export function SectionHeader({
               {count}
             </span>
           )}
+          {titleAdornment}
         </div>
 
         {/* The action and the trailing controls share the row's end, so the

package/src/components/timeline-day.stories.tsx

@@ -135,6 +135,36 @@ export const FullDay: Story = {
   ),
 };
 
+/**
+ * 02:00 on a Friday: last night's set is still on and leads the day in a live
+ * off-axis group (`tone="live"`) — on now, but with no slot on today's axis.
+ * Its cards keep the phone gutter, so they line up with tonight's hour below.
+ */
+export const StillOnFromLastNight: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 py-6">
+      <EventDayHeader
+        dayNumber="09"
+        weekday="Friday"
+        meta="October · 2 events · 1 live"
+        size="responsive"
+      />
+      <TimelineDay rows={2}>
+        <TimelineHour time="Since last night" role="unscheduled" tone="live" countLabel="1 event" layout="rows">
+          <Card
+            ev={event("a", "Techno: Berlin calling", "Mansion", "23:00", 40)}
+            density="row-lg"
+            liveStatus="Live now · ends around 05:00"
+          />
+        </TimelineHour>
+        <TimelineHour time="21:00" countLabel="1 event">
+          <Card ev={event("b", "Comedy open mic", "Flying Circus", "21:00", 25)} />
+        </TimelineHour>
+      </TimelineDay>
+    </div>
+  ),
+};
+
 /** A quiet Tuesday: one hour, one event, no hero — no lane on desktop either. */
 export const OneHour: Story = {
   render: () => (

package/src/components/timeline-day.test.tsx

@@ -58,6 +58,30 @@ describe("TimelineDay", () => {
     expect(container.querySelector(".font-mono.tabular-nums.whitespace-nowrap")).toBeNull();
   });
 
+  it("gives a live unscheduled group a live heading and the hours' phone gutter", () => {
+    const { container } = render(
+      <TimelineHour time="Since last night" role="unscheduled" tone="live" countLabel="1 event">
+        <p>set</p>
+      </TimelineHour>
+    );
+    const section = container.querySelector("section");
+    expect(section).toHaveAttribute("data-tone", "live");
+    expect(section).toHaveClass("pl-[70px]", "lg:pl-0");
+    expect(screen.getByText("Since last night")).toHaveClass("text-success", "font-semibold");
+    expect(screen.getByText("Since last night")).not.toHaveClass("font-mono");
+    // Still off the axis: no station.
+    expect(container.querySelector(".font-mono.tabular-nums.whitespace-nowrap")).toBeNull();
+  });
+
+  it("ignores tone on a stationed hour", () => {
+    const { container } = render(
+      <TimelineHour time="21:00" tone="live">
+        <p>a</p>
+      </TimelineHour>
+    );
+    expect(container.querySelector("section")).not.toHaveAttribute("data-tone");
+  });
+
   it("rules between rows but not between cards", () => {
     const { container: rows } = render(
       <TimelineHour time="21:00" layout="rows">

package/src/components/timeline-hour.tsx

@@ -51,6 +51,15 @@ import { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from "./timeline-hour-
  *                 label, a rule, the count) at both widths, after the day's
  *                 real programme.
  *
+ * `tone="live"` (with `unscheduled` only) is the same off-axis group for
+ * events that are ON NOW but have no slot on today's axis — last night's set
+ * still running at 02:00, day three of a festival. It leads the day, so the
+ * quiet mono heading ("time to be confirmed") would dress "on right now" as
+ * "we don't know when": the label goes sans, semibold and success-tinted
+ * behind a pulsing dot, the rule takes the live hairline's tint, and the
+ * phone keeps the hours' gutter inset so its cards line up with the cards
+ * below instead of running 70px wider and reading as the day's feature.
+ *
  * `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` is the same gapped stack on the phone
@@ -67,6 +76,9 @@ export type TimelineHourProps = {
    *  the caller's label for the group ("Time to be confirmed"). */
   time: string;
   role?: TimelineHourRole;
+  /** `live`: an `unscheduled` group whose events are on now. Ignored on
+   *  other roles, which say "live" through `isLive`. */
+  tone?: "default" | "live";
   /** 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. */
@@ -109,6 +121,7 @@ function ruleFromLg(items: React.ReactNode[]) {
 export function TimelineHour({
   time,
   role = "hour",
+  tone = "default",
   isLive,
   liveLabel,
   countLabel,
@@ -121,6 +134,7 @@ export function TimelineHour({
   const isHero = role === "hero";
   const isContinuation = role === "continuation";
   const isUnscheduled = role === "unscheduled";
+  const isLiveGroup = isUnscheduled && tone === "live";
   const hasStation = !isUnscheduled;
   const isCards = layout === "cards";
   const items = React.Children.toArray(children);
@@ -129,10 +143,12 @@ export function TimelineHour({
   return (
     <section
       data-timeline-hour={role}
+      data-tone={isLiveGroup ? "live" : undefined}
       className={cn(
         "relative flex flex-col pt-2.5",
         // The phone gutter: the puck's column plus the 12px gap `HourBand` had.
-        hasStation && "pl-[70px] lg:pl-0",
+        // A live group keeps it so its cards align with the hours' cards.
+        (hasStation || isLiveGroup) && "pl-[70px] lg:pl-0",
         "lg:pt-[22px]",
         isHero
           ? cn(
@@ -183,17 +199,35 @@ export function TimelineHour({
         className={cn(
           "items-center gap-2.5",
           isUnscheduled ? "flex h-4" : "hidden lg:flex lg:h-4",
-          isHero && "lg:hidden"
+          isHero && "lg:hidden",
+          // The heading spans the gutter; only the cards sit inset.
+          isLiveGroup && "-ml-[70px] lg:ml-0"
         )}
       >
-        {isUnscheduled && (
-          <span className="font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs">
+        {isLiveGroup ? (
+          <span className="flex items-center gap-1.5 text-xs font-semibold text-success">
+            <span
+              aria-hidden="true"
+              className="size-1.5 shrink-0 animate-pulse rounded-full bg-success motion-reduce:animate-none"
+            />
             {time}
           </span>
+        ) : (
+          isUnscheduled && (
+            <span className="font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs">
+              {time}
+            </span>
+          )
         )}
-        <Separator className="flex-1" />
+        <Separator className={cn("flex-1", isLiveGroup && "bg-success/30")} />
         {countLabel && (
-          <span className="text-[10.5px] text-muted-foreground/70 lg:text-[11px]">
+          <span
+            className={cn(
+              isLiveGroup
+                ? "text-xs text-muted-foreground"
+                : "text-[10.5px] text-muted-foreground/70 lg:text-[11px]"
+            )}
+          >
             {countLabel}
           </span>
         )}