Merge dev: burn fix, version label, theme persistence, admin/settings UI, theme grid, CSP fix, docs

t.colors was removed by #113; rendering threw on first iteration and
the theme grid rendered empty. Use the colors returned by
presetColors(t.id) instead. Verified in headless chromium: 5
theme-card elements render on /settings.

internal/web/securityheaders_test.go

@@ -16,7 +16,7 @@ func TestSecurityHeaders(t *testing.T) {
 	h := SecurityHeaders(pages)
 	rec := httptest.NewRecorder()
 	h.ServeHTTP(rec, httptest.NewRequest("GET", "/", nil))
-	wantCSP := "default-src 'self'; script-src 'self' 'unsafe-inline'; frame-ancestors 'none'"
+	wantCSP := "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'"
 	if got := rec.Header().Get("Content-Security-Policy"); got != wantCSP {
 		t.Errorf("CSP = %q, want %q", got, wantCSP)
 	}

internal/web/templates/admin.html

@@ -103,7 +103,9 @@
     });
   });
 
-  if (key()) loadSettings();
+  // #112: always show the lock on fresh load — do not auto-restore the
+  // panel from a stale sessionStorage key. The key is only written after a
+  // successful unlock (above) so in-page actions still work within this visit.
 })();
 </script>
 {{template "foot" .}}

internal/web/templates/layout.html

@@ -3,9 +3,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/static/app.css">
 <script>
-// preset preview hook (#16): ?theme=<name> sets data-preset for screenshots only
+// preset hook (#16): ?theme= wins; else persisted choice (#100)
 (function () {
   var t = new URLSearchParams(location.search).get('theme');
+  if (!t) try { t = localStorage.getItem('palette-theme'); } catch (e) {}
   if (t) document.documentElement.dataset.preset = t;
 })();
 </script>

internal/web/templates/settings.html

@@ -8,29 +8,43 @@
     <div class="settings-body">
       <h3>Theme</h3>
       <div class="theme-grid" id="theme-grid"></div>
-      <p class="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
       <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
 </div>
 <script>
 (function () {
-  var themes = [
-    { id: 'midnight',        name: 'Midnight',        colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
-    { id: 'smooth',          name: 'Smooth',          colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
-    { id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
-    { id: 'pastel-peach',    name: 'Pastel Peach',    colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
-    { id: 'pastel-cloud',    name: 'Pastel Cloud',    colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
+  // #112: derive each preset's swatches from the real CSS variables in
+  // app.css by temporarily applying data-preset, so they can never drift.
+  var themeNames = [
+    { id: 'midnight',        name: 'Midnight' },
+    { id: 'smooth',          name: 'Smooth' },
+    { id: 'pastel-lavender', name: 'Pastel Lavender' },
+    { id: 'pastel-peach',    name: 'Pastel Peach' },
+    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
   ];
+  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
+
+  function presetColors(id) {
+    var root = document.documentElement;
+    var prev = root.getAttribute('data-preset');
+    root.setAttribute('data-preset', id);
+    var cs = getComputedStyle(root);
+    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
+    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
+    return colors;
+  }
+
   var grid = document.getElementById('theme-grid');
   var current = document.documentElement.dataset.preset || 'midnight';
-  themes.forEach(function (t) {
+  themeNames.forEach(function (t) {
+    var colors = presetColors(t.id);
     var btn = document.createElement('button');
     btn.type = 'button';
     btn.className = 'theme-card';
     btn.setAttribute('aria-pressed', current === t.id ? 'true' : 'false');
     btn.innerHTML = '<strong>' + t.name + '</strong>' +
-      '<span class="swatches">' + t.colors.map(function (c) {
+      '<span class="swatches">' + colors.map(function (c) {
         return '<span class="swatch" style="background:' + c + '"></span>';
       }).join('') + '</span>';
     btn.addEventListener('click', function () {

internal/web/web.go

@@ -344,7 +344,7 @@ func SecurityHeaders(next http.Handler) http.Handler {
 		// is harmless and arguably desirable.
 		h := w.Header()
 		h.Set("Content-Security-Policy",
-			"default-src 'self'; script-src 'self' 'unsafe-inline'; frame-ancestors 'none'")
+			"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'")
 		h.Set("Referrer-Policy", "no-referrer")
 		h.Set("X-Content-Type-Options", "nosniff")
 		next.ServeHTTP(w, r)