1 files changed, 149 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html
new file mode 100644
index 0000000..662e9f6
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-5.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — Prototype 5 (compact expandable rows)</title>
+<link rel="stylesheet" href="desktop-settings-shared.css">
+<style>
+  /* Compact rows: one dense column; rows with depth expand inline. */
+  .crow {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 8px; border-radius: 8px; cursor: pointer;
+    border: 1px solid transparent;
+  }
+  .crow:hover { background: #16191b; }
+  .crow .glyph { color: var(--steel); font-size: 15px; width: 18px; text-align: center; }
+  .crow.on .glyph { color: var(--gold); }
+  .crow .name { color: var(--silver); font-size: 13px; }
+  .crow.on .name { color: var(--cream); }
+  .crow .state { margin-left: auto; color: var(--dim); font-size: 11px; }
+  .crow.on .state { color: var(--gold); }
+  .crow .chev { color: var(--dim); font-size: 12px; margin-left: auto; transition: transform .15s; }
+  .crow.exp .chev { transform: rotate(90deg); color: var(--gold); }
+  .crow.verified { animation: dsVerify 0.9s ease-out; }
+  .reveal { overflow: hidden; max-height: 0; transition: max-height .2s ease; }
+  .reveal.open { max-height: 260px; }
+  .reveal-inner { padding: 6px 6px 10px 36px; }
+  .sep { height: 1px; background: var(--line); margin: 3px 6px; }
+  .inline-slider { padding: 4px 8px 4px 0; }
+</style>
+</head>
+<body class="ds-stage">
+  <div class="ds-caption">
+    <b>Direction 5 — Compact expandable rows.</b> Minimal by default: one slim row
+    per control in a single column. Rows with depth (power, scenes, wallpaper)
+    expand inline — progressive disclosure, the long-press pattern made visible.
+  </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 h = DS.h;
+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 toggleRow(key) {
+  const meta = DS.TOGGLES[key];
+  const on = DS.state[key];
+  const el = h("div", "crow" + (on ? " on" : ""));
+  el.innerHTML =
+    `<span class="ds-lamp ${on ? "gold" : "off"}"></span>` +
+    `<span class="glyph">${meta.glyph}</span>` +
+    `<span class="name">${meta.name}</span>` +
+    `<span class="state">${on ? meta.on : meta.off}</span>`;
+  el.onclick = () => DS.setToggle(key, el);
+  return el;
+}
+
+function sliderRow(key) {
+  const meta = DS.SLIDERS[key];
+  const el = h("div", "crow inline-slider");
+  el.style.cursor = "default";
+  el.appendChild(Object.assign(h("span", "glyph"), { textContent: meta.glyph }));
+  el.appendChild(Object.assign(h("span", "name"), { textContent: meta.name }));
+  const s = DS.slider(key);
+  s.style.flex = "1";
+  // strip the redundant leading glyph/name from the shared slider
+  s.removeChild(s.children[0]); s.removeChild(s.children[0]);
+  el.appendChild(s);
+  return el;
+}
+
+// A row that expands an inline panel (built by contentFn) below it.
+function expandRow(glyph, name, stateText, contentFn) {
+  const wrap = h("div");
+  const row = h("div", "crow");
+  row.innerHTML =
+    `<span class="ds-lamp off"></span><span class="glyph">${glyph}</span>` +
+    `<span class="name">${name}</span><span class="state">${stateText || ""}</span><span class="chev">›</span>`;
+  const rev = h("div", "reveal");
+  const inner = h("div", "reveal-inner");
+  inner.appendChild(contentFn());
+  rev.appendChild(inner);
+  row.onclick = () => { row.classList.toggle("exp"); rev.classList.toggle("open"); };
+  wrap.appendChild(row); wrap.appendChild(rev);
+  return wrap;
+}
+
+function render() {
+  body.innerHTML = "";
+  const col = h("div");
+
+  ["autodim", "nightlight"].forEach((k) => col.appendChild(toggleRow(k)));
+  col.appendChild(sliderRow("brightness"));
+  col.appendChild(sliderRow("kbd"));
+  col.appendChild(h("div", "sep"));
+
+  ["touchpad", "mouse"].forEach((k) => col.appendChild(toggleRow(k)));
+  if (DS.state.laptop) col.appendChild(toggleRow("airplane"));
+  col.appendChild(toggleRow("dnd"));
+  col.appendChild(h("div", "sep"));
+
+  col.appendChild(expandRow("\u{f0241}", "Power profile", DS.state.powerprofile, () => DS.profileSeg()));
+  col.appendChild(expandRow("\u{f0210}", "Scenes", DS.state.scene || "none", () => {
+    const g = h("div", "ds-grid4");
+    Object.keys(DS.SCENES).forEach((n) => g.appendChild(DS.sceneKey(n)));
+    return g;
+  }));
+
+  const wp = h("div", "crow");
+  wp.innerHTML = `<span class="ds-lamp off"></span><span class="glyph">\u{f021c}</span><span class="name">Wallpaper</span><span class="state">manage ›</span>`;
+  wp.onclick = openWallpaper;
+  col.appendChild(wp);
+  col.appendChild(h("div", "sep"));
+
+  const acts = h("div", "ds-grid2");
+  acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
+  acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
+  col.appendChild(acts);
+
+  body.appendChild(col);
+  document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>