fix(sections-editor): make CMS hover overlay track scroll, click, and label correctly

[aka-sacci-ccr]

Summary

Fixes several papercuts in the Sections editor (CMS) hover overlay in the site editor. All changes are confined to the injected iframe script (cms-editor-script.ts) plus the editor-side wiring that feeds it labels/kinds (preview.tsx).

Bugs fixed

1. Highlight didn't follow the section on scroll. It used position:fixed with viewport-relative coords recomputed only on mousemove, so scrolling without moving the mouse left the highlight floating in the old spot. Now uses position:absolute with document coordinates (rect + scroll), so the browser scrolls it together with the page natively — no lag. A capture-phase scroll/resize listener covers nested scroll containers.

2. Clicking opened the wrong section. getAllSections() matched every [data-manifest-key] element — including nested islands and framework-injected sections — so the DOM index didn't line up with the decofile sections array the panel indexes into. Confirmed via /.decofile: the editable array runs Header … Footer; deco injects framework sections (SeoV2, Theme, htmx, Analytics, Session, CartAlert) around it that are not in that array. Now scopes to top-level section[data-manifest-key] and skips framework keys via IGNORED_MANIFEST_KEYS.

3. Badge label correctness.

   • Global sections (incl. globals inside async Lazy rendering) show their block name — resolved editor-side since the DOM only carries manifest paths.
   • Normal sections show their full resolve (data-manifest-key).
   • Lazy non-globals show the inner section's manifest key instead of Rendering/Lazy.tsx.

4. Color-coded highlight by kind: global = light purple, variant = green, normal = blue.

Implementation notes

• Labels + kinds are derived from the decofile in preview.tsx (parseSections + getPageVariantSectionsAt) and sent into the iframe via postMessage (cms-editor::set-labels) on every (re)injection — mode switch, page navigation, save-reload — so they track the current page. No useEffect.
• The injected script keeps the click contract ({ sectionIndex, manifestKey }) unchanged; only DOM enumeration/positioning/labeling changed.

Testing

• bun run fmt, bun run lint (0 errors), tsc --noEmit (mesh) all clean.
• Manual verification needed (script is injected into the preview iframe — reload the preview to re-inject): in CMS mode, hover + scroll without moving the mouse (highlight stays glued); click sections after nested/lazy content (opens the correct one); check badge names for globals and colors per kind.

🤖 Generated with Claude Code

---

Summary by cubic

Fixes the CMS hover overlay in the Sections editor so the highlight tracks scroll, clicks open the correct section across runtimes, and labels/colors reflect the section type. Aligns editable sections to the DOM via subsequence matching with per-section key candidates (including Lazy wrapper vs inner and multivariate variant keys), so framework-injected and runtime-specific differences are ignored.

• Bug Fixes
  • Highlight follows scroll via absolute positioning with document coordinates; capture-phase scroll/resize covers nested scrollers.
  • Click mapping aligns the editable sequence to top-level section[data-manifest-key] using subsequence matching and per-section candidate keys (e.g., Lazy wrapper or inner key; multivariate collects each variant’s resolved keys), so indices match the decofile even with interleaved framework sections (TanStack) or wrappers; recomputes from the live DOM to self-heal as content mounts.
  • Labels are accurate: globals show saved block names (incl. inside Lazy); non-global Lazy shows the inner section key; others show the full manifest key. Labels/kinds/keys are provided via cms-editor::set-labels.
  • Color-coded highlight by kind: global (purple), variant (green), normal (blue).

^{Written for commit 8db50b8. Summary will update on new commits.}