@bearmenu/ui 0.8.51 → 0.8.53

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.51",
+  "version": "0.8.53",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -100,10 +100,10 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/react": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
+    "@storybook/addon-a11y": "^10.6.5",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/react": "^10.6.5",
+    "@storybook/react-vite": "^10.6.5",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
@@ -129,7 +129,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
-    "storybook": "^10.3.5",
+    "storybook": "^10.6.5",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "tsup": "^8.5.0",

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