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.

2 files changed, 75 insertions, 20 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 */
diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js
index d194068..c12e5b7 100644
--- a/docs/prototypes/widgets.js
+++ b/docs/prototypes/widgets.js
@@ -338,37 +338,89 @@ GW.rotarySelector = function (host, opts = {}) {
   return { el: rs, get: () => values[idx], set };
 };
 
-/* 25 slide-rule dial — lit pointer on a printed scale; click a mark or arrow-key */
+/* 25 slide-rule dial — lit pointer on a printed scale. The printed numerals
+   are the majors; the integer units between them get minor ticks and are
+   selectable too. Click a numeral, a mark, or between marks; ←/→ (↑/↓) step
+   one unit. set() takes a stop index; get() returns the value. opts.skin picks
+   a face from GW.slideRule.STYLES (warm backlit / chrome / 80s black glass / marantz blue);
+   setStyle(axis, name) restyles a live instance. */
 GW.slideRule = function (host, opts = {}) {
   const onChange = opts.onChange || noop;
-  const values = opts.values || [4, 6, 8, 10, 12];
+  const majors = opts.values || [4, 6, 8, 10, 12];
   const fmt = opts.fmt || (v => 'pos ' + v);
   const X = [12, 51, 90, 129, 168];
+  /* expand to unit stops: every integer between adjacent numeric majors */
+  const stops = [];
+  majors.forEach((v, i) => {
+    stops.push({ v, x: X[i], major: true });
+    const b = majors[i + 1];
+    if (typeof v === 'number' && typeof b === 'number')
+      for (let u = v + 1; u < b; u++)
+        stops.push({ v: u, x: X[i] + (X[i + 1] - X[i]) * (u - v) / (b - v), major: false });
+  });
   const t = document.createElement('span'); t.className = 'tuner';
   t.tabIndex = 0; t.setAttribute('role', 'slider'); t.setAttribute('aria-label', 'slide-rule value');
-  values.forEach((v, i) => {
-    t.insertAdjacentHTML('beforeend', `<span class="tick" style="left:${X[i]}px"></span><span class="mk" style="left:${X[i]}px">${v}</span>`);
+  const setStyle = (axis, name) => {
+    const o = (GW.slideRule.STYLES[axis] || {})[name];
+    if (!o) return;
+    for (const [k, v] of Object.entries(o.vars)) t.style.setProperty(k, v);
+  };
+  setStyle('skin', opts.skin || 'warm');
+  stops.forEach(s => {
+    t.insertAdjacentHTML('beforeend', s.major
+      ? `<span class="tick" style="left:${s.x}px"></span><span class="mk" style="left:${s.x}px">${s.v}</span>`
+      : `<span class="tick mn" style="left:${s.x}px"></span>`);
   });
   const ndl = document.createElement('span'); ndl.className = 'ndl'; t.appendChild(ndl);
   host.appendChild(t);
   let idx;
   const set = i => {
-    idx = Math.max(0, Math.min(values.length - 1, i));
-    ndl.style.left = X[idx] + 'px';
-    t.querySelectorAll('.mk').forEach((m, j) => m.classList.toggle('on', j === idx));
-    onChange(values[idx], fmt(values[idx]));
+    idx = Math.max(0, Math.min(stops.length - 1, i));
+    ndl.style.left = stops[idx].x + 'px';
+    t.querySelectorAll('.mk').forEach(m => m.classList.toggle('on', +m.textContent === stops[idx].v));
+    onChange(stops[idx].v, fmt(stops[idx].v));
   };
   t.addEventListener('click', e => {
-    const r = t.getBoundingClientRect(), x = e.clientX - r.left;
-    let best = 0, bd = 1e9; X.slice(0, values.length).forEach((tx, j) => { const d = Math.abs(tx - x); if (d < bd) { bd = d; best = j; } });
+    const r = t.getBoundingClientRect();
+    /* rect is visual px but stop coords are layout px — divide the CSS zoom out */
+    const x = (e.clientX - r.left) * (t.offsetWidth / r.width);
+    let best = 0, bd = 1e9; stops.forEach((s, j) => { const d = Math.abs(s.x - x); if (d < bd) { bd = d; best = j; } });
     set(best); t.focus();
   });
   t.addEventListener('keydown', e => {
     if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); set(idx - 1); }
     else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); set(idx + 1); }
   });
-  set(opts.index !== undefined ? opts.index : 2);
-  return { el: t, get: () => values[idx], set };
+  const initV = opts.value !== undefined ? opts.value : majors[opts.index !== undefined ? opts.index : 2];
+  const init = stops.findIndex(s => s.v === initV);
+  set(init < 0 ? 0 : init);
+  return { el: t, get: () => stops[idx].v, set, setStyle };
+};
+/* named faces: dot = swatch color for pickers, vars = --tn-* overrides.
+   warm restates the stylesheet fallbacks so switching back is exact. */
+GW.slideRule.STYLES = {
+  skin: {
+    warm: { dot: 'var(--gold-hi)', vars: {
+      '--tn-bg': 'linear-gradient(180deg,#191510,#0b0908)', '--tn-brd': '#2a251c',
+      '--tn-glow': 'rgba(var(--glow-lo),.12)', '--tn-tick': 'var(--steel)', '--tn-ink': 'var(--steel)',
+      '--tn-on': 'var(--gold-hi)', '--tn-onglow': 'rgba(var(--glow-hi),.6)',
+      '--tn-ndl': 'var(--fail)', '--tn-ndlglow': 'rgba(203,107,77,.85)' } },
+    chrome: { dot: '#dfe6f2', vars: {
+      '--tn-bg': 'linear-gradient(180deg,#e9e9e5,#bcbcb6)', '--tn-brd': '#8e8e88',
+      '--tn-glow': 'rgba(255,255,255,.28)', '--tn-tick': '#3c3a34', '--tn-ink': '#3c3a34',
+      '--tn-on': '#14110e', '--tn-onglow': 'none',
+      '--tn-ndl': 'var(--fail)', '--tn-ndlglow': 'rgba(203,107,77,.45)' } },
+    black: { dot: '#1c1a18', vars: {
+      '--tn-bg': 'linear-gradient(180deg,#17181a,#08090a)', '--tn-brd': '#000',
+      '--tn-glow': 'rgba(255,255,255,.05)', '--tn-tick': '#c8cac8', '--tn-ink': '#c8cac8',
+      '--tn-on': '#f2f4f2', '--tn-onglow': 'rgba(242,244,242,.5)',
+      '--tn-ndl': '#ff3b28', '--tn-ndlglow': 'rgba(255,59,40,.9)' } },
+    blue: { dot: '#8fb4d8', vars: {
+      '--tn-bg': 'linear-gradient(180deg,#0c1520,#070c14)', '--tn-brd': '#1c2c40',
+      '--tn-glow': 'rgba(120,170,230,.16)', '--tn-tick': '#8fb4d8', '--tn-ink': '#8fb4d8',
+      '--tn-on': '#cfe4ff', '--tn-onglow': 'rgba(150,200,255,.7)',
+      '--tn-ndl': '#e8f2ff', '--tn-ndlglow': 'rgba(180,220,255,.9)' } },
+  },
 };
 
 /* N01 rocker power switch — hard on/off, lit legend */
@@ -4087,14 +4139,16 @@ const GW_CSS = `
 
 /* slide-rule tuner dial */
 .tuner{width:180px;height:46px;position:relative;border-radius:6px;overflow:hidden;cursor:pointer;
-  background:linear-gradient(180deg,#191510,#0b0908);border:1px solid #2a251c;
-  box-shadow:inset 0 0 20px rgba(var(--glow-lo),.12),inset 0 1px 0 rgba(255,255,255,.03)}
-.tuner .tick{position:absolute;top:6px;width:1px;height:11px;background:var(--steel);transform:translateX(-50%)}
-.tuner .mk{position:absolute;bottom:8px;transform:translateX(-50%);color:var(--steel);font-size:10px}
-.tuner .mk.on{color:var(--gold-hi);text-shadow:0 0 6px rgba(var(--glow-hi),.6)}
+  background:var(--tn-bg,linear-gradient(180deg,#191510,#0b0908));border:1px solid var(--tn-brd,#2a251c);
+  box-shadow:inset 0 0 20px var(--tn-glow,rgba(var(--glow-lo),.12)),inset 0 1px 0 rgba(255,255,255,.03)}
+.tuner .tick{position:absolute;top:6px;width:1px;height:11px;background:var(--tn-tick,var(--steel));transform:translateX(-50%)}
+.tuner .tick.mn{height:6px;opacity:.5}
+.tuner .mk{position:absolute;bottom:8px;transform:translateX(-50%);color:var(--tn-ink,var(--steel));font-size:10px}
+.tuner .mk.on{color:var(--tn-on,var(--gold-hi));text-shadow:0 0 6px var(--tn-onglow,rgba(var(--glow-hi),.6))}
+.tuner:focus{outline:1px solid rgba(var(--glow-lo),.5);outline-offset:2px}
 .tuner:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
 .tuner .ndl{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:1px;
-  background:var(--fail);box-shadow:0 0 7px rgba(203,107,77,.85);transition:left .25s}
+  background:var(--tn-ndl,var(--fail));box-shadow:0 0 7px var(--tn-ndlglow,rgba(203,107,77,.85));transition:left .25s}
 
 /* nixie tube */
 .nixie{display:inline-flex;gap:5px;cursor:pointer}