perf(navigator): SSR the chrome to kill the mount flash on /tutorial-navigator

[jung-thomas]

Problem

On /tutorial-navigator, only the 24-card grid was server-rendered. TutorialNavigator.vue renders the full chrome — hero + search + open filter panel + toolbar — above the grid on mount, shoving the first card down 672px (desktop) / 1434px (mobile). That jump is the flash Tom reported.

#1850 (synchronous mount) and #1688 (UI5 chrome cloak) are both live and don't cover this — the SSR preview only mirrored the grid, never the chrome. Verified on DEV: SSR first-card top 120px → mounted 792px (desktop) / 1554px (mobile).

Fix (option 1a)

• list.html SSRs the same chrome (mirroring the Vue markup + class names) so the grid sits at its final offset from first paint. Toolbar counts computed from browse.json (real totals for crawlers); Topic/Product facet lists render empty (populated at runtime from /build/navigator), Experience/Type are static real values.
• The chrome's layout CSS lived in the component's <style scoped> block (injected only when the island JS runs, after first paint), so it's added to a render-blocking @navigator-chrome region in home.css — loaded on this page and kept loaded post-mount, so the mounted Vue tree (same classes) lands identically. Prefixed under .tutorial-navigator so nothing leaks onto the homepage (which also loads home.css). Empty SSR facet lists reserve the runtime lists' capped height via min-height.

Verification

• RED: the new test/e2e/navigator-no-mount-shift.test.js fails on DEV today — SSR-vs-mounted first-card delta 672px/1434px (tolerance 8px).
• GREEN (local Hugo build): SSR first-card top now 792px desktop / 1554px mobile — exact match to DEV mounted offsets. Screenshots confirm the pre-mount paint is fully styled at both widths (no jump, no flash-of-unstyled).

Caveats / follow-ups (why draft)

1. Mounted zero-shift not yet observed live — the local loop can't mount Vue (no CAP backend / island build in the worktree). It's proven by construction (identical classes + render-blocking CSS) and by the SSR offset matching the measured production mounted offset. The committed e2e is the gate and runs post-DEV-deploy — needs a DEV deploy to flip green.
2. Scoped chrome CSS kept as a byte-identical duplicate in TutorialNavigator.vue rather than deleted. Removing it (the true "relocate", single source of truth) changes the mounted view's CSS source, which can't be verified without a mounted build — should land together with the mounted DEV check. As-is, mounted rendering is unchanged (zero risk).

🤖 Generated with Claude Code