refactor(gallery): extract indicators 18-23, 26 into GW builders

1 files changed, 10 insertions, 43 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 0065645..0e10631 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -1802,26 +1802,25 @@ card(M,'R17','Round CRT scope',
 /* ============ INDICATORS & READOUTS ============ */
 const I=$('indicators');
 card(I,'18','Status lamp',
-  `<span id="lamp18" style="display:inline-flex;gap:9px;align-items:center"><span class="lamp"></span><span class="lamp gold"></span><span class="lamp red"></span><span class="lamp off"></span><span class="lamp busy"></span></span>`,
+  (st,rd)=>GW.statusLamps(st,{onChange:(v,t)=>rd(t)}),
   '<b>one-glance health.</b> Green ok · gold engaged · red fail · dim off · pulsing busy. Click any lamp to cycle its state.');
 card(I,'19','Badge / tag',
-  `<span id="badge19"><span class="badge">TUNNEL</span> <span class="badge red">LOW BATT</span> <span class="badge ghost">2.4G</span></span>`,
+  (st,rd)=>GW.badges(st,{onChange:(v,t)=>rd(t)}),
   '<b>a labelled flag.</b> MUTED, AIRPLANE, a band tag. Click a badge to cycle its variant.');
 card(I,'20','Tabular readout',
-  `<div style="text-align:center"><div class="readout" id="treadout">24:10</div><span class="u">timer</span></div>`,
+  (st,rd)=>GW.tabularReadout(st,{onChange:(v,t)=>rd(t)}),
   '<b>a precise number.</b> Clock, countdown, volume %. Runs a live countdown; click to pause/resume.');
 card(I,'21','Engraved label',
-  `<span class="engrave" id="engrave">outputs<span class="cnt" id="engc">· 3</span></span>`,
+  (st,rd)=>GW.engravedLabel(st,{onChange:(v,t)=>rd(t)}),
   '<b>section divider.</b> The hairline-flanked caps label with a count. Click to bump the count.');
 card(I,'22','Output well',
-  `<div class="owell" id="owell"><div class="ostep"><span class="lamp"></span><span><b>Link</b><span class="ev">wlp170s0 · @Hyatt</span></span></div>
-    <div class="ostep"><span class="lamp gold"></span><span><b>DNS</b><span class="ev">resolving…</span></span></div></div>`,
+  (st,rd)=>GW.outputWell(st,{onChange:(v,t)=>rd(t)}),
   '<b>streaming step log.</b> Lamp-per-step with evidence. Click to stream the next step.');
 card(I,'23','Toast / status line',
-  `<span class="toastw" id="toast">joined @Hyatt_WiFi — saved</span>`,
+  (st,rd)=>GW.toast(st,{onChange:(v,t)=>rd(t)}),
   '<b>transient confirmation.</b> The one-line result after an action. Click to fire the next toast.');
 card(I,'26','Nixie tube',
-  `<span class="nixie" id="nixie"><span class="tube off"><b>0</b></span><span class="tube"><b>8</b></span></span>`,
+  (st,rd)=>GW.nixie(st,{onChange:(v,t)=>rd(t)}),
   '<b>a single warm-glowing numeral.</b> One lit digit per tube, leading zeros dark. Click to increment the count.');
 card(I,'N20','Split-flap display',
   `<span class="flap" id="flap"><span class="flapd"><b>D</b></span><span class="flapd"><b>N</b></span><span class="flapd"><b>S</b></span></span>`,
@@ -1901,35 +1900,7 @@ card(I,'R52','Blinkenlights front panel',
 /* 10-17, N11-N18 extracted to widgets.js (GW.*) — wired at their card records */
 
 /* ============ INDICATOR WIRING ============ */
-/* 18 status lamp */
-(function(){const lst=['lamp','lamp gold','lamp red','lamp off','lamp busy'];const nm=['ok','engaged','fault','off','busy'];
-  $('lamp18').querySelectorAll('.lamp').forEach(l=>{l.style.cursor='pointer';l.onclick=()=>{
-    let i=lst.indexOf(l.className);if(i<0)i=0;i=(i+1)%lst.length;l.className=lst[i];setRd('18',nm[i]);};});})();
-setRd('18','five states');
-/* 19 badge */
-(function(){const bv=['badge','badge red','badge ghost'];
-  $('badge19').querySelectorAll('.badge').forEach(b=>{b.style.cursor='pointer';b.onclick=()=>{
-    let i=bv.indexOf(b.className);if(i<0)i=0;i=(i+1)%bv.length;b.className=bv[i];setRd('19',b.textContent);};});})();
-setRd('19','three variants');
-/* 21 engraved */
-let engN=3;$('engrave').onclick=()=>{engN=engN%9+1;$('engc').textContent='· '+engN;setRd('21','count '+engN);};
-setRd('21','count 3');
-/* 22 output well */
-const owSteps=[['gold','Probe','8.8.8.8 …'],['','Gateway','10.0.0.1 ok'],['','DNS','1.1.1.1 ok'],['red','Retry','timeout']];let owI=0;
-$('owell').onclick=()=>{owI=(owI+1)%owSteps.length;const s=owSteps[owI];const d=document.createElement('div');d.className='ostep';
-  d.innerHTML=`<span class="lamp ${s[0]}"></span><span><b>${s[1]}</b><span class="ev">${s[2]}</span></span>`;
-  $('owell').appendChild(d);while($('owell').children.length>5)$('owell').removeChild($('owell').firstChild);setRd('22','+ '+s[1]);};
-setRd('22','click to stream');
-/* 23 toast */
-const toastMsgs=['link up · 300 Mbps','bt paired — WH-1000XM4','profile switched','joined @Hyatt_WiFi — saved'];let toastN=0;
-$('toast').onclick=()=>{toastN++;$('toast').textContent=toastMsgs[toastN%toastMsgs.length];
-  $('toast').style.opacity='0';requestAnimationFrame(()=>{$('toast').style.transition='opacity .3s';$('toast').style.opacity='1';});setRd('23','fired '+toastN);};
-setRd('23','click to fire');
-/* 26 nixie */
-let nixV=8;
-function setNix(v){nixV=v;const t=$('nixie').children,s=String(v).padStart(2,'0');
-  t[0].classList.toggle('off',v<10);t[0].querySelector('b').textContent=s[0];t[1].querySelector('b').textContent=s[1];setRd('26',s);}
-$('nixie').onclick=()=>setNix((nixV+1)%100);setNix(8);
+/* 18-23, 26 extracted to widgets.js (GW.*) — wired at their card records */
 /* N23 annunciator with alarm lifecycle: raise -> MSTR CAUTION flashes -> ACK steadies -> RESET clears */
 (function(){const st=['acell','acell warn','acell fault'];const nm=['ok','warn','fault'];
   const mc=$('anmc');let acked=false;
@@ -2273,12 +2244,8 @@ function renderSeven(){const mm=String(Math.floor(sevenSecs/60)).padStart(2,'0')
 function tickSeven(){sevenSecs=(sevenSecs-1+3600)%3600;renderSeven();}
 $('seven').onclick=()=>{sevenSecs=(sevenSecs+60)%3600;renderSeven();};
 renderSeven();
-/* tabular timer */
-let tSecs=24*60+10,tRun=true;
-function renderT(){$('treadout').textContent=String(Math.floor(tSecs/60)).padStart(2,'0')+':'+String(tSecs%60).padStart(2,'0');
-  setRd('20',tRun?'running':'paused');}
-function tickT(){if(tRun){tSecs=(tSecs-1+3600)%3600;renderT();}}
-$('treadout').onclick=()=>{tRun=!tRun;renderT();};renderT();
+/* tabular timer: builder owns the countdown; the page keeps the 1s clock */
+function tickT(){$('card-20').gw.tick();}
 /* VFD marquee */
 const vfdMsgs=['ARCHSETUP · NET OK · BT 2 · SND 62%','WIFI @Hyatt · 300 Mbps · VPN UP','BATTERY 84% · DISK 61% · TEMP 47C'];let vfdMi=0,vfdX=176;
 function tickVfd(){const t=$('vfdt');vfdX-=1.1;if(vfdX< -t.offsetWidth)vfdX=176;t.style.left=vfdX+'px';}