NB - Native Browser Bridge

<!doctype html><meta charset="utf-8"><title>nb verb battery harness</title>
<style>
 body{background:#0d1117;color:#e6edf3;font:16px/1.5 system-ui;margin:0;padding:28px;max-width:900px}
 h1{font-size:20px} section{border:1px solid #21262d;border-radius:8px;padding:14px;margin:12px 0}
 button,input,select{font:inherit;padding:6px 12px;margin:4px;background:#161b22;color:#e6edf3;border:1px solid #30363d;border-radius:6px}
 #hover-menu{display:none;padding:8px;background:#161b22;border:1px solid #2ea043}
 #hover-zone:hover + #hover-menu{display:block}
 .spacer{height:1200px;background:linear-gradient(#0d1117,#161b22)}
 #ctx-target{user-select:none}
</style>
<h1 id="page-title">nb verb battery harness</h1>
<p>Deterministic fixtures for tools/verb-battery.mjs. Every element here is load-bearing for a test.</p>

<section><h2>Click targets</h2>
 <button id="btn-one" onclick="this.textContent='Clicked Once OK'">Click Me Once</button>
 <button id="dbl-btn" ondblclick="this.textContent='Double OK'">Double Click Me</button>
 <button id="ctx-target" oncontextmenu="this.textContent='Context OK';return false">Right Click Me</button>
 <button onclick="document.getElementById('amb-note').textContent='amb-A'">Duplicate</button>
 <button onclick="document.getElementById('amb-note').textContent='amb-B'">Duplicate</button>
 <span id="amb-note"></span>
</section>

<section><h2>Inputs</h2>
 <input id="text-input" placeholder="type here">
 <label for="select-input">Battery Select</label>
 <select id="select-input" aria-label="Battery Select"><option value="">pick</option><option value="alpha">Alpha</option><option value="beta">Beta</option></select>
 <span style="margin-left:18px">Battery Date</span>
 <span id="seg-date" aria-label="Battery Date">
  <span class="seg" id="seg-m" role="spinbutton" tabindex="0" aria-label="month" data-len="2">mm</span>/<span class="seg" id="seg-d" role="spinbutton" tabindex="0" aria-label="day" data-len="2">dd</span>/<span class="seg" id="seg-y" role="spinbutton" tabindex="0" aria-label="year" data-len="4">yyyy</span>
 </span>
 <span id="date-note"></span>
 <input id="date-input" type="date" style="display:none">
 <script>
 // minimal react-aria-style segmented date: each keydown digit appends to the focused segment,
 // focus advances when the segment is full, combined ISO value lands in #date-note.
 (function(){const segs=['seg-m','seg-d','seg-y'].map(i=>document.getElementById(i));const buf={};
  segs.forEach((el,ix)=>{buf[el.id]='';el.addEventListener('keydown',e=>{ if(!/^[0-9]$/.test(e.key)) return;
   buf[el.id]+=e.key; el.textContent=buf[el.id];
   if(buf[el.id].length>=+el.dataset.len && ix<segs.length-1) segs[ix+1].focus();
   if(buf['seg-m'].length===2&&buf['seg-d'].length===2&&buf['seg-y'].length===4)
    document.getElementById('date-note').textContent=buf['seg-y']+'-'+buf['seg-m']+'-'+buf['seg-d'];});});})();
 </script>
 <input id="file-input" type="file">
 <span id="file-note"></span>
 <script>document.getElementById('file-input').addEventListener('change',e=>{document.getElementById('file-note').textContent='file:'+(e.target.files[0]||{}).name})</script>
</section>

<section><h2>Hover</h2>
 <div id="hover-zone">Hover me</div><div id="hover-menu">revealed-by-hover</div>
</section>

<section><h2>Async + dialogs + errors</h2>
 <button id="spawn-late" onclick="setTimeout(()=>{const d=document.createElement('div');d.id='late-el';d.textContent='late-element-arrived';document.body.appendChild(d)},1200)">Spawn Late</button>
 <button id="confirm-btn" onclick="document.getElementById('dlg-note').textContent='confirm:'+window.confirm('battery confirm?')">Open Confirm</button>
 <span id="dlg-note"></span>
 <button id="err-btn" onclick="console.error('battery-console-error');setTimeout(()=>{throw new Error('battery-thrown-error')},0)">Throw Error</button>
 <button id="title-btn" onclick="document.title='battery-title-changed'">Change Title</button>
</section>

<section><h2>Spawn + download + login fixture</h2>
 <a id="blank-link" href="nb.html" target="_blank">Open child window</a><br>
 <a id="download-link" href="sample-download.txt" download="nb-battery-download.txt">Download sample</a>
 <form id="login-form" onsubmit="return false"><input id="lf-user" autocomplete="username" placeholder="user"><input id="lf-pass" type="password" autocomplete="current-password" placeholder="pass"><button type="submit">Sign in</button></form>
</section>

<div class="spacer"></div>
<div id="bottom-marker">bottom-of-page</div>