cache overlay drafts locally

src/App.svelte

@@ -99,6 +99,7 @@
 
   $: if (authenticated && selectedOverlayId && overlayName && !overlayBusy) {
     const signature = overlayDraftSignature();
+    cacheOverlayDraft();
     if (signature !== overlaySavedSignature && signature !== overlayAutosaveAttemptedSignature && !overlayAutosaveTimer) {
       overlayAutosaveAttemptedSignature = signature;
       overlayAutosaveTimer = window.setTimeout(() => {
@@ -712,12 +713,44 @@
     overlayDisabledDesign = overlay.disabled_design;
     overlaySavedSignature = overlayDraftSignature();
     overlayAutosaveAttemptedSignature = overlaySavedSignature;
+    restoreOverlayDraft(overlay.id);
   }
 
   function overlayDraftSignature() {
     return JSON.stringify({ overlayName, overlaySlug, overlayHtml, overlayCss, overlayJavascript, overlayEnabled, overlayDisabledDesign });
   }
 
+  function overlayDraftCacheKey(id: string) {
+    return `trixie.overlay.draft.${id}`;
+  }
+
+  function cacheOverlayDraft() {
+    if (!selectedOverlayId) return;
+    try {
+      localStorage.setItem(overlayDraftCacheKey(selectedOverlayId), JSON.stringify({ overlayName, overlaySlug, overlayHtml, overlayCss, overlayJavascript, overlayEnabled, overlayDisabledDesign }));
+    } catch {
+      // Local storage is an optional recovery aid; server persistence remains authoritative.
+    }
+  }
+
+  function restoreOverlayDraft(id: string) {
+    try {
+      const cached = JSON.parse(localStorage.getItem(overlayDraftCacheKey(id)) || 'null') as Partial<{ overlayName: string; overlaySlug: string; overlayHtml: string; overlayCss: string; overlayJavascript: string; overlayEnabled: boolean; overlayDisabledDesign: string }> | null;
+      if (!cached || typeof cached.overlayName !== 'string') return;
+      overlayName = cached.overlayName;
+      overlaySlug = cached.overlaySlug ?? overlaySlug;
+      overlayHtml = cached.overlayHtml ?? overlayHtml;
+      overlayCss = cached.overlayCss ?? overlayCss;
+      overlayJavascript = cached.overlayJavascript ?? overlayJavascript;
+      overlayEnabled = cached.overlayEnabled ?? overlayEnabled;
+      overlayDisabledDesign = cached.overlayDisabledDesign ?? overlayDisabledDesign;
+      overlaySavedSignature = '';
+      overlayAutosaveAttemptedSignature = '';
+    } catch {
+      // Ignore malformed or unavailable local cache entries.
+    }
+  }
+
   async function createOverlay() {
     if (overlayAutosaveTimer) window.clearTimeout(overlayAutosaveTimer);
     overlayAutosaveTimer = undefined;
@@ -743,6 +776,7 @@
       const saved = await response.json();
       await loadOverlays();
       selectOverlay({ ...saved, enabled: overlayEnabled, disabled_design: overlayDisabledDesign });
+      if (selectedOverlayId) localStorage.removeItem(overlayDraftCacheKey(selectedOverlayId));
     } catch (error) {
       overlayError = error instanceof Error ? error.message : 'The overlay draft could not be saved.';
     } finally {