1 files changed, 99 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html
new file mode 100644
index 0000000..af2160c
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-2.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — Prototype 2 (sectioned rack)</title>
+<link rel="stylesheet" href="desktop-settings-shared.css">
+</head>
+<body class="ds-stage">
+  <div class="ds-caption">
+    <b>Direction 2 — Sectioned rack.</b> Full-width console keys stacked under
+    engraved section labels, closest to the net/bt panel idiom. Densest and most
+    scannable; every control is one row you read top to bottom.
+  </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="desktop-settings-shared.js"></script>
+<script>
+const body = document.getElementById("body");
+const subview = document.getElementById("subview");
+DS.bindToast(document.getElementById("toast"));
+
+function openWallpaper() {
+  subview.innerHTML = "";
+  subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
+  subview.classList.add("open");
+}
+
+function section(label, nodes) {
+  const wrap = DS.h("div", "ds-col");
+  wrap.appendChild(DS.engrave(label));
+  nodes.forEach((n) => wrap.appendChild(n));
+  return wrap;
+}
+
+// A wallpaper entry row styled like a console key that opens the sub-view.
+function wallpaperRow() {
+  const el = DS.h("div", "ds-key");
+  el.innerHTML =
+    `<span class="ds-lamp off"></span><span class="k-glyph">\u{f021c}</span>` +
+    `<span class="k-name">Wallpaper</span><span class="k-state">manage ›</span>`;
+  el.onclick = openWallpaper;
+  return el;
+}
+
+function render() {
+  body.innerHTML = "";
+  const col = DS.h("div", "ds-col");
+
+  col.appendChild(section("Display", [
+    DS.toggleKey("autodim"),
+    DS.toggleKey("nightlight"),
+    (() => { const w = DS.h("div", "ds-well"); w.appendChild(DS.slider("brightness")); w.appendChild(DS.slider("kbd")); return w; })(),
+  ]));
+
+  col.appendChild(section("Input", [
+    DS.toggleKey("touchpad"),
+    DS.toggleKey("mouse"),
+  ]));
+
+  const powerNodes = [];
+  if (DS.state.laptop) powerNodes.push(DS.toggleKey("airplane"));
+  powerNodes.push(DS.profileSeg());
+  const acts = DS.h("div", "ds-grid2");
+  acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
+  acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
+  powerNodes.push(acts);
+  col.appendChild(section("Power", powerNodes));
+
+  col.appendChild(section("Notifications", [DS.toggleKey("dnd")]));
+
+  const scenes = DS.h("div", "ds-grid4");
+  Object.keys(DS.SCENES).forEach((n) => scenes.appendChild(DS.sceneKey(n)));
+  col.appendChild(section("Scenes", [scenes]));
+
+  col.appendChild(section("Wallpaper", [wallpaperRow()]));
+
+  body.appendChild(col);
+  document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>