fix(ImageTrail): stop the render loop and drop listeners on unmount

public/r/LineSidebar-JS-CSS.json

@@ -13,7 +13,7 @@
 		{
 			"type": "registry:component",
 			"path": "LineSidebar/LineSidebar.jsx",
-			"content": "import { useRef, useState, useCallback, useEffect } from 'react';\nimport './LineSidebar.css';\n\nconst FALLOFF_CURVES = {\n  linear: p => p,\n  smooth: p => p * p * (3 - 2 * p),\n  sharp: p => p * p * p\n};\n\nconst DEFAULT_ITEMS = [\n  'Overview',\n  'Components',\n  'Animations',\n  'Backgrounds',\n  'Showcase',\n  'Playground',\n  'Templates',\n  'Changelog',\n  'Community',\n  'Resources',\n  'Documentation',\n  'Support'\n];\n\nconst LineSidebar = ({\n  items = DEFAULT_ITEMS,\n  accentColor = '#A855F7',\n  textColor = '#c4c4c4',\n  markerColor = '#6c6c6c',\n  showIndex = true,\n  showMarker = true,\n  proximityRadius = 100,\n  maxShift = 30,\n  falloff = 'smooth',\n  markerLength = 60,\n  markerGap = 0,\n  tickScale = 0.5,\n  scaleTick = true,\n  itemGap = 20,\n  fontSize = 1.1,\n  smoothing = 100,\n  defaultActive = null,\n  onItemClick,\n  className = ''\n}) => {\n  const listRef = useRef(null);\n  const itemRefs = useRef([]);\n  const targetsRef = useRef([]);\n  const currentRef = useRef([]);\n  const rafRef = useRef(null);\n  const lastRef = useRef(0);\n  const activeRef = useRef(defaultActive);\n  const smoothingRef = useRef(smoothing);\n  const [activeIndex, setActiveIndex] = useState(defaultActive);\n\n  activeRef.current = activeIndex;\n  smoothingRef.current = smoothing;\n\n  // Single rAF loop that eases every item's --effect toward its target using\n  // frame-rate independent exponential smoothing, so color, shift and scale\n  // all move together without staggering CSS transitions.\n  const runFrame = useCallback(now => {\n    const dt = Math.min((now - lastRef.current) / 1000, 0.05);\n    lastRef.current = now;\n    const tau = Math.max(smoothingRef.current, 1) / 1000;\n    const k = 1 - Math.exp(-dt / tau);\n\n    let moving = false;\n    const items = itemRefs.current;\n    for (let i = 0; i < items.length; i++) {\n      const el = items[i];\n      if (!el) continue;\n      const target = Math.max(targetsRef.current[i] || 0, activeRef.current === i ? 1 : 0);\n      const cur = currentRef.current[i] || 0;\n      const next = cur + (target - cur) * k;\n      const settled = Math.abs(target - next) < 0.0015;\n      const value = settled ? target : next;\n      currentRef.current[i] = value;\n      el.style.setProperty('--effect', value.toFixed(4));\n      if (!settled) moving = true;\n    }\n\n    rafRef.current = moving ? requestAnimationFrame(runFrame) : null;\n  }, []);\n\n  const startLoop = useCallback(() => {\n    if (rafRef.current != null) return;\n    lastRef.current = performance.now();\n    rafRef.current = requestAnimationFrame(runFrame);\n  }, [runFrame]);\n\n  const handlePointerMove = useCallback(\n    e => {\n      const list = listRef.current;\n      if (!list) return;\n      const rect = list.getBoundingClientRect();\n      const pointerY = e.clientY - rect.top;\n      const ease = FALLOFF_CURVES[falloff] ?? FALLOFF_CURVES.linear;\n      const items = itemRefs.current;\n      for (let i = 0; i < items.length; i++) {\n        const el = items[i];\n        if (!el) continue;\n        const center = el.offsetTop + el.offsetHeight / 2;\n        const distance = Math.abs(pointerY - center);\n        targetsRef.current[i] = ease(Math.max(0, 1 - distance / proximityRadius));\n      }\n      startLoop();\n    },\n    [falloff, proximityRadius, startLoop]\n  );\n\n  const handlePointerLeave = useCallback(() => {\n    targetsRef.current = targetsRef.current.map(() => 0);\n    startLoop();\n  }, [startLoop]);\n\n  const handleClick = useCallback(\n    (index, label) => {\n      setActiveIndex(index);\n      onItemClick?.(index, label);\n    },\n    [onItemClick]\n  );\n\n  useEffect(() => {\n    startLoop();\n  }, [activeIndex, startLoop]);\n\n  useEffect(\n    () => () => {\n      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);\n    },\n    []\n  );\n\n  return (\n    <nav\n      className={`line-sidebar${showMarker ? ' line-sidebar--markers' : ''}${scaleTick ? ' line-sidebar--scale-tick' : ''}${className ? ` ${className}` : ''}`}\n      style={{\n        '--accent-color': accentColor,\n        '--text-color': textColor,\n        '--marker-color': markerColor,\n        '--marker-length': `${markerLength}px`,\n        '--marker-gap': `${markerGap}px`,\n        '--tick-scale': tickScale,\n        '--max-shift': `${maxShift}px`,\n        '--item-gap': `${itemGap}px`,\n        '--font-size': `${fontSize}rem`,\n        '--smoothing': `${smoothing}ms`\n      }}\n    >\n      <ul ref={listRef} className=\"line-sidebar__list\" onPointerMove={handlePointerMove} onPointerLeave={handlePointerLeave}>\n        {items.map((label, index) => (\n          <li\n            key={`${label}-${index}`}\n            ref={el => {\n              itemRefs.current[index] = el;\n            }}\n            className=\"line-sidebar__item\"\n            aria-current={activeIndex === index ? 'true' : undefined}\n            onClick={() => handleClick(index, label)}\n          >\n            {showMarker && <span className=\"line-sidebar__marker\" aria-hidden=\"true\" />}\n            <span className=\"line-sidebar__label\">\n              {showIndex && <span className=\"line-sidebar__index\">{String(index + 1).padStart(2, '0')}</span>}\n              <span className=\"line-sidebar__text\">{label}</span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n};\n\nexport default LineSidebar;\n"
+			"content": "import { useRef, useState, useCallback, useEffect } from 'react';\nimport './LineSidebar.css';\n\nconst FALLOFF_CURVES = {\n  linear: p => p,\n  smooth: p => p * p * (3 - 2 * p),\n  sharp: p => p * p * p\n};\n\nconst DEFAULT_ITEMS = [\n  'Overview',\n  'Components',\n  'Animations',\n  'Backgrounds',\n  'Showcase',\n  'Playground',\n  'Templates',\n  'Changelog',\n  'Community',\n  'Resources',\n  'Documentation',\n  'Support'\n];\n\nconst LineSidebar = ({\n  items = DEFAULT_ITEMS,\n  accentColor = '#A855F7',\n  textColor = '#c4c4c4',\n  markerColor = '#6c6c6c',\n  showIndex = true,\n  showMarker = true,\n  proximityRadius = 100,\n  maxShift = 30,\n  falloff = 'smooth',\n  markerLength = 60,\n  markerGap = 0,\n  tickScale = 0.5,\n  scaleTick = true,\n  itemGap = 20,\n  fontSize = 1.1,\n  smoothing = 100,\n  defaultActive = null,\n  onItemClick,\n  className = ''\n}) => {\n  const listRef = useRef(null);\n  const itemRefs = useRef([]);\n  const targetsRef = useRef([]);\n  const currentRef = useRef([]);\n  const rafRef = useRef(null);\n  const lastRef = useRef(0);\n  const activeRef = useRef(defaultActive);\n  const smoothingRef = useRef(smoothing);\n  const [activeIndex, setActiveIndex] = useState(defaultActive);\n\n  activeRef.current = activeIndex;\n  smoothingRef.current = smoothing;\n\n  // Single rAF loop that eases every item's --effect toward its target using\n  // frame-rate independent exponential smoothing, so color, shift and scale\n  // all move together without staggering CSS transitions.\n  const runFrame = useCallback(now => {\n    const dt = Math.min((now - lastRef.current) / 1000, 0.05);\n    lastRef.current = now;\n    const tau = Math.max(smoothingRef.current, 1) / 1000;\n    const k = 1 - Math.exp(-dt / tau);\n\n    let moving = false;\n    const items = itemRefs.current;\n    for (let i = 0; i < items.length; i++) {\n      const el = items[i];\n      if (!el) continue;\n      const target = Math.max(targetsRef.current[i] || 0, activeRef.current === i ? 1 : 0);\n      const cur = currentRef.current[i] || 0;\n      const next = cur + (target - cur) * k;\n      const settled = Math.abs(target - next) < 0.0015;\n      const value = settled ? target : next;\n      currentRef.current[i] = value;\n      el.style.setProperty('--effect', value.toFixed(4));\n      if (!settled) moving = true;\n    }\n\n    rafRef.current = moving ? requestAnimationFrame(runFrame) : null;\n  }, []);\n\n  const startLoop = useCallback(() => {\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    lastRef.current = performance.now();\n    rafRef.current = requestAnimationFrame(runFrame);\n  }, [runFrame]);\n\n  const handlePointerMove = useCallback(\n    e => {\n      const list = listRef.current;\n      if (!list) return;\n      const rect = list.getBoundingClientRect();\n      const pointerY = e.clientY - rect.top;\n      const ease = FALLOFF_CURVES[falloff] ?? FALLOFF_CURVES.linear;\n      const items = itemRefs.current;\n      for (let i = 0; i < items.length; i++) {\n        const el = items[i];\n        if (!el) continue;\n        const center = el.offsetTop + el.offsetHeight / 2;\n        const distance = Math.abs(pointerY - center);\n        targetsRef.current[i] = ease(Math.max(0, 1 - distance / proximityRadius));\n      }\n      startLoop();\n    },\n    [falloff, proximityRadius, startLoop]\n  );\n\n  const handlePointerLeave = useCallback(() => {\n    targetsRef.current = targetsRef.current.map(() => 0);\n    startLoop();\n  }, [startLoop]);\n\n  const handleClick = useCallback(\n    (index, label) => {\n      setActiveIndex(index);\n      onItemClick?.(index, label);\n    },\n    [onItemClick]\n  );\n\n  useEffect(() => {\n    startLoop();\n  }, [activeIndex, startLoop]);\n\n  useEffect(\n    () => () => {\n      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    },\n    []\n  );\n\n  return (\n    <nav\n      className={`line-sidebar${showMarker ? ' line-sidebar--markers' : ''}${scaleTick ? ' line-sidebar--scale-tick' : ''}${className ? ` ${className}` : ''}`}\n      style={{\n        '--accent-color': accentColor,\n        '--text-color': textColor,\n        '--marker-color': markerColor,\n        '--marker-length': `${markerLength}px`,\n        '--marker-gap': `${markerGap}px`,\n        '--tick-scale': tickScale,\n        '--max-shift': `${maxShift}px`,\n        '--item-gap': `${itemGap}px`,\n        '--font-size': `${fontSize}rem`,\n        '--smoothing': `${smoothing}ms`\n      }}\n    >\n      <ul ref={listRef} className=\"line-sidebar__list\" onPointerMove={handlePointerMove} onPointerLeave={handlePointerLeave}>\n        {items.map((label, index) => (\n          <li\n            key={`${label}-${index}`}\n            ref={el => {\n              itemRefs.current[index] = el;\n            }}\n            className=\"line-sidebar__item\"\n            aria-current={activeIndex === index ? 'true' : undefined}\n            onClick={() => handleClick(index, label)}\n          >\n            {showMarker && <span className=\"line-sidebar__marker\" aria-hidden=\"true\" />}\n            <span className=\"line-sidebar__label\">\n              {showIndex && <span className=\"line-sidebar__index\">{String(index + 1).padStart(2, '0')}</span>}\n              <span className=\"line-sidebar__text\">{label}</span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n};\n\nexport default LineSidebar;\n"
 		}
 	],
 	"registryDependencies": [],