Patch 2 fix: #648 Replace inline and direct event listeners with 100% delegated data-action pattern - #657

document.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]');
  // handlers map
});
Verified after #649 merge:

1. `layouts/base.njk` - CLEAN, 0 onclick=
2. `index.njk` (Directory page) - CLEAN, only `data-action="duel-from-card"` which is correct
3. `games.njk` (Arcade page) - CLEAN, only `data-action="launch-invaders"` and `data-action="launch-breaker-arcade"`
4. `build.js` - OUT OF SCOPE, Node build file, runs `execSync("git rev-parse --short HEAD")` safely
5. `ui-bindings.js` itself - 90% CLEAN

Remaining violations after #649 were 2.

What Still Violated #648 Before This PR

Violation 1: `src/_includes/bio.njk` (Profile pages template)
<div class="... copy-email-btn" data-email="{{ email }}">
document.querySelector('.copy-email-btn')?.addEventListener('click', function() {
  copyToClipboard(this.getAttribute('data-email'), this);
});
Direct per-element listener = banned by #648. Should be delegated.

Violation 2: `src/assets/js/ui-bindings.js`
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.floating-xp-trigger').forEach((el) => {
    el.addEventListener('mouseenter', (ev) => createFloatingXP?.(ev));
  });
});
`querySelectorAll` + loop + per-element `addEventListener` = banned by #648. Should be 100% delegated on document.

What Changed In This PR - Full Fix For #648

File 1: `bio.njk` - FIXED
*Before:*
<div class="flex items-center gap-3 group cursor-pointer copy-email-btn" data-email="{{ email }}">
  <span>✉️</span>
  <span>{{ email }}</span>
  <span>Copy</span>
</div>
*After:*
<button data-action="copy-email" data-email="{{ email }}" class="flex items-center gap-3 group cursor-pointer w-full text-left">
  <span>✉️</span>
  <span>{{ email }}</span>
  <span>Copy</span>
</button>
Changes:
- `div` -> `button` for accessibility
- `copy-email-btn` class removed, replaced with `data-action="copy-email"`
- Deleted direct `addEventListener` from inline `<script>` block
- Kept `copyToClipboard()` helper function as global (called by ui-bindings)

File 2: `ui-bindings.js` - FIXED - Final version now 100% delegated
*Changes:*
1. Added `copyToClipboard` to global comment: `/_ global..., copyToClipboard _/`
2. Added delegated handler at top of click listener:
if (btn.dataset.action === 'copy-email') {
  const email = btn.dataset.email;
  if (email && typeof copyToClipboard === 'function') {
    copyToClipboard(email, btn);
  } else if (email && navigator.clipboard) {
    navigator.clipboard.writeText(email);
  }
  return;
}
3. Removed entire `DOMContentLoaded` block with `querySelectorAll` loop
4. Replaced with single delegated mouseover:
document.addEventListener('mouseover', (e) => {
  const el = e.target.closest('[data-action="floating-xp"],.floating-xp-trigger');
  if (el) createFloatingXP?.(e);
});
5. Now file has ONLY 2 listeners on document: `click` and `mouseover` -> passes #648

Final Audit - All Files Clean For #648
File	onclick= count	on* inline	direct addEventListener	data-action pattern	Result
layouts/base.njk	0	0	0	N/A	CLEAN
http://index.njk	0	0	0	duel-from-card	CLEAN
http://bio.njk	0	0	0	copy-email, launch-codebreaker	FIXED in this PR
http://games.njk	0	0	0	launch-invaders, launch-breaker-arcade	CLEAN
http://ui-bindings.js	0	0	0 (only 2 delegated on document)	all handlers	FIXED in this PR
http://build.js / http://site.js / http://users.json	N/A	N/A	N/A	N/A	Out of scope
`grep -r "onclick" src/` -> 0 results
`grep -r "onmouse\|onload\|onerror" src/_includes/` -> 0 results

How to Test

1. `npm run build` should pass
2. Go to Directory page `/` -> hover cards -> Duel button appears -> click -> Dev Duel game launches (delegated)
3. Go to any profile page `/users/xxx/` -> click email -> should show Copied! -> check clipboard
4. Go to `/games/` -> click Launch Space Invaders and Play Code Breaker -> both work
5. Hover any element with `.floating-xp-trigger` -> XP popup appears (delegated mouseover)
6. Console -> no errors

Checklist

- No inline onclick= in any njk
- No per-element addEventListener in njk or http://ui-bindings.js
- All interactions via document-level delegation with data-action
- http://bio.njk copy email still works
- floating-xp hover still works
- Build passes
- Closes #648
-