[mayberryzane]

Follow-up to #42. When the insertRule patch has been displaced, the resync now sends the replayer only the rules it is missing instead of replacing the whole sheet.

#42 fixed correctness for libraries that insert mid-sheet, but at a cost: any sheet whose rule count changed was deleted and re-sent in full. That also hit libraries that only append (emotion), which the earlier tail re-send handled correctly. And on a page that keeps displacing the patch after we stop repatching, every growing sheet was re-sent in full on each resync tick.

The recorder now keeps, per sheet, the top-level rules the replayer holds, as the live CSSRule objects they were recorded from. Reported inserts and deletes update that list exactly as applyStyleSheetRule applies them (an insert index clamped to the sheet length, an out-of-range delete ignored). CSSOM rule objects keep their identity as rules are inserted around them, so on resync a comparison against sheet.cssRules gives:

• removes for rules the replayer holds that are no longer live (or are out of live order), highest index first
• adds for live rules the replayer lacks, at their live index, lowest first

These are sent as two events, because the replayer applies an event's adds before its removes. A sheet first seen while capture was already broken is still replaced in full, since there is nothing to compare against. Healthy ticks skip a sheet whose count matches, as before.

New tests pin the cost as well as the result: a missed append, a missed mid-sheet insert, a missed delete plus insert, and a patch displaced eight times (past the repatch limit) each send exactly the changed rules, and the sheet rebuilt from the events matches the live one. All four fail against the previous commit.

test/record, test/replay and test/replayer.test.ts pass locally (242 passed, 3 skipped).

🤖 Generated with Claude Code

---

Note

Overview
When the CSSOM insertRule/deleteRule patch is displaced, stylesheet resync no longer wipes and re-sends entire sheets on every tick. The recorder now mirrors what the replayer holds: per-sheet ordered lists of live CSSRule objects, updated on each reported insert/delete the same way applyStyleSheetRule applies them.

On resync, syncReplayerCopy diffs that list against sheet.cssRules—removes stale or out-of-order entries (high index first), then adds missing rules at their live indices (low first), split across two events because adds run before removes. Full replaceReplayerCopy is kept only when a sheet is first seen while capture was already broken.

Tests assert replay fidelity and incremental event cost: missed mid-sheet insert, append-only (emotion-style), missed delete+insert, and repeated patch displacement each emit only the changed rules, not the whole sheet again.

^{Reviewed by Cursor Bugbot for commit 953b285. Bugbot is set up for automated code reviews on this repo. Configure here.}