iobroker.mywebui 1.173.1 → 1.179.0

package/README.md

@@ -302,6 +302,30 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.178.0 (2026-10-06)
+* (screens) startup screen: right-click a screen → Set as startup screen (everyone) or for a user group; Settings → Startup screen (default + ordered group rules); rename/delete keep the rules in step; no startup screen and no "start" → a message instead of an error, and a link to a missing screen says so
+
+### 1.177.1 (2026-10-06)
+* (navigation) controls in the app bar (user badge, logout, theme toggle/selector …) take the bar's colours instead of the page theme's, so they stay readable on a dark bar in light themes; app bar theme "auto" still follows the page
+
+### 1.177.0 (2026-10-06)
+* (navigation) a sidebar runs the full height with the app bar beside it; the ☰ goes with the menu (its top corner, in the menu's colours) and cycles full → icons → hidden again; hidden, it docks in the app bar's corner; top and bottom bars keep it in their own place
+
+### 1.176.0 (2026-10-06)
+* (gokturk413) feat(navigation): the sidebar has its own toggle in its header (≡‹ folds to icons, ≡› opens), as in most UIs; the app bar's ☰ only brings back a hidden menu; on a phone the toggle hides the menu
+
+### 1.175.2 (2026-10-06)
+* (gokturk413) feat(navigation): app bar on a phone — the centre and right slots open from a ⋮ button as a panel; the caption shortens
+
+### 1.175.1 (2026-10-06)
+* (gokturk413) feat(controls): dashboard panel-card is a container (controls inside flow and wrap), setpoint-slider keeps room for its value bubble; side menu starts closed on phones; docs: building a dashboard that works on a phone
+
+### 1.175.0 (2026-10-06)
+* (gokturk413) fix: a session that ran out no longer reloads the page forever ("?login&href=" loop): the session is renewed with the refresh token, else web.0's login page brings the user back to the same screen; Global → Designer holds the built-in element sets (mywebui, layout, native), Controls → Designer only the project's npm packages; screen viewer with objectType report lists the reports at once; report Generate → Signal works with local_ values and report properties (watched by the page that shows the report)
+
+### 1.174.0 (2026-10-02)
+* (gokturk413) feat(controls): dashboard controls in global/controls/dashboard — panel-card, kpi-tile, countdown-tile, conveyor, conveyor-box, command-group, setpoint-slider (with range), logic-gate, status-chip, boiler, dial-gauge, time-spinner, notification-bell; demo screen dashboard/demo; Animations window: Start offset (0–1) so several elements on one path run evenly spaced
+
 ### 1.173.1 (2026-10-02)
 * (gokturk413) fix(reports): a report asked through the gateway is rendered for the gateway's user; every browser-facing relay (rest-api, webapi …) needs a proven user
 

package/admin/i18n.json

@@ -182,5 +182,47 @@
     "tr": "1. Adaptörü başlatın: 14 günlük deneme otomatik başlar\n2. Yukarıdaki Hardware ID satırının tamamını kopyalayın\n3. Lisans anahtarı almak için gokturk413'e gönderin\n4. Anahtarı buraya girip kaydedin (adaptör yeniden başlar)\n\n💡 Deneme süresi anahtarsız biterse runtime durur. Deneme sırasında yapılan proje, anahtar girildikten sonra çalışmaya devam eder.\n💡 Yeni bir bilgisayar için onun Hardware ID'sini gönderip ayrı bir anahtar alın.",
     "ru": "1. Запустите адаптер: 14-дневный пробный период начнётся автоматически\n2. Скопируйте всю строку Hardware ID выше\n3. Отправьте её gokturk413, чтобы получить лицензионный ключ\n4. Введите ключ здесь и сохраните (адаптер перезапустится)\n\n💡 Если пробный период закончится без ключа, runtime останавливается. Проект, созданный в пробный период, продолжит работать после ввода ключа.\n💡 Для нового компьютера отправьте его Hardware ID и получите для него ключ.",
     "de": "1. Adapter starten: eine 14-tägige Testphase beginnt automatisch\n2. Die ganze Hardware-ID-Zeile oben kopieren\n3. An gokturk413 senden, um einen Lizenzschlüssel zu erhalten\n4. Den Schlüssel hier eingeben und speichern (der Adapter startet neu)\n\n💡 Endet die Testphase ohne Schlüssel, stoppt die Runtime. Ein in der Testphase erstelltes Projekt läuft nach Eingabe des Schlüssels weiter.\n💡 Für einen neuen Computer dessen Hardware-ID senden und einen eigenen Schlüssel erhalten."
+  },
+  "Offline activation": {
+    "en": "Offline activation",
+    "az": "Oflayn aktivləşdirmə",
+    "tr": "Çevrimdışı etkinleştirme",
+    "ru": "Офлайн-активация",
+    "de": "Offline-Aktivierung"
+  },
+  "No internet on site? Create an activation request, send it to gokturk413 (email, USB), and paste the key or the whole response file you get back into the License Key field above.": {
+    "en": "No internet on site? Create an activation request, send it to gokturk413 (email, USB), and paste the key or the whole response file you get back into the License Key field above.",
+    "az": "Obyektdə internet yoxdur? Aktivləşdirmə sorğusu yaradın, gokturk413-ə göndərin (e-poçt, USB) və geri gələn açarı və ya cavab faylının hamısını yuxarıdakı License Key sahəsinə yapışdırın.",
+    "tr": "Sahada internet yok mu? Bir etkinleştirme isteği oluşturun, gokturk413'e gönderin (e-posta, USB) ve gelen anahtarı veya yanıt dosyasının tamamını yukarıdaki License Key alanına yapıştırın.",
+    "ru": "Нет интернета на объекте? Создайте запрос активации, отправьте его gokturk413 (почта, USB) и вставьте полученный ключ или весь файл ответа в поле License Key выше.",
+    "de": "Kein Internet vor Ort? Aktivierungsanfrage erstellen, an gokturk413 senden (E-Mail, USB) und den erhaltenen Schlüssel oder die ganze Antwortdatei oben in das Feld License Key einfügen."
+  },
+  "Create activation request": {
+    "en": "Create activation request",
+    "az": "Aktivləşdirmə sorğusu yarat",
+    "tr": "Etkinleştirme isteği oluştur",
+    "ru": "Создать запрос активации",
+    "de": "Aktivierungsanfrage erstellen"
+  },
+  "Activation request": {
+    "en": "Activation request",
+    "az": "Aktivləşdirmə sorğusu",
+    "tr": "Etkinleştirme isteği",
+    "ru": "Запрос активации",
+    "de": "Aktivierungsanfrage"
+  },
+  "Copy this line (copy button) and send it. It holds the Hardware IDs of this computer, the environment (physical, VM or container) and the host name; it contains no secret.": {
+    "en": "Copy this line (copy button) and send it. It holds the Hardware IDs of this computer, the environment (physical, VM or container) and the host name; it contains no secret.",
+    "az": "Bu sətri kopyalayın (kopyalama düyməsi) və göndərin. İçində bu kompüterin Hardware ID-ləri, mühit (fiziki, VM və ya konteyner) və host adı var; gizli məlumat yoxdur.",
+    "tr": "Bu satırı kopyalayın (kopyala düğmesi) ve gönderin. Bu bilgisayarın Hardware ID'lerini, ortamı (fiziksel, VM veya konteyner) ve ana bilgisayar adını içerir; gizli bilgi içermez.",
+    "ru": "Скопируйте эту строку (кнопка копирования) и отправьте. В ней Hardware ID этого компьютера, среда (физическая, ВМ или контейнер) и имя хоста; секретов нет.",
+    "de": "Diese Zeile kopieren (Kopier-Schaltfläche) und senden. Sie enthält die Hardware-IDs dieses Computers, die Umgebung (physisch, VM oder Container) und den Hostnamen; keine Geheimnisse."
+  },
+  "Paste the licence key, or the whole activation response file. Contact gokturk413 for a key.": {
+    "en": "Paste the licence key, or the whole activation response file. Contact gokturk413 for a key.",
+    "az": "Lisenziya açarını və ya aktivləşdirmə cavab faylının hamısını yapışdırın. Açar üçün gokturk413 ilə əlaqə saxlayın.",
+    "tr": "Lisans anahtarını veya etkinleştirme yanıt dosyasının tamamını yapıştırın. Anahtar için gokturk413 ile iletişime geçin.",
+    "ru": "Вставьте лицензионный ключ или весь файл ответа активации. За ключом обращайтесь к gokturk413.",
+    "de": "Lizenzschlüssel oder die ganze Aktivierungs-Antwortdatei einfügen. Schlüssel bei gokturk413 anfragen."
   }
 }

package/admin/jsonConfig.json

@@ -26,7 +26,7 @@
           "sm": 12,
           "md": 8,
           "lg": 6,
-          "help": "Enter your license key here. Contact gokturk413 for a valid license key.",
+          "help": "Paste the licence key, or the whole activation response file. Contact gokturk413 for a key.",
           "visible": true,
           "repeat": false
         },
@@ -82,6 +82,40 @@
             "borderRadius": "4px"
           }
         },
+        "_activationHeader": {
+          "type": "header",
+          "text": "Offline activation",
+          "size": 4
+        },
+        "_activationInfo": {
+          "type": "staticText",
+          "text": "No internet on site? Create an activation request, send it to gokturk413 (email, USB), and paste the key or the whole response file you get back into the License Key field above.",
+          "style": {
+            "fontSize": 13,
+            "marginBottom": 8
+          }
+        },
+        "activationRequest": {
+          "type": "text",
+          "label": "Activation request",
+          "readOnly": true,
+          "copyToClipboard": true,
+          "sm": 12,
+          "md": 8,
+          "lg": 8,
+          "help": "Copy this line (copy button) and send it. It holds the Hardware IDs of this computer, the environment (physical, VM or container) and the host name; it contains no secret."
+        },
+        "_getActivationBtn": {
+          "type": "sendTo",
+          "label": "Create activation request",
+          "command": "getActivationRequest",
+          "jsonData": "{}",
+          "variant": "contained",
+          "icon": "send",
+          "useNative": true,
+          "sm": 12,
+          "md": 4
+        },
         "_separator": {
           "type": "divider"
         },

package/default-controls/controls/dashboard/boiler.control

@@ -0,0 +1,51 @@
+{
+  "properties": {
+    "level": {
+      "type": "number",
+      "default": 55
+    },
+    "pv": {
+      "type": "number",
+      "default": 74
+    },
+    "sp": {
+      "type": "number",
+      "default": 75
+    },
+    "heating": {
+      "type": "boolean",
+      "default": "true"
+    },
+    "min": {
+      "type": "number",
+      "default": 0
+    },
+    "max": {
+      "type": "number",
+      "default": 100
+    },
+    "unit": {
+      "type": "string",
+      "default": "°C"
+    },
+    "decimals": {
+      "type": "number",
+      "default": 0
+    },
+    "liquidColor": {
+      "type": "color",
+      "default": "#e8453c"
+    },
+    "showValues": {
+      "type": "boolean",
+      "default": "true"
+    }
+  },
+  "settings": {
+    "width": "330px",
+    "height": "260px"
+  },
+  "html": "<div id=\"b\" class=\"boil\"><svg class=\"vessel\" viewBox=\"0 0 170 250\" aria-hidden=\"true\"><defs><clipPath id=\"vclip\"><rect x=\"35\" y=\"40\" width=\"100\" height=\"160\" rx=\"22\"/></clipPath><linearGradient id=\"steel\" x1=\"0\" x2=\"1\"><stop offset=\"0\" stop-color=\"#5c6573\"/><stop offset=\".45\" stop-color=\"#b9c2ce\"/><stop offset=\"1\" stop-color=\"#4a525e\"/></linearGradient><linearGradient id=\"liq\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"><stop id=\"lq1\" offset=\"0\" stop-color=\"#ff6b5e\"/><stop id=\"lq2\" offset=\"1\" stop-color=\"#b3221b\"/></linearGradient></defs><rect x=\"70\" y=\"14\" width=\"30\" height=\"20\" rx=\"4\" style=\"fill:url(#steel)\"/><rect x=\"32\" y=\"32\" width=\"106\" height=\"176\" rx=\"26\" style=\"fill:url(#steel)\"/><g clip-path=\"url(#vclip)\"><rect x=\"35\" y=\"40\" width=\"100\" height=\"160\" style=\"fill:#1d2128\"/><g id=\"liquid\" transform=\"translate(0,120)\"><path class=\"wave\" d=\"M0 10 Q 25 0 50 10 T 100 10 T 150 10 T 200 10 V 220 H 0 Z\" style=\"fill:url(#liq)\"/></g><rect x=\"44\" y=\"40\" width=\"10\" height=\"160\" style=\"fill:rgba(255,255,255,.12)\"/></g><rect x=\"112\" y=\"60\" width=\"7\" height=\"120\" rx=\"3.5\" style=\"fill:#e8ecf1\"/><rect id=\"thermo\" x=\"113.5\" y=\"100\" width=\"4\" height=\"78\" rx=\"2\" style=\"fill:#ff4d4d\"/><circle cx=\"115.5\" cy=\"184\" r=\"7\" style=\"fill:#ff4d4d;stroke:#e8ecf1;stroke-width:2\"/><circle cx=\"118\" cy=\"56\" r=\"13\" style=\"fill:#e8ecf1;stroke:#7d8693;stroke-width:2\"/><line id=\"needle\" x1=\"118\" y1=\"56\" x2=\"125\" y2=\"50\" style=\"stroke:#222;stroke-width:2\"/><circle cx=\"85\" cy=\"176\" r=\"13\" style=\"fill:#e8ecf1;stroke:#7d8693;stroke-width:2\"/><line x1=\"85\" y1=\"176\" x2=\"80\" y2=\"168\" style=\"stroke:#222;stroke-width:2\"/><rect x=\"40\" y=\"206\" width=\"90\" height=\"34\" rx=\"4\" style=\"fill:#2b3038\"/><g id=\"flame\" class=\"flame\"><path d=\"M70 238 C 62 226 72 220 74 212 C 78 222 84 214 85 204 C 90 216 100 220 97 230 C 104 226 104 236 100 238 Z\" style=\"fill:#ff9a1f\"/><path d=\"M78 238 C 74 230 80 226 82 220 C 86 228 92 228 92 238 Z\" style=\"fill:#ffe066\"/></g></svg><div id=\"vals\" class=\"vals\"><span class=\"pv mono\"><span id=\"pv\"></span><small id=\"u1\"></small></span><span class=\"sp mono\"><span id=\"sp\"></span><small id=\"u2\"></small></span></div></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.boil{height:100%;display:flex;align-items:center;gap:12px}\n.vessel{height:100%;max-height:100%;aspect-ratio:170/250;overflow:visible;flex:none}\n.wave{animation:wave 3s ease-in-out infinite}@keyframes wave{50%{transform:translateX(-14px)}}\n.flame{transform-origin:85px 238px;animation:flick .25s ease-in-out infinite alternate}@keyframes flick{to{transform:scaleY(.82) scaleX(1.06)}}\n.vals{display:flex;flex-direction:column;gap:2px}\n.pv{font-size:36px;font-weight:600}.sp{font-size:26px;font-weight:600;color:var(--db-glow)}\n.vals small{font-size:.6em;margin-left:2px}\n.boil.novals .vals{display:none}\n",
+  "script": "export function levelY(level){ const l = Math.max(0, Math.min(100, Number(level) || 0)); return 40 + (1 - l / 100) * 150; }\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const yes = (v) => v === true || v === 'true' || v === 1;\n    const upd = () => {\n        const min = Number(instance.min) || 0, max = Number(instance.max) || 100, dec = Math.max(0, Number(instance.decimals) || 0);\n        $('liquid').setAttribute('transform', 'translate(0,' + levelY(instance.level).toFixed(1) + ')');\n        const pv = Number(instance.pv), f = Math.max(0, Math.min(1, ((isFinite(pv) ? pv : min) - min) / ((max - min) || 1)));\n        $('thermo').setAttribute('y', String(180 - f * 110)); $('thermo').setAttribute('height', String(Math.max(2, f * 110)));\n        const ang = (-140 + f * 280) * Math.PI / 180;\n        $('needle').setAttribute('x2', String(118 + 9 * Math.sin(ang))); $('needle').setAttribute('y2', String(56 - 9 * Math.cos(ang)));\n        $('flame').style.display = yes(instance.heating) ? '' : 'none';\n        const c = instance.liquidColor || '#e8453c';\n        $('lq1').setAttribute('stop-color', c); $('lq2').setAttribute('stop-color', c); $('lq2').setAttribute('stop-opacity', '.75');\n        $('pv').textContent = isFinite(pv) ? pv.toFixed(dec) : '—';\n        const sp = Number(instance.sp); $('sp').textContent = isFinite(sp) ? sp.toFixed(dec) : '—';\n        $('u1').textContent = $('u2').textContent = instance.unit || '';\n        $('b').classList.toggle('novals', instance.showValues === false || instance.showValues === 'false');\n    };\n    for(const p of ['level', 'pv', 'sp', 'heating', 'min', 'max', 'unit', 'decimals', 'liquid-color', 'show-values']) instance._assignEvent(p + '-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/command-group.control

@@ -0,0 +1,19 @@
+{
+  "properties": {
+    "signal": {
+      "type": "signal",
+      "default": ""
+    },
+    "buttons": {
+      "type": "string",
+      "default": "[{\"label\": \"ON\", \"value\": true, \"tone\": \"ok\"}, {\"label\": \"OFF\", \"value\": false, \"tone\": \"off\"}, {\"label\": \"RESET\", \"value\": true, \"tone\": \"warn\", \"momentary\": true, \"signal\": \"\"}]"
+    }
+  },
+  "settings": {
+    "width": "300px",
+    "height": "44px"
+  },
+  "html": "<div id=\"g\" class=\"cmdg\" role=\"group\"></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.cmdg{height:100%;display:inline-flex;border-radius:10px;overflow:hidden;border:1px solid var(--ui-border,#4a5262)}\nbutton{font:600 15px 'IBM Plex Sans','Segoe UI',sans-serif;letter-spacing:.04em;padding:0 22px;border:0;border-right:1px solid var(--ui-border,#4a5262);background:var(--ui-surface-2,#3a414d);color:var(--ui-dim,#9aa5b5);cursor:pointer}\nbutton:last-child{border-right:0}\nbutton.cur{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 100%,#fff 10%),color-mix(in srgb,var(--tone) 80%,#000));color:#fff}\nbutton.mom{color:var(--tone)}\nbutton.mom.flash,button.mom:active{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 100%,#fff 15%),color-mix(in srgb,var(--tone) 80%,#000));color:#1d1404}\nbutton:focus-visible{outline:2px solid var(--accent,#57b6ff);outline-offset:-3px}\n",
+  "script": "function dbSubscribe(instance, key, id, onVal){\n    dbUnsub(instance, key);\n    if(!id || !window.IOB) return;\n    instance.__dbSubs = instance.__dbSubs || {};\n    const cb = function(_i, s){ onVal(s ? s.val : null); };\n    instance.__dbSubs[key] = [id, cb];\n    try{ window.IOB.subscribeState(id, cb); }catch(e){}\n    try{ window.IOB.getState(id).then(function(s){ onVal(s ? s.val : null); }).catch(function(){}); }catch(e){}\n    // read quality knows this state (badge on the control when the value cannot be trusted)\n    try{ instance.__dbRq = instance.__dbRq || {}; instance.__dbRq[key] = window.IOB.watchReadQuality && window.IOB.watchReadQuality(instance, id, { prop: key, twoWay: true }); }catch(e){}\n}\nfunction dbUnsub(instance, key){\n    const p = instance.__dbSubs && instance.__dbSubs[key];\n    if(p){ try{ window.IOB.unsubscribeState(p[0], p[1]); }catch(e){} delete instance.__dbSubs[key]; }\n    const r = instance.__dbRq && instance.__dbRq[key];\n    if(typeof r === 'function'){ try{ r(); }catch(e){} }\n    if(instance.__dbRq) delete instance.__dbRq[key];\n}\nfunction dbUnsubAll(instance){ for(const k of Object.keys(instance.__dbSubs || {})) dbUnsub(instance, k); }\n// a write through IOB.setState: Confirm & Protect may ask first; cancelled = nothing written\nfunction dbWrite(instance, id, val, onCancel){\n    if(!id || !window.IOB) return Promise.resolve(false);\n    return Promise.resolve(window.IOB.setState(id, val, false, { feedback: instance })).then(function(){ return true; }, function(e){\n        if(e && e.cancelled){ if(onCancel) onCancel(); }\n        else console.warn('[dashboard] write failed', id, e);\n        return false;\n    });\n}\nfunction dbBool(v){ return v === true || v === 1 || v === 'true' || v === '1' || v === 'on'; }\nfunction dbNum(v, d){ const n = Number(v); return isFinite(n) ? n : d; }\nexport function parseButtons(text){\n    try{ const a = JSON.parse(text || '[]'); return Array.isArray(a) ? a.filter(b => b && b.label != null) : []; }catch(e){ return []; }\n}\nexport function sameValue(a, b){\n    if(a === b) return true;\n    if(a == null || b == null) return false;\n    if(typeof a === 'boolean' || typeof b === 'boolean') return dbBool(a) === dbBool(b);\n    return String(a) === String(b);\n}\nexport function init(instance){\n    const g = instance._getDomElement('g');\n    let current;\n    const paint = () => {\n        for(const b of g.children){ const d = b.__def; b.classList.toggle('cur', !d.momentary && sameValue(current, d.value)); b.setAttribute('aria-pressed', String(b.classList.contains('cur'))); }\n    };\n    const build = () => {\n        g.textContent = '';\n        for(const d of parseButtons(instance.buttons)){\n            const b = document.createElement('button');\n            b.type = 'button'; b.textContent = d.label; b.__def = d;\n            b.className = 't-' + (d.tone || 'accent') + (d.momentary ? ' mom' : '');\n            b.addEventListener('click', async () => {\n                const id = d.signal || instance.signal;\n                if(d.momentary){\n                    b.classList.add('flash'); setTimeout(() => b.classList.remove('flash'), 400);\n                    // a pulse: the value, then back (true → false, 1 → 0)\n                    if(await dbWrite(instance, id, d.value)) setTimeout(() => dbWrite(instance, id, typeof d.value === 'boolean' ? !d.value : 0), 500);\n                } else dbWrite(instance, id, d.value);\n            });\n            g.appendChild(b);\n        }\n        paint();\n    };\n    const sub = () => dbSubscribe(instance, 'signal', instance.signal, (v) => { current = v; paint(); });\n    instance._assignEvent('buttons-changed', build);\n    instance._assignEvent('signal-changed', sub);\n    build(); sub();\n}\nexport function disconnectedCallback(instance){ dbUnsubAll(instance); }\n"
+}

package/default-controls/controls/dashboard/conveyor-box.control

@@ -0,0 +1,19 @@
+{
+  "properties": {
+    "color": {
+      "type": "color",
+      "default": "#d9b37c"
+    },
+    "label": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "settings": {
+    "width": "58px",
+    "height": "40px"
+  },
+  "html": "<div id=\"b\" class=\"box\"><span id=\"lbl\"></span></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.box{height:100%;border-radius:5px;position:relative;display:grid;place-items:center;font:600 10px 'IBM Plex Mono',monospace;color:rgba(0,0,0,.55);\n  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 100%,#fff 12%),color-mix(in srgb,var(--c) 85%,#000));box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.25)}\n.box::after{content:\"\";position:absolute;left:46%;top:0;bottom:0;width:8%;background:rgba(0,0,0,.1)}\n",
+  "script": "export function init(instance){\n    const upd = () => { const b = instance._getDomElement('b'); b.style.setProperty('--c', instance.color || '#d9b37c'); instance._getDomElement('lbl').textContent = instance.label || ''; };\n    instance._assignEvent('color-changed', upd); instance._assignEvent('label-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/conveyor.control

@@ -0,0 +1,35 @@
+{
+  "properties": {
+    "running": {
+      "type": "boolean",
+      "default": "true"
+    },
+    "speed": {
+      "type": "number",
+      "default": 50
+    },
+    "beacon": {
+      "type": "boolean",
+      "default": "true"
+    },
+    "beaconColor": {
+      "type": "color",
+      "default": "#ffc93a"
+    },
+    "direction": {
+      "type": "enum",
+      "values": [
+        "right",
+        "left"
+      ],
+      "default": "right"
+    }
+  },
+  "settings": {
+    "width": "560px",
+    "height": "80px"
+  },
+  "html": "<div id=\"c\" class=\"conv\"><div class=\"motor\"></div><div class=\"belt\"><div id=\"surf\" class=\"surf\"></div></div><span class=\"roll\" style=\"left:34px\"></span><span class=\"roll\" style=\"left:24%\"></span><span class=\"roll\" style=\"left:44%\"></span><span class=\"roll\" style=\"left:64%\"></span><span class=\"roll\" style=\"left:84%\"></span><span id=\"beacon\" class=\"beacon\"></span></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.conv{position:relative;height:100%;min-height:60px}\n.motor{position:absolute;left:0;bottom:10%;width:30px;height:62%;border-radius:6px;background:linear-gradient(90deg,#3a404a,#5e6672,#3a404a)}\n.belt{position:absolute;left:18px;right:40px;bottom:12%;height:44%;border-radius:999px;background:linear-gradient(180deg,#4b5361,#2a2f38);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.35);overflow:hidden}\n.surf{position:absolute;inset:18% 18px;border-radius:10px;background:repeating-linear-gradient(90deg,#20252d 0 10px,#262c35 10px 20px);animation:belt var(--dur,1.6s) linear infinite;animation-play-state:var(--run,running)}\n.conv.left .surf{animation-direction:reverse}\n@keyframes belt{to{background-position:20px 0}}\n.roll{position:absolute;bottom:calc(12% + 7px);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c9d1dc,#6d7684 60%,#3d434d);border:1px solid #2a2f37}\n.beacon{position:absolute;right:16px;bottom:58%;width:18px;height:26px;border-radius:9px 9px 3px 3px;background:#7a5a10}\n.beacon.on{background:var(--bc);box-shadow:0 0 14px var(--bc),0 0 34px color-mix(in srgb,var(--bc) 50%,transparent);animation:blink 1s steps(2) infinite}\n@keyframes blink{50%{opacity:.45}}\n",
+  "script": "export function beltSeconds(speed){ const s = Math.max(1, Math.min(100, Number(speed) || 0)); return 1.6 * 50 / s; }\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const yes = (v) => v === true || v === 'true';\n    const upd = () => {\n        const c = $('c');\n        const run = yes(instance.running) && Number(instance.speed) > 0;\n        c.style.setProperty('--run', run ? 'running' : 'paused');\n        c.style.setProperty('--dur', beltSeconds(instance.speed).toFixed(2) + 's');\n        c.classList.toggle('left', instance.direction === 'left');\n        const b = $('beacon');\n        b.style.setProperty('--bc', instance.beaconColor || '#ffc93a');\n        b.classList.toggle('on', yes(instance.beacon));\n    };\n    for(const p of ['running', 'speed', 'beacon', 'beacon-color', 'direction']) instance._assignEvent(p + '-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/countdown-tile.control

@@ -0,0 +1,32 @@
+{
+  "properties": {
+    "label": {
+      "type": "string",
+      "default": "Remaining Time"
+    },
+    "seconds": {
+      "type": "number",
+      "default": 38
+    },
+    "endTime": {
+      "type": "number",
+      "default": 0
+    },
+    "format": {
+      "type": "enum",
+      "values": [
+        "auto",
+        "mm:ss",
+        "hh:mm:ss"
+      ],
+      "default": "auto"
+    }
+  },
+  "settings": {
+    "width": "200px",
+    "height": "72px"
+  },
+  "html": "<div class=\"kpi\"><span id=\"lbl\" class=\"lbl\"></span><span id=\"val\" class=\"val mono\"></span></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.kpi{height:100%;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 14px;border-radius:12px;background:var(--ui-surface-2,#3a414d);border:1px solid var(--ui-border,#4a5262)}\n.lbl{font-size:13px;color:var(--ui-dim,#9aa5b5)}.val{font-size:28px;font-weight:500}\n",
+  "script": "export function fmtDuration(sec, format){\n    sec = Math.max(0, Math.floor(Number(sec) || 0));\n    const h = Math.floor(sec / 3600), m = Math.floor(sec % 3600 / 60), s = sec % 60;\n    const p = (n) => String(n).padStart(2, '0');\n    if(format === 'hh:mm:ss' || (format !== 'mm:ss' && h > 0)) return p(h) + ':' + p(m) + ':' + p(s);\n    return p(h * 60 + m) + ':' + p(s);\n}\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const left = () => {\n        const end = Number(instance.endTime) || 0;\n        return end > 0 ? (end - Date.now()) / 1000 : Number(instance.seconds) || 0;\n    };\n    const upd = () => { $('lbl').textContent = instance.label || ''; $('val').textContent = fmtDuration(left(), instance.format); };\n    for(const p of ['label', 'seconds', 'end-time', 'format']) instance._assignEvent(p + '-changed', upd);\n    clearInterval(instance.__cdTimer);\n    // with an end time the tile counts down by itself\n    instance.__cdTimer = setInterval(() => { if(Number(instance.endTime) > 0) upd(); }, 1000);\n    upd();\n}\nexport function disconnectedCallback(instance){ clearInterval(instance.__cdTimer); }\n"
+}

package/default-controls/controls/dashboard/dial-gauge.control

@@ -0,0 +1,39 @@
+{
+  "properties": {
+    "value": {
+      "type": "number",
+      "default": 3.2
+    },
+    "min": {
+      "type": "number",
+      "default": 0
+    },
+    "max": {
+      "type": "number",
+      "default": 6
+    },
+    "unit": {
+      "type": "string",
+      "default": "bar"
+    },
+    "label": {
+      "type": "string",
+      "default": ""
+    },
+    "decimals": {
+      "type": "number",
+      "default": 1
+    },
+    "zones": {
+      "type": "string",
+      "default": "0-4:ok,4-5:warn,5-6:error"
+    }
+  },
+  "settings": {
+    "width": "120px",
+    "height": "120px"
+  },
+  "html": "<svg id=\"s\" class=\"dial\" viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"56\" class=\"face\"/><g id=\"zones\"></g><g id=\"ticks\"></g><line id=\"nd\" x1=\"60\" y1=\"60\" x2=\"60\" y2=\"20\" class=\"nd\"/><circle cx=\"60\" cy=\"60\" r=\"5\" class=\"hub\"/><text id=\"v\" x=\"60\" y=\"88\" class=\"vt\">0</text><text id=\"u\" x=\"60\" y=\"101\" class=\"ut\"></text><text id=\"l\" x=\"60\" y=\"74\" class=\"lt\"></text></svg>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.dial{width:100%;height:100%;display:block}\n.face{fill:var(--ui-surface-2,#3a414d);stroke:var(--ui-border,#4a5262);stroke-width:2}\n.tk{stroke:var(--ui-dim,#9aa5b5);stroke-width:1.5}\n.nd{stroke:var(--ui-error,#ff5a6a);stroke-width:2.5;stroke-linecap:round;transition:transform .4s;transform-origin:60px 60px}\n.hub{fill:var(--ui-text,#e6ebf2)}\n.vt{font:600 15px 'IBM Plex Mono',monospace;fill:var(--ui-text,#e6ebf2);text-anchor:middle}\n.ut{font:11px 'IBM Plex Sans',sans-serif;fill:var(--ui-dim,#9aa5b5);text-anchor:middle}\n.lt{font:9px 'IBM Plex Sans',sans-serif;fill:var(--ui-dim,#9aa5b5);text-anchor:middle;letter-spacing:.04em}\n.z{fill:none;stroke-width:6}\n.z.ok{stroke:var(--ui-ok,#3ccf7a)}.z.warn{stroke:var(--ui-warn,#f2a531)}.z.error{stroke:var(--ui-error,#ff5a6a)}.z.info{stroke:var(--ui-info,#57b6ff)}\n",
+  "script": "export function parseZones(text){\n    return String(text || '').split(',').map(s => s.trim()).filter(Boolean).map(s => {\n        const m = /^(-?[\\d.]+)\\s*-\\s*(-?[\\d.]+)\\s*:\\s*(\\w+)$/.exec(s);\n        return m ? { from: Number(m[1]), to: Number(m[2]), tone: m[3] } : null;\n    }).filter(Boolean);\n}\nconst A0 = -135, SPAN = 270;\nfunction pt(a, r){ const t = (a - 90) * Math.PI / 180; return [60 + r * Math.cos(t), 60 + r * Math.sin(t)]; }\nfunction arc(a1, a2, r){ const [x1, y1] = pt(a1, r), [x2, y2] = pt(a2, r); return 'M' + x1.toFixed(2) + ' ' + y1.toFixed(2) + ' A' + r + ' ' + r + ' 0 ' + (a2 - a1 > 180 ? 1 : 0) + ' 1 ' + x2.toFixed(2) + ' ' + y2.toFixed(2); }\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const NS = 'http://www.w3.org/2000/svg';\n    const upd = () => {\n        const min = Number(instance.min) || 0, max = Number(instance.max) || 100, span = (max - min) || 1;\n        const ang = (v) => A0 + Math.max(0, Math.min(1, (v - min) / span)) * SPAN;\n        const z = $('zones'); z.textContent = '';\n        for(const zn of parseZones(instance.zones)){ const p = document.createElementNS(NS, 'path'); p.setAttribute('d', arc(ang(zn.from), ang(zn.to), 48)); p.setAttribute('class', 'z ' + zn.tone); z.appendChild(p); }\n        const t = $('ticks'); t.textContent = '';\n        for(let i = 0; i <= 10; i++){ const a = A0 + i * SPAN / 10, [x1, y1] = pt(a, 41), [x2, y2] = pt(a, i % 5 ? 37 : 34); const l = document.createElementNS(NS, 'line'); l.setAttribute('x1', x1); l.setAttribute('y1', y1); l.setAttribute('x2', x2); l.setAttribute('y2', y2); l.setAttribute('class', 'tk'); t.appendChild(l); }\n        const v = Number(instance.value);\n        $('nd').style.transform = 'rotate(' + ang(isFinite(v) ? v : min) + 'deg)';\n        $('v').textContent = isFinite(v) ? v.toFixed(Math.max(0, Number(instance.decimals) || 0)) : '—';\n        $('u').textContent = instance.unit || ''; $('l').textContent = instance.label || '';\n    };\n    for(const p of ['value', 'min', 'max', 'unit', 'label', 'decimals', 'zones']) instance._assignEvent(p + '-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/kpi-tile.control

@@ -0,0 +1,52 @@
+{
+  "properties": {
+    "label": {
+      "type": "string",
+      "default": "Accumulated Items"
+    },
+    "value": {
+      "type": "string",
+      "default": "1264"
+    },
+    "unit": {
+      "type": "string",
+      "default": ""
+    },
+    "decimals": {
+      "type": "number",
+      "default": -1
+    },
+    "alarmCount": {
+      "type": "number",
+      "default": 0
+    },
+    "ringMax": {
+      "type": "number",
+      "default": 0
+    },
+    "tone": {
+      "type": "enum",
+      "values": [
+        "ok",
+        "warn",
+        "error",
+        "info",
+        "accent",
+        "glow",
+        "off"
+      ],
+      "default": "warn"
+    },
+    "frame": {
+      "type": "boolean",
+      "default": "true"
+    }
+  },
+  "settings": {
+    "width": "330px",
+    "height": "72px"
+  },
+  "html": "<div id=\"k\" class=\"kpi\"><svg id=\"ring\" class=\"ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><circle cx=\"20\" cy=\"20\" r=\"15\" class=\"rt\"/><circle id=\"rv\" cx=\"20\" cy=\"20\" r=\"15\" class=\"rv\" transform=\"rotate(-90 20 20)\"/></svg><span id=\"lbl\" class=\"lbl\"></span><span class=\"val mono\"><span id=\"val\"></span><small id=\"unit\"></small></span><span id=\"al\" class=\"al\">🔔<span id=\"aln\"></span></span></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.kpi{height:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ui-surface-2,#3a414d);border:1px solid var(--ui-border,#4a5262);min-width:0}\n.kpi.bare{background:none;border:0;padding:0}\n.ring{width:38px;height:38px;flex:none}.rt{fill:none;stroke:var(--ui-border,#4a5262);stroke-width:4}\n.rv{fill:none;stroke:var(--tone);stroke-width:4;stroke-linecap:round;stroke-dasharray:94.25;transition:stroke-dashoffset .4s}\n.lbl{font-size:13px;color:var(--ui-dim,#9aa5b5);line-height:1.3;white-space:pre-line}\n.val{margin-left:auto;font-size:30px;font-weight:500;white-space:nowrap}.val small{font-size:14px;color:var(--ui-dim,#9aa5b5);margin-left:4px}\n.al{display:flex;align-items:center;gap:3px;color:var(--ui-warn,#f2a531);font:600 13px 'IBM Plex Mono',monospace}\n",
+  "script": "export function fmtValue(v, decimals){\n    const n = Number(v);\n    if(v === null || v === undefined || v === '') return '—';\n    if(!isFinite(n) || typeof v === 'boolean') return String(v);\n    const d = Number(decimals);\n    return d >= 0 ? n.toFixed(d) : String(Math.round(n * 1000) / 1000);\n}\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const upd = () => {\n        $('k').className = 'kpi t-' + (instance.tone || 'warn') + ((instance.frame === false || instance.frame === 'false') ? ' bare' : '');\n        $('lbl').textContent = instance.label || '';\n        $('val').textContent = fmtValue(instance.value, instance.decimals);\n        $('unit').textContent = instance.unit || '';\n        const al = Number(instance.alarmCount) || 0;\n        $('al').style.display = al > 0 ? '' : 'none';\n        $('aln').textContent = String(al);\n        const max = Number(instance.ringMax) || 0;\n        $('ring').style.display = max > 0 ? '' : 'none';\n        if(max > 0){ const p = Math.max(0, Math.min(1, (Number(instance.value) || 0) % (max + 1e-9) / max)); $('rv').style.strokeDashoffset = String(94.25 * (1 - p)); }\n    };\n    for(const p of ['label', 'value', 'unit', 'decimals', 'alarm-count', 'ring-max', 'tone', 'frame']) instance._assignEvent(p + '-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/logic-gate.control

@@ -0,0 +1,40 @@
+{
+  "properties": {
+    "gate": {
+      "type": "enum",
+      "values": [
+        "AND",
+        "OR",
+        "XOR",
+        "NAND",
+        "NOR",
+        "NOT",
+        "ARROW"
+      ],
+      "default": "AND"
+    },
+    "in1": {
+      "type": "boolean",
+      "default": "false"
+    },
+    "in2": {
+      "type": "boolean",
+      "default": "false"
+    },
+    "out": {
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "settings": {
+    "width": "150px",
+    "height": "50px"
+  },
+  "html": "<div id=\"g\" class=\"lg\"><i id=\"i1\" class=\"pin p1\"></i><i id=\"i2\" class=\"pin p2\"></i><span class=\"w w1\"></span><span class=\"w w2\"></span><span id=\"body\" class=\"gate\"></span><span class=\"w wo\"></span><i id=\"o\" class=\"pin po\"></i></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.lg{position:relative;height:100%}\n.gate{position:absolute;left:24px;right:24px;top:50%;height:34px;transform:translateY(-50%);border-radius:17px;display:grid;place-items:center;font:700 14px 'IBM Plex Sans',sans-serif;letter-spacing:.04em;\n  background:linear-gradient(180deg,#f2f4f7,#c9cfd8);color:#2a313b;box-shadow:0 3px 8px rgba(0,0,0,.3)}\n.lg.on .gate{box-shadow:0 0 0 2px var(--db-glow),0 0 16px var(--db-glow)}\n.w{position:absolute;height:2px;background:var(--ui-border,#4a5262)}\n.w1{left:8px;width:16px;top:calc(50% - 9px)}.w2{left:8px;width:16px;top:calc(50% + 7px)}.wo{right:8px;width:16px;top:calc(50% - 1px)}\n.w.on{background:var(--db-glow);box-shadow:0 0 6px var(--db-glow)}\n.pin{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid var(--ui-dim,#9aa5b5);background:var(--ui-surface,#323843)}\n.p1{left:0;top:calc(50% - 13px)}.p2{left:0;top:calc(50% + 3px)}.po{right:0;top:calc(50% - 5px)}\n.pin.on{background:var(--db-glow);border-color:var(--db-glow);box-shadow:0 0 8px var(--db-glow)}\n.lg.one .p2,.lg.one .w2{display:none}.lg.one .w1{top:calc(50% - 1px)}.lg.one .p1{top:calc(50% - 5px)}\n",
+  "script": "export function evalGate(gate, a, b){\n    switch(gate){\n        case 'AND': return a && b;\n        case 'OR': return a || b;\n        case 'XOR': return a !== b;\n        case 'NAND': return !(a && b);\n        case 'NOR': return !(a || b);\n        case 'NOT': return !a;\n        default: return a;          // ARROW passes its input on\n    }\n}\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const yes = (v) => v === true || v === 1 || v === 'true' || v === '1';\n    const upd = () => {\n        const gate = instance.gate || 'AND', one = gate === 'NOT' || gate === 'ARROW';\n        const a = yes(instance.in1), b = yes(instance.in2);\n        const out = instance.out === '' || instance.out == null ? evalGate(gate, a, b) : yes(instance.out);\n        $('body').textContent = instance.label || (gate === 'ARROW' ? '⇒' : gate);\n        const g = $('g');\n        g.classList.toggle('one', one); g.classList.toggle('on', out);\n        $('i1').classList.toggle('on', a); $('i2').classList.toggle('on', b); $('o').classList.toggle('on', out);\n        const w = g.querySelectorAll('.w'); w[0].classList.toggle('on', a); w[1].classList.toggle('on', b); w[2].classList.toggle('on', out);\n        if(instance.__out !== out){ instance.__out = out; instance.dispatchEvent(new CustomEvent('output-changed', { detail: { value: out }, bubbles: true, composed: true })); }\n    };\n    for(const p of ['gate', 'in1', 'in2', 'out', 'label']) instance._assignEvent(p + '-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/notification-bell.control

@@ -0,0 +1,19 @@
+{
+  "properties": {
+    "count": {
+      "type": "number",
+      "default": 4
+    },
+    "screen": {
+      "type": "screen",
+      "default": ""
+    }
+  },
+  "settings": {
+    "width": "40px",
+    "height": "40px"
+  },
+  "html": "<button id=\"b\" class=\"ib\" type=\"button\" aria-label=\"Notifications\"><svg class=\"bi\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1z\"/></svg><span id=\"n\" class=\"bdg mono\"></span></button>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.ib{width:100%;height:100%;border-radius:9px;display:grid;place-items:center;background:transparent;border:0;color:var(--ui-dim,#9aa5b5);cursor:pointer;position:relative}\n.ib:hover{color:var(--ui-text,#e6ebf2)}.bi{width:60%;height:60%}\n.bdg{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ui-error,#ff5a6a);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}\n.ib:focus-visible{outline:2px solid var(--accent,#57b6ff)}\n",
+  "script": "export function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const upd = () => { const n = Number(instance.count) || 0; $('n').textContent = n > 99 ? '99+' : String(n); $('n').style.display = n > 0 ? '' : 'none'; };\n    $('b').addEventListener('click', () => {\n        if(instance.screen && window.IOB && window.IOB.changeView) window.IOB.changeView.emit(instance.screen);\n        instance.dispatchEvent(new CustomEvent('bellclick', { bubbles: true, composed: true }));\n    });\n    instance._assignEvent('count-changed', upd);\n    upd();\n}\n"
+}

package/default-controls/controls/dashboard/panel-card.control

@@ -0,0 +1,45 @@
+{
+  "properties": {
+    "title": {
+      "type": "string",
+      "default": "Panel"
+    },
+    "activeDot": {
+      "type": "number",
+      "default": 1
+    },
+    "showMenu": {
+      "type": "boolean",
+      "default": "true"
+    },
+    "direction": {
+      "type": "enum",
+      "values": [
+        "row",
+        "column"
+      ],
+      "default": "row"
+    },
+    "gap": {
+      "type": "string",
+      "default": "12px"
+    },
+    "align": {
+      "type": "enum",
+      "values": [
+        "stretch",
+        "flex-start",
+        "center",
+        "flex-end"
+      ],
+      "default": "center"
+    }
+  },
+  "settings": {
+    "width": "600px",
+    "height": "360px"
+  },
+  "html": "<div class=\"ch\"><span id=\"ttl\"></span><span id=\"dots\" class=\"dots\" title=\"Menu\"><i></i><i></i><i></i></span></div><slot></slot>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n:host{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:12px;padding:0 16px 16px;position:relative;min-width:0;\n  border-radius:14px;border:1px solid var(--ui-border,#4a5262);\n  background:linear-gradient(180deg,color-mix(in srgb,var(--ui-surface,#323843) 92%,#fff 3%),var(--ui-surface,#323843));box-shadow:0 10px 30px rgba(0,0,0,.25)}\n.ch{flex:0 0 calc(100% + 32px);align-self:stretch;margin:0 -16px 4px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--ui-border,#4a5262);font-weight:500;font-size:16px}\n.dots{display:flex;gap:5px;cursor:pointer;padding:4px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--ui-dim,#9aa5b5);opacity:.6}\n.dots i.on{background:var(--db-glow);opacity:1;box-shadow:0 0 6px var(--db-glow)}\n::slotted(*){max-width:100%;min-width:0}\n",
+  "script": "export function init(instance){\n    const upd = () => {\n        instance._getDomElement('ttl').textContent = instance.title || '';\n        const dots = instance._getDomElement('dots');\n        dots.style.display = (instance.showMenu === false || instance.showMenu === 'false') ? 'none' : '';\n        const a = Number(instance.activeDot) || 0;\n        [...dots.children].forEach((d, i) => d.classList.toggle('on', i + 1 === a));\n        const col = instance.direction === 'column';\n        instance.style.flexDirection = col ? 'column' : 'row';\n        instance.style.flexWrap = col ? 'nowrap' : 'wrap';\n        instance.style.gap = instance.gap || '12px';\n        instance.style.alignItems = col ? 'stretch' : (instance.align || 'center');\n    };\n    instance._getDomElement('dots').addEventListener('click', () =>\n        instance.dispatchEvent(new CustomEvent('menu', { bubbles: true, composed: true })));\n    for(const p of ['title', 'active-dot', 'show-menu', 'direction', 'gap', 'align']) instance._assignEvent(p + '-changed', upd);\n    upd();\n    // at runtime the controls inside flow: a position left over from the designer's free\n    // placement is dropped (the designer keeps it while editing)\n    if(!document.querySelector('iobroker-webui-app-shell')){\n        const flow = () => { for(const c of instance.children) if(c.style && c.style.position === 'absolute'){ c.style.position = ''; c.style.left = ''; c.style.top = ''; } };\n        flow();\n        instance.__pcMo = new MutationObserver(flow);\n        instance.__pcMo.observe(instance, { childList: true });\n    }\n}\nexport function disconnectedCallback(instance){ try{ instance.__pcMo && instance.__pcMo.disconnect(); }catch(e){} }\n"
+}

package/default-controls/controls/dashboard/setpoint-slider.control

@@ -0,0 +1,47 @@
+{
+  "properties": {
+    "label": {
+      "type": "string",
+      "default": "Main motor"
+    },
+    "signal": {
+      "type": "signal",
+      "default": ""
+    },
+    "signalHigh": {
+      "type": "signal",
+      "default": ""
+    },
+    "min": {
+      "type": "number",
+      "default": 1000
+    },
+    "max": {
+      "type": "number",
+      "default": 1400
+    },
+    "step": {
+      "type": "number",
+      "default": 10
+    },
+    "unit": {
+      "type": "string",
+      "default": ""
+    },
+    "decimals": {
+      "type": "number",
+      "default": 0
+    },
+    "showLabel": {
+      "type": "boolean",
+      "default": "true"
+    }
+  },
+  "settings": {
+    "width": "520px",
+    "height": "86px"
+  },
+  "html": "<div class=\"sld\"><span id=\"nm\" class=\"nm\"></span><div id=\"tr\" class=\"track\"><div class=\"ticks\"></div><div id=\"fill\" class=\"fill\"></div><div id=\"t1\" class=\"thumb\" tabindex=\"0\" role=\"slider\"><span class=\"bub mono\"></span></div><div id=\"t2\" class=\"thumb\" tabindex=\"0\" role=\"slider\"><span class=\"bub mono\"></span></div></div><div class=\"mm mono\"><span id=\"mn\"></span><span id=\"mx\"></span></div></div>",
+  "style": ":host{display:block;box-sizing:border-box;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ui-text,#e6ebf2);--db-glow:var(--ui-glow,#ffd36a)}\n*{box-sizing:border-box}\n.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}\n@media (prefers-reduced-motion: reduce){*{animation:none!important}}\n.t-ok{--tone:var(--ui-ok,#3ccf7a)} .t-warn{--tone:var(--ui-warn,#f2a531)} .t-error{--tone:var(--ui-error,#ff5a6a)}\n.t-info{--tone:var(--ui-info,#57b6ff)} .t-accent{--tone:var(--accent,#57b6ff)} .t-glow{--tone:var(--db-glow)} .t-off{--tone:var(--ui-dim,#9aa5b5)}\n.sld{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding-top:22px;box-sizing:border-box}\n.sld.nolabel{grid-template-columns:minmax(0,1fr)}.sld.nolabel .nm{display:none}.sld.nolabel .mm{grid-column:1}\n.nm{font-size:14px;color:var(--ui-dim,#9aa5b5)}\n.track{position:relative;height:30px;margin:0 11px}\n.ticks{position:absolute;left:0;right:0;top:4px;height:16px;background:repeating-linear-gradient(90deg,var(--ui-border,#4a5262) 0 1px,transparent 1px 8px)}\n.ticks::after{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--ui-dim,#9aa5b5) 0 1px,transparent 1px 40px);opacity:.6}\n.fill{position:absolute;top:11px;height:3px;border-radius:2px;background:var(--accent,#57b6ff);box-shadow:0 0 8px var(--accent,#57b6ff)}\n.thumb{position:absolute;top:2px;width:22px;height:22px;margin-left:-11px;border-radius:50%;cursor:grab;touch-action:none;\n  background:radial-gradient(circle,#fff 30%,color-mix(in srgb,var(--accent,#57b6ff) 60%,#fff));border:3px solid var(--accent,#57b6ff);box-shadow:0 0 12px var(--accent,#57b6ff)}\n.thumb:focus-visible{outline:2px solid var(--ui-text,#fff);outline-offset:2px}\n.bub{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;background:var(--ui-surface-2,#3a414d);border:1px solid var(--ui-border,#4a5262);border-radius:5px;padding:1px 5px;white-space:nowrap}\n.mm{grid-column:2;display:flex;justify-content:space-between;font-size:12px;color:var(--ui-dim,#9aa5b5);margin:0 4px}\n",
+  "script": "function dbSubscribe(instance, key, id, onVal){\n    dbUnsub(instance, key);\n    if(!id || !window.IOB) return;\n    instance.__dbSubs = instance.__dbSubs || {};\n    const cb = function(_i, s){ onVal(s ? s.val : null); };\n    instance.__dbSubs[key] = [id, cb];\n    try{ window.IOB.subscribeState(id, cb); }catch(e){}\n    try{ window.IOB.getState(id).then(function(s){ onVal(s ? s.val : null); }).catch(function(){}); }catch(e){}\n    // read quality knows this state (badge on the control when the value cannot be trusted)\n    try{ instance.__dbRq = instance.__dbRq || {}; instance.__dbRq[key] = window.IOB.watchReadQuality && window.IOB.watchReadQuality(instance, id, { prop: key, twoWay: true }); }catch(e){}\n}\nfunction dbUnsub(instance, key){\n    const p = instance.__dbSubs && instance.__dbSubs[key];\n    if(p){ try{ window.IOB.unsubscribeState(p[0], p[1]); }catch(e){} delete instance.__dbSubs[key]; }\n    const r = instance.__dbRq && instance.__dbRq[key];\n    if(typeof r === 'function'){ try{ r(); }catch(e){} }\n    if(instance.__dbRq) delete instance.__dbRq[key];\n}\nfunction dbUnsubAll(instance){ for(const k of Object.keys(instance.__dbSubs || {})) dbUnsub(instance, k); }\n// a write through IOB.setState: Confirm & Protect may ask first; cancelled = nothing written\nfunction dbWrite(instance, id, val, onCancel){\n    if(!id || !window.IOB) return Promise.resolve(false);\n    return Promise.resolve(window.IOB.setState(id, val, false, { feedback: instance })).then(function(){ return true; }, function(e){\n        if(e && e.cancelled){ if(onCancel) onCancel(); }\n        else console.warn('[dashboard] write failed', id, e);\n        return false;\n    });\n}\nfunction dbBool(v){ return v === true || v === 1 || v === 'true' || v === '1' || v === 'on'; }\nfunction dbNum(v, d){ const n = Number(v); return isFinite(n) ? n : d; }\nexport function snap(v, min, max, step){\n    v = Math.min(max, Math.max(min, Number(v)));\n    if(step > 0) v = min + Math.round((v - min) / step) * step;\n    return Math.round(Math.min(max, Math.max(min, v)) * 1e6) / 1e6;\n}\n/** the two thumbs never cross: the moved one stops one step before the other */\nexport function orderRange(lo, hi, moved, step){\n    const gap = step > 0 ? step : 0;\n    if(moved === 'lo') return [Math.min(lo, hi - gap), hi];\n    return [lo, Math.max(hi, lo + gap)];\n}\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    const st = { lo: null, hi: null };\n    const range = () => !!instance.signalHigh;\n    const P = () => ({ min: dbNum(instance.min, 0), max: dbNum(instance.max, 100), step: dbNum(instance.step, 1) });\n    const draw = () => {\n        const { min, max } = P(), dec = Math.max(0, dbNum(instance.decimals, 0));\n        const pct = (v) => ((dbNum(v, min) - min) / ((max - min) || 1)) * 100;\n        $('nm').textContent = instance.label || '';\n        $('nm').parentElement.classList.toggle('nolabel', instance.showLabel === false || instance.showLabel === 'false');\n        $('mn').textContent = String(min); $('mx').textContent = String(max);\n        const lo = st.lo ?? min, hi = st.hi ?? max;\n        for(const [t, v] of [[$('t1'), lo], [$('t2'), hi]]){\n            t.style.left = pct(v) + '%';\n            t.querySelector('.bub').textContent = dbNum(v, min).toFixed(dec) + (instance.unit ? ' ' + instance.unit : '');\n            t.setAttribute('aria-valuenow', String(v)); t.setAttribute('aria-valuemin', String(min)); t.setAttribute('aria-valuemax', String(max));\n        }\n        $('t2').style.display = range() ? '' : 'none';\n        const f = $('fill');\n        if(range()){ f.style.left = pct(lo) + '%'; f.style.width = Math.max(0, pct(hi) - pct(lo)) + '%'; }\n        else { f.style.left = '0'; f.style.width = pct(lo) + '%'; }\n    };\n    const idOf = (k) => k === 'lo' ? instance.signal : instance.signalHigh;\n    const refresh = (k) => { const id = idOf(k); if(id) window.IOB.getState(id).then(s => { st[k] = s ? dbNum(s.val, null) : null; draw(); }).catch(() => {}); };\n    const setV = (k, v) => {\n        const { min, max, step } = P();\n        st[k] = snap(v, min, max, step);\n        if(range()){ const [a, b] = orderRange(st.lo ?? min, st.hi ?? max, k, step); st.lo = a; st.hi = b; }\n        draw();\n    };\n    const commit = (k) => dbWrite(instance, idOf(k), st[k], () => refresh(k));\n    for(const [el, k] of [[$('t1'), 'lo'], [$('t2'), 'hi']]){\n        el.addEventListener('pointerdown', (e) => {\n            el.setPointerCapture(e.pointerId);\n            const { min, max } = P();\n            const mv = (ev) => { const r = $('tr').getBoundingClientRect(); setV(k, min + (ev.clientX - r.left) / (r.width || 1) * (max - min)); };\n            const up = () => { el.removeEventListener('pointermove', mv); el.removeEventListener('pointerup', up); commit(k); };\n            el.addEventListener('pointermove', mv); el.addEventListener('pointerup', up);\n        });\n        el.addEventListener('keydown', (e) => {\n            const { step, min, max } = P(), d = step > 0 ? step : (max - min) / 100;\n            if(e.key === 'ArrowRight' || e.key === 'ArrowUp'){ setV(k, (st[k] ?? min) + d); commit(k); e.preventDefault(); }\n            if(e.key === 'ArrowLeft' || e.key === 'ArrowDown'){ setV(k, (st[k] ?? min) - d); commit(k); e.preventDefault(); }\n        });\n    }\n    const sub = () => {\n        dbSubscribe(instance, 'signal', instance.signal, (v) => { st.lo = dbNum(v, null); draw(); });\n        if(instance.signalHigh) dbSubscribe(instance, 'signalHigh', instance.signalHigh, (v) => { st.hi = dbNum(v, null); draw(); });\n        else dbUnsub(instance, 'signalHigh');\n        draw();\n    };\n    for(const p of ['label', 'min', 'max', 'step', 'unit', 'decimals', 'show-label']) instance._assignEvent(p + '-changed', draw);\n    instance._assignEvent('signal-changed', sub); instance._assignEvent('signal-high-changed', sub);\n    sub();\n}\nexport function disconnectedCallback(instance){ dbUnsubAll(instance); }\n"
+}