1 files changed, 107 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html b/docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html
new file mode 100644
index 0000000..6f2427d
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — levels casting: detent fader + single drum</title>
+<link rel="stylesheet" href="desktop-settings-shared.css">
+<style>
+  :root{
+    --ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
+    --silver:#bfc4d0; --cream:#f3e7c5; --steel:#969385; --dim:#7c838a;
+    --slate:#424f5e; --slate-hi:#54677d; --wash:#2c2f32;
+    --pass:#74932f; --fail:#cb6b4d;
+    --phos:#7fe0a0; --phos-dim:#1c3626; --vfd:#63e6c8;
+    --sevgrn:#57d357; --sevred:#e2543f; --sevoff:#1a1613;
+    --jewel-r:#ff5b45; --jewel-a:#ffb43a; --jewel-g:#6fce33;
+    --gold:#e2a038; --gold-hi:#ffbe54;
+    --amber-grad-top:#f2c76a; --amber-grad-mid:#d29638; --amber-grad-bot:#8f671f;
+    --amber-edge:#7d5c16; --amber-warn:#f0b552;
+    --glow-hi:255,190,84; --glow-lo:226,160,56;
+    --mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
+    --pulse-rate:1s;
+  }
+  .page-cap { width: 100%; text-align: center; color: var(--dim); font-size: 12px; letter-spacing: 0.04em; max-width: 560px; }
+  .page-cap b { color: var(--gold); }
+  .row { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
+  .readout { text-align: center; color: var(--steel); font-size: 11px; letter-spacing: 0.1em; min-height: 15px; }
+  .readout b { color: var(--gold-hi); font-weight: 400; }
+</style>
+</head>
+<body class="ds-stage">
+  <div class="page-cap">
+    <b>Levels casting.</b> Brightness: the new multi-detent slide attenuator —
+    drag slowly across 25 / 50 / 75 and feel the thumb park until you push
+    through (the tick lights while parked). Keyboard: the generalized drum
+    roller running a single drum, 0-10.
+  </div>
+
+  <div class="ds-panel" style="width:320px">
+    <div class="ds-face"><span class="glyph">⚙</span><span class="title">Levels</span></div>
+
+    <div class="ds-engrave">Brightness — detent fader (new)</div>
+    <div class="row" id="fader-well"></div>
+    <div class="readout" id="ro-b"></div>
+
+    <div class="ds-engrave">Keyboard — drum roller ×10 (upgraded)</div>
+    <div class="row" id="drum-well"></div>
+    <div class="readout" id="ro-k"></div>
+
+    <div class="ds-toast" id="toast"></div>
+  </div>
+
+<script src="widgets.js"></script>
+<script src="dupre-kit-additions.js"></script>
+<script src="desktop-settings-shared.js"></script>
+<script>
+const h = DS.h;
+DS.bindToast(document.getElementById("toast"));
+let booting = true;
+
+const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };
+
+function render() {
+  booting = true;
+
+  const fw = document.getElementById("fader-well");
+  fw.innerHTML = "";
+  const roB = document.getElementById("ro-b");
+  const commitB = debounce((v) => {
+    const pct = Math.max(DS.SLIDERS.brightness.floor, v);
+    if (pct !== DS.state.brightness) DS.setSlider("brightness", pct, fw);
+  }, 350);
+  DUPRE.detentFader(fw, {
+    value: DS.state.brightness,
+    detents: [25, 50, 75],
+    onChange: (v, label) => {
+      roB.innerHTML = "brightness: <b>" + v + "%</b>" + (label.includes("detent") ? " · <b>parked</b>" : "");
+      if (!booting) commitB(v);
+    },
+  });
+
+  const dw = document.getElementById("drum-well");
+  dw.innerHTML = "";
+  const roK = document.getElementById("ro-k");
+  const commitK = debounce((vals) => {
+    const pct = Math.round(vals[0]) * 10;
+    if (pct !== DS.state.kbd) DS.setSlider("kbd", pct, dw);
+  }, 350);
+  DUPRE.drumRoller(dw, {
+    title: "KBD BACKLIGHT ×10",
+    channels: [{ name: "KBD", v: Math.round(DS.state.kbd / 10) }],
+    min: 0,
+    max: 10,
+    onChange: (vals) => {
+      roK.innerHTML = "keyboard: <b>" + Math.round(vals[0]) * 10 + "%</b>";
+      if (!booting) commitK(vals);
+    },
+  });
+
+  booting = false;
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>