@bearmenu/ui 0.8.50 → 0.8.52

package/dist/components/place-card.d.ts

@@ -81,6 +81,13 @@ 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;
 };
 declare const PlaceCard: React$1.NamedExoticComponent<PlaceCardProps>;

package/dist/components/place-card.js

@@ -74,6 +74,7 @@ var PlaceCard = memo(function PlaceCard2({
   onOpen,
   footer,
   photoOverlay,
+  openIndicator,
   className
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -132,13 +133,20 @@ var PlaceCard = memo(function PlaceCard2({
               }
             ) })
           ),
-          place.open_now === true && /* @__PURE__ */ jsx(
+          place.open_now === true && (openIndicator ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "pointer-events-none absolute right-2 top-2 flex items-center justify-center",
+              "aria-hidden": true,
+              children: openIndicator
+            }
+          ) : /* @__PURE__ */ jsx(
             "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": true
             }
-          ),
+          )),
           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. */
           /* @__PURE__ */ jsx(Badge, { variant: "overlay", className: cn(OVERLAY_PILL, "absolute right-2 top-2"), children: labels.closed })

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

@@ -50,6 +50,8 @@ 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;

package/dist/components/poster-stack.js

@@ -96,7 +96,8 @@ function PosterStack({
                 }
               )
             ) : (_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 }) })
+            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 }) }),
+            poster.overlay
           ] });
           return /* @__PURE__ */ jsx(
             "div",

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

@@ -56,9 +56,14 @@ 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;
 };
-declare function SectionHeader({ title, count, subtitle, action, actionHref, actionTone, subtitleFrom, linkComponent: LinkComponent, onAction, as: Heading, trailing, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ title, count, subtitle, action, actionHref, actionTone, subtitleFrom, linkComponent: LinkComponent, onAction, as: Heading, trailing, titleAdornment, 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

@@ -32,15 +32,17 @@ function SectionHeader({
   onAction,
   as: Heading = "h2",
   trailing,
+  titleAdornment,
   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__ */ jsxs("div", { className: "relative 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-1.5 shrink-0 text-[12px] tabular-nums text-muted-foreground lg:ml-0.5", 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 }),
+        titleAdornment
       ] }),
       (action || trailing) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
         action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: actionClasses, onClick: onAction, children: [

package/dist/components/sliding-panels.d.ts

@@ -5,7 +5,13 @@ interface Panel {
     id: string;
     content: React.ReactNode;
     showBackButton?: boolean;
+    /** Heading shown next to the back button (the panel's title, not the button's name). */
     backButtonLabel?: string;
+    /**
+     * Accessible name of the icon-only back button, localized by the caller.
+     * Falls back to "Back"; without a name screen readers announce only "button".
+     */
+    backAriaLabel?: string;
     onBack?: () => void;
     parentId?: string;
 }

package/dist/components/sliding-panels.js

@@ -56,11 +56,12 @@ var SlidingPanels = ({
     {
       "data-slot": "sliding-panels",
       className: cn(
-        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
         className
       ),
       style: { height: containerHeight, overflowClipMargin: "8px" },
       children: panels.map((panel, index) => {
+        var _a;
         const isActive = panel.id === currentPanel;
         const isLeft = usesTreeModel ? activeAncestors.has(panel.id) : index < currentIndex;
         const isRight = !isActive && !isLeft;
@@ -73,7 +74,7 @@ var SlidingPanels = ({
             "data-slot": "sliding-panel",
             "data-state": isActive ? "active" : "inactive",
             className: cn(
-              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
               isActive && "translate-x-0",
               isLeft && "-translate-x-[calc(100%+8px)]",
               isRight && "translate-x-[calc(100%+8px)]"
@@ -82,7 +83,16 @@ var SlidingPanels = ({
             "aria-hidden": !isActive,
             children: [
               panel.showBackButton && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: handleBack, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    onClick: handleBack,
+                    "aria-label": (_a = panel.backAriaLabel) != null ? _a : "Back",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true })
+                  }
+                ),
                 panel.backButtonLabel && /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: panel.backButtonLabel })
               ] }),
               panel.content

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?: "primary" | "default" | "inherit" | "destructive" | 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?: "primary" | "default" | "inherit" | "destructive" | 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?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "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?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "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?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "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.js

@@ -1,4 +1,4 @@
-import { TimelineHourSkeleton } from '../chunk-S5GDARLW.js';
+import { TimelineHourSkeleton } from '../chunk-WY2FP76J.js';
 import '../chunk-BRXI6EDO.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

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

@@ -46,6 +46,15 @@ import * as React from 'react';
  *                 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
@@ -60,6 +69,9 @@ 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. */
@@ -81,7 +93,7 @@ type TimelineHourProps = {
     overflow?: React.ReactNode;
     className?: string;
 };
-declare function TimelineHour({ time, role, isLive, liveLabel, countLabel, note, layout, children, overflow, className, }: TimelineHourProps): react_jsx_runtime.JSX.Element;
+declare function TimelineHour({ time, role, tone, isLive, liveLabel, countLabel, note, layout, children, overflow, className, }: TimelineHourProps): react_jsx_runtime.JSX.Element;
 type TimelineHourSkeletonProps = {
     /** Cards to reserve space for. */
     cardCount?: number;

package/dist/components/timeline-hour.js

@@ -1,4 +1,4 @@
-export { TimelineHour, TimelineHourSkeleton } from '../chunk-S5GDARLW.js';
+export { TimelineHour, TimelineHourSkeleton } from '../chunk-WY2FP76J.js';
 import '../chunk-BRXI6EDO.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.50",
+  "version": "0.8.52",
   "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",

package/src/components/category-deck.tsx

@@ -105,6 +105,11 @@ export type CategoryDeckProps = {
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<CategoryDeckLinkProps>;
   onClick?: (mouseEvent: React.MouseEvent) => void;
+  /**
+   * Decoration laid over the fan's box, unclipped (it may cross the box's
+   * edge), above the cards. Absolutely positioned, `aria-hidden`, no layout.
+   */
+  overlay?: React.ReactNode;
   className?: string;
 };
 
@@ -115,6 +120,7 @@ export function CategoryDeck({
   href,
   linkComponent: LinkComponent = DefaultLink,
   onClick,
+  overlay,
   className,
 }: CategoryDeckProps) {
   const slots = Array.from(
@@ -160,6 +166,11 @@ export function CategoryDeck({
             </div>
           );
         })}
+        {overlay && (
+          <span className="pointer-events-none absolute inset-0 z-[3] block" aria-hidden>
+            {overlay}
+          </span>
+        )}
       </div>
 
       <div className="flex items-center gap-[9px] pt-3.5">

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

@@ -185,4 +185,10 @@ describe("EventCard", () => {
     renderCard({ liveStatus: "Live now · ends around 23:00" });
     expect(screen.getByText("Live now · ends around 23:00")).toBeInTheDocument();
   });
+
+  it("renders posterOverlay inside a real, pointer-transparent box over the poster", () => {
+    renderCard({ posterOverlay: <i data-testid="overlay" /> });
+    const box = screen.getByTestId("overlay").parentElement;
+    expect(box).toHaveClass("absolute", "inset-0", "pointer-events-none");
+  });
 });

package/src/components/event-card.tsx

@@ -75,6 +75,13 @@ export type EventCardProps = {
   badge?: React.ReactNode;
   /** Bottom-left overlay pill naming the category. Include its icon. */
   tagLabel?: React.ReactNode;
+  /**
+   * Decorative overlay inside the poster box (which is `relative` and clips),
+   * for a caller's absolutely positioned ornament. Rendered after the pills,
+   * hidden on the compact row's 64px poster. Must be `aria-hidden` and
+   * pointer-transparent; it never takes layout.
+   */
+  posterOverlay?: React.ReactNode;
   /**
    * Caller-supplied display labels, rendered as small chips in the text area
    * beneath the venue/meta line. `EventPreview.tags` is taxonomy coordinates
@@ -132,6 +139,7 @@ export const EventCard = memo(function EventCard({
   density = "card",
   badge,
   tagLabel,
+  posterOverlay,
   tags,
   liveStatus,
   hideWhen,
@@ -228,6 +236,15 @@ export const EventCard = memo(function EventCard({
             </span>
           </div>
         )}
+
+        {posterOverlay && (
+          <div
+            className={cn("pointer-events-none absolute inset-0", isRowLg && "lg:hidden")}
+            aria-hidden="true"
+          >
+            {posterOverlay}
+          </div>
+        )}
       </div>
 
       {/* The text column — a wrapper so `row-lg` can lay it beside the poster. */}

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">