iobroker.mywebui 1.42.16 → 1.42.17

package/io-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.16",
+  "version": "1.42.17",
   "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);
         };
@@ -280,6 +381,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) {
@@ -430,6 +534,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) {
@@ -546,11 +654,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 +963,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
+    }
+
+    // ── 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));
 
-        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
+        // 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 +1126,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 +1152,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();