iobroker.mywebui 1.42.16 → 1.42.18

package/io-package.json

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

package/package.json

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

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

@@ -6,8 +6,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
     static template = html`
         <div id="root" style="width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#1e1e1e;font-family:'Segoe UI',sans-serif;font-size:12px;">
 
-            <!-- Toolbar - realvirtual style dark bar -->
-            <div style="height:40px;background:#252526;border-bottom:1px solid #3c3c3c;display:flex;align-items:center;padding:0 8px;gap:4px;">
+            <!-- Toolbar -->
+            <div style="height:40px;background:#252526;border-bottom:1px solid #3c3c3c;display:flex;align-items:center;padding:0 8px;gap:4px;flex-shrink:0;">
                 <span style="color:#ccc;font-size:11px;font-weight:bold;margin-right:8px;letter-spacing:0.5px;">3D EDITOR</span>
                 <button id="saveBtn" class="tb-btn primary">&#128190; Save</button>
                 <div class="tb-sep"></div>
@@ -22,44 +22,62 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             </div>
 
             <!-- 3-column body -->
-            <div style="flex:1;display:flex;overflow:hidden;">
+            <div style="flex:1;display:flex;overflow:hidden;min-height:0;">
 
-                <!-- LEFT: Scene tree (realvirtual-style) -->
-                <div id="leftPanel" style="width:220px;min-width:160px;background:#252526;border-right:1px solid #3c3c3c;display:flex;flex-direction:column;overflow:hidden;">
-                    <!-- Tab row: All / Assets / Lights / Signals -->
-                    <div style="display:flex;background:#2d2d2d;border-bottom:1px solid #3c3c3c;">
+                <!-- LEFT: Scene tree + Library -->
+                <div id="leftPanel" style="width:240px;min-width:160px;background:#252526;border-right:1px solid #3c3c3c;display:flex;flex-direction:column;overflow:hidden;">
+                    <!-- Tab row: All / Assets / Lights / Signals / Library -->
+                    <div style="display:flex;background:#2d2d2d;border-bottom:1px solid #3c3c3c;flex-shrink:0;">
                         <button id="tabAll"     class="lt-tab active" data-tab="all">All</button>
                         <button id="tabAssets"  class="lt-tab" data-tab="assets">Assets</button>
                         <button id="tabLights"  class="lt-tab" data-tab="lights">Lights</button>
                         <button id="tabSignals" class="lt-tab" data-tab="signals">Signals</button>
+                        <button id="tabLibrary" class="lt-tab" data-tab="library" style="color:#9cdcfe;" title="3D Components Library">Lib</button>
                     </div>
                     <!-- Search -->
-                    <div style="padding:4px 6px;border-bottom:1px solid #3c3c3c;">
-                        <input id="treeSearch" type="text" placeholder="Search nodes..." style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 6px;border-radius:3px;font-size:11px;">
+                    <div style="padding:4px 6px;border-bottom:1px solid #3c3c3c;flex-shrink:0;">
+                        <input id="treeSearch" type="text" placeholder="Search..." style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 6px;border-radius:3px;font-size:11px;">
                     </div>
-                    <!-- Tree content -->
+                    <!-- Tree / Library content -->
                     <div id="treeContent" style="flex:1;overflow:auto;padding:4px 0;"></div>
+                    <!-- Library quick-add button (shown in library tab) -->
+                    <div id="libAddRow" style="display:none;padding:4px 6px;border-top:1px solid #3c3c3c;flex-shrink:0;">
+                        <button id="addLibraryBtn" class="tb-btn" style="width:100%;font-size:10px;">&#43; Import GLB as Component</button>
+                    </div>
                 </div>
 
                 <!-- CENTER: Viewport -->
-                <div id="viewport" style="flex:1;position:relative;overflow:hidden;background:#333;"></div>
-
-                <!-- RIGHT: Component Library (realvirtual-style) -->
-                <div id="rightPanel" style="width:220px;min-width:160px;background:#252526;border-left:1px solid #3c3c3c;display:flex;flex-direction:column;overflow:hidden;">
-                    <!-- Library header -->
-                    <div style="padding:6px 8px;background:#2d2d2d;border-bottom:1px solid #3c3c3c;display:flex;align-items:center;justify-content:space-between;">
-                        <span style="color:#9cdcfe;font-size:11px;font-weight:bold;letter-spacing:0.5px;">&#128218; LIBRARY</span>
-                        <button id="addLibraryBtn" class="tb-btn" style="padding:2px 8px;font-size:10px;">&#43; Add</button>
-                    </div>
-                    <!-- Search library -->
-                    <div style="padding:4px 6px;border-bottom:1px solid #3c3c3c;">
-                        <input id="libSearch" type="text" placeholder="Search..." style="width:100%;box-sizing:border-box;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 6px;border-radius:3px;font-size:11px;">
+                <div id="viewport" style="flex:1;position:relative;overflow:hidden;background:#333;">
+                    <!-- Loading overlay -->
+                    <div id="loadOverlay" style="position:absolute;inset:0;background:#1e1e1e;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;transition:opacity 0.3s;">
+                        <div style="color:#9cdcfe;font-size:16px;font-weight:bold;margin-bottom:16px;letter-spacing:1px;">3D EDITOR</div>
+                        <div style="width:220px;height:4px;background:#3c3c3c;border-radius:2px;overflow:hidden;margin-bottom:10px;">
+                            <div id="loadBarFill" style="height:100%;background:linear-gradient(90deg,#0e639c,#4ec9b0);width:0%;transition:width 0.4s ease;"></div>
+                        </div>
+                        <div id="loadText" style="color:#666;font-size:11px;">Initializing...</div>
                     </div>
-                    <!-- Thumbnail grid -->
-                    <div id="libraryGrid" style="flex:1;overflow:auto;padding:6px;"></div>
                 </div>
 
             </div>
+
+            <!-- Bottom: Script / Style editor panel -->
+            <div id="bottomPanel" style="height:0;flex-shrink:0;background:#1e1e1e;border-top:2px solid #3c3c3c;display:flex;flex-direction:column;overflow:hidden;transition:height 0.15s;">
+                <div style="display:flex;background:#252526;border-bottom:1px solid #3c3c3c;align-items:center;flex-shrink:0;">
+                    <button id="btTabScript" class="bt-tab active" data-btab="script">JS Script</button>
+                    <button id="btTabStyle"  class="bt-tab"        data-btab="style">CSS Style</button>
+                    <div style="flex:1;"></div>
+                    <span style="color:#555;font-size:10px;margin-right:6px;">Ctrl+Enter = Run</span>
+                    <button id="runScriptBtn" class="tb-btn" style="padding:2px 10px;font-size:10px;margin-right:4px;">&#9654; Run</button>
+                    <button id="scriptErrBtn" id="scriptErrBtn" style="display:none;padding:2px 8px;font-size:10px;background:#5a1a1a;color:#f44747;border:1px solid #8a2a2a;border-radius:3px;cursor:pointer;margin-right:4px;" title="Script error"></button>
+                </div>
+                <textarea id="scriptEditor" spellcheck="false" placeholder="// Three.js API available:&#10;// scene, camera, THREE, renderer, controls&#10;// assets   → Map(name → Object3D)&#10;// mixers   → Map(assetId → {mixer, clips, actions})&#10;// driveEngine, subscribe(signal, cb), setState(signal, val)&#10;// onFrame(fn)   → called every animation frame(dt, timestamp)&#10;// onSelect(fn)  → called when node selected(node, assetData)&#10;&#10;// Example:&#10;// const robot = assets.get('Robot');&#10;// onFrame(dt => { robot.rotation.y += dt; });"></textarea>
+                <textarea id="styleEditor" spellcheck="false" placeholder="/* CSS for overlay elements */&#10;/* .label-3d { color: white; background: rgba(0,0,0,0.6); } */"></textarea>
+            </div>
+            <!-- Bottom panel toggle (draggable handle) -->
+            <div id="bottomHandle" style="height:6px;background:#3c3c3c;cursor:ns-resize;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
+                <div style="width:40px;height:2px;background:#555;border-radius:1px;"></div>
+            </div>
+
         </div>
     `;
 
@@ -149,9 +167,57 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             text-align: center;
         }
         .lib-card:hover { border-color:#9cdcfe; background:#094771; }
-        .lib-card .lib-thumb { font-size:32px; margin-bottom:4px; line-height:1; }
+        .lib-card .lib-thumb { font-size:28px; margin-bottom:4px; line-height:1; }
         .lib-card .lib-name { color:#ccc; font-size:10px; word-break:break-word; line-height:1.2; }
         .lib-card .lib-type { color:#666; font-size:9px; margin-top:2px; }
+
+        .bt-tab {
+            padding: 5px 12px;
+            background: transparent;
+            color: #888;
+            border: none;
+            border-bottom: 2px solid transparent;
+            cursor: pointer;
+            font-size: 11px;
+            font-weight: bold;
+        }
+        .bt-tab:hover { color:#ccc; }
+        .bt-tab.active { color:#9cdcfe; border-bottom-color:#9cdcfe; }
+
+        #scriptEditor, #styleEditor {
+            flex: 1;
+            width: 100%;
+            background: #1e1e1e;
+            color: #d4d4d4;
+            border: none;
+            resize: none;
+            font-family: 'Consolas','Courier New',monospace;
+            font-size: 12px;
+            line-height: 1.5;
+            padding: 8px 12px;
+            box-sizing: border-box;
+            outline: none;
+            tab-size: 4;
+            display: none;
+        }
+        #scriptEditor.active, #styleEditor.active { display: block; }
+
+        .lib-item {
+            display: flex;
+            align-items: center;
+            padding: 5px 8px;
+            color: #ccc;
+            cursor: pointer;
+            border-left: 2px solid transparent;
+            gap: 6px;
+        }
+        .lib-item:hover { background:#2d2d2d; border-left-color:#9cdcfe; }
+        .lib-item .lib-icon { font-size:16px; flex-shrink:0; }
+        .lib-item .lib-info { flex:1; overflow:hidden; }
+        .lib-item .lib-name { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+        .lib-item .lib-meta { font-size:9px; color:#555; }
+        .lib-item .lib-add { opacity:0; font-size:11px; color:#4ec9b0; padding:0 4px; }
+        .lib-item:hover .lib-add { opacity:1; }
     `;
 
     constructor() {
@@ -175,6 +241,9 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._threeObjects = [];
         this._mixers = new Map();     // assetId → { mixer, clips, actions }
         this._lastAnimTs = null;
+        this._scriptFrameCallbacks = [];
+        this._scriptSelectCallbacks = [];
+        this._scriptUnsubs = [];
     }
 
     async connectedCallback() {
@@ -183,25 +252,53 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
     async init() {
         try {
-            this._setStatus('Loading Three.js...');
-            const THREE = await import('/mywebui.0.widgets/node_modules/three/build/three.module.js');
-            const { OrbitControls } = await import('/mywebui.0.widgets/node_modules/three/examples/jsm/controls/OrbitControls.js');
-            const { GLTFLoader } = await import('/mywebui.0.widgets/node_modules/three/examples/jsm/loaders/GLTFLoader.js');
+            this._setLoadProgress(5, 'Loading Three.js...');
+            // Parallel import - 2-3x faster than sequential
+            const [THREE, { OrbitControls }, { GLTFLoader }] = await Promise.all([
+                import('/mywebui.0.widgets/node_modules/three/build/three.module.js'),
+                import('/mywebui.0.widgets/node_modules/three/examples/jsm/controls/OrbitControls.js'),
+                import('/mywebui.0.widgets/node_modules/three/examples/jsm/loaders/GLTFLoader.js'),
+            ]);
             this.THREE = THREE;
             this.gltfLoader = new GLTFLoader();
-            this._setStatus('Initializing...');
+
+            this._setLoadProgress(40, 'Setting up renderer...');
             this.initThreeJS(THREE, OrbitControls);
+
+            this._setLoadProgress(65, 'Loading scene...');
             const sceneName = this.getAttribute('scene-name') || 'new-scene';
             await this.loadScene(sceneName);
-            this._setStatus('Ready');
-            setTimeout(() => this._setStatus(''), 2000);
+
+            this._setLoadProgress(90, 'Starting...');
             this.setupEventListeners();
+            this._setupBottomPanel();
+            this._runUserScript();
+
+            this._setLoadProgress(100, 'Ready');
+            this._setStatus('Ready');
+            setTimeout(() => { this._setStatus(''); this._hideLoadOverlay(); }, 400);
         } catch (err) {
             console.error('3D Editor init failed:', err);
+            this._setLoadProgress(0, 'Error: ' + err.message);
             this._setStatus('Error: ' + err.message);
         }
     }
 
+    _setLoadProgress(pct, msg) {
+        const fill = this._getDomElement('loadBarFill');
+        const text = this._getDomElement('loadText');
+        if (fill) fill.style.width = pct + '%';
+        if (text) text.textContent = msg;
+    }
+
+    _hideLoadOverlay() {
+        const overlay = this._getDomElement('loadOverlay');
+        if (overlay) {
+            overlay.style.opacity = '0';
+            setTimeout(() => { if (overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 350);
+        }
+    }
+
     _setStatus(msg) {
         const el = this._getDomElement('statusLabel');
         if (el) el.textContent = msg;
@@ -256,6 +353,10 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             this._lastAnimTs = ts;
             if (this.driveEngine) this.driveEngine.tick(dt);
             for (const { mixer } of this._mixers.values()) mixer.update(dt);
+            // User script frame callbacks
+            for (const fn of this._scriptFrameCallbacks) {
+                try { fn(dt, ts); } catch (_) {}
+            }
             this.controls.update();
             this.renderer.render(this.scene, this.camera);
         };
@@ -263,6 +364,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._stopAnimation = () => { animating = false; };
 
         this.renderer.domElement.addEventListener('click', (e) => this.onMouseClick(e));
+        this._setupHoverDetection();
         const resizeObs = new ResizeObserver(() => this.onViewportResize());
         resizeObs.observe(viewport);
     }
@@ -280,6 +382,9 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         try {
             this.sceneData = await iobrokerHandler.get3DScreen(sceneName);
             if (!this.sceneData) { console.warn('Scene not found:', sceneName); return; }
+            // Ensure script/style fields exist
+            if (!this.sceneData.script) this.sceneData.script = '';
+            if (!this.sceneData.style)  this.sceneData.style  = '';
             console.log('Scene loaded:', sceneName);
             this._buildSceneView();
         } catch (err) {
@@ -343,6 +448,11 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             this._threeObjects.push(model);
             if (this.driveEngine && Array.isArray(this.sceneData?.assets)) {
                 this.driveEngine.createFromAssets(this.sceneData.assets, this._threeObjects);
+                // Wrap drives for AtMax/AtMin events
+                if (asset.drives?.length) {
+                    const drives = asset.drives.map((_, i) => this.driveEngine.getDrive(asset.id, i));
+                    this._wrapDriveEvents(asset, drives);
+                }
             }
             // AnimationMixer for built-in GLB animations
             if (gltf.animations?.length > 0) {
@@ -353,6 +463,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
                 }
                 this._mixers.set(asset.id, { mixer, clips: gltf.animations, actions });
                 asset.availableClips = gltf.animations.map(c => c.name);
+                // animationEnd event
+                mixer.addEventListener('finished', (e) => {
+                    const clipName = e.action.getClip().name;
+                    this._executeNodeEvent(model, asset, `animationEnd:${clipName}`);
+                    this._executeNodeEvent(model, asset, 'animationEnd');
+                });
             }
             // Extract named node list for scene tree
             asset._nodeList = this._extractNamedNodes(model);
@@ -408,6 +524,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
         if (hitNode && hitAssetRoot) {
             if (hitNode.userData.interaction) this._handleInteraction(hitNode);
+            // Fire node event: check by name AND by uuid
+            this._executeNodeEvent(hitNode, hitAssetRoot.userData.assetData, 'click');
             this.selectNode(hitNode, hitAssetRoot);
         } else {
             this.deselectAll();
@@ -430,6 +548,10 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._expandedAssets.add(assetRoot.userData.assetData?.id);
         this.refreshTree();
         this._showNodeProperties(node, assetRoot);
+        // User script select callbacks
+        for (const fn of this._scriptSelectCallbacks) {
+            try { fn(node, assetRoot.userData.assetData); } catch (_) {}
+        }
     }
 
     selectObject(obj) {
@@ -529,6 +651,131 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         }
     }
 
+    // ── Event execution ───────────────────────────────────
+
+    /**
+     * Execute a node event handler stored in asset.events[nodeName][eventKey].
+     * eventKey: 'click' | 'mouseenter' | 'mouseleave' | 'animationEnd' | 'animationEnd:ClipName' |
+     *           'driveAtMax:N' | 'driveAtMin:N' | 'signalChange:path'
+     * Node name '__root__' = the asset root object.
+     */
+    _executeNodeEvent(node, asset, eventKey) {
+        if (!asset?.events) return;
+        const nodeKey = (node?.userData?.assetData === asset || !node?.name) ? '__root__' : node.name;
+        const script = asset.events[nodeKey]?.[eventKey];
+        if (!script?.trim()) return;
+
+        const ctx = {
+            node,
+            assetData: asset,
+            THREE:     this.THREE,
+            scene:     this.scene,
+            camera:    this.camera,
+            renderer:  this.renderer,
+            controls:  this.controls,
+            assets:    this._buildAssetsMap(),
+            mixers:    this._mixers,
+            driveEngine: this.driveEngine,
+            setState(signal, val) { iobrokerHandler.setState(signal, val); },
+            getState:  (s) => this.driveEngine.bus.get(s),
+            subscribe: (s, cb) => { const u = this.driveEngine.bus.subscribe(s, cb); this._scriptUnsubs.push(u); return u; },
+            log:       (...a) => console.log('[3D Event]', nodeKey, eventKey, ...a),
+        };
+        try {
+            new Function(...Object.keys(ctx), script)(...Object.values(ctx));
+        } catch (err) {
+            console.error(`[3D Event ${nodeKey}:${eventKey}]`, err.message);
+        }
+    }
+
+    _buildAssetsMap() {
+        const m = new Map();
+        for (const obj of this.scene.children) {
+            if (obj.userData.assetData) {
+                m.set(obj.userData.assetData.name, obj);
+                m.set(obj.userData.assetData.id, obj);
+            }
+        }
+        return m;
+    }
+
+    // ── Hover detection ───────────────────────────────────
+
+    _setupHoverDetection() {
+        let hoverNode = null;
+        let hoverAsset = null;
+        let throttle = null;
+
+        this.renderer.domElement.addEventListener('mousemove', (e) => {
+            if (throttle) return;
+            throttle = setTimeout(() => { throttle = null; }, 50); // 20 fps check
+
+            const rect = this.renderer.domElement.getBoundingClientRect();
+            this.mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+            this.mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+            this.raycaster.setFromCamera(this.mouse, this.camera);
+            const hits = this.raycaster.intersectObjects(this.scene.children, true);
+
+            let newNode = null, newRoot = null;
+            for (const hit of hits) {
+                const o = hit.object;
+                if (o.userData.isGrid || o.userData.isAxes || o.userData.isSelectionHelper) continue;
+                let p = o;
+                while (p && p !== this.scene) {
+                    if (p.userData.assetData) { newRoot = p; break; }
+                    p = p.parent;
+                }
+                if (newRoot) { newNode = o; break; }
+            }
+
+            if (newNode !== hoverNode) {
+                if (hoverNode && hoverAsset) {
+                    this._executeNodeEvent(hoverNode, hoverAsset, 'mouseleave');
+                    this.renderer.domElement.style.cursor = 'default';
+                }
+                if (newNode && newRoot) {
+                    const asset = newRoot.userData.assetData;
+                    this._executeNodeEvent(newNode, asset, 'mouseenter');
+                    // Change cursor if node has any event or interaction
+                    const hasEvent = asset?.events || newNode.userData.interaction;
+                    if (hasEvent) this.renderer.domElement.style.cursor = 'pointer';
+                }
+                hoverNode  = newNode;
+                hoverAsset = newRoot?.userData.assetData ?? null;
+            }
+        });
+
+        this.renderer.domElement.addEventListener('mouseleave', () => {
+            if (hoverNode && hoverAsset) {
+                this._executeNodeEvent(hoverNode, hoverAsset, 'mouseleave');
+            }
+            hoverNode = null; hoverAsset = null;
+            this.renderer.domElement.style.cursor = 'default';
+        });
+    }
+
+    // ── Drive events (AtMax / AtMin) ──────────────────────
+    // Called from DriveEngine after createFromAssets - wraps onAfterUpdate
+    _wrapDriveEvents(asset, drives) {
+        for (let i = 0; i < drives.length; i++) {
+            const drive = drives[i];
+            if (!drive) continue;
+            const cfg = asset.drives?.[i];
+            const origCb = drive.onAfterUpdate;
+            drive.onAfterUpdate = (d) => {
+                if (origCb) origCb(d);
+                const root = this._threeObjects.find(o => o.userData.assetId === asset.id);
+                if (!root) return;
+                const atMax = cfg?.maxPos !== undefined ? Math.abs(d.currentPosition - cfg.maxPos) < 0.1 : false;
+                const atMin = cfg?.minPos !== undefined ? Math.abs(d.currentPosition - cfg.minPos) < 0.1 : false;
+                if (atMax && !d._evtWasAtMax) this._executeNodeEvent(root, asset, `driveAtMax:${i}`);
+                if (atMin && !d._evtWasAtMin) this._executeNodeEvent(root, asset, `driveAtMin:${i}`);
+                d._evtWasAtMax = atMax;
+                d._evtWasAtMin = atMin;
+            };
+        }
+    }
+
     _extractNamedNodes(obj, depth = 0, result = []) {
         if (depth > 7) return result;
         if (depth > 0 && obj.name) {
@@ -546,11 +793,152 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         return result;
     }
 
+    // ── Bottom Script/Style panel ─────────────────────────
+
+    _setupBottomPanel() {
+        const root  = this._getDomElement('root');
+        const panel = this._getDomElement('bottomPanel');
+        const handle = this._getDomElement('bottomHandle');
+        const scriptTA = this._getDomElement('scriptEditor');
+        const styleTA  = this._getDomElement('styleEditor');
+
+        // Populate from sceneData
+        if (scriptTA && this.sceneData?.script) scriptTA.value = this.sceneData.script;
+        if (styleTA  && this.sceneData?.style)  styleTA.value  = this.sceneData.style;
+
+        // Set initial active editor
+        if (scriptTA) scriptTA.classList.add('active');
+
+        // Tab switching
+        ['btTabScript','btTabStyle'].forEach(id => {
+            const btn = this._getDomElement(id);
+            if (!btn) return;
+            btn.addEventListener('click', () => {
+                this.shadowRoot.querySelectorAll('.bt-tab').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                const tab = btn.dataset.btab;
+                if (scriptTA) scriptTA.classList.toggle('active', tab === 'script');
+                if (styleTA)  styleTA.classList.toggle('active', tab === 'style');
+            });
+        });
+
+        // Run button
+        this._getDomElement('runScriptBtn')?.addEventListener('click', () => this._runUserScript());
+
+        // Ctrl+Enter to run while editing
+        scriptTA?.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); this._runUserScript(); }
+        });
+
+        // Auto-save script/style to sceneData on change
+        scriptTA?.addEventListener('input', () => { if (this.sceneData) this.sceneData.script = scriptTA.value; });
+        styleTA?.addEventListener('input',  () => { if (this.sceneData) this.sceneData.style  = styleTA.value; this._applyUserStyle(); });
+
+        // Draggable resize handle
+        let dragStart = null;
+        let startH = 0;
+        handle?.addEventListener('mousedown', (e) => {
+            dragStart = e.clientY;
+            startH = panel ? panel.offsetHeight : 0;
+            // If panel collapsed, open it
+            if (startH < 20) startH = 0;
+            document.addEventListener('mousemove', onDrag);
+            document.addEventListener('mouseup', onUp);
+        });
+        const onDrag = (e) => {
+            if (dragStart === null) return;
+            const delta = dragStart - e.clientY;
+            const h = Math.max(0, Math.min(startH + delta, 500));
+            if (panel) panel.style.height = h + 'px';
+        };
+        const onUp = () => { dragStart = null; document.removeEventListener('mousemove', onDrag); document.removeEventListener('mouseup', onUp); };
+
+        // Click handle to toggle
+        handle?.addEventListener('click', (e) => {
+            if (!panel) return;
+            const h = panel.offsetHeight;
+            panel.style.height = h < 20 ? '200px' : '0';
+        });
+    }
+
+    _applyUserStyle() {
+        const styleTA = this._getDomElement('styleEditor');
+        const css = styleTA?.value || this.sceneData?.style || '';
+        let styleEl = this.shadowRoot.getElementById('userStyle3d');
+        if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.id = 'userStyle3d';
+            this.shadowRoot.appendChild(styleEl);
+        }
+        styleEl.textContent = css;
+    }
+
+    _runUserScript() {
+        // Clear previous script state
+        for (const unsub of this._scriptUnsubs) try { unsub(); } catch (_) {}
+        this._scriptUnsubs = [];
+        this._scriptFrameCallbacks = [];
+        this._scriptSelectCallbacks = [];
+
+        const scriptTA = this._getDomElement('scriptEditor');
+        const errBtn   = this._getDomElement('scriptErrBtn');
+        const script   = scriptTA?.value || this.sceneData?.script || '';
+        if (!script.trim()) return;
+
+        // Build assets map: name/id → Three.js Object3D
+        const assets = new Map();
+        for (const obj of this.scene.children) {
+            if (obj.userData.assetData) {
+                assets.set(obj.userData.assetData.name, obj);
+                assets.set(obj.userData.assetData.id, obj);
+            }
+        }
+
+        const self = this;
+        const ctx = {
+            THREE:       this.THREE,
+            scene:       this.scene,
+            camera:      this.camera,
+            renderer:    this.renderer,
+            controls:    this.controls,
+            assets,
+            mixers:      this._mixers,
+            driveEngine: this.driveEngine,
+            subscribe(signal, cb) {
+                const unsub = self.driveEngine.bus.subscribe(signal, cb);
+                self._scriptUnsubs.push(unsub);
+                return unsub;
+            },
+            setState(signal, val) { iobrokerHandler.setState(signal, val); },
+            getState(signal)      { return self.driveEngine.bus.get(signal); },
+            onFrame(fn)  { self._scriptFrameCallbacks.push(fn); },
+            onSelect(fn) { self._scriptSelectCallbacks.push(fn); },
+            log(...args) { console.log('[3D Script]', ...args); },
+        };
+
+        if (errBtn) errBtn.style.display = 'none';
+        try {
+            const fn = new Function(...Object.keys(ctx), script);
+            fn(...Object.values(ctx));
+        } catch (err) {
+            console.error('[3D Script] Error:', err);
+            if (errBtn) { errBtn.style.display = ''; errBtn.textContent = '⚠ ' + err.message; }
+        }
+    }
+
     // ── Scene tree (left panel) ───────────────────────────
 
     refreshTree() {
         const el = this._getDomElement('treeContent');
-        if (!el || !this.sceneData) return;
+        if (!el) return;
+
+        // Library tab - show reusable 3D components
+        if (this._activeTab === 'library') {
+            this._renderLibraryTab(el);
+            return;
+        }
+
+        if (!this.sceneData) return;
         const search = (this._getDomElement('treeSearch')?.value ?? '').toLowerCase();
         el.innerHTML = '';
 
@@ -714,42 +1102,80 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         }
     }
 
-    // ── Library (right panel) ─────────────────────────────
+    // ── Library (right panel - kept for backward compat) ───
 
     refreshLibrary() {
         const el = this._getDomElement('libraryGrid');
         if (!el || !this.sceneData) return;
-        const search = (this._getDomElement('libSearch')?.value ?? '').toLowerCase();
-        const assets = (Array.isArray(this.sceneData.assets) ? this.sceneData.assets : [])
-            .filter(a => !search || a.name.toLowerCase().includes(search));
+        // Library now lives primarily in left panel tab
+        // Right panel libraryGrid kept but hidden
+    }
 
-        if (assets.length === 0) {
-            el.innerHTML = `<div style="color:#555;text-align:center;padding:20px 8px;font-size:11px;line-height:1.6;">
-                No models<br><br>Click <b style="color:#9cdcfe">+ Add</b> to load<br>a GLB/GLTF file
+    // ── Library tab in left panel ─────────────────────────
+
+    _renderLibraryTab(el) {
+        el.innerHTML = '';
+        const search = (this._getDomElement('treeSearch')?.value ?? '').toLowerCase();
+        const assets = Array.isArray(this.sceneData?.assets) ? this.sceneData.assets : [];
+        const filtered = assets.filter(a => !search || a.name.toLowerCase().includes(search));
+
+        // Show/hide add button
+        const addRow = this._getDomElement('libAddRow');
+        if (addRow) addRow.style.display = '';
+
+        if (filtered.length === 0) {
+            el.innerHTML = `<div style="color:#555;padding:16px 8px;font-size:11px;text-align:center;line-height:1.8;">
+                No 3D components yet.<br>
+                <span style="color:#9cdcfe;">Import GLB</span> to create<br>a reusable component.
             </div>`;
             return;
         }
 
-        el.style.display = 'grid';
-        el.style.gridTemplateColumns = '1fr 1fr';
-        el.style.gap = '6px';
-        el.innerHTML = '';
-
-        for (const asset of assets) {
-            const card = document.createElement('div');
-            card.className = 'lib-card';
+        for (const asset of filtered) {
             const shortName = asset.name.replace(/\.(glb|gltf)$/i, '');
-            card.innerHTML = `
-                <div class="lib-thumb">📦</div>
-                <div class="lib-name">${shortName.substring(0, 20)}</div>
-                <div class="lib-type">GLB</div>
+            const driveCnt  = asset.drives?.length ?? 0;
+            const clipCnt   = asset.availableClips?.length ?? 0;
+            const interCnt  = Object.keys(asset.interactions ?? {}).length;
+            const meta = [
+                driveCnt  ? `${driveCnt}D` : '',
+                clipCnt   ? `${clipCnt}A` : '',
+                interCnt  ? `${interCnt}I` : '',
+            ].filter(Boolean).join(' · ') || 'GLB';
+
+            const item = document.createElement('div');
+            item.className = 'lib-item';
+            item.innerHTML = `
+                <span class="lib-icon">📦</span>
+                <div class="lib-info">
+                    <div class="lib-name" title="${asset.name}">${shortName}</div>
+                    <div class="lib-meta">${meta}</div>
+                </div>
+                <span class="lib-add" title="Add instance to scene">+</span>
             `;
-            card.title = asset.name;
-            card.addEventListener('click', () => this._selectAsset(asset));
-            el.appendChild(card);
+            item.querySelector('.lib-add')?.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this._addAssetInstance(asset);
+            });
+            item.addEventListener('click', () => this._selectAsset(asset));
+            el.appendChild(item);
         }
     }
 
+    _addAssetInstance(templateAsset) {
+        // Duplicate the asset as a new instance in the scene
+        const newId = 'asset_' + Date.now().toString(36);
+        const instance = JSON.parse(JSON.stringify(templateAsset));
+        instance.id = newId;
+        instance.name = templateAsset.name + '_' + newId.slice(-4);
+        instance.position = { x: Math.random() * 2 - 1, y: 0, z: Math.random() * 2 - 1 };
+        if (!this.sceneData.assets) this.sceneData.assets = [];
+        this.sceneData.assets.push(instance);
+        this.loadAsset(instance);
+        this.refreshTree();
+        this._setStatus('Instance added: ' + instance.name);
+        setTimeout(() => this._setStatus(''), 2000);
+    }
+
     // ── File input ────────────────────────────────────────
 
     onFileSelected(event) {
@@ -839,19 +1265,25 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._getDomElement('gridToggle').addEventListener('click', () => this.toggleGrid());
         this._getDomElement('axesToggle').addEventListener('click', () => this.toggleAxes());
 
-        // Tree tabs
-        ['tabAll','tabAssets','tabLights','tabSignals'].forEach(id => {
-            this._getDomElement(id).addEventListener('click', (e) => {
+        // Tree tabs (including Library)
+        ['tabAll','tabAssets','tabLights','tabSignals','tabLibrary'].forEach(id => {
+            const el = this._getDomElement(id);
+            if (!el) return;
+            el.addEventListener('click', (e) => {
                 this._activeTab = e.target.dataset.tab;
                 this.shadowRoot.querySelectorAll('.lt-tab').forEach(t => t.classList.remove('active'));
                 e.target.classList.add('active');
+                const addRow = this._getDomElement('libAddRow');
+                if (addRow) addRow.style.display = this._activeTab === 'library' ? '' : 'none';
                 this.refreshTree();
             });
         });
 
+        // Library add button
+        this._getDomElement('addLibraryBtn')?.addEventListener('click', () => this._getDomElement('fileInput').click());
+
         // Search
-        this._getDomElement('treeSearch').addEventListener('input', () => this.refreshTree());
-        this._getDomElement('libSearch').addEventListener('input', () => this.refreshLibrary());
+        this._getDomElement('treeSearch')?.addEventListener('input', () => this.refreshTree());
     }
 
     disconnectedCallback() {
@@ -859,6 +1291,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         if (this.driveEngine) this.driveEngine.destroy();
         for (const { mixer } of this._mixers.values()) mixer.stopAllAction();
         this._mixers.clear();
+        for (const unsub of this._scriptUnsubs) try { unsub(); } catch (_) {}
+        this._scriptUnsubs = [];
         if (this.renderer) {
             this.renderer.dispose();
             this.renderer.domElement?.remove();

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

@@ -1710,7 +1710,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No drives configured</div>`;
 
         // ── Interaction binding ──
-        const nodeKey = nodeName;
+        const nodeKey = (node?.userData?.assetData === asset || !node?.name) ? '__root__' : (node?.name || nodeName);
         const inter = asset?.interactions?.[nodeKey];
         const interHtml = inter
             ? `<div style="background:#1a2a1a;border:1px solid #2a4a2a;border-radius:3px;padding:6px;font-size:10px;">
@@ -1721,6 +1721,50 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
               </div>`
             : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No interaction</div>`;
 
+        // ── Events ──
+        const nodeEvents = asset?.events?.[nodeKey] ?? {};
+        const nodeEventEntries = Object.entries(nodeEvents);
+        // Build list of available preset events for "Add" dropdown
+        const presetEvents = [
+            { key: 'click',           label: '🖱️ click' },
+            { key: 'mouseenter',      label: '↗️ mouseenter' },
+            { key: 'mouseleave',      label: '↙️ mouseleave' },
+            { key: 'animationEnd',    label: '🎬 animationEnd (any clip)' },
+            ...( (asset?.availableClips ?? []).map(c => ({ key: `animationEnd:${c}`, label: `🎬 animationEnd:${c}` })) ),
+            ...( (asset?.drives ?? []).map((_, i) => ([
+                { key: `driveAtMax:${i}`, label: `⬆️ driveAtMax:${i}` },
+                { key: `driveAtMin:${i}`, label: `⬇️ driveAtMin:${i}` },
+            ])).flat() ),
+        ].filter(p => !nodeEvents[p.key]); // hide already-configured ones
+
+        const presetOptsHtml = presetEvents.map(p => `<option value="${p.key}">${p.label}</option>`).join('');
+
+        const eventsHtml = nodeEventEntries.length > 0
+            ? nodeEventEntries.map(([evtKey, script]) => `
+                <div class="evt-row" style="background:#1a1a2e;border:1px solid #2a2a4a;border-radius:3px;padding:5px;margin-bottom:4px;">
+                    <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;">
+                        <span style="color:#dcdcaa;font-size:10px;flex:1;font-family:monospace;">${evtKey}</span>
+                        <button class="evt-del-btn tb-btn" data-evtkey="${evtKey}" style="padding:0px 5px;font-size:9px;background:#5a1a1a;color:#f44747;border-color:#8a2a2a;">✕</button>
+                    </div>
+                    <textarea class="evt-script" data-evtkey="${evtKey}" rows="3"
+                        style="width:100%;box-sizing:border-box;background:#0d0d1a;border:1px solid #3c3c5c;color:#d4d4d4;font-family:'Consolas',monospace;font-size:10px;padding:4px;resize:vertical;line-height:1.4;"
+                        spellcheck="false"
+                        placeholder="// context: node, assetData, THREE, scene, camera&#10;// setState(signal, val), getState(signal), subscribe(signal, cb)&#10;// assets Map, mixers Map, driveEngine"
+                    >${this._escHtml(script)}</textarea>
+                </div>`).join('')
+            : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No events configured</div>`;
+
+        const eventsAddHtml = presetEvents.length > 0
+            ? `<div style="display:flex;gap:4px;margin-top:4px;">
+                <select class="evt-preset-sel" style="flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:2px 4px;border-radius:3px;font-size:10px;">
+                    <option value="">— select event type —</option>
+                    ${presetOptsHtml}
+                    <option value="__custom__">Custom event name...</option>
+                </select>
+                <button class="evt-add-btn tb-btn" style="padding:1px 10px;font-size:10px;">+ Add</button>
+              </div>`
+            : `<div style="color:#555;font-size:9px;margin-top:4px;">All event types configured</div>`;
+
         panel.innerHTML = `
             <style>
                 .pg-group{margin-bottom:8px;}
@@ -1771,6 +1815,19 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                     <div class="pg-header">🖱️ Interaction (onClick) <button class="inter-add-btn tb-btn" style="padding:1px 8px;font-size:9px;">+ Set</button></div>
                     ${interHtml}
                 </div>
+                <div class="pg-group">
+                    <div class="pg-header">⚡ Events
+                        <span style="color:#555;font-size:9px;font-weight:normal;">node: ${nodeKey}</span>
+                    </div>
+                    ${eventsHtml}
+                    ${eventsAddHtml}
+                    <div style="color:#555;font-size:9px;margin-top:6px;line-height:1.5;">
+                        Script context:<br>
+                        <code style="color:#888;">node, assetData, THREE, scene</code><br>
+                        <code style="color:#888;">setState(sig,val) · getState(sig)</code><br>
+                        <code style="color:#888;">assets(Map) · mixers · driveEngine</code>
+                    </div>
+                </div>
             </div>
         `;
 
@@ -1855,6 +1912,53 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 this.show3DNodeProperties(node, asset, mixerInfo, onChange);
             }
         });
+
+        // ── Events wiring ──
+        // Script textarea auto-save on blur
+        p.querySelectorAll('.evt-script').forEach(ta => {
+            ta.addEventListener('blur', () => {
+                const evtKey = ta.dataset.evtkey;
+                if (!asset.events) asset.events = {};
+                if (!asset.events[nodeKey]) asset.events[nodeKey] = {};
+                asset.events[nodeKey][evtKey] = ta.value;
+                if (onChange) onChange(asset);
+            });
+        });
+
+        // Delete event
+        p.querySelectorAll('.evt-del-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const evtKey = btn.dataset.evtkey;
+                if (asset?.events?.[nodeKey]) {
+                    delete asset.events[nodeKey][evtKey];
+                    if (Object.keys(asset.events[nodeKey]).length === 0) delete asset.events[nodeKey];
+                    if (onChange) onChange(asset);
+                    this.show3DNodeProperties(node, asset, mixerInfo, onChange);
+                }
+            });
+        });
+
+        // Add event from preset dropdown
+        p.querySelector('.evt-add-btn')?.addEventListener('click', () => {
+            const sel = p.querySelector('.evt-preset-sel');
+            let evtKey = sel?.value;
+            if (!evtKey) return;
+            if (evtKey === '__custom__') {
+                evtKey = prompt('Custom event name:', 'signalChange:mywebui.0.signal.path');
+                if (!evtKey) return;
+            }
+            if (!asset.events) asset.events = {};
+            if (!asset.events[nodeKey]) asset.events[nodeKey] = {};
+            if (!asset.events[nodeKey][evtKey]) {
+                asset.events[nodeKey][evtKey] = '// event: ' + evtKey + '\n';
+            }
+            if (onChange) onChange(asset);
+            this.show3DNodeProperties(node, asset, mixerInfo, onChange);
+        });
+    }
+
+    _escHtml(str) {
+        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
     }
 
     _showAddDriveDialog(obj, onChange) {