@bearmenu/ui 0.8.22 → 0.8.24

package/dist/components/qa-block.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { QaItem } from './menu-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 /**

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?: "default" | "destructive" | "outline" | "warning" | "success" | "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?: "default" | "destructive" | "outline" | "warning" | "success" | "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?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "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/top-comparison.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopComparisonRow } from './top-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopComparisonLabels = {

package/dist/components/top-cross-link.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopCrossLinkProps = {

package/dist/components/top-ranking-entry.d.ts

@@ -3,7 +3,7 @@ import { MenuItemLabels } from './menu-item.js';
 import { MenuItemPreview, MenuLinkComponent } from './menu-types.js';
 import { TopRankEntry } from './top-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopRankingEntryLabels = {

package/dist/components/top-ranking-hero.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopExit } from './top-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopRankingHeroProps = {

package/dist/components/top-types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { MenuItemPreview } from './menu-types.js';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';
 

package/dist/components/venue-grade-dimensions.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as PlaceGradeDimensions } from '../place-types-BHdeMMiG.js';
+import { a as PlaceGradeDimensions } from '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-quotes.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CitedText } from '../place-types-BHdeMMiG.js';
+import { C as CitedText } from '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 /**

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import { P as PlacePreview } from '../place-types-BHdeMMiG.js';
+import { P as PlacePreview } from '../place-types-C4rR3LTs.js';
 import 'react';
 import '../lib/grade.js';
 

package/dist/{place-types-BHdeMMiG.d.ts → place-types-C4rR3LTs.d.ts}

@@ -12,6 +12,13 @@ type GradeAtomLabels = {
     aria: (value: string) => string;
     /** Title + aria suffix when `grade.capped`, e.g. "Capped for low confidence". */
     capped: string;
+    /**
+     * The number as the locale writes it, e.g. `8,7` in Romanian. Receives the
+     * grade already rounded to one decimal; return the glyphs to print. Defaults
+     * to `formatGrade` (`8.7`, a trailing `.0` dropped). It is a label because the
+     * decimal mark is translation, not styling — and `aria` gets the same string.
+     */
+    value?: (overall: number) => string;
 };
 type GradeAtomProps = {
     grade: PlaceGrade;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/drift-rail.stories.tsx

@@ -32,7 +32,7 @@ const meta: Meta<typeof DriftRail> = {
     docs: {
       description: {
         component:
-          "An infinite horizontal marquee. Duplicates its children once so a `translateX(-50%)` loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), and stops outright under `prefers-reduced-motion`.",
+          "An infinite horizontal marquee the reader can take hold of. Duplicates its children once (the copy is `inert`) so the scroll loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), stops outright under `prefers-reduced-motion`, and with `labels` renders a pause/play latch (WCAG 2.2.2).",
       },
     },
   },
@@ -90,3 +90,31 @@ export const WithFeaturedItems: Story = {
     </div>
   ),
 };
+
+/**
+ * With `labels`, a pause/play toggle renders under the rail's right edge —
+ * the same latch, glyph and 44px target as `WeekendPanel`'s (WCAG 2.2.2).
+ * Pressing it holds the rail still until play is pressed; hover and touch
+ * still pause it on their own. The control is not rendered under
+ * `prefers-reduced-motion`, where nothing drifts. The duplicate pass is
+ * `inert`, so Tab visits each item once.
+ */
+export const WithPauseControl: Story = {
+  render: () => (
+    <div className="max-w-[420px]">
+      <DriftRail durationSeconds={30} labels={{ pause: "Pause the rail", play: "Play the rail" }}>
+        {["Warehouse Rave", "Jazz on the Rooftop", "Open Mic Night", "Street Food Market"].map(
+          (title) => (
+            <FeaturedRailItem
+              key={title}
+              title={title}
+              venue="Atelier Café"
+              note="Sat 5 · 20:00"
+              href={`/events/${title.toLowerCase().replace(/\s+/g, "-")}`}
+            />
+          )
+        )}
+      </DriftRail>
+    </div>
+  ),
+};

package/src/components/drift-rail.test.tsx

@@ -0,0 +1,125 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { DriftRail } from "./drift-rail";
+
+const labels = { pause: "Pause the rail", play: "Play the rail" };
+
+/**
+ * jsdom lays nothing out, so the track's `scrollWidth` is 0 and the loop's
+ * `half > 0` guard skips every frame. The tests give the track a width and
+ * the scroller a writable `scrollLeft`, capture the rAF callbacks, and drive
+ * the frames by hand with a clock that moves in whole seconds.
+ */
+const TRACK_WIDTH = 2000;
+
+let frames = new Map<number, FrameRequestCallback>();
+let nextFrameId = 1;
+let now = 0;
+
+function runFrame(elapsedMs: number) {
+  now += elapsedMs;
+  const pending = [...frames.values()];
+  frames = new Map();
+  act(() => {
+    for (const frame of pending) frame(now);
+  });
+}
+
+function renderRail(props: Partial<React.ComponentProps<typeof DriftRail>> = {}) {
+  const view = render(
+    <DriftRail durationSeconds={10} {...props}>
+      <a href="/a">A</a>
+      <a href="/b">B</a>
+    </DriftRail>
+  );
+  const track = screen.getAllByText("A")[0].parentElement as HTMLElement;
+  const scroller = track.parentElement as HTMLElement;
+  Object.defineProperty(track, "scrollWidth", { value: TRACK_WIDTH, configurable: true });
+  let scrollLeft = 0;
+  Object.defineProperty(scroller, "scrollLeft", {
+    get: () => scrollLeft,
+    set: (value: number) => {
+      scrollLeft = value;
+    },
+    configurable: true,
+  });
+  return { ...view, scroller, track };
+}
+
+beforeEach(() => {
+  frames = new Map();
+  nextFrameId = 1;
+  now = 0;
+  vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
+    const id = nextFrameId++;
+    frames.set(id, callback);
+    return id;
+  });
+  vi.spyOn(window, "cancelAnimationFrame").mockImplementation((id) => {
+    frames.delete(id);
+  });
+  vi.spyOn(performance, "now").mockImplementation(() => now);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("DriftRail", () => {
+  it("advances the scroller by width / duration per second", () => {
+    const { scroller } = renderRail();
+    runFrame(0);
+    runFrame(1000);
+    // One copy is half the track; 1000px over 10s is 100px per second.
+    expect(scroller.scrollLeft).toBeCloseTo(100, 5);
+  });
+
+  it("renders no control without labels", () => {
+    renderRail();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("stops advancing when the reader presses pause, and stays stopped until play", () => {
+    const { scroller } = renderRail({ labels });
+    runFrame(0);
+    runFrame(1000);
+    const advanced = scroller.scrollLeft;
+    expect(advanced).toBeGreaterThan(0);
+
+    const toggle = screen.getByRole("button", { name: labels.pause });
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    expect(toggle).toHaveAccessibleName(labels.play);
+
+    runFrame(0);
+    runFrame(1000);
+    runFrame(1000);
+    expect(scroller.scrollLeft).toBe(advanced);
+
+    // The latch survives the hover hold lifting: nothing but play resumes it.
+    fireEvent.mouseEnter(scroller);
+    fireEvent.mouseLeave(scroller);
+    runFrame(0);
+    runFrame(1000);
+    expect(scroller.scrollLeft).toBe(advanced);
+
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+    runFrame(0);
+    runFrame(1000);
+    expect(scroller.scrollLeft).toBeGreaterThan(advanced);
+  });
+
+  it("makes the duplicate pass inert as well as aria-hidden", () => {
+    const { track } = renderRail();
+    const copies = screen.getAllByText("A");
+    expect(copies).toHaveLength(2);
+    const clone = copies[1].parentElement as HTMLElement;
+    expect(clone.parentElement).toBe(track);
+    expect(clone).toHaveAttribute("aria-hidden", "true");
+    expect(clone).toHaveAttribute("inert");
+    expect(copies[0].parentElement).toBe(track);
+  });
+});

package/src/components/drift-rail.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import type { PointerEvent as ReactPointerEvent } from "react";
 import { cn } from "../lib/utils";
+import { MotionPlayPause } from "./motion-icon-controls";
 
 /**
  * DriftRail — an infinite horizontal marquee for logos, tag chips or small
@@ -30,7 +31,29 @@ import { cn } from "../lib/utils";
  * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
  * the rail stays scrollable by hand, which is more than the static strip it
  * used to collapse to.
+ *
+ * THE READER CAN STOP IT FOR GOOD. Hover and touch are holds; a rail that
+ * drifts for longer than five seconds also needs a control the reader can
+ * press (WCAG 2.2.2), and a low-vision reader who cannot follow the motion
+ * needs it to stay stopped. Pass `labels` and the rail renders a pause/play
+ * toggle under its right edge — the same latch, glyph and 44px target as
+ * `WeekendPanel`'s, so the hub's rails all answer to one control. It is not
+ * rendered under `prefers-reduced-motion`, where there is nothing to stop.
+ *
+ * THE DUPLICATE IS INERT. The second copy is what makes the loop seamless,
+ * but its links are the same links again: `aria-hidden` kept them out of the
+ * accessibility tree and left them in the tab order, so a keyboard reader
+ * tabbed through every item twice. `inert` removes them from focus and
+ * hit-testing as well.
  */
+/** Accessible names for the pause/play toggle, injected so the DS owns no copy. */
+export type DriftRailLabels = {
+  /** Name announced while the rail drifts (the button pauses it). */
+  pause: string;
+  /** Name announced while the rail is paused (the button resumes it). */
+  play: string;
+};
+
 export type DriftRailProps = {
   children: React.ReactNode;
   /** Runs the loop right-to-left instead of left-to-right. */
@@ -39,6 +62,12 @@ export type DriftRailProps = {
   durationSeconds?: number;
   /** Pauses the loop while the pointer hovers the rail. */
   pauseOnHover?: boolean;
+  /**
+   * Accessible names for the pause/play toggle. When given, the toggle
+   * renders whenever the rail drifts (never under `prefers-reduced-motion`);
+   * without it there is no control, as before.
+   */
+  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -51,6 +80,7 @@ export function DriftRail({
   reverse = false,
   durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
   pauseOnHover = true,
+  labels,
   className,
 }: DriftRailProps) {
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -58,6 +88,9 @@ export function DriftRail({
   const [isHovered, setIsHovered] = useState(false);
   const [inView, setInView] = useState(true);
   const [reducedMotion, setReducedMotion] = useState(false);
+  // A latch, not a hold: it only clears when the reader presses play.
+  const [isManuallyPaused, setIsManuallyPaused] = useState(false);
+  const [playPauseReplayToken, setPlayPauseReplayToken] = useState(0);
   // `heldUntil` is a timestamp rather than a boolean so a native touch scroll
   // that keeps going after the finger lifts is not fought by the drift.
   const heldUntil = useRef(0);
@@ -98,7 +131,8 @@ export function DriftRail({
 
     let frame = 0;
     let last = performance.now();
-    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    const drifting =
+      !reducedMotion && !isManuallyPaused && inView && !(pauseOnHover && isHovered);
 
     // Start the reverse loop inside the second copy so it has room to travel.
     if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
@@ -132,7 +166,7 @@ export function DriftRail({
     };
     frame = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(frame);
-  }, [durationSeconds, inView, isHovered, pauseOnHover, reducedMotion, reverse]);
+  }, [durationSeconds, inView, isHovered, isManuallyPaused, pauseOnHover, reducedMotion, reverse]);
 
   const hold = () => {
     heldUntil.current = Number.POSITIVE_INFINITY;
@@ -178,7 +212,7 @@ export function DriftRail({
     }
   };
 
-  return (
+  const scroller = (
     <div
       ref={scrollerRef}
       onMouseEnter={() => setIsHovered(true)}
@@ -202,10 +236,43 @@ export function DriftRail({
     >
       <div ref={trackRef} className="flex w-max items-stretch gap-3.5">
         {children}
-        <div className="contents" aria-hidden="true">
+        {/* `inert` as well as `aria-hidden`: the copy's links must leave the
+            tab order too, or a keyboard reader tabs every item twice. */}
+        <div className="contents" aria-hidden="true" inert>
           {children}
         </div>
       </div>
     </div>
   );
+
+  // The toggle exists to stop a drift; under reduced motion there is none.
+  // A sibling row, not an overlay: a button floated over the rail's corner
+  // would sit on an item and intercept the grab that starts there.
+  if (!labels || reducedMotion) return scroller;
+
+  return (
+    <>
+      {scroller}
+      <div className="flex justify-end">
+        {/* `MotionPlayPause`, as in `WeekendPanel`: the triangle folding into
+            two bars IS the state change. `active` is the bars, so it is
+            `!isManuallyPaused`; `replayToken` bumps on pointer down so the
+            gesture answers the touch. */}
+        <button
+          type="button"
+          onClick={() => setIsManuallyPaused((current) => !current)}
+          onPointerDown={() => setPlayPauseReplayToken((n) => n + 1)}
+          aria-label={isManuallyPaused ? labels.play : labels.pause}
+          aria-pressed={isManuallyPaused}
+          className="flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none"
+        >
+          <MotionPlayPause
+            active={!isManuallyPaused}
+            replayToken={playPauseReplayToken}
+            className="size-4"
+          />
+        </button>
+      </div>
+    </>
+  );
 }

package/src/components/grade-atom.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { GradeAtom, type GradeAtomLabels } from "./grade-atom";
+
+const labels: GradeAtomLabels = {
+  soft: "Worth exploring",
+  bands: { exceptional: "Exceptional", great: "Great", good: "Good", decent: "Decent", weak: "Weak" },
+  aria: (value) => `Grade ${value} out of 10`,
+  capped: "Capped for low confidence",
+};
+
+describe("GradeAtom", () => {
+  it("prints the grade with a dot and no trailing .0 by default", () => {
+    render(<GradeAtom grade={{ overall: 8.74 }} labels={labels} size="md" />);
+    expect(screen.getByLabelText("Grade 8.7 out of 10")).toHaveTextContent("8.7");
+    render(<GradeAtom grade={{ overall: 9 }} labels={labels} size="md" />);
+    expect(screen.getByLabelText("Grade 9 out of 10")).toHaveTextContent("9");
+  });
+
+  it("lets the labels write the number their locale's way, in the pill and in the aria name", () => {
+    const ro: GradeAtomLabels = { ...labels, value: (n) => n.toFixed(1).replace(".", ","), aria: (v) => `Nota ${v} din 10` };
+    render(<GradeAtom grade={{ overall: 8.74 }} labels={ro} size="md" />);
+    expect(screen.getByLabelText("Nota 8,7 din 10")).toHaveTextContent("8,7");
+  });
+
+  it("hands the formatter the rounded, clamped grade", () => {
+    const seen: number[] = [];
+    const spy: GradeAtomLabels = { ...labels, value: (n) => (seen.push(n), String(n)) };
+    render(<GradeAtom grade={{ overall: 12.26 }} labels={spy} size="md" />);
+    expect(seen).toEqual([10]);
+  });
+});

package/src/components/grade-atom.tsx

@@ -41,6 +41,13 @@ export type GradeAtomLabels = {
   aria: (value: string) => string;
   /** Title + aria suffix when `grade.capped`, e.g. "Capped for low confidence". */
   capped: string;
+  /**
+   * The number as the locale writes it, e.g. `8,7` in Romanian. Receives the
+   * grade already rounded to one decimal; return the glyphs to print. Defaults
+   * to `formatGrade` (`8.7`, a trailing `.0` dropped). It is a label because the
+   * decimal mark is translation, not styling — and `aria` gets the same string.
+   */
+  value?: (overall: number) => string;
 };
 
 export type GradeAtomProps = {
@@ -221,7 +228,7 @@ export function GradeAtom({
   }
 
   const band = resolveGradeBand(overall);
-  const value = formatGrade(overall);
+  const value = labels.value ? labels.value(Math.round(Math.min(10, Math.max(1, overall)) * 10) / 10) : formatGrade(overall);
   const descriptor = labels.bands[band];
   const showDesc = sz.showDesc && !hideDescriptor;
   const photo = onPhoto ? BAND_CLASSES_PHOTO[band] : null;

package/src/components/poster-tape.stories.tsx

@@ -68,3 +68,32 @@ export const LongTitles: Story = {
     ],
   },
 };
+
+/**
+ * A long localised date with the time split out into `time`. The date
+ * truncates ("sâm., 5 sept." becomes "sâm., 5 se…" if it must); the time is
+ * `shrink-0` outside the truncating span and is always whole. Before this the
+ * whole line was one truncating string and clipped to "17:…".
+ */
+export const LocalisedDateAndTime: Story = {
+  args: {
+    items: [
+      { id: "1", title: "Warehouse Rave", meta: "sâmbătă, 5 septembrie", time: "17:00" },
+      { id: "2", title: "Jazz on the Rooftop", meta: "vineri, 4 septembrie", time: "19:30" },
+      { id: "3", title: "Open Mic Night", meta: "joi, 3 sept.", time: "21:00" },
+      { id: "4", title: "Street Food Market", meta: "duminică, 6 septembrie", time: "12:00" },
+    ],
+  },
+};
+
+/**
+ * With `labels`, a pause/play toggle renders under the tape's right edge —
+ * `<DriftRail>`'s control, forwarded. Pressing it latches the tape still
+ * until play is pressed again. It does not render under
+ * `prefers-reduced-motion`, where nothing drifts.
+ */
+export const WithPauseControl: Story = {
+  args: {
+    labels: { pause: "Pause the tape", play: "Play the tape" },
+  },
+};

package/src/components/poster-tape.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PosterTape } from "./poster-tape";
+
+describe("PosterTape", () => {
+  it("renders meta alone when no time is given", () => {
+    render(<PosterTape items={[{ id: "1", title: "Warehouse Rave", meta: "SAT 20:00" }]} />);
+    const [meta] = screen.getAllByText("SAT 20:00");
+    expect(meta).toHaveClass("truncate");
+    expect(meta.parentElement?.childElementCount).toBe(1);
+  });
+
+  it("renders the time outside the truncating span so it never clips", () => {
+    render(
+      <PosterTape
+        items={[{ id: "1", title: "Warehouse Rave", meta: "sâm., 5 sept.", time: "17:00" }]}
+      />
+    );
+    const [meta] = screen.getAllByText("sâm., 5 sept.");
+    const [time] = screen.getAllByText("· 17:00");
+
+    expect(meta).toHaveClass("truncate");
+    expect(meta.contains(time)).toBe(false);
+    expect(time).toHaveClass("shrink-0");
+    expect(time).not.toHaveClass("truncate");
+    expect(time.parentElement).toBe(meta.parentElement);
+    expect(meta.parentElement).not.toHaveClass("truncate");
+  });
+
+  it("forwards labels to the rail's pause control", () => {
+    render(
+      <PosterTape
+        items={[{ id: "1", title: "Warehouse Rave", meta: "SAT 20:00" }]}
+        labels={{ pause: "Pause the tape", play: "Play the tape" }}
+      />
+    );
+    expect(screen.getByRole("button", { name: "Pause the tape" })).toHaveAttribute(
+      "aria-pressed",
+      "false"
+    );
+  });
+});

package/src/components/poster-tape.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
-import { DriftRail } from "./drift-rail";
+import { DriftRail, type DriftRailLabels } from "./drift-rail";
 import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
@@ -17,8 +17,18 @@ import { EventPosterFallback } from "./event-poster-fallback";
 export type PosterTapeItem = {
   id: string;
   title: string;
-  /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
+  /**
+   * Caller-composed, e.g. "Sat 5" — or "Sat 5 · 20:00" when `time` is not
+   * given. Rendered as mono, small, and truncated at the tape's width.
+   */
   meta: string;
+  /**
+   * The time, e.g. "20:00", rendered after `meta` and never truncated. The
+   * tape is 132px wide and a long localised date ("sâm., 5 sept. · 17:00")
+   * used to clip to "17:…" — the one figure the reader came for. Split it out
+   * and the date is what gives way.
+   */
+  time?: string;
   posterUrl?: string;
   href?: string;
   /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
@@ -40,6 +50,8 @@ export type PosterTapeProps = {
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<PosterTapeLinkProps>;
   durationSeconds?: number;
+  /** Forwarded to `<DriftRail>`: names for its pause/play toggle, which renders only when given. */
+  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -81,8 +93,11 @@ function PosterTapeItemCard({
       <div className="mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]">
         {item.title}
       </div>
-      <div className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
-        {item.meta}
+      {/* The date truncates; the time is `shrink-0` outside the truncating
+          span, so it is always whole. */}
+      <div className="mt-0.5 flex gap-1 font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
+        <span className="min-w-0 truncate">{item.meta}</span>
+        {item.time && <span className="shrink-0">· {item.time}</span>}
       </div>
     </>
   );
@@ -110,10 +125,11 @@ export function PosterTape({
   items,
   linkComponent: LinkComponent = DefaultLink,
   durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
+  labels,
   className,
 }: PosterTapeProps) {
   return (
-    <DriftRail durationSeconds={durationSeconds} className={className}>
+    <DriftRail durationSeconds={durationSeconds} labels={labels} className={className}>
       {items.map((item) => (
         <PosterTapeItemCard key={item.id} item={item} LinkComponent={LinkComponent} />
       ))}