@flamingo-stack/openframe-frontend-core 0.0.388-snapshot.20260709030118 → 0.0.388

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

@@ -26,10 +26,9 @@
  * (`<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 {cardHovered, offViewport,
+ * the rAF advances only when the pause-reason set {hover, offViewport,
  * tabHidden, reducedMotion} is empty AND `now > max(chevronSuppressUntil,
- * 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
+ * userScrollSuppressUntil)`. 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.
  */
@@ -86,12 +85,9 @@ 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. 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. */
+  /** Marquee speed in px/s. */
   autoScrollSpeed?: number;
-  /** Pause the marquee while a CARD is hovered (resumes as soon as the
-   *  pointer leaves the card — strip whitespace/heading never pauses). */
+  /** Pause the marquee while the pointer is anywhere over the strip. */
   pauseOnHover?: boolean;
   /** Card height in px per breakpoint (Figma: 416 desktop). */
   cardHeightDesktop?: number;
@@ -122,7 +118,7 @@ export function VideoBitesStrip({
   href,
   headerSlot,
   autoScroll = true,
-  autoScrollSpeed = 60,
+  autoScrollSpeed = 28,
   pauseOnHover = true,
   cardHeightDesktop = 416,
   cardHeightMobile = 300,
@@ -187,7 +183,7 @@ export function VideoBitesStrip({
   }, [measure, items.length, marqueeActive, isMobile]);
 
   // ---- pause-reason set + suppress timestamps ---------------------------------
-  // (Card hover — the only hover-based pause reason — lives in activeKeyRef below.)
+  const hoveredRef = useRef(false);
   const nearViewportRef = useRef(true);
   const chevronSuppressUntilRef = useRef(0);
   const userScrollSuppressUntilRef = useRef(0);
@@ -206,62 +202,26 @@ 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 && activeKeyRef.current !== null) ||
+        (pauseOnHover && hoveredRef.current) ||
         !nearViewportRef.current ||
         document.visibilityState === 'hidden' ||
         now < Math.max(chevronSuppressUntilRef.current, userScrollSuppressUntilRef.current);
-      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;
+      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
         }
-        marqueePosRef.current = wrap(marqueePosRef.current + autoScrollSpeed * dt);
-        scroller.scrollLeft = marqueePosRef.current;
-      } else {
-        marqueePosRef.current = scroller.scrollLeft;
       }
       raf = requestAnimationFrame(tick);
     };
@@ -275,80 +235,14 @@ 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);
-  // 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 activate = useCallback((key: string) => setActiveKey(key), []);
   const deactivate = useCallback((key: string) => {
-    setActiveKey(current => {
-      const next = current === key ? null : current;
-      activeKeyRef.current = next;
-      return next;
-    });
+    setActiveKey(current => (current === key ? null : current));
   }, []);
 
   // 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;
@@ -357,47 +251,13 @@ 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;
-    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' });
-    }
+    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;
@@ -407,6 +267,8 @@ 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>
@@ -420,7 +282,6 @@ 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) =>
@@ -431,7 +292,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).
-                  <VideoBiteCard
+                  <BiteStripCard
                     key={key}
                     bite={bite}
                     index={i}
@@ -442,8 +303,6 @@ 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}
@@ -481,91 +340,53 @@ export function VideoBitesStrip({
 }
 
 // =============================================================================
-// 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.
+// Card (private)
 // =============================================================================
 
-export interface VideoBiteCardProps {
+interface BiteStripCardProps {
   bite: VideoBiteStripItem;
   index: number;
-  profile?: VideoBiteStripProfile | null;
+  cardKey: string;
+  isClone: boolean;
+  isTouch: boolean;
+  height: number;
+  active: boolean;
+  onActivate: (key: string) => void;
+  onDeactivate: (key: string) => void;
+  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;
 }
 
-export function VideoBiteCard({
+function BiteStripCard({
   bite,
   index,
-  profile = null,
-  sectionHref,
-  onBiteNavigate,
+  cardKey,
+  isClone,
+  isTouch,
   height,
   active,
   onActivate,
   onDeactivate,
-  cardKey,
-  isClone = false,
-  isTouch = false,
-  playerMounted,
-  rootRef,
-  toolbar,
-  titleEditable = false,
-  onTitleChange,
-  onTitleCommit,
-  className,
-}: VideoBiteCardProps) {
+  profile,
+  sectionHref,
+  onBiteNavigate,
+}: BiteStripCardProps) {
   const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(bite.aspect_ratio))];
   const targetHref = bite.href ?? sectionHref;
   const hasTarget = !!(targetHref || bite.onNavigate || onBiteNavigate);
-  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);
+
+  // 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 [isNear, setIsNear] = useState(false);
   useEffect(() => {
-    if (gateControlled) return;
-    const el = rootElRef.current;
+    const el = nearRef.current;
     if (!el || typeof IntersectionObserver === 'undefined') return;
     const io = new IntersectionObserver(
       entries => setIsNear(entries[0]?.isIntersecting ?? false),
@@ -573,56 +394,24 @@ export function VideoBiteCard({
     );
     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) activate(); };
-  const handlePointerLeave = () => { if (!isTouch) deactivate(); };
-  const handleClick = () => { if (isTouch && !isActive) activate(); };
+  const handlePointerEnter = () => { if (!isTouch) onActivate(cardKey); };
+  const handlePointerLeave = () => { if (!isTouch) onDeactivate(cardKey); };
+  const handleClick = () => { if (isTouch && !active) onActivate(cardKey); };
 
   // 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. 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";
+  // to the entity the bite originated from.
   const overlayContent = (
     <>
-      {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>
+      {bite.title && (
+        <p className="font-['DM_Sans'] text-sm font-medium leading-5 text-ods-text-primary line-clamp-1">{bite.title}</p>
       )}
       {(profile || hasTarget) && (
         <div className="flex items-center gap-2 min-w-0">
@@ -631,7 +420,7 @@ export function VideoBiteCard({
               name={profile.name}
               avatarUrl={profile.avatarUrl}
               subtitle={profile.subtitle}
-              size={22}
+              size={28}
               shape="round"
               compact
               className="flex-1"
@@ -651,36 +440,33 @@ export function VideoBiteCard({
   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',
-    isActive ? 'opacity-100' : 'opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100',
+    active ? '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.
-    isActive ? 'pointer-events-auto' : 'pointer-events-none group-hover/card:pointer-events-auto group-focus-within/card:pointer-events-auto',
+    active ? 'pointer-events-auto' : 'pointer-events-none group-hover/card:pointer-events-auto',
   );
 
-  const media = (
+  return (
     <div
-      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' } : {}) }}
+      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)}
     >
-      {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). */}
+      {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). */}
           <Video
             kind="file"
             url={bite.url}
             poster={bite.thumbnail_url}
-            playWhenHovered={isActive}
+            playOnHover
             centerControlsOnly
             layout="fill"
           />
@@ -690,7 +476,7 @@ export function VideoBiteCard({
         <div className="absolute inset-0 bg-ods-card" />
       )}
 
-      {hasTarget && !isClone && !titleEditable ? (
+      {hasTarget && !isClone ? (
         targetHref ? (
           <a href={targetHref} aria-label={`Open ${bite.title || 'source content'}`} className={overlayClass}>
             {overlayContent}
@@ -705,35 +491,4 @@ export function VideoBiteCard({
       )}
     </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>
-  );
 }