iobroker.mywebui 1.37.68 → 1.37.70

package/io-package.json

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

package/package.json

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

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

@@ -760,85 +760,32 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         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 collectAnimCfg = () => {
-            const e = effectSel.value;
-            const c = {};
-            const addCtrl = (key, row) => { const v = row._getCtrl(); if (v.oid || v.oid_bind) 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;
-            // Preserve all _bind properties from cfg
-            for (const [k, v] of Object.entries(cfg)) {
-                if (k.endsWith('_bind') && v) out[k] = v;
-            }
-            return out;
-        };
-
-        const save = () => {
-            const newCfg = collectAnimCfg();
-            if (!newCfg.effect && !newCfg.controls && !Object.keys(newCfg).some(k => k.endsWith('_bind'))) {
-                designItem.removeAttribute('data-animation');
-            } else {
-                designItem.setAttribute('data-animation', JSON.stringify(newCfg));
-            }
+        // Support both single object (legacy) and array
+        let cfgList = [];
+        try {
+            const raw = JSON.parse(element.getAttribute('data-animation') || '[]');
+            cfgList = Array.isArray(raw) ? raw : [raw];
+        } catch (e) {}
+
+        const saveAll = () => {
+            const result = cfgList.filter(c => c._collect && (c._collect().effect || Object.keys(c._collect()).some(k => k.endsWith('_bind'))));
+            const data = result.map(c => c._collect());
+            if (data.length === 0) designItem.removeAttribute('data-animation');
+            else if (data.length === 1) designItem.setAttribute('data-animation', JSON.stringify(data[0]));
+            else designItem.setAttribute('data-animation', JSON.stringify(data));
         };
+        const saveAndRefresh = () => { saveAll(); this._updateAnimationsPanel(); };
 
-        const saveAndRefresh = () => { save(); this._updateAnimationsPanel(); };
+        // ── Shared helpers ────────────────────────────────────────────────────
 
-        // field(label, propKey, inputEl) — propKey=null → no binding square
-        const field = (label, propKey, inputEl) => {
-            const row = document.createElement('div');
-            row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
-            if (propKey) {
-                row.appendChild(this._makeBindSquare(propKey, cfg, designItem, 'data-animation', saveAndRefresh));
-            } else {
-                const sp = document.createElement('div');
-                sp.style.cssText = 'width:11px;min-width:11px;flex-shrink:0;';
-                row.appendChild(sp);
-            }
-            const lbl = document.createElement('span');
-            lbl.textContent = label;
-            lbl.style.cssText = 'min-width:84px;font-size:11px;color:#555;';
-            row.appendChild(lbl);
-            row.appendChild(inputEl);
-            return row;
-        };
-
-        const inp = (val, type = 'text') => {
+        const mkInp = (val, type, onchange) => {
             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;
+            i.onchange = onchange; return i;
         };
 
-        const sel = (options, val) => {
+        const mkSel = (options, val, onchange) => {
             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]) => {
@@ -846,54 +793,60 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 o.value = v; o.textContent = t; o.selected = v === val;
                 s.appendChild(o);
             });
-            s.onchange = save; return s;
+            s.onchange = onchange; return s;
         };
 
-        const chkField = (propKey, label, val) => {
+        const mkField = (label, propKey, inputEl, cfg) => {
+            const row = document.createElement('div');
+            row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
+            if (propKey) {
+                row.appendChild(this._makeBindSquare(propKey, cfg, designItem, 'data-animation', saveAndRefresh));
+            } else {
+                const sp = document.createElement('div'); sp.style.cssText = 'width:11px;min-width:11px;flex-shrink:0;';
+                row.appendChild(sp);
+            }
+            const lbl = document.createElement('span');
+            lbl.textContent = label; lbl.style.cssText = 'min-width:84px;font-size:11px;color:#555;';
+            row.appendChild(lbl); row.appendChild(inputEl);
+            return row;
+        };
+
+        const mkChkField = (propKey, label, val, cfg, onchange) => {
             const row = document.createElement('div');
             row.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:6px;';
             row.appendChild(this._makeBindSquare(propKey, cfg, designItem, 'data-animation', saveAndRefresh));
             const lbl = document.createElement('label');
             lbl.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;
-            lbl.appendChild(c);
-            lbl.appendChild(document.createTextNode(label));
+            c.type = 'checkbox'; c.checked = val === true || val === 'true'; c.onchange = onchange;
+            lbl.appendChild(c); lbl.appendChild(document.createTextNode(label));
             row.appendChild(lbl);
+            row._checked = () => c.checked;
             return row;
         };
 
-        const oidRow = (label, ctrlCfg) => {
+        const mkOidRow = (label, ctrlCfg, onchange) => {
             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 = 'display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#444;margin-bottom:5px;';
             head.appendChild(this._makeBindSquare('oid', ctrlCfg, designItem, 'data-animation', saveAndRefresh));
-            const headText = document.createElement('span');
-            headText.textContent = label;
-            head.appendChild(headText);
-            wrap.appendChild(head);
-            const condSel = sel([
+            const headText = document.createElement('span'); headText.textContent = label;
+            head.appendChild(headText); wrap.appendChild(head);
+            const condSel = mkSel([
                 ['equal','='],['not_equal','≠'],['less_than','<'],['less_equal','≤'],
                 ['greater_than','>'],['greater_equal','≥'],['exists','exists']
-            ], ctrlCfg.condition || 'equal');
+            ], ctrlCfg.condition || 'equal', onchange);
             condSel.style.cssText += 'flex:1;';
-            condSel.onchange = save;
             const condRow = document.createElement('div');
             condRow.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:4px;';
             condRow.appendChild(this._makeBindSquare('condition', ctrlCfg, designItem, 'data-animation', saveAndRefresh));
-            condRow.appendChild(condSel);
-            wrap.appendChild(condRow);
-            const valInp = document.createElement('input');
-            valInp.type = 'text'; valInp.value = ctrlCfg.value ?? 'true';
-            valInp.style.cssText = 'flex:1;padding:3px 5px;font-size:11px;border:1px solid #ccc;border-radius:3px;';
-            valInp.onchange = save;
+            condRow.appendChild(condSel); wrap.appendChild(condRow);
+            const valInp = mkInp(ctrlCfg.value ?? 'true', 'text', onchange);
             const valRow = document.createElement('div');
             valRow.style.cssText = 'display:flex;align-items:center;gap:4px;';
             valRow.appendChild(this._makeBindSquare('value', ctrlCfg, designItem, 'data-animation', saveAndRefresh));
-            valRow.appendChild(valInp);
-            wrap.appendChild(valRow);
+            valRow.appendChild(valInp); wrap.appendChild(valRow);
             wrap._getCtrl = () => {
                 const v = { condition: condSel.value, value: valInp.value };
                 if (ctrlCfg.oid_bind) v.oid_bind = ctrlCfg.oid_bind;
@@ -904,112 +857,198 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             return wrap;
         };
 
-        const effectSel = sel([
-            ['','— none —'],['opacity','Opacity'],['rotation','Rotation'],['scale','Scale'],
-            ['translateX','Move X (relative)'],['translateY','Move Y (relative)'],['translate','Move XY (relative)'],
-            ['left','Move Left (absolute)'],['top','Move Top (absolute)'],
-            ['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');
+        // ── Build one animation block ─────────────────────────────────────────
+
+        const buildAnimBlock = (cfg, index) => {
+            const save = saveAll;
+            const controls = cfg.controls || {};
+
+            const block = document.createElement('div');
+            block.style.cssText = 'border:2px solid #c8d6e0;border-radius:5px;padding:8px;margin-bottom:10px;background:#f7fafc;';
+
+            // Header: "Animation #N" + delete button
+            const hdr = document.createElement('div');
+            hdr.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;';
+            const hdrTitle = document.createElement('span');
+            hdrTitle.textContent = `Animation #${index + 1}`;
+            hdrTitle.style.cssText = 'font-size:12px;font-weight:700;color:#3a6a8a;';
+            const delBtn = document.createElement('button');
+            delBtn.textContent = '✕ Remove';
+            delBtn.style.cssText = 'font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #c66;border-radius:3px;background:#fff;color:#c33;';
+            delBtn.onclick = () => { cfgList.splice(index, 1); saveAndRefresh(); };
+            hdr.appendChild(hdrTitle); hdr.appendChild(delBtn);
+            block.appendChild(hdr);
+
+            const sec = (title) => {
+                const d = document.createElement('div');
+                d.style.cssText = 'font-size:11px;font-weight:700;color:#555;margin:8px 0 4px;padding-top:6px;border-top:1px solid #dde;clear:both;';
+                d.textContent = title; return d;
+            };
 
-        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 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 yoyoChk        = chkField('yoyo', 'Yoyo', cfg.yoyo);
-        const alignToPathChk = chkField('alignToPath', 'Align to path', cfg.alignToPath);
-        const orientToPathChk= chkField('orientToPath', 'Auto-rotate', cfg.orientToPath);
-
-        const playCtrl    = oidRow('▶ Play',     controls.play    || {});
-        const pauseCtrl   = oidRow('⏸ Pause',    controls.pause   || {});
-        const resumeCtrl  = oidRow('▶ Resume',   controls.resume  || {});
-        const stopCtrl    = oidRow('⏹ Stop',     controls.stop    || {});
-        const reverseCtrl = oidRow('◀ Reverse',  controls.reverse || {});
+            const effectSel = mkSel([
+                ['','— none —'],['opacity','Opacity'],['rotation','Rotation'],['scale','Scale'],
+                ['translateX','Move X (relative)'],['translateY','Move Y (relative)'],['translate','Move XY (relative)'],
+                ['left','Move Left (absolute)'],['top','Move Top (absolute)'],
+                ['skew','Skew'],['fill','Fill Color'],['transform','Transform (CSS)'],
+                ['svg','SVG Attribute'],['morphSVG','MorphSVG'],['motionPath','Motion Path']
+            ], cfg.effect || '', save);
+
+            const svgAttrSel = mkSel([
+                ['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', save);
+
+            const easeSel = mkSel([
+                ['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', save);
+
+            const valueFromInp  = mkInp(cfg.valueFrom, 'text', save);
+            const valueToInp    = mkInp(cfg.valueTo, 'text', save);
+            const durationInp   = mkInp(cfg.duration ?? 1, 'number', save);
+            const repeatInp     = mkInp(cfg.repeat ?? 0, 'number', save);
+            const originXInp    = mkInp(cfg.transformOriginX ?? '50', 'number', save);
+            const originYInp    = mkInp(cfg.transformOriginY ?? '50', 'number', save);
+            const fillFromInp   = mkInp(cfg.fillColorFrom || '#000000', 'color', save);
+            const fillToInp     = mkInp(cfg.fillColorTo || '#ff0000', 'color', save);
+            const pathIdInp     = mkInp(cfg.pathId, 'text', save);
+
+            const yoyoChk        = mkChkField('yoyo', 'Yoyo', cfg.yoyo, cfg, save);
+            const alignToPathChk = mkChkField('alignToPath', 'Align to path', cfg.alignToPath, cfg, save);
+            const orientToPathChk= mkChkField('orientToPath', 'Auto-rotate', cfg.orientToPath, cfg, save);
+
+            const playCtrl    = mkOidRow('▶ Play',    controls.play    || {}, save);
+            const pauseCtrl   = mkOidRow('⏸ Pause',   controls.pause   || {}, save);
+            const resumeCtrl  = mkOidRow('▶ Resume',  controls.resume  || {}, save);
+            const stopCtrl    = mkOidRow('⏹ Stop',    controls.stop    || {}, save);
+            const reverseCtrl = mkOidRow('◀ Reverse', controls.reverse || {}, save);
+
+            // _collect: reads all UI values back into a config object
+            cfg._collect = () => {
+                const e = effectSel.value;
+                const c = {};
+                const addCtrl = (key, row) => { const v = row._getCtrl(); if (v.oid || v.oid_bind) 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._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._checked()) out.alignToPath = true;
+                    if (orientToPathChk._checked()) out.orientToPath = true;
+                }
+                if (Object.keys(c).length) out.controls = c;
+                for (const [k, v] of Object.entries(cfg)) {
+                    if (k.endsWith('_bind') && v) out[k] = v;
+                }
+                return out;
+            };
 
-        // ── Build UI ──────────────────────────────────────────────────────────
+            // Build block DOM
+            block.appendChild(sec('Effect'));
+            block.appendChild(mkField('Type', 'effect', effectSel, cfg));
+
+            const svgAttrRow = mkField('SVG Attr', 'svgAttr', svgAttrSel, cfg);
+            svgAttrRow.style.display = cfg.effect === 'svg' ? '' : 'none';
+            block.appendChild(svgAttrRow);
+            effectSel.addEventListener('change', () => { svgAttrRow.style.display = effectSel.value === 'svg' ? '' : 'none'; });
+
+            block.appendChild(mkField('Value From', 'valueFrom', valueFromInp, cfg));
+            block.appendChild(mkField('Value To', 'valueTo', valueToInp, cfg));
+
+            const colorRows = document.createElement('div');
+            colorRows.style.display = (cfg.effect === 'fill' || cfg.effect === 'svg') ? '' : 'none';
+            colorRows.appendChild(mkField('Color From', 'fillColorFrom', fillFromInp, cfg));
+            colorRows.appendChild(mkField('Color To', 'fillColorTo', fillToInp, cfg));
+            block.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(mkField('Path ID', 'pathId', pathIdInp, cfg));
+            motionRows.appendChild(alignToPathChk);
+            motionRows.appendChild(orientToPathChk);
+            block.appendChild(motionRows);
+            effectSel.addEventListener('change', () => { motionRows.style.display = effectSel.value === 'motionPath' ? '' : 'none'; });
+
+            block.appendChild(sec('Timing'));
+            block.appendChild(mkField('Duration (s)', 'duration', durationInp, cfg));
+            block.appendChild(mkField('Ease', 'ease', easeSel, cfg));
+            block.appendChild(mkField('Repeat', 'repeat', repeatInp, cfg));
+            block.appendChild(yoyoChk);
+
+            const originRows = document.createElement('div');
+            originRows.style.display = (cfg.effect === 'rotation' || cfg.effect === 'scale') ? '' : 'none';
+            originRows.appendChild(sec('Transform Origin'));
+            originRows.appendChild(mkField('Origin X (%)', 'transformOriginX', originXInp, cfg));
+            originRows.appendChild(mkField('Origin Y (%)', 'transformOriginY', originYInp, cfg));
+            block.appendChild(originRows);
+            effectSel.addEventListener('change', () => { originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none'; });
+
+            block.appendChild(sec('Controls (OID triggers)'));
+            block.appendChild(playCtrl); block.appendChild(pauseCtrl);
+            block.appendChild(resumeCtrl); block.appendChild(stopCtrl);
+            block.appendChild(reverseCtrl);
+
+            return block;
+        };
+
+        // ── Render ────────────────────────────────────────────────────────────
         content.innerHTML = '';
 
-        const clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear';
-        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 clearAllBtn = document.createElement('button');
+        clearAllBtn.textContent = 'Clear All';
+        clearAllBtn.style.cssText = 'float:right;font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #ccc;border-radius:3px;background:#fff;margin-bottom:8px;';
+        clearAllBtn.onclick = () => { designItem.removeAttribute('data-animation'); this._updateAnimationsPanel(); };
+        content.appendChild(clearAllBtn);
+
+        if (cfgList.length === 0) {
+            const hint = document.createElement('p');
+            hint.style.cssText = 'color:#999;font-style:italic;font-size:11px;';
+            hint.textContent = 'No animations. Click "+ Add Animation" to start.';
+            content.appendChild(hint);
+        }
 
-        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;clear:both;';
-            d.textContent = title;
-            return d;
+        cfgList.forEach((cfg, i) => content.appendChild(buildAnimBlock(cfg, i)));
+
+        const addBtn = document.createElement('button');
+        addBtn.textContent = '+ Add Animation';
+        addBtn.style.cssText = 'width:100%;margin-top:6px;padding:5px;font-size:12px;cursor:pointer;border:1px solid #5a9;border-radius:4px;background:#e8f8f0;color:#2a7a5a;font-weight:600;';
+        addBtn.onclick = () => {
+            // Collect currently valid animations from UI
+            const existing = cfgList
+                .filter(c => c._collect)
+                .map(c => c._collect())
+                .filter(c => c.effect || Object.keys(c).some(k => k.endsWith('_bind')));
+            // Add new empty animation with a default effect so it survives save/reload
+            existing.push({ effect: 'opacity', duration: 1, ease: 'power1.inOut', repeat: 0 });
+            const val = existing.length === 1 ? existing[0] : existing;
+            designItem.setAttribute('data-animation', JSON.stringify(val));
+            this._updateAnimationsPanel();
         };
-
-        content.appendChild(sec('Effect'));
-        content.appendChild(field('Type', 'effect', effectSel));
-
-        const svgAttrRow = field('SVG Attr', 'svgAttr', 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', 'valueFrom', valueFromInp));
-        content.appendChild(field('Value To', 'valueTo', valueToInp));
-
-        const colorRows = document.createElement('div');
-        colorRows.style.display = (cfg.effect === 'fill' || cfg.effect === 'svg') ? '' : 'none';
-        colorRows.appendChild(field('Color From', 'fillColorFrom', fillFromInp));
-        colorRows.appendChild(field('Color To', 'fillColorTo', 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', 'pathId', 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)', 'duration', durationInp));
-        content.appendChild(field('Ease', 'ease', easeSel));
-        content.appendChild(field('Repeat', '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 (%)', 'transformOriginX', originXInp));
-        originRows.appendChild(field('Origin Y (%)', 'transformOriginY', originYInp));
-        content.appendChild(originRows);
-        effectSel.addEventListener('change', () => { originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none'; });
-
-        content.appendChild(sec('Controls (OID triggers)'));
-        content.appendChild(playCtrl);
-        content.appendChild(pauseCtrl);
-        content.appendChild(resumeCtrl);
-        content.appendChild(stopCtrl);
-        content.appendChild(reverseCtrl);
+        content.appendChild(addBtn);
     }
 
     // ─── Effects Panel ───────────────────────────────────────────────────────

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

@@ -320,12 +320,19 @@ export async function scanAndApplyAnimations(root) {
     const elements = (root || document).querySelectorAll('[data-animation]');
     for (const el of elements) {
         try {
-            const cfg = JSON.parse(el.getAttribute('data-animation'));
-            const existing = _activeAnimations.get(el);
-            if (existing) existing.destroy();
-            const inst = new AnimationInstance(el, cfg);
-            await inst.init();
-            _activeAnimations.set(el, inst);
+            const raw = JSON.parse(el.getAttribute('data-animation'));
+            // Support both single object and array of animations
+            const cfgList = Array.isArray(raw) ? raw : [raw];
+            const existing = _activeAnimations.get(el) || [];
+            for (const inst of existing) inst.destroy();
+            const instances = [];
+            for (const cfg of cfgList) {
+                if (!cfg || typeof cfg !== 'object') continue;
+                const inst = new AnimationInstance(el, cfg);
+                await inst.init();
+                instances.push(inst);
+            }
+            _activeAnimations.set(el, instances);
         } catch (e) {
             console.warn('[AnimationService] data-animation parse error on element:', el, e);
         }
@@ -335,8 +342,9 @@ export async function scanAndApplyAnimations(root) {
 export function cleanupAnimations(root) {
     const elements = (root || document).querySelectorAll('[data-animation]');
     for (const el of elements) {
-        const inst = _activeAnimations.get(el);
-        if (inst) { inst.destroy(); _activeAnimations.delete(el); }
+        const instances = _activeAnimations.get(el) || [];
+        for (const inst of instances) inst.destroy();
+        _activeAnimations.delete(el);
     }
 }