@flamingo-stack/openframe-frontend-core 0.0.388 → 0.0.389

package/src/components/features/video-bites-strip.tsx

@@ -26,9 +26,10 @@
  * (`<Video playOnHover>` — sound at 50%, muted fallback).
  *
  * Marquee state model (explicit — do not "simplify" into one timer):
- * the rAF advances only when the pause-reason set {hover, offViewport,
+ * the rAF advances only when the pause-reason set {cardHovered, offViewport,
  * tabHidden, reducedMotion} is empty AND `now > max(chevronSuppressUntil,
- * userScrollSuppressUntil)`. Chevron clicks and manual wheel/touch each set
+ * userScrollSuppressUntil)`. cardHovered means the pointer is over a CARD
+ * (incl. its overlay) — leaving the card resumes the marquee immediately. Chevron clicks and manual wheel/touch each set
  * their own suppress-until timestamp; the player leave-grace is a separate
  * concern that never touches marquee state.
  */
@@ -85,9 +86,12 @@ export interface VideoBitesStripProps {
   headerSlot?: React.ReactNode;
   /** Marquee auto-scroll. Auto-disabled on no-overflow and prefers-reduced-motion. */
   autoScroll?: boolean;
-  /** Marquee speed in px/s. */
+  /** Marquee speed in px/s. Default 60 — marquee libraries (e.g. GSAP marquee)
+   *  default around 100px/s; 60 keeps drift lively while cards stay easy to
+   *  hover-target. 60px/s ≈ 1px per 60Hz frame, the smoothest integer step. */
   autoScrollSpeed?: number;
-  /** Pause the marquee while the pointer is anywhere over the strip. */
+  /** Pause the marquee while a CARD is hovered (resumes as soon as the
+   *  pointer leaves the card — strip whitespace/heading never pauses). */
   pauseOnHover?: boolean;
   /** Card height in px per breakpoint (Figma: 416 desktop). */
   cardHeightDesktop?: number;
@@ -118,7 +122,7 @@ export function VideoBitesStrip({
   href,
   headerSlot,
   autoScroll = true,
-  autoScrollSpeed = 28,
+  autoScrollSpeed = 60,
   pauseOnHover = true,
   cardHeightDesktop = 416,
   cardHeightMobile = 300,
@@ -183,7 +187,7 @@ export function VideoBitesStrip({
   }, [measure, items.length, marqueeActive, isMobile]);
 
   // ---- pause-reason set + suppress timestamps ---------------------------------
-  const hoveredRef = useRef(false);
+  // (Card hover — the only hover-based pause reason — lives in activeKeyRef below.)
   const nearViewportRef = useRef(true);
   const chevronSuppressUntilRef = useRef(0);
   const userScrollSuppressUntilRef = useRef(0);
@@ -202,26 +206,62 @@ export function VideoBitesStrip({
   }, []);
 
   // ---- marquee rAF engine ------------------------------------------------------
+  // Position lives in a FLOAT ref, not in scrollLeft read-modify-write: reading
+  // scrollLeft back each frame returns a rounded value, so sub-pixel increments
+  // (speed/fps < 1px) get eaten by rounding — the old engine both stuttered AND
+  // ran measurably slower than the configured speed because of it.
+  //
+  // Chevron GLIDE also runs through this engine (glideRemainingRef): browser
+  // `scrollBy({behavior:'smooth'})` animates toward an ABSOLUTE target, so a
+  // seam warp mid-animation made it lunge a full copy-width to catch up, warp
+  // again, and oscillate — rapid chevron clicks left every card flickering.
+  // The rAF tween consumes a signed remaining-distance instead, wrapping
+  // modulo the copy width each frame, so warps are invisible to it.
+  const marqueePosRef = useRef(0);
+  const glideRemainingRef = useRef(0);
   useEffect(() => {
     if (!marqueeActive) return;
     const scroller = scrollerRef.current;
     if (!scroller) return;
     let raf = 0;
     let last = performance.now();
+    marqueePosRef.current = scroller.scrollLeft;
+    const wrap = (pos: number) => {
+      const half = singleCopyWidthRef.current;
+      if (half <= 0) return pos;
+      while (pos >= half) pos -= half;
+      while (pos < 0) pos += half;
+      return pos;
+    };
     const tick = (now: number) => {
       const dt = Math.min(now - last, 100) / 1000; // clamp tab-wake jumps
       last = now;
       const paused =
-        (pauseOnHover && hoveredRef.current) ||
+        (pauseOnHover && activeKeyRef.current !== null) ||
         !nearViewportRef.current ||
         document.visibilityState === 'hidden' ||
         now < Math.max(chevronSuppressUntilRef.current, userScrollSuppressUntilRef.current);
-      if (!paused) {
-        scroller.scrollLeft += autoScrollSpeed * dt;
-        const half = singleCopyWidthRef.current;
-        if (half > 0 && scroller.scrollLeft >= half) {
-          scroller.scrollLeft -= half; // seamless wrap at the clone seam
+      const glide = glideRemainingRef.current;
+      if (glide !== 0) {
+        // Ease-out toward the chevron target; runs even while "paused"
+        // (the chevron click itself sets the suppress window).
+        if (Math.abs(scroller.scrollLeft - marqueePosRef.current) > 1.5) {
+          marqueePosRef.current = scroller.scrollLeft;
+        }
+        const speed = Math.max(Math.abs(glide) * 6, 240); // px/s, proportional
+        const step = Math.sign(glide) * Math.min(Math.abs(glide), speed * dt);
+        glideRemainingRef.current = Math.abs(glide - step) < 0.5 ? 0 : glide - step;
+        marqueePosRef.current = wrap(marqueePosRef.current + step);
+        scroller.scrollLeft = marqueePosRef.current;
+      } else if (!paused) {
+        // Resync after external movement (user scroll, seam warp).
+        if (Math.abs(scroller.scrollLeft - marqueePosRef.current) > 1.5) {
+          marqueePosRef.current = scroller.scrollLeft;
         }
+        marqueePosRef.current = wrap(marqueePosRef.current + autoScrollSpeed * dt);
+        scroller.scrollLeft = marqueePosRef.current;
+      } else {
+        marqueePosRef.current = scroller.scrollLeft;
       }
       raf = requestAnimationFrame(tick);
     };
@@ -235,14 +275,80 @@ export function VideoBitesStrip({
   // the player is mounted per-card via near-viewport gating and plays on hover
   // through <Video playOnHover> (normal controls, no chrome fork).
   const [activeKey, setActiveKey] = useState<string | null>(null);
-  const activate = useCallback((key: string) => setActiveKey(key), []);
+  // Ref mirror for the rAF loop: the marquee pauses ONLY while a CARD is
+  // hovered (activeKey set) — hovering strip whitespace/heading does not
+  // pause, and leaving a card resumes immediately.
+  const activeKeyRef = useRef<string | null>(null);
+  const activate = useCallback((key: string) => {
+    activeKeyRef.current = key;
+    setActiveKey(key);
+  }, []);
   const deactivate = useCallback((key: string) => {
-    setActiveKey(current => (current === key ? null : current));
+    setActiveKey(current => {
+      const next = current === key ? null : current;
+      activeKeyRef.current = next;
+      return next;
+    });
   }, []);
 
   // Preconnect Mux/Supabase origins once so first hover starts fast.
   const warmup = useVideoWarmup<HTMLDivElement>({ videoUrl: items[0]?.url || null });
 
+  // ---- shared player-mount gate (by ITEM index, across both copies) -----------
+  // A card and its clone show identical content half a copy-width apart. If
+  // each card gated its own player, a seam warp instantly swapped the visible
+  // copy for cards whose players were NOT mounted yet — every wrap crossing
+  // flashed placeholders. Mounting by INDEX (near in EITHER copy → both copies
+  // mount) makes the warp pixel-identical. Live players stay bounded: ~2× the
+  // visible strip width.
+  const [mountedIdx, setMountedIdx] = useState<ReadonlySet<number>>(() => new Set());
+  const cardObserverRef = useRef<IntersectionObserver | null>(null);
+  const cardElIdxRef = useRef(new Map<Element, number>());
+  const cardElNearRef = useRef(new Map<Element, boolean>());
+  useEffect(() => {
+    if (typeof IntersectionObserver === 'undefined') return;
+    const io = new IntersectionObserver(entries => {
+      for (const e of entries) cardElNearRef.current.set(e.target, e.isIntersecting);
+      const next = new Set<number>();
+      cardElNearRef.current.forEach((near, el) => {
+        if (!near) return;
+        const idx = cardElIdxRef.current.get(el);
+        if (idx !== undefined) next.add(idx);
+      });
+      setMountedIdx(prev => {
+        if (prev.size === next.size) {
+          let same = true;
+          next.forEach(i => { if (!prev.has(i)) same = false; });
+          if (same) return prev;
+        }
+        return next;
+      });
+    }, { rootMargin: '500px' });
+    cardObserverRef.current = io;
+    cardElIdxRef.current.forEach((_idx, el) => io.observe(el));
+    return () => { io.disconnect(); cardObserverRef.current = null; };
+  }, []);
+  // Stable per-index ref callbacks (a fresh closure per render would detach/
+  // re-attach the observer every render). React 19 ref-cleanup unregisters.
+  const cardRefFnsRef = useRef(new Map<number, (el: HTMLDivElement | null) => (() => void) | undefined>());
+  const getCardRef = useCallback((idx: number) => {
+    let fn = cardRefFnsRef.current.get(idx);
+    if (!fn) {
+      fn = (el: HTMLDivElement | null) => {
+        if (!el) return undefined;
+        cardElIdxRef.current.set(el, idx);
+        cardObserverRef.current?.observe(el);
+        return () => {
+          cardElIdxRef.current.delete(el);
+          cardElNearRef.current.delete(el);
+          cardObserverRef.current?.unobserve(el);
+        };
+      };
+      cardRefFnsRef.current.set(idx, fn);
+    }
+    return fn;
+  }, []);
+
   // ---- manual navigation -----------------------------------------------------------
   const scrollByCard = useCallback((dir: 1 | -1) => {
     const scroller = scrollerRef.current;
@@ -251,13 +357,47 @@ export function VideoBitesStrip({
     const firstCard = track.firstElementChild as HTMLElement | null;
     const step = (firstCard?.offsetWidth ?? 320) + TRACK_GAP_PX;
     chevronSuppressUntilRef.current = performance.now() + CHEVRON_SUPPRESS_MS;
-    scroller.scrollBy({ left: dir * step, behavior: 'smooth' });
+    if (marqueeActiveRef.current) {
+      // Wrap-aware glide via the rAF engine (see engine comment) — clicks
+      // accumulate distance instead of racing browser smooth-scroll targets.
+      glideRemainingRef.current += dir * step;
+    } else {
+      // No clones/seam without the marquee — native smooth scroll is safe.
+      scroller.scrollBy({ left: dir * step, behavior: 'smooth' });
+    }
   }, []);
 
   const onUserScrollIntent = useCallback(() => {
     userScrollSuppressUntilRef.current = performance.now() + USER_SCROLL_SUPPRESS_MS;
   }, []);
 
+  // Never-ending strip: warp across the clone seam on EVERY scroll (manual
+  // wheel/drag/chevron included — the rAF only wraps while the marquee runs,
+  // so without this a user scrolling during a pause/suppress window hits the
+  // physical track edges). Both copies render identical content, so a ±half
+  // jump is pixel-invisible. Backward warp only when arriving AT the left
+  // edge from the right (never on initial rest at 0).
+  const lastScrollLeftRef = useRef(0);
+  const marqueeActiveRef = useRef(false);
+  marqueeActiveRef.current = marqueeActive;
+  const onSeamWarp = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || !marqueeActiveRef.current) return;
+    const half = singleCopyWidthRef.current;
+    if (half <= 0) return;
+    let sl = scroller.scrollLeft;
+    if (sl >= half) {
+      sl -= half;
+      scroller.scrollLeft = sl;
+      marqueePosRef.current = sl;
+    } else if (sl <= 0 && lastScrollLeftRef.current > 0.5) {
+      sl += half;
+      scroller.scrollLeft = sl;
+      marqueePosRef.current = sl;
+    }
+    lastScrollLeftRef.current = sl;
+  }, []);
+
   if (items.length === 0) return null;
 
   const cardHeight = isMobile ? cardHeightMobile : cardHeightDesktop;
@@ -267,8 +407,6 @@ export function VideoBitesStrip({
     <div
       ref={node => { wrapperRef.current = node; warmup.ref(node); }}
       className={cn('flex flex-col gap-6 w-full min-w-0', className)}
-      onPointerEnter={() => { hoveredRef.current = true; }}
-      onPointerLeave={() => { hoveredRef.current = false; }}
     >
       {showTitle && (
         <h2 className={`${SECTION_HEADING_CLASS} break-words`}>{title}</h2>
@@ -282,6 +420,7 @@ export function VideoBitesStrip({
           onWheel={onUserScrollIntent}
           onTouchStart={onUserScrollIntent}
           onPointerDown={onUserScrollIntent}
+          onScroll={onSeamWarp}
         >
           <div ref={trackRef} data-copies={copies} className="flex w-max items-stretch gap-4">
             {Array.from({ length: copies }, (_, copyIndex) =>
@@ -292,7 +431,7 @@ export function VideoBitesStrip({
                   // Clone copy: aria-hidden + no focusable descendants (WCAG —
                   // same rule as quick-action-marquee). Clones stay pointer-
                   // interactive (briefly visible near the wrap seam).
-                  <BiteStripCard
+                  <VideoBiteCard
                     key={key}
                     bite={bite}
                     index={i}
@@ -303,6 +442,8 @@ export function VideoBitesStrip({
                     active={activeKey === key}
                     onActivate={activate}
                     onDeactivate={deactivate}
+                    playerMounted={mountedIdx.has(i)}
+                    rootRef={getCardRef(i)}
                     profile={bite.profile ?? profile ?? null}
                     sectionHref={href}
                     onBiteNavigate={onBiteNavigate}
@@ -340,53 +481,91 @@ export function VideoBitesStrip({
 }
 
 // =============================================================================
-// Card (private)
+// Card — THE bite card (exported). One component for every surface: the
+// public strip passes controlled hover/mount state; the admin bites editor
+// renders it standalone (self-managed hover, grid-cell sizing, action slots,
+// inline title editing) so the admin sees EXACTLY the public card.
 // =============================================================================
 
-interface BiteStripCardProps {
+export interface VideoBiteCardProps {
   bite: VideoBiteStripItem;
   index: number;
-  cardKey: string;
-  isClone: boolean;
-  isTouch: boolean;
-  height: number;
-  active: boolean;
-  onActivate: (key: string) => void;
-  onDeactivate: (key: string) => void;
-  profile: VideoBiteStripProfile | null;
+  profile?: VideoBiteStripProfile | null;
   sectionHref?: string;
   onBiteNavigate?: (bite: VideoBiteStripItem, index: number) => void;
+  /** Fixed card height (strip). Omit → width-driven: card fills its grid
+   *  cell and the aspect-ratio derives the height (editor grids). */
+  height?: number;
+  /** Controlled hover-activation (strip). Omit → the card manages its own
+   *  hover/focus state. */
+  active?: boolean;
+  onActivate?: (key: string) => void;
+  onDeactivate?: (key: string) => void;
+  cardKey?: string;
+  isClone?: boolean;
+  isTouch?: boolean;
+  /** Controlled player mount (the strip's shared-by-index gate). Omit → the
+   *  card runs its own two-way near-viewport observer. */
+  playerMounted?: boolean;
+  /** Root-element ref hook (strip observer registration). May return a
+   *  cleanup (React 19 ref contract). */
+  rootRef?: (el: HTMLDivElement | null) => (() => void) | undefined;
+  /** Admin action toolbar rendered BELOW the media on a solid surface —
+   *  never floated over the video (white icons on a white frame fail the
+   *  WCAG 3:1 non-text contrast minimum; a solid `bg-ods-card` row always
+   *  passes). Editor passes publish / download / star / upload / delete. */
+  toolbar?: React.ReactNode;
+  /** Admin: the overlay title renders as an inline editor. */
+  titleEditable?: boolean;
+  onTitleChange?: (value: string) => void;
+  onTitleCommit?: (value: string) => void;
+  className?: string;
 }
 
-function BiteStripCard({
+export function VideoBiteCard({
   bite,
   index,
-  cardKey,
-  isClone,
-  isTouch,
+  profile = null,
+  sectionHref,
+  onBiteNavigate,
   height,
   active,
   onActivate,
   onDeactivate,
-  profile,
-  sectionHref,
-  onBiteNavigate,
-}: BiteStripCardProps) {
+  cardKey,
+  isClone = false,
+  isTouch = false,
+  playerMounted,
+  rootRef,
+  toolbar,
+  titleEditable = false,
+  onTitleChange,
+  onTitleCommit,
+  className,
+}: VideoBiteCardProps) {
   const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(bite.aspect_ratio))];
   const targetHref = bite.href ?? sectionHref;
   const hasTarget = !!(targetHref || bite.onNavigate || onBiteNavigate);
-
-  // TWO-WAY viewport gating (unlike the fire-once `useNearViewport`): the
-  // marquee cycles every card past the viewport, so a fire-once gate would
-  // permanently mount a player per card (originals + clones). This observer
-  // unmounts players again once the card scrolls >500px away, bounding live
-  // MuxPlayer instances to roughly the visible strip. Near cards render the
-  // REAL player (first frame + center play control); hover-preview comes
-  // from <Video playOnHover>.
-  const nearRef = useRef<HTMLDivElement | null>(null);
+  const key = cardKey ?? `${bite.url}__${index}`;
+
+  // Hover activation: controlled by the strip (activeKey) or self-managed
+  // when rendered standalone (admin editor).
+  const controlled = active !== undefined;
+  const [selfActive, setSelfActive] = useState(false);
+  const isActive = controlled ? !!active : selfActive;
+  const activate = () => (controlled ? onActivate?.(key) : setSelfActive(true));
+  const deactivate = () => (controlled ? onDeactivate?.(key) : setSelfActive(false));
+
+  // Player mount: controlled (strip's shared-by-index gate) or an internal
+  // TWO-WAY near-viewport observer (standalone). Two-way — NOT the fire-once
+  // `useNearViewport` — so players unmount again >500px away and live
+  // MuxPlayer instances stay bounded.
+  const gateControlled = playerMounted !== undefined;
+  const rootElRef = useRef<HTMLDivElement | null>(null);
   const [isNear, setIsNear] = useState(false);
   useEffect(() => {
-    const el = nearRef.current;
+    if (gateControlled) return;
+    const el = rootElRef.current;
     if (!el || typeof IntersectionObserver === 'undefined') return;
     const io = new IntersectionObserver(
       entries => setIsNear(entries[0]?.isIntersecting ?? false),
@@ -394,24 +573,56 @@ function BiteStripCard({
     );
     io.observe(el);
     return () => io.disconnect();
-  }, []);
+  }, [gateControlled]);
+  const showPlayer = gateControlled ? playerMounted : isNear;
 
   const navigate = () => {
     if (bite.onNavigate) bite.onNavigate();
     else onBiteNavigate?.(bite, index);
   };
 
-  const handlePointerEnter = () => { if (!isTouch) onActivate(cardKey); };
-  const handlePointerLeave = () => { if (!isTouch) onDeactivate(cardKey); };
-  const handleClick = () => { if (isTouch && !active) onActivate(cardKey); };
+  const handlePointerEnter = () => { if (!isTouch) activate(); };
+  const handlePointerLeave = () => { if (!isTouch) deactivate(); };
+  const handleClick = () => { if (isTouch && !isActive) activate(); };
 
   // Bottom-docked detail (Figma node 4033:90369): title row + profile row +
   // chevron affordance. The WHOLE footer is the navigation target — it links
-  // to the entity the bite originated from.
+  // to the entity the bite originated from. In the editor the title row is
+  // the inline title editor (edited directly on the card).
+  const titleClass = "font-['DM_Sans'] text-sm font-medium leading-5 text-ods-text-primary";
   const overlayContent = (
     <>
-      {bite.title && (
-        <p className="font-['DM_Sans'] text-sm font-medium leading-5 text-ods-text-primary line-clamp-1">{bite.title}</p>
+      {titleEditable ? (
+        // Textarea, not input: the public title wraps to two lines
+        // (line-clamp-2) and the editor must render identically. rows=1 +
+        // auto-grow keeps short titles single-line; max-height caps at the
+        // same two lines the clamp allows.
+        <textarea
+          value={bite.title || ''}
+          placeholder="Title (optional)"
+          aria-label="Bite title"
+          rows={1}
+          onChange={e => {
+            e.target.style.height = 'auto';
+            e.target.style.height = `${Math.min(e.target.scrollHeight, 40)}px`;
+            onTitleChange?.(e.target.value);
+          }}
+          ref={el => {
+            if (el) {
+              el.style.height = 'auto';
+              el.style.height = `${Math.min(el.scrollHeight, 40)}px`;
+            }
+          }}
+          onBlur={e => onTitleCommit?.(e.target.value)}
+          onClick={e => e.stopPropagation()}
+          className={cn(
+            titleClass,
+            'w-full max-h-10 resize-none overflow-hidden bg-transparent outline-none',
+            'placeholder:text-ods-text-secondary border-b border-transparent focus:border-ods-border',
+          )}
+        />
+      ) : (
+        bite.title && <p className={cn(titleClass, 'line-clamp-2')}>{bite.title}</p>
       )}
       {(profile || hasTarget) && (
         <div className="flex items-center gap-2 min-w-0">
@@ -420,7 +631,7 @@ function BiteStripCard({
               name={profile.name}
               avatarUrl={profile.avatarUrl}
               subtitle={profile.subtitle}
-              size={28}
+              size={22}
               shape="round"
               compact
               className="flex-1"
@@ -440,33 +651,36 @@ function BiteStripCard({
   const overlayClass = cn(
     'absolute inset-x-0 bottom-0 p-3 gap-2 bg-black/75 border border-ods-border shadow-2xl',
     'flex flex-col transition-opacity duration-200',
-    active ? 'opacity-100' : 'opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100',
+    isActive ? 'opacity-100' : 'opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100',
     // Non-interactive while invisible so it never swallows clicks on the
     // resting card / player controls.
-    active ? 'pointer-events-auto' : 'pointer-events-none group-hover/card:pointer-events-auto',
+    isActive ? 'pointer-events-auto' : 'pointer-events-none group-hover/card:pointer-events-auto group-focus-within/card:pointer-events-auto',
   );
 
-  return (
+  const media = (
     <div
-      ref={nearRef}
-      aria-hidden={isClone || undefined}
-      className="relative shrink-0 rounded-md border border-ods-border bg-ods-card overflow-hidden group/card"
-      style={{ height, aspectRatio: cssAspect, maxWidth: '90vw' }}
-      onPointerEnter={handlePointerEnter}
-      onPointerLeave={handlePointerLeave}
-      onClick={handleClick}
-      onFocus={() => onActivate(cardKey)}
-      onBlur={() => onDeactivate(cardKey)}
+      className="relative w-full"
+      // Strip mode: fixed height + aspect drive the width (capped at 90vw,
+      // same as the old single-box layout). Editor mode: width-driven.
+      style={{ aspectRatio: cssAspect, ...(height !== undefined ? { height, maxWidth: '90vw' } : {}) }}
     >
-      {isNear ? (
-        <div className="absolute inset-0">
-          {/* Hover = auto-play WITH sound at 50% (muted fallback on autoplay
-              policy); chrome = center play/pause only (Figma card look). */}
+      {showPlayer ? (
+        // Clones: `inert` (not just the wrapper's aria-hidden) — the player's
+        // shadow-DOM center control is otherwise still tab-reachable inside a
+        // hidden subtree (axe aria-hidden-focus). Hover preview on clones
+        // keeps working: playback is driven imperatively from the CARD's own
+        // pointer handlers, never from focus/clicks on the player chrome.
+        <div className="absolute inset-0" inert={isClone || undefined}>
+          {/* CONTROLLED hover playback keyed to CARD hover (`isActive`): the
+              detail overlay is part of the card, so moving the pointer onto
+              it keeps playing. Sound at 50% (pre-activation: muted start +
+              live unmute on the user's first gesture); chrome = center
+              play/pause only (Figma card look). */}
           <Video
             kind="file"
             url={bite.url}
             poster={bite.thumbnail_url}
-            playOnHover
+            playWhenHovered={isActive}
             centerControlsOnly
             layout="fill"
           />
@@ -476,7 +690,7 @@ function BiteStripCard({
         <div className="absolute inset-0 bg-ods-card" />
       )}
 
-      {hasTarget && !isClone ? (
+      {hasTarget && !isClone && !titleEditable ? (
         targetHref ? (
           <a href={targetHref} aria-label={`Open ${bite.title || 'source content'}`} className={overlayClass}>
             {overlayContent}
@@ -491,4 +705,35 @@ function BiteStripCard({
       )}
     </div>
   );
+
+  return (
+    <div
+      ref={node => {
+        rootElRef.current = node;
+        return rootRef?.(node);
+      }}
+      aria-hidden={isClone || undefined}
+      className={cn(
+        'relative rounded-md border border-ods-border bg-ods-card overflow-hidden group/card',
+        height !== undefined ? 'shrink-0' : 'w-full',
+        className,
+      )}
+      style={height !== undefined ? { maxWidth: '90vw' } : undefined}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      onClick={handleClick}
+      onFocus={activate}
+      onBlur={deactivate}
+    >
+      {media}
+      {toolbar && (
+        // Solid-surface action row UNDER the media (WCAG non-text contrast —
+        // see the `toolbar` prop doc). Part of the card, so hovering it keeps
+        // hover playback alive.
+        <div className="flex items-center justify-between gap-1 border-t border-ods-border bg-ods-card px-2 py-1.5">
+          {toolbar}
+        </div>
+      )}
+    </div>
+  );
 }