iobroker.mywebui 1.42.38 → 1.42.40

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.38",
+    "version": "1.42.40",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,13 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.42.40": {
+        "en": "feature: per-instance dynamic properties for custom controls (add/edit name, type, default via properties tab) and extended Lit widget property support (Array/Object/converter types, webuiProperties metadata for signal/color/screen/enum editors)",
+        "az": "yenilik: custom control-lar üçün instance-əsaslı dinamik property-lər (properties tabından ad, tip, default əlavə/redaktə) və Lit widget-lər üçün genişləndirilmiş property dəstəyi (Array/Object/converter tipləri, signal/color/screen/enum editorları üçün webuiProperties metadata)",
+        "tr": "yenilik: custom control'ler için instance bazlı dinamik property'ler (properties sekmesinden ad, tip, varsayılan ekleme/düzenleme) ve Lit widget'lar için genişletilmiş property desteği (Array/Object/converter tipleri, signal/color/screen/enum editörleri için webuiProperties metadata)",
+        "ru": "новое: динамические свойства экземпляров для custom control (добавление/редактирование имени, типа, значения по умолчанию во вкладке properties) и расширенная поддержка свойств Lit-виджетов (типы Array/Object/converter, метаданные webuiProperties для редакторов signal/color/screen/enum)",
+        "de": "Neu: instanzbasierte dynamische Properties für Custom Controls (Name, Typ, Standardwert über den Properties-Tab hinzufügen/bearbeiten) und erweiterte Lit-Widget-Property-Unterstützung (Array/Object/Converter-Typen, webuiProperties-Metadaten für Signal/Color/Screen/Enum-Editoren)"
+      },
       "1.37.30": {
         "en": "cleanup: remove unused grafanaLangSync onMessage handler and helper functions from main.js",
         "az": "təmizlik: istifadəsiz grafanaLangSync onMessage handler və köməkçi funksiyalar main.js-dən silindi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.38",
+  "version": "1.42.40",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/ConfigureWebcomponentDesigner.js

@@ -14,6 +14,7 @@ import { IobrokerWebuiConfigButtonProvider } from "../services/IobrokerWebuiConf
 import { IobrokerWebuiCustomElementContextMenu } from "../services/IobrokerWebuiCustomElementContextMenu.js";
 import { IobrokerWebuiRefactorService } from "../services/IobrokerWebuiRefactorService.js";
 import { IobrokerWebuiSpecialPropertiesService } from "../services/IobrokerWebuiSpecialPropertiesService.js";
+import { IobrokerWebuiLitPropertiesService } from "../services/IobrokerWebuiLitPropertiesService.js";
 // import { IobrokerWebuiVisibilityPropertiesService } from "../services/IobrokerWebuiVisibilityPropertiesService.js";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { ExpandCollapseContextMenu } from "@gokturk413/web-component-designer-widgets-wunderbaum";
@@ -49,6 +50,7 @@ export function configureDesigner(bindingsHelper) {
     serviceContainer.register('elementsService', new JsonFileElementsService('native', './node_modules/@gokturk413/web-component-designer/config/elements-native.json'));
     serviceContainer.register('propertyService', new IobrokerWebuiPropertiesService());
     serviceContainer.register('propertyService', new IobrokerWebuiSpecialPropertiesService());
+    serviceContainer.register('propertyService', new IobrokerWebuiLitPropertiesService());
     // Visibility is now handled directly in PropertyGrid
     // serviceContainer.register('propertyService', new IobrokerWebuiVisibilityPropertiesService());
     serviceContainer.designViewConfigButtons.push(new IobrokerWebuiConfigButtonProvider());

package/www/dist/frontend/config/IobrokerWebui3DScreenPropertiesPanel.js

@@ -1,19 +1,12 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@gokturk413/base-custom-webcomponent";
-import { iobrokerHandler } from "../common/IobrokerHandler.js";
 
 const EDITOR_BASE = new URL('../../../3d-editor/', import.meta.url).href;
 
-/**
- * IobrokerWebui3DScreenPropertiesPanel
- * Injected into the webui's "Properties" (attributeDock) when a 3D screen editor is active.
- * Has sub-tabs: Scene | Object | Geom | Mater — no own bottom tab bar.
- * connect(editor, editorHost) must be called after Three.js editor is ready.
- */
 export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponentConstructorAppend {
 
     static template = html`
     <div id="root">
-        <!-- Sub-tab bar: Scene / Object / Geom / Mater -->
+        <!-- Sub-tab bar -->
         <div id="subBar">
             <span class="stab active" data-sub="scene">Scene</span>
             <span class="stab" data-sub="object">Object</span>
@@ -21,45 +14,96 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
             <span class="stab" data-sub="mater">Mater</span>
         </div>
 
-        <!-- Sub-tab panels -->
+        <!-- Scene tab -->
         <div id="subScene" class="spanel active"></div>
 
+        <!-- Object tab -->
         <div id="subObject" class="spanel" style="display:none;">
-            <!-- Three.js SidebarObject embedded here -->
             <div id="objThreeWrap"></div>
-            <!-- ioBroker bindings section -->
-            <div id="bindSection">
-                <div class="sechdr">Bindings (ioBroker states)</div>
-                <div id="bindRows"></div>
-            </div>
+            <div class="sechdr">BINDINGS (IOBROKER STATES)</div>
+            <div id="bindRows"></div>
         </div>
 
+        <!-- Geom tab -->
         <div id="subGeom" class="spanel" style="display:none;"></div>
+
+        <!-- Mater tab -->
         <div id="subMater" class="spanel" style="display:none;"></div>
 
-        <!-- Binding dialog (inline overlay) -->
+        <!-- Context menu -->
+        <div id="ctxMenu">
+            <div class="cmItem" data-action="clear">clear</div>
+            <div class="cmItem" data-action="edittext">edit as text</div>
+            <div class="cmItem" data-action="editbind">edit binding</div>
+        </div>
+
+        <!-- Binding dialog -->
         <div id="bdOverlay">
             <div id="bdBox">
-                <div id="bdTitle">Binding — <span id="bdPropName"></span></div>
-                <div class="bdr">
-                    <div class="bdl">ioBroker State ID</div>
-                    <div style="display:flex;gap:4px;">
-                        <input id="bdSig" type="text" placeholder="mywebui.0.data.value" autocomplete="off" />
-                        <button id="bdBrowse">...</button>
+                <div id="bdTitle">Edit Binding of '<span id="bdPropLabel"></span>' - 3DScreen</div>
+
+                <div class="bdRow">
+                    <div class="bdLbl">objects</div>
+                    <div style="display:flex;gap:3px;align-items:center;">
+                        <input id="bdObj" type="text" class="bdInput" style="flex:1;" placeholder="state id" autocomplete="off"/>
+                        <button class="bdBtn sm" id="bdObjX">X</button>
+                        <button class="bdBtn sm" id="bdObjBrowse">...</button>
+                        <button class="bdBtn sm accent" id="bdObjIOB">IOB</button>
                     </div>
                 </div>
-                <div class="bdr">
-                    <div class="bdl">Formula <small>(use <b>val</b> for state value)</small></div>
-                    <input id="bdForm" type="text" placeholder="val" />
+
+                <div class="bdRow" style="display:flex;align-items:center;gap:8px;">
+                    <span class="bdLbl" style="margin-bottom:0;">type :</span>
+                    <select id="bdType" class="bdSel">
+                        <option value="signal">signal</option>
+                        <option value="ignore" selected>ignore</option>
+                        <option value="css">css</option>
+                        <option value="attribute">attribute</option>
+                    </select>
                 </div>
-                <div class="bdr" style="display:flex;align-items:center;gap:8px;">
-                    <input id="bdTw" type="checkbox" />
-                    <span style="color:#ccc;font-size:11px;">Two-way (write back)</span>
+
+                <div class="bdRow" style="display:flex;align-items:center;gap:8px;">
+                    <input id="bdTwoWay" type="checkbox"/>
+                    <span class="bdChkLbl">two way binding</span>
+                </div>
+                <div class="bdRow" style="display:flex;align-items:center;gap:8px;">
+                    <input id="bdInvert" type="checkbox"/>
+                    <span class="bdChkLbl">invert logic</span>
+                </div>
+
+                <div class="bdRow" style="display:flex;align-items:center;justify-content:space-between;">
+                    <span class="bdLbl" style="margin-bottom:0;">formula</span>
+                    <button class="bdBtn sm" id="bdHistoric">historic</button>
+                </div>
+                <div class="bdRow">
+                    <textarea id="bdFormula" class="bdTa" rows="2" placeholder="val"></textarea>
+                </div>
+
+                <div class="bdRow">
+                    <span class="bdLbl">write back signal :</span>
+                    <input id="bdWriteBack" type="text" class="bdInput" placeholder=""/>
+                </div>
+
+                <div class="bdRow">
+                    <span class="bdLbl">formula write back (two way)</span>
+                    <textarea id="bdFormulaWB" class="bdTa" rows="2" placeholder="val"></textarea>
+                </div>
+
+                <div class="bdRow">
+                    <span class="bdLbl">converter:</span>
+                    <table id="bdConvTable" class="bdTable">
+                        <thead><tr><th>condition</th><th>value</th></tr></thead>
+                        <tbody id="bdConvBody"></tbody>
+                    </table>
+                    <div style="display:flex;gap:4px;margin-top:4px;justify-content:flex-end;">
+                        <button class="bdBtn" id="bdConvAdd">add</button>
+                        <button class="bdBtn" id="bdConvRemove">remove</button>
+                    </div>
                 </div>
+
                 <div id="bdFoot">
-                    <button id="bdClear">Clear</button>
-                    <button id="bdCancel">Cancel</button>
-                    <button id="bdOk" class="primary">OK</button>
+                    <button class="bdBtn accent-ok" id="bdOk">Ok</button>
+                    <button class="bdBtn" id="bdCancel">Cancel</button>
                 </div>
             </div>
         </div>
@@ -72,52 +116,69 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
 
         /* Sub-tab bar */
         #subBar { display:flex;background:#2d2d30;border-bottom:1px solid #3c3c3c;flex-shrink:0; }
-        .stab { padding:6px 12px;cursor:pointer;font-size:11px;color:#888;border-right:1px solid #3c3c3c;white-space:nowrap;user-select:none; }
+        .stab { padding:5px 10px;cursor:pointer;font-size:11px;color:#888;border-right:1px solid #3c3c3c;white-space:nowrap;user-select:none; }
         .stab:hover { color:#ddd;background:#3e3e42; }
         .stab.active { color:#fff;background:#1e1e1e;border-top:2px solid #4ec9b0; }
 
         /* Sub-tab panels */
         .spanel { flex:1;overflow:auto;min-height:0; }
+        #subScene,#subGeom,#subMater { overflow:auto; }
+        #subObject { display:flex;flex-direction:column; }
+        #objThreeWrap { overflow:auto; }
 
         /* Section header */
-        .sechdr { background:#2d2d30;color:#9cdcfe;padding:5px 8px;font-size:10px;font-weight:bold;text-transform:uppercase;border-top:1px solid #3c3c3c;border-bottom:1px solid #3c3c3c;letter-spacing:.5px; }
+        .sechdr { background:#252526;color:#9cdcfe;padding:4px 8px;font-size:10px;font-weight:bold;text-transform:uppercase;border-top:1px solid #3c3c3c;border-bottom:1px solid #3c3c3c;letter-spacing:.5px;flex-shrink:0; }
 
-        /* Binding rows */
-        #bindRows { padding:2px 0; }
-        .brow { display:flex;align-items:center;padding:3px 6px;gap:5px;border-bottom:1px solid #252526;min-height:22px; }
+        /* Binding rows — match 2D property grid style */
+        #bindRows { flex:1;overflow:auto; }
+        .brow { display:flex;align-items:center;padding:2px 4px;gap:0;border-bottom:1px solid #2a2a2a;min-height:20px; }
         .brow:hover { background:#252526; }
-        .blbl { width:96px;color:#888;font-size:10px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
-        .bsig { flex:1;color:#4ec9b0;font-size:10px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
-        .bsig.none { color:#555; }
-        .bedit { padding:1px 6px;background:#2d2d30;border:1px solid #555;color:#ccc;cursor:pointer;font-size:10px;flex-shrink:0; }
-        .bedit:hover { border-color:#4ec9b0;color:#4ec9b0; }
-
-        /* Three.js panel host — reset some Three.js CSS for dark bg */
-        #objThreeWrap { overflow:auto; }
-        #subScene { overflow:auto; }
-        #subGeom  { overflow:auto; }
-        #subMater { overflow:auto; }
-
-        /* Binding dialog */
-        #bdOverlay { display:none;position:absolute;inset:0;background:rgba(0,0,0,0.78);z-index:300;align-items:center;justify-content:center; }
+        /* □ square button */
+        .bsq { width:14px;height:14px;min-width:14px;border:1px solid #555;background:#2d2d30;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8px;color:#888;flex-shrink:0;margin-right:4px;padding:0; }
+        .bsq:hover { border-color:#4ec9b0; }
+        .bsq.bound { background:#0e639c;border-color:#1177bb;color:#fff; }
+        /* property name */
+        .blbl { width:90px;color:#9cdcfe;font-size:11px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
+        /* signal display */
+        .bval { flex:1;color:#4ec9b0;font-size:10px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px; }
+        .bval.none { color:#555; }
+
+        /* Context menu */
+        #ctxMenu { display:none;position:fixed;z-index:9999;background:#2d2d30;border:1px solid #555;min-width:120px;box-shadow:2px 2px 8px rgba(0,0,0,0.6); }
+        #ctxMenu.open { display:block; }
+        .cmItem { padding:5px 12px;cursor:pointer;font-size:11px;color:#ccc; }
+        .cmItem:hover { background:#3e3e42;color:#fff; }
+
+        /* Binding dialog overlay */
+        #bdOverlay { display:none;position:absolute;inset:0;background:rgba(0,0,0,0.75);z-index:500;align-items:center;justify-content:center; }
         #bdOverlay.open { display:flex; }
-        #bdBox { background:#252526;border:1px solid #555;border-radius:4px;padding:14px;width:90%;max-width:310px;color:#ccc;font-size:12px; }
-        #bdTitle { font-weight:bold;color:#9cdcfe;margin-bottom:10px;font-size:12px; }
-        .bdr { margin-bottom:8px; }
-        .bdl { color:#888;font-size:10px;margin-bottom:3px; }
-        .bdr input[type="text"] { width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:4px;font-size:11px;box-sizing:border-box; }
-        .bdr input[type="text"]:focus { border-color:#4ec9b0;outline:none; }
-        #bdBrowse { padding:3px 8px;background:#3c3c3c;border:1px solid #555;color:#ccc;cursor:pointer;font-size:11px; }
-        #bdFoot { display:flex;justify-content:flex-end;gap:6px;margin-top:12px; }
-        #bdFoot button { padding:4px 12px;border:1px solid #555;background:#3c3c3c;color:#ccc;cursor:pointer;font-size:11px; }
-        #bdFoot button.primary { background:#0e639c;border-color:#1177bb;color:#fff; }
+        #bdBox { background:#2d2d30;border:1px solid #555;padding:0;width:340px;max-height:90%;overflow-y:auto;box-shadow:4px 4px 16px rgba(0,0,0,0.7); }
+        #bdTitle { background:#3e3e42;padding:7px 10px;font-size:12px;font-weight:bold;color:#9cdcfe;border-bottom:1px solid #555;margin-bottom:0; }
+        .bdRow { padding:4px 10px 2px; }
+        .bdLbl { color:#888;font-size:10px;margin-bottom:2px;display:block; }
+        .bdInput { width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 5px;font-size:11px;box-sizing:border-box; }
+        .bdInput:focus { border-color:#4ec9b0;outline:none; }
+        .bdSel { background:#3c3c3c;border:1px solid #555;color:#ccc;padding:2px 4px;font-size:11px; }
+        .bdTa { width:100%;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 5px;font-size:11px;box-sizing:border-box;resize:vertical;font-family:monospace; }
+        .bdTa:focus { border-color:#4ec9b0;outline:none; }
+        .bdChkLbl { color:#ccc;font-size:11px; }
+        .bdTable { width:100%;border-collapse:collapse;font-size:10px;color:#ccc; }
+        .bdTable th { background:#252526;padding:2px 6px;text-align:left;color:#888;border:1px solid #3c3c3c; }
+        .bdTable td { padding:2px 4px;border:1px solid #3c3c3c; }
+        .bdTable td input { width:100%;background:#3c3c3c;border:none;color:#ccc;padding:1px 3px;font-size:10px; }
+        .bdBtn { padding:3px 10px;background:#3c3c3c;border:1px solid #555;color:#ccc;cursor:pointer;font-size:11px; }
+        .bdBtn:hover { border-color:#999; }
+        .bdBtn.sm { padding:2px 6px;font-size:10px; }
+        .bdBtn.accent { background:#0e639c;border-color:#1177bb;color:#fff; }
+        .bdBtn.accent-ok { background:#0e639c;border-color:#1177bb;color:#fff; }
+        #bdFoot { display:flex;justify-content:flex-end;gap:6px;padding:8px 10px;border-top:1px solid #3c3c3c;margin-top:4px; }
     `;
 
     _editor = null;
     _editorHost = null;
     _bindings = {};
     _selectedObj = null;
-    _bindTarget = null;
+    _ctxTarget = null;   // { uuid, key }
 
     // ── Public API ─────────────────────────────────────────────────────────────
 
@@ -129,7 +190,8 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
         await this._injectThreeCSS();
         await this._mountThreePanels();
         this._setupSubTabs();
-        this._setupBindingRows();
+        this._buildBindingRows();
+        this._setupContextMenu();
         this._setupBindingDialog();
 
         editor.signals.objectSelected.add(obj => {
@@ -161,7 +223,7 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
         sr.appendChild(l);
     }
 
-    // ── Mount Three.js sidebar sub-panels ──────────────────────────────────────
+    // ── Mount Three.js sidebar panels ──────────────────────────────────────────
 
     async _mountThreePanels() {
         const base = EDITOR_BASE + 'js/';
@@ -200,12 +262,12 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
                 btn.classList.add('active');
                 Object.values(panels).forEach(p => { if (p) p.style.display = 'none'; });
                 const p = panels[btn.dataset.sub];
-                if (p) p.style.display = 'block';
+                if (p) p.style.display = btn.dataset.sub === 'object' ? 'flex' : 'block';
             });
         });
     }
 
-    // ── Bindable properties list ────────────────────────────────────────────────
+    // ── Bindable properties ─────────────────────────────────────────────────────
 
     _BINDABLE = [
         { key: 'position.x',       label: 'Position X' },
@@ -222,7 +284,7 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
         { key: 'material.color',   label: 'Color (hex)' },
     ];
 
-    _setupBindingRows() {
+    _buildBindingRows() {
         const cont = this._getDomElement('bindRows');
         if (!cont) return;
         cont.innerHTML = '';
@@ -231,22 +293,33 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
             row.className = 'brow';
             row.dataset.key = key;
 
+            // □ square button (left of label)
+            const sq = document.createElement('button');
+            sq.className = 'bsq';
+            sq.title = 'right-click to bind / clear';
+            sq.textContent = '■';
+            sq.addEventListener('contextmenu', e => {
+                e.preventDefault();
+                this._showCtxMenu(e, key);
+            });
+            sq.addEventListener('click', e => {
+                e.preventDefault();
+                this._showCtxMenu(e, key);
+            });
+
+            // property name
             const lbl = document.createElement('span');
             lbl.className = 'blbl';
             lbl.textContent = label;
 
-            const sig = document.createElement('span');
-            sig.className = 'bsig none';
-            sig.textContent = '—';
-
-            const btn = document.createElement('button');
-            btn.className = 'bedit';
-            btn.textContent = '□ bind';
-            btn.addEventListener('click', () => this._openBindDlg(key, label));
+            // current signal display
+            const val = document.createElement('span');
+            val.className = 'bval none';
+            val.textContent = '';
 
+            row.appendChild(sq);
             row.appendChild(lbl);
-            row.appendChild(sig);
-            row.appendChild(btn);
+            row.appendChild(val);
             cont.appendChild(row);
         });
     }
@@ -257,68 +330,190 @@ export class IobrokerWebui3DScreenPropertiesPanel extends BaseCustomWebComponent
         const uuid = this._selectedObj?.uuid;
         cont.querySelectorAll('.brow').forEach(row => {
             const key  = row.dataset.key;
-            const sig  = row.querySelector('.bsig');
-            const btn  = row.querySelector('.bedit');
+            const sq   = row.querySelector('.bsq');
+            const val  = row.querySelector('.bval');
             const bind = uuid ? this._bindings[uuid]?.[key] : null;
-            if (sig) { sig.textContent = bind?.signal || '—'; sig.className = 'bsig' + (bind?.signal ? '' : ' none'); }
-            if (btn) { btn.textContent = bind?.signal ? '■ bound' : '□ bind'; btn.style.color = bind?.signal ? '#4ec9b0' : ''; }
+
+            if (val) {
+                val.textContent = bind?.signal || '';
+                val.className   = 'bval' + (bind?.signal ? '' : ' none');
+            }
+            if (sq) {
+                sq.className = 'bsq' + (bind?.signal ? ' bound' : '');
+            }
+        });
+    }
+
+    // ── Context menu ────────────────────────────────────────────────────────────
+
+    _setupContextMenu() {
+        const menu = this._getDomElement('ctxMenu');
+        if (!menu) return;
+
+        menu.addEventListener('click', e => {
+            const item = e.target.closest('.cmItem');
+            if (!item) return;
+            const action = item.dataset.action;
+            menu.classList.remove('open');
+
+            if (action === 'clear')    this._clearBinding(this._ctxTarget);
+            if (action === 'editbind') this._openBindDialog(this._ctxTarget);
+            if (action === 'edittext') this._openTextEditor(this._ctxTarget);
+        });
+
+        // close on outside click
+        document.addEventListener('click', e => {
+            if (!menu.contains(e.target)) menu.classList.remove('open');
         });
     }
 
+    _showCtxMenu(e, key) {
+        if (!this._selectedObj) {
+            alert('Select a 3D object first.');
+            return;
+        }
+        this._ctxTarget = { uuid: this._selectedObj.uuid, key };
+        const menu = this._getDomElement('ctxMenu');
+        if (!menu) return;
+        // position near click
+        menu.style.left = e.clientX + 'px';
+        menu.style.top  = e.clientY + 'px';
+        menu.classList.add('open');
+    }
+
+    _clearBinding({ uuid, key } = {}) {
+        if (!uuid || !key) return;
+        delete this._bindings[uuid]?.[key];
+        if (this._bindings[uuid] && !Object.keys(this._bindings[uuid]).length)
+            delete this._bindings[uuid];
+        this._syncHost();
+        this._refreshBindRows();
+    }
+
+    _openTextEditor({ uuid, key } = {}) {
+        if (!uuid || !key) return;
+        const ex  = this._bindings[uuid]?.[key];
+        const val = ex?.signal || '';
+        const nv  = window.prompt(`State ID for "${key}":`, val);
+        if (nv === null) return;
+        if (!nv.trim()) { this._clearBinding({ uuid, key }); return; }
+        if (!this._bindings[uuid]) this._bindings[uuid] = {};
+        this._bindings[uuid][key] = { signal: nv.trim(), formula: ex?.formula || 'val', twoWay: ex?.twoWay || false };
+        this._syncHost();
+        this._refreshBindRows();
+    }
+
     // ── Binding dialog ──────────────────────────────────────────────────────────
 
     _setupBindingDialog() {
         const ov = this._getDomElement('bdOverlay');
 
         this._getDomElement('bdCancel')?.addEventListener('click', () => {
-            ov?.classList.remove('open'); this._bindTarget = null;
+            ov?.classList.remove('open');
         });
 
-        this._getDomElement('bdClear')?.addEventListener('click', () => {
-            const { uuid, key } = this._bindTarget || {};
-            if (uuid && key) {
-                delete this._bindings[uuid]?.[key];
-                if (this._bindings[uuid] && !Object.keys(this._bindings[uuid]).length) delete this._bindings[uuid];
-                this._syncHost(); this._refreshBindRows();
-            }
-            ov?.classList.remove('open'); this._bindTarget = null;
+        this._getDomElement('bdObjX')?.addEventListener('click', () => {
+            const inp = this._getDomElement('bdObj');
+            if (inp) inp.value = '';
+        });
+
+        this._getDomElement('bdObjBrowse')?.addEventListener('click', async () => {
+            try {
+                const { openSelectIdDialog } = await import('@iobroker/webcomponent-selectid-dialog/dist/selectIdHelper.js');
+                const connection = (await import('../common/IobrokerHandler.js')).iobrokerHandler.connection;
+                const id = await openSelectIdDialog(connection, null, false);
+                if (id) { const inp = this._getDomElement('bdObj'); if (inp) inp.value = id; }
+            } catch (_) {}
+        });
+
+        this._getDomElement('bdObjIOB')?.addEventListener('click', async () => {
+            try {
+                const { openSelectIdDialog } = await import('@iobroker/webcomponent-selectid-dialog/dist/selectIdHelper.js');
+                const connection = (await import('../common/IobrokerHandler.js')).iobrokerHandler.connection;
+                const id = await openSelectIdDialog(connection, null, false);
+                if (id) { const inp = this._getDomElement('bdObj'); if (inp) inp.value = id; }
+            } catch (_) {}
+        });
+
+        this._getDomElement('bdHistoric')?.addEventListener('click', () => {
+            // historic signals - show simple list if available
+        });
+
+        this._getDomElement('bdConvAdd')?.addEventListener('click', () => {
+            const tbody = this._getDomElement('bdConvBody');
+            if (!tbody) return;
+            const tr = document.createElement('tr');
+            tr.innerHTML = '<td><input type="text" placeholder="condition"/></td><td><input type="text" placeholder="value"/></td>';
+            tbody.appendChild(tr);
+        });
+
+        this._getDomElement('bdConvRemove')?.addEventListener('click', () => {
+            const tbody = this._getDomElement('bdConvBody');
+            if (!tbody) return;
+            const last = tbody.querySelector('tr:last-child');
+            if (last) last.remove();
         });
 
         this._getDomElement('bdOk')?.addEventListener('click', () => {
-            const { uuid, key } = this._bindTarget || {};
-            const signal  = this._getDomElement('bdSig')?.value?.trim();
-            const formula = this._getDomElement('bdForm')?.value?.trim() || 'val';
-            const twoWay  = this._getDomElement('bdTw')?.checked ?? false;
+            const { uuid, key } = this._ctxTarget || {};
+            const signal    = this._getDomElement('bdObj')?.value?.trim();
+            const formula   = this._getDomElement('bdFormula')?.value?.trim() || 'val';
+            const formulaWB = this._getDomElement('bdFormulaWB')?.value?.trim() || '';
+            const writeBack = this._getDomElement('bdWriteBack')?.value?.trim() || '';
+            const twoWay    = this._getDomElement('bdTwoWay')?.checked ?? false;
+            const invert    = this._getDomElement('bdInvert')?.checked ?? false;
+            const type      = this._getDomElement('bdType')?.value || 'signal';
+
+            // collect converter rows
+            const converter = [];
+            this._getDomElement('bdConvBody')?.querySelectorAll('tr').forEach(tr => {
+                const inputs = tr.querySelectorAll('input');
+                if (inputs[0]?.value || inputs[1]?.value)
+                    converter.push({ condition: inputs[0]?.value || '', value: inputs[1]?.value || '' });
+            });
+
             if (uuid && key && signal) {
                 if (!this._bindings[uuid]) this._bindings[uuid] = {};
-                this._bindings[uuid][key] = { signal, formula, twoWay };
-                this._syncHost(); this._refreshBindRows();
+                this._bindings[uuid][key] = { signal, formula, twoWay, invert, type, writeBack, formulaWB, converter };
+                this._syncHost();
+                this._refreshBindRows();
+            } else if (uuid && key && !signal) {
+                this._clearBinding({ uuid, key });
             }
-            ov?.classList.remove('open'); this._bindTarget = null;
-        });
 
-        this._getDomElement('bdBrowse')?.addEventListener('click', async () => {
-            try {
-                const id = await iobrokerHandler.showSelectIdDialog?.();
-                if (id) { const inp = this._getDomElement('bdSig'); if (inp) inp.value = id; }
-            } catch (_) {}
+            ov?.classList.remove('open');
         });
     }
 
-    _openBindDlg(key, label) {
-        if (!this._selectedObj) { alert('Select a 3D object first.'); return; }
-        const uuid = this._selectedObj.uuid;
-        this._bindTarget = { uuid, key };
+    _openBindDialog({ uuid, key } = {}) {
+        if (!uuid || !key) return;
         const ex = this._bindings[uuid]?.[key];
-        const sigEl  = this._getDomElement('bdSig');
-        const frmEl  = this._getDomElement('bdForm');
-        const twEl   = this._getDomElement('bdTw');
-        const nmEl   = this._getDomElement('bdPropName');
-        if (sigEl)  sigEl.value  = ex?.signal  || '';
-        if (frmEl)  frmEl.value  = ex?.formula || 'val';
-        if (twEl)   twEl.checked = ex?.twoWay  || false;
-        if (nmEl)   nmEl.textContent = label + ' [' + (this._selectedObj.name || uuid.slice(0,8)) + ']';
-        this._getDomElement('bdOverlay')?.classList.add('open');
+
+        const getEl = id => this._getDomElement(id);
+        const label = this._BINDABLE.find(b => b.key === key)?.label || key;
+
+        getEl('bdPropLabel').textContent = label;
+        getEl('bdObj').value       = ex?.signal    || '';
+        getEl('bdFormula').value   = ex?.formula   || 'val';
+        getEl('bdFormulaWB').value = ex?.formulaWB || '';
+        getEl('bdWriteBack').value = ex?.writeBack || '';
+        getEl('bdTwoWay').checked  = ex?.twoWay    || false;
+        getEl('bdInvert').checked  = ex?.invert    || false;
+        if (getEl('bdType')) getEl('bdType').value = ex?.type || 'signal';
+
+        // fill converter
+        const tbody = getEl('bdConvBody');
+        if (tbody) {
+            tbody.innerHTML = '';
+            (ex?.converter || []).forEach(row => {
+                const tr = document.createElement('tr');
+                tr.innerHTML = `<td><input type="text" value="${row.condition || ''}"/></td><td><input type="text" value="${row.value || ''}"/></td>`;
+                tbody.appendChild(tr);
+            });
+        }
+
+        this._ctxTarget = { uuid, key };
+        getEl('bdOverlay')?.classList.add('open');
     }
 
     _syncHost() {

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -108,7 +108,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
           <div id="visibilityDock" title="Visibility" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
           </div>
 
-          <div id="effectsDock" title="Effects / Project" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
+          <div id="effectsDock" title="Projects" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
           </div>
 
           <div id="animationsDock" title="Animations" style="overflow: auto; width: 100%;" dock-spawn-dock-to="attributeDock">
@@ -313,7 +313,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
 
         setTimeout(makeSetup('visibilityDock', () => this._setupVisibilityPanel(), 'Visibility'), 1000);
         setTimeout(makeSetup('animationsDock', () => this._setupAnimationsPanel(), 'Animations'), 1200);
-        setTimeout(makeSetup('effectsDock', () => this._setupEffectsPanel(), 'Effects'), 1400);
+        setTimeout(makeSetup('effectsDock', () => this._setupEffectsPanel(), 'Projects'), 1400);
     }
     
     _setupVisibilityPanel() {

package/www/dist/frontend/config/IobrokerWebuiDynamicPropsEditor.js

@@ -0,0 +1,159 @@
+import { BasePropertyEditor } from "@gokturk413/web-component-designer";
+import { readDynamicDefs, dynamicPropertyTypes } from "../services/DynamicPropertiesHelper.js";
+
+const notAllowedChars = '!"§$%&/()=?`´-:.,;<>|\\\'#+*°^';
+
+// property grid editor for the 'dynamic-property-defs' attribute.
+// shows a button which opens a dialog to add/remove/edit dynamic properties (name, type, default)
+export class IobrokerWebuiDynamicPropsEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let btn = document.createElement('button');
+        btn.textContent = 'properties...';
+        btn.title = 'add/edit dynamic properties of this instance';
+        btn.style.width = '100%';
+        btn.onclick = () => this._openDialog();
+        this.element = btn;
+    }
+
+    refreshValue(valueType, value) { }
+
+    _openDialog() {
+        const designItem = this.designItems?.[0];
+        if (!designItem)
+            return;
+        const defs = readDynamicDefs(designItem.element).map(x => ({ ...x }));
+
+        const overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100000;display:flex;align-items:center;justify-content:center;';
+        const panel = document.createElement('div');
+        panel.style.cssText = 'background:#1e2d3d;color:#d0d8e0;border:1px solid #3e6db4;min-width:430px;max-width:600px;max-height:80vh;display:flex;flex-direction:column;font-size:12px;font-family:inherit;box-shadow:0 4px 24px rgba(0,0,0,0.6);';
+
+        const header = document.createElement('div');
+        header.textContent = 'dynamic properties';
+        header.style.cssText = 'padding:6px 10px;font-weight:bold;border-bottom:1px solid #3e6db4;color:#7c9cbf;';
+        panel.appendChild(header);
+
+        const headRow = document.createElement('div');
+        headRow.style.cssText = 'display:grid;grid-template-columns:1fr 90px 1fr 1fr 28px;gap:3px;padding:4px 10px 0 10px;color:#7c9cbf;';
+        for (const t of ['name', 'type', 'default', 'enum values', '']) {
+            const d = document.createElement('div');
+            d.textContent = t;
+            headRow.appendChild(d);
+        }
+        panel.appendChild(headRow);
+
+        const list = document.createElement('div');
+        list.style.cssText = 'display:flex;flex-direction:column;gap:3px;padding:4px 10px;overflow-y:auto;flex:1;';
+        panel.appendChild(list);
+
+        const renderRows = () => {
+            list.innerHTML = '';
+            defs.forEach((def, idx) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:grid;grid-template-columns:1fr 90px 1fr 1fr 28px;gap:3px;';
+
+                const nameInput = document.createElement('input');
+                nameInput.value = def.name ?? '';
+                nameInput.placeholder = 'propertyName';
+                nameInput.oninput = () => def.name = nameInput.value;
+                row.appendChild(nameInput);
+
+                const typeSelect = document.createElement('select');
+                for (const t of dynamicPropertyTypes) {
+                    const opt = document.createElement('option');
+                    opt.value = t;
+                    opt.textContent = t;
+                    if (def.type === t)
+                        opt.selected = true;
+                    typeSelect.appendChild(opt);
+                }
+                typeSelect.onchange = () => {
+                    def.type = typeSelect.value;
+                    valuesInput.style.visibility = def.type === 'enum' ? 'visible' : 'hidden';
+                };
+                row.appendChild(typeSelect);
+
+                const defInput = document.createElement('input');
+                defInput.value = def.default ?? '';
+                defInput.placeholder = 'default';
+                defInput.oninput = () => def.default = defInput.value;
+                row.appendChild(defInput);
+
+                const valuesInput = document.createElement('input');
+                valuesInput.value = def.values ? JSON.stringify(def.values) : '';
+                valuesInput.placeholder = '["a","b"]';
+                valuesInput.style.visibility = def.type === 'enum' ? 'visible' : 'hidden';
+                valuesInput.oninput = () => {
+                    try { def.values = JSON.parse(valuesInput.value); } catch { }
+                };
+                row.appendChild(valuesInput);
+
+                const delBtn = document.createElement('button');
+                delBtn.textContent = '✕';
+                delBtn.title = 'remove';
+                delBtn.onclick = () => {
+                    defs.splice(idx, 1);
+                    renderRows();
+                };
+                row.appendChild(delBtn);
+                list.appendChild(row);
+            });
+        };
+        renderRows();
+
+        const footer = document.createElement('div');
+        footer.style.cssText = 'display:flex;gap:4px;padding:8px 10px;border-top:1px solid #3e6db4;';
+        const addBtn = document.createElement('button');
+        addBtn.textContent = 'add...';
+        addBtn.onclick = () => {
+            defs.push({ name: '', type: 'string' });
+            renderRows();
+        };
+        const spacer = document.createElement('div');
+        spacer.style.flex = '1';
+        const okBtn = document.createElement('button');
+        okBtn.textContent = 'ok';
+        okBtn.style.minWidth = '60px';
+        okBtn.onclick = async () => {
+            const cleaned = [];
+            const usedNames = new Set();
+            for (const def of defs) {
+                let name = def.name ?? '';
+                for (const c of notAllowedChars)
+                    name = name.replaceAll(c, '');
+                name = name.replaceAll(' ', '');
+                if (!name)
+                    continue;
+                name = name[0].toLowerCase() + name.substring(1);
+                if (usedNames.has(name))
+                    continue;
+                usedNames.add(name);
+                const entry = { name, type: def.type ?? 'string' };
+                if (def.default != null && def.default !== '')
+                    entry.default = def.default;
+                if (def.type === 'enum' && def.values)
+                    entry.values = def.values;
+                cleaned.push(entry);
+            }
+            overlay.remove();
+            await this._valueChanged(cleaned.length ? JSON.stringify(cleaned) : null);
+        };
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = 'cancel';
+        cancelBtn.style.minWidth = '60px';
+        cancelBtn.onclick = () => overlay.remove();
+        footer.appendChild(addBtn);
+        footer.appendChild(spacer);
+        footer.appendChild(okBtn);
+        footer.appendChild(cancelBtn);
+        panel.appendChild(footer);
+
+        overlay.appendChild(panel);
+        overlay.onclick = e => {
+            if (e.target === overlay)
+                overlay.remove();
+        };
+        document.body.appendChild(overlay);
+    }
+}

package/www/dist/frontend/runtime/CustomControls.js

@@ -35,6 +35,7 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
     }
     async connectedCallback() {
         this._parseAttributesToProperties();
+        this._setupDynamicProperties();
         this._bindingsRefresh();
         this.#specialValueHandler = {
             valueProvider: (specialValueName) => {
@@ -106,6 +107,54 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
         cleanupAnimations(this.shadowRoot);
         cleanupEffects(this.shadowRoot);
     }
+    // defines accessors for the per-instance dynamic properties declared in the
+    // 'dynamic-property-defs' attribute: [ { "name": "kamran", "type": "string", "default": "x" }, ... ]
+    // so they behave like normal control properties (bindings refresh + changed events)
+    _setupDynamicProperties() {
+        let defs;
+        try {
+            const v = this.getAttribute('dynamic-property-defs');
+            if (!v)
+                return;
+            defs = JSON.parse(v);
+        }
+        catch (e) {
+            console.warn('invalid dynamic-property-defs attribute', e);
+            return;
+        }
+        if (!Array.isArray(defs))
+            return;
+        for (const def of defs) {
+            const name = def?.name;
+            if (!name)
+                continue;
+            if (!Object.getOwnPropertyDescriptor(this, name)) {
+                Object.defineProperty(this, name, {
+                    get() {
+                        return this['_' + name];
+                    },
+                    set(newValue) {
+                        if (this['_' + name] !== newValue && (!Number.isNaN(this['_' + name]) || !Number.isNaN(newValue))) {
+                            this['_' + name] = newValue;
+                            this._bindingsRefresh(name);
+                            this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
+                        }
+                    },
+                    enumerable: true,
+                    configurable: true,
+                });
+            }
+            const attr = this.getAttribute(PropertiesHelper.camelToDashCase(name));
+            let value = attr ?? def.default;
+            if (value != null) {
+                if (def.type === 'number')
+                    value = parseFloat(value);
+                else if (def.type === 'boolean')
+                    value = value === '' || value === true || value === 'true';
+                this['_' + name] = value;
+            }
+        }
+    }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];
         this.#eventListeners.push(arrayEl);

package/www/dist/frontend/services/DynamicPropertiesHelper.js

@@ -0,0 +1,75 @@
+import { PropertyType } from "@gokturk413/web-component-designer";
+import { iobrokerHandler } from "../common/IobrokerHandler.js";
+import { IobrokerWebuiSignalPropertyEditor } from "../config/IobrokerWebuiSignalPropertyEditor.js";
+import { IobrokerWebuiDynamicPropsEditor } from "../config/IobrokerWebuiDynamicPropsEditor.js";
+
+// attribute on the element instance holding the per-instance dynamic property definitions:
+// [ { "name": "kamran", "type": "string", "default": "abc", "values": [...] }, ... ]
+export const dynamicDefsAttributeName = 'dynamic-property-defs';
+
+export const dynamicPropertyTypes = ['string', 'number', 'boolean', 'color', 'date', 'signal', 'screen', 'enum'];
+
+export function readDynamicDefs(element) {
+    try {
+        const v = element.getAttribute(dynamicDefsAttributeName);
+        if (v) {
+            const parsed = JSON.parse(v);
+            if (Array.isArray(parsed))
+                return parsed.filter(x => x && x.name);
+        }
+    }
+    catch (e) {
+        console.warn('invalid ' + dynamicDefsAttributeName + ' attribute', e);
+    }
+    return [];
+}
+
+export function convertDynamicDefault(def) {
+    if (def.default == null || def.default === '')
+        return undefined;
+    if (def.type === 'number') {
+        const n = parseFloat(def.default);
+        return Number.isNaN(n) ? undefined : n;
+    }
+    if (def.type === 'boolean')
+        return def.default === true || def.default === 'true';
+    return def.default;
+}
+
+export async function createWebuiTypedProperty(name, prp, service) {
+    if (prp.type === 'color')
+        return { name, type: "color", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'number')
+        return { name, type: "number", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'boolean')
+        return { name, type: "boolean", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'date')
+        return { name, type: "date", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'enum')
+        return { name, type: "list", values: prp.values, service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'signal')
+        return { name, type: "signal", service, propertyType: PropertyType.propertyAndAttribute, createEditor: p => new IobrokerWebuiSignalPropertyEditor(p, window.appShell) };
+    if (prp.type === 'screen') {
+        const screens = await iobrokerHandler.getAllNames('screen');
+        return { name, type: "list", values: screens, service, propertyType: PropertyType.propertyAndAttribute };
+    }
+    return { name, type: "string", service, propertyType: PropertyType.propertyAndAttribute };
+}
+
+// builds the property grid entries for the dynamic properties of a design item:
+// one group 'dynamic' containing the defined properties + the defs editor button
+export async function buildDynamicPropertiesGroup(designItem, service) {
+    const defs = readDynamicDefs(designItem.element);
+    const properties = [];
+    for (const d of defs)
+        properties.push(await createWebuiTypedProperty(d.name, d, service));
+    properties.push({
+        name: 'dynamicPropertyDefs',
+        type: 'string',
+        attributeName: dynamicDefsAttributeName,
+        service,
+        propertyType: PropertyType.attribute,
+        createEditor: p => new IobrokerWebuiDynamicPropsEditor(p)
+    });
+    return { name: 'dynamic', description: 'instance dynamic properties', properties };
+}

package/www/dist/frontend/services/IobrokerWebuiLitPropertiesService.js

@@ -0,0 +1,53 @@
+import { Lit2PropertiesService, PropertiesHelper, PropertyType, RefreshMode } from "@gokturk413/web-component-designer";
+import { buildDynamicPropertiesGroup, createWebuiTypedProperty } from "./DynamicPropertiesHelper.js";
+
+// extended properties service for Lit (2/3) widgets:
+//  - supports Array & custom converter properties (edited as string/JSON) which Lit2PropertiesService skips
+//  - supports webui specific types via 'static webuiProperties' metadata on the widget class
+//    (e.g. static webuiProperties = { mySignal: { type: 'signal' }, myColor: { type: 'color' } })
+//  - supports per-instance dynamic properties via the 'dynamic-property-defs' attribute
+export class IobrokerWebuiLitPropertiesService extends Lit2PropertiesService {
+    name = "webuiLit";
+
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+
+    async getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        const ctor = designItem.element.constructor;
+        const meta = ctor.webuiProperties ?? {};
+        const properties = [];
+        const handled = new Set();
+        for (const [name, litProperty] of ctor.elementProperties.entries()) {
+            handled.add(name);
+            const m = meta[name];
+            if (m) {
+                properties.push(await createWebuiTypedProperty(name, m, this));
+                continue;
+            }
+            let type = litProperty?.type ?? litProperty;
+            if (type === String)
+                properties.push({ name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (type === Number)
+                properties.push({ name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (type === Boolean)
+                properties.push({ name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (type === Date)
+                properties.push({ name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (PropertiesHelper.isTypescriptEnum(type))
+                properties.push({ name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute });
+            else
+                // Array, Object and custom converters are edited as string (JSON)
+                properties.push({ name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute });
+        }
+        // webuiProperties entries which are no lit reactive properties
+        for (const name in meta) {
+            if (!handled.has(name))
+                properties.push(await createWebuiTypedProperty(name, meta[name], this));
+        }
+        properties.push(await buildDynamicPropertiesGroup(designItem, this));
+        return properties;
+    }
+}

package/www/dist/frontend/services/IobrokerWebuiPropertiesService.js

@@ -1,13 +1,18 @@
-import { BaseCustomWebComponentPropertiesService, PropertyType } from "@gokturk413/web-component-designer";
+import { BaseCustomWebComponentPropertiesService, PropertyType, RefreshMode } from "@gokturk413/web-component-designer";
 import { BaseCustomControl, webuiCustomControlSymbol } from "../runtime/CustomControls.js";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { ScreenViewer } from "../runtime/ScreenViewer.js";
 import { IobrokerWebuiSignalPropertyEditor } from "../config/IobrokerWebuiSignalPropertyEditor.js";
+import { buildDynamicPropertiesGroup } from "./DynamicPropertiesHelper.js";
 export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentPropertiesService {
     isHandledElement(designItem) {
         return designItem.element instanceof BaseCustomControl || designItem.element instanceof ScreenViewer;
         ;
     }
+    getRefreshMode(designItem) {
+        // dynamic properties can change with every value change (dynamic-property-defs attribute)
+        return RefreshMode.fullOnValueChange;
+    }
     async getProperties(designItem) {
         if (!this.isHandledElement(designItem))
             return null;
@@ -67,6 +72,7 @@ export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentProper
             for (const [groupName, groupProps] of groupMap) {
                 result.push({ name: groupName, description: '', properties: groupProps });
             }
+            result.push(await buildDynamicPropertiesGroup(designItem, this));
             return result;
         }
         else {