1 files changed, 88 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html
new file mode 100644
index 0000000..e57d13e
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-1.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — Prototype 1 (tile grid)</title>
+<link rel="stylesheet" href="desktop-settings-shared.css">
+</head>
+<body class="ds-stage">
+  <div class="ds-caption">
+    <b>Direction 1 — Tile grid.</b> The quick-settings idiom (Android / GNOME 43):
+    scenes on top, a 2-column tile grid for toggles, sliders and power below.
+    Fast to scan, one tap per control, the wallpaper tile opens a sub-view.
+  </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 render() {
+  body.innerHTML = "";
+  const col = DS.h("div", "ds-col");
+
+  // Scenes strip
+  col.appendChild(DS.engrave("Scenes"));
+  const scenes = DS.h("div", "ds-grid4");
+  Object.keys(DS.SCENES).forEach((n) => scenes.appendChild(DS.sceneKey(n)));
+  col.appendChild(scenes);
+
+  // Toggle tiles
+  col.appendChild(DS.engrave("Toggles"));
+  const grid = DS.h("div", "ds-grid2");
+  ["autodim", "caffeine", "touchpad", "mouse", "nightlight", "dnd"].forEach((k) =>
+    grid.appendChild(DS.toggleTile(k)));
+  if (DS.state.laptop) grid.appendChild(DS.toggleTile("airplane"));
+  col.appendChild(grid);
+
+  // Sliders
+  col.appendChild(DS.engrave("Levels"));
+  const levels = DS.h("div", "ds-well");
+  levels.appendChild(DS.slider("brightness"));
+  levels.appendChild(DS.slider("kbd"));
+  col.appendChild(levels);
+
+  // Power profile
+  col.appendChild(DS.engrave("Power"));
+  col.appendChild(DS.profileSeg());
+
+  // Actions + wallpaper entry
+  col.appendChild(DS.engrave("Actions"));
+  const acts = DS.h("div", "ds-grid3");
+  acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
+  acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
+  const wp = DS.actionBtn("Wallpaper", "\u{f021c}", false, openWallpaper);
+  acts.appendChild(wp);
+  col.appendChild(acts);
+
+  body.appendChild(col);
+  document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>