Allow exportLVGL-based widgets in LVGL mode

Permit widgets that provide an exportLVGL translator to be used in LVGL mode in addition to native lvgl_* widgets and input controls. Update AppStateFacade to consider plugin.exportLVGL (function) when checking compatibility, and adjust widget_palette logic and explanation to include plugin?.exportLVGL. This enables non-native widgets that can be translated to LVGL to appear and be used in LVGL mode.

Author: koosoli

custom_components/esphome_designer/frontend/js/core/stores/index.js

@@ -791,8 +791,10 @@ class AppStateFacade {
         if (mode === 'oepl') return !!plugin.exportOEPL;
         if (mode === 'opendisplay') return !!plugin.exportOpenDisplay;
         if (mode === 'lvgl') {
-            // Strict Isolation: Only permit native LVGL widgets
-            return w.type && w.type.startsWith('lvgl_');
+            // LVGL mode: permit native LVGL widgets OR widgets with exportLVGL translation
+            const isNativeLVGL = w.type && w.type.startsWith('lvgl_');
+            const hasLVGLExport = typeof plugin.exportLVGL === 'function';
+            return isNativeLVGL || hasLVGLExport;
         }
         if (mode === 'direct') {
             // Direct mode uses display.lambda. Compatible if it has 'export' method

custom_components/esphome_designer/frontend/js/ui/widget_palette.js

@@ -389,14 +389,14 @@ export async function renderWidgetPalette(containerId) {
                     isCompatible = hasExport && !isExcludedCategory && !isExcludedWidget;
                     explanation = `Not supported in ${currentMode === 'oepl' ? 'OpenEpaperLink' : 'OpenDisplay'} mode`;
                 } else if (currentMode === 'lvgl') {
-                    // CRITICAL ARCHITECTURAL NOTE: LVGL mode is strictly restricted to native LVGL objects 
-                    // and essential input/navigation controls to prevent mixing incompatible
-                    // lambda-based rendering with the LVGL stack.
+                    // LVGL mode: Permit native LVGL objects, translatable widgets (with exportLVGL),
+                    // and essential input/navigation controls.
                     const isLvglNative = widget.type.startsWith('lvgl_');
                     const isInputCategory = (category.id === 'inputs');
+                    const hasLVGLExport = typeof plugin?.exportLVGL === 'function';
 
-                    isCompatible = isLvglNative || isInputCategory;
-                    explanation = 'Only native LVGL widgets and input controls supported in LVGL mode';
+                    isCompatible = isLvglNative || isInputCategory || hasLVGLExport;
+                    explanation = 'Widget not compatible with LVGL mode';
                 } else if (currentMode === 'direct') {
                     // Direct mode is display.lambda.
                     // Compatible if it has 'export' method AND is not strictly for another protocol (LVGL/OEPL).