feat(gallery): slide-rule unit stops, zoom-safe clicks, and four faces

Clicks compared e.clientX (visual px, scaled by the size toggle's CSS zoom) against layout-px mark coordinates, so at M or L size nearest-mark snapping picked the wrong stop, usually the far end — the dial felt impossible to select. The click handler now divides the zoom out (offsetWidth over rect width), and the widget shows a subtle outline on click focus so it reads as armed for arrow keys.

The printed numerals are now majors with minor ticks at the integer units between them, all selectable: click a numeral, a mark, or between marks, and arrows step one unit instead of one numeral. The spec sheet claimed drag-only input, which was never true; it now names the click and key idioms.

The face rides new --tn-* vars and GW.slideRule gains opts.skin plus setStyle backed by GW.slideRule.STYLES: warm backlit (shipped default), chrome with dark ink, 80s black glass with an LED-red needle, and marantz blue with a pale needle. Card 25 joins the styleChips rig.

1 files changed, 3 insertions, 2 deletions

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 654ffd5..9740c46 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -387,7 +387,7 @@ const INFO={
   limits:'Stepping is sequential — jumping to a far position takes several clicks.',
   origin:'Rotary switches on radios and instruments.',difficulty:'Intuitive.',
   prefer:'The selection should read like hardware, not a menu.'},
-'25':{input:'Drag to slide the cursor. Drag-only — needs a key idiom for Emacs.',
+'25':{input:'Click a numeral, a mark, or between marks for the units; focused, arrows step one unit. Click + keys.',
   solves:'Reading a value against a long calibrated scale.',
   use:'Specialty. Shines where the scale itself carries meaning.',
   limits:'Scale literacy required; poor for quick setting.',
@@ -1146,7 +1146,7 @@ card(C,'24','Rotary selector',
   '<b>pick one of N by position.</b> Printed detents, the pointer names the value. Click to turn; readout shows it.');
 card(C,'25','Slide-rule dial',
   (st,rd)=>GW.slideRule(st,{onChange:(v,t)=>rd(t)}),
-  '<b>value on a printed scale.</b> A lit pointer glides a warm-backlit strip. Click a mark to jump, or focus it and press ←/→ (↑/↓); readout shows it.');
+  '<b>value on a printed scale.</b> A lit pointer glides a warm-backlit strip. Printed numerals are the majors; the units between them carry minor ticks. Click any of them to jump, or focus and press ←/→ (↑/↓) to step a unit; readout shows it. Four faces — warm backlit, chrome, 80s black glass, marantz blue — on the chips below.');
 card(C,'N01','Rocker power switch',
   (st,rd)=>GW.rocker(st,{on:true,onChange:(v,t)=>rd(t)}),
   '<b>hard on / off, lit legend.</b> A master power paddle — the pressed half glows. Click to rock.');
@@ -1606,6 +1606,7 @@ function styleChips(no,STYLES,AXES){
 styleChips('01',GW.slideToggle.STYLES,[['on','on','amber'],['off','off','dark'],['off text','offText','white'],['thumb','thumb','light']]);
 styleChips('R05',GW.filterBank.STYLES,[['panel','panel','silver'],['shape','caps','block'],['color','capColor','black']]);
 styleChips('06',GW.segmented.STYLES,[['accent','accent','amber']]);
+styleChips('25',GW.slideRule.STYLES,[['face','skin','warm']]);
 
 /* final tally pass: setV fires per card during build, but each card is still
    detached at that moment, so the running counts lag by one — recount now */