From 7957da9231eb28c2b2e747e45ac2aeb5893a1831 Mon Sep 17 00:00:00 2001
From: Soulhackzlol <52952716+Soulhackzlol@users.noreply.github.com>
Date: Wed, 10 Jun 2026 14:02:14 +0200
Subject: [PATCH 1/3] feat(overlay): one overlay list, copy-a-URL flow (v0.1.6)

Reworks the Overlay tab so every overlay is just a file with a URL.

- Presets are pre-installed as real overlays on first run: one list, no
  preset/editable/legacy split or filter. A new `overlays_seeded` config
  flag keeps deleted presets from reappearing.
- Per overlay: Copy URL, Edit in Studio, Duplicate, Delete. "+ New
  overlay" replaces the standalone Open Studio button; Studio save is
  Save (overwrite) + Save as new.
- Auto-hide is a quick per-overlay toggle that appends ?autohide=off to
  the copied URL (no re-bake); the per-state Studio control stays the
  baked default.
- Restore default overlays (and the factory reset) wipe Studio overlays
  and re-seed, with a confirmation that says so; legacy hand-written
  files are kept.

Server: list_overlays reports an autohide flag; POST /overlays/seeded
and /overlays/reset; config reset scope=all wipes Studio overlays.
Seeded overlays are per-install runtime artifacts (gitignored).
---
 .gitignore     |  10 +++
 CHANGELOG.md   |  27 ++++++
 Cargo.lock     |   2 +-
 Cargo.toml     |   2 +-
 src/config.rs  |  21 ++++-
 src/web.rs     | 135 ++++++++++++++++++++++++++++--
 web/index.html | 217 +++++++++++++++++++++++--------------------------
 7 files changed, 289 insertions(+), 125 deletions(-)

diff --git a/.gitignore b/.gitignore
index 18597d1..3ef53f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,5 +23,15 @@ Thumbs.db
 .DS_Store
 desktop.ini
 
+# Studio + seeded overlays are generated per-install at runtime (the
+# dashboard bakes the built-in presets on first run). Only the shipped
+# hand-written overlays are tracked; everything else here is local.
+overlays/*.html
+!overlays/minimal.html
+!overlays/corner.html
+!overlays/strip.html
+!overlays/custom-template.html
+overlays/*/
+
 # Misc
 *.log
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75a5542..c22d080 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,33 @@ All notable changes will land here. Format loosely follows
 
 Nothing yet.
 
+## [0.1.6] - Overlay flow: one list, copy a URL
+
+Reworks the Overlay tab around a single idea: **everything is just an
+overlay with a URL you copy into OBS.**
+
+**One list, presets pre-installed.** The old preset / editable / legacy
+split (and its type filter) is gone. On first run the built-in presets
+are baked to real overlay files, so they show up in the same list as
+anything you make - each with a working URL, no hidden "materialize on
+copy" step. A one-time `overlays_seeded` flag keeps deleted presets from
+reappearing.
+
+**Three real actions.** Per overlay: **Copy URL**, **Edit in Studio**,
+**Duplicate**, **Delete** (hand-written legacy files: Copy URL + Delete).
+The standalone "Open Studio" button is replaced by **+ New overlay**. In
+the Studio, save is now two clear buttons: **Save** (overwrite) and
+**Save as new**.
+
+**Auto-hide as a quick toggle.** A per-overlay **Auto-hide when live**
+switch; turning it off appends `?autohide=off` to the copied URL so the
+overlay stays up, no re-bake. The per-state control in the Studio remains
+the baked default.
+
+**Restore defaults.** A button (and the factory reset) wipes your Studio
+overlays and reinstalls the built-in set, with a confirmation that says
+so plainly. Legacy hand-written files are left untouched.
+
 ## [0.1.5] - Overlay Studio (experimental)
 
 A no-code visual editor for building OBS browser-source overlays that
diff --git a/Cargo.lock b/Cargo.lock
index 24d292f..482bffb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -218,7 +218,7 @@ dependencies = [
 
 [[package]]
 name = "instantclone"
-version = "0.1.5"
+version = "0.1.6"
 dependencies = [
  "bytes",
  "flate2",
diff --git a/Cargo.toml b/Cargo.toml
index 13a576f..16f486d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "instantclone"
-version = "0.1.5"
+version = "0.1.6"
 edition = "2021"
 authors = ["s1moscs"]
 license = "GPL-3.0-only"
diff --git a/src/config.rs b/src/config.rs
index 1e0c1ea..68cccde 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -70,6 +70,12 @@ pub struct Settings {
     /// streamer hits Arm with a non-zero value) so "last used" sticks
     /// across sessions without a separate UI knob to maintain it.
     pub auto_arm_delay_ms: u32,
+    /// State: whether the built-in preset overlays have been seeded to the
+    /// overlays folder as real files yet. Set true after the dashboard bakes
+    /// them on first run, so deleting a seeded overlay doesn't bring it back.
+    /// Reset to false (and the overlays wiped) by "Restore default overlays"
+    /// and the factory reset, which re-seeds on the next dashboard load.
+    pub overlays_seeded: bool,
 }
 
 #[derive(Debug, Clone)]
@@ -252,6 +258,9 @@ impl Settings {
             // auto_arm_on_connect without otherwise customising lands
             // on a familiar number.
             auto_arm_delay_ms: 15_000,
+            // Fresh install hasn't seeded the preset overlays yet; the
+            // dashboard does it on first load, then flips this true.
+            overlays_seeded: false,
         }
     }
 
@@ -448,6 +457,9 @@ impl Settings {
         if self.auto_arm_delay_ms != 15_000 {
             writeln!(f, "auto_arm_delay_ms={}", self.auto_arm_delay_ms)?;
         }
+        if self.overlays_seeded {
+            writeln!(f, "overlays_seeded=true")?;
+        }
         for (i, p) in self.profiles.iter().enumerate() {
             writeln!(f, "profile.{}.name={}", i, p.name)?;
             writeln!(f, "profile.{}.delay_ms={}", i, p.delay_ms)?;
@@ -524,6 +536,7 @@ impl Settings {
             "tracing_enabled" => self.tracing_enabled = value.parse().unwrap_or(false),
             "auto_arm_on_connect" => self.auto_arm_on_connect = value == "true",
             "auto_activate_when_ready" => self.auto_activate_when_ready = value == "true",
+            "overlays_seeded" => self.overlays_seeded = value == "true",
             "auto_arm_delay_ms" => {
                 if let Ok(v) = value.parse() {
                     self.auto_arm_delay_ms = v;
@@ -700,7 +713,7 @@ impl Settings {
         }
         dests.push(']');
         format!(
-            r#"{{"configured":{c},"ingest_port":{ip},"ingest_bind_all":{iba},"web_port":{wp},"web_bind_all":{wba},"buffer_mb":{bm},"buffer_path":{bp},"target_delay_ms":{td},"initial_delay_ms":{id},"obs_url":{ou},"discord_webhook_url":{dw},"webhook_set":{ws},"overlays_dir":{ov},"tracing_enabled":{te},"auto_arm_on_connect":{aaoc},"auto_activate_when_ready":{aawr},"auto_arm_delay_ms":{aadm},"destinations":{dests}}}"#,
+            r#"{{"configured":{c},"ingest_port":{ip},"ingest_bind_all":{iba},"web_port":{wp},"web_bind_all":{wba},"buffer_mb":{bm},"buffer_path":{bp},"target_delay_ms":{td},"initial_delay_ms":{id},"obs_url":{ou},"discord_webhook_url":{dw},"webhook_set":{ws},"overlays_dir":{ov},"tracing_enabled":{te},"auto_arm_on_connect":{aaoc},"auto_activate_when_ready":{aawr},"auto_arm_delay_ms":{aadm},"overlays_seeded":{os},"destinations":{dests}}}"#,
             c = self.configured,
             ip = self.ingest_port,
             iba = self.ingest_bind_all,
@@ -718,6 +731,7 @@ impl Settings {
             aaoc = self.auto_arm_on_connect,
             aawr = self.auto_activate_when_ready,
             aadm = self.auto_arm_delay_ms,
+            os = self.overlays_seeded,
             dests = dests,
         )
     }
@@ -1286,6 +1300,7 @@ mod tests {
         s.auto_arm_on_connect = true;
         s.auto_activate_when_ready = true;
         s.auto_arm_delay_ms = 30_000;
+        s.overlays_seeded = true;
         // Need a destination so save() doesn't bail on the
         // configured-but-empty path.
         s.destinations.push(Destination {
@@ -1315,6 +1330,10 @@ mod tests {
             loaded.auto_arm_delay_ms, 30_000,
             "auto_arm_delay_ms must survive round-trip"
         );
+        assert!(
+            loaded.overlays_seeded,
+            "overlays_seeded must survive round-trip"
+        );
 
         let _ = std::fs::remove_file(&path);
     }
diff --git a/src/web.rs b/src/web.rs
index e5ca92e..24fe5a9 100644
--- a/src/web.rs
+++ b/src/web.rs
@@ -264,8 +264,17 @@ async fn route(
     // Overlay Studio writes: POST /overlays/<slug> saves a baked overlay,
     // POST /overlays/<slug>/delete removes it. The slug is restricted to a
     // safe charset (no separators) so no path can escape overlays_dir.
+    // POST /overlays/seeded marks the built-in presets as installed; POST
+    // /overlays/reset wipes the Studio overlays and clears that flag so the
+    // dashboard re-seeds the defaults on its next load.
     if method == "POST" && bare_path.starts_with("/overlays/") {
         let rest = &bare_path["/overlays/".len()..];
+        if rest == "seeded" {
+            return overlays_mark_seeded(settings, cfg_path);
+        }
+        if rest == "reset" {
+            return overlays_reset(settings, cfg_path);
+        }
         if let Some(slug) = rest.strip_suffix("/delete") {
             return overlay_delete(slug, settings);
         }
@@ -1483,6 +1492,10 @@ async fn post_config_reset(
         // event-log tab match the "fresh install" feel.
         ctrl.arm_delay(0);
         ctrl.clear_logs();
+        // Wipe the Studio overlays (from the still-current dir, before the
+        // send below swaps in defaults). The seeded flag is back to false in
+        // `next`, so the dashboard re-bakes the presets on its next load.
+        wipe_studio_overlays(&settings.borrow().overlays_dir);
     }
     ctrl.log(format!("config reset (scope={})", scope));
     reconcile_obs_vod_files(&next, ctrl);
@@ -2025,7 +2038,7 @@ fn generate_dest_id() -> String {
 /// ones are still listed and usable as browser sources.
 fn list_overlays(settings: &Arc<watch::Sender<Settings>>) -> String {
     let dir = settings.borrow().overlays_dir.clone();
-    let mut items: Vec<(String, String, bool)> = Vec::new();
+    let mut items: Vec<(String, String, bool, bool)> = Vec::new();
     if let Ok(entries) = std::fs::read_dir(&dir) {
         for e in entries.flatten() {
             let fname = match e.file_name().into_string() {
@@ -2043,21 +2056,25 @@ fn list_overlays(settings: &Arc<watch::Sender<Settings>>) -> String {
             // detect the ic-doc marker is cheap and keeps the list honest.
             let content = std::fs::read_to_string(e.path()).unwrap_or_default();
             let studio = content.contains("<!--ic-doc:");
+            // `autohide` lets the dashboard show a "stays up / hides when live"
+            // quick toggle (it appends ?autohide=off to the copied URL).
+            let autohide = content.contains("data-ah-");
             let name = extract_title(&content).unwrap_or_else(|| slug.clone());
-            items.push((slug, name, studio));
+            items.push((slug, name, studio, autohide));
         }
     }
     items.sort_by(|a, b| a.0.cmp(&b.0));
     let mut out = String::from("[");
-    for (i, (slug, name, studio)) in items.iter().enumerate() {
+    for (i, (slug, name, studio, autohide)) in items.iter().enumerate() {
         if i > 0 {
             out.push(',');
         }
         out.push_str(&format!(
-            r#"{{"slug":{},"name":{},"studio":{}}}"#,
+            r#"{{"slug":{},"name":{},"studio":{},"autohide":{}}}"#,
             json_escape_quoted(slug),
             json_escape_quoted(name),
-            studio
+            studio,
+            autohide
         ));
     }
     out.push(']');
@@ -2160,6 +2177,83 @@ fn overlay_delete(
     ("200 OK", "application/json", r#"{"ok":true}"#.into())
 }
 
+/// Delete every Studio-authored overlay (files carrying the `ic-doc` marker)
+/// in `dir`, plus each one's per-overlay assets directory. Hand-written legacy
+/// `.html` files (no marker) are left alone - they ship with the app and aren't
+/// user data the dashboard can recreate.
+fn wipe_studio_overlays(dir: &Path) {
+    let Ok(entries) = std::fs::read_dir(dir) else {
+        return;
+    };
+    for e in entries.flatten() {
+        let path = e.path();
+        let is_html = path
+            .extension()
+            .and_then(|x| x.to_str())
+            .map(|x| x.eq_ignore_ascii_case("html") || x.eq_ignore_ascii_case("htm"))
+            .unwrap_or(false);
+        if !is_html {
+            continue;
+        }
+        if std::fs::read_to_string(&path)
+            .unwrap_or_default()
+            .contains("<!--ic-doc:")
+        {
+            let _ = std::fs::remove_file(&path);
+            if let Some(stem) = path.file_stem().and_then(|s| s.to_str()) {
+                let _ = std::fs::remove_dir_all(dir.join(stem));
+            }
+        }
+    }
+}
+
+/// Mark the built-in preset overlays as seeded (the dashboard calls this once,
+/// after it bakes them on first run), so deleted ones don't reappear.
+fn overlays_mark_seeded(
+    settings: &Arc<watch::Sender<Settings>>,
+    cfg_path: &Path,
+) -> (&'static str, &'static str, String) {
+    let mut next = settings.borrow().clone();
+    if !next.overlays_seeded {
+        next.overlays_seeded = true;
+        if let Err(e) = next.save(cfg_path) {
+            return (
+                "500 Internal Server Error",
+                "application/json",
+                format!(
+                    r#"{{"ok":false,"error":"{}"}}"#,
+                    json_escape(&e.to_string())
+                ),
+            );
+        }
+        let _ = settings.send(next);
+    }
+    ("200 OK", "application/json", r#"{"ok":true}"#.into())
+}
+
+/// Restore the default overlays: wipe the Studio overlays and clear the seeded
+/// flag so the dashboard re-bakes the built-in presets on its next load.
+fn overlays_reset(
+    settings: &Arc<watch::Sender<Settings>>,
+    cfg_path: &Path,
+) -> (&'static str, &'static str, String) {
+    let mut next = settings.borrow().clone();
+    wipe_studio_overlays(&next.overlays_dir);
+    next.overlays_seeded = false;
+    if let Err(e) = next.save(cfg_path) {
+        return (
+            "500 Internal Server Error",
+            "application/json",
+            format!(
+                r#"{{"ok":false,"error":"{}"}}"#,
+                json_escape(&e.to_string())
+            ),
+        );
+    }
+    let _ = settings.send(next);
+    ("200 OK", "application/json", r#"{"ok":true}"#.into())
+}
+
 fn serve_overlay_file(
     name: &str,
     settings: &Arc<watch::Sender<Settings>>,
@@ -3311,6 +3405,37 @@ mod tests {
         let _ = std::fs::remove_dir_all(&dir);
     }
 
+    #[test]
+    fn wipe_keeps_legacy_and_list_reports_autohide() {
+        let dir = unique_tmp_dir("wipe");
+        // A Studio overlay (ic-doc marker) that bakes an auto-hide (data-ah-).
+        std::fs::write(
+            dir.join("studio.html"),
+            "<!doctype html><!--ic-doc:%7B%7D--><html><head><title>S</title></head>\
+             <body><div class=\"icw\" data-ah-active=\"4000\"></div></body></html>",
+        )
+        .unwrap();
+        // A hand-written legacy file: no marker, no auto-hide.
+        std::fs::write(
+            dir.join("legacy.html"),
+            "<!doctype html><html><head><title>L</title></head><body>hi</body></html>",
+        )
+        .unwrap();
+
+        // The list reports studio + autohide per file.
+        let settings = settings_with_overlays_dir(&dir);
+        let listed = list_overlays(&settings);
+        assert!(listed.contains(r#""slug":"studio","name":"S","studio":true,"autohide":true"#));
+        assert!(listed.contains(r#""slug":"legacy","name":"L","studio":false,"autohide":false"#));
+
+        // Restore-defaults wipes only the Studio (ic-doc) file; legacy stays.
+        wipe_studio_overlays(&dir);
+        assert!(!dir.join("studio.html").exists());
+        assert!(dir.join("legacy.html").is_file());
+
+        let _ = std::fs::remove_dir_all(&dir);
+    }
+
     #[test]
     fn extract_title_pulls_first_title() {
         assert_eq!(
diff --git a/web/index.html b/web/index.html
index 4ce6ce9..02d765f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -629,6 +629,7 @@
 .ovg-card-tag.editable{background:color-mix(in oklch,var(--accent) 16%,transparent);color:var(--accent)}
 .ovg-card-tag.preset{background:color-mix(in oklch,var(--live) 15%,transparent);color:var(--live)}
 .ovg-card-tag.legacy{background:rgba(255,255,255,.06);color:var(--fg-4)}
+.ovg-empty{padding:26px 16px;text-align:center;color:var(--fg-4);font-size:13px;line-height:1.6}
 
 /* ── Overlay Studio ─────────────────────────────── */
 .st-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@@ -1494,9 +1495,12 @@ <h4 id="dest-form-title">New destination</h4>
     <div class="tab-head" style="align-items:flex-start">
       <div>
         <div class="tab-title">On-stream overlay</div>
-        <div class="tab-sub">A browser-source widget that shows your delay. Pick one, drop the URL into OBS - or open the Studio to design your own.</div>
+        <div class="tab-sub">Browser-source widgets that show your delay. Pick one, copy its URL into OBS - or edit any in the Studio.</div>
+      </div>
+      <div style="display:flex;gap:8px">
+        <button class="ic-btn ic-btn-ghost" onclick="Studio.restoreDefaults()" title="Delete all your overlays and reinstall the built-in set">Restore defaults</button>
+        <button class="ic-btn ic-btn-primary" onclick="Studio.newOverlay()">+ New overlay</button>
       </div>
-      <button class="ic-btn ic-btn-primary" onclick="Studio.openStudio()">✎ Open Studio</button>
     </div>
 
     <div class="ovg-grid">
@@ -1515,7 +1519,6 @@ <h4 id="dest-form-title">New destination</h4>
           <button class="st-sim" data-psim="preparing" onclick="Studio.previewSim('preparing')">Arming</button>
           <button class="st-sim" data-psim="ready" onclick="Studio.previewSim('ready')">Ready</button>
           <button class="st-sim" data-psim="active" onclick="Studio.previewSim('active')">Active</button>
-          <button class="st-sim" data-psim="cut" onclick="Studio.previewSim('cut')">Cut</button>
           <button class="st-sim" data-psim="error" onclick="Studio.previewSim('error')">Error</button>
           <span class="ph-cap" id="ovg-phase" style="margin-left:auto"></span>
         </div>
@@ -1556,12 +1559,12 @@ <h4 id="dest-form-title">New destination</h4>
           <button class="ic-btn ic-btn-ghost st-icobtn" id="st-undo" title="Undo (Ctrl+Z)" onclick="Studio.undo()">↶</button>
           <button class="ic-btn ic-btn-ghost st-icobtn" id="st-redo" title="Redo (Ctrl+Shift+Z)" onclick="Studio.redo()">↷</button>
           <input id="st-name" class="ic-input" placeholder="Overlay name" value="My overlay">
-          <button class="ic-btn ic-btn-primary" id="st-save" onclick="Studio.save()">Save</button>
+          <button class="ic-btn ic-btn-primary" id="st-save" onclick="Studio.save()" title="Overwrite this overlay">Save</button>
+          <button class="ic-btn ic-btn-ghost" onclick="Studio.saveAsNew()" title="Save a separate copy with a new URL">Save as new</button>
           <button class="ic-btn ic-btn-ghost" onclick="Studio.copyUrl()">Copy URL</button>
           <div class="st-menu">
             <button class="ic-btn ic-btn-ghost st-icobtn" title="More" onclick="Studio.toggleMenu(event)">⋯</button>
             <div class="st-menu-pop" id="st-menu-pop" hidden>
-              <button onclick="Studio.menu('saveas')">Save as a copy</button>
               <button onclick="Studio.menu('rename')">Rename</button>
               <button onclick="Studio.menu('export')">Export .json</button>
               <button onclick="Studio.menu('import')">Import .json</button>
@@ -2752,6 +2755,8 @@ <h4 id="dest-form-title">New destination</h4>
     const c = await (await fetch('/config')).json();
     lastConfig = c;
     initialBufferMb = c.buffer_mb; initialBufferPath = c.buffer_path;
+    // First run: install the built-in presets as real overlays (once).
+    if (c.configured && !c.overlays_seeded && window.ICOverlay) { Studio.seedPresets(); }
     // wizard
     const first = (c.destinations && c.destinations[0]) || {platform:'twitch', custom_egress_url:'', stream_key_set:false};
     if ($('w-platform').children.length === 0) fillWizardPlatforms();
@@ -3233,6 +3238,7 @@ <h4 id="dest-form-title">New destination</h4>
     list.innerHTML = [
       '<li><b>All destinations</b> (Twitch / YouTube / custom keys) - gone</li>',
       '<li><b>All saved delay profiles</b> - gone</li>',
+      '<li><b>All your overlays</b> (presets + custom) - deleted, the built-in set restored</li>',
       '<li>Network ports, buffer settings, webhook, overlays folder - reset to defaults</li>',
       '<li>Diagnostic trace toggle - turned off</li>',
     ].join('');
@@ -3346,8 +3352,8 @@ <h4 id="dest-form-title">New destination</h4>
   function slugify(s){ return (s||'overlay').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'').slice(0,64) || 'overlay'; }
 
   // ---- views: gallery (browse + preview) vs studio (editor) ----
-  let gsel = null;          // gallery selection {type:'preset'|'saved', id}
-  let galleryFilter = 'all';// preset tag filter
+  let gsel = null;          // selected overlay slug (everything is an overlay now)
+  let autohideOff = false;  // quick "stays up" override for the selection (?autohide=off)
   let previewState = 'auto'; // 'auto' = run the delay-lifecycle simulation
   let gallerySim = null, studioSim = null, playing = false;
   const ARMED_MS = 15000;
@@ -3437,12 +3443,27 @@ <h4 id="dest-form-title">New destination</h4>
     renderProps();
     resetHistory();
   }
-  function openStudio(slug){
+  function openStudio(slugId){
+    stopGallerySim(); setView('studio'); ensureStudio();
+    if(slugId) openSaved({slug:slugId, studio:true});
+    requestAnimationFrame(fitScale);
+  }
+  // The three real intents: edit (openStudio), create new (blank), duplicate.
+  function newOverlay(){
     stopGallerySim(); setView('studio'); ensureStudio();
-    if(slug) openSaved({slug:slug, studio:true});
+    doc = IC().defaultDoc('Untitled overlay'); slug=null; sel=null;
+    doc.widgets.forEach((w,n)=>{ if(!w.id) w.id='w'+(n+1); });
+    $('st-name').value = doc.name;
+    renderStates(); renderLeft(); rebake(); renderProps(); resetHistory(); updateUrlLabel();
     requestAnimationFrame(fitScale);
   }
-  function openStudioPreset(i){ stopGallerySim(); setView('studio'); ensureStudio(); loadPreset(i); requestAnimationFrame(fitScale); }
+  async function duplicateOverlay(slugId){
+    stopGallerySim(); setView('studio'); ensureStudio();
+    await openSaved({slug:slugId, studio:true});
+    slug=null; doc.name=(doc.name||'Overlay')+' copy'; $('st-name').value=doc.name;
+    updateUrlLabel(); resetHistory(); requestAnimationFrame(fitScale);
+    toast('Duplicated - "Save as new" to write it','info');
+  }
   function backToGallery(){
     stopPlay();
     setView('gallery');
@@ -3468,80 +3489,48 @@ <h4 id="dest-form-title">New destination</h4>
     $('ovg-scale').style.transform = 'scale('+(w/1920)+')';
   }
 
-  // ---- gallery ----
-  // Filter by TYPE: built-in presets, your editable saved overlays, or
-  // legacy hand-written .html files.
+  // ---- gallery: one list of overlays, each with a copyable URL ----
+  function curOverlay(){ return savedList.find(o=>o.slug===gsel)||null; }
+  function selUrl(){ return location.origin+'/overlay/'+encodeURIComponent(gsel)+'.html'+(autohideOff?'?autohide=off':''); }
   function renderGallery(){
     const c = $('ovg-list'); if(!c) return;
     c.innerHTML='';
-    // A just-saved overlay should be visible + selected: show all, target it.
-    if(pendingSelect && savedList.some(o=>o.slug===pendingSelect)){ gsel={type:'saved',id:pendingSelect}; galleryFilter='all'; pendingSelect=null; }
-    const showType=(t)=> galleryFilter==='all' || galleryFilter===t;
-    // type filter chips
-    const types=[['all','All'],['preset','Presets'],['editable','Editable'],['legacy','Legacy']];
-    const fr=document.createElement('div'); fr.className='ovg-filter';
-    types.forEach(t=>{ const b=document.createElement('button'); b.className='ovg-fchip'+(galleryFilter===t[0]?' on':'');
-      b.textContent=t[1]; b.onclick=()=>{ galleryFilter=t[0]; renderGallery(); }; fr.appendChild(b); });
-    c.appendChild(fr);
-
-    function tagCard(card, label, cls){ const t=card.querySelector('.ovg-card-tag'); t.textContent=label; if(cls) t.classList.add(cls); }
-
-    // Saved overlays (editable + legacy)
-    savedList.forEach(o=>{
-      const t = o.studio?'editable':'legacy';
-      if(!showType(t)) return;
+    if(pendingSelect && savedList.some(o=>o.slug===pendingSelect)){ gsel=pendingSelect; pendingSelect=null; }
+    // Studio overlays first, then legacy hand-written, each alphabetical.
+    const list = savedList.slice().sort((a,b)=>
+      a.studio===b.studio ? (a.name||a.slug).localeCompare(b.name||b.slug) : (a.studio?-1:1));
+    list.forEach(o=>{
       const card=document.createElement('button'); card.className='ovg-card';
-      card.dataset.gtype='saved'; card.dataset.gid=o.slug;
+      card.dataset.gid=o.slug;
       card.innerHTML='<span class="ovg-card-name"></span><span class="ovg-card-hint mono"></span><span class="ovg-card-tag"></span>';
       card.querySelector('.ovg-card-name').textContent=o.name||o.slug;
       card.querySelector('.ovg-card-hint').textContent='/overlay/'+o.slug+'.html';
-      tagCard(card, o.studio?'EDITABLE':'LEGACY', o.studio?'editable':'legacy');
-      card.onclick=()=>selectGallery('saved',o.slug);
-      c.appendChild(card);
-    });
-
-    // Built-in presets
-    if(showType('preset')) IC().PRESETS.forEach((p,i)=>{
-      const card=document.createElement('button'); card.className='ovg-card';
-      card.dataset.gtype='preset'; card.dataset.gid=String(i);
-      card.innerHTML='<span class="ovg-card-name"></span><span class="ovg-card-hint"></span><span class="ovg-card-tag"></span>';
-      card.querySelector('.ovg-card-name').textContent=p.name;
-      card.querySelector('.ovg-card-hint').textContent=p.hint;
-      tagCard(card, 'PRESET', 'preset');
-      card.onclick=()=>selectGallery('preset',i);
+      if(!o.studio){ const t=card.querySelector('.ovg-card-tag'); t.textContent='LEGACY'; t.classList.add('legacy'); }
+      card.onclick=()=>selectGallery(o.slug);
       c.appendChild(card);
     });
-
-    // Keep the current selection if it's still visible; else pick the first.
-    const cur = gsel && c.querySelector('.ovg-card[data-gtype="'+gsel.type+'"][data-gid="'+gsel.id+'"]');
-    if(cur){ selectGallery(gsel.type, gsel.id); }
-    else { const first=c.querySelector('.ovg-card'); if(first) selectGallery(first.dataset.gtype, first.dataset.gtype==='preset'?parseInt(first.dataset.gid,10):first.dataset.gid); }
+    if(!list.length){ c.innerHTML='<div class="ovg-empty">No overlays yet. Use <b>+ New overlay</b> to make one.</div>'; gsel=null; updateGalleryMeta(); return; }
+    const cur = gsel && c.querySelector('.ovg-card[data-gid="'+CSS.escape(gsel)+'"]');
+    if(cur) selectGallery(gsel);
+    else { const first=c.querySelector('.ovg-card'); if(first) selectGallery(first.dataset.gid); }
   }
 
-  function selectGallery(type,id){
-    gsel={type,id};
-    $$('#ovg-list .ovg-card').forEach(el=>el.classList.toggle('sel', el.dataset.gtype===type && el.dataset.gid===String(id)));
+  function selectGallery(slugId){
+    gsel=slugId; autohideOff=false;
+    $$('#ovg-list .ovg-card').forEach(el=>el.classList.toggle('sel', el.dataset.gid===slugId));
     updatePreview();
     updateGalleryMeta();
   }
   function stopGallerySim(){ if(gallerySim){ gallerySim.stop(); gallerySim=null; } }
-  // Presets ship with a 4s fade-out after going live. This fast toggle lets a
-  // streamer keep the overlay up instead, without opening the Studio.
-  let presetAutoHide = true;
-  function presetDoc(p){
-    const d=clone(p);
-    d.widgets.forEach((w,i)=>{ w.id='w'+(i+1);
-      if(!presetAutoHide && w.states){ Object.keys(w.states).forEach(k=>{ delete w.states[k].hide_after_ms; delete w.states[k].exit; }); }
-    });
-    return d;
-  }
-  function togglePresetHide(on){ presetAutoHide=on; updatePreview(); }
+  // Quick "keep it up" toggle: off appends ?autohide=off to the copied/preview
+  // URL (the runtime honours it). No re-bake - the baked default is unchanged.
+  function toggleAutohide(on){ autohideOff=!on; updatePreview(); updateGalleryMeta(); }
   function updatePreview(){
-    const prev=$('ov-preview'); if(!prev) return;
+    const prev=$('ov-preview'); if(!prev||!gsel) return;
     stopGallerySim();
     prev.onload=()=>applyPreviewState();
-    if(gsel.type==='preset'){ prev.removeAttribute('src'); prev.srcdoc=IC().bake(presetDoc(IC().PRESETS[gsel.id])); }
-    else { prev.removeAttribute('srcdoc'); prev.src='/overlay/'+encodeURIComponent(gsel.id)+'.html'; }
+    prev.removeAttribute('srcdoc');
+    prev.src='/overlay/'+encodeURIComponent(gsel)+'.html'+(autohideOff?'?autohide=off':'');
   }
   // Drive the preview: 'auto' runs the delay-lifecycle simulation, 'live'
   // shows the real OBS state, anything else pins one state.
@@ -3559,48 +3548,29 @@ <h4 id="dest-form-title">New destination</h4>
   }
   function updateGalleryMeta(){
     const nameEl=$('ovg-name'), urlEl=$('ovg-url'), act=$('ovg-actions');
-    act.innerHTML='';
-    if(gsel.type==='preset'){
-      const p=IC().PRESETS[gsel.id];
-      // A preset is just a starting point; the URL is what OBS loads, so
-      // show the URL it gets the moment you use it. Copy/Use both create
-      // the file - no Studio detour required.
-      nameEl.textContent=p.name+' · preset';
-      urlEl.textContent=location.origin+'/overlay/'+slugify(p.name)+'.html';
-      act.innerHTML='<label class="ovg-switch" title="Fade the overlay out a few seconds after the delay goes live"><input type="checkbox"'+(presetAutoHide?' checked':'')+' onchange="Studio.togglePresetHide(this.checked)"><span>Auto-hide when live</span></label>'+
-        '<button class="ic-btn ic-btn-ghost" onclick="Studio.openStudioPreset('+gsel.id+')">Customize in Studio</button>';
+    const o=curOverlay();
+    if(!o){ nameEl.textContent=''; urlEl.textContent='select an overlay'; act.innerHTML=''; return; }
+    nameEl.textContent=(o.name||o.slug)+(o.studio?'':' · legacy');
+    urlEl.textContent=selUrl();
+    let h='';
+    // Quick auto-hide toggle (only meaningful when the file bakes one).
+    if(o.autohide) h+='<label class="ovg-switch" title="Off appends ?autohide=off so the overlay stays up"><input type="checkbox"'+(autohideOff?'':' checked')+' onchange="Studio.toggleAutohide(this.checked)"><span>Auto-hide when live</span></label>';
+    if(o.studio){
+      h+='<button class="ic-btn ic-btn-ghost" onclick="Studio.openStudio(\''+o.slug+'\')">Edit in Studio</button>'+
+         '<button class="ic-btn ic-btn-ghost" onclick="Studio.duplicateOverlay(\''+o.slug+'\')">Duplicate</button>';
     } else {
-      const o=savedList.find(x=>x.slug===gsel.id)||{slug:gsel.id};
-      nameEl.textContent=(o.name||o.slug)+(o.studio?' · saved':' · legacy');
-      urlEl.textContent=location.origin+'/overlay/'+o.slug+'.html';
-      if(o.studio) act.innerHTML='<button class="ic-btn ic-btn-primary" onclick="Studio.openStudio(\''+o.slug+'\')">Edit in Studio</button>'+
-        '<button class="ic-btn ic-btn-ghost st-danger" onclick="Studio.deleteFromGallery(\''+o.slug+'\')">Delete</button>';
-      else act.innerHTML='<span class="muted" style="font-size:11.5px;align-self:center">Hand-written - edit the .html file directly</span>'+
-        '<button class="ic-btn ic-btn-ghost st-danger" onclick="Studio.deleteFromGallery(\''+o.slug+'\')">Delete</button>';
+      h+='<span class="muted" style="font-size:11.5px;align-self:center">Hand-written - edit the .html file directly</span>';
     }
+    h+='<button class="ic-btn ic-btn-ghost st-danger" onclick="Studio.deleteFromGallery(\''+o.slug+'\')">Delete</button>';
+    act.innerHTML=h;
   }
-  // Copy from the gallery. For a preset, create the file first (so the URL
-  // actually resolves in OBS) then copy it. For a saved overlay, copy as-is.
-  async function copyGallery(){
-    if(gsel && gsel.type==='preset'){ const sl=await useOverlay(true); if(sl) copyText(location.origin+'/overlay/'+sl+'.html','Overlay URL'); }
-    else copyEl('ovg-url','Overlay URL');
-  }
-  // Bake a preset to disk under its own slug (so the URL resolves in OBS) and
-  // switch the gallery to it. `silent` skips the toast for the copy path, which
-  // shows its own "copied" toast.
-  async function useOverlay(silent){
-    if(!gsel || gsel.type!=='preset') return null;
-    const p=IC().PRESETS[gsel.id];
-    const d=presetDoc(p);
-    const sl=slugify(p.name);
-    try{
-      const r=await fetch('/overlays/'+encodeURIComponent(sl), {method:'POST', headers:{'Content-Type':'text/html'}, body:IC().bake(d)});
-      const j=await r.json();
-      if(!j.ok){ toast(j.error||'Could not save overlay','err'); return null; }
-      await loadSaved(); gsel={type:'saved',id:sl}; renderGallery();
-      if(!silent) toast('Saved to your overlays - URL ready for OBS','ok');
-      return sl;
-    }catch(e){ toast('Could not save overlay','err'); return null; }
+  function copyGallery(){ if(gsel) copyText(selUrl(),'Overlay URL'); }
+  // Restore the built-in overlays: wipe the Studio overlays + re-seed presets.
+  async function restoreDefaults(){
+    if(!confirm('Restore default overlays?\n\nThis DELETES ALL your Studio overlays (the presets and anything you made) and reinstalls the built-in set. Hand-written .html files are kept.\n\nThis cannot be undone.')) return;
+    try{ await fetch('/overlays/reset',{method:'POST'}); }catch(e){ toast('Could not restore overlays','err'); return; }
+    await seedPresets();
+    toast('Default overlays restored','ok');
   }
   async function deleteFromGallery(slugId){
     const o=savedList.find(x=>x.slug===slugId);
@@ -3785,13 +3755,6 @@ <h4 id="dest-form-title">New destination</h4>
     }
   }
 
-  function loadPreset(i){
-    doc = clone(IC().PRESETS[i]); slug=null; sel=null;
-    doc.widgets.forEach((w,n)=>{ w.id='w'+(n+1); });
-    $('st-name').value = doc.name;
-    renderStates(); renderLeft(); rebake(); renderProps(); resetHistory();
-    toast('Loaded "'+doc.name+'" - edit freely, the original preset is untouched','ok');
-  }
   function addWidget(kind){
     const w = IC().defaultWidget(kind, nextId());
     doc.widgets.push(w); sel=w.id;
@@ -4074,13 +4037,14 @@ <h4 id="dest-form-title">New destination</h4>
       else { toast(j.error||'Save failed','err'); slug=null; }
     }catch(e){ toast('Save failed','err'); slug=null; }
   }
-  function duplicate(){ slug=null; doc.name=(doc.name||'Overlay')+' copy'; $('st-name').value=doc.name; updateUrlLabel(); toast('Duplicated - Save to write a new file','info'); }
   function copyUrl(){ if(!slug){ toast('Save the overlay first to get a URL','info'); return; } copyText(location.origin+'/overlay/'+slug+'.html','Overlay URL'); }
   // ---- overflow menu: save-as / rename / export / import / delete ----
   function toggleMenu(ev){ ev.stopPropagation(); const p=$('st-menu-pop'); if(p) p.hidden=!p.hidden; }
+  // Save a separate copy under a new slug (so it never overwrites the current
+  // overlay). The user can rename afterwards.
+  function saveAsNew(){ slug=null; doc.name=(doc.name||'Overlay')+' copy'; $('st-name').value=doc.name; return save(); }
   function menu(action){ const p=$('st-menu-pop'); if(p) p.hidden=true;
     if(action==='delete') return deleteOverlay();
-    if(action==='saveas'){ slug=null; doc.name=(doc.name||'Overlay')+' copy'; $('st-name').value=doc.name; return save(); }
     if(action==='rename') return renameOverlay();
     if(action==='export') return exportDoc();
     if(action==='import') return importDoc();
@@ -4115,6 +4079,25 @@ <h4 id="dest-form-title">New destination</h4>
     try{ savedList = await (await fetch('/overlays')).json(); if(!Array.isArray(savedList)) savedList=[]; }catch(e){ savedList=[]; }
     if(left==='mine' && $('ov-studio') && !$('ov-studio').hidden) renderLeft();
   }
+  // First-run seeding: bake the built-in presets to real overlay files so the
+  // gallery is one uniform list (every item has a working URL). Gated by the
+  // server `overlays_seeded` flag (set via POST /overlays/seeded) so deleted
+  // presets stay gone. Skips any slug that already exists.
+  let seeding=false;
+  async function seedPresets(){
+    if(seeding || !IC()) return; seeding=true;
+    try{
+      await loadSaved();
+      for(let i=0;i<IC().PRESETS.length;i++){
+        const p=IC().PRESETS[i]; const slug=slugify(p.name);
+        if(savedList.some(o=>o.slug===slug)) continue;
+        const d=clone(p); d.widgets.forEach((w,n)=>{ w.id='w'+(n+1); });
+        await fetch('/overlays/'+encodeURIComponent(slug),{method:'POST',headers:{'Content-Type':'text/html'},body:IC().bake(d)});
+      }
+      await fetch('/overlays/seeded',{method:'POST'});
+      await loadSaved(); renderGallery();
+    }catch(e){}finally{ seeding=false; }
+  }
 
   window.addEventListener('resize', ()=>{
     if($('ov-studio') && !$('ov-studio').hidden) fitScale();
@@ -4145,9 +4128,9 @@ <h4 id="dest-form-title">New destination</h4>
   });
   document.addEventListener('click', ()=>{ const p=$('st-menu-pop'); if(p && !p.hidden) p.hidden=true; });
 
-  return { show, openStudio, openStudioPreset, backToGallery, previewSim, deleteFromGallery,
-    useOverlay, togglePresetHide, copyGallery, undo, redo, toggleMenu, menu,
-    leftTab, selectState, play, save, duplicate, copyUrl, deleteOverlay, loadSaved,
+  return { show, openStudio, newOverlay, duplicateOverlay, backToGallery, previewSim, deleteFromGallery,
+    seedPresets, restoreDefaults, toggleAutohide, copyGallery, undo, redo, toggleMenu, menu,
+    leftTab, selectState, play, save, saveAsNew, copyUrl, deleteOverlay, loadSaved,
     set, setNum, setBase, setCustom, setState, setStateNum, setStateText, setAnim, setAnimNum,
     setHideAfter, toggleHide, setLS, setStateOffset, resetStateOffset, toggleVis, visOnly, visAll, applyColorAll, applyAnimAll, copyLookAll,
     setTheme, setGrad, toggleGrad, setGradAnim, align, animAdd, animDel, animSet, uploadImage, insertVar,

From 082035a40c1b82ccd6fcb2a82da775de088815d7 Mon Sep 17 00:00:00 2001
From: Soulhackzlol <52952716+Soulhackzlol@users.noreply.github.com>
Date: Wed, 10 Jun 2026 14:36:58 +0200
Subject: [PATCH 2/3] docs+overlay: refresh docs, retire legacy overlays,
 polish rework

Docs caught up to the Studio/one-list model:
- README / README.es overlay sections lead with the Studio (copy a URL,
  edit, Save / Save as new); the older ?style= URLs noted as the no-setup
  path.
- overlays/README rewritten around the Studio + the /state contract (fixes
  bitrate_kbps placement); CONTRIBUTING points new overlays at the Studio
  PRESETS.

Retire the bundled legacy overlays (minimal/corner/strip): files removed,
startup no longer drops them (main.rs embeds only the README + the
hand-write example now). Serving is unchanged - any dropped .html and the
/overlay?style= URLs still render.

Bug-hunt fixes on the new flow:
- Studio overlay cards no longer show an empty tag pill (:empty hidden).
- Gallery "Auto preview" keeps the widget on screen instead of demoing
  auto-hide, which left the canvas empty for most of the cycle.
- Removed dead CSS left by the rework (filter chips, preset/editable tag
  variants, old studio preset-list classes).
---
 .gitignore            |   5 +-
 CHANGELOG.md          |   6 ++
 CONTRIBUTING.md       |   2 +-
 README.es.md          |  10 ++--
 README.md             |  10 ++--
 overlays/README.md    |  50 ++++++++++------
 overlays/corner.html  | 133 ------------------------------------------
 overlays/minimal.html | 130 -----------------------------------------
 overlays/strip.html   | 133 ------------------------------------------
 src/main.rs           |  57 ++++--------------
 web/index.html        |  20 ++-----
 11 files changed, 65 insertions(+), 491 deletions(-)
 delete mode 100644 overlays/corner.html
 delete mode 100644 overlays/minimal.html
 delete mode 100644 overlays/strip.html

diff --git a/.gitignore b/.gitignore
index 3ef53f9..71861b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,11 +25,8 @@ desktop.ini
 
 # Studio + seeded overlays are generated per-install at runtime (the
 # dashboard bakes the built-in presets on first run). Only the shipped
-# hand-written overlays are tracked; everything else here is local.
+# hand-write example is tracked; everything else here is local.
 overlays/*.html
-!overlays/minimal.html
-!overlays/corner.html
-!overlays/strip.html
 !overlays/custom-template.html
 overlays/*/
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c22d080..30eed3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,6 +35,12 @@ the baked default.
 overlays and reinstalls the built-in set, with a confirmation that says
 so plainly. Legacy hand-written files are left untouched.
 
+**Legacy overlays retired.** The bundled `minimal` / `corner` / `strip`
+hand-written overlays are removed (superseded by the Studio presets); the
+startup no longer drops them. Serving still works - any `.html` you put in
+`overlays/` is served, and the older `/overlay?style=…` URLs still render.
+The `custom-template.html` hand-write example stays.
+
 ## [0.1.5] - Overlay Studio (experimental)
 
 A no-code visual editor for building OBS browser-source overlays that
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2802944..4810015 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -20,7 +20,7 @@ Open a [Discussion](https://github.com/Soulhackzlol/InstantClone/discussions). I
 ## Stuff I'd love help with
 
 - Cross-platform support (macOS, Linux). The code is mostly portable; [tray.rs](src/tray.rs), [portcheck.rs](src/portcheck.rs), and [sysstat.rs](src/sysstat.rs) have Windows-specific paths that need parallel implementations.
-- New overlay styles. Drop new `.html` files into [overlays/](overlays/) and they're served automatically.
+- New overlay presets + Studio widgets. Built-in overlays are the `PRESETS` in [web/overlay-runtime.js](web/overlay-runtime.js) (the dashboard seeds them on first run); new widgets/animations live in the same file. A hand-written `.html` dropped into [overlays/](overlays/) is still served as-is.
 - Real-world bug reports from streaming with the proxy in the loop.
 
 ## Probably not
diff --git a/README.es.md b/README.es.md
index 5deac62..2768715 100644
--- a/README.es.md
+++ b/README.es.md
@@ -186,15 +186,13 @@ Un panel de 280×340 con el indicador, los controles de armar/activar/desarmar/c
 
 ### Overlays como browser-source
 
-Mete uno como browser-source para mostrar el delay en directo:
+La pestaña **Overlay** es un Studio sin código. Elige un overlay ya hecho, copia su URL y métela en OBS — o abre cualquiera en el Studio para rediseñarlo (colores por estado, widgets, animaciones) y darle a **Save** o **Save as new**.
 
-<pre><code>http://127.0.0.1:7799/overlay?style=corner&amp;lang=es</code></pre>
+<pre><code>http://127.0.0.1:7799/overlay/whisper.html</code></pre>
 
-<sub><b>Estilos</b></sub> &nbsp;`minimal` · `corner` · `strip` · `focus` · `broadcast` · `ticker`
+<sub><b>¿Sin configurar?</b></sub> &nbsp;Los estilos rápidos de siempre siguen funcionando desde la URL: <code>/overlay?style=corner&amp;lang=es</code> &nbsp;<sub>(`minimal · corner · strip · focus · broadcast · ticker`, idiomas `en · es · pt · fr · de`)</sub>
 
-<sub><b>Idiomas</b></sub> &nbsp;`en` · `es` · `pt` · `fr` · `de`
-
-Suelta cualquier `.html` en `./overlays/` y se sirve en `/overlay/tu-archivo.html`.
+O suelta cualquier `.html` en `./overlays/` y se sirve en `/overlay/tu-archivo.html`.
 
 </td>
 </tr>
diff --git a/README.md b/README.md
index 9a2a14b..afecbb8 100644
--- a/README.md
+++ b/README.md
@@ -186,15 +186,13 @@ A 280×340 panel with the readout, arm / activate / disarm / cut controls, and l
 
 ### Browser-source overlays
 
-Drop one in as a browser-source for an on-stream readout:
+The **Overlay** tab is a no-code Studio. Pick a ready-made overlay, copy its URL, and drop it into OBS — or open any in the Studio to redesign it (per-state colours, widgets, animations) and **Save** or **Save as new**.
 
-<pre><code>http://127.0.0.1:7799/overlay?style=corner&amp;lang=es</code></pre>
+<pre><code>http://127.0.0.1:7799/overlay/whisper.html</code></pre>
 
-<sub><b>Styles</b></sub> &nbsp;`minimal` · `corner` · `strip` · `focus` · `broadcast` · `ticker`
+<sub><b>No setup?</b></sub> &nbsp;The older quick styles still work straight from a URL: <code>/overlay?style=corner&amp;lang=es</code> &nbsp;<sub>(`minimal · corner · strip · focus · broadcast · ticker`, langs `en · es · pt · fr · de`)</sub>
 
-<sub><b>Languages</b></sub> &nbsp;`en` · `es` · `pt` · `fr` · `de`
-
-Drop any `.html` into `./overlays/` and it's served at `/overlay/your-file.html`.
+Or drop any `.html` into `./overlays/` and it's served at `/overlay/your-file.html`.
 
 </td>
 </tr>
diff --git a/overlays/README.md b/overlays/README.md
index e505da6..cfff9d5 100644
--- a/overlays/README.md
+++ b/overlays/README.md
@@ -1,14 +1,24 @@
-# InstantClone overlay plugins
+# InstantClone overlays
 
-Drop any `.html` file into this folder and it becomes an OBS browser-source
-overlay. The dashboard's *Overlay* tab lists everything in here next to the
-six built-in styles, and gives you the URL to paste into OBS:
+On-stream browser-source widgets that show your delay state.
 
-    http://127.0.0.1:7799/overlay/your-file.html?lang=en
+Most people never touch this folder. The dashboard's **Overlay** tab is a
+no-code **Studio**: it ships with ready-made overlays you copy a URL from
+and drop into OBS, and you can open any of them to redesign (per-state
+colours, widgets, animations) and **Save** or **Save as new**. The
+built-in overlays are baked to real files in this folder on first run, so
+everything you see in the tab is a plain `.html` with its own URL:
+
+    http://127.0.0.1:7799/overlay/your-file.html
+
+You can still hand-write one: any `.html` you drop in here shows up in the
+Overlay tab as a "legacy" (hand-written) overlay. The only contract is the
+URL above and the `/state` JSON below.
 
 ## What the proxy will tell you
 
-Every overlay can fetch live state from `GET /state`:
+Every overlay can fetch live state from `GET /state` (or subscribe to the
+`GET /events` SSE stream, which pushes the same JSON on every change):
 
     {
       "phase": "idle" | "preparing" | "ready" | "active",
@@ -20,8 +30,7 @@ Every overlay can fetch live state from `GET /state`:
       "egress_alive":     <bool>,  // at least one destination forwarding
       "destinations_alive": <u32>,
       "destinations_total": <u32>,
-      "bitrate_kbps":     <u32>,   // ingest bitrate
-      "stats": { "tags_sent", "bytes_sent", "cuts" }
+      "stats": { "tags_sent", "bytes_sent", "cuts", "bitrate_kbps" }
     }
 
 Typical poll loop:
@@ -37,15 +46,20 @@ Typical poll loop:
       tick(); setInterval(tick, 500);
     </script>
 
-## Starting points
+## Writing your own
 
-- **`custom-template.html`** - copy this. It's a small working overlay
+- **Easiest:** the Studio. Pick an overlay in the Overlay tab, **Edit in
+  Studio**, then **Save** (overwrite) or **Save as new**.
+- **By hand:** copy **`custom-template.html`** - a small working overlay
   with comments explaining every part of the contract above. Rename the
-  copy to whatever you want; it'll appear in the dashboard.
-- **The six built-in styles** (`minimal`, `corner`, `strip`, `focus`,
-  `broadcast`, `ticker`) are served from `/overlay?style=…` and live in
-  [`src/web.rs`](../src/web.rs)'s `overlay_html()`. Open one in DevTools
-  if you want to crib the auto-dim, number-tween, or phase-halo
-  behaviour into your own design.
-
-The only contract is the URL above and the `/state` JSON.
+  copy to whatever you want; it appears in the Overlay tab.
+- **No file at all:** the legacy quick styles still work straight from a
+  URL - `/overlay?style=minimal|corner|strip|focus|broadcast|ticker` with
+  an optional `?lang=en|es|pt|fr|de`. They live in
+  [`src/web.rs`](../src/web.rs)'s `overlay_html()`; open one in DevTools to
+  crib the auto-dim, number-tween, or phase-halo behaviour.
+
+> The Studio's built-in overlays are seeded once and then yours to edit or
+> delete; **Restore default overlays** (in the Overlay tab) reinstalls
+> them. Seeded/Studio overlays are local, per-install files and aren't
+> tracked in git - only the hand-written ones here are.
diff --git a/overlays/corner.html b/overlays/corner.html
deleted file mode 100644
index 33f2094..0000000
--- a/overlays/corner.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<!doctype html>
-<!--
-  InstantClone overlay - "corner".
-
-  Bottom-right ring gauge. The ring fills clockwise as the buffer
-  rebuilds toward the armed delay, then settles solid when active.
-  No status text at all - the ring colour is the status:
-    grey   = idle (or ingest down)
-    amber  = buffering toward armed
-    cyan   = ready / active
-    red    = egress dropped while ingest is publishing
-  Number in the centre tweens; sub-line under it just says "s".
--->
-<html><head><meta charset="utf-8"><title>Delay (corner)</title>
-<style>
-*{box-sizing:border-box}
-html,body{margin:0;padding:0;background:transparent;width:100%;height:100%;
-  font-family:'Inter','SF Pro Display',-apple-system,Segoe UI,Roboto,sans-serif;
-  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
-.wrap{position:fixed;right:32px;bottom:32px;
-  width:140px;height:140px;
-  display:flex;align-items:center;justify-content:center;
-  color:rgba(255,255,255,.55);
-  transition:color .55s ease,opacity .55s ease;
-  animation:enter .55s cubic-bezier(.16,1,.3,1) both}
-@keyframes enter{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
-.wrap.idle{opacity:.35}
-.wrap.ok{color:#5ac8fa}
-.wrap.amber{color:#ffb73a}
-.wrap.red{color:#ff5a5a}
-.ring{position:absolute;inset:0;transform:rotate(-90deg)}
-.ring circle{fill:none;stroke-width:4}
-.ring .track{stroke:rgba(255,255,255,.08)}
-.ring .fill{stroke:currentColor;stroke-linecap:round;
-  filter:drop-shadow(0 0 8px currentColor);
-  transition:stroke-dashoffset .42s cubic-bezier(.16,1,.3,1),stroke .35s ease}
-.center{position:relative;text-align:center;line-height:1}
-.v{display:block;font-size:38px;font-weight:700;letter-spacing:-1.4px;
-  font-variant-numeric:tabular-nums;color:#fff;
-  text-shadow:0 0 12px currentColor;
-  transition:color .35s ease}
-.wrap.idle .v{color:rgba(255,255,255,.7);text-shadow:none}
-.u{display:block;font-size:11px;font-weight:600;
-  letter-spacing:2.2px;text-transform:uppercase;
-  margin-top:4px;color:currentColor;opacity:.78}
-.wrap.live .v{animation:pulse 3s ease-in-out infinite}
-@keyframes pulse{0%,100%{text-shadow:0 0 12px currentColor}
-  50%{text-shadow:0 0 22px currentColor}}
-</style></head><body>
-<div class="wrap idle" id="w">
-  <svg class="ring" viewBox="0 0 100 100">
-    <circle class="track" cx="50" cy="50" r="46"/>
-    <!-- stroke-dasharray = circumference of r=46 ≈ 289.027; dashoffset
-         starts at full so the visible arc is 0, then animates down. -->
-    <circle class="fill" id="ring" cx="50" cy="50" r="46"
-            stroke-dasharray="289" stroke-dashoffset="289"/>
-  </svg>
-  <div class="center">
-    <span class="v" id="v">0.0</span>
-    <span class="u" id="u">sec</span>
-  </div>
-</div>
-<script>
-'use strict';
-const w = document.getElementById('w');
-const vEl = document.getElementById('v');
-const ring = document.getElementById('ring');
-const CIRC = 289;
-// ?autohide=off keeps the ring at full opacity during passthrough.
-const AUTOHIDE = new URLSearchParams(location.search).get('autohide') !== 'off';
-
-let tween = {raf:0};
-function tweenTo(secs){
-  const from = parseFloat(vEl.textContent) || 0;
-  if (Math.abs(secs - from) < 0.05){ vEl.textContent = secs.toFixed(1); return; }
-  cancelAnimationFrame(tween.raf);
-  const start = performance.now(), dur = 400;
-  function step(now){
-    const t = Math.min(1, (now - start) / dur);
-    const e = 1 - Math.pow(1 - t, 3);
-    vEl.textContent = (from + (secs - from) * e).toFixed(1);
-    if (t < 1) tween.raf = requestAnimationFrame(step);
-  }
-  tween.raf = requestAnimationFrame(step);
-}
-
-// Fill is fraction-of-target. Preparing: buffer / armed. Ready / Active:
-// always 100% (the ring "completes" once the buffer is full).
-function paint(s){
-  w.classList.remove('idle','ok','amber','red','live');
-  let displayMs = 0, fillFrac = 0;
-  if (!s.ingest_alive || s.phase === 'idle'){
-    // .idle dims the ring + numeric. AUTOHIDE off keeps full opacity.
-    if (AUTOHIDE) w.classList.add('idle');
-  } else if (s.phase === 'preparing'){
-    w.classList.add('amber');
-    displayMs = s.buffer_fill_ms || 0;
-    const target = s.armed_delay_ms || 1;
-    fillFrac = Math.max(0, Math.min(1, displayMs / target));
-  } else if (s.phase === 'ready'){
-    w.classList.add('ok');
-    displayMs = s.armed_delay_ms || 0;
-    fillFrac = 1;
-  } else {
-    w.classList.add('ok','live');
-    displayMs = s.target_delay_ms || s.armed_delay_ms || s.current_delay_ms || 0;
-    fillFrac = 1;
-  }
-  if (s.ingest_alive && s.destinations_total > 0 && s.destinations_alive === 0){
-    w.classList.remove('idle','ok','amber'); w.classList.add('red');
-    fillFrac = 1;
-  }
-  ring.style.strokeDashoffset = String(CIRC * (1 - fillFrac));
-  tweenTo(displayMs / 1000);
-}
-
-function start(){
-  if (window.EventSource){
-    try {
-      const es = new EventSource('/events');
-      es.onmessage = e => { try { paint(JSON.parse(e.data)); } catch(_){} };
-      es.onerror = () => { es.close(); setTimeout(startPolling, 1000); };
-      return;
-    } catch(_){}
-  }
-  startPolling();
-}
-function startPolling(){
-  async function tick(){ try { paint(await (await fetch('/state')).json()); } catch(_){} }
-  tick(); setInterval(tick, 500);
-}
-start();
-</script></body></html>
diff --git a/overlays/minimal.html b/overlays/minimal.html
deleted file mode 100644
index b555220..0000000
--- a/overlays/minimal.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!doctype html>
-<!--
-  InstantClone overlay - "minimal".
-
-  Top-left whisper. The whole thing is the delay number + a colour cue.
-  No "OBS"/"LIVE" text labels - state is encoded in the number's tint and
-  glow:
-    grey      = ingest disconnected (or idle/passthrough)
-    amber     = buffer is filling toward the armed delay
-    cyan      = armed, waiting for activate
-    cyan-lit  = delay is live (subtle breathing pulse)
-    red       = egress dropped while ingest is still publishing
-  The number itself tweens between values so arming reads as a build-up.
--->
-<html><head><meta charset="utf-8"><title>Delay (minimal)</title>
-<style>
-:root{
-  --grey:rgba(255,255,255,.55);
-  --amber:#ffb73a;
-  --cyan:#5ac8fa;
-  --red:#ff5a5a;
-}
-*{box-sizing:border-box}
-html,body{margin:0;padding:0;background:transparent;width:100%;height:100%;
-  font-family:'Inter','SF Pro Display',-apple-system,Segoe UI,Roboto,sans-serif;
-  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
-.wrap{position:fixed;left:24px;top:24px;
-  display:flex;align-items:baseline;gap:6px;
-  color:var(--grey);
-  /* state colour comes in via the --c variable; transition is what makes
-     it READ as a smooth state change rather than a snap. */
-  transition:color .55s ease,opacity .55s ease,filter .55s ease;
-  animation:enter .5s cubic-bezier(.16,1,.3,1) both}
-@keyframes enter{from{opacity:0;transform:translateY(-4px) scale(.98)}
-  to{opacity:1;transform:none}}
-.wrap.idle{opacity:.32;filter:blur(.3px)}
-.wrap.ok{color:var(--cyan)}
-.wrap.amber{color:var(--amber)}
-.wrap.red{color:var(--red)}
-/* Active (delay live) breathes very gently to signal "the clock is
-   running on a delayed feed" without strobing the viewer. */
-.wrap.live .v{animation:breathe 3.2s ease-in-out infinite}
-@keyframes breathe{0%,100%{text-shadow:0 0 18px currentColor}
-  50%{text-shadow:0 0 28px currentColor}}
-.v{font-size:38px;font-weight:700;letter-spacing:-1.5px;line-height:1;
-  font-variant-numeric:tabular-nums;
-  text-shadow:0 0 18px currentColor;
-  transition:text-shadow .35s ease}
-.u{font-size:18px;font-weight:500;opacity:.7;letter-spacing:-.2px}
-</style></head><body>
-<div class="wrap idle" id="w"><span class="v" id="v">0.0</span><span class="u">s</span></div>
-<script>
-'use strict';
-const w = document.getElementById('w');
-const vEl = document.getElementById('v');
-// ?autohide=off keeps the overlay at full opacity during passthrough.
-// Default (no param, or ?autohide=on) dims to ~32% so the viewer's eye
-// doesn't snag on a static 0.0s.
-const AUTOHIDE = new URLSearchParams(location.search).get('autohide') !== 'off';
-
-// Tween the number between values with an ease-out so a phase change
-// reads as a smooth ramp instead of a snap. 400 ms hits a sweet spot
-// between "I see it move" and "it's already settled".
-let tween = {raf:0, target:0};
-function tweenTo(secs){
-  const from = parseFloat(vEl.textContent) || 0;
-  if (Math.abs(secs - from) < 0.05){ vEl.textContent = secs.toFixed(1); tween.target = secs; return; }
-  cancelAnimationFrame(tween.raf);
-  const start = performance.now(), dur = 400;
-  tween.target = secs;
-  function step(now){
-    const t = Math.min(1, (now - start) / dur);
-    const e = 1 - Math.pow(1 - t, 3);
-    vEl.textContent = (from + (secs - from) * e).toFixed(1);
-    if (t < 1) tween.raf = requestAnimationFrame(step);
-  }
-  tween.raf = requestAnimationFrame(step);
-}
-
-// Translate /state into one of five visual states. The "ok" class is
-// the default-armed colour (cyan); "live" adds the breathing pulse on
-// top of whatever colour class is set.
-function paint(s){
-  w.classList.remove('idle','ok','amber','red','live');
-  let displayMs = 0;
-  // When AUTOHIDE is off, the .idle class never gets applied -the
-  // overlay stays at full opacity even during passthrough so the
-  // streamer's preview window keeps reading at-a-glance.
-  if (!s.ingest_alive){
-    if (AUTOHIDE) w.classList.add('idle');
-  } else if (s.phase === 'idle'){
-    if (AUTOHIDE) w.classList.add('idle');
-  } else if (s.phase === 'preparing'){
-    w.classList.add('amber');
-    displayMs = s.buffer_fill_ms || 0;
-  } else if (s.phase === 'ready'){
-    w.classList.add('ok');
-    displayMs = s.armed_delay_ms || 0;
-  } else { // active
-    w.classList.add('ok','live');
-    displayMs = s.target_delay_ms || s.armed_delay_ms || s.current_delay_ms || 0;
-  }
-  // Egress failure trumps the phase colour - the streamer needs to
-  // notice the dropped destination immediately, viewer or not.
-  if (s.ingest_alive && s.destinations_total > 0 && s.destinations_alive === 0){
-    w.classList.remove('idle','ok','amber'); w.classList.add('red');
-  }
-  tweenTo(displayMs / 1000);
-}
-
-// Prefer SSE - single long-lived socket, server pushes on change. Fall
-// back to polling for environments where EventSource isn't available
-// (older OBS CEF builds, network proxies that buffer text/event-stream).
-function start(){
-  if (window.EventSource){
-    try {
-      const es = new EventSource('/events');
-      es.onmessage = e => { try { paint(JSON.parse(e.data)); } catch(_){} };
-      es.onerror = () => { es.close(); setTimeout(startPolling, 1000); };
-      return;
-    } catch(_){}
-  }
-  startPolling();
-}
-function startPolling(){
-  async function tick(){ try { paint(await (await fetch('/state')).json()); } catch(_){} }
-  tick(); setInterval(tick, 500);
-}
-start();
-</script></body></html>
diff --git a/overlays/strip.html b/overlays/strip.html
deleted file mode 100644
index 75de1f2..0000000
--- a/overlays/strip.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<!doctype html>
-<!--
-  InstantClone overlay - "strip".
-
-  A 2 px line at the very bottom of the frame. The line's WIDTH is the
-  buffer fill (0 → armed), its COLOUR is the state:
-    transparent = idle (line is invisible)
-    amber       = buffering
-    cyan-glow   = active / ready
-    red         = egress dropped while ingest is up
-  The delay number rides on the far right of the line, small and
-  understated, only visible once the buffer starts filling.
--->
-<html><head><meta charset="utf-8"><title>Delay (strip)</title>
-<style>
-*{box-sizing:border-box}
-html,body{margin:0;padding:0;background:transparent;width:100%;height:100%;
-  font-family:'Inter','SF Pro Display',-apple-system,Segoe UI,Roboto,sans-serif;
-  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
-.bar{position:fixed;left:0;right:0;bottom:0;height:36px;
-  display:flex;align-items:flex-end;
-  color:rgba(255,255,255,.7);
-  pointer-events:none}
-.track{position:absolute;left:0;right:0;bottom:0;height:2px;
-  background:rgba(255,255,255,.04)}
-.fill{position:absolute;left:0;bottom:0;height:2px;width:0;
-  background:currentColor;
-  box-shadow:0 0 12px currentColor,0 -2px 18px currentColor;
-  transition:width .42s cubic-bezier(.16,1,.3,1),background-color .35s ease,opacity .35s ease;
-  opacity:0}
-.bar.show .fill{opacity:1}
-.bar.idle{color:rgba(255,255,255,.5)}
-.bar.amber{color:#ffb73a}
-.bar.ok{color:#5ac8fa}
-.bar.red{color:#ff5a5a}
-/* When live, the trailing edge of the line gently breathes so the
-   streamer notices the delay is engaged. */
-.bar.live .fill{animation:pulse 3s ease-in-out infinite}
-@keyframes pulse{0%,100%{box-shadow:0 0 12px currentColor,0 -2px 18px currentColor}
-  50%{box-shadow:0 0 22px currentColor,0 -2px 28px currentColor}}
-.label{position:absolute;right:18px;bottom:10px;
-  display:flex;align-items:baseline;gap:4px;
-  font-variant-numeric:tabular-nums;
-  color:currentColor;
-  opacity:0;
-  transform:translateY(4px);
-  transition:opacity .42s ease,transform .42s ease}
-.bar.show .label{opacity:1;transform:none}
-.v{font-size:22px;font-weight:700;letter-spacing:-.6px;line-height:1;
-  text-shadow:0 0 12px currentColor}
-.u{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
-  opacity:.7}
-</style></head><body>
-<div class="bar idle" id="w">
-  <div class="track"></div>
-  <div class="fill" id="fill"></div>
-  <div class="label"><span class="v" id="v">0.0</span><span class="u">s</span></div>
-</div>
-<script>
-'use strict';
-const w = document.getElementById('w');
-const fillEl = document.getElementById('fill');
-const vEl = document.getElementById('v');
-// ?autohide=off keeps the strip visible during passthrough. Default
-// behaviour is to stay invisible (no .show class) at idle, which is
-// already the autohide semantics for this style -so the param is a
-// no-op here except for completeness with the other overlays.
-const AUTOHIDE = new URLSearchParams(location.search).get('autohide') !== 'off';
-
-let tween = {raf:0};
-function tweenTo(secs){
-  const from = parseFloat(vEl.textContent) || 0;
-  if (Math.abs(secs - from) < 0.05){ vEl.textContent = secs.toFixed(1); return; }
-  cancelAnimationFrame(tween.raf);
-  const start = performance.now(), dur = 400;
-  function step(now){
-    const t = Math.min(1, (now - start) / dur);
-    const e = 1 - Math.pow(1 - t, 3);
-    vEl.textContent = (from + (secs - from) * e).toFixed(1);
-    if (t < 1) tween.raf = requestAnimationFrame(step);
-  }
-  tween.raf = requestAnimationFrame(step);
-}
-
-function paint(s){
-  w.classList.remove('idle','ok','amber','red','live','show');
-  let displayMs = 0, fillFrac = 0, show = false;
-  if (!s.ingest_alive || s.phase === 'idle'){
-    w.classList.add('idle');
-    // AUTOHIDE off: surface a faint always-on line at full width so
-    // the streamer knows the overlay IS rendering. Colour stays idle
-    // grey -no glow, no breathing, just a hairline at the bottom.
-    if (!AUTOHIDE){ w.classList.add('show'); fillFrac = 1; }
-  } else if (s.phase === 'preparing'){
-    w.classList.add('amber','show');
-    show = true;
-    displayMs = s.buffer_fill_ms || 0;
-    fillFrac = Math.max(0, Math.min(1, displayMs / (s.armed_delay_ms || 1)));
-  } else if (s.phase === 'ready'){
-    w.classList.add('ok','show'); show = true;
-    displayMs = s.armed_delay_ms || 0;
-    fillFrac = 1;
-  } else {
-    w.classList.add('ok','live','show'); show = true;
-    displayMs = s.target_delay_ms || s.armed_delay_ms || s.current_delay_ms || 0;
-    fillFrac = 1;
-  }
-  if (s.ingest_alive && s.destinations_total > 0 && s.destinations_alive === 0){
-    w.classList.remove('idle','ok','amber');
-    w.classList.add('red','show');
-    fillFrac = 1;
-  }
-  fillEl.style.width = (fillFrac * 100).toFixed(2) + '%';
-  tweenTo(displayMs / 1000);
-}
-
-function start(){
-  if (window.EventSource){
-    try {
-      const es = new EventSource('/events');
-      es.onmessage = e => { try { paint(JSON.parse(e.data)); } catch(_){} };
-      es.onerror = () => { es.close(); setTimeout(startPolling, 1000); };
-      return;
-    } catch(_){}
-  }
-  startPolling();
-}
-function startPolling(){
-  async function tick(){ try { paint(await (await fetch('/state')).json()); } catch(_){} }
-  tick(); setInterval(tick, 500);
-}
-start();
-</script></body></html>
diff --git a/src/main.rs b/src/main.rs
index b77c3a0..26073c0 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -636,10 +636,11 @@ fn open_browser(url: &str) {
     let _ = Command::new("xdg-open").arg(url).spawn();
 }
 
-/// Create the overlays directory (if missing) and write any of the three
-/// built-in templates that don't already exist on disk. Idempotent - safe
-/// to call on every startup. Users can freely edit the files; the next
-/// run won't overwrite them.
+/// Create the overlays directory (if missing) and drop the folder README
+/// plus the hand-write example, if absent. Idempotent - safe on every
+/// startup; user edits are never overwritten. The built-in *overlays*
+/// themselves are no longer dropped here: the dashboard bakes the Studio
+/// presets to real files on first load (see `seedPresets`).
 fn ensure_overlays_dir(dir: &std::path::Path) {
     let _ = std::fs::create_dir_all(dir);
     let drop = |name: &str, body: &str| {
@@ -648,48 +649,12 @@ fn ensure_overlays_dir(dir: &std::path::Path) {
             let _ = std::fs::write(&path, body);
         }
     };
-    drop("minimal.html", OVERLAY_MINIMAL);
-    drop("corner.html", OVERLAY_CORNER);
-    drop("strip.html", OVERLAY_STRIP);
     drop("README.md", OVERLAY_README);
+    drop("custom-template.html", OVERLAY_CUSTOM_TEMPLATE);
 }
 
-const OVERLAY_README: &str = r#"# InstantClone overlay plugins
-
-Any `.html` file you drop into this folder becomes an OBS browser-source
-overlay. The dashboard's *Overlay* tab lists them and gives you the URL
-to paste into OBS.
-
-Each overlay can fetch live state from the proxy:
-
-    GET /state  →  JSON  {
-      phase: "idle"|"preparing"|"ready"|"active",
-      current_delay_ms, armed_delay_ms, buffer_fill_ms, ...
-      ingest_alive, egress_alive,
-      destinations_alive, destinations_total,
-      destinations: [ { id, name, enabled, alive, bitrate_kbps, ... } ],
-      stats: { bitrate_kbps, cuts, ingest_disconnects, ... }
-    }
-
-Recommended pattern:
-
-    <script>
-      async function tick(){
-        try { const s = await (await fetch('/state')).json();
-              document.getElementById('v').textContent = (s.current_delay_ms/1000).toFixed(1);
-            } catch(_) {}
-      }
-      tick(); setInterval(tick, 500);
-    </script>
-
-The three bundled overlays (minimal, corner, strip) are useful starting
-points - copy one and modify.
-"#;
-
-// Overlay templates are embedded straight from the canonical files in
-// ../overlays/ so a fresh install drops the *same* HTML that lives in
-// the repo. include_str! keeps the constant and the on-disk template
-// in lockstep automatically - no risk of the two drifting silently.
-const OVERLAY_MINIMAL: &str = include_str!("../overlays/minimal.html");
-const OVERLAY_CORNER: &str = include_str!("../overlays/corner.html");
-const OVERLAY_STRIP: &str = include_str!("../overlays/strip.html");
+// Embedded straight from the canonical files in ../overlays/ so a binary
+// install drops the *same* content that lives in the repo. include_str!
+// keeps them in lockstep - no risk of drifting silently.
+const OVERLAY_README: &str = include_str!("../overlays/README.md");
+const OVERLAY_CUSTOM_TEMPLATE: &str = include_str!("../overlays/custom-template.html");
diff --git a/web/index.html b/web/index.html
index 02d765f..bd30cbc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -610,12 +610,6 @@
 .ovg-scale{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:top left}
 .ovg-scale iframe{width:1920px;height:1080px;border:0;background:transparent;display:block}
 .ovg-list{display:flex;flex-direction:column;gap:7px;padding:10px 14px 14px;overflow-y:auto;max-height:520px}
-.ovg-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);margin:8px 2px 2px}
-.ovg-filter{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
-.ovg-fchip{appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:999px;
-  color:var(--fg-3);font-size:11px;font-weight:600;padding:5px 12px;cursor:pointer;transition:.12s}
-.ovg-fchip:hover{border-color:var(--line-2);color:var(--fg)}
-.ovg-fchip.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
 .ovg-card{appearance:none;text-align:left;background:var(--surface);border:1px solid var(--line);
   border-radius:10px;padding:11px 13px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
   transition:border-color .12s,transform .12s;position:relative}
@@ -625,10 +619,8 @@
 .ovg-card-name{font-size:13px;font-weight:600;color:var(--fg)}
 .ovg-card-hint{font-size:10.5px;color:var(--fg-4);line-height:1.4}
 .ovg-card-tag{position:absolute;top:9px;right:11px;font-size:9px;font-weight:700;letter-spacing:.06em;
-  padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--fg-3)}
-.ovg-card-tag.editable{background:color-mix(in oklch,var(--accent) 16%,transparent);color:var(--accent)}
-.ovg-card-tag.preset{background:color-mix(in oklch,var(--live) 15%,transparent);color:var(--live)}
-.ovg-card-tag.legacy{background:rgba(255,255,255,.06);color:var(--fg-4)}
+  padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--fg-4)}
+.ovg-card-tag:empty{display:none}
 .ovg-empty{padding:26px 16px;text-align:center;color:var(--fg-4);font-size:13px;line-height:1.6}
 
 /* ── Overlay Studio ─────────────────────────────── */
@@ -658,9 +650,6 @@
 .st-item .st-cost{font-size:9px;font-weight:700;letter-spacing:.06em;padding:1px 5px;border-radius:5px;
   background:color-mix(in oklch,var(--warn) 16%,transparent);color:var(--warn)}
 .st-item .st-tag{font-size:9.5px;color:var(--fg-4);font-family:'JetBrains Mono',monospace}
-.st-preset{flex-direction:column;align-items:flex-start;gap:3px}
-.st-preset .st-preset-name{font-size:13px;font-weight:600;color:var(--fg)}
-.st-preset .st-preset-hint{font-size:10.5px;color:var(--fg-4);line-height:1.35}
 .st-canvas-wrap{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
 .st-canvas-frame{position:relative;flex:1;min-height:0;background:#06080c;
   border:1px solid var(--line);border-radius:10px;overflow:hidden}
@@ -3539,7 +3528,10 @@ <h4 id="dest-form-title">New destination</h4>
     stopGallerySim();
     const cap=$('ovg-phase');
     if(previewState==='live'){ if(prev.contentWindow) prev.contentWindow.postMessage({__ic_sim:true,forceState:null,state:simFrame('idle',0)},'*'); if(cap) cap.innerHTML='<span class="ph-dot" style="background:#8a8f9a"></span>Live - real OBS state'; return; }
-    gallerySim=makeSim(prev, previewState==='auto'?'auto':previewState, (st,p)=>setCaption('ovg-phase',st,p), previewState!=='auto');
+    // Always keep the widget on screen in the gallery preview (noHide=true) -
+    // the preview is to SHOW the overlay, not to demo its auto-hide, which
+    // would leave the canvas empty for most of the cycle.
+    gallerySim=makeSim(prev, previewState==='auto'?'auto':previewState, (st,p)=>setCaption('ovg-phase',st,p), true);
   }
   function previewSim(st){
     previewState=st;

From 82802f35dd0e34cdebd5eac1f51a0304e5aa5a36 Mon Sep 17 00:00:00 2001
From: Soulhackzlol <52952716+Soulhackzlol@users.noreply.github.com>
Date: Thu, 11 Jun 2026 04:01:49 +0200
Subject: [PATCH 3/3] feat: one-click self-update, dashboard restart, overlay
 polish

Self-update: an About-tab Update button downloads the latest release,
verifies it against the published SHA-256, swaps the exe and relaunches
on the same ports. The header update-available pill now opens the in-app
updater instead of GitHub. Adds src/self_update.rs and a hand-rolled
src/sha256.rs (no new dependencies).

Restart from the dashboard, plus Show-in-Explorer buttons for the buffer
file, trace log and overlays folder. Relaunch (restart and self-update)
no longer lets the spawned child inherit our listening sockets, so the
ports release cleanly and the new instance reclaims the same ingest/web
ports (no spurious port-in-use switch prompt).

Overlay studio: auto-hide exits animate again (keyframe instead of a
skipped transition); tunable effects (liquid fill level/wave/speed/
smoothness, buffer-ring/edge/corner/tint knobs); the preview re-syncs all
hide timers on edit; unsaved-changes guard; calmer graph meter; the theme
colour picker no longer closes mid hue-drag; layer swatches update live;
overlays seed even without a configured destination.
---
 CHANGELOG.md           |  41 ++++
 src/main.rs            |  44 ++++-
 src/portcheck.rs       |  48 +++++
 src/rtmp/server.rs     |   3 +
 src/self_update.rs     | 422 +++++++++++++++++++++++++++++++++++++++++
 src/sha256.rs          | 146 ++++++++++++++
 src/web.rs             |  98 ++++++++++
 web/index.html         | 315 ++++++++++++++++++++++++++----
 web/overlay-runtime.js | 139 ++++++++++----
 9 files changed, 1178 insertions(+), 78 deletions(-)
 create mode 100644 src/self_update.rs
 create mode 100644 src/sha256.rs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30eed3b..8aa5ded 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,47 @@ startup no longer drops them. Serving still works - any `.html` you put in
 `overlays/` is served, and the older `/overlay?style=…` URLs still render.
 The `custom-template.html` hand-write example stays.
 
+**Calmer graph meter.** The line widget now smooths its signal (a
+**Smoothing** slider, on by default) and floors its vertical scale, so a
+steady stream reads as a calm line instead of amplifying tiny jitter into
+a full-height sawtooth - while a real drop still swings the whole graph.
+
+**One-click updates.** When the About tab finds a newer release, an
+**Update** button now does it for you: download the new build, verify it
+against the release's published SHA-256, swap it in, and relaunch - your
+settings, destinations, and overlays are kept. Updating stays optional,
+and the manual download link is still there for anyone who prefers it (or
+when antivirus blocks the swap). Saving settings also shows an in-flight
+state and reports network failures instead of silently doing nothing.
+
+**Effects you can tune.** Liquid fill gained real controls - **Fill level**
+(follow the buffer or a fixed %), **Wave**, **Speed**, and **Smoothness** -
+instead of a hardwired behavior. Heartbeat gained **Speed**; the buffer bar
+and ring gained **Smoothness**. Untuned widgets look exactly as before.
+
+**Studio preview stays in sync.** Editing a setting now re-arms all auto-hide
+timers together immediately (a brief "synced" tag confirms it), instead of
+drifting until the next preview cycle. The **theme colour picker** also no
+longer slams shut the moment you drag the hue.
+
+**Auto-hide exits actually animate.** When a widget hid after its delay, it
+used to just blink out regardless of the chosen exit (fade / slide / pop):
+the browser collapsed the animation-stop and the fade into one frame and
+skipped the transition. The exit now plays its full animation. The Studio
+preview also adapts its replay timing so a hide longer than 5 s plays its
+exit instead of looking like it never fires.
+
+**Unsaved overlay changes are guarded.** The Studio's Save button shows a dot
+when there are unsaved edits, and leaving (Back, switching tabs, or closing
+the page) now asks before discarding them.
+
+**Restart from the dashboard.** The "restart required" banner (and the
+About tab) now has a **Restart now** button that relaunches the app and
+reconnects the dashboard on its own, instead of asking you to find and
+relaunch the exe by hand. **Show in Explorer** buttons on the Buffer and
+Diagnostics sections open the buffer file, trace log, and overlays folder
+straight in Explorer for troubleshooting.
+
 ## [0.1.5] - Overlay Studio (experimental)
 
 A no-code visual editor for building OBS browser-source overlays that
diff --git a/src/main.rs b/src/main.rs
index 26073c0..6042fd1 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -33,6 +33,8 @@ mod obs_register;
 #[cfg(windows)]
 mod portcheck;
 mod rtmp;
+mod self_update;
+mod sha256;
 mod sink;
 mod sysstat;
 mod trace;
@@ -80,6 +82,21 @@ fn main() -> std::io::Result<()> {
     let suppress_browser = raw_args.iter().any(|a| a == "--no-browser")
         || std::env::var("INSTANTCLONE_NO_BROWSER").ok().as_deref() == Some("1");
 
+    // Sweep any `.old` / `.new` exe left over from a self-update swap. When
+    // we got here via the relauncher, this deletes the previous version we
+    // just replaced; otherwise it's a harmless no-op.
+    self_update::sweep_leftovers();
+
+    // Relaunch handshake: a restart / self-update spawns us with
+    // `--await-pid <old>`. Wait for that instance to fully exit (and release
+    // the ingest/web ports) before the port pre-flight + bind below, so the
+    // two never collide. Capped so a stuck old process can't wedge us.
+    if let Some(i) = raw_args.iter().position(|a| a == "--await-pid") {
+        if let Some(pid) = raw_args.get(i + 1).and_then(|s| s.parse::<u32>().ok()) {
+            self_update::wait_for_pid_exit(pid, 10_000);
+        }
+    }
+
     let cfg_path: PathBuf = std::env::var("CONFIG_PATH")
         .map(PathBuf::from)
         .unwrap_or_else(|_| PathBuf::from("./instantclone.config.json"));
@@ -109,12 +126,21 @@ fn main() -> std::io::Result<()> {
     // and pop a native modal asking the user to switch or quit.
     #[cfg(windows)]
     {
+        // When relaunched by a restart / self-update, the outgoing instance
+        // may still be releasing its listening sockets (the OS can report the
+        // port as busy - even owned by the now-dead PID - for a brief window
+        // after exit). Poll through that window instead of popping the
+        // "switch port?" modal, which would otherwise block the relaunch.
+        let relaunched = raw_args.iter().any(|a| a == "--await-pid");
         let host_ingest = if settings.ingest_bind_all {
             "0.0.0.0"
         } else {
             "127.0.0.1"
         };
-        if !portcheck::is_port_free(&format!("{}:{}", host_ingest, settings.ingest_port)) {
+        if !port_free_with_grace(
+            &format!("{}:{}", host_ingest, settings.ingest_port),
+            relaunched,
+        ) {
             match preflight_resolve("RTMP port", settings.ingest_port, host_ingest) {
                 Some(new_port) => settings.ingest_port = new_port,
                 None => return Ok(()),
@@ -125,7 +151,7 @@ fn main() -> std::io::Result<()> {
         } else {
             "127.0.0.1"
         };
-        if !portcheck::is_port_free(&format!("{}:{}", host_web, settings.web_port)) {
+        if !port_free_with_grace(&format!("{}:{}", host_web, settings.web_port), relaunched) {
             match preflight_resolve("Web port", settings.web_port, host_web) {
                 Some(new_port) => settings.web_port = new_port,
                 None => return Ok(()),
@@ -627,6 +653,20 @@ fn preflight_resolve(label: &str, port: u16, host: &str) -> Option<u16> {
     }
 }
 
+/// Is `addr` bindable? When `grace` is set (we were relaunched by a restart /
+/// self-update), wait out the outgoing instance's socket-release window before
+/// deciding it's taken - so a normal handoff never pops the "switch port?"
+/// modal. Returns the moment the port frees, so the common case is instant; a
+/// genuine conflict still falls through after the window.
+#[cfg(windows)]
+fn port_free_with_grace(addr: &str, grace: bool) -> bool {
+    if grace {
+        portcheck::wait_until_bindable(addr, Duration::from_secs(20))
+    } else {
+        portcheck::is_port_free(addr)
+    }
+}
+
 fn open_browser(url: &str) {
     #[cfg(target_os = "windows")]
     let _ = Command::new("cmd").args(["/c", "start", "", url]).spawn();
diff --git a/src/portcheck.rs b/src/portcheck.rs
index 96e370a..594e37b 100644
--- a/src/portcheck.rs
+++ b/src/portcheck.rs
@@ -114,6 +114,27 @@ pub fn is_port_free(addr: &str) -> bool {
     TcpListener::bind(addr).is_ok()
 }
 
+/// Poll until `addr` becomes bindable, up to `timeout`. Returns `true` the
+/// instant a bind succeeds, `false` if the whole window elapses still busy.
+///
+/// Used on a restart / self-update relaunch: the outgoing instance can take a
+/// moment to release its listening socket (Windows may even still attribute
+/// the port to the now-dead PID), and we'd rather wait that out silently than
+/// pop the "switch port?" modal mid-handoff. The window is generous because a
+/// genuine conflict is rare and a spurious modal on every restart is worse.
+pub fn wait_until_bindable(addr: &str, timeout: std::time::Duration) -> bool {
+    let deadline = std::time::Instant::now() + timeout;
+    loop {
+        if is_port_free(addr) {
+            return true;
+        }
+        if std::time::Instant::now() >= deadline {
+            return false;
+        }
+        std::thread::sleep(std::time::Duration::from_millis(150));
+    }
+}
+
 /// Find the first port in `[start ..= start+range]` that we can bind
 /// on `host`. Returns `None` if every port in the window is busy.
 pub fn find_free_port(host: &str, start: u16, range: u16) -> Option<u16> {
@@ -234,6 +255,33 @@ mod tests {
         panic!("released port did not become free");
     }
 
+    #[test]
+    fn wait_until_bindable_returns_when_socket_released() {
+        use std::time::Duration;
+        let (held, port) = bind_eph();
+        let addr = format!("127.0.0.1:{port}");
+        // Release the socket after a short hold, on another thread.
+        std::thread::spawn(move || {
+            std::thread::sleep(Duration::from_millis(500));
+            drop(held);
+        });
+        assert!(
+            wait_until_bindable(&addr, Duration::from_secs(5)),
+            "must report bindable once the holder releases within the window"
+        );
+    }
+
+    #[test]
+    fn wait_until_bindable_times_out_on_a_held_port() {
+        use std::time::Duration;
+        let (_held, port) = bind_eph(); // held for the whole test
+        let addr = format!("127.0.0.1:{port}");
+        assert!(
+            !wait_until_bindable(&addr, Duration::from_millis(400)),
+            "a permanently held port must time out as not bindable"
+        );
+    }
+
     #[test]
     fn find_free_port_skips_held_and_returns_next() {
         // Hold a known port and ask find_free_port to start there.
diff --git a/src/rtmp/server.rs b/src/rtmp/server.rs
index c80a206..a1e173a 100644
--- a/src/rtmp/server.rs
+++ b/src/rtmp/server.rs
@@ -19,6 +19,9 @@ use tokio::net::TcpListener;
 
 pub async fn run(addr: String, ctrl: Arc<Controller>) -> io::Result<()> {
     let listener = TcpListener::bind(&addr).await?;
+    // Keep this listener out of a restart/self-update child (else the ingest
+    // port stays bound after we exit and the new instance can't reclaim it).
+    crate::self_update::dont_inherit(&listener);
     eprintln!("[ingest] listening on {}", addr);
     loop {
         let (sock, peer) = listener.accept().await?;
diff --git a/src/self_update.rs b/src/self_update.rs
new file mode 100644
index 0000000..354ae1a
--- /dev/null
+++ b/src/self_update.rs
@@ -0,0 +1,422 @@
+//! One-click self-update for the portable Windows build.
+//!
+//! Updating is optional - the About tab always links the manual download
+//! too - but for users who'd rather not fish a new exe out of GitHub, the
+//! "Update now" button drives this two-step flow:
+//!
+//!   1. [`prepare`]: hit the latest GitHub release, download the new exe
+//!      and the published `SHA256SUMS.txt`, verify the hash, and stage the
+//!      bytes next to the running exe as `instantclone.exe.new`. Everything
+//!      that can fail - offline, rate-limited, hash mismatch, unwritable
+//!      folder - fails HERE, before the live exe is touched, and surfaces a
+//!      message to the UI. Nothing is committed.
+//!
+//!   2. [`commit_and_relaunch`]: rename the running exe to `.old` (Windows
+//!      lets you rename, but not delete/overwrite, a running image), move
+//!      the staged `.new` into its place, spawn a tiny detached `cmd` that
+//!      waits ~2 s for our TCP ports to free and then relaunches the fresh
+//!      exe, and hard-exit. The `.old` / `.new` leftovers are swept on the
+//!      next startup (see [`sweep_leftovers`]).
+//!
+//! Why the checksum matters: we download an executable and then run it, so
+//! verifying it against the hash the release pipeline published (over a
+//! separate TLS-protected request) is the line between "convenient" and
+//! "remote code execution". A mismatch aborts with zero changes made.
+//!
+//! The user's config lives in a separate file, so settings, destinations,
+//! and overlays are untouched by the swap.
+
+use std::path::{Path, PathBuf};
+
+const RELEASE_DL_BASE: &str = "https://github.com/Soulhackzlol/InstantClone/releases/download";
+
+/// A verified update staged on disk, ready for [`commit_and_relaunch`].
+pub struct Staged {
+    /// Path of the currently running exe (the swap target).
+    pub exe: PathBuf,
+    /// The downloaded-and-verified `*.new` file sitting beside it.
+    pub staged: PathBuf,
+    /// The version we're moving to (no leading `v`), for UI display.
+    pub version: String,
+}
+
+/// Sibling path `exe` + `.` + `ext`, e.g. `instantclone.exe.new`.
+fn sidecar(exe: &Path, ext: &str) -> PathBuf {
+    let mut s = exe.as_os_str().to_owned();
+    s.push(".");
+    s.push(ext);
+    PathBuf::from(s)
+}
+
+/// Delete any `.old` / `.new` leftovers from a previous update swap. Called
+/// once at startup: a fresh process that just relaunched sweeps the `.old`
+/// copy of the version it replaced, and a stale `.new` (from an update that
+/// was staged but never committed) is harmless to drop - it re-downloads.
+pub fn sweep_leftovers() {
+    if let Ok(exe) = std::env::current_exe() {
+        for ext in ["old", "new"] {
+            let _ = std::fs::remove_file(sidecar(&exe, ext));
+        }
+    }
+}
+
+/// Download + verify + stage the latest release. Returns a [`Staged`] on
+/// success, or a user-facing error string on any failure (nothing is
+/// committed in the error case).
+pub fn prepare() -> Result<Staged, String> {
+    let current = crate::update_check::current_version();
+    let info = crate::update_check::check_update();
+    let latest = info
+        .latest
+        .ok_or_else(|| info.error.unwrap_or_else(|| "couldn't reach GitHub".into()))?;
+    if !info.update_available {
+        return Err(format!("Already on the latest release (v{current})."));
+    }
+
+    let agent = crate::https::https_agent();
+    let bytes = fetch_verified(&agent, RELEASE_DL_BASE, &latest)?;
+
+    let exe = std::env::current_exe().map_err(|e| format!("can't locate the running exe: {e}"))?;
+    let staged = sidecar(&exe, "new");
+    std::fs::write(&staged, &bytes)
+        .map_err(|e| format!("can't write the update next to the exe: {e}"))?;
+
+    Ok(Staged {
+        exe,
+        staged,
+        version: latest,
+    })
+}
+
+/// Download the release exe for `version` from `base` and verify it against
+/// the release's published `SHA256SUMS.txt`, returning the verified bytes.
+/// Split out from [`prepare`] so a localhost mock can exercise the full
+/// download-and-verify path with no GitHub round-trip (see tests).
+fn fetch_verified(agent: &ureq::Agent, base: &str, version: &str) -> Result<Vec<u8>, String> {
+    let tag = format!("v{version}");
+    let exe_name = format!("instantclone-{tag}-windows-x64.exe");
+    let exe_url = format!("{base}/{tag}/{exe_name}");
+    let sums_url = format!("{base}/{tag}/SHA256SUMS.txt");
+
+    // Checksum first - cheap, and it tells us what to expect.
+    let sums = http_get_text(agent, &sums_url)?;
+    let expected = parse_checksum(&sums, &exe_name)
+        .ok_or_else(|| format!("no checksum for {exe_name} in SHA256SUMS.txt"))?;
+
+    // Then the binary, which we verify before it ever lands at a runnable
+    // path.
+    let bytes = http_get_bytes(agent, &exe_url)?;
+    let got = crate::sha256::hex(&bytes);
+    if !got.eq_ignore_ascii_case(&expected) {
+        return Err("downloaded file failed its checksum - aborting, no changes made".to_string());
+    }
+    Ok(bytes)
+}
+
+/// Swap the staged update into place and relaunch. Does not return on
+/// success (the process exits). On a swap failure it logs to stderr and
+/// returns, leaving the running version intact.
+pub fn commit_and_relaunch(s: Staged) {
+    if let Err(e) = swap_in_place(&s.exe, &s.staged) {
+        eprintln!("self-update: swap failed, staying on the current version: {e}");
+        return;
+    }
+    spawn_relauncher(&s.exe);
+    // Hard exit so our ports + buffer-file handle release immediately; the
+    // relauncher's short delay covers the OS freeing them before the new
+    // process binds. Config was already persisted on every change.
+    std::process::exit(0);
+}
+
+/// Move `staged` into `exe`'s place, parking the running image at `.old`.
+/// On Windows you can rename (but not delete/overwrite) a running exe, so
+/// this rename pair is the move that makes in-place update possible. Rolls
+/// back the first rename if the second fails, so a half-swap never leaves
+/// the install without a runnable exe. Pure filesystem work, unit-tested.
+fn swap_in_place(exe: &Path, staged: &Path) -> std::io::Result<()> {
+    let old = sidecar(exe, "old");
+    let _ = std::fs::remove_file(&old); // clear any stale .old first
+    std::fs::rename(exe, &old)?;
+    if let Err(e) = std::fs::rename(staged, exe) {
+        let _ = std::fs::rename(&old, exe); // best-effort rollback
+        return Err(e);
+    }
+    Ok(())
+}
+
+/// Relaunch the running exe and exit - the same mechanism as the update
+/// swap, minus the swap. Backs the "Restart now" button (e.g. to apply a
+/// buffer-size / port change that needs a fresh process). Does not return.
+pub fn restart_now() -> ! {
+    if let Ok(exe) = std::env::current_exe() {
+        spawn_relauncher(&exe);
+    }
+    std::process::exit(0);
+}
+
+/// Relaunch the fresh exe, handing it our PID so it waits for us to exit
+/// (and release the ingest/web ports) before it binds. We spawn the real exe
+/// directly - no `cmd`/`ping` shim - so there's no console flash and no blind
+/// sleep that can race the port. `--no-browser` stops it from popping a
+/// second dashboard tab; the already-open dashboard reconnects on its own.
+fn spawn_relauncher(exe: &Path) {
+    let pid = std::process::id().to_string();
+    let mut cmd = std::process::Command::new(exe);
+    cmd.arg("--await-pid").arg(&pid).arg("--no-browser");
+    #[cfg(windows)]
+    {
+        use std::os::windows::process::CommandExt;
+        const DETACHED_PROCESS: u32 = 0x0000_0008;
+        cmd.creation_flags(DETACHED_PROCESS);
+    }
+    let _ = cmd.spawn();
+}
+
+/// Clear the inheritable flag on a listening socket so a relaunched child
+/// never inherits it. Without this, a restart/self-update spawns the new
+/// instance as our child, which inherits our listening sockets; when we then
+/// exit, the OS keeps the ports bound (still attributed to our dead PID) via
+/// the child's inherited copy, and the child can never bind them - the restart
+/// hangs and eventually shows a bogus "port in use" prompt.
+#[cfg(windows)]
+pub fn dont_inherit<S: std::os::windows::io::AsRawSocket>(sock: &S) {
+    use windows_sys::Win32::Foundation::{SetHandleInformation, HANDLE};
+    const HANDLE_FLAG_INHERIT: u32 = 0x1;
+    unsafe {
+        SetHandleInformation(sock.as_raw_socket() as HANDLE, HANDLE_FLAG_INHERIT, 0);
+    }
+}
+#[cfg(not(windows))]
+pub fn dont_inherit<S>(_sock: &S) {}
+
+/// Block until process `pid` exits (or `timeout_ms` elapses) so a relaunched
+/// instance never races the outgoing one for the ingest/web ports. Returns
+/// at once if the process is already gone.
+#[cfg(windows)]
+pub fn wait_for_pid_exit(pid: u32, timeout_ms: u32) {
+    use windows_sys::Win32::Foundation::CloseHandle;
+    use windows_sys::Win32::System::Threading::{OpenProcess, WaitForSingleObject};
+    const PROCESS_SYNCHRONIZE: u32 = 0x0010_0000;
+    unsafe {
+        let h = OpenProcess(PROCESS_SYNCHRONIZE, 0, pid);
+        if h.is_null() {
+            return; // already exited (or not visible) - nothing to wait on
+        }
+        WaitForSingleObject(h, timeout_ms);
+        CloseHandle(h);
+    }
+}
+#[cfg(not(windows))]
+pub fn wait_for_pid_exit(_pid: u32, _timeout_ms: u32) {}
+
+/// Find the hash for `name` in a `SHA256SUMS.txt` body. Each line is
+/// `<64-hex-hash>  <filename>`; we match the filename and return the hash.
+fn parse_checksum(sums: &str, name: &str) -> Option<String> {
+    for line in sums.lines() {
+        let line = line.trim();
+        if line.is_empty() {
+            continue;
+        }
+        let mut it = line.split_whitespace();
+        let hash = it.next()?;
+        let file = it.next()?;
+        // The filename column may carry a leading `*` (binary-mode marker).
+        let file = file.trim_start_matches('*');
+        if file == name && hash.len() == 64 && hash.bytes().all(|b| b.is_ascii_hexdigit()) {
+            return Some(hash.to_ascii_lowercase());
+        }
+    }
+    None
+}
+
+fn user_agent() -> String {
+    format!("InstantClone/{}", crate::update_check::current_version())
+}
+
+fn http_get_text(agent: &ureq::Agent, url: &str) -> Result<String, String> {
+    let mut resp = agent
+        .get(url)
+        .header("User-Agent", user_agent())
+        .call()
+        .map_err(|e| format!("download failed: {e}"))?;
+    if resp.status() != 200 {
+        return Err(format!("server returned HTTP {}", resp.status()));
+    }
+    resp.body_mut()
+        .read_to_string()
+        .map_err(|e| format!("read failed: {e}"))
+}
+
+fn http_get_bytes(agent: &ureq::Agent, url: &str) -> Result<Vec<u8>, String> {
+    let mut resp = agent
+        .get(url)
+        .header("User-Agent", user_agent())
+        .call()
+        .map_err(|e| format!("download failed: {e}"))?;
+    if resp.status() != 200 {
+        return Err(format!("server returned HTTP {}", resp.status()));
+    }
+    // The release exe is ~1.2 MB; lift the reader's default cap well above
+    // that so a future, larger build still downloads.
+    resp.body_mut()
+        .with_config()
+        .limit(64 * 1024 * 1024)
+        .read_to_vec()
+        .map_err(|e| format!("read failed: {e}"))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::parse_checksum;
+
+    const NAME: &str = "instantclone-v0.1.6-windows-x64.exe";
+
+    #[test]
+    fn parses_standard_sha256sums_line() {
+        let body = format!("{}  {NAME}\n", "a".repeat(64));
+        assert_eq!(parse_checksum(&body, NAME), Some("a".repeat(64)));
+    }
+
+    #[test]
+    fn picks_the_right_file_among_several() {
+        let body = format!(
+            "{}  other-file.exe\n{}  {NAME}\n",
+            "b".repeat(64),
+            "c".repeat(64)
+        );
+        assert_eq!(parse_checksum(&body, NAME), Some("c".repeat(64)));
+    }
+
+    #[test]
+    fn tolerates_binary_mode_star_and_uppercase() {
+        let body = format!("{} *{NAME}\n", "A".repeat(64));
+        assert_eq!(parse_checksum(&body, NAME), Some("a".repeat(64)));
+    }
+
+    #[test]
+    fn rejects_non_hex_and_wrong_length() {
+        let body = format!("{}  {NAME}\n", "z".repeat(64));
+        assert_eq!(parse_checksum(&body, NAME), None);
+        let short = format!("{}  {NAME}\n", "a".repeat(40));
+        assert_eq!(parse_checksum(&short, NAME), None);
+    }
+
+    #[test]
+    fn none_when_file_absent() {
+        let body = format!("{}  some-other.exe\n", "a".repeat(64));
+        assert_eq!(parse_checksum(&body, NAME), None);
+    }
+}
+
+// End-to-end tests of the two risky parts - the download+verify and the
+// on-disk swap - without GitHub or a live process. The mock stands in for
+// the release server, so this is exactly the "build a fake old version and
+// try to update" check, just driven from a unit test.
+#[cfg(test)]
+mod e2e {
+    use super::{fetch_verified, sidecar, swap_in_place};
+    use std::io::{Read, Write};
+    use std::net::TcpListener;
+
+    /// Spin up a one-shot localhost HTTP server that answers the two GETs
+    /// `fetch_verified` makes: the checksum file (path contains
+    /// `SHA256SUMS`) and the exe (anything else). Returns its port.
+    fn serve_release(exe_body: Vec<u8>, sums_body: String) -> u16 {
+        let listener = TcpListener::bind("127.0.0.1:0").unwrap();
+        let port = listener.local_addr().unwrap().port();
+        std::thread::spawn(move || {
+            for _ in 0..2 {
+                let (mut sock, _) = match listener.accept() {
+                    Ok(x) => x,
+                    Err(_) => break,
+                };
+                let mut buf = [0u8; 2048];
+                let n = sock.read(&mut buf).unwrap_or(0);
+                let req = String::from_utf8_lossy(&buf[..n]);
+                let first = req.lines().next().unwrap_or("");
+                let body: Vec<u8> = if first.contains("SHA256SUMS") {
+                    sums_body.clone().into_bytes()
+                } else {
+                    exe_body.clone()
+                };
+                let head = format!(
+                    "HTTP/1.1 200 OK\r\nContent-Length: {}\r\nConnection: close\r\n\r\n",
+                    body.len()
+                );
+                let _ = sock.write_all(head.as_bytes());
+                let _ = sock.write_all(&body);
+                let _ = sock.flush();
+            }
+        });
+        port
+    }
+
+    #[test]
+    fn fetch_verified_accepts_matching_checksum() {
+        let exe = b"FAKE-INSTANTCLONE-EXE-BODY-v9.9.9".to_vec();
+        let hash = crate::sha256::hex(&exe);
+        let sums = format!("{hash}  instantclone-v9.9.9-windows-x64.exe\n");
+        let port = serve_release(exe.clone(), sums);
+        let base = format!("http://127.0.0.1:{port}");
+        let agent = crate::https::https_agent();
+        let got = fetch_verified(&agent, &base, "9.9.9").expect("genuine download should verify");
+        assert_eq!(got, exe);
+    }
+
+    #[test]
+    fn fetch_verified_rejects_tampered_body() {
+        // Publish the checksum of the genuine file, but serve a different
+        // (tampered) body - verification must reject it.
+        let genuine = b"GENUINE-BODY".to_vec();
+        let hash = crate::sha256::hex(&genuine);
+        let sums = format!("{hash}  instantclone-v9.9.9-windows-x64.exe\n");
+        let tampered = b"TAMPERED-PAYLOAD-PRETENDING-TO-BE-THE-RELEASE".to_vec();
+        let port = serve_release(tampered, sums);
+        let base = format!("http://127.0.0.1:{port}");
+        let agent = crate::https::https_agent();
+        let err = fetch_verified(&agent, &base, "9.9.9").unwrap_err();
+        assert!(
+            err.contains("checksum"),
+            "expected checksum rejection, got: {err}"
+        );
+    }
+
+    // Real network: downloads the actual latest release exe from GitHub and
+    // verifies it against the real published SHA256SUMS.txt. Ignored by
+    // default (needs a published release + outbound HTTPS); run on demand
+    // with `cargo test --release real_release -- --ignored` to prove the
+    // production download+verify path before tagging.
+    #[test]
+    #[ignore = "hits real GitHub releases; run explicitly with --ignored"]
+    fn real_release_downloads_and_verifies() {
+        let info = crate::update_check::check_update();
+        let latest = info
+            .latest
+            .expect("no published release / couldn't reach GitHub");
+        let agent = crate::https::https_agent();
+        let bytes = super::fetch_verified(&agent, super::RELEASE_DL_BASE, &latest)
+            .expect("the real published release should pass its own checksum");
+        assert!(
+            bytes.len() > 100_000,
+            "a real release exe should be >100 KB, got {} bytes",
+            bytes.len()
+        );
+    }
+
+    #[test]
+    fn swap_in_place_replaces_exe_and_parks_old() {
+        let dir = std::env::temp_dir().join(format!("ic-swap-{}", std::process::id()));
+        std::fs::create_dir_all(&dir).unwrap();
+        let exe = dir.join("instantclone.exe");
+        let staged = sidecar(&exe, "new");
+        std::fs::write(&exe, b"OLD-VERSION").unwrap();
+        std::fs::write(&staged, b"NEW-VERSION").unwrap();
+
+        swap_in_place(&exe, &staged).unwrap();
+
+        assert_eq!(std::fs::read(&exe).unwrap(), b"NEW-VERSION");
+        assert_eq!(std::fs::read(sidecar(&exe, "old")).unwrap(), b"OLD-VERSION");
+        assert!(!staged.exists(), "staged .new should have been consumed");
+        let _ = std::fs::remove_dir_all(&dir);
+    }
+}
diff --git a/src/sha256.rs b/src/sha256.rs
new file mode 100644
index 0000000..0ba0dc6
--- /dev/null
+++ b/src/sha256.rs
@@ -0,0 +1,146 @@
+//! Minimal, dependency-free SHA-256 (FIPS 180-4).
+//!
+//! We need exactly one thing from this: verify that a freshly downloaded
+//! release binary matches the SHA-256 published in the release's
+//! `SHA256SUMS.txt` before we swap it in (see [`crate::self_update`]).
+//! Pulling in the `sha2` crate and its `generic-array` / `cpufeatures`
+//! chain for a single hash would bloat a binary we deliberately keep lean,
+//! so we hand-roll the core here. Correctness is pinned by the NIST test
+//! vectors in the test module - do not edit the round function without
+//! re-running them.
+
+const K: [u32; 64] = [
+    0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
+    0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
+    0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
+    0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
+    0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13, 0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
+    0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
+    0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
+    0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
+];
+
+/// Lowercase hex of the SHA-256 digest of `data`.
+pub fn hex(data: &[u8]) -> String {
+    let d = digest(data);
+    let mut s = String::with_capacity(64);
+    for b in d {
+        s.push_str(&format!("{b:02x}"));
+    }
+    s
+}
+
+/// Raw 32-byte SHA-256 digest of `data`.
+pub fn digest(data: &[u8]) -> [u8; 32] {
+    let mut h: [u32; 8] = [
+        0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c, 0x1f83d9ab,
+        0x5be0cd19,
+    ];
+
+    // Pad: 0x80, zeros to a 56 mod 64 boundary, then the 64-bit big-endian
+    // bit length.
+    let bit_len = (data.len() as u64).wrapping_mul(8);
+    let mut msg = data.to_vec();
+    msg.push(0x80);
+    while msg.len() % 64 != 56 {
+        msg.push(0);
+    }
+    msg.extend_from_slice(&bit_len.to_be_bytes());
+
+    for chunk in msg.chunks_exact(64) {
+        let mut w = [0u32; 64];
+        for (i, word) in w.iter_mut().take(16).enumerate() {
+            *word = u32::from_be_bytes([
+                chunk[i * 4],
+                chunk[i * 4 + 1],
+                chunk[i * 4 + 2],
+                chunk[i * 4 + 3],
+            ]);
+        }
+        for i in 16..64 {
+            let s0 = w[i - 15].rotate_right(7) ^ w[i - 15].rotate_right(18) ^ (w[i - 15] >> 3);
+            let s1 = w[i - 2].rotate_right(17) ^ w[i - 2].rotate_right(19) ^ (w[i - 2] >> 10);
+            w[i] = w[i - 16]
+                .wrapping_add(s0)
+                .wrapping_add(w[i - 7])
+                .wrapping_add(s1);
+        }
+
+        let (mut a, mut b, mut c, mut d, mut e, mut f, mut g, mut hh) =
+            (h[0], h[1], h[2], h[3], h[4], h[5], h[6], h[7]);
+        for i in 0..64 {
+            let s1 = e.rotate_right(6) ^ e.rotate_right(11) ^ e.rotate_right(25);
+            let ch = (e & f) ^ ((!e) & g);
+            let t1 = hh
+                .wrapping_add(s1)
+                .wrapping_add(ch)
+                .wrapping_add(K[i])
+                .wrapping_add(w[i]);
+            let s0 = a.rotate_right(2) ^ a.rotate_right(13) ^ a.rotate_right(22);
+            let maj = (a & b) ^ (a & c) ^ (b & c);
+            let t2 = s0.wrapping_add(maj);
+            hh = g;
+            g = f;
+            f = e;
+            e = d.wrapping_add(t1);
+            d = c;
+            c = b;
+            b = a;
+            a = t1.wrapping_add(t2);
+        }
+        h[0] = h[0].wrapping_add(a);
+        h[1] = h[1].wrapping_add(b);
+        h[2] = h[2].wrapping_add(c);
+        h[3] = h[3].wrapping_add(d);
+        h[4] = h[4].wrapping_add(e);
+        h[5] = h[5].wrapping_add(f);
+        h[6] = h[6].wrapping_add(g);
+        h[7] = h[7].wrapping_add(hh);
+    }
+
+    let mut out = [0u8; 32];
+    for (i, word) in h.iter().enumerate() {
+        out[i * 4..i * 4 + 4].copy_from_slice(&word.to_be_bytes());
+    }
+    out
+}
+
+#[cfg(test)]
+mod tests {
+    use super::hex;
+
+    #[test]
+    fn empty_string() {
+        assert_eq!(
+            hex(b""),
+            "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
+        );
+    }
+
+    #[test]
+    fn abc() {
+        assert_eq!(
+            hex(b"abc"),
+            "ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"
+        );
+    }
+
+    #[test]
+    fn two_block_nist_vector() {
+        // The classic 448-bit NIST vector that straddles a block boundary,
+        // exercising the padding path.
+        assert_eq!(
+            hex(b"abcdbcdecdefdefgefghfghighijhijkijkljklmklmnlmnomnopnopq"),
+            "248d6a61d20638b8e5c026930c3e6039a33ce45964ff2167f6ecedd419db06c1"
+        );
+    }
+
+    #[test]
+    fn one_million_a() {
+        let data = vec![b'a'; 1_000_000];
+        assert_eq!(
+            hex(&data),
+            "cdc76e5c9914fb9281a1c7e284d73e67f1809a48a497200e046d39ccc7112cd0"
+        );
+    }
+}
diff --git a/src/web.rs b/src/web.rs
index 24fe5a9..6203c62 100644
--- a/src/web.rs
+++ b/src/web.rs
@@ -33,6 +33,9 @@ pub async fn run(
     cfg_path: PathBuf,
 ) -> io::Result<()> {
     let listener = TcpListener::bind(&addr).await?;
+    // Don't let a restart/self-update child inherit this listener, or the port
+    // stays bound after we exit and the new instance can't reclaim it.
+    crate::self_update::dont_inherit(&listener);
     eprintln!("[web] listening on http://{}", addr);
     // Single shared sampler: CPU% needs the previous sample to compute a
     // delta, so we cannot construct one per request.
@@ -411,6 +414,68 @@ async fn route(
                 });
             ("200 OK", "application/json", info.to_json())
         }
+        ("POST", "/update/apply") => {
+            // Stage (download + verify) inline so any failure surfaces as a
+            // clean JSON error the About tab can show. The actual swap +
+            // relaunch + process exit is deferred to a detached thread so
+            // this 200 flushes to the browser FIRST - the browser then polls
+            // /config until we're back and reloads.
+            match tokio::task::spawn_blocking(crate::self_update::prepare).await {
+                Ok(Ok(staged)) => {
+                    let v = staged.version.replace('"', "'");
+                    std::thread::spawn(move || {
+                        std::thread::sleep(std::time::Duration::from_millis(1200));
+                        crate::self_update::commit_and_relaunch(staged);
+                    });
+                    (
+                        "200 OK",
+                        "application/json",
+                        format!(r#"{{"ok":true,"restarting":true,"version":"{v}"}}"#),
+                    )
+                }
+                Ok(Err(msg)) => (
+                    "200 OK",
+                    "application/json",
+                    format!(
+                        r#"{{"ok":false,"error":"{}"}}"#,
+                        msg.replace('\\', "\\\\").replace('"', "'")
+                    ),
+                ),
+                Err(_) => (
+                    "200 OK",
+                    "application/json",
+                    r#"{"ok":false,"error":"update task panicked"}"#.to_string(),
+                ),
+            }
+        }
+        ("POST", "/app/restart") => {
+            // Relaunch from a detached thread so this 200 flushes first; the
+            // dashboard then polls /config and reloads when we're back.
+            std::thread::spawn(|| {
+                std::thread::sleep(std::time::Duration::from_millis(600));
+                crate::self_update::restart_now();
+            });
+            (
+                "200 OK",
+                "application/json",
+                r#"{"ok":true,"restarting":true}"#.to_string(),
+            )
+        }
+        // Reveal one of our known files in the OS file browser. The keyword
+        // is fixed (not a client-supplied path), so this can only ever open
+        // our own buffer / overlays / trace - never an arbitrary location.
+        ("POST", "/reveal/buffer") => {
+            reveal_path(&settings.borrow().buffer_path.clone());
+            ("200 OK", "application/json", r#"{"ok":true}"#.to_string())
+        }
+        ("POST", "/reveal/overlays") => {
+            reveal_path(&settings.borrow().overlays_dir.clone());
+            ("200 OK", "application/json", r#"{"ok":true}"#.to_string())
+        }
+        ("POST", "/reveal/trace") => {
+            reveal_path(Path::new("./instantclone-trace.log"));
+            ("200 OK", "application/json", r#"{"ok":true}"#.to_string())
+        }
         ("GET", "/obs/launch-status") => {
             let exe = crate::obs_register::find_obs_executable();
             (
@@ -2096,6 +2161,39 @@ fn extract_title(html: &str) -> Option<String> {
     }
 }
 
+/// Open the OS file browser highlighting `path` (or opening it, when it's a
+/// directory). Backs the System tab's reveal buttons. Callers map a fixed
+/// keyword to a known app path - never a client-supplied one - so this can
+/// only ever surface our own files.
+fn reveal_path(path: &Path) {
+    let abs = if path.is_absolute() {
+        path.to_path_buf()
+    } else {
+        std::env::current_dir()
+            .map(|d| d.join(path))
+            .unwrap_or_else(|_| path.to_path_buf())
+    };
+    // Open the folder that holds the target (or the folder itself). We open
+    // the directory rather than `/select`-ing the file: explorer's
+    // `/select,PATH` switch is unreliable to spawn (its comma syntax fights
+    // both Rust's arg-escaping and cmd-style quoting, so it tends to land on
+    // a default location), whereas a plain folder path - auto-quoted by
+    // `arg` so spaces are safe - opens reliably.
+    let dir = if abs.is_dir() {
+        abs.clone()
+    } else {
+        abs.parent().map(|p| p.to_path_buf()).unwrap_or(abs.clone())
+    };
+    #[cfg(windows)]
+    {
+        let _ = std::process::Command::new("explorer").arg(&dir).spawn();
+    }
+    #[cfg(not(windows))]
+    {
+        let _ = &dir;
+    }
+}
+
 /// A user overlay slug: ASCII alphanumerics plus `-`/`_`, max 64 chars.
 /// The served artifact is `<slug>.html` inside overlays_dir. Stricter than
 /// `serve_overlay_file`'s filename check (no dots, no separators) because a
diff --git a/web/index.html b/web/index.html
index bd30cbc..54ca91b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -710,7 +710,7 @@
 .st-st:hover{color:var(--fg);border-color:var(--line-2)}
 .st-st .dot{width:9px;height:9px;border-radius:50%;flex:none}
 .st-st.on{color:var(--fg);border-color:var(--accent);background:color-mix(in oklch,var(--accent) 13%,var(--surface))}
-.st-state-actions{display:flex;gap:6px}
+.st-state-actions{display:flex;align-items:center;gap:6px}
 
 /* Left panel: layers + add */
 .st-sec{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);margin:10px 2px 4px}
@@ -944,8 +944,14 @@
 .restart-banner{padding:10px 14px;border-radius:8px;
   background:color-mix(in oklch,var(--warn) 8%,var(--bg-2));
   border:1px solid color-mix(in oklch,var(--warn) 30%,transparent);
-  color:var(--warn);font-size:12.5px;display:flex;align-items:center;gap:8px}
+  color:var(--warn);font-size:12.5px;display:flex;align-items:center;gap:10px;justify-content:space-between}
 .restart-banner.hidden{display:none}
+/* Unsaved-changes cue on the Studio Save button. */
+.st-save-dirty{box-shadow:0 0 0 2px color-mix(in oklch,var(--accent) 55%,transparent);font-weight:700}
+/* Brief "preview re-synced" pulse after a live edit. */
+.st-synced{font-size:11px;color:var(--accent);opacity:0;transform:translateY(-2px);
+  transition:opacity .2s ease,transform .2s ease;pointer-events:none;white-space:nowrap}
+.st-synced.on{opacity:.9;transform:none}
 
 /* ── Logs ────────────────────────────────────── */
 .logs-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
@@ -1125,7 +1131,7 @@
     <span class="ic-pill ok" id="hdr-ebroadcast" hidden title="Enhanced Broadcasting active - multi-track simulcast is being forwarded bit-faithfully to Twitch and flattened to the primary track for any non-Twitch destinations. Twitch's transcoder serves the full quality ladder to viewers.">⚡ Enhanced Broadcasting</span>
     <span class="ic-pill bad" id="hdr-backpressure" hidden title="A destination's upload can't keep up with OBS's bitrate. Lower OBS bitrate or check upload speed.">⚠ Upload bottleneck</span>
     <span class="ic-pill warn" id="hdr-twitch-cap" hidden>⚠ <span id="hdr-twitch-cap-v">Twitch · Source-Only at 10 Mbps</span></span>
-    <a id="hdr-update" class="ic-pill" href="#" target="_blank" rel="noopener" hidden title="Click to view release notes on GitHub">⬆ <span id="hdr-update-v">update available</span></a>
+    <a id="hdr-update" class="ic-pill" href="#" hidden title="Open the updater" onclick="openUpdateInAbout();return false;" style="cursor:pointer">⬆ <span id="hdr-update-v">update available</span></a>
     <button id="hdr-help" class="ic-btn-tiny" title="How does this work? (?)" onclick="openTour(0)" style="width:30px;height:30px;color:var(--fg-3);font-weight:700;font-size:14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-3);position:relative">?
       <span id="hdr-help-hint" class="help-hint" hidden>New here? Quick tour →</span>
     </button>
@@ -1578,6 +1584,7 @@ <h4 id="dest-form-title">New destination</h4>
             <div class="st-states" id="st-states"></div>
             <div class="st-state-actions">
               <span class="ph-cap" id="st-phase"></span>
+              <span class="st-synced" id="st-synced" title="Preview re-synced to your latest change">⟳ synced</span>
               <button class="st-auto" id="st-play" onclick="Studio.play()" title="Auto-cycle the delay states"><span class="ic"></span> Auto preview</button>
             </div>
           </div>
@@ -1627,7 +1634,10 @@ <h4 id="dest-form-title">New destination</h4>
       <div class="tab-sub">Behavior, network, buffer, notifications, diagnostics.</div>
     </div>
   </div>
-  <div class="restart-banner hidden" id="restart-banner">⚠ Buffer size or path changed. Restart the app for it to take effect.</div>
+  <div class="restart-banner hidden" id="restart-banner">
+    <span>⚠ Buffer size or path changed. Restart the app for it to take effect.</span>
+    <button class="ic-btn ic-btn-warn" style="flex:0 0 auto;white-space:nowrap" onclick="restartApp(this)">Restart now</button>
+  </div>
 
   <nav class="sub-tabs" id="sys-sub-tabs" role="tablist" aria-label="System sub-sections">
     <span class="sub-tab-ind" id="sys-sub-ind"></span>
@@ -1719,6 +1729,9 @@ <h4 id="dest-form-title">New destination</h4>
         <div><span class="ic-label">Buffer file</span><input id="s-bpath" class="ic-input mono"></div>
       </div>
       <div class="muted" id="s-bmb-hint" style="margin-top:8px;font-size:11.5px;line-height:1.4"></div>
+      <div class="row" style="margin-top:10px">
+        <button class="ic-btn ic-btn-ghost" onclick="reveal('buffer',this)">Show buffer file in Explorer</button>
+      </div>
     </section>
   </div>
 
@@ -1746,11 +1759,17 @@ <h4 id="dest-form-title">New destination</h4>
         <input id="s-trace" type="checkbox" style="width:16px;height:16px;cursor:pointer">
         <span>Capture trace log when streaming</span>
       </label>
+      <div class="row" style="margin-top:10px">
+        <button class="ic-btn ic-btn-ghost" onclick="reveal('trace',this)">Show log file in Explorer</button>
+      </div>
     </section>
     <section class="sys-section">
       <div class="ic-label">Overlays folder</div>
       <div class="tab-sub">Drop your own <code class="mono">.html</code> files here to make them appear in the Overlay tab picker.</div>
       <input id="s-ovdir" class="ic-input mono" style="margin-top:8px">
+      <div class="row" style="margin-top:10px">
+        <button class="ic-btn ic-btn-ghost" onclick="reveal('overlays',this)">Open overlays folder</button>
+      </div>
     </section>
   </div>
 
@@ -1762,8 +1781,13 @@ <h4 id="dest-form-title">New destination</h4>
         <span class="sys-version-num" id="sys-about-version">v?.?.?</span>
         <span class="sys-version-pill ok" id="sys-about-pill" hidden>up to date</span>
         <button class="ic-btn ic-btn-ghost" id="sys-about-check-btn" onclick="aboutCheckUpdate()">Check for updates</button>
+        <button class="ic-btn ic-btn-primary" id="sys-about-update-btn" onclick="applyUpdate()" hidden>Update now</button>
       </div>
       <div class="muted" id="sys-about-msg" style="font-size:12px;margin-top:8px;min-height:1.2em"></div>
+      <div class="row" style="gap:10px;margin-top:12px;align-items:center">
+        <button class="ic-btn ic-btn-ghost" onclick="restartApp(this)">Restart InstantClone</button>
+        <span class="muted" style="font-size:12px">Relaunch the app - the dashboard reconnects automatically.</span>
+      </div>
     </section>
     <div class="sys-about-grid">
       <div class="sys-about-card">
@@ -2745,7 +2769,10 @@ <h4 id="dest-form-title">New destination</h4>
     lastConfig = c;
     initialBufferMb = c.buffer_mb; initialBufferPath = c.buffer_path;
     // First run: install the built-in presets as real overlays (once).
-    if (c.configured && !c.overlays_seeded && window.ICOverlay) { Studio.seedPresets(); }
+    // NOT gated on `configured` - building overlays doesn't need a streaming
+    // destination, so someone who clicks "Not now - let me look around" gets
+    // the full gallery too. seedPresets is a no-op once the flag is set.
+    if (!c.overlays_seeded && window.ICOverlay) { Studio.seedPresets(); }
     // wizard
     const first = (c.destinations && c.destinations[0]) || {platform:'twitch', custom_egress_url:'', stream_key_set:false};
     if ($('w-platform').children.length === 0) fillWizardPlatforms();
@@ -3069,7 +3096,10 @@ <h4 id="dest-form-title">New destination</h4>
   });
 }
 
+let _savingSettings = false;
 async function saveSettings(){
+  if (_savingSettings) return; // guard against a double-click double-POST
+  const btn = document.querySelector('#sys-foot .ic-btn-primary');
   const body = new URLSearchParams({
     ingest_port:$('s-iport').value, web_port:$('s-wport').value,
     buffer_mb:$('s-bmb').value, buffer_path:$('s-bpath').value,
@@ -3082,15 +3112,25 @@ <h4 id="dest-form-title">New destination</h4>
     auto_activate_when_ready:$('s-auto-act').checked?'true':'false',
     auto_arm_delay_ms:String(Math.max(1, Math.min(600, parseInt($('s-auto-arm-secs').value,10)||15)) * 1000),
   });
-  const j = await(await fetch('/config',{method:'POST',body})).json();
-  if (j.ok){
-    flashFieldErrors(null);
-    toast('Settings saved','ok');
-    if (j.restart_required || +$('s-bmb').value !== initialBufferMb || $('s-bpath').value !== initialBufferPath){
-      $('restart-banner').classList.remove('hidden');
-    }
-    loadConfig();
-  } else { flashFieldErrors(j.error); toast(`Couldn't save settings: ${j.error}`, 'err'); $('s-msg').innerHTML = '<span class="err">'+j.error+'</span>'; }
+  _savingSettings = true;
+  if (btn){ btn.disabled = true; btn.textContent = 'Saving…'; }
+  try {
+    const j = await(await fetch('/config',{method:'POST',body})).json();
+    if (j.ok){
+      flashFieldErrors(null);
+      toast('Settings saved','ok');
+      if (j.restart_required || +$('s-bmb').value !== initialBufferMb || $('s-bpath').value !== initialBufferPath){
+        $('restart-banner').classList.remove('hidden');
+      }
+      loadConfig();
+    } else { flashFieldErrors(j.error); toast(`Couldn't save settings: ${j.error}`, 'err'); $('s-msg').innerHTML = '<span class="err">'+j.error+'</span>'; }
+  } catch(e){
+    toast('Couldn\'t save settings - the app may have stopped responding','err');
+    $('s-msg').innerHTML = '<span class="err">Request failed: '+e+'</span>';
+  } finally {
+    _savingSettings = false;
+    if (btn){ btn.disabled = false; btn.textContent = 'Save settings'; }
+  }
 }
 async function testWebhook(){
   const r = await(await fetch('/test-webhook',{method:'POST'})).json();
@@ -3325,12 +3365,21 @@ <h4 id="dest-form-title">New destination</h4>
   // so all edits are captured with minimal wiring. `restoring` guards
   // against re-recording while applying an undo.
   let history=[], histIndex=-1, recordT=0, restoring=false;
-  function resetHistory(){ history=[JSON.stringify(doc)]; histIndex=0; updateUndoBtns(); }
-  function recordNow(){ if(restoring) return; const s=JSON.stringify(doc); if(history[histIndex]===s) return; history=history.slice(0,histIndex+1); history.push(s); if(history.length>120) history.shift(); histIndex=history.length-1; updateUndoBtns(); }
+  function resetHistory(){ history=[JSON.stringify(doc)]; histIndex=0; updateUndoBtns(); markClean(); }
+  function recordNow(){ if(restoring) return; const s=JSON.stringify(doc); if(history[histIndex]===s) return; history=history.slice(0,histIndex+1); history.push(s); if(history.length>120) history.shift(); histIndex=history.length-1; updateUndoBtns(); updateDirty(); }
   function recordSoon(){ if(restoring) return; clearTimeout(recordT); recordT=setTimeout(recordNow,300); }
   function undo(){ if(histIndex>0){ histIndex--; applyHistory(); } }
   function redo(){ if(histIndex<history.length-1){ histIndex++; applyHistory(); } }
-  function applyHistory(){ restoring=true; doc=JSON.parse(history[histIndex]); if(sel&&!widget(sel)) sel=null; renderLeft(); rebake(); renderProps(); restoring=false; updateUndoBtns(); }
+  function applyHistory(){ restoring=true; doc=JSON.parse(history[histIndex]); if(sel&&!widget(sel)) sel=null; renderLeft(); rebake(); renderProps(); restoring=false; updateUndoBtns(); updateDirty(); }
+  // Unsaved-changes tracking: "dirty" = the doc differs from the snapshot
+  // taken when it was opened (resetHistory) or last saved. Undo back to that
+  // snapshot reads as clean again. Drives the Save indicator + close guards.
+  let savedSnapshot='';
+  function markClean(){ savedSnapshot = doc?JSON.stringify(doc):''; updateDirty(); }
+  function isDirty(){ return !!doc && JSON.stringify(doc)!==savedSnapshot; }
+  function updateDirty(){ const b=$('st-save'); if(!b) return; const d=isDirty();
+    b.textContent = d?'Save ●':'Save'; b.classList.toggle('st-save-dirty',d);
+    b.title = d?'Unsaved changes - click to overwrite this overlay':'Overwrite this overlay'; }
   function updateUndoBtns(){ const u=$('st-undo'),r=$('st-redo'); if(u)u.disabled=histIndex<=0; if(r)r.disabled=histIndex>=history.length-1; }
   // Semantic colour per state, for the dots in the state selector.
   const STATE_DOT = { idle:'#8a8f9a', preparing:'#ffb73a', ready:'#5ac8fa', active:'#54e38e', error:'#ff5a5a' };
@@ -3357,7 +3406,6 @@ <h4 id="dest-form-title">New destination</h4>
     if(st==='preparing') return {...base,phase:'preparing',buffer_fill_ms:Math.round((p==null?0.5:Math.min(1,p))*ARMED_MS)};
     if(st==='ready') return {...base,phase:'ready',buffer_fill_ms:ARMED_MS};
     if(st==='active') return {...base,phase:'active',buffer_fill_ms:ARMED_MS};
-    if(st==='cut') return {...base,phase:'active',buffer_fill_ms:ARMED_MS,stats:{cuts:3,bitrate_kbps:br}};
     if(st==='error') return {...base,phase:'active',buffer_fill_ms:ARMED_MS,destinations_alive:0,destinations:[{alive:false},{alive:false}]};
     return base;
   }
@@ -3367,8 +3415,9 @@ <h4 id="dest-form-title">New destination</h4>
   // makeSim(iframe, mode, onTick, noHide): mode 'auto' runs the lifecycle; a
   // state key pins it (arming keeps animating its fill). noHide keeps auto-hide
   // widgets visible (used while editing). onTick drives the live caption.
-  function makeSim(iframe, mode, onTick, noHide){
+  function makeSim(iframe, mode, onTick, noHide, replayGap){
     let timer=0, firstPost=true, lastReplay=performance.now(); const t0=performance.now();
+    const gap = replayGap||5000;
     function post(st,p,forceReplay){ if(iframe && iframe.contentWindow) iframe.contentWindow.postMessage({__ic_sim:true,forceState:st,state:simFrame(st,p),noHide:!!noHide,replay:firstPost||!!forceReplay},'*'); firstPost=false; if(onTick) onTick(st,p); }
     function loop(){
       const total=LIFECYCLE.reduce((a,x)=>a+x[1],0);
@@ -3380,23 +3429,29 @@ <h4 id="dest-form-title">New destination</h4>
     function pinned(){
       if(mode==='preparing'){ const dur=2800, el=(performance.now()-t0)%dur; post('preparing', el/dur); timer=setTimeout(pinned, 90); }
       else {
-        // When auto-hide can fire (noHide off), re-show the widget every ~5s so
-        // the exit animation is visible on a loop while editing. Otherwise just
-        // keep ticking so live widgets (meter, timer) stay alive.
+        // When auto-hide can fire (noHide off), re-show the widget once its
+        // hide has had time to play, so the exit loops while editing. The gap
+        // adapts to the configured hide duration - a fixed 5s would re-show
+        // (and re-arm) BEFORE a longer hide ever fired, so it'd never appear
+        // to hide at all. Otherwise just keep ticking so live widgets stay alive.
         const now=performance.now(); let rep=false;
-        if(!noHide && now-lastReplay>5000){ rep=true; lastReplay=now; }
+        if(!noHide && now-lastReplay>gap){ rep=true; lastReplay=now; }
         post(mode, 1, rep); timer=setTimeout(pinned, 500);
       }
     }
     if(!mode || mode==='auto'){ loop(); } else { pinned(); }
-    return { stop(){ clearTimeout(timer); } };
+    // rehide(): after an edit, re-arm all auto-hide timers together from the
+    // current pinned frame so they don't drift out of sync until the next
+    // replay. No-op while auto-playing (the lifecycle re-arms them anyway).
+    function rehide(){ if(!mode||mode==='auto'||!iframe||!iframe.contentWindow) return;
+      iframe.contentWindow.postMessage({__ic_sim:true,forceState:mode,state:simFrame(mode,mode==='preparing'?0.5:1),noHide:!!noHide,rehide:true},'*'); }
+    return { stop(){ clearTimeout(timer); }, rehide:rehide };
   }
   // A friendly live caption for the current simulated phase.
   function phaseInfo(st, p){
     if(st==='preparing') return { t:'Arming '+Math.round((p||0)*100)+'%', c:STATE_DOT.preparing };
     if(st==='ready') return { t:'Armed', c:STATE_DOT.ready };
     if(st==='active') return { t:'On delay '+(ARMED_MS/1000).toFixed(1)+'s', c:STATE_DOT.active };
-    if(st==='cut') return { t:'Cut', c:STATE_DOT.cut };
     if(st==='error') return { t:'Signal lost', c:STATE_DOT.error };
     return { t:'Idle - no delay', c:STATE_DOT.idle };
   }
@@ -3454,6 +3509,7 @@ <h4 id="dest-form-title">New destination</h4>
     toast('Duplicated - "Save as new" to write it','info');
   }
   function backToGallery(){
+    if(isDirty() && !confirm('You have unsaved changes to this overlay. Discard them and go back to the gallery?')) return;
     stopPlay();
     setView('gallery');
     loadSaved().then(()=>{ renderGallery(); fitPreview(); });
@@ -3588,11 +3644,15 @@ <h4 id="dest-form-title">New destination</h4>
     // While pinned, keep widgets visible for editing (noHide) - UNLESS the
     // edited state has an auto-hide, in which case let it play so the exit is
     // visible (makeSim loops it back into view every ~5s).
-    const hasHide = doc.widgets.some(w=> w.states && w.states[editState] && w.states[editState].hide_after_ms>0);
+    // Longest hide configured in the edited state - the preview re-shows a
+    // hidden widget this long after it appears (+ a beat), so even a 10s hide
+    // actually plays its exit instead of being reset before it fires.
+    const maxHide = doc.widgets.reduce((m,w)=>{ const h=w.states&&w.states[editState]&&w.states[editState].hide_after_ms; return h>m?h:m; }, 0);
+    const hasHide = maxHide>0;
     studioSim=makeSim($('st-canvas'), playing?'auto':editState, (st,p)=>{
       setCaption('st-phase',st,p);
       if(playing) $$('#st-states .st-st').forEach(b=>b.classList.toggle('on',b.dataset.st===st));
-    }, !playing && !hasHide);
+    }, !playing && !hasHide, hasHide ? maxHide+1800 : 5000);
   }
   function buildHits(){
     const hit = $('st-hit'); hit.innerHTML='';
@@ -3693,6 +3753,13 @@ <h4 id="dest-form-title">New destination</h4>
     CornerFrame:'⌐', PulsingDot:'●', Heartbeat:'♥', Banner:'▭', EdgeAccent:'▢', BackgroundTint:'▦', LiquidFill:'≋',
     Image:'▥', CustomHTML:'</>' };
   function leftTab(name){ left=name; $$('#st-left-tabs button').forEach(b=>b.classList.toggle('on',b.dataset.stleft===name)); renderLeft(); }
+  // Representative colour for a layer swatch: the current edit-state colour if
+  // set, else the base, resolved through the theme so @tokens show real hues.
+  function layerColor(w){ return themeHex((w.states&&w.states[editState]&&w.states[editState].color)||(w.base&&w.base.color)||'#5ac8fa'); }
+  // Update layer swatches in place (no panel rebuild, so open pickers survive).
+  function refreshLayerColors(){ if(left!=='layers') return;
+    document.querySelectorAll('#st-left-body .st-layer').forEach(function(row){
+      const w=widget(row.dataset.id); if(!w) return; const sw=row.querySelector('.st-layer-sw'); if(sw) sw.style.background=layerColor(w); }); }
   function renderLeft(){
     const c = $('st-left-body'); c.innerHTML='';
     if(left==='add'){
@@ -3714,7 +3781,7 @@ <h4 id="dest-form-title">New destination</h4>
       const head=document.createElement('div'); head.className='st-sec'; head.textContent='Theme colours'; c.appendChild(head);
       [['accent','Accent'],['live','Live'],['warn','Arming'],['error','Error'],['ink','Text / ink'],['grey','Idle / grey']].forEach(k=>{
         const row=document.createElement('div'); row.className='st-field';
-        row.innerHTML='<label>'+k[1]+'</label><div class="st-color"><input type="color" value="'+t[k[0]]+'" oninput="Studio.setTheme(\''+k[0]+'\',this.value)"><input class="ic-input mono" value="'+t[k[0]]+'" oninput="Studio.setTheme(\''+k[0]+'\',this.value)"></div>';
+        row.innerHTML='<label>'+k[1]+'</label><div class="st-color"><input type="color" value="'+t[k[0]]+'" oninput="Studio.setTheme(\''+k[0]+'\',this.value,this)"><input class="ic-input mono" value="'+t[k[0]]+'" oninput="Studio.setTheme(\''+k[0]+'\',this.value,this)"></div>';
         c.appendChild(row);
       });
       const hint=document.createElement('div'); hint.className='st-hint'; hint.style.padding='10px 2px';
@@ -3731,7 +3798,7 @@ <h4 id="dest-form-title">New destination</h4>
         const k=IC().KINDS.find(x=>x.key===w.kind)||{label:w.kind};
         const row=document.createElement('div'); row.className='st-layer'+(sel===w.id?' sel':''); row.dataset.id=w.id;
         const label=(w.base&&w.base.text)?(k.label+' · '+w.base.text):k.label;
-        const col=(w.states&&w.states.active&&w.states.active.color)||(w.base&&w.base.color)||'#5ac8fa';
+        const col=layerColor(w);
         row.innerHTML='<span class="st-layer-sw" style="background:'+col+'"></span><span class="st-layer-name"></span>'+
           '<button class="st-layer-btn" title="Bring forward" data-act="up">▲</button>'+
           '<button class="st-layer-btn" title="Send back" data-act="down">▼</button>'+
@@ -3796,6 +3863,46 @@ <h4 id="dest-form-title">New destination</h4>
       let bo=Object.keys(IC().BINDINGS).map(b=>'<option value="'+b+'"'+(w.bind===b?' selected':'')+'>'+IC().BINDINGS[b].label+'</option>').join('');
       h += field('Shows','<select class="ic-input" oninput="Studio.set(\'bind\',this.value)">'+bo+'</select>');
     }
+    if(w.kind==='BitrateMeter'){
+      const sm=w.smooth!=null?w.smooth:0.6;
+      h += field('Smoothing','<input type="range" min="0" max="0.95" step="0.05" value="'+sm+'" oninput="Studio.setNum(\'smooth\',this.value)" style="width:100%">');
+      h += '<div class="st-hint" style="margin-top:-4px">Higher = calmer line. Lower shows every jitter.</div>';
+    }
+    if(w.kind==='LiquidFill'){
+      const fixed=(w.level!=null&&w.level!=='buffer');
+      h += field('Fill level','<select class="ic-input" oninput="Studio.setLiquidLevel(this.value)"><option value="buffer"'+(!fixed?' selected':'')+'>Follow buffer</option><option value="fixed"'+(fixed?' selected':'')+'>Fixed level</option></select>');
+      if(fixed){ const pv=typeof w.level==='number'?w.level:60; h += field('Level','<input type="range" min="0" max="100" step="5" value="'+pv+'" oninput="Studio.setNum(\'level\',this.value)" style="width:100%">'); }
+      const wav=w.wave!=null?w.wave:1;
+      h += field('Wave','<input type="range" min="0" max="2" step="0.1" value="'+wav+'" oninput="Studio.setNum(\'wave\',this.value)" style="width:100%">');
+      h += '<div class="st-hint" style="margin-top:-4px">0 = flat, 2 = choppy.</div>';
+    }
+    // Animation speed for widgets with their own ongoing motion.
+    if(['LiquidFill','Heartbeat'].indexOf(w.kind)>=0){
+      const spd=w.speed!=null?w.speed:1;
+      h += field('Speed','<input type="range" min="0.25" max="3" step="0.05" value="'+spd+'" oninput="Studio.setNum(\'speed\',this.value)" style="width:100%">');
+      h += '<div class="st-hint" style="margin-top:-4px">Animation pace. 1 = default.</div>';
+    }
+    // Smoothness (transition easing) for data-driven widgets that move.
+    if(['LiquidFill','BufferBar','BufferRing'].indexOf(w.kind)>=0){
+      const smd=w.smooth!=null?w.smooth:(w.kind==='LiquidFill'?0.6:0.42);
+      h += field('Smoothness','<input type="range" min="0" max="1.5" step="0.05" value="'+smd+'" oninput="Studio.setNum(\'smooth\',this.value)" style="width:100%">');
+      h += '<div class="st-hint" style="margin-top:-4px">How softly it eases to a new value (seconds).</div>';
+    }
+    if(w.kind==='BufferRing'){
+      h += '<label class="st-check"><input type="checkbox"'+(!w.notext?' checked':'')+' oninput="Studio.setFlag(\'notext\',!this.checked)"> Show value in centre</label>';
+      h += field('Ring thickness','<input type="range" min="2" max="14" step="1" value="'+(w.ringWidth!=null?w.ringWidth:4)+'" oninput="Studio.setNum(\'ringWidth\',this.value)" style="width:100%">');
+    }
+    if(w.kind==='EdgeAccent'){
+      h += field('Border thickness','<input type="range" min="1" max="14" step="1" value="'+(w.edgeWidth!=null?w.edgeWidth:3)+'" oninput="Studio.setNum(\'edgeWidth\',this.value)" style="width:100%">');
+      h += field('Glow reach','<input type="range" min="0" max="120" step="4" value="'+(w.glow!=null?w.glow:38)+'" oninput="Studio.setNum(\'glow\',this.value)" style="width:100%">');
+    }
+    if(w.kind==='BackgroundTint'){
+      h += field('Intensity','<input type="range" min="0" max="0.7" step="0.02" value="'+(w.intensity!=null?w.intensity:0.22)+'" oninput="Studio.setNum(\'intensity\',this.value)" style="width:100%">');
+    }
+    if(w.kind==='CornerFrame'){
+      h += field('Corner size','<input type="range" min="20" max="140" step="4" value="'+(w.frameSize!=null?w.frameSize:46)+'" oninput="Studio.setNum(\'frameSize\',this.value)" style="width:100%">');
+      h += field('Thickness','<input type="range" min="1" max="12" step="1" value="'+(w.frameWidth!=null?w.frameWidth:3)+'" oninput="Studio.setNum(\'frameWidth\',this.value)" style="width:100%">');
+    }
     if(f.indexOf('unit')>=0) h += field('Unit','<input class="ic-input" value="'+escapeAttr(w.unit||'')+'" oninput="Studio.set(\'unit\',this.value)">');
     if(f.indexOf('icon')>=0){ let io=IC().ICONS.map(n=>'<option value="'+n+'"'+(w.icon===n?' selected':'')+'>'+n+'</option>').join(''); h+=field('Icon','<select class="ic-input" oninput="Studio.set(\'icon\',this.value)">'+io+'</select>'); }
     if(f.indexOf('shape')>=0){ let so=IC().SHAPES.map(n=>'<option value="'+n+'"'+(w.shape===n?' selected':'')+'>'+n+'</option>').join(''); h+=field('Shape','<select class="ic-input" oninput="Studio.set(\'shape\',this.value)">'+so+'</select>'); }
@@ -3924,10 +4031,19 @@ <h4 id="dest-form-title">New destination</h4>
     if(!ok){ rebake(); return; }
     buildHits(); recordSoon(); updatePerfBadge();
   }
-  function softRebake(){ clearTimeout(rebakeT); rebakeT=setTimeout(liveStyle, 80); }
+  function softRebake(){ clearTimeout(rebakeT); rebakeT=setTimeout(function(){ liveStyle(); if(studioSim&&studioSim.rehide) studioSim.rehide(); flashSynced(); }, 80); }
+  // Brief "synced" pulse on the preview after a live edit re-arms the timers,
+  // so it's clear the preview reflects the change (not the previous cycle).
+  let syncedT=0;
+  function flashSynced(){ const b=$('st-synced'); if(!b) return; b.classList.add('on'); clearTimeout(syncedT); syncedT=setTimeout(function(){ b.classList.remove('on'); }, 900); }
   function ensureState(){ const w=widget(sel); if(!w.states) w.states={}; if(!w.states[editState]) w.states[editState]={}; return w.states[editState]; }
   function set(k,v){ const w=widget(sel); w[k]=v; if(k==='unit'||k==='icon'||k==='shape'||k==='src'){ rebake(); } else softRebake(); }
   function setNum(path,v){ const w=widget(sel); const n=parseFloat(v)||0; if(path.indexOf('.')>=0){const[a,b]=path.split('.'); w[a][b]=n;} else w[path]=n; softRebake(); }
+  // LiquidFill: switch between buffer-following and a fixed level (number).
+  function setLiquidLevel(v){ const w=widget(sel); w.level = (v==='buffer') ? 'buffer' : (typeof w.level==='number'?w.level:60); softRebake(); renderProps(); }
+  // Boolean widget flag that changes structure (e.g. BufferRing centre text) -
+  // needs a full rebake since liveStyle only diffs attributes.
+  function setFlag(k,on){ const w=widget(sel); if(on) w[k]=true; else delete w[k]; rebake(); }
   function setBase(k,v){ widget(sel).base[k]=v; if(k==='text'&&left==='layers') renderLeft(); softRebake(); }
   // CustomHTML lives inside a sandboxed iframe (the widget's inner content),
   // which the in-place live update can't touch - so debounce a full rebake.
@@ -3935,7 +4051,7 @@ <h4 id="dest-form-title">New destination</h4>
   function setCustom(k,v){ const w=widget(sel); if(!w.custom) w.custom=IC().defaultCustom(); w.custom[k]=v; softFull(); }
   // Re-render only when visibility flips (to show/hide the look fields).
   // Avoid re-rendering on colour input - it would close the native picker.
-  function setState(k,v){ const sp=ensureState(); sp[k]=v; softRebake(); if(k==='visible') renderProps(); }
+  function setState(k,v){ const sp=ensureState(); sp[k]=v; softRebake(); if(k==='visible') renderProps(); if(k==='color') refreshLayerColors(); }
   function setStateNum(k,v){ ensureState()[k]=parseFloat(v)||0; softRebake(); }
   function setStateText(v){ const sp=ensureState(); if(v==='') delete sp.text; else sp.text=v; softRebake(); }
   function setAnim(k,v){ const sp=ensureState(); if(!sp.anim) sp.anim=Object.assign({style:'fade',duration_ms:400,easing:'ease-out',delay_ms:0}, widget(sel).base.anim||{}); sp.anim[k]=v; softRebake(); }
@@ -3947,7 +4063,14 @@ <h4 id="dest-form-title">New destination</h4>
   // Theme colours (overlay-wide). Editing one recolours every widget that
   // uses the matching @token.
   function ensureTheme(){ if(!doc.theme) doc.theme=IC().defaultTheme(); return doc.theme; }
-  function setTheme(key,val){ ensureTheme()[key]=val; softRebake(); renderLeft(); }
+  function setTheme(key,val,srcEl){ ensureTheme()[key]=val; softRebake();
+    // Mirror the value to the paired colour/hex input IN PLACE. We must not
+    // renderLeft() here - rebuilding the panel destroys the open
+    // <input type="color">, which is why the picker slammed shut the instant
+    // you dragged the hue. The canvas still updates live via softRebake.
+    if(srcEl&&srcEl.parentNode){ srcEl.parentNode.querySelectorAll('input').forEach(function(i){ if(i!==srcEl&&i.value!==val) i.value=val; }); }
+    refreshLayerColors(); // theme change recolours @token widgets
+  }
   function themeHex(c){ if(typeof c==='string' && c.charAt(0)==='@'){ const t=ensureTheme(); return t[c.slice(1)]||'#5ac8fa'; } return c||'#5ac8fa'; }
   // Per-state gradient (a second colour).
   function setGrad(v){ const sp=ensureState(); if(!v) delete sp.grad; else sp.grad=v; softRebake(); }
@@ -4025,7 +4148,7 @@ <h4 id="dest-form-title">New destination</h4>
       const j = await r.json();
       // Auto-select this overlay when we return to the gallery so the
       // save reflects immediately (no F5).
-      if(j.ok){ updateUrlLabel(); pendingSelect=slug; toast('Saved - URL ready to drop into OBS','ok'); loadSaved(); }
+      if(j.ok){ updateUrlLabel(); pendingSelect=slug; markClean(); toast('Saved - URL ready to drop into OBS','ok'); loadSaved(); }
       else { toast(j.error||'Save failed','err'); slug=null; }
     }catch(e){ toast('Save failed','err'); slug=null; }
   }
@@ -4069,7 +4192,6 @@ <h4 id="dest-form-title">New destination</h4>
   }
   async function loadSaved(){
     try{ savedList = await (await fetch('/overlays')).json(); if(!Array.isArray(savedList)) savedList=[]; }catch(e){ savedList=[]; }
-    if(left==='mine' && $('ov-studio') && !$('ov-studio').hidden) renderLeft();
   }
   // First-run seeding: bake the built-in presets to real overlay files so the
   // gallery is one uniform list (every item has a working URL). Gated by the
@@ -4126,7 +4248,7 @@ <h4 id="dest-form-title">New destination</h4>
     set, setNum, setBase, setCustom, setState, setStateNum, setStateText, setAnim, setAnimNum,
     setHideAfter, toggleHide, setLS, setStateOffset, resetStateOffset, toggleVis, visOnly, visAll, applyColorAll, applyAnimAll, copyLookAll,
     setTheme, setGrad, toggleGrad, setGradAnim, align, animAdd, animDel, animSet, uploadImage, insertVar,
-    dupWidget, delWidget };
+    dupWidget, delWidget, isDirty, setLiquidLevel, setFlag };
 })();
 
 // Existing init paths call loadOverlays() before the `const Studio`
@@ -4390,6 +4512,17 @@ <h4 id="dest-form-title">New destination</h4>
   tip.style.top  = ty + 'px';
 }
 
+// Browser close / refresh while the Studio has unsaved edits: trigger the
+// native "leave site?" prompt. (Browsers ignore custom text here.)
+window.addEventListener('beforeunload', e => {
+  try {
+    const m = $('ov-studio');
+    if (m && !m.hidden && window.ICOverlay && Studio.isDirty && Studio.isDirty()){
+      e.preventDefault(); e.returnValue = '';
+    }
+  } catch(_){}
+});
+
 document.addEventListener('keydown', e => {
   if (!$('tour').hidden){
     if (e.key === 'Escape')     { e.preventDefault(); closeTour(); }
@@ -4415,6 +4548,14 @@ <h4 id="dest-form-title">New destination</h4>
 
 // ── Tabs ──────────────────────────────────────────────────────────────
 function showTab(name){
+  // Guard unsaved Studio edits: switching away from the Overlay tab hides the
+  // editor and abandons the in-progress doc, so confirm first.
+  if (name !== 'overlay'){
+    const m = $('ov-studio');
+    if (m && !m.hidden && window.ICOverlay && Studio.isDirty && Studio.isDirty()){
+      if (!confirm('You have unsaved overlay changes. Leave the Studio and discard them?')) return;
+    }
+  }
   $$('.tab').forEach(t => t.classList.toggle('on', t.dataset.tab === name));
   $$('.tab-pane').forEach(p => p.hidden = p.dataset.pane !== name);
   moveTabInd();
@@ -4444,6 +4585,13 @@ <h4 id="dest-form-title">New destination</h4>
   pane.querySelectorAll('.sub-pane').forEach(p => p.hidden = p.dataset.subpane !== subName);
   moveSubTabInd(pane);
   try { localStorage.setItem('ic-subtab-' + paneName, subName); } catch(e){}
+  // The "Save settings" footer only applies to the editable sub-panes.
+  // About is version info + immediate danger-zone actions, so a Save
+  // button there is meaningless - hide the footer on About.
+  if (paneName === 'system'){
+    const foot = $('sys-foot');
+    if (foot) foot.hidden = (subName === 'about');
+  }
   if (paneName === 'system' && subName === 'about') aboutMaybeAutoCheck();
 }
 function moveSubTabInd(pane){
@@ -4472,6 +4620,11 @@ <h4 id="dest-form-title">New destination</h4>
     if (target) {
       pane.querySelectorAll('.sub-tab').forEach(t => t.classList.toggle('on', t.dataset.subtab === saved));
       pane.querySelectorAll('.sub-pane').forEach(p => p.hidden = p.dataset.subpane !== saved);
+      // Keep the Save footer in sync with the restored sub-tab (see showSubTab).
+      if (pane.dataset.pane === 'system'){
+        const foot = $('sys-foot');
+        if (foot) foot.hidden = (saved === 'about');
+      }
     }
   });
 })();
@@ -4498,11 +4651,14 @@ <h4 id="dest-form-title">New destination</h4>
   return 0;
 }
 
+let latestReleaseUrl = 'https://github.com/Soulhackzlol/InstantClone/releases/latest';
 async function aboutCheckUpdate(silent){
   const ver = $('sys-about-version');
   const pill = $('sys-about-pill');
   const msg = $('sys-about-msg');
   const btn = $('sys-about-check-btn');
+  const upd = $('sys-about-update-btn');
+  if (upd) upd.hidden = true; // only the "update available" branch reveals it
   if (btn) btn.disabled = true;
   if (msg && !silent) msg.textContent = 'Checking github.com/Soulhackzlol/InstantClone…';
   try {
@@ -4517,7 +4673,12 @@ <h4 id="dest-form-title">New destination</h4>
         if (msg) msg.innerHTML = 'Could not reach GitHub: ' + (j.error || 'unknown') + '. <a href="' + j.release_url + '" target="_blank" rel="noreferrer">View releases</a>';
       } else if (j.update_available && j.latest) {
         pill.classList.add('new'); pill.textContent = 'v' + j.latest + ' available';
-        if (msg) msg.innerHTML = 'New release: <a href="' + j.release_url + '" target="_blank" rel="noreferrer">v' + j.latest + '</a>.';
+        latestReleaseUrl = j.release_url || latestReleaseUrl;
+        // Updating is optional. The button does it for you (download +
+        // verify + swap + restart); the link is the manual route. Either
+        // way the config survives, so say so.
+        if (upd){ upd.hidden = false; upd.textContent = 'Update to v' + j.latest; }
+        if (msg) msg.innerHTML = 'Optional - your settings, destinations, and overlays are kept either way. Use the button, or <a href="' + j.release_url + '" target="_blank" rel="noreferrer">download v' + j.latest + '</a> and replace the exe yourself.';
       } else if (j.latest && semverCmp(j.current, j.latest) > 0) {
         // Build is ahead of the latest published tag - either a pre-release
         // dev build, a build off main between tags, or a local checkout.
@@ -4537,6 +4698,80 @@ <h4 id="dest-form-title">New destination</h4>
   }
 }
 
+// One-click update: POST /update/apply stages + verifies the new exe, then
+// the server swaps it in and relaunches. We show progress, then poll until
+// the fresh process answers and reload. Manual download stays as the
+// fallback in every error message.
+let _updating = false;
+async function applyUpdate(){
+  if (_updating) return;
+  const upd = $('sys-about-update-btn');
+  const chk = $('sys-about-check-btn');
+  const msg = $('sys-about-msg');
+  const manual = ' You can still <a href="' + latestReleaseUrl + '" target="_blank" rel="noreferrer">update manually</a>.';
+  _updating = true;
+  if (upd){ upd.disabled = true; upd.textContent = 'Downloading…'; }
+  if (chk) chk.disabled = true;
+  if (msg) msg.textContent = 'Downloading and verifying the new version - keep InstantClone open.';
+  try {
+    const j = await (await fetch('/update/apply', {method:'POST'})).json();
+    if (!j.ok){
+      _updating = false;
+      if (upd){ upd.disabled = false; upd.textContent = 'Update now'; }
+      if (chk) chk.disabled = false;
+      if (msg) msg.innerHTML = '<span class="err">' + (j.error || 'Update failed') + '</span>' + manual;
+      return;
+    }
+    if (upd) upd.textContent = 'Restarting…';
+    if (msg) msg.textContent = 'Verified. InstantClone is restarting - this page reconnects automatically.';
+    waitForRestart();
+  } catch(e){
+    // The swap is deferred until after the response flushes, so a thrown
+    // fetch here is almost always the localhost server already going down
+    // for its restart - start polling rather than crying failure.
+    if (upd) upd.textContent = 'Restarting…';
+    if (msg) msg.textContent = 'InstantClone is restarting - this page reconnects automatically.';
+    waitForRestart();
+  }
+}
+function waitForRestart(){
+  let tries = 0;
+  const iv = setInterval(async () => {
+    tries++;
+    try {
+      const r = await fetch('/config', {cache:'no-store'});
+      if (r.ok){ clearInterval(iv); location.reload(); return; }
+    } catch(_){ /* still down - keep waiting */ }
+    if (tries > 40){ // ~60 s
+      clearInterval(iv);
+      const msg = $('sys-about-msg');
+      if (msg) msg.innerHTML = 'Restart is taking longer than expected. If the dashboard doesn\'t come back, start InstantClone again from where you keep the exe.';
+    }
+  }, 1500);
+}
+
+// Restart the app (e.g. to apply a buffer/port change). Same relaunch
+// mechanism as the updater, minus the swap; we reconnect and reload once
+// the fresh process answers.
+let _restarting = false;
+async function restartApp(btn){
+  if (_restarting) return;
+  _restarting = true;
+  if (btn){ btn.disabled = true; btn.textContent = 'Restarting…'; }
+  toast('Restarting InstantClone…','info');
+  try { await fetch('/app/restart', {method:'POST'}); } catch(_){ /* server going down */ }
+  waitForRestart();
+}
+
+// Open one of our files in Explorer. `what` is a fixed keyword the server
+// maps to a known path - buffer / trace / overlays.
+async function reveal(what, btn){
+  try {
+    const j = await (await fetch('/reveal/' + what, {method:'POST'})).json();
+    if (!j || !j.ok) toast('Could not open Explorer','err');
+  } catch(_){ toast('Could not open Explorer','err'); }
+}
+
 // ── Tick / poll loop ──────────────────────────────────────────────────
 // applyState() is the pure render side - used by both the poll path
 // and the SSE push path so we don't have two copies of the dashboard
@@ -4637,10 +4872,16 @@ <h4 id="dest-form-title">New destination</h4>
     const label = $('hdr-update-v');
     if (!pill || !label) return;
     label.textContent = 'v' + r.latest + ' available';
-    pill.href = r.release_url;
     pill.hidden = false;
   } catch(_){}
 }
+// The header "update available" pill opens the in-app updater (System > About)
+// instead of GitHub, so one click leads to the one-click Update button.
+function openUpdateInAbout(){
+  showTab('system');
+  showSubTab('system','about');
+  try { aboutCheckUpdate(); } catch(_){}
+}
 
 (async function init(){
   try { platforms = await (await fetch('/platforms')).json(); } catch(_){ platforms = []; }
diff --git a/web/overlay-runtime.js b/web/overlay-runtime.js
index 4cb6e86..5f759d9 100644
--- a/web/overlay-runtime.js
+++ b/web/overlay-runtime.js
@@ -136,6 +136,9 @@
       custom: kind === 'CustomHTML' ? defaultCustom() : null
     };
     if (kind === 'StatePill' || kind === 'Text') { w.base.text = 'DELAY'; }
+    // The meter smooths its line by default so a steady signal reads calm
+    // (0 = raw/jittery, ~1 = glassy). Tunable in the Studio.
+    if (kind === 'BitrateMeter') { w.smooth = 0.6; }
     return w;
   }
 
@@ -282,7 +285,15 @@
     // LiquidFill recedes smoothly first (height -> 0 over .6s), THEN fades,
     // so the tide visibly drains before disappearing.
     '.icw[data-kind="LiquidFill"].ic-gone{transform:none;transition:opacity .5s ease .65s !important}',
-    '.icw[data-kind="LiquidFill"].ic-gone .liquid{height:0 !important}'
+    '.icw[data-kind="LiquidFill"].ic-gone .liquid{height:0 !important}',
+    // Exit animations. We animate (not transition) the auto-hide exit because
+    // the widget is usually mid state-animation, and a transition fired in the
+    // same frame as stopping that animation gets skipped - so every exit used
+    // to "just pop". A forwards keyframe always runs and holds the hidden pose.
+    '@keyframes ic-x-fade{to{opacity:0}}',
+    '@keyframes ic-x-down{to{opacity:0;transform:translateY(48px)}}',
+    '@keyframes ic-x-up{to{opacity:0;transform:translateY(-48px)}}',
+    '@keyframes ic-x-pop{to{opacity:0;transform:scale(.78)}}'
   ].join('\n');
 
   // ---- Per-widget HTML + CSS ----
@@ -302,7 +313,7 @@
       case 'BufferRing':
         return '<svg viewBox="0 0 100 100"><circle class="trk" cx="50" cy="50" r="46"/>' +
           '<circle class="arc" cx="50" cy="50" r="46" stroke-dasharray="289" stroke-dashoffset="289"/></svg>' +
-          '<span class="v">0.0</span>';
+          (w.notext ? '' : '<span class="v">0.0</span>');
       case 'BitrateMeter':
         return '<svg viewBox="0 0 100 32" preserveAspectRatio="none"><polyline class="spark" points=""/></svg>';
       case 'DestinationStatus':
@@ -369,14 +380,14 @@
       case 'BufferBar':
         css = id + '{width:' + w.size.w + 'px;height:' + Math.max(3, w.size.h) + 'px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}' +
           id + ' .fill{display:block;height:100%;width:0;border-radius:999px;background:currentColor;' +
-          'transform-origin:left center;transition:width .42s cubic-bezier(.16,1,.3,1)}';
+          'transform-origin:left center;transition:width var(--ic-sm,.42s) cubic-bezier(.16,1,.3,1)}';
         break;
       case 'BufferRing':
         css = id + '{position:relative;width:' + w.size.w + 'px;height:' + w.size.w + 'px;color:currentColor}' +
           id + ' svg{position:absolute;inset:0;transform:rotate(-90deg)}' +
-          id + ' circle{fill:none;stroke-width:4}' +
+          id + ' circle{fill:none;stroke-width:var(--ic-ring-w,4)}' +
           id + ' .trk{stroke:rgba(255,255,255,.10)}' +
-          id + ' .arc{stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .42s cubic-bezier(.16,1,.3,1)}' +
+          id + ' .arc{stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset var(--ic-sm,.42s) cubic-bezier(.16,1,.3,1)}' +
           id + ' .v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;' +
           'font-size:' + Math.round(fp * 0.9) + 'px;font-weight:700}';
         break;
@@ -405,7 +416,8 @@
         break;
       case 'CornerFrame':
         css = id + '{position:fixed;inset:0;pointer-events:none;color:currentColor}' +
-          id + ' .c{position:absolute;width:46px;height:46px;border:3px solid currentColor;opacity:.85}' +
+          id + ' .c{position:absolute;width:var(--ic-cf-size,46px);height:var(--ic-cf-size,46px);' +
+          'border:var(--ic-cf-w,3px) solid currentColor;opacity:.85}' +
           id + ' .tl{top:24px;left:24px;border-right:0;border-bottom:0}' +
           id + ' .tr{top:24px;right:24px;border-left:0;border-bottom:0}' +
           id + ' .bl{bottom:24px;left:24px;border-right:0;border-top:0}' +
@@ -420,9 +432,9 @@
         css = id + '{position:relative;width:' + hb + 'px;height:' + hb + 'px;color:currentColor;' +
           'display:flex;align-items:center;justify-content:center}' +
           id + ' .core{width:32%;height:32%;border-radius:50%;background:currentColor;' +
-          'box-shadow:0 0 18px currentColor;animation:ic-beat 1.5s ease-in-out infinite}' +
+          'box-shadow:0 0 18px currentColor;animation:ic-beat calc(1.5s / var(--ic-spd-mul,1)) ease-in-out infinite}' +
           id + ' .ring{position:absolute;left:50%;top:50%;width:' + hb + 'px;height:' + hb + 'px;margin:' + (-hb / 2) + 'px;' +
-          'border:2px solid currentColor;border-radius:50%;opacity:0;animation:ic-ripple 2.4s ease-out infinite}' +
+          'border:2px solid currentColor;border-radius:50%;opacity:0;animation:ic-ripple calc(2.4s / var(--ic-spd-mul,1)) ease-out infinite}' +
           id + ' .r2{animation-delay:1.2s}';
         break;
       }
@@ -434,23 +446,32 @@
         break;
       case 'EdgeAccent':
         // Crisp inner line + a soft inward glow falloff = expressive border.
+        // --ic-edge-w: line thickness, --ic-glow: glow reach.
         css = id + '{position:fixed;inset:0;pointer-events:none;' +
-          'box-shadow:inset 0 0 0 3px currentColor, inset 0 0 38px -6px currentColor, inset 0 0 140px -52px currentColor}';
+          'box-shadow:inset 0 0 0 var(--ic-edge-w,3px) currentColor, ' +
+          'inset 0 0 var(--ic-glow,38px) -6px currentColor, inset 0 0 140px -52px currentColor}';
         break;
       case 'BackgroundTint':
+        // --ic-tint: overall strength.
         css = id + '{position:fixed;inset:0;pointer-events:none;' +
-          'background:radial-gradient(120% 80% at 50% 120%, currentColor, transparent 70%);opacity:.22}';
+          'background:radial-gradient(120% 80% at 50% 120%, currentColor, transparent 70%);opacity:var(--ic-tint,.22)}';
         break;
       case 'LiquidFill':
         // A tide that rises with the buffer and ripples when live. The
         // .liquid height is driven by applyData (buffer fraction).
+        // Tunable: --ic-sm (rise smoothness), --ic-spd-mul (wave speed),
+        // --ic-wav (wave intensity). Fallbacks keep the original look.
         css = id + '{position:fixed;inset:0;pointer-events:none;overflow:hidden}' +
           id + ' .liquid{position:absolute;left:0;right:0;bottom:0;height:0;' +
           'background:linear-gradient(to top, currentColor, transparent);opacity:.3;' +
-          'transition:height .6s cubic-bezier(.2,.8,.2,1)}' +
-          id + ' .wave{position:absolute;left:-25%;right:-25%;top:-14px;height:28px;background:currentColor;' +
-          'border-radius:45%;opacity:.5;animation:ic-tide 5s ease-in-out infinite}' +
-          'body[data-state="active"] ' + id + ' .liquid{animation:ic-swell 5s ease-in-out infinite}';
+          'transition:height var(--ic-sm,.6s) cubic-bezier(.2,.8,.2,1)}' +
+          // Wave (--ic-wav) drives the CREST geometry: height + how it sits, so
+          // 0 reads as a flat surface and 2 as a tall choppy crest - not just a
+          // fade. Opacity stays constant.
+          id + ' .wave{position:absolute;left:-25%;right:-25%;top:calc(-14px * var(--ic-wav,1));' +
+          'height:calc(28px * var(--ic-wav,1));background:currentColor;' +
+          'border-radius:45%;opacity:.5;animation:ic-tide calc(5s / var(--ic-spd-mul,1)) ease-in-out infinite}' +
+          'body[data-state="active"] ' + id + ' .liquid{animation:ic-swell calc(5s / var(--ic-spd-mul,1)) ease-in-out infinite}';
         break;
       case 'Image':
         css = id + ' img{width:' + w.size.w + 'px;height:auto;display:block}';
@@ -466,8 +487,8 @@
         '@keyframes ic-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.32)}24%{transform:scale(1)}38%{transform:scale(1.22)}52%{transform:scale(1)}}' + css;
     }
     if (w.kind === 'LiquidFill') {
-      css = '@keyframes ic-tide{0%,100%{transform:translateX(-4%) rotate(-1deg)}50%{transform:translateX(4%) rotate(1deg)}}' +
-        '@keyframes ic-swell{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}' + css;
+      css = '@keyframes ic-tide{0%,100%{transform:translateX(calc(-4% * var(--ic-wav,1))) rotate(calc(-1deg * var(--ic-wav,1)))}50%{transform:translateX(calc(4% * var(--ic-wav,1))) rotate(calc(1deg * var(--ic-wav,1)))}}' +
+        '@keyframes ic-swell{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-1.2% * var(--ic-wav,1)))}}' + css;
     }
     // Typography controls (text-bearing widgets). Weight targets the inner
     // text nodes so it overrides the per-widget defaults.
@@ -674,7 +695,10 @@
     // LiquidFill: a full-screen tide that rises with the buffer (full when
     // live). Skip while the widget is auto-hiding so the recede plays out.
     document.querySelectorAll('[data-kind="LiquidFill"] .liquid').forEach(function(l){
-      var host=l.parentNode; if(host && host.classList.contains('ic-gone')) return;
+      var host=l.parentNode; if(host && (host.classList.contains('ic-gone')||host.hasAttribute('data-ic-gone'))) return;
+      // Fixed level overrides the buffer-following fill.
+      var lvl=host&&host.getAttribute('data-level');
+      if(lvl!=null&&lvl!==''){ l.style.height=lvl+'%'; return; }
       l.style.height=(Math.max(frac, s.phase==='active'||s.phase==='ready'?1:frac)*100).toFixed(1)+'%';
     });
     document.querySelectorAll('[data-kind="BufferRing"]').forEach(function(el){
@@ -687,8 +711,16 @@
       var bind=el.getAttribute('data-bind')||'bitrate_kbps';
       var hist=el.__spark||(el.__spark=[]);
       hist.push(readout(s,bind).v); if(hist.length>48) hist.shift();
-      var mx=Math.max.apply(null,hist), mn=Math.min.apply(null,hist), rng=(mx-mn)||1;
-      var pts=hist.map(function(y,i){return (i/(Math.max(1,hist.length-1))*100).toFixed(1)+','+(30-((y-mn)/rng)*28).toFixed(1);}).join(' ');
+      // Smoothing: an EMA over the window damps jitter so a rock-steady signal
+      // reads as a calm line, not amplified noise. 0 = raw, ~1 = glassy.
+      var sm=parseFloat(el.getAttribute('data-smooth')); if(isNaN(sm)) sm=0.6;
+      var a=Math.max(0,Math.min(0.95,sm)), prev=hist[0], line=[];
+      for(var i=0;i<hist.length;i++){ prev=i?prev*a+hist[i]*(1-a):hist[i]; line.push(prev); }
+      var mx=Math.max.apply(null,line), mn=Math.min.apply(null,line);
+      // Range floor: tiny variation must NOT blow up to full height - a stable
+      // stream should look stable. Only a real swing earns the full vertical.
+      var rng=Math.max(mx-mn, mx*0.18, 1);
+      var pts=line.map(function(y,i){return (i/(Math.max(1,line.length-1))*100).toFixed(1)+','+(30-((y-mn)/rng)*28).toFixed(1);}).join(' ');
       var p=el.querySelector('.spark'); if(p) p.setAttribute('points',pts);
     });
     // CutCounter
@@ -737,8 +769,8 @@
   function clearHideTimers(){ hideTimers.forEach(clearTimeout); hideTimers=[]; }
   function applyHides(stateKey){
     clearHideTimers();
-    var goners=document.querySelectorAll('.icw.ic-gone');
-    for(var i=0;i<goners.length;i++){ goners[i].classList.remove('ic-gone'); goners[i].style.transform=''; goners[i].style.transition=''; goners[i].style.animation=''; }
+    var goners=document.querySelectorAll('.icw.ic-gone, .icw[data-ic-gone]');
+    for(var i=0;i<goners.length;i++){ var g=goners[i]; g.classList.remove('ic-gone'); g.removeAttribute('data-ic-gone'); g.style.transform=''; g.style.transition=''; g.style.animation=''; g.style.opacity=''; g.style.visibility=''; g.style.pointerEvents=''; }
     // __ic_noHide: editor preview keeps widgets up. !AUTOHIDE: the OBS URL
     // carried ?autohide=off, so the streamer wants the overlay to stay put.
     if(window.__ic_noHide || !AUTOHIDE) return;
@@ -746,14 +778,17 @@
       var ms=parseInt(el.getAttribute('data-ah-'+stateKey),10)||0;
       if(ms>0) hideTimers.push(setTimeout(function(){
         var ex=el.getAttribute('data-exit-'+stateKey)||'fade';
-        // Kill any looping state animation first - otherwise it keeps driving
-        // opacity/transform and overrides the exit, so nothing visibly leaves.
         el.style.animation='none';
-        if(ex==='slide-down') el.style.transform='translateY(48px)';
-        else if(ex==='slide-up') el.style.transform='translateY(-48px)';
-        else if(ex==='pop') el.style.transform='scale(.78)';
-        else if(ex==='instant') el.style.transition='none';
-        el.classList.add('ic-gone');
+        if(ex==='instant'){ el.style.transition='none'; el.classList.add('ic-gone'); return; }
+        // Run an exit KEYFRAME (see base CSS). The reflow
+        // commits the animation:none so the exit animation starts cleanly from
+        // the current pose; the forwards fill holds opacity:0 until re-show.
+        var name = ex==='slide-down'?'ic-x-down':ex==='slide-up'?'ic-x-up':ex==='pop'?'ic-x-pop':'ic-x-fade';
+        void el.offsetWidth;
+        el.style.animation=name+' .8s ease forwards';
+        el.setAttribute('data-ic-gone','1');
+        // Stop painting + block clicks once it's faded out.
+        hideTimers.push(setTimeout(function(){ el.style.visibility='hidden'; el.style.pointerEvents='none'; }, 850));
       }, ms));
     });
   }
@@ -794,6 +829,10 @@
       // replay: drop the state attribute + reflow so one-shot entrance
       // animations restart even when re-selecting the same state.
       if(d.replay){ body.removeAttribute('data-state'); void body.offsetWidth; lastHideKey=''; }
+      // rehide: re-arm every auto-hide timer from the current frame (after a
+      // Studio edit) WITHOUT restarting entrance animations, so all hides stay
+      // in lockstep instead of drifting until the next replay cycle.
+      if(d.rehide){ lastHideKey=''; }
       render(d.state||window.__ic_last||{});
     }
   });
@@ -871,10 +910,37 @@
       // to the base colour (the bug that made all states look identical).
       let style = meta.full ? '' : anchorCss(w.anchor, w.offset);
 
+      // Per-widget effect tuning, emitted as inline CSS vars the widget CSS
+      // reads (with fallbacks, so an untuned widget looks exactly as before).
+      // --ic-spd-mul: animation speed; --ic-sm: data-driven transition
+      // smoothness (seconds); --ic-wav: LiquidFill wave intensity.
+      if (w.speed != null && +w.speed !== 1) style += '--ic-spd-mul:' + r(Math.max(0.1, +w.speed)) + ';';
+      if (w.smooth != null && (w.kind === 'LiquidFill' || w.kind === 'BufferBar' || w.kind === 'BufferRing')) {
+        style += '--ic-sm:' + r(Math.max(0, +w.smooth)) + 's;';
+      }
+      if (w.kind === 'LiquidFill' && w.wave != null && +w.wave !== 1) style += '--ic-wav:' + r(Math.max(0, +w.wave)) + ';';
+      if (w.kind === 'BufferRing' && w.ringWidth != null) style += '--ic-ring-w:' + r(Math.max(1, +w.ringWidth)) + ';';
+      if (w.kind === 'EdgeAccent') {
+        if (w.edgeWidth != null) style += '--ic-edge-w:' + r(Math.max(0, +w.edgeWidth)) + 'px;';
+        if (w.glow != null) style += '--ic-glow:' + r(Math.max(0, +w.glow)) + 'px;';
+      }
+      if (w.kind === 'BackgroundTint' && w.intensity != null) style += '--ic-tint:' + r(Math.max(0, Math.min(1, +w.intensity))) + ';';
+      if (w.kind === 'CornerFrame') {
+        if (w.frameSize != null) style += '--ic-cf-size:' + r(Math.max(8, +w.frameSize)) + 'px;';
+        if (w.frameWidth != null) style += '--ic-cf-w:' + r(Math.max(1, +w.frameWidth)) + 'px;';
+      }
+
       // Per-state text overrides surfaced as data attributes for the runtime.
       let dataAttrs = 'data-kind="' + w.kind + '"';
+      // LiquidFill fixed level (vs the default buffer-following fill).
+      if (w.kind === 'LiquidFill' && w.level != null && w.level !== 'buffer') {
+        dataAttrs += ' data-level="' + r(Math.max(0, Math.min(100, +w.level))) + '"';
+      }
       if (w.kind === 'DelayReadout') dataAttrs += ' data-bind="' + esc(w.bind || 'target_delay_ms') + '"';
-      if (w.kind === 'BitrateMeter') dataAttrs += ' data-bind="' + esc(w.bind || 'bitrate_kbps') + '"';
+      if (w.kind === 'BitrateMeter') {
+        dataAttrs += ' data-bind="' + esc(w.bind || 'bitrate_kbps') + '"';
+        if (w.smooth != null) dataAttrs += ' data-smooth="' + r(Math.max(0, Math.min(0.95, w.smooth))) + '"';
+      }
       // CutCounter is intentionally excluded: its label is the live count
       // (driven by applyData via data-tpl), so per-state text overrides
       // would fight the counter. The rest take per-state text overrides.
@@ -988,9 +1054,9 @@
     return { style: style, duration_ms: duration_ms, easing: easing || 'ease-out', delay_ms: 0 };
   };
   // One colour + motion per delay-state so every state reads at a glance:
-  // grey idle, AMBER filling, CYAN armed, GREEN live, PINK cut, RED error.
+  // grey idle, AMBER filling, CYAN armed, GREEN live, RED error.
   const GREY = '#8a8f9a', AMBER = '#ffb73a', CYAN = '#5ac8fa', GREEN = '#54e38e',
-        PINK = '#ff5aa0', RED = '#ff5a5a';
+        RED = '#ff5a5a';
 
   // Build a 6-state map from a compact spec. idle hides by default; pass
   // `idle` to override (e.g. the technical panel stays visible at idle).
@@ -1030,7 +1096,6 @@
           preparing: { color: AMBER },
           ready: { color: CYAN },
           active: { color: GREEN, anim: A('breathe', 3000) },
-          cut: { color: PINK, anim: A('flash', 240, 'linear') },
           error: { color: RED, anim: A('pulse', 700) }
         })
       })
@@ -1064,7 +1129,6 @@
           preparing: { color: AMBER },
           ready: { color: CYAN },
           active: { color: GREEN },
-          cut: { color: PINK, anim: A('flash', 220, 'linear') },
           error: { color: RED }
         })
       })
@@ -1077,7 +1141,6 @@
           preparing: { color: AMBER, anim: A('glow', 1600) },
           ready: { color: CYAN, anim: A('glow', 3200) },
           active: { color: GREEN, anim: A('glow', 2600) },
-          cut: { color: PINK, anim: A('flash', 240, 'linear') },
           error: { color: RED, anim: A('pulse', 700) }
         })
       }),
@@ -1087,7 +1150,6 @@
           preparing: { text: 'ARMING DELAY', color: AMBER },
           ready: { text: 'DELAY ARMED', color: CYAN },
           active: { text: 'DELAY ON', color: GREEN },
-          cut: { text: 'CUT', color: PINK },
           error: { text: 'DESTINATION DROPPED', color: RED, anim: A('shake', 400) }
         })
       })
@@ -1119,7 +1181,7 @@
         color: CYAN,
         states: S6({
           preparing: { color: AMBER }, ready: { color: CYAN }, active: { color: GREEN },
-          cut: { color: PINK }, error: { color: RED, anim: A('pulse', 700) }
+          error: { color: RED, anim: A('pulse', 700) }
         })
       }),
       W('StatePill', {
@@ -1128,7 +1190,6 @@
           preparing: { text: 'ARMING', color: AMBER, anim: A('slide-down', 400) },
           ready: { text: 'ARMED', color: CYAN },
           active: { text: 'ON AIR', color: GREEN },
-          cut: { text: 'CUT', color: PINK, anim: A('flash', 220, 'linear') },
           error: { text: 'SIGNAL LOST', color: RED, anim: A('flash', 300, 'linear') }
         })
       }),
@@ -1136,7 +1197,7 @@
         anchor: 'top-right', offset: { x: 96, y: 62 }, font_px: 30, bind: 'target_delay_ms', color: CYAN,
         states: S6({
           preparing: { color: AMBER }, ready: { color: CYAN }, active: { color: GREEN },
-          cut: { color: PINK }, error: { color: RED }
+          error: { color: RED }
         })
       })
     ]),
@@ -1155,7 +1216,7 @@
 
     preset('Status Panel', 'Technical', 'Delay, buffer, bitrate and destinations - greyed at idle, lit by state.', [
       W('DelayReadout', { anchor: 'top-left', offset: { x: 96, y: 62 }, font_px: 34, bind: 'target_delay_ms', color: CYAN,
-        states: S6({ idle: { visible: true, color: GREY }, preparing: { color: AMBER }, ready: { color: CYAN }, active: { color: GREEN }, cut: { color: PINK }, error: { color: RED } }) }),
+        states: S6({ idle: { visible: true, color: GREY }, preparing: { color: AMBER }, ready: { color: CYAN }, active: { color: GREEN }, error: { color: RED } }) }),
       W('BufferBar', { anchor: 'top-left', offset: { x: 96, y: 112 }, size: { w: 180, h: 8 }, color: CYAN,
         states: S6({ idle: { visible: true, color: GREY }, preparing: { color: AMBER }, ready: { color: CYAN }, active: { color: GREEN }, error: { color: RED } }) }),
       W('BitrateMeter', { anchor: 'top-left', offset: { x: 96, y: 134 }, size: { w: 180, h: 32 }, color: CYAN,