Add animated selection session bar

[aidenybai]

Summary

• update the React Grab selection highlight to #0485FF
• add a compact animated selection session bar
• support opt-in persistent multi-select with clear and copy actions
• add focused end-to-end coverage for the multi-select flow

Validation

• build
• typecheck
• lint
• formatting
• 60 unit tests
• focused Playwright selection-session test

---

Summary by cubic

Adds a compact, animated selection session bar for managing selections, including opt‑in persistent multi‑select with Clear and Copy actions. Also updates the selection highlight color to #0485FF.

• New Features
  • Session bar shows when the tool is active (default mode), with smooth enter/exit animation.
  • Enable persistent multi‑select via “Multiple”; selections accumulate without holding Shift and display a running count.
  • “Clear” removes the accumulated selection; “Copy” copies it when non‑empty.
  • Integrated into renderer and core selection logic; covered by a focused Playwright test for the multi‑select copy flow.

^{Written for commit 51f2b61. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-storybook	Ready	Preview, Comment	Jul 13, 2026 1:25am
react-grab-website	Ready	Preview, Comment	Jul 13, 2026 1:25am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-grab/cli@533

npm i https://pkg.pr.new/grab@533

npm i https://pkg.pr.new/react-grab@533

commit: 51f2b61

[github-actions]

Performance report — this PR vs base branch

🟢 2 improvements across 72 scenarios.

Scenario	Metric	Base → PR	Verdict
activate-deactivate-dense-animations	Main-thread blocking (long tasks)	1511ms → 621ms (-59%)	🟢 better
heavy-charts-drag-select	Heap growth	5450KB → 165KB (-97%)	🟢 better

_{A metric counts as changed only past per-metric thresholds sized to measured shared-runner variance on identical code: interaction latency ±10% and 16ms (measured in 8ms steps), frame times ±30%, long-task/LoAF sums ±10% and 500ms, memory ±25% and 512KB / 60 nodes; any ms metric with a ≥100ms baseline needs ±30%.}

All 72 scenarios (full numbers)

Scenario	Interaction latency (INP)	Main-thread blocking (long tasks)	Janky frames (LoAF total)	Frame time (p95)	Frame time (worst)	Heap growth	Leaked DOM nodes
activate-deactivate-dense-animations	0.0ms → 0.0ms (0%)	1511ms → 621ms (-59%) 🟢 better	28.4ms → 27.9ms (-1%)	58.4ms → 50.1ms (-14%)	66.7ms → 66.7ms (0%)	0KB → 0KB (0%)	0 → 0 (0%)
activate-large-dom-sparse-animations	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	1KB → 0KB (-100%)	0 → 0 (0%)
activate-with-many-animations	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	0KB → 0KB (0%)	0 → 0 (0%)
arrow-navigation-storm	40.0ms → 40.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	120KB → 120KB (0%)	0 → 0 (0%)
context-menu-arrow-navigation	32.0ms → 32.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	143KB → 146KB (+2%)	1 → 1 (0%)
context-menu-open-close-cycle	48.0ms → 40.0ms (-17%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	152KB → 158KB (+4%)	1 → 1 (0%)
copy-multi-element-batch	56.0ms → 52.0ms (-7%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	269KB → 273KB (+1%)	1 → 4 (+300%)
copy-then-deactivate-stress	56.0ms → 56.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 33.3ms (+98%)	24KB → 24KB (0%)	0 → 0 (0%)
copy-under-saturated-network	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (+1%)	16.8ms → 16.8ms (0%)	294KB → 297KB (+1%)	2 → 2 (0%)
copy-under-saturated-network (sourceResolveMs)	8005ms → 8005ms (0%)	–	–	–	–	–	–
deactivate-with-many-frozen-elements	60.0ms → 56.0ms (-7%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	25.1ms → 25.0ms (0%)	179KB → 171KB (-4%)	0 → 0 (0%)
deep-element-stack-hover	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	64KB → 63KB (-2%)	0 → 0 (0%)
dom-rerender-during-selection	28.0ms → 44.0ms (+57%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (0%)	25.1ms → 16.8ms (-33%)	31KB → 106KB (+242%)	0 → 0 (0%)
drag-commit-massive-grid	1560ms → 1576ms (+1%)	6654ms → 6674ms (0%)	6551ms → 6592ms (+1%)	667ms → 658ms (-1%)	1542ms → 1550ms (+1%)	225KB → 178KB (-21%)	4 → 4 (0%)
drag-freeze-animation-storm	856ms → 856ms (0%)	3112ms → 3335ms (+7%)	3269ms → 3453ms (+6%)	183ms → 183ms (0%)	800ms → 800ms (0%)	254KB → 248KB (-2%)	3 → 0 (-100%)
drag-rapid-zigzag	48.0ms → 64.0ms (+33%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	33.3ms → 33.2ms (0%)	165KB → 175KB (+6%)	0 → 2 (was 0)
drag-selection-sweep	48.0ms → 48.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	33.4ms → 33.3ms (0%)	183KB → 187KB (+2%)	2 → 2 (0%)
drag-sweep-massive-grid	680ms → 680ms (0%)	9959ms → 9767ms (-2%)	9779ms → 9578ms (-2%)	492ms → 408ms (-17%)	775ms → 767ms (-1%)	529KB → 528KB (0%)	4 → 4 (0%)
drag-with-autoscroll	56.0ms → 56.0ms (0%)	0.0ms → 0.0ms (0%)	50.3ms → 51.6ms (+3%)	16.8ms → 16.8ms (0%)	33.4ms → 33.4ms (0%)	295KB → 242KB (-18%)	17 → 16 (-6%)
heavy-all-activate-toggle	0.0ms → 0.0ms (0%)	0.0ms → 50.5ms (was 0)	194ms → 677ms (+250%)	50.1ms → 50.1ms (0%)	66.7ms → 83.3ms (+25%)	137KB → 177KB (+29%)	0 → 0 (0%)
heavy-all-copy-cross-section	136ms → 156ms (+15%)	405ms → 420ms (+4%)	449ms → 455ms (+1%)	83.3ms → 91.7ms (+10%)	100ms → 125ms (+25%)	271KB → 253KB (-7%)	-9 → -9 (0%)
heavy-all-drag-sweep	204ms → 196ms (-4%)	331ms → 317ms (-4%)	364ms → 343ms (-6%)	33.3ms → 33.3ms (0%)	175ms → 175ms (0%)	211KB → 283KB (+34%)	3 → 3 (0%)
heavy-all-scroll-during-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	33.4ms → 33.4ms (0%)	5647KB → 5641KB (0%)	0 → 0 (0%)
heavy-charts-activate-cycle	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 33.3ms (+99%)	33.3ms → 41.7ms (+25%)	43KB → 59KB (+37%)	0 → 0 (0%)
heavy-charts-drag-select	104ms → 104ms (0%)	52.0ms → 52.0ms (0%)	79.6ms → 80.4ms (+1%)	16.8ms → 16.8ms (0%)	66.6ms → 66.7ms (0%)	5450KB → 165KB (-97%) 🟢 better	-6 → 7 (+217%)
heavy-charts-hover-in-selection-mode	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	82KB → 71KB (-13%)	0 → 0 (0%)
heavy-charts-tooltip-sweep-passive	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (+1%)	33.4ms → 16.8ms (-50%)	-46KB → -45KB (+2%)	0 → 0 (0%)
heavy-dashboard-drag-sweep	56.0ms → 56.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	33.4ms → 33.4ms (0%)	290KB → 179KB (-38%)	9 → -4 (-144%)
heavy-dashboard-hover-sweep	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (+1%)	16.8ms → 16.8ms (0%)	116KB → 115KB (-1%)	2 → 2 (0%)
heavy-dashboard-selection-under-rerender	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	99KB → 93KB (-6%)	0 → 0 (0%)
heavy-heatmap-crosshair-passive	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	-30KB → -30KB (0%)	0 → 0 (0%)
heavy-heatmap-hover-in-selection-mode	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	67KB → 87KB (+30%)	0 → 0 (0%)
heavy-table-drag-select-rows	64.0ms → 64.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	33.4ms → 50.0ms (+50%)	139KB → 135KB (-3%)	1 → 2 (+100%)
heavy-table-expand-rows-passive	112ms → 112ms (0%)	675ms → 654ms (-3%)	699ms → 681ms (-3%)	50.1ms → 50.0ms (0%)	83.3ms → 83.3ms (0%)	-932KB → -932KB (0%)	0 → 0 (0%)
heavy-table-filter-typing-passive	204ms → 196ms (-4%)	1447ms → 1457ms (+1%)	1779ms → 1896ms (+7%)	66.7ms → 58.4ms (-13%)	183ms → 183ms (0%)	1863KB → 1905KB (+2%)	1 → 1 (0%)
heavy-table-hover-in-selection-mode	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	63KB → 62KB (-2%)	2 → 2 (0%)
heavy-table-multi-select-copy	68.0ms → 72.0ms (+6%)	0.0ms → 0.0ms (0%)	33.0ms → 35.6ms (+8%)	25.0ms → 25.0ms (0%)	33.4ms → 41.8ms (+25%)	-393KB → -309KB (+21%)	-140 → -140 (0%)
heavy-table-paginate-passive	160ms → 160ms (0%)	1472ms → 1472ms (0%)	1587ms → 1581ms (0%)	83.3ms → 83.3ms (0%)	117ms → 117ms (0%)	-76KB → -82KB (-8%)	0 → 0 (0%)
heavy-table-sort-passive	256ms → 256ms (0%)	2937ms → 2884ms (-2%)	3781ms → 3860ms (+2%)	33.4ms → 33.4ms (0%)	217ms → 217ms (0%)	97KB → 102KB (+5%)	0 → 0 (0%)
heavy-virtual-hover-sweep	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	80KB → 85KB (+6%)	2 → 2 (0%)
heavy-virtual-scroll-during-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	33.3ms → 33.4ms (0%)	221KB → 218KB (-1%)	0 → 0 (0%)
heavy-virtual-scroll-passive	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	-222KB → -225KB (-1%)	0 → 0 (0%)
hover-deep-nested-dom	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	49KB → 71KB (+45%)	0 → 0 (0%)
hover-dense-flat-dom	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (+1%)	16.8ms → 16.8ms (0%)	-11KB → -14KB (-27%)	0 → 0 (0%)
hover-in-selection-mode	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	136KB → 175KB (+29%)	0 → 0 (0%)
hover-over-animated-elements	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	11KB → 11KB (0%)	0 → 0 (0%)
idle-after-activation	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (+1%)	16.8ms → 16.8ms (0%)	130KB → 132KB (+2%)	0 → 0 (0%)
interference-canvas-hover-markers	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	42KB → 46KB (+10%)	0 → 0 (0%)
interference-canvas-paint-passive	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	1KB → 15KB (+1400%)	0 → 0 (0%)
interference-editor-hover-with-swallowed-pointermove	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	35KB → 36KB (+3%)	0 → 0 (0%)
interference-editor-typing-passive	24.0ms → 24.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	23KB → 93KB (+304%)	0 → 0 (0%)
interference-gauntlet-activate-toggle	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	33.3ms → 33.3ms (0%)	33.4ms → 33.3ms (0%)	409KB → 430KB (+5%)	18 → 18 (0%)
interference-gauntlet-drag-sweep	124ms → 120ms (-3%)	192ms → 192ms (0%)	202ms → 200ms (-1%)	33.3ms → 33.3ms (0%)	75.0ms → 83.3ms (+11%)	500KB → 687KB (+37%)	63 → 69 (+10%)
interference-gauntlet-hover-sweep	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	33.3ms → 16.8ms (-50%)	84KB → 79KB (-6%)	0 → 0 (0%)
interference-hijacked-scroll-during-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	97KB → 98KB (+1%)	0 → 0 (0%)
interference-hijacked-scroll-passive	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	72KB → 69KB (-4%)	0 → 0 (0%)
interference-kanban-app-drag-passive	24.0ms → 24.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	180KB → 83KB (-54%)	0 → 0 (0%)
interference-kanban-grab-drag-select	64.0ms → 56.0ms (-12%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	33.4ms → 33.3ms (0%)	142KB → 155KB (+9%)	1 → 2 (+100%)
interference-kanban-hover-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.7ms → 16.8ms (+1%)	16.8ms → 16.8ms (0%)	38KB → 45KB (+18%)	0 → 0 (0%)
interference-raf-mutator-hover	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	-89KB → -91KB (-2%)	0 → 0 (0%)
interference-toast-hover-churn	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	82KB → 85KB (+4%)	0 → 0 (0%)
interference-toast-storm-idle-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	23KB → 24KB (+4%)	0 → 0 (0%)
interference-waapi-freeze-cycle	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	25.0ms → 25.1ms (0%)	51KB → 66KB (+29%)	0 → 0 (0%)
interference-waapi-hover-sweep	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	-93KB → -92KB (+1%)	0 → 0 (0%)
keyboard-rapid-arrows	32.0ms → 40.0ms (+25%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	-33KB → -33KB (0%)	0 → 0 (0%)
large-drag-selection	64.0ms → 56.0ms (-12%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	33.3ms → 33.4ms (0%)	-2KB → 4KB (+300%)	1 → 2 (+100%)
pointermove-storm-synthetic	0.0ms → 0.0ms (0%)	3092ms → 3147ms (+2%)	2966ms → 3029ms (+2%)	117ms → 117ms (0%)	133ms → 133ms (0%)	-69KB → -88KB (-28%)	0 → 0 (0%)
prompt-mode-typing	56.0ms → 40.0ms (-29%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (-1%)	16.8ms → 16.8ms (0%)	633KB → 636KB (0%)	73 → 58 (-21%)
rapid-toggle-active-inactive	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 25.1ms (+49%)	69KB → -175KB (-354%)	0 → 15 (was 0)
scroll-during-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	122KB → 123KB (+1%)	0 → 0 (0%)
toolbar-collapse-expand-cycle	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.8ms (0%)	16.8ms → 16.8ms (0%)	24KB → 25KB (+4%)	0 → 0 (0%)
toolbar-drag-to-edges	36.0ms → 32.0ms (-11%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	16.8ms → 16.7ms (0%)	16.8ms → 16.8ms (0%)	79KB → 80KB (+1%)	0 → 0 (0%)
viewport-resize-during-selection	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	0.0ms → 0.0ms (0%)	33.4ms → 33.4ms (0%)	33.4ms → 33.5ms (0%)	21KB → 21KB (0%)	0 → 0 (0%)

_{Commit 51f2b61 · full reports in the perf-bench-533 artifact.}