Activity component

<div class="scene"><div class="tabs"><span id="tabA">INBOX</span><span id="tabB">DRAFT</span></div><div class="panel" id="panel"><div id="inbox">3 new messages<br><small>switching tabs preserves draft</small></div><div id="draft">draft: <strong id="text">H</strong><i></i></div></div><div class="label" id="note">DRAFT hidden, state kept</div></div>

.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.tabs{display:flex;gap:5px}.tabs span{flex:1;text-align:center;padding:.45em;border:1px solid var(--line);border-radius:6px}.tabs .on{background:var(--accent);color:var(--bg)}.panel{height:61%;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;margin:8px 0;text-align:center}.panel small{color:var(--muted)}#draft{display:none;font-family:ui-monospace,monospace}#draft strong{color:var(--accent)}#draft i{display:inline-block;width:2px;height:1em;background:var(--accent)}.label{text-align:center}

const words=["H","He","Hel","Hell","Hello"];let n=0;function tick(){const show=n%4>=2;document.getElementById("tabA").classList.toggle("on",!show);document.getElementById("tabB").classList.toggle("on",show);document.getElementById("inbox").style.display=show?"none":"block";document.getElementById("draft").style.display=show?"block":"none";if(show)document.getElementById("text").textContent=words[Math.min(Math.floor(n/2),4)];document.getElementById("note").textContent=show?"DRAFT visible, value restored":"DRAFT hidden, state kept";n++}tick();setInterval(tick,800)