Add dirty check to all remaining editor modals

Subclass Modal with snapshotValues() for: value source editor, audio
source editor, add device, profile editor, capture template, stream
editor, and PP template modals. Close/cancel now triggers discard
confirmation when form has unsaved changes. Document the convention
in CLAUDE.md.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/js/features/device-discovery.js

@@ -12,7 +12,22 @@ import { showToast } from '../core/ui.js';
 import { Modal } from '../core/modal.js';
 import { _computeMaxFps, _renderFpsHint } from './devices.js';
 
-const addDeviceModal = new Modal('add-device-modal');
+class AddDeviceModal extends Modal {
+    constructor() { super('add-device-modal'); }
+
+    snapshotValues() {
+        return {
+            name: document.getElementById('device-name').value,
+            type: document.getElementById('device-type').value,
+            url: document.getElementById('device-url').value,
+            serialPort: document.getElementById('device-serial-port').value,
+            ledCount: document.getElementById('device-led-count').value,
+            baudRate: document.getElementById('device-baud-rate').value,
+        };
+    }
+}
+
+const addDeviceModal = new AddDeviceModal();
 
 export function onDeviceTypeChanged() {
     const deviceType = document.getElementById('device-type').value;
@@ -175,11 +190,14 @@ export function showAddDevice() {
     if (scanBtn) scanBtn.disabled = false;
     addDeviceModal.open();
     onDeviceTypeChanged();
-    setTimeout(() => document.getElementById('device-name').focus(), 100);
+    setTimeout(() => {
+        document.getElementById('device-name').focus();
+        addDeviceModal.snapshot();
+    }, 100);
 }
 
-export function closeAddDeviceModal() {
-    addDeviceModal.forceClose();
+export async function closeAddDeviceModal() {
+    await addDeviceModal.close();
 }
 
 export async function scanForDevices(forceType) {
@@ -304,7 +322,7 @@ export async function handleAddDevice(event) {
             const result = await response.json();
             console.log('Device added successfully:', result);
             showToast('Device added successfully', 'success');
-            closeAddDeviceModal();
+            addDeviceModal.forceClose();
             // Use window.* to avoid circular imports
             if (typeof window.loadDevices === 'function') await window.loadDevices();
             // Auto-start device tutorial on first device add