@breathe-ds/ui 0.3.0 → 0.5.1

package/components/EventFacts.tsx

@@ -0,0 +1,62 @@
+import type { ElementType, ReactNode } from "react";
+import { MapPin } from "lucide-react";
+import { DateBadge } from "./DateBadge";
+
+export type EventFact = {
+  /** A DateBadge, or an icon; "pin" draws the map pin. */
+  tile: ReactNode | "pin";
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** The title becomes a link (the venue's map page), with the arrow. */
+  href?: string;
+  external?: boolean;
+};
+
+type Props = {
+  facts: EventFact[];
+  linkComponent?: ElementType;
+  newTabLabel?: string;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+/** The facts of an event as tiles (Luma): the date on a calendar tile with
+ *  the written date beside it, the place on a pin tile with the venue (a link)
+ *  and the city. `DateBadge` is exported for the date tile. */
+export function EventFacts({ facts, linkComponent, newTabLabel = "(opens in a new tab)", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <ul className={`flex list-none flex-col gap-4 ${className}`}>
+      {facts.map((f, i) => (
+        <li key={i} className="flex items-center gap-4">
+          {f.tile === "pin" ? (
+            <span aria-hidden="true" className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-ink/[0.06] text-ink">
+              <MapPin size={20} strokeWidth={2} />
+            </span>
+          ) : (
+            f.tile
+          )}
+          <span className="min-w-0 leading-snug">
+            <span className="block font-semibold text-ink">
+              {f.href ? (
+                <L href={f.href} {...(f.external ? { target: "_blank", rel: "noopener noreferrer" } : {})} className="inline-flex items-center gap-1 underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none">
+                  {f.title}
+                  <ArrowUpRight />
+                  {f.external && <span className="sr-only"> {newTabLabel}</span>}
+                </L>
+              ) : (
+                f.title
+              )}
+            </span>
+            {f.subtitle && <span className="mt-0.5 block text-sm text-ink-body">{f.subtitle}</span>}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export { DateBadge };

package/components/EventList.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import { EventRow, type EventRowProps } from "./EventRow";
+
+export type EventGroup = {
+  /** The day ("6 Nov"). */
+  date: ReactNode;
+  /** The weekday, one tone below ("Friday"). */
+  weekday?: ReactNode;
+  /** ISO date for the <time>. */
+  iso?: string;
+  events: EventRowProps[];
+};
+
+type Props = {
+  groups: EventGroup[];
+  /** aria-label of the list. */
+  label?: string;
+  className?: string;
+};
+
+/**
+ * Events grouped by day, down a dotted rail (Luma): each day has a dot on the
+ * rail, the date and the weekday, and its rows below. One <ol> per day keeps
+ * the order for the screen reader.
+ */
+export function EventList({ groups, label = "Events", className = "" }: Props) {
+  return (
+    <div aria-label={label} role="list" className={`relative ${className}`}>
+      {/* the rail: a dotted line down the left */}
+      <span aria-hidden="true" className="absolute bottom-6 left-[5px] top-3 w-px border-l-2 border-dotted border-ink/15" />
+      {groups.map((g, i) => (
+        <section key={i} role="listitem" className="relative pl-9 pb-8 last:pb-0">
+          <span aria-hidden="true" className="absolute left-0 top-[7px] h-3 w-3 rounded-full bg-ink/20" />
+          <h2 className="font-heading text-lg font-semibold text-ink">
+            {g.iso ? <time dateTime={g.iso}>{g.date}</time> : g.date}
+            {g.weekday && <span className="ml-2 font-body text-base font-normal text-ink-soft">{g.weekday}</span>}
+          </h2>
+          <ol className="mt-4 flex list-none flex-col gap-3">
+            {g.events.map((e, j) => (
+              <li key={j}>
+                <EventRow {...e} />
+              </li>
+            ))}
+          </ol>
+        </section>
+      ))}
+    </div>
+  );
+}

package/components/EventRow.tsx

@@ -0,0 +1,102 @@
+import type { ElementType, ReactNode } from "react";
+import { MapPin } from "lucide-react";
+import { Avatar } from "./Avatar";
+import type { Person } from "./Byline";
+
+type Labels = {
+  /** "+34" pill after the stacked portraits. */
+  more: (n: number) => string;
+  /** Prefix of the organizer line ("By"). */
+  by: ReactNode;
+};
+const EN: Labels = { more: (n) => `+${n}`, by: "By" };
+
+export type EventRowProps = {
+  /** The time line ("09:00 · 12:00 GMT+0", or "3 to 9 Nov · 08:30–17:30"). */
+  time: ReactNode;
+  /** The end of the time line, in the soft action tone (Luma shows the end
+   *  time this way). Optional. */
+  timeAccent?: ReactNode;
+  title: ReactNode;
+  href: string;
+  /** Who organizes or teaches: small portrait(s) and the name(s). */
+  organizers?: Person[];
+  location?: ReactNode;
+  /** Who is going (or who teaches, on a course): stacked portraits and "+N". */
+  people?: Person[];
+  /** How many beyond the portraits shown. */
+  peopleMore?: number;
+  /** Square cover on the right (1:1). */
+  cover?: { src: string; alt?: string };
+  /** A small state on the title line ("Sold out", "Online"). */
+  badge?: ReactNode;
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Event row of the Cuidado Global family (after Luma and Meetup): the time
+ * line, the title (the link, stretched over the whole row), who organizes,
+ * where, who is going, and the square cover on the right. Lives in an
+ * EventList, under a date heading.
+ */
+export function EventRow({ time, timeAccent, title, href, organizers, location, people, peopleMore, cover, badge, linkComponent, labels, className = "" }: EventRowProps) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  const shown = people?.slice(0, 4) ?? [];
+  return (
+    <article className={`group relative flex gap-5 rounded-[24px] bg-card p-5 transition-transform duration-200 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 md:p-6 ${className}`}>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <p className="text-sm font-medium text-ink-soft">
+          {time}
+          {timeAccent && (
+            <>
+              <span aria-hidden="true"> · </span>
+              <span className="font-semibold text-action-text">{timeAccent}</span>
+            </>
+          )}
+        </p>
+        <h3 className="mt-1.5 font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+          <L href={href} className="after:absolute after:inset-0 after:rounded-[24px] focus-visible:outline-none focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ink">
+            {title}
+          </L>
+          {badge && <span className="ml-2 inline-flex translate-y-[-2px] items-center rounded-pill bg-ink/[0.08] px-2.5 py-0.5 align-middle text-xs font-semibold text-ink">{badge}</span>}
+        </h3>
+        {organizers && organizers.length > 0 && (
+          <p className="mt-2 flex items-center gap-2 text-sm text-ink-body">
+            <span className="flex -space-x-1.5">
+              {organizers.slice(0, 3).map((p) => (
+                <Avatar key={p.name} name={p.name} photo={p.photo} size={20} ring>{p.avatar}</Avatar>
+              ))}
+            </span>
+            <span className="truncate">{t.by} {organizers.map((p) => p.name).join(", ")}</span>
+          </p>
+        )}
+        {location && (
+          <p className="mt-1.5 flex items-center gap-2 text-sm text-ink-body">
+            <MapPin aria-hidden="true" size={16} strokeWidth={2} className="shrink-0 text-ink-soft" />
+            <span className="truncate">{location}</span>
+          </p>
+        )}
+        {shown.length > 0 && (
+          <p className="mt-auto flex items-center gap-2 pt-4">
+            <span className="flex -space-x-2">
+              {shown.map((p) => (
+                <Avatar key={p.name} name={p.name} photo={p.photo} size={28} ring>{p.avatar}</Avatar>
+              ))}
+            </span>
+            {peopleMore ? <span className="rounded-pill bg-ink/[0.08] px-2 py-0.5 text-xs font-semibold text-ink">{t.more(peopleMore)}</span> : null}
+            <span className="sr-only">{shown.map((p) => p.name).join(", ")}</span>
+          </p>
+        )}
+      </div>
+      {cover && (
+        <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-2xl bg-ink/[0.06] md:h-36 md:w-36">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={cover.src} alt={cover.alt ?? ""} loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover" />
+        </div>
+      )}
+    </article>
+  );
+}

package/components/FeaturedPosts.tsx

@@ -0,0 +1,80 @@
+import type { ElementType, ReactNode } from "react";
+import { Byline, type Person } from "./Byline";
+import type { PostCover } from "./PostCard";
+
+export type FeaturedPost = {
+  cover: PostCover;
+  title: ReactNode;
+  /** The post's own page. */
+  href: string;
+  text: ReactNode;
+  /** Who said it (name, portrait): the text is their words, only cut. */
+  speaker: Person;
+  /** Link to the video the text came from ("Watch the video ↗"). */
+  video?: { href: string; label?: ReactNode; external?: boolean };
+};
+
+type Props = {
+  posts: FeaturedPost[];
+  headingLevel?: "h2" | "h3";
+  /** Default label of the video link. */
+  watchLabel?: ReactNode;
+  newTabLabel?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Featured posts of the Cuidado Global family — creeta's `Temas` ("in the
+ * words of who treats you"): what the team explains in the videos, as text.
+ * Each card: the cover above, the title and the text, and at the foot who
+ * said it (with the portrait) and the link to the video, because the text is
+ * their speech, only with cuts. Bento: the first post takes two columns with
+ * the cover beside the text; if the last would sit alone in its row, it too.
+ */
+export function FeaturedPosts({ posts, headingLevel: Title = "h3", watchLabel = "Watch the video", newTabLabel, linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  return (
+    <ul className={`grid list-none gap-3 md:grid-cols-2 md:gap-5 ${className}`}>
+      {posts.map((p, i) => {
+        const wide = i === 0 || (i === posts.length - 1 && (posts.length - 1) % 2 === 1);
+        return (
+          <li key={i} className={`flex flex-col overflow-hidden rounded-[28px] bg-card ${wide ? "md:col-span-2 md:grid md:grid-cols-5" : ""}`}>
+            {/* cover: decoration (4:3); the title says the subject */}
+            <div className={`relative overflow-hidden ${wide ? "aspect-[4/3] md:col-span-2 md:aspect-auto md:min-h-[320px]" : "aspect-[4/3]"}`}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={p.cover.src}
+                srcSet={p.cover.srcSet}
+                sizes={p.cover.sizes ?? (wide ? "(min-width: 1152px) 440px, (min-width: 768px) 40vw, 92vw" : "(min-width: 1152px) 540px, (min-width: 768px) 46vw, 92vw")}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="absolute inset-0 h-full w-full object-cover object-[50%_30%]"
+              />
+            </div>
+
+            <div className={`flex flex-1 flex-col p-6 md:p-8 ${wide ? "md:col-span-3 md:justify-center" : ""}`}>
+              <Title className="font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+                <L
+                  href={p.href}
+                  className="underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink motion-reduce:transition-none"
+                >
+                  {p.title}
+                </L>
+              </Title>
+              <p className="mt-3 leading-relaxed text-ink-body">{p.text}</p>
+              <Byline
+                className="mt-auto pt-6"
+                people={[p.speaker]}
+                action={p.video ? { label: p.video.label ?? watchLabel, href: p.video.href, external: p.video.external } : undefined}
+                newTabLabel={newTabLabel}
+                linkComponent={linkComponent}
+              />
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/components/Footer.tsx

@@ -6,6 +6,8 @@ import { List } from "./List";
 type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
 
 export type FooterLink = { href: string; label: ReactNode };
+/** A titled column of links, for footers with many pages ("Foundations", "Cards…"). */
+export type FooterLinkGroup = { title: ReactNode; links: FooterLink[] };
 export type FooterContact = { href: string; label: ReactNode; Icon: IconType; external?: boolean };
 export type FooterLanguage = Language;
 
@@ -29,8 +31,11 @@ type Props = {
   /** The brand sentence, shown in quotes under the logo. */
   quote?: ReactNode;
   /** "Pages": title on the first line, links in two columns below. Optional:
-   *  a footer with no internal links drops the column (two-column grid). */
-  pages?: { title: ReactNode; links: FooterLink[] };
+   *  a footer with no internal links drops the column (two-column grid).
+   *  Many links (a dozen or more): pass `groups` instead of `links` — each
+   *  group is a column with a small heading, up to four side by side, so the
+   *  list gets wider instead of taller (the 44px rows stay). */
+  pages?: { title: ReactNode; links?: FooterLink[]; groups?: FooterLinkGroup[] };
   /** "Where we are": address lines, opening hours, and the directions links
    *  ("Directions ↗ · Waze ↗", external). */
   where: { title: ReactNode; address: ReactNode[]; hours?: ReactNode; directions?: FooterLink[] };
@@ -59,6 +64,14 @@ const ArrowUpRight = () => (
 );
 
 const title = "font-heading text-lg font-medium text-ink";
+const groupTitle = "text-xs font-semibold uppercase tracking-[0.12em] text-ink-soft";
+// whole class names: as many columns as groups, up to four
+const groupCols: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4",
+};
 const link =
   "flex min-h-11 items-center text-ink/80 underline decoration-transparent underline-offset-4 transition-[color,text-decoration-color] duration-150 hover:text-ink hover:decoration-ink motion-reduce:transition-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
 const strongLink =
@@ -100,12 +113,19 @@ export function Footer({
   // padding leaves room for the floating bar.
   const outer = navHiddenFrom === "md" ? "mt-16 pb-28 md:mt-24 md:pb-14" : "mt-16 pb-28 lg:mt-24 lg:pb-14";
   const noticeId = notice?.id ?? "footer-notice";
+  const groups = pages?.groups?.length ? pages.groups : undefined;
+  // grouped pages need the room: the pages column grows and the brand column shrinks
+  const columns = !pages
+    ? "md:grid-cols-[minmax(0,1fr)_auto]"
+    : groups
+      ? "md:grid-cols-[minmax(0,3.5fr)_minmax(0,6.5fr)_minmax(0,3fr)]"
+      : "md:grid-cols-[minmax(0,4fr)_minmax(0,5fr)_minmax(0,3fr)]";
 
   return (
     <footer className={`${outer} bg-card py-10 text-ink md:py-14 ${className}`}>
       <div className="mx-auto max-w-[1600px] px-4 md:px-6">
         {/* without the pages column, "where" keeps to the right edge (auto width) */}
-        <div className={`grid gap-x-10 gap-y-10 ${pages ? "md:grid-cols-[minmax(0,4fr)_minmax(0,5fr)_minmax(0,3fr)]" : "md:grid-cols-[minmax(0,1fr)_auto]"}`}>
+        <div className={`grid gap-x-10 gap-y-10 ${columns}`}>
           <div>
             {logo}
             {brandName && <p className="sr-only">{brandName}</p>}
@@ -117,13 +137,30 @@ export function Footer({
           {pages && (
             <nav aria-label={t.pagesNav}>
               <h2 className={title}>{pages.title}</h2>
-              <div className="mt-3 grid gap-x-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
-                {pages.links.map((p, i) => (
-                  <L key={`${i}-${p.href}`} href={p.href} className={link}>
-                    {p.label}
-                  </L>
-                ))}
-              </div>
+              {groups ? (
+                <div className={`mt-5 grid gap-x-6 gap-y-8 ${groupCols[Math.min(groups.length, 4)]}`}>
+                  {groups.map((g, gi) => (
+                    <div key={gi}>
+                      <h3 className={groupTitle}>{g.title}</h3>
+                      <div className="mt-2">
+                        {g.links.map((p, i) => (
+                          <L key={`${i}-${p.href}`} href={p.href} className={link}>
+                            {p.label}
+                          </L>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="mt-3 grid gap-x-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
+                  {(pages.links ?? []).map((p, i) => (
+                    <L key={`${i}-${p.href}`} href={p.href} className={link}>
+                      {p.label}
+                    </L>
+                  ))}
+                </div>
+              )}
             </nav>
           )}
 

package/components/Header.tsx

@@ -112,7 +112,9 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
               <L
                 href={c.href}
                 onClick={() => setOpen(false)}
-                className="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+                // with a description the icon sits with the label's first line (creeta);
+                // label only: centred on the bubble, and a two-line label stays tight
+                className={`flex ${c.description ? "items-start" : "items-center"} gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-ink/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
               >
                 {c.icon && (
                   <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-ink/[0.08] text-ink">
@@ -120,7 +122,7 @@ function Dropdown({ item, L, t }: { item: NavItem; L: ElementType; t: Labels })
                   </span>
                 )}
                 <span>
-                  <span className="block font-heading text-[0.95rem] font-semibold text-ink">
+                  <span className="block font-heading text-[0.95rem] leading-snug font-semibold text-ink">
                     {c.label}
                   </span>
                   {c.description && (

package/components/PageVideoHero.tsx

@@ -17,20 +17,33 @@ type LoopPreview = {
 
 /** Two kinds of video hero:
  *  - loop:   a local clip on repeat (no player). Background = BackgroundVideo.
- *  - player: the YouTube video ITSELF plays muted, on repeat, as the background
- *            (16:9, covering the card, no false crop/zoom). Turning the sound on
- *            remounts it from zero — with audio and controls — and the close bar
- *            appears at the bottom. Keeps things consistent: the preview and the
- *            video are the same footage. */
+ *  - player: the video ITSELF plays muted, on repeat, as the background.
+ *            Turning the sound on remounts it from zero — with audio and controls —
+ *            and the close bar appears at the bottom. Keeps things consistent: the
+ *            preview and the video are the same footage. The source is either a
+ *            YouTube id (16:9 iframe covering the card, no false crop/zoom) or an
+ *            mp4 hosted by the site (`src` + `poster`; the sound version plays in
+ *            the browser's own player, letterboxed like the iframe). */
 type VideoLoop = { mode: "loop"; preview: LoopPreview };
-type VideoPlayer = {
-  mode: "player";
+type PlayerCommon = { mode: "player"; playerCaption?: ReactNode };
+type VideoPlayerYouTube = PlayerCommon & {
   youtubeId: string;
   /** Still frame (reduced motion / data saver). Without it, uses YouTube's own
    *  thumbnail (maxresdefault). */
   poster?: string;
-  playerCaption?: ReactNode;
 };
+type VideoPlayerFile = PlayerCommon & {
+  /** The mp4 itself: muted and looping as the background, with sound after the tap. */
+  src: string;
+  /** Larger file for wide screens (background only). */
+  srcLarge?: string;
+  /** Still frame (reduced motion / data saver, and the <video> poster). */
+  poster: string;
+  posterLarge?: string;
+  objectPosition?: string;
+};
+type VideoPlayer = VideoPlayerYouTube | VideoPlayerFile;
+const isFile = (v: VideoPlayer): v is VideoPlayerFile => "src" in v;
 
 type Props = {
   /** Video background — defines the hero kind (loop or player). */
@@ -144,10 +157,10 @@ function YouTubeBackground({
  * in the Breathe language (tokens: ink/surface).
  *
  * - loop:   the background is a local clip on repeat (BackgroundVideo).
- * - player: the background is the YouTube video ITSELF playing muted, on repeat.
- *           Turning the sound on remounts it from zero (with audio and controls)
- *           inside the card and opens the close bar at the bottom (caption on
- *           the left, "Close" on the right).
+ * - player: the background is the video ITSELF (YouTube id or the site's mp4)
+ *           playing muted, on repeat. Turning the sound on remounts it from zero
+ *           (with audio and controls) inside the card and opens the close bar at
+ *           the bottom (caption on the left, "Close" on the right).
  */
 export function PageVideoHero({
   video,
@@ -179,20 +192,49 @@ export function PageVideoHero({
         {/* media — background (preview) or, when playing, the full video with sound */}
         <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
           {playing ? (
-            <iframe
-              key="cg-hero-sound"
-              title={videoTitle ?? "Video"}
-              src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayer).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
-              allowFullScreen
-              className="absolute inset-0 h-full w-full border-0 bg-black"
-            />
+            isFile(video as VideoPlayer) ? (
+              // the site's own mp4, with sound and the browser's controls; the
+              // click came from the person, so autoplay with audio is allowed
+              <video
+                key="cg-hero-sound"
+                src={(video as VideoPlayerFile).src}
+                poster={(video as VideoPlayerFile).poster}
+                controls
+                autoPlay
+                playsInline
+                aria-label={videoTitle ?? "Video"}
+                onEnded={() => setPlaying(false)}
+                className="absolute inset-0 h-full w-full bg-black object-contain"
+              />
+            ) : (
+              <iframe
+                key="cg-hero-sound"
+                title={videoTitle ?? "Video"}
+                src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayerYouTube).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+                allowFullScreen
+                className="absolute inset-0 h-full w-full border-0 bg-black"
+              />
+            )
           ) : (
             <>
-              {isPlayer ? (
+              {isPlayer && isFile(video as VideoPlayer) ? (
+                // the mp4 itself, muted and on repeat (BackgroundVideo: reduced
+                // motion, data saver and the pause button come with it)
+                <BackgroundVideo
+                  key={(video as VideoPlayerFile).src}
+                  src={(video as VideoPlayerFile).src}
+                  srcLarge={(video as VideoPlayerFile).srcLarge}
+                  poster={(video as VideoPlayerFile).poster}
+                  posterLarge={(video as VideoPlayerFile).posterLarge}
+                  objectPosition={(video as VideoPlayerFile).objectPosition}
+                  labels={previewLabels}
+                  className="absolute inset-0"
+                />
+              ) : isPlayer ? (
                 <YouTubeBackground
-                  id={(video as VideoPlayer).youtubeId}
-                  poster={(video as VideoPlayer).poster}
+                  id={(video as VideoPlayerYouTube).youtubeId}
+                  poster={(video as VideoPlayerYouTube).poster}
                   title={videoTitle}
                   labels={previewLabels}
                 />

package/components/PauseButton.tsx

@@ -0,0 +1,41 @@
+import { Pause, Play } from "lucide-react";
+
+type Labels = {
+  /** sr-only name: "Pause {what}" / "Resume {what}". */
+  pause: (what: string) => string;
+  resume: (what: string) => string;
+};
+const EN: Labels = { pause: (what) => `Pause ${what}`, resume: (what) => `Resume ${what}` };
+
+type Props = {
+  paused: boolean;
+  onToggle: () => void;
+  /** What it pauses, in the page's language: "the sample conversation". */
+  what: string;
+  /** Colour of the circle: card (white) over the surface, surface over a card. */
+  bubble?: "card" | "surface";
+  /** Position (absolute) inside the drawing: "right-0 top-0". */
+  className?: string;
+  labels?: Partial<Labels>;
+};
+
+/** Pause/resume button of the looping drawings (creeta's `Pausa`). What moves
+ *  by itself for more than 5s must be pausable (WCAG 2.2.2). 44px tap area,
+ *  32px circle. */
+export function PauseButton({ paused, onToggle, what, bubble = "card", className = "", labels }: Props) {
+  const t = { ...EN, ...labels };
+  const Icon = paused ? Play : Pause;
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={paused}
+      className={`absolute flex h-11 w-11 items-center justify-center rounded-full text-ink transition-transform duration-150 ease-out active:scale-[0.94] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+    >
+      <span className={`flex h-8 w-8 items-center justify-center rounded-full ${bubble === "card" ? "bg-card" : "bg-surface"}`}>
+        <Icon aria-hidden="true" size={14} strokeWidth={2} className={paused ? "ml-0.5" : ""} />
+      </span>
+      <span className="sr-only">{paused ? t.resume(what) : t.pause(what)}</span>
+    </button>
+  );
+}