1 files changed, 311 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-17.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-17.html
new file mode 100644
index 0000000..3372694
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-17.html
@@ -0,0 +1,311 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — Prototype 17 (switches under their presets)</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;
+  }
+  /* one chassis grid: every section on an identical plate, identical gaps */
+  .plate {
+    background:
+      repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 3px),
+      linear-gradient(180deg, #1d1a16, #141210);
+    border: 1px solid #262320;
+    border-radius: 10px;
+    padding: 10px;
+  }
+  .plate .ds-engrave { margin: 0 2px 8px; }
+  .row { display: flex; justify-content: center; align-items: center; gap: 10px; }
+  .vcell { display: flex; flex-direction: column; align-items: center; }
+  .khost { display: flex; justify-content: center; }
+  .tuner-well { display: flex; justify-content: center; margin-top: 8px; }
+
+  .presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
+  .preset {
+    background-image: linear-gradient(180deg, var(--raise), #131110);
+    border: 1px solid #33302b; border-bottom-width: 3px; border-radius: 6px;
+    padding: 4px 1px; text-align: center; cursor: pointer; color: var(--silver);
+    overflow: hidden;
+  }
+  .preset:hover { border-color: var(--gold); color: var(--gold); }
+  .preset .num { font-size: 7.5px; color: var(--dim); display: block; letter-spacing: 0; }
+  .preset .nm { font-size: 8.5px; letter-spacing: 0; display: block; }
+  .preset.cur {
+    border-color: var(--gold); border-bottom-width: 1px; transform: translateY(2px);
+    background-image: linear-gradient(180deg, #2a2618, #1d1a12); color: var(--cream);
+  }
+  .preset.cur .num { color: var(--gold); }
+
+  /* levels + caffeine: slides left, tamed timer right, bat docked on stage */
+  .midgrid { display: flex; gap: 6px; align-items: center; justify-content: center; }
+  .tcell { position: relative; }
+  .bat-oly { position: absolute; top: -2px; right: 0; }
+  .bat-oly svg { width: 52px; height: 67px; }
+
+  /* switch wall: name-on-switch rockers + the airplane lever, one baseline */
+  .wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; justify-items: center; align-items: center; }
+
+  .wprow {
+    display: flex; align-items: center; gap: 8px;
+    background-image: linear-gradient(180deg, var(--raise), #131110);
+    border: 1px solid #33302b; border-radius: 8px;
+    padding: 8px 10px; cursor: pointer; color: var(--silver); font-size: 12px;
+  }
+  .wprow:hover { border-color: var(--gold); color: var(--gold); }
+  .wprow .k-state { margin-left: auto; color: var(--dim); font-size: 10px; }
+</style>
+</head>
+<body class="ds-stage">
+  <div class="ds-caption">
+    <b>Prototype 17 — switches under their presets.</b> The switch wall
+    moves up beside its cause: scenes on top, the switches they program
+    directly beneath, the power slide just below the wall — with a dark
+    knob now. Levels · caffeine follow. Everything else as P16.
+  </div>
+
+  <div class="ds-bar"><span>19:24</span><span class="gear">⚙</span></div>
+
+  <div class="ds-panel" id="panel">
+    <div class="ds-face">
+      <span class="glyph">⚙</span>
+      <span class="title">Settings</span>
+      <span class="sub" id="scene-sub"></span>
+      <span class="x">✕</span>
+    </div>
+    <div id="body"></div>
+    <div class="ds-toast" id="toast"></div>
+    <div class="ds-subview" id="subview"></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;
+const body = document.getElementById("body");
+const subview = document.getElementById("subview");
+DS.bindToast(document.getElementById("toast"));
+
+const SCENES = Object.keys(DS.SCENES);
+const STOPS = ["OFF", "FOCUS", "PRES", "BATT", "NIGHT"];
+const ROCKERS = [
+  ["autodim", "DIM"], ["touchpad", "TPAD"], ["mouse", "MOUSE"],
+  ["nightlight", "NIGHT"], ["dnd", "DND"],
+];
+let booting = true;
+let caffMinutes = 0;
+let caffHold = false;
+let timerHost = null;     // persistent: the timer owns a live countdown
+
+const sceneIdx = () => (DS.state.scene ? SCENES.indexOf(DS.state.scene) + 1 : 0);
+const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };
+
+function openWallpaper() {
+  subview.innerHTML = "";
+  subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
+  subview.classList.add("open");
+}
+
+function sceneOff() {
+  DS.state.scene = null;
+  DS.toast("Scene: off", true);
+  render();
+}
+
+function syncCaffeine(el) {
+  const on = caffHold || caffMinutes > 0;
+  if (!booting && on !== DS.state.caffeine) DS.setToggle("caffeine", el);
+}
+const syncCaffeineSoon = debounce(() => syncCaffeine(timerHost), 450);
+
+function scaleSvg(host, w) {
+  const svg = host.querySelector("svg");
+  const [, , vw, vh] = svg.getAttribute("viewBox").split(" ").map(Number);
+  svg.setAttribute("width", w);
+  svg.setAttribute("height", Math.round(w * vh / vw));
+}
+
+// de-throne the stock timer: steel stop knob, amber index/OFF, one engraving
+function tameTimer(host) {
+  const svg = host.querySelector("svg");
+  const NS = "http://www.w3.org/2000/svg";
+  const defs = document.createElementNS(NS, "defs");
+  defs.innerHTML = `<radialGradient id="p16Steel" cx="38%" cy="32%" r="80%">
+    <stop offset="0" stop-color="#c9c4b8"/><stop offset="1" stop-color="#6e685c"/>
+  </radialGradient>`;
+  svg.insertBefore(defs, svg.firstChild);
+  svg.querySelectorAll('[fill="url(#mtRed)"]').forEach((n) => n.setAttribute("fill", "url(#p16Steel)"));
+  [...svg.querySelectorAll("text")].forEach((t) => {
+    if (t.textContent === "TURN TO START") t.remove();
+    if (t.textContent === "PUSH TO STOP") t.textContent = "WIND · PUSH STOPS";
+    if (t.textContent === "OFF") t.setAttribute("fill", "var(--gold-hi)");
+  });
+  [...svg.querySelectorAll("line")].forEach((l) => {
+    if (l.getAttribute("stroke") === "#e0523a") l.setAttribute("stroke", "var(--gold)");
+  });
+  svg.querySelectorAll('[stroke="#5c150c"]').forEach((n) => n.setAttribute("stroke", "#3c382f"));
+}
+
+function render() {
+  booting = true;
+  body.innerHTML = "";
+  const col = h("div", "ds-col");
+
+  // ---- plate 1: head unit — presets, tuner, power slide -------------------
+  const head = h("div", "plate");
+  head.appendChild(DS.engrave("Scenes"));
+  const pr = h("div", "presets");
+  SCENES.forEach((n, i) => {
+    const k = h("div", "preset" + (DS.state.scene === n ? " cur" : ""));
+    k.innerHTML = `<span class="num">PRESET ${i + 1}</span><span class="nm">${n}</span>`;
+    k.onclick = () => DS.applyScene(n, k);
+    pr.appendChild(k);
+  });
+  head.appendChild(pr);
+
+  const tw = h("div", "tuner-well");
+  DUPRE.slideRule(tw, {
+    values: STOPS,
+    value: STOPS[sceneIdx()],
+    skin: "warm",
+    width: 306,
+    fmt: (v) => v,
+    onChange: (v) => {
+      if (booting) return;
+      if (v === "OFF") sceneOff();
+      else DS.applyScene(SCENES[STOPS.indexOf(v) - 1], tw);
+    },
+  });
+  head.appendChild(tw);
+  col.appendChild(head);
+
+  // ---- plate 2: the switches those presets program, power slide beneath ---
+  const sw = h("div", "plate");
+  sw.appendChild(DS.engrave("Switches · Power"));
+  const wall = h("div", "wall");
+  ROCKERS.forEach(([k, name]) => {
+    const host = h("div", "khost");
+    DUPRE.rocker(host, {
+      on: DS.state[k],
+      onLabel: name,
+      offLabel: "",
+      quiet: true,
+      onChange: (on) => { if (!booting && on !== DS.state[k]) DS.setToggle(k, host); },
+    });
+    wall.appendChild(host);
+  });
+  if (DS.state.laptop) {
+    const host = h("div", "khost");
+    DUPRE.guardedToggle(host, {
+      on: DS.state.airplane,
+      onLabel: "AIR",
+      offLabel: "SAFE",
+      onChange: (on) => { if (!booting && on !== DS.state.airplane) DS.setToggle("airplane", host); },
+    });
+    scaleSvg(host, 64);
+    wall.appendChild(host);
+  }
+  sw.appendChild(wall);
+
+  const pw = h("div", "khost");
+  pw.style.marginTop = "10px";
+  const pIdx = DS.PROFILES.findIndex((p) => p.id === DS.state.powerprofile);
+  DUPRE.slideSelector(pw, {
+    items: ["PERFORMANCE", "BALANCE", "POWER SAVE"],
+    index: pIdx,
+    width: 306,
+    knob: "dark",
+    onChange: (i) => { if (!booting && i !== pIdx) DS.setProfile(DS.PROFILES[i].id, pw); },
+  });
+  sw.appendChild(pw);
+  col.appendChild(sw);
+
+  // ---- plate 2: levels + caffeine -----------------------------------------
+  const lv = h("div", "plate");
+  lv.appendChild(DS.engrave("Levels · Caffeine"));
+  const mid = h("div", "midgrid");
+
+  const scell = h("div", "vcell");
+  const shost = h("div", "khost");
+  const commitLv = debounce((vals) => {
+    const b = Math.max(DS.SLIDERS.brightness.floor, Math.round(vals[0]));
+    const k = Math.round(vals[1]);
+    if (b !== DS.state.brightness) DS.setSlider("brightness", b, scell);
+    if (k !== DS.state.kbd) DS.setSlider("kbd", k, scell);
+  }, 350);
+  DUPRE.thumbSlide(shost, {
+    channels: [
+      { name: "SCREEN", v: DS.state.brightness },
+      { name: "KBD", v: DS.state.kbd },
+    ],
+    onChange: (vals) => { if (!booting) commitLv(vals.slice()); },
+  });
+  scell.appendChild(shost);
+  mid.appendChild(scell);
+
+  const tcell = h("div", "vcell tcell");
+  if (!timerHost) {
+    timerHost = h("div", "khost");
+    DUPRE.timerDial(timerHost, {
+      minutes: caffMinutes,
+      onChange: (min) => {
+        caffMinutes = min;
+        syncCaffeineSoon();
+      },
+    });
+    scaleSvg(timerHost, 158);
+    tameTimer(timerHost);
+    // the bat docks where the winding arrow was
+    const svg = timerHost.querySelector("svg");
+    [...svg.querySelectorAll("path")].find((p) => p.getAttribute("d").startsWith("M 122 14"))?.remove();
+    [...svg.querySelectorAll("polygon")].find((p) => p.getAttribute("points").startsWith("136,26"))?.remove();
+  }
+  tcell.appendChild(timerHost);
+  const batHost = h("div", "bat-oly");
+  DUPRE.batToggle(batHost, {
+    on: !caffHold,
+    onLabel: "TIMED",
+    offLabel: "HOLD",
+    onChange: (on) => {
+      if (booting) return;
+      caffHold = !on;
+      syncCaffeine(batHost);
+    },
+  });
+  tcell.appendChild(batHost);
+  mid.appendChild(tcell);
+  lv.appendChild(mid);
+  col.appendChild(lv);
+
+  // ---- wallpaper ----------------------------------------------------------
+  const wp = h("div", "wprow");
+  wp.innerHTML = `<span>\u{f021c}</span><span>Wallpaper</span><span class="k-state">manage ›</span>`;
+  wp.onclick = openWallpaper;
+  col.appendChild(wp);
+
+  body.appendChild(col);
+  document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
+  booting = false;
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>