feat: add alert transition effects and configuration options for alert modes

Author: snootched

src/core/helpers/lcards-helper-manager.js

@@ -192,6 +192,14 @@ export class LCARdSHelperManager extends BaseService {
     this.subscribeToHelper('alert_mode', (newMode, oldMode) => {
       lcardsLog.info(`[HelperManager] Alert mode changed to: ${newMode}`);
 
+      // Guard: if ThemeManager already applied this mode it means window.lcards.setAlertMode
+      // fired first and synced the helper itself — don't run the transition a second time.
+      const alreadyApplied = window.lcards?.core?.themeManager?.getAlertMode?.() === newMode;
+      if (alreadyApplied) {
+        lcardsLog.debug('[HelperManager] Alert mode already applied by ThemeManager — skipping duplicate call');
+        return;
+      }
+
       // Ensure HASS is available (critical for green_alert)
       if (this.hass && window.lcards?.core) {
         window.lcards.core.ingestHass(this.hass);
@@ -256,8 +264,9 @@ export class LCARdSHelperManager extends BaseService {
 
         // Apply the mode
         if (window.lcards?.setAlertMode) {
-          lcardsLog.info(`[HelperManager] Calling setAlertMode('${currentMode}') on initial load`);
-          window.lcards.setAlertMode(currentMode).catch(error => {
+          lcardsLog.info(`[HelperManager] Calling setAlertMode('${currentMode}') on initial load (no transition)`);
+          // Skip transition on initial load — there is nothing visible to transition from.
+          window.lcards.setAlertMode(currentMode, { skipTransition: true }).catch(error => {
             lcardsLog.error('[HelperManager] Failed to apply initial alert mode:', error);
           });
         } else {

src/core/helpers/lcards-helper-registry.js

@@ -82,6 +82,33 @@ export const HELPER_REGISTRY = {
     icon: mdi:message-alert`
   },
 
+  alert_transition_style: {
+    entity_id: 'input_select.lcards_alert_transition_style',
+    domain: 'input_select',
+    name: 'LCARdS Alert Transition Style',
+    description: 'Visual screen-transition effect played when switching alert modes. Defaults to off.',
+    icon: 'mdi:transition',
+    category: 'alert_system',
+    ws_create_params: {
+      options: ['off', 'blur_fade', 'fade_only', 'flash', 'color_bleed', 'flicker', 'static', 'wipe']
+    },
+    default_value: 'off',
+    yaml_config: `input_select:
+  lcards_alert_transition_style:
+    name: LCARdS Alert Transition Style
+    options:
+      - off
+      - blur_fade
+      - fade_only
+      - flash
+      - color_bleed
+      - flicker
+      - static
+      - wipe
+    initial: off
+    icon: mdi:transition`
+  },
+
   // ===== RED ALERT HSL =====
 
   alert_lab_red_hue: {

src/core/themes/ThemeManager.js

@@ -601,7 +601,7 @@ export class ThemeManager extends BaseService {
    * @param {string} mode - Alert mode ('red_alert', 'blue_alert', etc.)
    * @returns {Promise<void>}
    */
-  async setAlertMode(mode) {
+  async setAlertMode(mode, opts = {}) {
     if (!ALERT_MODE_TRANSFORMS[mode]) {
       lcardsLog.warn(`[ThemeManager] Unknown alert mode: ${mode}`);
       return;
@@ -617,8 +617,8 @@ export class ThemeManager extends BaseService {
     // Load user-customized transform parameters from persistent HA helpers (before injection)
     loadAlertTransformsFromHelpers(window.lcards?.core?.helperManager);
 
-    // Apply alert mode (injectAlertMode handles CSS variable updates and event dispatch)
-    await injectAlertMode(mode, hass);
+    // Apply alert mode — opts.transitionStyle selects the visual transition effect
+    await injectAlertMode(mode, hass, undefined, opts);
 
     // Update state
     this.currentAlertMode = mode;