Component Widgets

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Molecule viewer</title>
<style>html,body{margin:0;background:transparent}adom-molecule{display:block}.msg{padding:22px;color:#8b97ac;font:13px/1.6 ui-monospace,monospace}</style></head>
<body>
<!-- Embeddable ganged-molecule viewer. ?src=<json> · postMessage {type:'molecule',data} · ?theme= -->
<adom-molecule id="w"></adom-molecule>
<div class="msg" id="msg" hidden></div>
<script src="molecule-widget.js"></script>
<script>
const w=document.getElementById('w'), msg=document.getElementById('msg'), P=new URLSearchParams(location.search);
const show=t=>{msg.hidden=false; msg.textContent=t;};
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('src')) loadSrc(P.get('src'));
else show('pass ?src=<json-url>, or postMessage {type:"molecule", data:{…}}');
addEventListener('message', e=>{ const m=e.data||{}; if(m.type==='molecule' && 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>