iobroker.mywebui 1.173.1 → 1.176.0

package/README.md

@@ -302,6 +302,21 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 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/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"
+}

package/default-controls/controls/dashboard/status-chip.control

@@ -0,0 +1,74 @@
+{
+  "properties": {
+    "active": {
+      "type": "boolean",
+      "default": "true"
+    },
+    "textOn": {
+      "type": "string",
+      "default": "HEATING ON"
+    },
+    "textOff": {
+      "type": "string",
+      "default": "HEATING OFF"
+    },
+    "toneOn": {
+      "type": "enum",
+      "values": [
+        "ok",
+        "warn",
+        "error",
+        "info",
+        "accent",
+        "glow",
+        "off"
+      ],
+      "default": "ok"
+    },
+    "toneOff": {
+      "type": "enum",
+      "values": [
+        "ok",
+        "warn",
+        "error",
+        "info",
+        "accent",
+        "glow",
+        "off"
+      ],
+      "default": "off"
+    },
+    "variant": {
+      "type": "enum",
+      "values": [
+        "text",
+        "chip",
+        "icon"
+      ],
+      "default": "text"
+    },
+    "icon": {
+      "type": "enum",
+      "values": [
+        "none",
+        "relay",
+        "pump",
+        "bell",
+        "flame",
+        "check"
+      ],
+      "default": "none"
+    },
+    "signal": {
+      "type": "signal",
+      "default": ""
+    }
+  },
+  "settings": {
+    "width": "190px",
+    "height": "40px"
+  },
+  "html": "<button id=\"c\" class=\"sc\" type=\"button\"><span id=\"ic\" class=\"ic\"></span><span id=\"tx\" class=\"tx\"></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.sc{height:100%;width:100%;display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--tone);font:600 15px 'IBM Plex Sans',sans-serif;letter-spacing:.06em;padding:0;cursor:default;text-align:left}\n.sc.click{cursor:pointer}\n.sc.chip{justify-content:center;text-align:center;padding:6px 14px;border-radius:9px;font-size:13px;line-height:1.25;white-space:pre-line;background:linear-gradient(180deg,#e9ecf1,#c4cad3);color:#38404c}\n.sc.chip.on{color:#3a2a00;background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 45%,#fff),var(--tone));box-shadow:0 0 14px color-mix(in srgb,var(--tone) 60%,transparent)}\n.sc.icon{justify-content:center;border-radius:8px;background:var(--ui-surface-2,#3a414d);border:1px solid var(--ui-border,#4a5262);color:var(--ui-dim,#9aa5b5)}\n.sc.icon.on{color:var(--tone);box-shadow:0 0 0 1px var(--tone)}\n.sc.icon .tx{display:none}\n.ic:empty{display:none}.ic svg{width:26px;height:22px;display:block}\n.sc:focus-visible{outline:2px solid var(--accent,#57b6ff);outline-offset:2px}\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; }\nconst ICONS = {\"none\": \"\", \"relay\": \"<svg viewBox=\\\"0 0 26 22\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\"><rect x=\\\"1\\\" y=\\\"1\\\" width=\\\"24\\\" height=\\\"20\\\" rx=\\\"3\\\"/><path d=\\\"M5 14h4l3-7 3 9 2-4h4\\\"/></svg>\", \"pump\": \"<svg viewBox=\\\"0 0 26 22\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\"><rect x=\\\"1\\\" y=\\\"3\\\" width=\\\"24\\\" height=\\\"16\\\" rx=\\\"3\\\"/><path d=\\\"M8 7l9 4-9 4z\\\" fill=\\\"currentColor\\\"/></svg>\", \"bell\": \"<svg 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>\", \"flame\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"currentColor\\\"><path d=\\\"M12 2c1 4 6 6 6 12a6 6 0 1 1-12 0c0-3 2-5 3-6 0 3 2 4 3 4-1-4 1-7 0-10z\\\"/></svg>\", \"check\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2.4\\\"><path d=\\\"M4 12l5 5L20 6\\\"/></svg>\"};\nexport function init(instance){\n    const $ = (id) => instance._getDomElement(id);\n    let stateVal = null;\n    const isOn = () => instance.signal ? dbBool(stateVal) : dbBool(instance.active);\n    const upd = () => {\n        const on = isOn(), c = $('c'), v = instance.variant || 'text';\n        c.className = 'sc ' + v + (on ? ' on' : '') + (instance.signal ? ' click' : '') + ' t-' + (on ? (instance.toneOn || 'ok') : (instance.toneOff || 'off'));\n        $('tx').textContent = on ? (instance.textOn || '') : (instance.textOff || '');\n        $('ic').innerHTML = ICONS[instance.icon] || '';\n        c.setAttribute('aria-pressed', String(on));\n        c.title = $('tx').textContent;\n    };\n    // with a signal the chip is a switch: a click writes the opposite\n    $('c').addEventListener('click', () => { if(instance.signal) dbWrite(instance, instance.signal, !dbBool(stateVal)); });\n    const sub = () => { if(instance.signal) dbSubscribe(instance, 'signal', instance.signal, (v) => { stateVal = v; upd(); }); else dbUnsub(instance, 'signal'); upd(); };\n    for(const p of ['active', 'text-on', 'text-off', 'tone-on', 'tone-off', 'variant', 'icon']) instance._assignEvent(p + '-changed', upd);\n    instance._assignEvent('signal-changed', sub);\n    sub();\n}\nexport function disconnectedCallback(instance){ dbUnsubAll(instance); }\n"
+}