);
}
// ─── iPod-style Cover Flow with smooth-snap on release ─────
function CoverFlow({ works, idx, onIdx, onOpen }) {
// virtualIdx is the rendered (continuous) position. While dragging it's a
// float; when released it animates (CSS transition) to the snapped target.
const [virtualIdx, setVirtualIdx] = React.useState(idx);
const [isDragging, setDragging] = React.useState(false);
// dragState carries `virt` — the LATEST virtualIdx from the most recent
// pointermove. Reading React state from onUp's closure gave a stale value
// (whatever virtualIdx was at drag start), which is why a long drag-and-
// release used to snap back to the work nearest where the drag began.
const dragStateRef = React.useRef(null);
React.useEffect(() => {
// External idx change — animate to it (transition is on because !isDragging)
if (!isDragging) setVirtualIdx(idx);
}, [idx, isDragging]);
const clamp = (i) => Math.max(0, Math.min(works.length - 1, i));
const onDown = (e) => {
e.preventDefault();
const x = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
dragStateRef.current = {
startX: x, startVirt: virtualIdx,
lastX: x, lastT: performance.now(), vel: 0,
virt: virtualIdx,
};
setDragging(true);
};
const onMove = (e) => {
if (!dragStateRef.current) return;
const x = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
const ds = dragStateRef.current;
const dx = x - ds.startX;
const next = ds.startVirt - dx / 200;
const now = performance.now();
const dt = Math.max(8, now - ds.lastT);
// Velocity in idx-units / second
ds.vel = ((ds.lastX - x) / 200) / (dt / 1000);
ds.lastX = x;
ds.lastT = now;
ds.virt = next; // <— keep the live position in the ref
setVirtualIdx(next);
};
const onUp = () => {
const ds = dragStateRef.current;
if (!ds) return;
// Use the latest dragged-to position from the ref, not React closure.
// This is the actual fix for "drag releases snap back to start".
const liveVirt = ds.virt ?? ds.startVirt;
const projected = liveVirt + ds.vel * 0.18;
const target = clamp(Math.round(projected));
dragStateRef.current = null;
setDragging(false);
setVirtualIdx(target); // CSS transition will smoothly snap
onIdx(target);
};
// Functional update — under fast wheel input multiple events fire before
// React commits state, so reading `idx` from closure gives a stale value
// and successive ticks all snap back to the same starting work. Reading
// `prev` per call accumulates correctly.
const onWheel = (e) => {
e.preventDefault();
const dir = Math.sign(e.deltaY || e.deltaX);
if (!dir) return;
onIdx((prev) => Math.max(0, Math.min(works.length - 1, prev + dir)));
};
React.useEffect(() => {
if (!isDragging) return;
const m = (e) => onMove(e);
const u = () => onUp();
window.addEventListener('mousemove', m);
window.addEventListener('mouseup', u);
window.addEventListener('touchmove', m, { passive: false });
window.addEventListener('touchend', u);
return () => {
window.removeEventListener('mousemove', m);
window.removeEventListener('mouseup', u);
window.removeEventListener('touchmove', m);
window.removeEventListener('touchend', u);
};
}, [isDragging]);
return (