iobroker.mywebui 1.37.59 → 1.37.62

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.59",
+    "version": "1.37.60",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.59",
+  "version": "1.37.62",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

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

@@ -106,6 +106,12 @@ 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" 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">
+          </div>
+
           <div id="translationDock" title="Translations" style="overflow: hidden; width: 100%; height: 100%;" dock-spawn-dock-to="attributeDock">
             <iobroker-webui-translation-editor id="translationEditor"></iobroker-webui-translation-editor>
           </div>
@@ -282,30 +288,26 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         this._solutionExplorer.initialize(serviceContainer);
         this.propertyGrid.serviceContainer = serviceContainer;
         
-        // Setup Visibility Panel after DOM is fully ready - multiple retries
-        let retries = 0;
-        const setupPanel = () => {
-            try {
-                const visibilityDock = this._getDomElement('visibilityDock');
-                if (visibilityDock) {
-                    this._setupVisibilityPanel();
-                    console.log('✅ [Visibility] Panel setup completed after', retries, 'retries');
-                } else if (retries < 15) {
-                    retries++;
-                    setTimeout(setupPanel, 300);
-                } else {
-                    console.error('❌ [Visibility] Failed to find visibilityDock after 15 retries');
-                }
-            } catch (err) {
-                if (retries < 15) {
-                    retries++;
-                    setTimeout(setupPanel, 300);
-                } else {
-                    console.error('❌ [Visibility] Setup error:', err);
+        // Setup side panels after DOM is fully ready - with retries
+        const makeSetup = (dockId, setupFn, label) => {
+            let retries = 0;
+            const run = () => {
+                try {
+                    const dock = this._getDomElement(dockId);
+                    if (dock) { setupFn(); }
+                    else if (retries < 15) { retries++; setTimeout(run, 300); }
+                    else { console.error(`❌ [${label}] dock not found after 15 retries`); }
+                } catch (err) {
+                    if (retries < 15) { retries++; setTimeout(run, 300); }
+                    else { console.error(`❌ [${label}] setup error:`, err); }
                 }
-            }
+            };
+            return run;
         };
-        setTimeout(setupPanel, 1000);
+
+        setTimeout(makeSetup('visibilityDock', () => this._setupVisibilityPanel(), 'Visibility'), 1000);
+        setTimeout(makeSetup('animationsDock', () => this._setupAnimationsPanel(), 'Animations'), 1200);
+        setTimeout(makeSetup('effectsDock', () => this._setupEffectsPanel(), 'Effects'), 1400);
     }
     
     _setupVisibilityPanel() {
@@ -648,6 +650,508 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         actionDiv.appendChild(actionSelect);
         content.appendChild(actionDiv);
     }
+
+    // ─── Animations Panel ────────────────────────────────────────────────────
+
+    _setupAnimationsPanel() {
+        const dock = this._getDomElement('animationsDock');
+        if (!dock) return;
+        if (dock.querySelector('#anim-panel-container')) return;
+
+        const panel = document.createElement('div');
+        panel.id = 'anim-panel-container';
+        panel.style.cssText = 'padding:12px;';
+        panel.innerHTML = `
+            <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:bold;color:#333;">🎬 Animation</h3>
+            <div id="anim-panel-content" style="font-size:12px;"><p style="color:#999;font-style:italic;">Select an element...</p></div>
+        `;
+        dock.appendChild(panel);
+
+        let lastEl = null;
+        const poll = () => {
+            try {
+                const items = this.propertyGrid?.propertyGrid?._selectedItems;
+                const el = items?.length === 1 ? items[0].element : null;
+                if (el !== lastEl) { lastEl = el; this._updateAnimationsPanel(); }
+            } catch (e) {}
+        };
+        setInterval(poll, 500);
+    }
+
+    _updateAnimationsPanel() {
+        const dock = this._getDomElement('animationsDock');
+        if (!dock) return;
+        const content = dock.querySelector('#anim-panel-content');
+        if (!content) return;
+
+        const items = this.propertyGrid?.propertyGrid?._selectedItems;
+        if (!items || items.length !== 1) {
+            content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure animations...</p>';
+            return;
+        }
+
+        const designItem = items[0];
+        const element = designItem.element;
+
+        let cfg = {};
+        try { cfg = JSON.parse(element.getAttribute('data-animation') || '{}'); } catch (e) {}
+        const controls = cfg.controls || {};
+
+        const save = () => {
+            const newCfg = collectAnimCfg();
+            if (Object.keys(newCfg).length === 0 || (!newCfg.effect && !newCfg.controls)) {
+                designItem.removeAttribute('data-animation');
+            } else {
+                designItem.setAttribute('data-animation', JSON.stringify(newCfg));
+            }
+        };
+
+        const field = (label, inputEl) => {
+            const row = document.createElement('div');
+            row.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:6px;';
+            const lbl = document.createElement('span');
+            lbl.textContent = label;
+            lbl.style.cssText = 'min-width:90px;font-size:11px;color:#555;';
+            row.appendChild(lbl);
+            row.appendChild(inputEl);
+            return row;
+        };
+
+        const inp = (val, type = 'text', width = '100%') => {
+            const i = document.createElement('input');
+            i.type = type;
+            i.value = val ?? '';
+            i.style.cssText = `flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;width:${width};`;
+            i.onchange = save;
+            return i;
+        };
+
+        const sel = (options, val) => {
+            const s = document.createElement('select');
+            s.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+            options.forEach(([v, t]) => {
+                const o = document.createElement('option');
+                o.value = v; o.textContent = t; o.selected = v === val;
+                s.appendChild(o);
+            });
+            s.onchange = save;
+            return s;
+        };
+
+        const chk = (val, label) => {
+            const wrap = document.createElement('label');
+            wrap.style.cssText = 'display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer;';
+            const c = document.createElement('input');
+            c.type = 'checkbox'; c.checked = val === true || val === 'true';
+            c.onchange = save;
+            wrap.appendChild(c);
+            wrap.appendChild(document.createTextNode(label));
+            return wrap;
+        };
+
+        const oidRow = (label, ctrlKey, ctrlCfg) => {
+            const wrap = document.createElement('div');
+            wrap.style.cssText = 'border:1px solid #eee;border-radius:3px;padding:6px;margin-bottom:6px;background:#fafafa;';
+
+            const head = document.createElement('div');
+            head.style.cssText = 'font-size:11px;font-weight:600;color:#444;margin-bottom:5px;';
+            head.textContent = label;
+            wrap.appendChild(head);
+
+            const oidInp = document.createElement('input');
+            oidInp.type = 'text';
+            oidInp.value = ctrlCfg.oid || '';
+            oidInp.placeholder = 'OID…';
+            oidInp.style.cssText = 'width:100%;box-sizing:border-box;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;margin-bottom:3px;';
+            oidInp.onchange = save;
+
+            const pickBtn = document.createElement('button');
+            pickBtn.textContent = '…';
+            pickBtn.style.cssText = 'padding:2px 6px;font-size:11px;cursor:pointer;border:1px solid #aaa;border-radius:3px;margin-left:3px;';
+            pickBtn.onclick = async () => {
+                const picked = await openSelectIdDialog(document.body, { id: oidInp.value });
+                if (picked) { oidInp.value = picked; save(); }
+            };
+
+            const oidRow2 = document.createElement('div');
+            oidRow2.style.cssText = 'display:flex;margin-bottom:3px;';
+            oidRow2.appendChild(oidInp);
+            oidRow2.appendChild(pickBtn);
+            wrap.appendChild(oidRow2);
+
+            const condSel = sel([
+                ['equal','='], ['not_equal','≠'], ['less_than','<'], ['less_equal','≤'],
+                ['greater_than','>'], ['greater_equal','≥'], ['exists','exists']
+            ], ctrlCfg.condition || 'equal');
+            condSel.style.cssText += 'width:70px;flex:none;margin-right:4px;';
+            const valInp = document.createElement('input');
+            valInp.type = 'text'; valInp.value = ctrlCfg.value ?? 'true';
+            valInp.placeholder = 'value';
+            valInp.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+            condSel.onchange = save; valInp.onchange = save;
+
+            const condRow = document.createElement('div');
+            condRow.style.cssText = 'display:flex;gap:3px;';
+            condRow.appendChild(condSel); condRow.appendChild(valInp);
+            wrap.appendChild(condRow);
+
+            wrap._getCtrl = () => ({
+                oid: oidInp.value || undefined,
+                condition: condSel.value,
+                value: valInp.value
+            });
+            return wrap;
+        };
+
+        const effectSel = sel([
+            ['', '— none —'], ['opacity','Opacity'], ['rotation','Rotation'],
+            ['scale','Scale'], ['translate','Translate XY'],
+            ['translateX','Translate X'], ['translateY','Translate Y'],
+            ['skew','Skew'], ['fill','Fill Color'], ['transform','Transform (CSS)'],
+            ['svg','SVG Attribute'], ['morphSVG','MorphSVG'], ['motionPath','Motion Path']
+        ], cfg.effect || '');
+
+        const svgAttrSel = sel([
+            ['fill','fill'], ['color','color'], ['fill-opacity','fill-opacity'],
+            ['stroke-opacity','stroke-opacity'], ['stroke-width','stroke-width'],
+            ['stroke-dasharray','stroke-dasharray'], ['stroke-dashoffset','stroke-dashoffset'],
+            ['x','x'], ['y','y'], ['cx','cx'], ['cy','cy'],
+            ['r','r'], ['rx','rx'], ['ry','ry']
+        ], cfg.svgAttr || 'fill');
+
+        const easeSel = sel([
+            ['none','none'],['power1.in','power1.in'],['power1.out','power1.out'],
+            ['power1.inOut','power1.inOut'],['power2.in','power2.in'],['power2.out','power2.out'],
+            ['power2.inOut','power2.inOut'],['power3.inOut','power3.inOut'],
+            ['bounce.out','bounce.out'],['elastic.out(1,0.3)','elastic.out'],
+            ['back.inOut(1.7)','back.inOut'],['circ.inOut','circ.inOut'],
+            ['expo.inOut','expo.inOut'],['sine.inOut','sine.inOut']
+        ], cfg.ease || 'power1.inOut');
+
+        const valueFromInp = inp(cfg.valueFrom, 'text');
+        const valueToInp = inp(cfg.valueTo, 'text');
+        const durationInp = inp(cfg.duration ?? 1, 'number');
+        const repeatInp = inp(cfg.repeat ?? 0, 'number');
+        const yoyoChk = chk(cfg.yoyo, 'yoyo');
+        const originXInp = inp(cfg.transformOriginX ?? '50', 'number');
+        const originYInp = inp(cfg.transformOriginY ?? '50', 'number');
+        const fillFromInp = inp(cfg.fillColorFrom || '#000000', 'color');
+        const fillToInp = inp(cfg.fillColorTo || '#ff0000', 'color');
+        const pathIdInp = inp(cfg.pathId, 'text');
+        const alignToPathChk = chk(cfg.alignToPath, 'align to path');
+        const orientToPathChk = chk(cfg.orientToPath, 'auto-rotate');
+
+        const playCtrl = oidRow('▶ Play', 'play', controls.play || {});
+        const pauseCtrl = oidRow('⏸ Pause', 'pause', controls.pause || {});
+        const resumeCtrl = oidRow('▶ Resume', 'resume', controls.resume || {});
+        const stopCtrl = oidRow('⏹ Stop', 'stop', controls.stop || {});
+        const reverseCtrl = oidRow('◀ Reverse', 'reverse', controls.reverse || {});
+
+        const collectAnimCfg = () => {
+            const e = effectSel.value;
+            const c = {};
+            const addCtrl = (key, row) => {
+                const v = row._getCtrl();
+                if (v.oid) c[key] = v;
+            };
+            addCtrl('play', playCtrl); addCtrl('pause', pauseCtrl);
+            addCtrl('resume', resumeCtrl); addCtrl('stop', stopCtrl);
+            addCtrl('reverse', reverseCtrl);
+
+            const out = {};
+            if (e) out.effect = e;
+            if (e === 'svg' && svgAttrSel.value) out.svgAttr = svgAttrSel.value;
+            if (valueFromInp.value) out.valueFrom = valueFromInp.value;
+            if (valueToInp.value) out.valueTo = valueToInp.value;
+            out.duration = parseFloat(durationInp.value) || 1;
+            out.ease = easeSel.value || 'power1.inOut';
+            out.repeat = parseInt(repeatInp.value) || 0;
+            if (yoyoChk.querySelector('input').checked) out.yoyo = true;
+            if (['rotation','scale'].includes(e)) {
+                out.transformOriginX = originXInp.value;
+                out.transformOriginY = originYInp.value;
+            }
+            if (e === 'fill' || e === 'svg') {
+                if (fillFromInp.value) out.fillColorFrom = fillFromInp.value;
+                if (fillToInp.value) out.fillColorTo = fillToInp.value;
+            }
+            if (e === 'motionPath') {
+                if (pathIdInp.value) out.pathId = pathIdInp.value;
+                if (alignToPathChk.querySelector('input').checked) out.alignToPath = true;
+                if (orientToPathChk.querySelector('input').checked) out.orientToPath = true;
+            }
+            if (Object.keys(c).length) out.controls = c;
+            return out;
+        };
+
+        // Build UI
+        content.innerHTML = '';
+
+        // Clear button
+        const clearBtn = document.createElement('button');
+        clearBtn.textContent = 'Clear Animation';
+        clearBtn.style.cssText = 'float:right;font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #ccc;border-radius:3px;background:#fff;margin-bottom:8px;';
+        clearBtn.onclick = () => { designItem.removeAttribute('data-animation'); this._updateAnimationsPanel(); };
+        content.appendChild(clearBtn);
+
+        const sec = (title) => {
+            const d = document.createElement('div');
+            d.style.cssText = 'font-size:11px;font-weight:700;color:#555;margin:10px 0 5px;padding-top:8px;border-top:1px solid #eee;';
+            d.textContent = title;
+            return d;
+        };
+
+        content.appendChild(sec('Effect'));
+        content.appendChild(field('Type', effectSel));
+
+        const svgAttrRow = field('SVG Attr', svgAttrSel);
+        svgAttrRow.style.display = cfg.effect === 'svg' ? '' : 'none';
+        content.appendChild(svgAttrRow);
+        effectSel.addEventListener('change', () => {
+            svgAttrRow.style.display = effectSel.value === 'svg' ? '' : 'none';
+        });
+
+        content.appendChild(field('Value From', valueFromInp));
+        content.appendChild(field('Value To', valueToInp));
+
+        const colorRows = document.createElement('div');
+        colorRows.style.display = (cfg.effect === 'fill' || cfg.effect === 'svg') ? '' : 'none';
+        colorRows.appendChild(field('Color From', fillFromInp));
+        colorRows.appendChild(field('Color To', fillToInp));
+        content.appendChild(colorRows);
+        effectSel.addEventListener('change', () => {
+            colorRows.style.display = (effectSel.value === 'fill' || effectSel.value === 'svg') ? '' : 'none';
+        });
+
+        const motionRows = document.createElement('div');
+        motionRows.style.display = cfg.effect === 'motionPath' ? '' : 'none';
+        motionRows.appendChild(field('Path ID', pathIdInp));
+        motionRows.appendChild(alignToPathChk);
+        motionRows.appendChild(orientToPathChk);
+        content.appendChild(motionRows);
+        effectSel.addEventListener('change', () => {
+            motionRows.style.display = effectSel.value === 'motionPath' ? '' : 'none';
+        });
+
+        content.appendChild(sec('Timing'));
+        content.appendChild(field('Duration (s)', durationInp));
+        content.appendChild(field('Ease', easeSel));
+        content.appendChild(field('Repeat', repeatInp));
+        content.appendChild(yoyoChk);
+
+        const originRows = document.createElement('div');
+        originRows.style.display = (cfg.effect === 'rotation' || cfg.effect === 'scale') ? '' : 'none';
+        originRows.appendChild(sec('Transform Origin'));
+        originRows.appendChild(field('Origin X (%)', originXInp));
+        originRows.appendChild(field('Origin Y (%)', originYInp));
+        content.appendChild(originRows);
+        effectSel.addEventListener('change', () => {
+            originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none';
+        });
+
+        content.appendChild(sec('Controls (OID bindings)'));
+        content.appendChild(playCtrl);
+        content.appendChild(pauseCtrl);
+        content.appendChild(resumeCtrl);
+        content.appendChild(stopCtrl);
+        content.appendChild(reverseCtrl);
+    }
+
+    // ─── Effects Panel ───────────────────────────────────────────────────────
+
+    _setupEffectsPanel() {
+        const dock = this._getDomElement('effectsDock');
+        if (!dock) return;
+        if (dock.querySelector('#effects-panel-container')) return;
+
+        const panel = document.createElement('div');
+        panel.id = 'effects-panel-container';
+        panel.style.cssText = 'padding:12px;';
+        panel.innerHTML = `
+            <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:bold;color:#333;">✨ Effect</h3>
+            <div id="effects-panel-content" style="font-size:12px;"><p style="color:#999;font-style:italic;">Select an element...</p></div>
+        `;
+        dock.appendChild(panel);
+
+        let lastEl = null;
+        const poll = () => {
+            try {
+                const items = this.propertyGrid?.propertyGrid?._selectedItems;
+                const el = items?.length === 1 ? items[0].element : null;
+                if (el !== lastEl) { lastEl = el; this._updateEffectsPanel(); }
+            } catch (e) {}
+        };
+        setInterval(poll, 500);
+    }
+
+    _updateEffectsPanel() {
+        const dock = this._getDomElement('effectsDock');
+        if (!dock) return;
+        const content = dock.querySelector('#effects-panel-content');
+        if (!content) return;
+
+        const items = this.propertyGrid?.propertyGrid?._selectedItems;
+        if (!items || items.length !== 1) {
+            content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure effects...</p>';
+            return;
+        }
+
+        const designItem = items[0];
+        const element = designItem.element;
+
+        let cfg = {};
+        try { cfg = JSON.parse(element.getAttribute('data-effects') || '{}'); } catch (e) {}
+
+        const save = () => {
+            const c = collectEffectsCfg();
+            if (!c.type) designItem.removeAttribute('data-effects');
+            else designItem.setAttribute('data-effects', JSON.stringify(c));
+        };
+
+        const field = (label, inputEl) => {
+            const row = document.createElement('div');
+            row.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:6px;';
+            const lbl = document.createElement('span');
+            lbl.textContent = label;
+            lbl.style.cssText = 'min-width:80px;font-size:11px;color:#555;';
+            row.appendChild(lbl); row.appendChild(inputEl);
+            return row;
+        };
+
+        const inp = (val, type = 'text') => {
+            const i = document.createElement('input');
+            i.type = type; i.value = val ?? '';
+            i.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+            i.onchange = save; return i;
+        };
+
+        const sel = (options, val) => {
+            const s = document.createElement('select');
+            s.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
+            options.forEach(([v, t]) => {
+                const o = document.createElement('option');
+                o.value = v; o.textContent = t; o.selected = v === val;
+                s.appendChild(o);
+            });
+            s.onchange = save; return s;
+        };
+
+        const typeSel = sel([
+            ['','— none —'],['fadeIn','Fade In'],['fadeOut','Fade Out'],
+            ['slideInLeft','Slide In Left'],['slideInRight','Slide In Right'],
+            ['slideInTop','Slide In Top'],['slideInBottom','Slide In Bottom'],
+            ['bounce','Bounce'],['pulse','Pulse'],['shake','Shake'],
+            ['glow','Glow'],['blur','Blur'],['spin','Spin'],['flip','Flip 3D']
+        ], cfg.type || '');
+
+        const triggerSel = sel([
+            ['load','On Load'],['hover','On Hover'],['click','On Click'],['oid','OID State']
+        ], cfg.trigger || 'load');
+
+        const durationInp = inp(cfg.duration ?? 0.5, 'number');
+        const delayInp = inp(cfg.delay ?? 0, 'number');
+        const repeatInp = inp(cfg.repeat ?? 0, 'number');
+
+        const easeSel = sel([
+            ['power2.out','power2.out'],['power2.in','power2.in'],['power2.inOut','power2.inOut'],
+            ['power1.inOut','power1.inOut'],['bounce.out','bounce.out'],
+            ['elastic.out(1,0.3)','elastic.out'],['back.inOut(1.7)','back.inOut'],
+            ['none','none']
+        ], cfg.ease || 'power2.out');
+
+        const oidInp = inp(cfg.oid || '');
+        const condSel = sel([
+            ['equal','='],['not_equal','≠'],['less_than','<'],['greater_than','>'],['exists','exists']
+        ], cfg.condition || 'equal');
+        const condValInp = inp(cfg.conditionValue ?? 'true');
+
+        const glowColorInp = inp(cfg.glowColor || 'yellow', 'color');
+        const glowSizeInp = inp(cfg.glowSize || 10, 'number');
+        const blurInp = inp(cfg.blurAmount || 5, 'number');
+
+        const oidPickBtn = document.createElement('button');
+        oidPickBtn.textContent = '…';
+        oidPickBtn.style.cssText = 'padding:2px 6px;font-size:11px;cursor:pointer;border:1px solid #aaa;border-radius:3px;';
+        oidPickBtn.onclick = async () => {
+            const picked = await openSelectIdDialog(document.body, { id: oidInp.value });
+            if (picked) { oidInp.value = picked; save(); }
+        };
+
+        const collectEffectsCfg = () => {
+            const out = {};
+            if (typeSel.value) out.type = typeSel.value;
+            out.trigger = triggerSel.value || 'load';
+            out.duration = parseFloat(durationInp.value) || 0.5;
+            if (parseFloat(delayInp.value)) out.delay = parseFloat(delayInp.value);
+            if (parseInt(repeatInp.value)) out.repeat = parseInt(repeatInp.value);
+            out.ease = easeSel.value || 'power2.out';
+            if (triggerSel.value === 'oid' && oidInp.value) {
+                out.oid = oidInp.value;
+                out.condition = condSel.value;
+                out.conditionValue = condValInp.value;
+            }
+            if (typeSel.value === 'glow') {
+                out.glowColor = glowColorInp.value;
+                out.glowSize = parseInt(glowSizeInp.value) || 10;
+            }
+            if (typeSel.value === 'blur') out.blurAmount = parseInt(blurInp.value) || 5;
+            return out;
+        };
+
+        content.innerHTML = '';
+
+        const clearBtn = document.createElement('button');
+        clearBtn.textContent = 'Clear Effect';
+        clearBtn.style.cssText = 'float:right;font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #ccc;border-radius:3px;background:#fff;margin-bottom:8px;';
+        clearBtn.onclick = () => { designItem.removeAttribute('data-effects'); this._updateEffectsPanel(); };
+        content.appendChild(clearBtn);
+
+        content.appendChild(field('Type', typeSel));
+        content.appendChild(field('Trigger', triggerSel));
+        content.appendChild(field('Duration (s)', durationInp));
+        content.appendChild(field('Delay (s)', delayInp));
+        content.appendChild(field('Repeat', repeatInp));
+        content.appendChild(field('Ease', easeSel));
+
+        const oidSection = document.createElement('div');
+        oidSection.style.display = cfg.trigger === 'oid' ? '' : 'none';
+        const oidRow = document.createElement('div');
+        oidRow.style.cssText = 'display:flex;gap:3px;margin-bottom:6px;';
+        oidRow.appendChild(oidInp); oidRow.appendChild(oidPickBtn);
+        oidSection.appendChild(field('OID', document.createElement('span')));
+        oidSection.lastChild.remove();
+        const oidLabel = document.createElement('div');
+        oidLabel.style.cssText = 'font-size:11px;font-weight:600;color:#555;margin-bottom:3px;';
+        oidLabel.textContent = 'OID';
+        oidSection.appendChild(oidLabel);
+        oidSection.appendChild(oidRow);
+        const condRow = document.createElement('div');
+        condRow.style.cssText = 'display:flex;gap:3px;margin-bottom:6px;';
+        condRow.appendChild(condSel); condRow.appendChild(condValInp);
+        oidSection.appendChild(condRow);
+        content.appendChild(oidSection);
+        triggerSel.addEventListener('change', () => {
+            oidSection.style.display = triggerSel.value === 'oid' ? '' : 'none';
+        });
+
+        const glowSection = document.createElement('div');
+        glowSection.style.display = cfg.type === 'glow' ? '' : 'none';
+        glowSection.appendChild(field('Glow Color', glowColorInp));
+        glowSection.appendChild(field('Glow Size (px)', glowSizeInp));
+        content.appendChild(glowSection);
+        typeSel.addEventListener('change', () => {
+            glowSection.style.display = typeSel.value === 'glow' ? '' : 'none';
+        });
+
+        const blurSection = document.createElement('div');
+        blurSection.style.display = cfg.type === 'blur' ? '' : 'none';
+        blurSection.appendChild(field('Blur (px)', blurInp));
+        content.appendChild(blurSection);
+        typeSel.addEventListener('change', () => {
+            blurSection.style.display = typeSel.value === 'blur' ? '' : 'none';
+        });
+    }
+
     /* Move to a Dock Spawn Helper */
     activateDockById(name) {
         this.activateDock(this._getDomElement(name));