1 files changed, 172 insertions, 0 deletions
diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js
index 266cdac..d7b66f3 100644
--- a/docs/prototypes/widgets.js
+++ b/docs/prototypes/widgets.js
@@ -1975,6 +1975,178 @@ GW.waveStrip = function (host, opts = {}) {
   return { el, get: () => amp, set };
 };
 
+/* N11 oscilloscope — sampled phosphor trace; set(samples, vpp) with samples in -1..1 */
+GW.scope = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  const el = document.createElement('span'); el.className = 'scope';
+  el.innerHTML = '<span class="grat"></span><svg viewBox="0 0 176 78" preserveAspectRatio="none"><polyline/></svg>';
+  host.appendChild(el);
+  const line = el.querySelector('polyline');
+  let vpp = 0;
+  function set(samples, v) {
+    vpp = v;
+    const n = samples.length;
+    line.setAttribute('points', samples.map((s, i) => `${(i / (n - 1) * 176).toFixed(1)},${(39 + s * 22).toFixed(1)}`).join(' '));
+    onChange(vpp, 'Vpp ' + Math.round(vpp * 100));
+  }
+  return { el, get: () => vpp, set };
+};
+
+/* N12 spectrum / EQ bars — set(values) paints one column per band */
+GW.eqBars = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  const bands = opts.bands || 11, cells = opts.cells || 9;
+  const el = document.createElement('span'); el.className = 'eq';
+  host.appendChild(el);
+  for (let b = 0; b < bands; b++) {
+    const band = document.createElement('span'); band.className = 'band';
+    for (let s = 0; s < cells; s++) band.appendChild(document.createElement('i'));
+    el.appendChild(band);
+  }
+  let vals = [];
+  function set(values) {
+    vals = values;
+    let peak = 0;
+    for (let b = 0; b < bands; b++) {
+      const col = el.children[b].children, val = values[b], lit = Math.round(val * cells);
+      peak = Math.max(peak, val);
+      for (let k = 0; k < cells; k++) {
+        let c = '';
+        if (k < lit) c = (k >= cells - 1 ? 'clip' : k >= cells - 3 ? 'hot' : 'on');
+        col[k].className = c;
+      }
+    }
+    onChange(vals, 'peak ' + Math.round(peak * 100) + '%');
+  }
+  return { el, get: () => vals, set };
+};
+
+/* N13 crossed-needle meter — one drive value, FWD and RFL needles cross */
+GW.crossNeedle = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  let v = opts.value ?? 55;
+  const el = document.createElement('div'); el.className = 'crossm';
+  el.innerHTML = `<div class="face"><div class="arc"></div><div class="nA"></div><div class="nB"></div></div>
+     <div class="lbl"><span>FWD</span><span>RFL</span></div>`;
+  host.appendChild(el);
+  const face = el.querySelector('.face'), nA = el.querySelector('.nA'), nB = el.querySelector('.nB');
+  function set(nv) {
+    v = nv;
+    const fwd = v, rfl = v * 0.68;
+    nA.style.transform = `rotate(${-42 + fwd / 100 * 84}deg)`;
+    nB.style.transform = `rotate(${42 - rfl / 100 * 84}deg)`;
+    onChange(v, 'FWD ' + Math.round(fwd) + ' · RFL ' + Math.round(rfl));
+  }
+  dragDelta(face, () => v, set, { min: 0, max: 100 });
+  set(v);
+  return { el, get: () => v, set };
+};
+
+/* N14 thermometer column — mercury rises with the value */
+GW.thermometer = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  let v = opts.value ?? 58;
+  const el = document.createElement('div'); el.className = 'thermo';
+  el.innerHTML = `<div class="scale"><span>90</span><span>60</span><span>30</span></div>
+     <div class="wrapcol"><div class="tube"><div class="fill"></div></div><div class="bulb"></div></div>`;
+  host.appendChild(el);
+  const fill = el.querySelector('.fill');
+  function set(nv) {
+    v = nv;
+    fill.style.height = v + '%';
+    onChange(v, Math.round(30 + v / 100 * 60) + '°');
+  }
+  dragDelta(el, () => v, set, { min: 0, max: 100 });
+  set(v);
+  return { el, get: () => v, set };
+};
+
+/* N15 bourdon pressure gauge — needle over a printed arc with a redline */
+GW.bourdon = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  let v = opts.value ?? 45;
+  const el = document.createElement('div'); el.className = 'bourdon';
+  el.innerHTML = `<svg viewBox="0 0 82 82"><path d="M14 62 A34 34 0 0 1 68 62" fill="none" stroke="#2c2f32" stroke-width="3"/>
+       <path d="M52 22 A34 34 0 0 1 68 62" fill="none" stroke="#cb6b4d" stroke-width="3"/></svg>
+     <div class="ndl"></div><div class="hub"></div><div class="cap">PSI</div>`;
+  host.appendChild(el);
+  const ndl = el.querySelector('.ndl');
+  function set(nv) {
+    v = nv;
+    ndl.style.transform = `rotate(${-60 + v / 100 * 120}deg)`;
+    onChange(v, Math.round(v / 100 * 160) + ' PSI');
+  }
+  dragDelta(el, () => v, set, { min: 0, max: 100 });
+  set(v);
+  return { el, get: () => v, set };
+};
+
+/* N16 strip-chart recorder — scrolling history, pen rides the newest value;
+   push(v) appends, set(samples, current) replaces the trace (values 0..1) */
+GW.stripChart = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  const n = opts.samples || 60;
+  const hist = Array.from({ length: n }, () => opts.value ?? 0.5);
+  const el = document.createElement('span'); el.className = 'strip';
+  el.innerHTML = '<span class="rule"></span><svg viewBox="0 0 176 62" preserveAspectRatio="none"><polyline/></svg><span class="pen" style="top:31px"></span>';
+  host.appendChild(el);
+  const line = el.querySelector('polyline'), pen = el.querySelector('.pen');
+  const clamp = x => Math.max(0, Math.min(1, x));
+  const yPx = v => 59 - clamp(v) * 56;
+  function paint(current) {
+    line.setAttribute('points', hist.map((v, i) => `${i / (n - 1) * 176},${yPx(v).toFixed(1)}`).join(' '));
+    pen.style.top = yPx(current) + 'px';
+    onChange(current, String(Math.round(clamp(current) * 100)));
+  }
+  function push(v) { hist.push(v); hist.shift(); paint(v); }
+  function set(samples, current) {
+    for (let i = 0; i < n; i++) hist[i] = samples[i] ?? 0.5;
+    paint(current ?? hist[n - 1]);
+  }
+  return { el, get: () => hist[n - 1], push, set };
+};
+
+/* N17 correlation meter — needle rests at 0 and swings ±; drag left/right */
+GW.corrMeter = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  let p = opts.value ?? 58;
+  const el = document.createElement('div'); el.className = 'corr';
+  el.innerHTML = `<div class="face"><div class="arc"></div><div class="zero"></div><div class="ndl"></div></div>
+     <div class="lbl"><span>−1</span><span>0</span><span>+1</span></div>`;
+  host.appendChild(el);
+  const ndl = el.querySelector('.ndl');
+  function set(np) {
+    p = np;
+    const v = (p - 50) / 50;
+    ndl.style.transform = `rotate(${v * 38}deg)`;
+    onChange(v, (v >= 0 ? '+' : '') + v.toFixed(2));
+  }
+  dragX(el, set);
+  set(p);
+  return { el, get: () => p, set };
+};
+
+/* N18 battery-cell gauge — charge as discrete cells, the low end warns */
+GW.battCells = function (host, opts = {}) {
+  const onChange = opts.onChange || noop;
+  const cells = opts.cells || 8, warnAt = opts.warnAt ?? 25;
+  let p = opts.value ?? 62;
+  const el = document.createElement('div'); el.className = 'batt';
+  el.innerHTML = '<div class="cells"></div><span class="nub"></span>';
+  host.appendChild(el);
+  const cc = el.querySelector('.cells');
+  for (let i = 0; i < cells; i++) { const c = document.createElement('span'); c.className = 'cell'; cc.appendChild(c); }
+  function set(np) {
+    p = np;
+    const lit = Math.round(p / 100 * cells);
+    for (let i = 0; i < cells; i++) cc.children[i].className = 'cell' + (i < lit ? ' on' : '') + ((p <= warnAt && i < lit) ? ' warn' : '');
+    onChange(p, Math.round(p) + '%');
+  }
+  dragX(el, set);
+  set(p);
+  return { el, get: () => p, set };
+};
+
 /* ---- widget CSS: injected once, grows as builders move in ---- */
 const GW_CSS = ``;
 function ensureCss() {