Component Widgets

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pinout viewer</title>
<style>
  html,body{margin:0;background:transparent}
  adom-pinout{display:block}
  .msg{padding:22px;color:#8b97ac;font:13px/1.6 ui-monospace,'JetBrains Mono',monospace}
</style></head>
<body>
<!--
  Embeddable per-slot pinout viewer (wiki lbr-slot / modern-LBR pattern).
  Drive it three ways:
    ?part=<mpn|symbolKey>&api=<reef-base>   → fetch <api>/reef/page and render
    ?src=<json-url>         → fetch the pin-data JSON and render
    postMessage {type:'pinout', data:{...}}   → host feeds data directly
  Cross-slot linking:
    posts   {type:'pinout-pinhover', pin}  to the parent on hover
    accepts {type:'pinout-highlight', pin}  from the parent to drive the highlight
  ?theme=light|dark
-->
<adom-pinout id="w"></adom-pinout>
<div class="msg" id="msg" hidden></div>
<script src="pinout-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];
    w.data={ mpn:v.name, package:(v.packageOptions[0]||{}).package_class||'', pins:(v.pinList||[]).map(p=>({number:p.number,name:p.name})) };
  }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:"pinout", data:{…}}');

// cross-slot linking (symbol ↔ footprint ↔ 3D ↔ pinout)
addEventListener('message', e=>{
  const m=e.data||{};
  if(m.type==='pinout' && m.data){ msg.hidden=true; w.data=m.data; }
  else if(m.type==='pinout-highlight' && w.highlight){ w.highlight(m.pin); }
});
w.addEventListener('pinhover', e=>{ try{ parent.postMessage({type:'pinout-pinhover', pin:e.detail?e.detail.number:null}, '*'); }catch(_){} });
// auto-grow the host readme iframe
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>