useMergeSplit

1"use client";
2 
3import { useEffect, useMemo, useRef } from "react";
4 
5import type { ItemRect } from "@/hooks/use-proximity-hover";
6 
7export interface MergeSplitBlock {
8  key: string;
9  indices: number[];
10  top: number;
11  left: number;
12  width: number;
13  height: number;
14  initialRect?: { top: number; left: number; width: number; height: number };
15}
16 
17export interface MergeSplitChange {
18  index: number;
19  rect: Rect;
20  checked: boolean;
21  key: string;
22}
23 
24export interface MergeSplitResult {
25  blocks: MergeSplitBlock[];
26  change: MergeSplitChange | null;
27}
28 
29interface Rect {
30  top: number;
31  left: number;
32  width: number;
33  height: number;
34}
35 
36interface RunRecord {
37  key: string;
38  indices: number[];
39  rect: Rect;
40}
41 
42function computeRuns(
43  checkedIndices: readonly number[],
44  itemRects: readonly ItemRect[],
45): RunRecord[] {
46  const sorted = [...checkedIndices].toSorted((a, b) => a - b);
47  const groups: number[][] = [];
48  for (const idx of sorted) {
49    const current = groups[groups.length - 1];
50    if (current && idx === current[current.length - 1] + 1) {
51      current.push(idx);
52    } else {
53      groups.push([idx]);
54    }
55  }
56 
57  const runs: RunRecord[] = [];
58  for (const indices of groups) {
59    const first = itemRects[indices[0]];
60    const last = itemRects[indices[indices.length - 1]];
61    // Not measured yet (item just registered, layout pending) — skip this
62    // run for now rather than publish a zeroed rect; it appears once
63    // useProximityHover's own measurement pass settles.
64    if (!first || !last) continue;
65    runs.push({
66      key: `run:${indices[0]}-${indices[indices.length - 1]}`,
67      indices,
68      rect: {
69        top: first.top,
70        left: first.left,
71        width: first.width,
72        height: last.top + last.height - first.top,
73      },
74    });
75  }
76  return runs;
77}
78 
79function claimUniqueKey(preferredKey: string, claimedKeys: Set<string>) {
80  if (!claimedKeys.has(preferredKey)) {
81    claimedKeys.add(preferredKey);
82    return preferredKey;
83  }
84 
85  let suffix = 2;
86  while (claimedKeys.has(`${preferredKey}:${suffix}`)) suffix += 1;
87  const key = `${preferredKey}:${suffix}`;
88  claimedKeys.add(key);
89  return key;
90}
91 
92function reconcile(
93  newRuns: RunRecord[],
94  prevRuns: RunRecord[],
95  originIndex: number | null,
96  itemRects: readonly ItemRect[],
97): MergeSplitBlock[] {
98  const claimedPrimaryKeys = new Set<string>();
99  const outputKeys = new Set<string>();
100 
101  return newRuns.map((run) => {
102    const runIndexSet = new Set(run.indices);
103// … truncated