feat(gallery): white-ink default, 85ms base rate, ID badges as anchors

The split-flap's default skin becomes the white ink, listed first in the chip row, with the kit cream one click away. The base flap rate moves to 85ms, and the probe pins both defaults so a drive-by change can't silently flip them.

Every card's ID badge is now a real anchor to its own card, so a click deep-links the URL and a right-click copies it. One shared rule keeps the badge look.

The refactor sweep for extraction-readiness closes out: the flip duration and the ms clamp each live in one place, grid normalization is one helper shared by setText and the silent first paint (which now records itself as the last commanded grid, ending the null fallback), the state declarations sit above everything that references them (the same declared-later shape that caused a load crash earlier in the branch), and a stale two-skin comment caught up with the four skins. Behavior-preserving: all 79 probe checks stay green.

1 files changed, 6 insertions, 5 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index b8e70bc..5db6fab 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -190,6 +190,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 
 /* N20's chips are miniature flap cells: the board colour comes from the rig's
    inline dot; the letter shows the actual ink (skins) or the actual face (fonts) */
+a.no{text-decoration:none;cursor:pointer}
 #card-N20 .wrd{display:none}
 #card-N20 .famchips .fc{width:17px;height:20px;border-radius:4px;position:relative;border:1px solid #4a453c}
 #card-N20 .famchips .fc::before{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:rgba(128,128,128,.35)}
@@ -1237,7 +1238,7 @@ function card(host, no, name, html, note){
   const polTip=meta?(meta.gist||''):'policy not yet classified';
   const c=document.createElement('div'); c.className='card'; c.id='card-'+no;
   c.dataset.cpol=kind||'none';
-  c.innerHTML=`<div class="wname"><span class="no">${no}</span>${name}`+
+  c.innerHTML=`<div class="wname"><a class="no" href="#card-${no}">${no}</a>${name}`+
     `<span class="cpol" data-pol="${kind||'none'}" data-free="${kind?free:''}" title="${polTip.replace(/"/g,'&quot;')}">${kind||'—'}</span>`+
     `<span class="vlamp" data-v="off"></span></div>`+
     `<div class="stagew">${isBuild?'':html}</div><div class="wrd" id="rd-${no}">—</div>`+
@@ -1577,8 +1578,8 @@ card(I,'26','Nixie tube',
   (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',
-  (st)=>GW.splitFlap(st,{rows:3,cells:6,words:['SYSTEM','VOLUME','SIGNAL','RECORD','ONLINE','STEREO','STATUS','FILTER','TUNING','NEEDLE','SWITCH','TOGGLE','DIMMER','CHROME','MODULE','OUTPUT','SCREEN','COPPER','DYNAMO','PISTON','MAGNET','BEACON','RADIAL','BRIDGE'],animate:!reduced}),
-  '<b>flips to the new value.</b> A three-row, six-cell board; every advance sends each row to a different random word from the pool, and each cell runs at its own mechanical rate, so letters and whole words finish at different times. After settling it dwells two seconds, then advances. Click to advance now. Skins: cream-on-black (default), true white ink, the ivory board, or white cards with dark lettering; face in Berkeley Mono or Helvetica. The slider sets the flap rate.');
+  (st)=>GW.splitFlap(st,{rows:3,cells:6,words:['SYSTEM','VOLUME','SIGNAL','RECORD','ONLINE','STEREO','STATUS','FILTER','TUNING','NEEDLE','SWITCH','TOGGLE','DIMMER','CHROME','MODULE','OUTPUT','SCREEN','COPPER','DYNAMO','PISTON','MAGNET','BEACON','RADIAL','BRIDGE'],animate:!reduced,skin:'white'}),
+  '<b>flips to the new value.</b> A three-row, six-cell board; every advance sends each row to a different random word from the pool, and each cell runs at its own mechanical rate, so letters and whole words finish at different times. After settling it dwells two seconds, then advances. Click to advance now. Skins: white ink on black (default), the kit cream, the ivory board, or white cards with dark lettering; face in Berkeley Mono or Helvetica. The slider sets the flap rate.');
 card(I,'N21','Seven-segment display',
   (st,rd)=>GW.sevenSeg(st,{onChange:(v,t)=>rd(t)}),
   '<b>a lit-segment number.</b> Green segments, distinct from the nixie glow. Live countdown; click to add a minute.');
@@ -1828,10 +1829,10 @@ function styleChips(no,STYLES,AXES,PRESETS,defPreset){
   groups.forEach(g=>row.appendChild(g));
   cardEl.querySelector('.opts').appendChild(row);
 }
-styleChips('N20',GW.splitFlap.STYLES,[['skin','skin','dark'],['font','font','mono']]);
+styleChips('N20',GW.splitFlap.STYLES,[['skin','skin','white'],['font','font','mono']]);
 (()=>{const h=$('card-N20').gw,row=document.querySelector('#card-N20 .famchips');if(!h||!row)return;
   const gr=document.createElement('span');gr.className='fgroup';
-  gr.innerHTML='<span class="lab">flap</span><input type="range" min="30" max="160" value="70" style="width:70px;accent-color:var(--gold);vertical-align:middle"><span class="lab fms">70ms</span>';
+  gr.innerHTML='<span class="lab">flap</span><input type="range" min="30" max="160" value="85" style="width:70px;accent-color:var(--gold);vertical-align:middle"><span class="lab fms">85ms</span>';
   const sl=gr.querySelector('input'),ms=gr.querySelector('.fms');
   sl.addEventListener('input',()=>{h.setFlapMs(+sl.value);ms.textContent=sl.value+'ms';});
   row.appendChild(gr);})();