useMergeSplitBlocks

1"use client";
2 
3import { useEffect, useLayoutEffect, useRef, useState } from "react";
4import { AnimatePresence, motion } from "framer-motion";
5import { spring } from "@/lib/springs";
6import type { ItemRect } from "@/hooks/use-proximity-hover";
7 
8// Run the layout effect on the client (where it must fire before paint, so a
9// merge/split shows on the first frame) and a no-op-safe useEffect on the server.
10const useIsoLayoutEffect =
11  typeof window !== "undefined" ? useLayoutEffect : useEffect;
12 
13// Edge spring for the selected-bg merge/split: spring.moderate (critically
14// damped) so converging edges meet exactly instead of overshooting. On a merge
15// the inner corners trail by `cornerDelay`, staying rounded until the halves meet.
16const mergeSpring = spring.moderate;
17const cornerDelay = 0.07;
18// A boundary resolves after its motion finishes (merge → swap to one block;
19// split → drop), driven by a duration timer rather than onAnimationComplete —
20// framer skips that callback when an animation's target equals its current value
21// (which spam-toggling produces), which would otherwise strand a half. The
22// buffer biases late, by which point the halves have met/parted, so it's unseen.
23const convergeMs = (mergeSpring.duration + cornerDelay) * 1000 + 80;
24const splitMs = mergeSpring.duration * 1000 + 80;
25 
26// A selected-background block for one render. A run is normally one block; mid
27// merge/split it is drawn as two abutting halves with sharp inner corners.
28type Rect = { top: number; left: number; width: number; height: number };
29export interface SelBlock extends Rect {
30  key: string;
31  radii: [number, number, number, number]; // tl, tr, br, bl
32  instant: boolean; // skip the spring (the zero-shift swap, the split snap-in)
33  exitInstant: boolean; // drop without the fade (absorbed half at the swap)
34  delayCorners: boolean; // trail the corner straightening (merge converge)
35  cornerDelay?: number; // optional per-block delay override
36  opacity?: number; // override the hover-derived opacity (commit ghost = 0)
37  // State a fresh block animates *from* on mount, so it springs into place
38  // instead of snapping when continuity is lost (fast toggling) or the block is
39  // inherently new (a split's lower half). Continuous blocks ignore it.
40  enterFrom?: { top: number; height: number; radii: [number, number, number, number] };
41}
42 
43// A contiguous run of selected/checked rows, with a stable id so framer-motion
44// can morph it across renders rather than exit+re-enter.
45// … truncated