@flamingo-stack/openframe-frontend-core 0.0.449-snapshot.20260718143201 → 0.0.449

package/src/components/chat/quick-action-chip.tsx

@@ -14,10 +14,6 @@ import { EntityIcon, type EntityIconValue } from '../icon-display'
  *  (agent/persona `icon_props.color`). */
 export type QuickActionAccent = 'pink' | 'cyan' | (string & {})
 
-/** THE agent→accent pairs (one spelling — {@link getAgentAccent} and
- *  {@link QUICK_ACTION_THEMES} both derive from it). */
-const AGENT_ACCENTS = { fae: 'pink', mingo: 'cyan' } as const
-
 /**
  * FALLBACK-ONLY agent→accent mapping (fae→pink, mingo→cyan) for the built-in
  * agents when nothing is configured. A color configured on the entity itself —
@@ -27,7 +23,9 @@ const AGENT_ACCENTS = { fae: 'pink', mingo: 'cyan' } as const
  * comparison elsewhere.
  */
 export function getAgentAccent(slug: string | null | undefined): QuickActionAccent | undefined {
-  return slug === 'fae' || slug === 'mingo' ? AGENT_ACCENTS[slug] : undefined
+  if (slug === 'fae') return 'pink'
+  if (slug === 'mingo') return 'cyan'
+  return undefined
 }
 
 /** Admin-configured identity color (`icon_props.color` on the agent/persona
@@ -65,24 +63,18 @@ const ACCENT_CLASS: Record<string, string> = {
   cyan: 'text-ods-flamingo-cyan',
 }
 
-/** A spec is a plain data object, never a React element — so any non-element,
- *  non-array object is a spec; strings, elements, fragments, and ReactNode
- *  ARRAYS stay ReactNode. */
-export function isQuickActionIconSpec(
-  icon: React.ReactNode | QuickActionIconSpec | undefined,
-): icon is QuickActionIconSpec {
-  return typeof icon === 'object' && icon !== null && !Array.isArray(icon) && !React.isValidElement(icon)
-}
-
 /** Resolve a chip `icon` prop to a renderable node. Specs go through
  *  `<EntityIcon>`; ReactNodes pass through untouched. */
 export function renderQuickActionIcon(
   icon: React.ReactNode | QuickActionIconSpec | undefined,
 ): React.ReactNode {
-  if (!isQuickActionIconSpec(icon)) {
+  // A spec is a plain data object, never a React element — so any non-element,
+  // non-array object is a spec; strings, elements, fragments, and ReactNode
+  // ARRAYS stay ReactNode.
+  if (typeof icon !== 'object' || icon === null || Array.isArray(icon) || React.isValidElement(icon)) {
     return icon
   }
-  const spec = icon
+  const spec = icon as QuickActionIconSpec
   if (!spec.name && !spec.url) return undefined
   // Named brand tokens tint via a text class on `currentColor`; any other
   // accent value is an admin-configured CSS color, delivered as the glyph's
@@ -112,48 +104,6 @@ export interface QuickActionChipLozenge {
   className?: string
 }
 
-// =============================================================================
-// Themes
-// =============================================================================
-
-/**
- * THE quick-action wall/chip theme set — one spelling of "who does this work"
- * across every surface (homepage hero tabs, marketing marquees, company-hub
- * deck panels, chat empty states):
- * - `fae` / `mingo` — the agent identities (pink / cyan), same values
- *   {@link getAgentAccent} resolves for the built-in agents.
- * - `it` / `sec` — work-category themes on the ODS attention pair
- *   (IT = yellow routine work, security = red defense), deliberately NOT the
- *   agent identities so a category never reads as agent attribution. These two
- *   carry the classification lozenge (leading-edge affix) as part of the theme.
- */
-export type QuickActionTheme = 'fae' | 'mingo' | 'it' | 'sec'
-
-export interface QuickActionThemeSpec {
-  /** Chip icon tint ({@link QuickActionAccent}: brand token or CSS color). */
-  accent: QuickActionAccent
-  /** Classification affix rendered inside the chip (category themes only). */
-  lozenge?: QuickActionChipLozenge
-}
-
-/** Caller-injected per-theme accent overrides — how SERVER-CONFIGURED agent
- *  colors reach the chips. Consumers resolve the configured value (e.g.
- *  {@link accentFromIdentityIcon} on the agent row's `icon_props.color`) and
- *  inject it here; {@link QUICK_ACTION_THEMES} below is fallback-only. */
-export type QuickActionThemeAccents = Partial<Record<QuickActionTheme, QuickActionAccent>>
-
-/** FALLBACK-ONLY theme specs (same contract as {@link getAgentAccent}): the
- *  built-in accents apply when the caller injects nothing. The fae/mingo
- *  accents in particular are server-configured per agent — walls/chips accept
- *  a {@link QuickActionThemeAccents} override (`themeAccents`/`themeAccent`)
- *  that always wins over this map. */
-export const QUICK_ACTION_THEMES: Record<QuickActionTheme, QuickActionThemeSpec> = {
-  fae: { accent: AGENT_ACCENTS.fae },
-  mingo: { accent: AGENT_ACCENTS.mingo },
-  it: { accent: 'var(--color-warning)', lozenge: { label: 'IT', className: 'text-ods-warning' } },
-  sec: { accent: 'var(--color-error)', lozenge: { label: 'SEC', className: 'text-ods-error' } },
-}
-
 /** Resolve a chip label + optional lozenge to the Tag label node. */
 function composeChipLabel(
   label: React.ReactNode,
@@ -186,17 +136,9 @@ export interface QuickActionChipButtonProps {
   /** Icon: a declarative {@link QuickActionIconSpec} (preferred — unified
    *  EntityIcon resolution) or a pre-rendered ReactNode. */
   icon?: React.ReactNode | QuickActionIconSpec
-  /** Chip theme ({@link QuickActionTheme}): supplies the icon accent when the
-   *  icon spec doesn't carry its own, and the lozenge when `lozenge` is
-   *  `true`. Explicit values always win over the theme. */
-  theme?: QuickActionTheme
-  /** Caller-injected accent for `theme` — the server-configured agent color
-   *  (resolve via {@link accentFromIdentityIcon}). Overrides the theme's
-   *  built-in fallback accent; the icon spec's own `accent` still wins. */
-  themeAccent?: QuickActionAccent
-  /** {@link QuickActionChipLozenge} at the label's leading edge (e.g. an
-   *  IT/SEC classification affix). `true` renders the `theme`'s lozenge. */
-  lozenge?: QuickActionChipLozenge | boolean
+  /** Optional {@link QuickActionChipLozenge} at the label's leading edge
+   *  (e.g. an IT/SEC classification affix). */
+  lozenge?: QuickActionChipLozenge
   /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
   variant?: 'primary' | 'outline'
   /** Active single-select state (Figma "Feature Item" active): renders the
@@ -285,8 +227,6 @@ export function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = f
 export function QuickActionChipButton({
   label,
   icon,
-  theme,
-  themeAccent,
   lozenge,
   variant = 'outline',
   selected = false,
@@ -298,16 +238,8 @@ export function QuickActionChipButton({
   interactive = true,
   className,
 }: QuickActionChipButtonProps) {
-  const themeSpec = theme ? QUICK_ACTION_THEMES[theme] : undefined
-  // Accent precedence: the icon spec's own accent (admin-configured color,
-  // agent identity) → caller-injected `themeAccent` (server-configured agent
-  // color) → the theme's built-in fallback.
-  const accent = themeAccent ?? themeSpec?.accent
-  const themedIcon =
-    accent && isQuickActionIconSpec(icon) && !icon.accent ? { ...icon, accent } : icon
-  const resolvedLozenge = lozenge === true ? themeSpec?.lozenge : lozenge === false ? undefined : lozenge
-  const resolvedIcon = renderQuickActionIcon(themedIcon)
-  const resolvedLabel = composeChipLabel(label, resolvedLozenge)
+  const resolvedIcon = renderQuickActionIcon(icon)
+  const resolvedLabel = composeChipLabel(label, lozenge)
   const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant
   if (!interactive) {
     return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />

package/src/components/chat/quick-action-marquee.tsx

@@ -1,10 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import type { MarqueeSyncController } from '../ui/marquee-wall'
-import type { QuickActionIconSpec } from './quick-action-chip'
-import type { QuickActionChip } from './chat-quick-action-row'
-import { QuickActionWall } from './quick-action-wall'
+import { cn } from '../../utils/cn'
+import { QuickActionChipButton, type QuickActionIconSpec } from './quick-action-chip'
 
 // =============================================================================
 // Types
@@ -19,81 +17,76 @@ export interface QuickActionMarqueeItem {
 
 export interface QuickActionMarqueeProps {
   items: ReadonlyArray<QuickActionMarqueeItem>
-  /** `'animated'` (default): endless scroll. `'plain'`: a static chip row —
-   *  the consumer's opt-out of the marquee (no motion, no track padding
-   *  effects beyond the plain layout). */
-  mode?: 'animated' | 'plain'
-  /** Scroll direction. `'right'` reverses the travel. Default `'left'`. */
+  /** Scroll direction. `'right'` reverses the animation. Default `'left'`. */
   direction?: 'left' | 'right'
-  /** Scroll speed in px/s — the shared marquee unit (CardsStrip cruises at
-   *  60). Default 40: on-screen speed stays constant no matter how many quick
-   *  actions an agent has (the engine is position-based, not loop-based). */
-  speed?: number
+  /** Seconds per full loop. Default 40. */
+  duration?: number
   /** Pause the scroll while hovered. Default true. */
   pauseOnHover?: boolean
   /** When provided chips are interactive buttons; omitted → decorative tags. */
   onSelect?: (item: QuickActionMarqueeItem) => void
-  /** Repeat-pad the track to at least this many chips so one copy overflows
-   *  the widest container this strip can get (the loop only engages on
-   *  overflow). Default 12 ≈ 2600px+, enough for a full-bleed max-w-[1920px]
-   *  section. */
-  minChips?: number
-  /** Pair with a sibling marquee under ONE position driver (the resolve
-   *  strips' pending/resolved copies stay pixel-locked). */
-  sync?: MarqueeSyncController
   className?: string
 }
 
+// Heuristic: ~6 chips ≈ one 1280px viewport width, so the halved track always
+// fills the screen; bump if chips shrink.
+const MIN_TRACK_ITEMS = 6
+
 // =============================================================================
 // Component
 // =============================================================================
 
 /**
  * Endless horizontally-scrolling strip of quick-action chips (Figma fae/mingo
- * marquee rows) — the single-row preset of {@link QuickActionWall} (same
- * chips, same engine, `flex-nowrap` layout). Clone-copy chips stay
- * interactive when `onSelect` is set (clone wrapper a11y applies). Pauses on
- * hover (optional) and always under `prefers-reduced-motion`.
+ * marquee rows). The item list is padded to at least {@link MIN_TRACK_ITEMS}
+ * and rendered twice so the `qa-marquee` keyframe's `translateX(-50%)` loops
+ * seamlessly; the second half is `aria-hidden`. Pauses on hover (optional)
+ * and always under `prefers-reduced-motion`.
  */
 export function QuickActionMarquee({
   items,
-  mode = 'animated',
   direction = 'left',
-  speed = 40,
+  duration = 40,
   pauseOnHover = true,
   onSelect,
-  minChips = 12,
-  sync,
   className,
 }: QuickActionMarqueeProps) {
-  const chips = React.useMemo<QuickActionChip[]>(
-    () =>
-      items.map(item => ({
-        id: item.id,
-        label: item.label,
-        icon: item.icon,
-        onSelect: onSelect ? () => onSelect(item) : undefined,
-      })),
-    [items, onSelect],
-  )
+  const { track, half } = React.useMemo(() => {
+    const repeats = Math.max(1, Math.ceil(MIN_TRACK_ITEMS / Math.max(1, items.length)))
+    const padded = Array.from({ length: repeats }, () => items).flat()
+    return { track: [...padded, ...padded], half: padded.length }
+  }, [items])
 
   if (items.length === 0) return null
 
   return (
-    <QuickActionWall
-      chips={chips}
-      mode={mode}
-      axis="x"
-      reverse={direction === 'right'}
-      speed={speed}
-      pauseOnHover={pauseOnHover}
-      // Plain mode shows the items once, untruncated; padding only serves
-      // the endless loop.
-      minChips={mode === 'plain' ? undefined : minChips}
-      copyGap="var(--spacing-system-xsf)"
-      className={className}
-      contentClassName="flex-nowrap items-center"
-      sync={sync}
-    />
+    <div className={cn('group overflow-hidden', className)}>
+      <div
+        className={cn(
+          'flex w-max items-center gap-2 animate-qa-marquee motion-reduce:[animation-play-state:paused]',
+          direction === 'right' && '[animation-direction:reverse]',
+          pauseOnHover && 'group-hover:[animation-play-state:paused]',
+        )}
+        style={{ '--qa-marquee-duration': `${duration}s` } as React.CSSProperties}
+      >
+        {track.map((item, index) => {
+          const isHiddenCopy = index >= half
+          return (
+            <span key={`${item.id}__${index}`} aria-hidden={isHiddenCopy || undefined}>
+              {/* The aria-hidden loop copy must contain NO focusable elements
+                  (WCAG: no focusable descendants under aria-hidden) — its
+                  chips render as plain tags even when the strip is
+                  interactive. */}
+              <QuickActionChipButton
+                label={item.label}
+                icon={item.icon}
+                interactive={!!onSelect && !isHiddenCopy}
+                onSelect={onSelect && !isHiddenCopy ? () => onSelect(item) : undefined}
+              />
+            </span>
+          )
+        })}
+      </div>
+    </div>
   )
 }

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

@@ -44,8 +44,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { NEAR_VIEWPORT_ROOT_MARGIN } from '../../hooks/use-near-viewport';
-import { useMarqueeEngine } from '../../hooks/ui/use-marquee-engine';
-import { useSuppressCloneFocus } from '../../hooks/ui/use-suppress-clone-focus';
 import { Button } from '../ui/button';
 import { SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
@@ -153,8 +151,60 @@ const EMPTY_CHILDREN: ReadonlyArray<React.ReactNode> = [];
 // Children-mode managed cell
 // =============================================================================
 
-// (Clone focus suppression lives in hooks/ui/use-suppress-clone-focus — shared
-// with <MarqueeWall>, which renders the same 2-copy endless-loop structure.)
+// Every focusable a clone might contain — matched so it can be pulled out of the
+// keyboard tab order (see useSuppressCloneFocus). `[contenteditable]:not(
+// [contenteditable="false"])` catches the empty/`"true"`/`"plaintext-only"`
+// editable forms; `summary` is focusable inside a <details>.
+const CLONE_FOCUSABLE_SELECTOR =
+  'a[href],button,input,select,textarea,iframe,summary,audio[controls],video[controls],[tabindex],[contenteditable]:not([contenteditable="false"])';
+
+/**
+ * Keep a clone cell's content pointer-CLICKABLE while taking it out of the
+ * accessibility tree and the keyboard tab order.
+ *
+ * `inert` (the previous approach) does all three at once: a11y-hidden,
+ * un-focusable AND un-clickable. That third effect was the "news marquee stops
+ * being clickable after you scroll it for a while" bug — the 2-copy endless
+ * loop ALWAYS paints clone cards inside the viewport near the copy seam, so a
+ * user who manually scrolls and parks there is looking at real-looking cards
+ * that silently swallow every click. Clones must therefore stay clickable (a
+ * click on ANY visible card must open its link — mouse, ⌘-click, middle-click
+ * and context-menu all handled natively by the clone's own anchor).
+ *
+ * The a11y contract is still met without `inert`: the cell keeps `aria-hidden`
+ * (out of the a11y tree) and every focusable descendant is forced to
+ * `tabindex="-1"` (out of the tab order → no duplicate tab stops, no
+ * aria-hidden-focus violation). Re-applied on subtree mutation. This is the
+ * standard loop-clone treatment used by Swiper/Splide.
+ */
+function useSuppressCloneFocus(active: boolean) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const root = ref.current;
+    if (!root || !active) return;
+    const suppress = () => {
+      root.querySelectorAll<HTMLElement>(CLONE_FOCUSABLE_SELECTOR).forEach(el => {
+        // Only stamp the ones not already stamped — avoids touching the DOM (and
+        // clobbering an intentional tabindex) on every mutation.
+        if (el.getAttribute('tabindex') !== '-1') el.setAttribute('tabindex', '-1');
+      });
+    };
+    suppress();
+    // Watch structure AND the attributes that can turn a descendant tabbable
+    // (an anchor gaining `href`, React restoring `tabindex="0"`, an element
+    // becoming editable, media gaining `controls`). The `!== '-1'` guard above
+    // makes our own tabindex writes a no-op, so the observer never loops.
+    const mo = new MutationObserver(suppress);
+    mo.observe(root, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['href', 'tabindex', 'contenteditable', 'controls'],
+    });
+    return () => mo.disconnect();
+  }, [active]);
+  return ref;
+}
 
 /**
  * Children-mode cell: fixed width + hover/keyboard activation (wired here, never
@@ -292,18 +342,10 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
   }, []);
 
   // ---- overflow measurement ---------------------------------------------------
-  // TWO overflow states on purpose: `overflows` (any real overflow) gates
-  // chevrons — a strip clipping even a few px must stay navigable —
-  // while `marqueeEligible` (overflow beyond the joining gap) additionally
-  // gates cloning + rAF: the cloned track's physical maxScroll is
-  // 2·copy − gap − viewport, so a copy overflowing by less than the gap
-  // makes even the zero-buffer wrap range [0, copy) unreachable — the
-  // engine would clamp at the track end and freeze. Razor-thin overflow
-  // (≤16px) stays a static, chevron-navigable row instead.
+  // `overflows` gates chevrons; `marqueeActive` additionally gates cloning + rAF.
   const [overflows, setOverflows] = useState(false);
-  const [marqueeEligible, setMarqueeEligible] = useState(false);
   const singleCopyWidthRef = useRef(0);
-  const marqueeActive = autoScroll && !reducedMotion && marqueeEligible && items.length > 0;
+  const marqueeActive = autoScroll && !reducedMotion && overflows && items.length > 0;
 
   const measure = useCallback(() => {
     const scroller = scrollerRef.current;
@@ -314,7 +356,6 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     const singleCopy = copies === 2 ? (track.scrollWidth - TRACK_GAP_PX) / 2 + TRACK_GAP_PX : track.scrollWidth;
     singleCopyWidthRef.current = singleCopy;
     setOverflows(singleCopy > scroller.clientWidth + 1);
-    setMarqueeEligible(singleCopy > scroller.clientWidth + TRACK_GAP_PX);
   }, []);
 
   useEffect(() => {
@@ -330,26 +371,108 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
 
   // ---- 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`): STATE,
-  // not a pause reason — it gates the engine's `active` so the rAF fully
-  // stops while the strip is far off-screen (a paused engine would keep
-  // scheduling frames forever), and because the velocity envelope persists
-  // across engine restarts, scrolling back resumes at cruise speed instantly.
-  const [nearViewport, setNearViewport] = useState(true);
+  // 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 => setNearViewport(entries[0]?.isIntersecting ?? true),
+      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);
+  // Velocity envelope (px/s): the marquee EASES between 0 and autoScrollSpeed
+  // (~250ms time constant) instead of binary stop/start — pause decelerates,
+  // resume accelerates from the current position (GSAP-marquee behavior;
+  // hard cuts read as jank).
+  const speedEnvRef = 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;
+      // Container-level pause (industry-standard marquee behavior): the
+      // marquee freezes whenever a hover-capable pointer is ANYWHERE over the
+      // cards row — content must never move under a pointing cursor. Per-card
+      // activeKey still pauses for keyboard focus (no pointer involved).
+      const paused =
+        (pauseOnHover && (hoverPointerRef.current.inside || activeKeyRef.current !== null)) ||
+        !nearViewportRef.current ||
+        document.visibilityState === 'hidden' ||
+        now < Math.max(chevronSuppressUntilRef.current, userScrollSuppressUntilRef.current);
+      // Ease the marquee velocity toward its target (0 when paused) — smooth
+      // decel on hover, smooth accel on leave, always from the CURRENT position.
+      const targetSpeed = paused ? 0 : autoScrollSpeed;
+      speedEnvRef.current += (targetSpeed - speedEnvRef.current) * Math.min(1, dt / 0.25);
+      if (targetSpeed === 0 && speedEnvRef.current < 0.5) speedEnvRef.current = 0;
+
+      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 (speedEnvRef.current > 0) {
+        // 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 + speedEnvRef.current * dt);
+        scroller.scrollLeft = marqueePosRef.current;
+      } else {
+        marqueePosRef.current = scroller.scrollLeft;
+      }
+      // Track moved under a possibly-stationary pointer → re-resolve which
+      // card is hovered (declared below; stable useCallback identity, called
+      // lazily per frame so source order is irrelevant — deliberately NOT a
+      // dep, same as the activeKeyRef read above).
+      syncHoverIfScrolled();
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- syncHoverIfScrolled is identity-stable
+  }, [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`
@@ -439,54 +562,6 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     syncHoverToPointer();
   }, [syncHoverToPointer]);
 
-  // ---- marquee rAF engine (shared core) ---------------------------------------
-  // Position/envelope/wrap/glide live in `useMarqueeEngine` — THE marquee
-  // animation, shared with <MarqueeWall> (quick-action walls, chip marquees).
-  // CardsStrip contributes the scroller driver (apply/readBack on scrollLeft:
-  // the user can also drag this surface) and its pause-reason set: container-
-  // level hover (industry-standard — content must never move under a pointing
-  // cursor; per-card activeKey still pauses for keyboard focus), hidden tab,
-  // and the chevron / user-scroll suppress windows. Chevron GLIDE
-  // runs through the engine too: 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.
-  // Seam-warp BUFFER: the re-center zones sit this far inside the physical
-  // track edges. An exact-edge check (`scrollLeft <= 0`) is racy against the
-  // engine — the rAF nudges the scroller off 0 before the scroll handler
-  // samples it, so a user scrolling left "sticks" 1–2px from the edge and
-  // the loop never wraps. The engine's wrap range is aligned to
-  // [buffer, buffer + copy) so engine-written positions can never enter a
-  // zone and ping-pong with the handler. The buffer is ALSO capped by the
-  // physical slack (copy − viewport − gap): the range's upper end
-  // buffer + copy must stay reachable below maxScroll = 2·copy − gap −
-  // viewport, or a barely-overflowing strip clamps at the track end and the
-  // wrap threshold is never crossed — a permanently frozen marquee.
-  const seamBuffer = useCallback(() => {
-    const half = singleCopyWidthRef.current;
-    const viewport = scrollerRef.current?.clientWidth ?? 0;
-    return Math.max(0, Math.min(200, half / 4, half - viewport - TRACK_GAP_PX - 1));
-  }, []);
-
-  const { posRef: marqueePosRef, glideBy } = useMarqueeEngine({
-    // Viewport gates `active` (the rAF fully stops off-screen — a paused
-    // engine would keep scheduling frames forever), same treatment as
-    // <MarqueeWall>; the envelope persists, so re-entry resumes at cruise.
-    active: marqueeActive && nearViewport,
-    speed: autoScrollSpeed,
-    isPaused: now =>
-      (pauseOnHover && (hoverPointerRef.current.inside || activeKeyRef.current !== null)) ||
-      document.visibilityState === 'hidden' ||
-      now < Math.max(chevronSuppressUntilRef.current, userScrollSuppressUntilRef.current),
-    getWrapSize: () => singleCopyWidthRef.current,
-    getWrapMin: seamBuffer,
-    apply: pos => {
-      const scroller = scrollerRef.current;
-      if (scroller) scroller.scrollLeft = pos;
-    },
-    readBack: () => scrollerRef.current?.scrollLeft ?? 0,
-    onAfterFrame: syncHoverIfScrolled,
-  });
-
   // ---- 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
@@ -553,12 +628,12 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     if (marqueeActiveRef.current) {
       // Wrap-aware glide via the rAF engine (see engine comment) — clicks
       // accumulate distance instead of racing browser smooth-scroll targets.
-      glideBy(dir * step);
+      glideRemainingRef.current += dir * step;
     } else {
       // No clones/seam without the marquee — native smooth scroll is safe.
       scroller.scrollBy({ left: dir * step, behavior: 'smooth' });
     }
-  }, [glideBy]);
+  }, []);
 
   const onUserScrollIntent = useCallback(() => {
     userScrollSuppressUntilRef.current = performance.now() + USER_SCROLL_SUPPRESS_MS;
@@ -573,18 +648,13 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     if (e.pointerType === 'touch') onUserScrollIntent();
   }, [onUserScrollIntent]);
 
-  // Never-ending strip: re-center 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. ZONES, not exact edges:
-  // below `buffer` warp forward (+half, lands under half+buffer — outside
-  // the other zone, so the pair is hysteresis-stable), at/above
-  // half+buffer warp back (−half, lands at ≥buffer). The user can never
-  // reach a physical edge in either direction, and the racy "observe
-  // exactly 0" check that stuck leftward scrolling is gone. Initial rest at
-  // 0 warps once to `half` — pixel-identical, and it buys leftward headroom
-  // immediately.
+  // 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(() => {
@@ -597,18 +667,18 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     if (!marqueeActiveRef.current) return;
     const half = singleCopyWidthRef.current;
     if (half <= 0) return;
-    const buffer = seamBuffer();
     let sl = scroller.scrollLeft;
-    if (sl >= half + buffer) {
+    if (sl >= half) {
       sl -= half;
       scroller.scrollLeft = sl;
       marqueePosRef.current = sl;
-    } else if (sl < buffer) {
+    } else if (sl <= 0 && lastScrollLeftRef.current > 0.5) {
       sl += half;
       scroller.scrollLeft = sl;
       marqueePosRef.current = sl;
     }
-  }, [syncHoverIfScrolled, seamBuffer]);
+    lastScrollLeftRef.current = sl;
+  }, [syncHoverIfScrolled]);
 
   // ---- render ----------------------------------------------------------------
 

package/src/components/ui/index.ts

@@ -172,7 +172,6 @@ export * from './ticket-detail-section'
 export * from './ticket-attachments-list'
 export * from './ticket-note-card'
 export * from './ticket-notes-section'
-export * from './marquee-wall'
 export * from './simple-markdown-renderer'
 export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
 export * from './filter-pill-row'

package/src/hooks/ui/index.ts

@@ -7,13 +7,11 @@ export * from './use-header-height'
 export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'
 export * from './use-local-storage'
-export * from './use-marquee-engine'
 export * from './use-media-query'
 export * from './use-memoized-callback'
 export * from './use-notification-permission'
 export * from './use-onboarding-state'
 export * from './use-search'
-export * from './use-suppress-clone-focus'
 export * from './use-table-pagination'
 export * from './use-throttle'
 export * from './use-window-size'