Component Widgets

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Heat-sink via viewer</title>
<style>html,body{margin:0;background:transparent}adom-heatsink-via{display:block}.msg{padding:22px;color:#8b97ac;font:13px/1.6 ui-monospace,monospace}</style></head>
<body>
<!-- Embeddable heat-sink-via viewer. ?part=<mpn>&api=<reef base> (pads) · ?src=<json> · postMessage {type:'heatsink',data} · ?theme= -->
<adom-heatsink-via id="w"></adom-heatsink-via>
<div class="msg" id="msg" hidden></div>
<script src="heatsink-via-widget.js"></script>
<script>
const w=document.getElementById('w'), msg=document.getElementById('msg'), P=new URLSearchParams(location.search);
const REEF=(P.get('api')||'').replace(/\/$/,'');
const show=t=>{msg.hidden=false; msg.textContent=t;};
async function loadPart(key){
  if(!REEF) return show('?part= needs a data source: pass &api=<reef base>, or use ?src=<json-url>');
  try{
    const d=await (await fetch(REEF+'/reef/page/'+encodeURIComponent(key))).json();
    if(!d.resolved) return show('no match for '+key);
    const v=d.variants[d.primary||0], pkgKey=(v.packageOptions[0]||{}).package_key, pkgClass=(v.packageOptions[0]||{}).package_class||'';
    const pk=await (await fetch(REEF+'/api/package/'+encodeURIComponent(pkgKey))).json();
    w.data={ mpn:v.name, package:pk.package_key||pkgClass, pads:Array.isArray(pk.pads)?pk.pads:[] };
  }catch(e){ show('error: '+e); }
}
async function loadSrc(url){ try{ w.data=await (await fetch(url)).json(); }catch(e){ show('error: '+e); } }
if(P.get('theme')) w.setAttribute('theme', P.get('theme'));
if(P.get('part')) loadPart(P.get('part'));
else if(P.get('src')) loadSrc(P.get('src'));
else show('pass ?src=<json-url> (or ?part=<mpn>&api=<reef base>), or postMessage {type:"heatsink", data:{…}}');
addEventListener('message', e=>{ const m=e.data||{}; if(m.type==='heatsink' && m.data){ msg.hidden=true; w.data=m.data; } });
function ph(){ try{ parent.postMessage({type:'readme-height', height:Math.max(120,Math.min(16000,document.body.scrollHeight||200))}, '*'); }catch(_){} }
addEventListener('load',ph); setTimeout(ph,300); if('ResizeObserver' in window) new ResizeObserver(ph).observe(document.body);
</script>
</body></html>