const $=n=>'$'+n.toLocaleString('en-US'),Σ=a=>a.reduce((s,v)=>s+v,0); const BILL=[['Database',700],['API',200],['Function',100]],T=Σ(BILL.map(b=>b[1])); const MG=[700,750,800,850,900,1000],FA=MG,FF=[1100,1200,1300],CU=[300,200,100,100,80,60,60,40,30,30]; const SV=[['Rightsize Database',100],['Commit API',40],['Remove idle Function',10]],S=Σ(SV.map(b=>b[1])); // console.assert(T===1000,'bill');console.assert(Σ(CU)===1000,'customers');console.assert(S===150,'savings');console.assert(T-S===850,'optimized'); // check: the fan starts at the receipt edge on the total line (side by side) or below its torn bottom edge (stacked) // check: five chevrons land on their own tab; no line crosses the board; one arrow strong (the selected tab); no gold on arrows // check: APPROVED EXCEPTION (user request): the selected arrow loops a slow dash flow (CSS only, >0.3s); all other motion <=0.3s; reduced motion turns both off // const I=(d,w)=>``; const sw=c=>``; const R=(x,y,w,h,hi)=>``; const C=b=>``; const P=(a,o)=>a.map((v,i)=>`${30+67.5*(i+o)},${190-v*.13}`).join(' '),Y=v=>190-v*.13; const CH={ eng:()=>`

${BILL.map(([n,v],i)=>`

${n}${$(v)}

`).join('')}

`, mg:()=>C(MG.map((v,i)=>R(22+100*i,190-v*.15,56,v*.15,i==5)).join('')+''), fi:()=>C(``), bz:()=>C(CU.map((v,i)=>R(10+60*i,190-v/2,40,v/2,i==0)).join('')), fo:()=>`

${BILL.map(([n,v],i)=>{const s=SV[i][1];return `

${n}−${$(s)}

`}).join('')}

`}; const D={ engineering:{n:'Engineering',q:'Cost drivers',a:['Database','$700'],b:['Solution cost','$1,000'],c:'eng',l:'',s:'Engineering: cost drivers. Database $700 of a $1,000 solution. API $200, Function $100.',i:I('M4 17l6-5-6-5m8 10h6',2)}, management:{n:'Management',q:'Budget status',a:['Monthly spend','$1,000'],b:['Budget used','91%'],c:'mg',l:`6 months${sw('bd')}budget $1,100`,s:'Management: budget status. Monthly spend $1,000, 91% of the $1,100 budget.',i:I('M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm8 0l2 2 4-4',1.8)}, finance:{n:'Finance',q:'Spend forecast',a:['Next month','$1,100'],b:['Annual run-rate','$12,000'],c:'fi',l:`${sw('ln')}actual${sw('ln fc')}forecast`,s:'Finance: spend forecast. Forecast $1,100 next month, annual run-rate $12,000.',i:I('M18 20V10M12 20V4M6 20v-6',2)}, business:{n:'Business',q:'Unit economics',a:['Per order','$2'],b:['Per customer','$100'],c:'bz',l:'acme $30010 customers',s:'Business: unit economics. $2 per order, $100 per customer. Largest customer acme costs $300.',i:''}, finops:{n:'FinOps',q:'Optimization potential',a:['Savings potential','$150'],b:['Optimized bill','$850'],c:'fo',l:`${sw('ln')}optimized ${$(T-S)}${sw('bd')}potential ${$(S)}`,s:'FinOps: optimization potential. Savings potential $150, optimized bill $850. Rightsize Database −$100, commit API −$40, remove idle Function −$10.',i:''}}; const K=Object.keys(D),live=new WeakMap(); export function mount(node,ctx){ const root=node.classList?.contains('wrapper')?node:node.querySelector('.wrapper')||node; live.get(root)?.(); const ac=new AbortController(),{signal}=ac,$$=id=>root.querySelector('#'+id),RM=matchMedia('(prefers-reduced-motion: reduce)'),tabs=$$('tabs'),c=$$('c'); const fan=$$('fan'),ro=new ResizeObserver(()=>measure()); let cur=K[0]; tabs.innerHTML=K.map(k=>``).join(''); function render(k){ const d=D[k]; c.innerHTML=`

${d.n}

${d.q}

${d.a[0]}

${d.a[1]}

${d.b[0]}

${d.b[1]}

${CH[d.c]()}

${d.l}

`; c.querySelectorAll('[data-w]').forEach(e=>e.style.setProperty('--w',e.dataset.w+'%')); $$('board').setAttribute('aria-labelledby','tab-'+k); K.forEach((j,i)=>{const b=$$('tab-'+j),on=j==k;b.setAttribute('aria-selected',on);b.tabIndex=on?0:-1;fan.children[i].classList.toggle('on',on)}); } // fan: one path + chevron per tab, from the real positions of the total and the tabs (px = user units: viewBox matches the box) function measure(){ const R=root.getBoundingClientRect(),W=R.width,H=R.height,r=6,f=n=>+n.toFixed(1); if(!W)return; const B=q=>({l:q.left-R.left,r:q.right-R.left,t:q.y-R.y,b:q.bottom-R.y,x:(q.left+q.right)/2-R.left}),g=document.createRange(); g.selectNodeContents(root.querySelector('.tv')); const T=B(g.getBoundingClientRect()),P=B(root.querySelector('.rc').getBoundingClientRect()),X=K.map(j=>{const b=$$('tab-'+j),i=b.querySelector('.ti'),l=i.getClientRects().length?i:b.querySelector('.tl');return[B(b.getBoundingClientRect()),B(l.getBoundingClientRect())]}); const side=X[0][0].l>T.r,ox=side?P.r+4:P.x,oy=side?(T.t+T.b)/2:P.b+12,st=Math.min(6,(X[0][0].t-12)/4); fan.setAttribute('viewBox',`0 0 ${f(W)} ${f(H)}`); X.forEach(([b,l],i)=>{ const tx=f(b.x),ty=f(l.t-3),xr=ox+14+(4-i)*10,ly=4+(4-i)*st,k=(ty-oy)/2; const d=side?`M${f(ox)} ${f(oy)}H${f(xr-r)}Q${f(xr)} ${f(oy)} ${f(xr)} ${f(oy-r)}V${f(ly+r)}Q${f(xr)} ${f(ly)} ${f(xr+r)} ${f(ly)}H${tx-r}Q${tx} ${f(ly)} ${tx} ${f(ly+r)}V${ty}` :`M${f(ox)} ${f(oy)}C${f(ox)} ${f(oy+k)} ${tx} ${f(ty-k)} ${tx} ${ty}`; fan.children[i].children[0].setAttribute('d',d); fan.children[i].children[1].setAttribute('d',`M${f(tx-6)} ${f(ty-6)}L${tx} ${ty}L${f(tx+6)} ${f(ty-6)}`); }); } function pick(k,focus){ if(k==cur)return; cur=k;render(k); if(focus)$$('tab-'+k).focus(); $$('live').textContent=D[k].s; if(!RM.matches){c.classList.remove('en');void c.offsetWidth;c.classList.add('en')} } tabs.addEventListener('click',e=>{const b=e.target.closest('[role=tab]');if(b)pick(b.id.slice(4))},{signal}); tabs.addEventListener('keydown',e=>{ const i=K.indexOf(cur),n=K.length,j={ArrowRight:(i+1)%n,ArrowLeft:(i+n-1)%n,Home:0,End:n-1}[e.key]; if(j!==undefined){e.preventDefault();pick(K[j],true)} },{signal}); fan.innerHTML=K.map(()=>'').join(''); render(cur); measure(); fan.classList.add('en'); fan.addEventListener('animationend',e=>{if(e.target==fan)fan.classList.remove('en')},{signal}); [root,root.querySelector('.rc'),...K.map(j=>$$('tab-'+j))].forEach(e=>ro.observe(e)); document.fonts?.ready.then(()=>{if(!signal.aborted)measure()}); // no timers or animation frames: motion is CSS only const stop=()=>{ac.abort();ro.disconnect();if(live.get(root)!==stop)return;fan.replaceChildren();fan.classList.remove('en');c.classList.remove('en');live.delete(root)}; live.set(root,stop); return stop; } // standalone preview: mount once; a host that calls mount() again re-mounts cleanly

Showback Guide

Showback Guide