feat(gallery): rebuild R05 filter bank with three skin axes

The old card was a sketch: eight bare tracks and flat teal arrows floating on the card background. Real slider banks (the Vieltronix filter, the Pioneer SG-9500, the Technics SH-8065, the Zaxcom Oasis) have a faceplate, dual dB rails, dense bands, and caps that read as machined parts.

The rebuilt bank draws twelve bands on a screwed faceplate with tick rails both sides. Skins ship as constructor opts backed by GW.filterBank.STYLES on three independent axes: panel (lab parchment / silver aluminum / studio black), cap shape (tall block fader / short ribbed / chrome T), and cap color (black white-index / red, green, blue, amber stripes / chrome / cream). Shape and color are separate axes so any finish applies to any cap. opts.style picks a native trio. setStyle(axis, name) restyles a live instance with values preserved. The card grows chip groups driving setStyle, the same demo-rig pattern as the slide toggle.

Values shorter than a custom freqs list now pad instead of placing caps at NaN. I filed the Oasis reference alongside the others.

1 files changed, 20 insertions, 1 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 30bf086..0674302 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -1127,7 +1127,7 @@ card(C,'R04','Bakelite fluted knob',
   '<b>the skirted console knob.</b> Scalloped bakelite skirt, glossy dome, amber index over a printed 0-10 scale. Drag up/down to turn. After a vintage console mixer knob.');
 card(C,'R05','Filter slider bank',
   (st,rd)=>GW.filterBank(st,{onChange:(v,t)=>rd(t)}),
-  '<b>a wall of band faders.</b> One slider per band, arrow-head caps on black tracks, dB rail at the side. Drag any cap; readout names band and level. After a variable multi-band filter.');
+  '<b>a wall of band faders.</b> Twelve bands on a screwed faceplate, dB rails both sides. Drag any cap; readout names band and level. Skins split three independent axes — panel (lab parchment after the Vieltronix filter / silver hi-fi after the Pioneer SG-9500 / studio black after the Technics SH-8065), cap shape (tall block fader after the Zaxcom Oasis / short ribbed / chrome T), and cap color (black white-index / red / green / blue / amber stripes / chrome / cream). The chips below mix them freely.');
 card(C,'R06','Chicken-head selector',
   (st,rd)=>GW.chickenHead(st,{index:2,onChange:(i,t)=>rd(t)}),
   '<b>the pointer-lever switch.</b> The tapered bakelite lever IS the indicator — it aims at the engraved position. Click to step through. After a modulator mode switch.');
@@ -1541,6 +1541,25 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
       g.appendChild(b);}
     row.appendChild(g);}
   cardEl.querySelector('.opts').appendChild(row);})();
+
+/* filter-bank style chips: demo rig for GW.filterBank's constructor opts —
+   the named skins live in GW.filterBank.STYLES; chips drive setStyle on the live instance */
+(function(){const h=$('card-R05')?.gw;if(!h)return;
+  const cardEl=h.el.closest('.card');
+  const row=document.createElement('div'); row.className='famchips';
+  const AXES=[['panel','panel','lab'],['shape','caps','block'],['color','capColor','black']];
+  for(const [label,axis,def] of AXES){
+    const g=document.createElement('span'); g.className='fgroup';
+    const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; g.appendChild(lab);
+    const chips=[];
+    for(const [name,o] of Object.entries(GW.filterBank.STYLES[axis])){
+      const b=document.createElement('span'); b.className='fc'+(name===def?' on':'');
+      b.style.background=o.dot; b.title=name; chips.push(b);
+      b.addEventListener('click',()=>{h.setStyle(axis,name);
+        chips.forEach(x=>x.classList.toggle('on',x===b));});
+      g.appendChild(b);}
+    row.appendChild(g);}
+  cardEl.querySelector('.opts').appendChild(row);})();
 </script>
 </body>
 </html>