iobroker.mywebui 1.134.0 → 1.158.0

package/admin/jsonConfig.json

@@ -217,6 +217,74 @@
           "hidden": "!data.grafanaEnabled || !data.grafanaSsoEnabled"
         }
       }
+    },
+    "tab_reports": {
+      "type": "panel",
+      "label": "Reports",
+      "items": {
+        "_repHdr": {
+          "type": "header",
+          "text": "Generated reports",
+          "size": 3
+        },
+        "_repInfo": {
+          "type": "staticText",
+          "text": "Each report sets its own output folder and file name in the editor (Report Page → Output). These settings apply to all reports.",
+          "style": {
+            "fontSize": 13,
+            "color": "#666",
+            "marginBottom": 12
+          }
+        },
+        "reportTimeZone": {
+          "type": "text",
+          "label": "Time zone for date tokens",
+          "placeholder": "Asia/Baku",
+          "sm": 12,
+          "md": 6,
+          "lg": 4,
+          "help": "IANA name, e.g. Asia/Baku, Europe/Berlin. Empty = the host system time zone. Used for {yyyy} {MM} {dd} {HH} {mm} {ss} in paths and file names."
+        },
+        "reportMinFreeMB": {
+          "type": "number",
+          "label": "Minimum free disk space (MB)",
+          "min": 0,
+          "sm": 12,
+          "md": 6,
+          "lg": 4,
+          "newLine": true,
+          "help": "A report is not written when less space is free on its target drive. 0 = no check."
+        },
+        "reportRetentionDays": {
+          "type": "number",
+          "label": "Delete files older than (days)",
+          "min": 0,
+          "sm": 12,
+          "md": 6,
+          "lg": 4,
+          "newLine": true,
+          "help": "Per report, only files that report produced. 0 = keep."
+        },
+        "reportMaxFiles": {
+          "type": "number",
+          "label": "Keep at most (files per report)",
+          "min": 0,
+          "sm": 12,
+          "md": 6,
+          "lg": 4,
+          "help": "The newest are kept. 0 = no limit."
+        },
+        "reportFonts": {
+          "type": "text",
+          "label": "Extra fonts for PDF",
+          "placeholder": "D:/fonts/NotoSansArabic-Regular.ttf",
+          "sm": 12,
+          "md": 12,
+          "lg": 8,
+          "newLine": true,
+          "help": "Font files (.ttf, .otf, .ttc) used in PDF reports in addition to the built-in Roboto (Latin incl. Azerbaijani and Turkish, Cyrillic, Greek). Separate several with ;. Chinese/Japanese/Korean use a CJK font found on this computer automatically (Microsoft YaHei, SimSun, Noto CJK, PingFang)."
+        }
+      }
     }
   }
 }

package/default-controls/controls/WebuiConnectionMonitor1.control

@@ -1 +1 @@
-{"html": "<div id=\"monitor\" class=\"connection-monitor\"><div class=\"status-indicator\">\n    <svg class=\"status-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n        <circle id=\"circle\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n        <path id=\"check\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n        <path id=\"cross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n    </svg>\n<span id=\"statusText\" class=\"status-text\"></span>\n</div><div class=\"pulse-ring\"></div></div>\n<!-- Popup Modal -->\n<div id=\"connectionPopup\" class=\"connection-popup\" style=\"display:none;\">\n    <div class=\"popup-overlay\"></div>\n    <div class=\"popup-content\">\n        <div class=\"popup-icon-wrapper\">\n            <svg id=\"popupIcon\" class=\"popup-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n                <path id=\"popupCheck\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n                <path id=\"popupCross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n            </svg>\n<div class=\"popup-pulse-ring\"></div>\n        </div>\n        <h2 id=\"popupTitle\" class=\"popup-title\"></h2>\n        <p id=\"popupMessage\" class=\"popup-message\"></p>\n    </div>\n</div>\n", "style": ":host {\n    display: inline-block;\n    font-family: system-ui, -apple-system, sans-serif;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.connection-monitor {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 16px;\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.95);\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\n    backdrop-filter: blur(8px);\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.status-icon {\n    width: 24px;\n    height: 24px;\n    transition: all 0.3s ease;\n}\n\n.status-text {\n    font-size: 14px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n/* Bağlı vəziyyət (Yaşıl) */\n.connection-monitor.connected {\n    background: rgba(16, 185, 129, 0.1);\n    border-color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-text {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .pulse-ring {\n    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Kəsilmiş vəziyyət (Qırmızı) */\n.connection-monitor.disconnected {\n    background: rgba(239, 68, 68, 0.1);\n    border-color: var(--ui-error,#ef4444);\n    animation: shake 0.5s ease;\n}\n\n.connection-monitor.disconnected .status-icon {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .status-text {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .pulse-ring {\n    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Yoxlanma vəziyyəti (Sarı) */\n.connection-monitor.checking {\n    background: rgba(251, 191, 36, 0.1);\n    border-color: var(--ui-warn,#fbbf24);\n}\n\n.connection-monitor.checking .status-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-monitor.checking .status-text {\n    color: var(--ui-warn,#fbbf24);\n}\n\n/* Pulse halqası */\n.pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 15px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n/* ==================== POPUP STYLES ==================== */\n\n.connection-popup {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: fadeIn 0.3s ease;\n}\n\n.popup-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.7);\n    backdrop-filter: blur(8px);\n}\n\n.popup-content {\n    position: relative;\n    background: white;\n    border-radius: 24px;\n    padding: 48px 64px;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n    text-align: center;\n    max-width: 500px;\n    width: 90%;\n    animation: slideUp 0.4s ease;\n}\n\n.popup-icon-wrapper {\n    position: relative;\n    width: 120px;\n    height: 120px;\n    margin: 0 auto 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.popup-icon {\n    width: 120px;\n    height: 120px;\n    transition: all 0.3s ease;\n}\n\n.popup-pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n.popup-title {\n    font-size: 32px;\n    font-weight: 700;\n    margin: 0 0 16px 0;\n    color: var(--ui-surface,#1f2937);\n}\n\n.popup-message {\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0;\n    color: #6b7280;\n}\n\n/* Popup Connected State */\n.connection-popup.connected .popup-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-pulse-ring {\n    animation: pulse-green-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.connected .popup-title {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-message {\n    color: #059669;\n}\n\n/* Popup Disconnected State */\n.connection-popup.disconnected .popup-icon {\n    color: var(--ui-error,#ef4444);\n    animation: shake-big 0.5s ease;\n}\n\n.connection-popup.disconnected .popup-pulse-ring {\n    animation: pulse-red-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.disconnected .popup-title {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-popup.disconnected .popup-message {\n    color: #dc2626;\n}\n\n/* Popup Checking State */\n.connection-popup.checking .popup-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-popup.checking .popup-title {\n    color: var(--ui-warn,#fbbf24);\n}\n\n.connection-popup.checking .popup-message {\n    color: #f59e0b;\n}\n\n/* Animasiyalar */\n@keyframes pulse-green {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes pulse-green-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes shake {\n    0%, 100% { transform: translateX(0); }\n    25% { transform: translateX(-4px); }\n    75% { transform: translateX(4px); }\n}\n\n@keyframes shake-big {\n    0%, 100% { transform: translateX(0) rotate(0deg); }\n    25% { transform: translateX(-10px) rotate(-5deg); }\n    75% { transform: translateX(10px) rotate(5deg); }\n}\n\n@keyframes rotate {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n@keyframes slideUp {\n    from {\n        opacity: 0;\n        transform: translateY(50px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* Qaranlıq tema */\n@media (prefers-color-scheme: dark) {\n    .connection-monitor {\n        background: rgba(31, 41, 55, 0.95);\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);\n    }\n    \n    .popup-content {\n        -webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background: var(--ui-surface,#1f2937);\n    }\n    \n    .popup-title {\n        color: #f3f4f6;\n    }\n    \n    .popup-message {\n        color: #d1d5db;\n    }\n}\n\n/* Kiçik ölçü */\n.connection-monitor.size-small {\n    padding: 6px 12px;\n    font-size: 12px;\n}\n\n.connection-monitor.size-small .status-icon {\n    width: 18px;\n    height: 18px;\n}\n\n/* Böyük ölçü */\n.connection-monitor.size-large {\n    padding: 14px 20px;\n    font-size: 16px;\n}\n\n.connection-monitor.size-large .status-icon {\n    width: 32px;\n    height: 32px;\n}", "script": "let checkInterval = null;\nlet isConnected = false;\nlet onConnectHandler = null;\nlet onDisconnectHandler = null;\nlet onReconnectHandler = null;\nlet onErrorHandler = null;\nlet popupTimeout = null;\nlet currentStatus = 'checking';\nlet _langChangedHandler = null;\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function connectedCallback(instance) {\n    const monitorEl = instance._getDomElement('monitor');\n    const statusTextEl = instance._getDomElement('statusText');\n    const checkIcon = instance._getDomElement('check');\n    const crossIcon = instance._getDomElement('cross');\n    const circleIcon = instance._getDomElement('circle');\n    \n    // Popup elementləri\n    const popupEl = instance._getDomElement('connectionPopup');\n    const popupTitleEl = instance._getDomElement('popupTitle');\n    const popupMessageEl = instance._getDomElement('popupMessage');\n    const popupCheckIcon = instance._getDomElement('popupCheck');\n    const popupCrossIcon = instance._getDomElement('popupCross');\n    \n    // Ölçü classı əlavə et\n    if (instance.size) {\n        monitorEl.classList.add('size-' + instance.size);\n    }\n    \n    // IOB connection hazır olana qədər gözlə\n    const waitForConnection = setInterval(() => {\n        if (window.IOB && window.IOB.connection) {\n            clearInterval(waitForConnection);\n            setupMonitoring();\n        }\n    }, 100);\n    \n    function setupMonitoring() {\n        const connection = window.IOB.connection;\n        \n        console.log('[ConnectionMonitor] 🚀 Monitoring başladı');\n        console.log('[ConnectionMonitor] Connection obyekti:', connection);\n        console.log('[ConnectionMonitor] İlkin status:', connection.connected);\n        \n        // İlk status yoxlaması\n        checkConnection();\n        \n        // Dövri yoxlama\n        const interval = instance.checkInterval || 5000;\n        checkInterval = setInterval(() => {\n            checkConnection();\n        }, interval);\n        \n        // Socket event-lərinə abunə ol\n        if (connection._socket) {\n            const socket = connection._socket;\n            \n            onConnectHandler = function() {\n                console.log('[ConnectionMonitor] ✅ Socket CONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onReconnectHandler = function() {\n                console.log('[ConnectionMonitor] 🔄 Socket RECONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onDisconnectHandler = function(reason) {\n                console.log('[ConnectionMonitor] ❌ Socket DISCONNECT event:', reason);\n                handleConnectionFailure();\n            };\n            \n            onErrorHandler = function(error) {\n                console.error('[ConnectionMonitor] ⚠️ Socket ERROR event:', error);\n                handleConnectionFailure();\n            };\n            \n            socket.on('connect', onConnectHandler);\n            socket.on('reconnect', onReconnectHandler);\n            socket.on('disconnect', onDisconnectHandler);\n            socket.on('connect_error', onErrorHandler);\n            socket.on('error', onErrorHandler);\n        }\n    }\n    \n    function checkConnection() {\n        if (!window.IOB || !window.IOB.connection) {\n            handleConnectionFailure();\n            return;\n        }\n        \n        const connection = window.IOB.connection;\n        \n        // Connection obyektinin connected property-sini yoxla\n        if (connection.connected === true) {\n            handleConnectionSuccess();\n        } \n        // Socket-in connected statusunu yoxla\n        else if (connection._socket && connection._socket.connected === true) {\n            handleConnectionSuccess();\n        }\n        // Navigator.onLine yoxla (fallback)\n        else if (navigator.onLine === false) {\n            handleConnectionFailure();\n        }\n        else {\n            // Əlaqə statusu qeyri-müəyyəndirsə, yoxlanılır statusu göstər\n            updateStatus('checking');\n        }\n    }\n    \n    function handleConnectionSuccess() {\n        const wasDisconnected = !isConnected;\n        \n        if (wasDisconnected) {\n            console.log('[ConnectionMonitor] 💚 Server əlaqəsi BƏRPA OLUNDU');\n            isConnected = true;\n            \n            // Əlaqə bərpa olundu popup-u göstər (3 saniyə)\n            showPopup('connected');\n            if (popupTimeout) clearTimeout(popupTimeout);\n            popupTimeout = setTimeout(() => {\n                hidePopup();\n            }, 3000);\n        }\n        \n        updateStatus('connected');\n    }\n    \n    function handleConnectionFailure() {\n        if (isConnected) {\n            console.error('[ConnectionMonitor] 💔 Server əlaqəsi KƏSİLDİ');\n            isConnected = false;\n            \n            // Əlaqə kəsildi popup-u göstər (daimi)\n            showPopup('disconnected');\n        }\n        \n        updateStatus('disconnected');\n    }\n    \n    function updateStatus(status) {\n        currentStatus = status;\n        monitorEl.classList.remove('connected', 'disconnected', 'checking');\n        monitorEl.classList.add(status);\n        \n        checkIcon.style.display = 'none';\n        crossIcon.style.display = 'none';\n        circleIcon.style.display = 'block';\n        \n        if (status === 'connected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.connectedtext', statusTextEl);\n            checkIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'disconnected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.disconnectedtext', statusTextEl);\n            crossIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'checking') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.checkingtext', statusTextEl);\n        }\n        \n        if (instance.showText === false) {\n            statusTextEl.style.display = 'none';\n        } else {\n            statusTextEl.style.display = 'inline';\n        }\n    }\n    \n    function showPopup(status) {\n        popupEl.style.display = 'flex';\n        popupEl.classList.remove('connected', 'disconnected', 'checking');\n        popupEl.classList.add(status);\n        \n        // İkonları yenilə\n        popupCheckIcon.style.display = 'none';\n        popupCrossIcon.style.display = 'none';\n        \n        if (status === 'connected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.connectedtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessageconnected', popupMessageEl);\n            popupCheckIcon.style.display = 'block';\n        } else if (status === 'disconnected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.disconnectedtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessagedisconnected', popupMessageEl);\n            popupCrossIcon.style.display = 'block';\n        } else if (status === 'checking') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.checkingtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessagechecking', popupMessageEl);\n        }\n    }\n    \n    function hidePopup() {\n        popupEl.style.display = 'none';\n        if (popupTimeout) {\n            clearTimeout(popupTimeout);\n            popupTimeout = null;\n        }\n    }\n\n    _langChangedHandler = () => updateStatus(currentStatus);\n    window.addEventListener('languageChanged', _langChangedHandler);\n}\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n    if (checkInterval) {\n        clearInterval(checkInterval);\n        checkInterval = null;\n    }\n    \n    if (_langChangedHandler) {\n        window.removeEventListener('languageChanged', _langChangedHandler);\n        _langChangedHandler = null;\n    }\n\n    if (popupTimeout) {\n        clearTimeout(popupTimeout);\n        popupTimeout = null;\n    }\n    \n    // Event listener-ləri təmizlə\n    if (window.IOB && window.IOB.connection && window.IOB.connection._socket) {\n        const socket = window.IOB.connection._socket;\n        \n        if (onConnectHandler) socket.off('connect', onConnectHandler);\n        if (onReconnectHandler) socket.off('reconnect', onReconnectHandler);\n        if (onDisconnectHandler) socket.off('disconnect', onDisconnectHandler);\n        if (onErrorHandler) {\n            socket.off('connect_error', onErrorHandler);\n            socket.off('error', onErrorHandler);\n        }\n    }\n}", "properties": {"checkInterval": {"type": "number", "default": "5000"}, "showText": {"type": "boolean", "default": "false"}, "size": {"type": "enum", "default": "medium", "values": ["small", "medium", "large"]}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}, "translations": {"az": {"WebuiConnectionMonitor": {"connectedtext": "Serverlə əlaqə var", "disconnectedtext": "Serverlə əlaqə yoxdur", "checkingtext": "Yoxlanılır...", "popupmessageconnected": "Əlaqə uğurla bərpa olundu", "popupmessagedisconnected": "Zəhmət olmasa əlaqənizi yoxlayın", "popupmessagechecking": "Server əlaqəsi yoxlanılır"}}, "ru": {"WebuiConnectionMonitor": {"connectedtext": "Соединение с сервером установлено", "disconnectedtext": "Соединение с сервером потеряно", "checkingtext": "Проверяется...", "popupmessageconnected": "Соединение успешно восстановлено", "popupmessagedisconnected": "Пожалуйста, проверьте подключение", "popupmessagechecking": "Проверка соединения с сервером"}}, "de": {"WebuiConnectionMonitor": {"connectedtext": "Verbindung zum Server hergestellt", "disconnectedtext": "Verbindung zum Server unterbrochen", "checkingtext": "Wird geprüft...", "popupmessageconnected": "Verbindung erfolgreich wiederhergestellt", "popupmessagedisconnected": "Bitte überprüfen Sie Ihre Verbindung", "popupmessagechecking": "Serververbindung wird geprüft"}}, "en": {"WebuiConnectionMonitor": {"connectedtext": "Connected to server", "disconnectedtext": "Disconnected from server", "checkingtext": "Checking...", "popupmessageconnected": "Connection successfully restored", "popupmessagedisconnected": "Please check your connection", "popupmessagechecking": "Checking server connection"}}, "tr": {"WebuiConnectionMonitor": {"connectedtext": "Sunucuya bağlantı kuruldu", "disconnectedtext": "Sunucu bağlantısı kesildi", "checkingtext": "Kontrol ediliyor...", "popupmessageconnected": "Bağlantı başarıyla yeniden kuruldu", "popupmessagedisconnected": "Lütfen bağlantınızı kontrol edin", "popupmessagechecking": "Sunucu bağlantısı kontrol ediliyor"}}}}
+{"html": "<div id=\"monitor\" class=\"connection-monitor\"><div class=\"status-indicator\">\n    <svg class=\"status-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n        <circle id=\"circle\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n        <path id=\"check\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n        <path id=\"cross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n    </svg>\n<span id=\"statusText\" class=\"status-text\"></span>\n</div><div class=\"pulse-ring\"></div></div>\n<!-- Popup Modal -->\n<div id=\"connectionPopup\" class=\"connection-popup\" style=\"display:none;\">\n    <div class=\"popup-overlay\"></div>\n    <div class=\"popup-content\">\n        <div class=\"popup-icon-wrapper\">\n            <svg id=\"popupIcon\" class=\"popup-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n                <path id=\"popupCheck\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n                <path id=\"popupCross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n            </svg>\n<div class=\"popup-pulse-ring\"></div>\n        </div>\n        <h2 id=\"popupTitle\" class=\"popup-title\"></h2>\n        <p id=\"popupMessage\" class=\"popup-message\"></p>\n    </div>\n</div>\n", "style": ":host {\n    display: inline-block;\n    font-family: system-ui, -apple-system, sans-serif;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.connection-monitor {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 16px;\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.95);\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\n    backdrop-filter: blur(8px);\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.status-icon {\n    width: 24px;\n    height: 24px;\n    transition: all 0.3s ease;\n}\n\n.status-text {\n    font-size: 14px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n/* Bağlı vəziyyət (Yaşıl) */\n.connection-monitor.connected {\n    background: rgba(16, 185, 129, 0.1);\n    border-color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-text {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .pulse-ring {\n    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Kəsilmiş vəziyyət (Qırmızı) */\n.connection-monitor.disconnected {\n    background: rgba(239, 68, 68, 0.1);\n    border-color: var(--ui-error,#ef4444);\n    animation: shake 0.5s ease;\n}\n\n.connection-monitor.disconnected .status-icon {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .status-text {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .pulse-ring {\n    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Yoxlanma vəziyyəti (Sarı) */\n.connection-monitor.checking {\n    background: rgba(251, 191, 36, 0.1);\n    border-color: var(--ui-warn,#fbbf24);\n}\n\n.connection-monitor.checking .status-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-monitor.checking .status-text {\n    color: var(--ui-warn,#fbbf24);\n}\n\n/* Pulse halqası */\n.pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 15px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n/* ==================== POPUP STYLES ==================== */\n\n.connection-popup {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: fadeIn 0.3s ease;\n}\n\n.popup-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.7);\n    backdrop-filter: blur(8px);\n}\n\n.popup-content {\n    position: relative;\n    background: white;\n    border-radius: 24px;\n    padding: 48px 64px;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n    text-align: center;\n    max-width: 500px;\n    width: 90%;\n    animation: slideUp 0.4s ease;\n}\n\n.popup-icon-wrapper {\n    position: relative;\n    width: 120px;\n    height: 120px;\n    margin: 0 auto 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.popup-icon {\n    width: 120px;\n    height: 120px;\n    transition: all 0.3s ease;\n}\n\n.popup-pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n.popup-title {\n    font-size: 32px;\n    font-weight: 700;\n    margin: 0 0 16px 0;\n    color: var(--ui-surface,#1f2937);\n}\n\n.popup-message {\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0;\n    color: #6b7280;\n}\n\n/* Popup Connected State */\n.connection-popup.connected .popup-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-pulse-ring {\n    animation: pulse-green-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.connected .popup-title {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-message {\n    color: #059669;\n}\n\n/* Popup Disconnected State */\n.connection-popup.disconnected .popup-icon {\n    color: var(--ui-error,#ef4444);\n    animation: shake-big 0.5s ease;\n}\n\n.connection-popup.disconnected .popup-pulse-ring {\n    animation: pulse-red-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.disconnected .popup-title {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-popup.disconnected .popup-message {\n    color: #dc2626;\n}\n\n/* Popup Checking State */\n.connection-popup.checking .popup-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-popup.checking .popup-title {\n    color: var(--ui-warn,#fbbf24);\n}\n\n.connection-popup.checking .popup-message {\n    color: #f59e0b;\n}\n\n/* Animasiyalar */\n@keyframes pulse-green {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes pulse-green-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes shake {\n    0%, 100% { transform: translateX(0); }\n    25% { transform: translateX(-4px); }\n    75% { transform: translateX(4px); }\n}\n\n@keyframes shake-big {\n    0%, 100% { transform: translateX(0) rotate(0deg); }\n    25% { transform: translateX(-10px) rotate(-5deg); }\n    75% { transform: translateX(10px) rotate(5deg); }\n}\n\n@keyframes rotate {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n@keyframes slideUp {\n    from {\n        opacity: 0;\n        transform: translateY(50px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* Qaranlıq tema */\n@media (prefers-color-scheme: dark) {\n    .connection-monitor {\n        background: rgba(31, 41, 55, 0.95);\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);\n    }\n    \n    .popup-content {\n        -webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background: var(--ui-surface,#1f2937);\n    }\n    \n    .popup-title {\n        color: #f3f4f6;\n    }\n    \n    .popup-message {\n        color: #d1d5db;\n    }\n}\n\n/* Kiçik ölçü */\n.connection-monitor.size-small {\n    padding: 6px 12px;\n    font-size: 12px;\n}\n\n.connection-monitor.size-small .status-icon {\n    width: 18px;\n    height: 18px;\n}\n\n/* Böyük ölçü */\n.connection-monitor.size-large {\n    padding: 14px 20px;\n    font-size: 16px;\n}\n\n.connection-monitor.size-large .status-icon {\n    width: 32px;\n    height: 32px;\n}", "script": "let checkInterval = null;\nlet isConnected = false;\nlet onConnectHandler = null;\nlet onDisconnectHandler = null;\nlet onReconnectHandler = null;\nlet onErrorHandler = null;\nlet popupTimeout = null;\nlet currentStatus = 'checking';\nlet _langChangedHandler = null;\n// Popups are for operators watching a live screen. Not in the designer (the editor preview runs\n// this script too), not for the first connect of a page (nothing was lost), and not while the\n// page prints: window.print() stops the page's JavaScript, the socket misses its heartbeat and\n// reconnects when the print dialog closes — expected, the subscriptions come back by themselves.\nlet everConnected = false;\nlet printing = false;\nlet quietUntil = 0;\nlet _beforePrint = null, _afterPrint = null, _quietCheck = null;\nconst PRINT_QUIET_MS = 15000;\nconst inDesigner = () => !/runtime\\.html$/.test(window.location.pathname);\nconst quiet = () => inDesigner() || printing || Date.now() < quietUntil;\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function connectedCallback(instance) {\n    const monitorEl = instance._getDomElement('monitor');\n    const statusTextEl = instance._getDomElement('statusText');\n    const checkIcon = instance._getDomElement('check');\n    const crossIcon = instance._getDomElement('cross');\n    const circleIcon = instance._getDomElement('circle');\n    \n    // Popup elementləri\n    const popupEl = instance._getDomElement('connectionPopup');\n    const popupTitleEl = instance._getDomElement('popupTitle');\n    const popupMessageEl = instance._getDomElement('popupMessage');\n    const popupCheckIcon = instance._getDomElement('popupCheck');\n    const popupCrossIcon = instance._getDomElement('popupCross');\n    \n    // Ölçü classı əlavə et\n    if (instance.size) {\n        monitorEl.classList.add('size-' + instance.size);\n    }\n    \n    _beforePrint = () => { printing = true; };\n    _afterPrint = () => {\n        printing = false;\n        quietUntil = Date.now() + PRINT_QUIET_MS;\n        // still down once the quiet time is over: say so, as for any other loss\n        if (_quietCheck) clearTimeout(_quietCheck);\n        _quietCheck = setTimeout(() => { if (!isConnected && !inDesigner()) showPopup('disconnected'); }, PRINT_QUIET_MS + 500);\n    };\n    window.addEventListener('beforeprint', _beforePrint);\n    window.addEventListener('afterprint', _afterPrint);\n\n    // IOB connection hazır olana qədər gözlə\n    const waitForConnection = setInterval(() => {\n        if (window.IOB && window.IOB.connection) {\n            clearInterval(waitForConnection);\n            setupMonitoring();\n        }\n    }, 100);\n    \n    function setupMonitoring() {\n        const connection = window.IOB.connection;\n        \n        console.log('[ConnectionMonitor] 🚀 Monitoring başladı');\n        console.log('[ConnectionMonitor] Connection obyekti:', connection);\n        console.log('[ConnectionMonitor] İlkin status:', connection.connected);\n        \n        // İlk status yoxlaması\n        checkConnection();\n        \n        // Dövri yoxlama\n        const interval = instance.checkInterval || 5000;\n        checkInterval = setInterval(() => {\n            checkConnection();\n        }, interval);\n        \n        // Socket event-lərinə abunə ol\n        if (connection._socket) {\n            const socket = connection._socket;\n            \n            onConnectHandler = function() {\n                console.log('[ConnectionMonitor] ✅ Socket CONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onReconnectHandler = function() {\n                console.log('[ConnectionMonitor] 🔄 Socket RECONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onDisconnectHandler = function(reason) {\n                console.log('[ConnectionMonitor] ❌ Socket DISCONNECT event:', reason);\n                handleConnectionFailure();\n            };\n            \n            onErrorHandler = function(error) {\n                console.error('[ConnectionMonitor] ⚠️ Socket ERROR event:', error);\n                handleConnectionFailure();\n            };\n            \n            socket.on('connect', onConnectHandler);\n            socket.on('reconnect', onReconnectHandler);\n            socket.on('disconnect', onDisconnectHandler);\n            socket.on('connect_error', onErrorHandler);\n            socket.on('error', onErrorHandler);\n        }\n    }\n    \n    function checkConnection() {\n        if (!window.IOB || !window.IOB.connection) {\n            handleConnectionFailure();\n            return;\n        }\n        \n        const connection = window.IOB.connection;\n        \n        // Connection obyektinin connected property-sini yoxla\n        if (connection.connected === true) {\n            handleConnectionSuccess();\n        } \n        // Socket-in connected statusunu yoxla\n        else if (connection._socket && connection._socket.connected === true) {\n            handleConnectionSuccess();\n        }\n        // Navigator.onLine yoxla (fallback)\n        else if (navigator.onLine === false) {\n            handleConnectionFailure();\n        }\n        else {\n            // Əlaqə statusu qeyri-müəyyəndirsə, yoxlanılır statusu göstər\n            updateStatus('checking');\n        }\n    }\n    \n    function handleConnectionSuccess() {\n        const wasDisconnected = !isConnected;\n        \n        if (wasDisconnected) {\n            console.log('[ConnectionMonitor] 💚 Server əlaqəsi BƏRPA OLUNDU');\n            isConnected = true;\n            \n            // \"Restored\" only after a real loss the operator saw — not on the page's first\n            // connect, not in the designer, not after printing.\n            const showRestored = everConnected && !quiet();\n            everConnected = true;\n            if (showRestored) {\n                showPopup('connected');\n                if (popupTimeout) clearTimeout(popupTimeout);\n                popupTimeout = setTimeout(() => {\n                    hidePopup();\n                }, 3000);\n            } else {\n                hidePopup();\n            }\n        }\n        \n        updateStatus('connected');\n    }\n    \n    function handleConnectionFailure() {\n        if (isConnected) {\n            console.error('[ConnectionMonitor] 💔 Server əlaqəsi KƏSİLDİ');\n            isConnected = false;\n            \n            // Əlaqə kəsildi popup-u göstər (daimi) — not in the designer or while printing\n            if (!quiet()) showPopup('disconnected');\n        }\n        \n        updateStatus('disconnected');\n    }\n    \n    function updateStatus(status) {\n        currentStatus = status;\n        monitorEl.classList.remove('connected', 'disconnected', 'checking');\n        monitorEl.classList.add(status);\n        \n        checkIcon.style.display = 'none';\n        crossIcon.style.display = 'none';\n        circleIcon.style.display = 'block';\n        \n        if (status === 'connected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.connectedtext', statusTextEl);\n            checkIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'disconnected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.disconnectedtext', statusTextEl);\n            crossIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'checking') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.checkingtext', statusTextEl);\n        }\n        \n        if (instance.showText === false) {\n            statusTextEl.style.display = 'none';\n        } else {\n            statusTextEl.style.display = 'inline';\n        }\n    }\n    \n    function showPopup(status) {\n        popupEl.style.display = 'flex';\n        popupEl.classList.remove('connected', 'disconnected', 'checking');\n        popupEl.classList.add(status);\n        \n        // İkonları yenilə\n        popupCheckIcon.style.display = 'none';\n        popupCrossIcon.style.display = 'none';\n        \n        if (status === 'connected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.connectedtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessageconnected', popupMessageEl);\n            popupCheckIcon.style.display = 'block';\n        } else if (status === 'disconnected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.disconnectedtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessagedisconnected', popupMessageEl);\n            popupCrossIcon.style.display = 'block';\n        } else if (status === 'checking') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.checkingtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessagechecking', popupMessageEl);\n        }\n    }\n    \n    function hidePopup() {\n        popupEl.style.display = 'none';\n        if (popupTimeout) {\n            clearTimeout(popupTimeout);\n            popupTimeout = null;\n        }\n    }\n\n    _langChangedHandler = () => updateStatus(currentStatus);\n    window.addEventListener('languageChanged', _langChangedHandler);\n}\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n    if (checkInterval) {\n        clearInterval(checkInterval);\n        checkInterval = null;\n    }\n    \n    if (_langChangedHandler) {\n        window.removeEventListener('languageChanged', _langChangedHandler);\n        _langChangedHandler = null;\n    }\n\n    if (popupTimeout) {\n        clearTimeout(popupTimeout);\n        popupTimeout = null;\n    }\n    \n    if (_beforePrint) window.removeEventListener('beforeprint', _beforePrint);\n    if (_afterPrint) window.removeEventListener('afterprint', _afterPrint);\n    _beforePrint = _afterPrint = null;\n    if (_quietCheck) { clearTimeout(_quietCheck); _quietCheck = null; }\n\n    // Event listener-ləri təmizlə\n    if (window.IOB && window.IOB.connection && window.IOB.connection._socket) {\n        const socket = window.IOB.connection._socket;\n        \n        if (onConnectHandler) socket.off('connect', onConnectHandler);\n        if (onReconnectHandler) socket.off('reconnect', onReconnectHandler);\n        if (onDisconnectHandler) socket.off('disconnect', onDisconnectHandler);\n        if (onErrorHandler) {\n            socket.off('connect_error', onErrorHandler);\n            socket.off('error', onErrorHandler);\n        }\n    }\n}", "properties": {"checkInterval": {"type": "number", "default": "5000"}, "showText": {"type": "boolean", "default": "false"}, "size": {"type": "enum", "default": "medium", "values": ["small", "medium", "large"]}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}, "translations": {"az": {"WebuiConnectionMonitor": {"connectedtext": "Serverlə əlaqə var", "disconnectedtext": "Serverlə əlaqə yoxdur", "checkingtext": "Yoxlanılır...", "popupmessageconnected": "Əlaqə uğurla bərpa olundu", "popupmessagedisconnected": "Zəhmət olmasa əlaqənizi yoxlayın", "popupmessagechecking": "Server əlaqəsi yoxlanılır"}}, "ru": {"WebuiConnectionMonitor": {"connectedtext": "Соединение с сервером установлено", "disconnectedtext": "Соединение с сервером потеряно", "checkingtext": "Проверяется...", "popupmessageconnected": "Соединение успешно восстановлено", "popupmessagedisconnected": "Пожалуйста, проверьте подключение", "popupmessagechecking": "Проверка соединения с сервером"}}, "de": {"WebuiConnectionMonitor": {"connectedtext": "Verbindung zum Server hergestellt", "disconnectedtext": "Verbindung zum Server unterbrochen", "checkingtext": "Wird geprüft...", "popupmessageconnected": "Verbindung erfolgreich wiederhergestellt", "popupmessagedisconnected": "Bitte überprüfen Sie Ihre Verbindung", "popupmessagechecking": "Serververbindung wird geprüft"}}, "en": {"WebuiConnectionMonitor": {"connectedtext": "Connected to server", "disconnectedtext": "Disconnected from server", "checkingtext": "Checking...", "popupmessageconnected": "Connection successfully restored", "popupmessagedisconnected": "Please check your connection", "popupmessagechecking": "Checking server connection"}}, "tr": {"WebuiConnectionMonitor": {"connectedtext": "Sunucuya bağlantı kuruldu", "disconnectedtext": "Sunucu bağlantısı kesildi", "checkingtext": "Kontrol ediliyor...", "popupmessageconnected": "Bağlantı başarıyla yeniden kuruldu", "popupmessagedisconnected": "Lütfen bağlantınızı kontrol edin", "popupmessagechecking": "Sunucu bağlantısı kontrol ediliyor"}}}}

package/default-controls/controls/navigation/sidebar.control

@@ -1 +1 @@
-{"properties": {}, "settings": {"width": "220px", "height": "100%"}, "html": "<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"slotTop\" class=\"sb-slot\"></div><div id=\"sbItems\" class=\"sb-items\"></div><div id=\"slotBottom\" class=\"sb-slot\"></div></div>", "style": ":host{display:block;width:100%;height:100%;box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;background:var(--sb-bg,linear-gradient(180deg,#1e3c72 0%,#2a5298 100%));color:var(--sb-fg,rgba(255,255,255,.9));box-shadow:2px 0 18px rgba(0,0,0,.28);-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);box-sizing:border-box;}\n.sb-hdr{padding:18px 16px 14px;font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--sb-hdr-fg,#fff);border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;}\n.sb-items::-webkit-scrollbar{width:6px;}\n.sb-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}\n.sb-slot{display:block;}\n:host([data-theme=\"dark\"]){--sb-bg:linear-gradient(180deg,#0a0e27 0%,#1a1f3a 100%);--sb-fg:rgba(255,255,255,.88);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.04);--mi-hover:rgba(255,255,255,.1);--mi-active:linear-gradient(135deg,rgba(74,158,255,.35),rgba(74,158,255,.14));--mi-active-fg:#fff;--mi-active-icon:#4a9eff;}\n:host([data-theme=\"light\"]){--sb-bg:linear-gradient(180deg,#f5f7fa 0%,#e4e8f0 100%);--sb-fg:#37474f;--sb-hdr-fg:#1a237e;--mi-bg:rgba(0,0,0,.04);--mi-hover:rgba(33,150,243,.1);--mi-active:linear-gradient(135deg,rgba(33,150,243,.22),rgba(33,150,243,.1));--mi-active-fg:#1565c0;--mi-active-icon:#1976d2;}\n:host([data-theme=\"purple\"]){--sb-bg:linear-gradient(180deg,#4a1d6e 0%,#7b2d8e 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(224,64,251,.35),rgba(224,64,251,.15));--mi-active-fg:#fff;--mi-active-icon:#8e24aa;}\n:host([data-theme=\"green\"]){--sb-bg:linear-gradient(180deg,#1b5e20 0%,#2e7d32 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(105,240,174,.3),rgba(105,240,174,.12));--mi-active-fg:#fff;--mi-active-icon:#2e7d32;}\n:host([data-theme=\"orange\"]){--sb-bg:linear-gradient(180deg,#bf360c 0%,#e64a19 100%);--sb-fg:rgba(255,255,255,.92);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.08);--mi-hover:rgba(255,255,255,.18);--mi-active:linear-gradient(135deg,rgba(255,171,64,.32),rgba(255,171,64,.14));--mi-active-fg:#fff;--mi-active-icon:#e64a19;}\n:host([data-theme=\"teal\"]){--sb-bg:linear-gradient(180deg,#004d40 0%,#00695c 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(29,233,182,.3),rgba(29,233,182,.12));--mi-active-fg:#fff;--mi-active-icon:#00897b;}\n:host([data-theme=\"auto\"]){--sb-bg:var(--ui-surface,#252b38);--sb-fg:var(--ui-text,#e2e6ec);--sb-hdr-fg:var(--ui-text,#fff);--mi-bg:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);--mi-fg:var(--ui-text,#e2e6ec);--mi-hover:color-mix(in srgb,var(--ui-text,#fff) 13%,transparent);--mi-active:color-mix(in srgb,var(--accent,#2680eb) 26%,transparent);--mi-active-border:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);--mi-active-fg:var(--ui-text,#fff);--mi-active-icon:var(--accent,#2680eb);}", "script": "export function init(instance){\n    instance._bindingsRefresh?.();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    instance.setAttribute('data-theme', cfg.theme || 'default');\n    function htmlFromDef(def){\n        let attrs='';\n        if(def.defaultAttributes) for(const a in def.defaultAttributes){ const v=def.defaultAttributes[a]; attrs+=' '+a+'=\"'+String(typeof v==='object'?JSON.stringify(v):v).replace(/\"/g,'&quot;')+'\"'; }\n        let style='';\n        if(def.defaultStyles) for(const k in def.defaultStyles) style+=k+':'+def.defaultStyles[k]+';';\n        if(def.defaultWidth) style+='width:'+def.defaultWidth+';';\n        if(def.defaultHeight) style+='height:'+def.defaultHeight+';';\n        return '<'+def.tag+attrs+(style?' style=\"'+style+'\"':'')+'>'+(def.defaultContent||'')+'</'+def.tag+'>';\n    }\n    function wireSlot(zone, cfgRoot, key){\n        if(!zone) return;\n        zone.innerHTML = (cfgRoot && cfgRoot.slots && cfgRoot.slots[key]) || '';\n        if(!isDesigner) return;\n        if(!zone.innerHTML.trim()){ zone.dataset.empty='1'; zone.style.minHeight='30px'; zone.style.outline='1px dashed rgba(255,255,255,.28)'; zone.style.borderRadius='8px'; zone.style.margin='4px 8px'; }\n        (function(){\n            let chip=null,target=null,hideT=null;\n            const saveFromDom=()=>{ if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=Array.from(zone.children).map(c=>c.outerHTML).join(''); if(window.IOB&&window.IOB.saveConfig) window.IOB.saveConfig(); };\n            const hideChip=()=>{ if(chip) chip.style.display='none'; target=null; };\n            const ensureChip=()=>{ if(chip) return chip; chip=document.createElement('div'); chip.className='nav-slot-delchip'; chip.textContent='✕'; chip.title='Delete'; chip.style.cssText='position:fixed;z-index:2147483647;width:18px;height:18px;line-height:18px;text-align:center;font:700 12px/18px sans-serif;background:#e74c3c;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.45);user-select:none;display:none;'; chip.addEventListener('mouseenter',()=>{ if(hideT){clearTimeout(hideT);hideT=null;} }); chip.addEventListener('mouseleave',hideChip); chip.addEventListener('click',e=>{ e.preventDefault(); e.stopPropagation(); if(target&&target.parentNode===zone){ target.remove(); saveFromDom(); } hideChip(); }); document.body.appendChild(chip); return chip; };\n            const showChip=(el)=>{ if(hideT){clearTimeout(hideT);hideT=null;} target=el; const c=ensureChip(); const r=el.getBoundingClientRect(); c.style.left=(r.right-9)+'px'; c.style.top=(r.top-9)+'px'; c.style.display='block'; };\n            zone.addEventListener('mouseover', e=>{ let el=e.target; while(el && el!==zone && el.parentNode!==zone) el=el.parentNode; if(el && el.parentNode===zone && el.nodeType===1) showChip(el); });\n            zone.addEventListener('mouseleave', ()=>{ hideT=setTimeout(()=>{ if(chip && chip.style.display!=='none' && !chip.matches(':hover')) hideChip(); }, 160); });\n        })();\n        zone.addEventListener('dragover', e=>{ if(e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf('text/json/elementdefintion')>=0){ e.preventDefault(); zone.style.background='rgba(255,255,255,.18)'; } });\n        zone.addEventListener('dragleave', ()=>{ zone.style.background=''; });\n        zone.addEventListener('drop', e=>{ e.preventDefault(); e.stopPropagation(); zone.style.background='';\n            try{ const td=e.dataTransfer.getData('text/json/elementdefintion'); if(!td) return; const def=JSON.parse(td); const html=htmlFromDef(def);\n                if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=(cfgRoot.slots[key]||'')+html;\n                if(window.IOB && window.IOB.saveConfig) window.IOB.saveConfig();\n            }catch(err){ console.warn('[nav] slot drop failed', err); }\n        });\n    }\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    if(typeof isDesigner!=='undefined' && isDesigner){ try{ document.querySelectorAll('.nav-slot-delchip').forEach(n=>n.remove()); }catch(e){} }\n    const hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if(cfg.bgColor) instance.style.setProperty('--sb-bg', cfg.bgColor);\n    if(cfg.textColor){ instance.style.setProperty('--sb-fg', cfg.textColor); instance.style.setProperty('--mi-fg', cfg.textColor); }\n    if(cfg.menuHeaderTextColor) instance.style.setProperty('--sb-hdr-fg', cfg.menuHeaderTextColor);\n    if(cfg.bgColorSelected){ instance.style.setProperty('--mi-active', cfg.bgColorSelected); instance.style.setProperty('--mi-active-icon', cfg.bgColorSelected); }\n    if(cfg.textColorSelected) instance.style.setProperty('--mi-active-fg', cfg.textColorSelected);\n    if(hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; }\n    let state='expanded'; const ICONS_W=64; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        const names=await IOB.getAllNames('screen').catch(()=>[]);\n        const list=[];\n        for(const n of names){ const o=await IOB.getWebuiObject('screen',n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name)); items.appendChild(mi); }\n        }\n        if(!isDesigner){ if(hasItems && !cfg.hideMenu) applyRuntimeLayout(); else { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; } }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.position='fixed'; instance.style.left='0'; instance.style.bottom='0'; instance.style.top=top+'px';\n        instance.style.zIndex='99999'; instance.style.overflow='hidden'; instance.style.transition='width .2s ease,transform .2s ease';\n        if(!burger){ burger=document.createElement('div'); burger.id='__nav-burger'; burger.textContent='☰'; const inBar=top>0; burger.style.cssText='position:fixed;top:'+(inBar?0:8)+'px;left:'+(inBar?0:8)+'px;z-index:100002;width:'+(inBar?top:42)+'px;height:'+(inBar?top:42)+'px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;'+(inBar?'':'border-radius:8px;')+'background:'+(cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)'))+';color:'+(cfg.showButtonColor||'#fff')+';transition:background .15s;'; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width='calc(100% - '+left+')'; v.style.top=top+'px'; v.style.height='calc(100% - '+top+'px)'; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n    wireSlot(instance._getDomElement('slotTop'), cfg, 'top');\n    wireSlot(instance._getDomElement('slotBottom'), cfg, 'bottom');\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}
+{"properties":{},"settings":{"width":"220px","height":"100%"},"html":"<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"slotTop\" class=\"sb-slot\"></div><div id=\"sbItems\" class=\"sb-items\"></div><div id=\"slotBottom\" class=\"sb-slot\"></div></div>","style":":host{display:block;width:100%;height:100%;box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;background:var(--sb-bg,linear-gradient(180deg,#1e3c72 0%,#2a5298 100%));color:var(--sb-fg,rgba(255,255,255,.9));box-shadow:2px 0 18px rgba(0,0,0,.28);-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);box-sizing:border-box;}\n.sb-hdr{padding:18px 16px 14px;font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--sb-hdr-fg,#fff);border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;}\n.sb-items::-webkit-scrollbar{width:6px;}\n.sb-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}\n.sb-slot{display:block;}\n:host([data-theme=\"dark\"]){--sb-bg:linear-gradient(180deg,#0a0e27 0%,#1a1f3a 100%);--sb-fg:rgba(255,255,255,.88);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.04);--mi-hover:rgba(255,255,255,.1);--mi-active:linear-gradient(135deg,rgba(74,158,255,.35),rgba(74,158,255,.14));--mi-active-fg:#fff;--mi-active-icon:#4a9eff;}\n:host([data-theme=\"light\"]){--sb-bg:linear-gradient(180deg,#f5f7fa 0%,#e4e8f0 100%);--sb-fg:#37474f;--sb-hdr-fg:#1a237e;--mi-bg:rgba(0,0,0,.04);--mi-hover:rgba(33,150,243,.1);--mi-active:linear-gradient(135deg,rgba(33,150,243,.22),rgba(33,150,243,.1));--mi-active-fg:#1565c0;--mi-active-icon:#1976d2;}\n:host([data-theme=\"purple\"]){--sb-bg:linear-gradient(180deg,#4a1d6e 0%,#7b2d8e 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(224,64,251,.35),rgba(224,64,251,.15));--mi-active-fg:#fff;--mi-active-icon:#8e24aa;}\n:host([data-theme=\"green\"]){--sb-bg:linear-gradient(180deg,#1b5e20 0%,#2e7d32 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(105,240,174,.3),rgba(105,240,174,.12));--mi-active-fg:#fff;--mi-active-icon:#2e7d32;}\n:host([data-theme=\"orange\"]){--sb-bg:linear-gradient(180deg,#bf360c 0%,#e64a19 100%);--sb-fg:rgba(255,255,255,.92);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.08);--mi-hover:rgba(255,255,255,.18);--mi-active:linear-gradient(135deg,rgba(255,171,64,.32),rgba(255,171,64,.14));--mi-active-fg:#fff;--mi-active-icon:#e64a19;}\n:host([data-theme=\"teal\"]){--sb-bg:linear-gradient(180deg,#004d40 0%,#00695c 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(29,233,182,.3),rgba(29,233,182,.12));--mi-active-fg:#fff;--mi-active-icon:#00897b;}\n:host([data-theme=\"auto\"]){--sb-bg:var(--ui-surface,#252b38);--sb-fg:var(--ui-text,#e2e6ec);--sb-hdr-fg:var(--ui-text,#fff);--mi-bg:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);--mi-fg:var(--ui-text,#e2e6ec);--mi-hover:color-mix(in srgb,var(--ui-text,#fff) 13%,transparent);--mi-active:color-mix(in srgb,var(--accent,#2680eb) 26%,transparent);--mi-active-border:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);--mi-active-fg:var(--ui-text,#fff);--mi-active-icon:var(--accent,#2680eb);}","script":"export function init(instance){\n    instance._bindingsRefresh?.();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    instance.setAttribute('data-theme', cfg.theme || 'default');\n    function htmlFromDef(def){\n        let attrs='';\n        if(def.defaultAttributes) for(const a in def.defaultAttributes){ const v=def.defaultAttributes[a]; attrs+=' '+a+'=\"'+String(typeof v==='object'?JSON.stringify(v):v).replace(/\"/g,'&quot;')+'\"'; }\n        let style='';\n        if(def.defaultStyles) for(const k in def.defaultStyles) style+=k+':'+def.defaultStyles[k]+';';\n        if(def.defaultWidth) style+='width:'+def.defaultWidth+';';\n        if(def.defaultHeight) style+='height:'+def.defaultHeight+';';\n        return '<'+def.tag+attrs+(style?' style=\"'+style+'\"':'')+'>'+(def.defaultContent||'')+'</'+def.tag+'>';\n    }\n    function wireSlot(zone, cfgRoot, key){\n        if(!zone) return;\n        zone.innerHTML = (cfgRoot && cfgRoot.slots && cfgRoot.slots[key]) || '';\n        if(!isDesigner) return;\n        if(!zone.innerHTML.trim()){ zone.dataset.empty='1'; zone.style.minHeight='30px'; zone.style.outline='1px dashed rgba(255,255,255,.28)'; zone.style.borderRadius='8px'; zone.style.margin='4px 8px'; }\n        (function(){\n            let chip=null,target=null,hideT=null;\n            const saveFromDom=()=>{ if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=Array.from(zone.children).map(c=>c.outerHTML).join(''); if(window.IOB&&window.IOB.saveConfig) window.IOB.saveConfig(); };\n            const hideChip=()=>{ if(chip) chip.style.display='none'; target=null; };\n            const ensureChip=()=>{ if(chip) return chip; chip=document.createElement('div'); chip.className='nav-slot-delchip'; chip.textContent='✕'; chip.title='Delete'; chip.style.cssText='position:fixed;z-index:2147483647;width:18px;height:18px;line-height:18px;text-align:center;font:700 12px/18px sans-serif;background:#e74c3c;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.45);user-select:none;display:none;'; chip.addEventListener('mouseenter',()=>{ if(hideT){clearTimeout(hideT);hideT=null;} }); chip.addEventListener('mouseleave',hideChip); chip.addEventListener('click',e=>{ e.preventDefault(); e.stopPropagation(); if(target&&target.parentNode===zone){ target.remove(); saveFromDom(); } hideChip(); }); document.body.appendChild(chip); return chip; };\n            const showChip=(el)=>{ if(hideT){clearTimeout(hideT);hideT=null;} target=el; const c=ensureChip(); const r=el.getBoundingClientRect(); c.style.left=(r.right-9)+'px'; c.style.top=(r.top-9)+'px'; c.style.display='block'; };\n            zone.addEventListener('mouseover', e=>{ let el=e.target; while(el && el!==zone && el.parentNode!==zone) el=el.parentNode; if(el && el.parentNode===zone && el.nodeType===1) showChip(el); });\n            zone.addEventListener('mouseleave', ()=>{ hideT=setTimeout(()=>{ if(chip && chip.style.display!=='none' && !chip.matches(':hover')) hideChip(); }, 160); });\n        })();\n        zone.addEventListener('dragover', e=>{ if(e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf('text/json/elementdefintion')>=0){ e.preventDefault(); zone.style.background='rgba(255,255,255,.18)'; } });\n        zone.addEventListener('dragleave', ()=>{ zone.style.background=''; });\n        zone.addEventListener('drop', e=>{ e.preventDefault(); e.stopPropagation(); zone.style.background='';\n            try{ const td=e.dataTransfer.getData('text/json/elementdefintion'); if(!td) return; const def=JSON.parse(td); const html=htmlFromDef(def);\n                if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=(cfgRoot.slots[key]||'')+html;\n                if(window.IOB && window.IOB.saveConfig) window.IOB.saveConfig();\n            }catch(err){ console.warn('[nav] slot drop failed', err); }\n        });\n    }\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    if(typeof isDesigner!=='undefined' && isDesigner){ try{ document.querySelectorAll('.nav-slot-delchip').forEach(n=>n.remove()); }catch(e){} }\n    const hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if(cfg.bgColor) instance.style.setProperty('--sb-bg', cfg.bgColor);\n    if(cfg.textColor){ instance.style.setProperty('--sb-fg', cfg.textColor); instance.style.setProperty('--mi-fg', cfg.textColor); }\n    if(cfg.menuHeaderTextColor) instance.style.setProperty('--sb-hdr-fg', cfg.menuHeaderTextColor);\n    if(cfg.bgColorSelected){ instance.style.setProperty('--mi-active', cfg.bgColorSelected); instance.style.setProperty('--mi-active-icon', cfg.bgColorSelected); }\n    if(cfg.textColorSelected) instance.style.setProperty('--mi-active-fg', cfg.textColorSelected);\n    if(hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; }\n    let state='expanded'; const ICONS_W=64; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name,kind)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(kind==='report'?{name:name,type:'report'}:name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        // Reports carry every screen setting, navigation among them, so they belong in the\n        // menu exactly as screens do — the entry remembers which kind it is so the runtime opens\n        // a .report in the report viewer rather than looking for a screen of that name.\n        const kinds=[['screen',await IOB.getAllNames('screen').catch(()=>[])],['report',await IOB.getAllNames('report').catch(()=>[])]];\n        const list=[];\n        for(const [kind,names] of kinds){ for(const n of names){ const o=await IOB.getWebuiObject(kind,n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,kind:kind,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); } }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name,e.kind)); items.appendChild(mi); }\n        }\n        if(!isDesigner){ if(hasItems && !cfg.hideMenu) applyRuntimeLayout(); else { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; } }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.position='fixed'; instance.style.left='0'; instance.style.bottom='0'; instance.style.top=top+'px';\n        instance.style.zIndex='99999'; instance.style.overflow='hidden'; instance.style.transition='width .2s ease,transform .2s ease';\n        if(!burger){ burger=document.createElement('div'); burger.id='__nav-burger'; burger.textContent='☰'; const inBar=top>0; burger.style.cssText='position:fixed;top:'+(inBar?0:8)+'px;left:'+(inBar?0:8)+'px;z-index:100002;width:'+(inBar?top:42)+'px;height:'+(inBar?top:42)+'px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;'+(inBar?'':'border-radius:8px;')+'background:'+(cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)'))+';color:'+(cfg.showButtonColor||'#fff')+';transition:background .15s;'; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width='calc(100% - '+left+')'; v.style.top=top+'px'; v.style.height='calc(100% - '+top+'px)'; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n    wireSlot(instance._getDomElement('slotTop'), cfg, 'top');\n    wireSlot(instance._getDomElement('slotBottom'), cfg, 'bottom');\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}