URL param timing was unreliable with SvelteKit client-side routing.
Now CrossLink calls requestHighlight(id) setting a global variable
before goto(), and highlightFromUrl() reads it after data loads.
Double requestAnimationFrame ensures DOM has rendered after loaded=true.
Falls back to ?highlight= URL param for direct links.
CSS animation was interfering with stagger animation on cards.
Now uses setInterval-based box-shadow pulse with computed primary
color from CSS variables. Pulses glow on/off every 400ms for 2.5s,
then fades out via transition.
Use inline style.animation instead of CSS class to avoid triggering
stagger-children fadeSlideIn re-animation when highlight is removed.
Restores original inline styles on cleanup.
When clicking a CrossLink, the target entity ID is passed as
?highlight=<id> in the URL. The destination page:
1. Shows a semi-transparent dim overlay (z-index: 10)
2. Finds the card with data-entity-id matching the ID
3. Scrolls to it smoothly (block: center)
4. Applies a pulsing primary-color box-shadow animation (z-index: 11)
5. Cleans up overlay + animation after 2 seconds
If the card isn't in DOM yet (data still loading), a MutationObserver
waits up to 5 seconds for it to appear.
Changes:
- New highlight.ts utility with highlightFromUrl(), MutationObserver,
dim overlay management
- Card component accepts entityId prop → data-entity-id attribute
- CrossLink accepts entityId prop → appends ?highlight=<id> to href
- All 9 entity pages: Card elements have entityId, highlightFromUrl()
called after data loads
- CSS: cardHighlight keyframe animation + nav-dim-overlay styles
alexei.dolgolyov