@flamingo-stack/openframe-frontend-core 0.0.394-snapshot.20260709183206 → 0.0.394

package/src/components/features/cards-strip.tsx

@@ -1,587 +0,0 @@
-"use client";
-
-/**
- * <CardsStrip> — THE horizontal card-strip engine (single source of truth).
- *
- * Extracted verbatim from <VideoBitesStrip> so every strip surface shares ONE
- * marquee/chevron/seam/measure implementation ("unify means delete
- * variations"). Two input modes, one engine:
- *
- *   MODE A — render-prop (`items` + `itemKey` + `renderCard`): full control.
- *   The card receives the strip context (controlled activation, clone flag,
- *   shared player-mount gate) and owns its own clone a11y. Used by
- *   <VideoBitesStrip>. The engine adds NO cell wrapper in this mode — the
- *   card's root is the track's direct child (`scrollByCard` measures
- *   `track.firstElementChild.offsetWidth`, and the `flex items-stretch gap-4`
- *   sizing contract depends on it).
- *
- *   MODE B — children (organic): ANY card components as plain JSX children.
- *   Each child is auto-wrapped in a managed cell (fixed width, hover/keyboard
- *   marquee-pause, clone `aria-hidden` + `inert`, row-height stretch).
- *   Adding a new card type requires ZERO strip code. Contract:
- *   (a) pass an ARRAY of children (`{rows.map(...)}`) — `Children.toArray`
- *       does NOT flatten through a single <Fragment> child (it would become
- *       one giant cell; a dev-only warning fires);
- *   (b) when `autoScroll` is on, children must be ref-free / unique-DOM-id-
- *       free / mount-effect-free — the clone copy mounts the same element a
- *       second time (double-fired effects, duplicate ids, last-mounted ref).
- *
- * Activation invariant: hover/focus activation is wired in exactly ONE place —
- * the managed cell (children mode) OR the card itself (render-prop mode,
- * e.g. <VideoBiteCard>) — never both.
- *
- * Marquee state model (explicit — do not "simplify" into one timer):
- * the rAF advances only when the pause-reason set {cardHovered, 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 their own suppress-until
- * timestamp; any card-level leave-grace is a separate concern that never
- * touches marquee state.
- */
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../../utils/cn';
-import { Button } from '../ui/button';
-import { SECTION_HEADING_CLASS } from '../layout/page-heading';
-import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
-import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-/** Per-card strip context passed to `renderCard` (and used internally by the
- *  children-mode managed cell). */
-export interface CardStripRenderCtx {
-  /** Item index (copy-independent — the clone copy repeats the same indices). */
-  index: number;
-  /** `${itemKey}__${copyIndex}__${index}` — unique per rendered card, even for
-   *  duplicate items (the trailing index disambiguates). */
-  cardKey: string;
-  isClone: boolean;
-  isTouch: boolean;
-  /** Engine's (max-width: 767px) media query. */
-  isMobile: boolean;
-  /** activeKey === cardKey (controlled hover/focus activation). */
-  active: boolean;
-  onActivate: (key: string) => void;
-  onDeactivate: (key: string) => void;
-  /** Shared-by-index 500px near-viewport gate (opt-in — only meaningful when
-   *  the card registers via `rootRef`). */
-  mounted: boolean;
-  /** Registers the card root with the mount-gate IntersectionObserver.
-   *  May return a cleanup (React 19 ref contract). */
-  rootRef: (el: HTMLDivElement | null) => (() => void) | undefined;
-}
-
-interface CardsStripEngineProps {
-  /** Section heading. Omit `title` (or set `showTitle={false}`) to hide. */
-  title?: string;
-  showTitle?: boolean;
-  /** Custom node rendered between the heading and the strip. */
-  headerSlot?: React.ReactNode;
-  /** Marquee auto-scroll. Auto-disabled on no-overflow and
-   *  prefers-reduced-motion. Pass `autoScroll={false}` for chevron-style
-   *  entity strips — the default stays `true` for bites-contract parity. */
-  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. */
-  autoScrollSpeed?: number;
-  /** Pause the marquee while a CARD is hovered (resumes as soon as the
-   *  pointer leaves the card — strip whitespace/heading never pauses). */
-  pauseOnHover?: boolean;
-  /** Floating prev/next buttons. Hidden automatically when nothing overflows. */
-  showChevrons?: boolean;
-  /** Chevron aria-labels. */
-  prevLabel?: string;
-  nextLabel?: string;
-  /** Merged into the engine's wrapper ref (e.g. `useVideoWarmup().ref`). */
-  rootRef?: (el: HTMLDivElement | null) => void;
-  className?: string;
-}
-
-// The two mode interfaces hand-mirror each other's field names as `never` —
-// INVARIANT: every field added to one mode gets a `never` twin in the other,
-// or the XOR discrimination silently weakens (mixed-mode props become
-// assignable). Same manual pattern as social-icon-row.tsx / chart.tsx.
-
-/** MODE A — render-prop (advanced): full ctx control, no cell wrapper. */
-interface RenderCardMode<T> {
-  items: ReadonlyArray<T>;
-  itemKey: (item: T, index: number) => string;
-  renderCard: (item: T, ctx: CardStripRenderCtx) => React.ReactNode;
-  children?: never;
-  cardWidthDesktop?: never;
-  cardWidthMobile?: never;
-}
-
-/** MODE B — children (organic): ANY card components, zero registration. */
-interface ChildrenMode {
-  children: React.ReactNode;
-  /** Managed cell width in px per breakpoint (Figma: 400 desktop). */
-  cardWidthDesktop?: number;
-  cardWidthMobile?: number;
-  items?: never;
-  itemKey?: never;
-  renderCard?: never;
-}
-
-export type CardsStripProps<T = unknown> = CardsStripEngineProps & (RenderCardMode<T> | ChildrenMode);
-
-// =============================================================================
-// Constants
-// =============================================================================
-
-// Gap between cards (px) — keep in sync with the track's `gap-4`.
-const TRACK_GAP_PX = 16;
-// Marquee suppression windows after manual interaction.
-const CHEVRON_SUPPRESS_MS = 4000;
-const USER_SCROLL_SUPPRESS_MS = 3000;
-
-/** Single source for the strip cell width cap (shared with <VideoBiteCard>). */
-export const STRIP_CELL_MAX_WIDTH = '90vw';
-
-const EMPTY_CHILDREN: ReadonlyArray<React.ReactNode> = [];
-
-// =============================================================================
-// Component
-// =============================================================================
-
-export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactElement | null {
-  const {
-    title,
-    showTitle = true,
-    headerSlot,
-    autoScroll = true,
-    autoScrollSpeed = 60,
-    pauseOnHover = true,
-    showChevrons = true,
-    prevLabel = 'Previous items',
-    nextLabel = 'Next items',
-    rootRef,
-    className,
-  } = props;
-
-  // ---- input-mode normalization ---------------------------------------------
-  // Children mode feeds the SAME engine path as render-prop mode — one
-  // track/clone/measure/scroll implementation. Engine internals operate on the
-  // erased item type (`unknown`); the only assertions live at this seam.
-  const childrenMode = props.renderCard === undefined;
-  const childItems = useMemo(
-    () => (childrenMode ? React.Children.toArray(props.children) : EMPTY_CHILDREN),
-    [childrenMode, props.children],
-  );
-  const items: ReadonlyArray<unknown> = childrenMode ? childItems : props.items;
-  const cardWidthDesktop = childrenMode ? (props.cardWidthDesktop ?? 400) : 0;
-  const cardWidthMobile = childrenMode ? (props.cardWidthMobile ?? 320) : 0;
-
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'production' || !childrenMode) return;
-    const only = childItems.length === 1 ? childItems[0] : null;
-    if (React.isValidElement(only) && only.type === React.Fragment) {
-      console.warn(
-        '[CardsStrip] A single <Fragment> child becomes ONE giant cell — pass an array of card elements ({rows.map(...)}) instead.',
-      );
-    }
-  }, [childrenMode, childItems]);
-
-  const getItemKey = (item: unknown, index: number): string => {
-    if (!childrenMode) {
-      // Seam assertion: T is erased inside the engine; the props union
-      // guarantees itemKey matches the items array.
-      return (props.itemKey as (item: unknown, index: number) => string)(item, index);
-    }
-    // Children.toArray always assigns element keys ('.0' / '.$slug' — stable
-    // across renders); explicit null-check because `&&`/`??` chaining yields
-    // the string "false" for non-element children (same isValidElement guard
-    // as steps.tsx).
-    return React.isValidElement(item) && item.key != null ? String(item.key) : String(index);
-  };
-
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const scrollerRef = useRef<HTMLDivElement | null>(null);
-  const trackRef = useRef<HTMLDivElement | null>(null);
-
-  // ---- environment ----------------------------------------------------------
-  const [reducedMotion, setReducedMotion] = useState(false);
-  const [isTouch, setIsTouch] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const subs: Array<() => void> = [];
-    const watch = (query: string, set: (v: boolean) => void) => {
-      const mq = window.matchMedia(query);
-      set(mq.matches);
-      const onChange = (e: MediaQueryListEvent) => set(e.matches);
-      mq.addEventListener('change', onChange);
-      subs.push(() => mq.removeEventListener('change', onChange));
-    };
-    watch('(prefers-reduced-motion: reduce)', setReducedMotion);
-    watch('(hover: none)', setIsTouch);
-    watch('(max-width: 767px)', setIsMobile);
-    return () => subs.forEach(fn => fn());
-  }, []);
-
-  // ---- overflow measurement ---------------------------------------------------
-  // `overflows` gates chevrons; `marqueeActive` additionally gates cloning + rAF.
-  const [overflows, setOverflows] = useState(false);
-  const singleCopyWidthRef = useRef(0);
-  const marqueeActive = autoScroll && !reducedMotion && overflows && items.length > 0;
-
-  const measure = useCallback(() => {
-    const scroller = scrollerRef.current;
-    const track = trackRef.current;
-    if (!scroller || !track) return;
-    // When clones are rendered the track is 2× one copy (+ one joining gap).
-    const copies = track.dataset.copies === '2' ? 2 : 1;
-    const singleCopy = copies === 2 ? (track.scrollWidth - TRACK_GAP_PX) / 2 + TRACK_GAP_PX : track.scrollWidth;
-    singleCopyWidthRef.current = singleCopy;
-    setOverflows(singleCopy > scroller.clientWidth + 1);
-  }, []);
-
-  useEffect(() => {
-    measure();
-    const scroller = scrollerRef.current;
-    const track = trackRef.current;
-    if (!scroller || !track || typeof ResizeObserver === 'undefined') return;
-    const ro = new ResizeObserver(measure);
-    ro.observe(scroller);
-    ro.observe(track);
-    return () => ro.disconnect();
-  }, [measure, items.length, marqueeActive, isMobile]);
-
-  // ---- pause-reason set + suppress timestamps ---------------------------------
-  // (Card hover — the only hover-based pause reason — lives in activeKeyRef below.)
-  const nearViewportRef = useRef(true);
-  const chevronSuppressUntilRef = useRef(0);
-  const userScrollSuppressUntilRef = useRef(0);
-
-  // Two-way viewport gate (unlike the fire-once `useNearViewport`): the rAF
-  // should stop again when the strip scrolls far off-screen.
-  useEffect(() => {
-    const el = wrapperRef.current;
-    if (!el || typeof IntersectionObserver === 'undefined') return;
-    const io = new IntersectionObserver(
-      entries => { nearViewportRef.current = entries[0]?.isIntersecting ?? true; },
-      { rootMargin: '200px' },
-    );
-    io.observe(el);
-    return () => io.disconnect();
-  }, []);
-
-  // ---- 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) ||
-        !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;
-        }
-        marqueePosRef.current = wrap(marqueePosRef.current + autoScrollSpeed * dt);
-        scroller.scrollLeft = marqueePosRef.current;
-      } else {
-        marqueePosRef.current = scroller.scrollLeft;
-      }
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [marqueeActive, autoScrollSpeed, pauseOnHover]);
-
-  // ---- hover / overlay state -----------------------------------------------------
-  // activeKey identifies the hovered/tap-activated CARD (copy-aware so hovering
-  // a clone near the wrap seam works too). It only drives per-card `active`
-  // state — any heavier behavior (players, overlays) is the card's concern.
-  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 deactivate = useCallback((key: string) => {
-    // Ref write hoisted OUT of the state updater: React re-invokes queued
-    // updaters at render time, so an impure updater could re-null the ref
-    // AFTER a same-batch activate(B) already set it (leave(A)+enter(B) in one
-    // dispatch when the pointer jumps directly between cells) — stranding the
-    // rAF pause check while a card is visibly hovered.
-    if (activeKeyRef.current === key) activeKeyRef.current = null;
-    setActiveKey(current => (current === key ? null : current));
-  }, []);
-
-  // ---- shared card-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 expensive content (e.g. video players), a seam warp
-  // instantly swapped the visible copy for cards whose content was NOT mounted
-  // yet — every wrap crossing flashed placeholders. Mounting by INDEX (near in
-  // EITHER copy → both copies mount) makes the warp pixel-identical. Opt-in:
-  // cards that never register via ctx.rootRef incur no per-card observation.
-  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;
-    const track = trackRef.current;
-    if (!scroller || !track) return;
-    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' });
-    }
-  }, []);
-
-  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;
-  }, []);
-
-  // ---- render ----------------------------------------------------------------
-
-  const renderItem = (item: unknown, ctx: CardStripRenderCtx): React.ReactNode => {
-    if (!childrenMode) {
-      // Seam assertion (see normalization comment above).
-      return (props.renderCard as (item: unknown, ctx: CardStripRenderCtx) => React.ReactNode)(item, ctx);
-    }
-    // Managed cell — the ONLY place cell width / activation / clone a11y are
-    // encoded for children mode.
-    return (
-      // OUTER cell: width + activation handlers (never inert — an inert cell
-      // would retarget pointer events to the track and defeat hover-pause on
-      // clones).
-      <div
-        className="shrink-0 self-stretch"
-        style={{ width: ctx.isMobile ? cardWidthMobile : cardWidthDesktop, maxWidth: STRIP_CELL_MAX_WIDTH }}
-        onPointerEnter={ctx.isTouch ? undefined : () => ctx.onActivate(ctx.cardKey)}
-        onPointerLeave={ctx.isTouch ? undefined : () => ctx.onDeactivate(ctx.cardKey)}
-        // Keyboard pause parity (focus bubbles from the card's anchor; WCAG 2.2.2).
-        onFocus={() => ctx.onActivate(ctx.cardKey)}
-        onBlur={e => {
-          // Intra-cell focus moves must not blip the pause off.
-          if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
-          ctx.onDeactivate(ctx.cardKey);
-        }}
-      >
-        {/* INNER: clone a11y + uniform stretch — cards untouched. `inert` on
-            the clone strips anchor focusability without modifying any card
-            (WCAG aria-hidden-focus); clone content is pointer/focus-dead by
-            design while the outer cell still hover-pauses. */}
-        <div
-          className="h-full [&>*]:h-full [&>a>*]:h-full"
-          aria-hidden={ctx.isClone || undefined}
-          inert={ctx.isClone || undefined}
-        >
-          {item as React.ReactNode}
-        </div>
-      </div>
-    );
-  };
-
-  if (items.length === 0) return null;
-
-  const copies = marqueeActive ? 2 : 1;
-
-  return (
-    <div
-      ref={node => { wrapperRef.current = node; rootRef?.(node); }}
-      className={cn('flex flex-col gap-6 w-full min-w-0', className)}
-    >
-      {showTitle && title && (
-        <h2 className={`${SECTION_HEADING_CLASS} break-words`}>{title}</h2>
-      )}
-      {headerSlot}
-
-      <div className="relative">
-        <div
-          ref={scrollerRef}
-          className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-          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) =>
-              items.map((item, i) => {
-                const key = `${getItemKey(item, i)}__${copyIndex}__${i}`;
-                const isClone = copyIndex === 1;
-                return (
-                  // Clone copy a11y (aria-hidden + no focusable descendants —
-                  // WCAG) is the card's job in render-prop mode (via
-                  // ctx.isClone) and the managed cell's job in children mode.
-                  // The engine itself adds no wrapper here in render-prop mode
-                  // so the card root stays the track's direct child.
-                  <React.Fragment key={key}>
-                    {renderItem(item, {
-                      index: i,
-                      cardKey: key,
-                      isClone,
-                      isTouch,
-                      isMobile,
-                      active: activeKey === key,
-                      onActivate: activate,
-                      onDeactivate: deactivate,
-                      mounted: mountedIdx.has(i),
-                      rootRef: getCardRef(i),
-                    })}
-                  </React.Fragment>
-                );
-              }),
-            )}
-          </div>
-        </div>
-
-        {showChevrons && overflows && (
-          <>
-            {/* Shared design-system Button: outline surface (ods-card + border,
-                the Figma button-icon look) + the square `icon` size, which owns
-                the centered 24px glyph. Icon-only → aria-label required. */}
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              aria-label={prevLabel}
-              onClick={() => scrollByCard(-1)}
-              className="absolute left-2 top-1/2 -translate-y-1/2 z-10"
-              leftIcon={<Chevron02LeftIcon />}
-            />
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              aria-label={nextLabel}
-              onClick={() => scrollByCard(1)}
-              className="absolute right-2 top-1/2 -translate-y-1/2 z-10"
-              leftIcon={<Chevron02RightIcon />}
-            />
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/stories/CardsStrip.stories.tsx

@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { CardsStrip } from '../components/features/cards-strip'
-import { BlogCard, CaseStudyCard, CustomerInterviewCard } from '../components/chat/entity-cards'
-import { blogPostSummary, caseStudy, customerInterview } from './__fixtures__/chat-cards'
-
-// All stories exercise the ORGANIC children mode: real entity cards passed as
-// plain JSX children with zero strip-side registration. The render-prop mode
-// is regression-tested by VideoBitesStrip.stories.tsx.
-//
-// Usage guidance: pass `autoScroll={false}` for chevron-style entity strips
-// (Figma 3905:77388) — the engine default stays `true` for the bites
-// marquee contract, so don't let the marquee-on default propagate silently.
-
-const caseStudies = Array.from({ length: 7 }, (_, i) => ({
-  ...caseStudy,
-  id: i + 1,
-  slug: `${caseStudy.slug}-${i}`,
-  title: `${caseStudy.title} (${i + 1})`,
-}))
-
-const meta: Meta<typeof CardsStrip> = {
-  title: 'Features/CardsStrip',
-  component: CardsStrip,
-  parameters: { layout: 'fullscreen' },
-  decorators: [
-    Story => (
-      <div className="bg-ods-bg p-8 min-h-[560px]">
-        <Story />
-      </div>
-    ),
-  ],
-}
-export default meta
-
-type Story = StoryObj<typeof CardsStrip>
-
-/** Figma 3905:77388: chevron-nav strip of uniform 400px case-study cards —
- *  `autoScroll={false}`, chevrons appear only when content overflows. */
-export const CaseStudiesChevrons: Story = {
-  render: () => (
-    <CardsStrip title="Case Studies" autoScroll={false}>
-      {caseStudies.map(study => (
-        <CaseStudyCard key={study.slug} study={study} href={`/case-studies/${study.slug}`} />
-      ))}
-    </CardsStrip>
-  ),
-}
-
-/** Any card type coexists with zero strip config — the managed cell's
- *  stretch keeps mixed card types row-aligned (verify heights match). */
-export const MixedCardTypes: Story = {
-  render: () => (
-    <CardsStrip title="Latest Content" autoScroll={false}>
-      <CaseStudyCard key="cs" study={caseStudy} href={`/case-studies/${caseStudy.slug}`} />
-      <BlogCard key="blog" post={blogPostSummary} href={`/blog/${blogPostSummary.slug}`} />
-      <CustomerInterviewCard
-        key="interview"
-        interview={customerInterview}
-        href={`/interviews/${customerInterview.slug}`}
-      />
-      <CaseStudyCard key="cs2" study={caseStudies[1]} href={`/case-studies/${caseStudies[1].slug}`} />
-      <BlogCard key="blog2" post={blogPostSummary} href={`/blog/${blogPostSummary.slug}-2`} />
-    </CardsStrip>
-  ),
-}
-
-/** Marquee opt-in (engine default). Accepted clone behaviors: the clone
- *  copy's inner cell is `aria-hidden` + `inert` (content pointer/focus-dead,
- *  links unclickable — WCAG aria-hidden-focus), while the OUTER cell still
- *  hover-pauses the marquee; keyboard focus on original cards pauses too. */
-export const MarqueeOptIn: Story = {
-  render: () => (
-    <CardsStrip title="Case Studies">
-      {caseStudies.map(study => (
-        <CaseStudyCard key={study.slug} study={study} href={`/case-studies/${study.slug}`} />
-      ))}
-    </CardsStrip>
-  ),
-}
-
-/** Two cards — no overflow, so no clones, no marquee, no chevrons. */
-export const TwoItemsNoOverflow: Story = {
-  render: () => (
-    <CardsStrip title="Case Studies" autoScroll={false}>
-      {caseStudies.slice(0, 2).map(study => (
-        <CaseStudyCard key={study.slug} study={study} href={`/case-studies/${study.slug}`} />
-      ))}
-    </CardsStrip>
-  ),
-}
-
-/** Narrow cells via cardWidthDesktop/Mobile overrides. */
-export const CustomCellWidth: Story = {
-  render: () => (
-    <CardsStrip title="Compact Row" autoScroll={false} cardWidthDesktop={320} cardWidthMobile={280}>
-      {caseStudies.map(study => (
-        <CaseStudyCard key={study.slug} study={study} href={`/case-studies/${study.slug}`} />
-      ))}
-    </CardsStrip>
-  ),
-}