@2112-lab/central-plant 0.1.78 → 0.1.80

package/dist/bundle/index.js

@@ -24701,6 +24701,8 @@ class RGBELoader extends THREE.DataTextureLoader {
 
 }
 
+/** Maximum anisotropy to apply (caps GPU memory for mip storage) */
+var MAX_ANISOTROPY = 4;
 var TEXTURE_SETS = {
   // Light metallic texture using the gravel_embedded_concrete with metallic properties
   light_metal: {
@@ -24837,10 +24839,29 @@ function _loadTextureSet() {
           return Promise.all(promises);
         case 2:
           loadedTextures = _context2.v;
-          textureMap = Object.fromEntries(loadedTextures); // Apply texture settings
-          Object.values(textureMap).forEach(function (texture) {
+          textureMap = Object.fromEntries(loadedTextures); // Apply texture settings with memory-conscious defaults
+          Object.entries(textureMap).forEach(function (_ref4) {
+            var _ref5 = _slicedToArray(_ref4, 2),
+              type = _ref5[0],
+              texture = _ref5[1];
             texture.wrapS = texture.wrapT = THREE__namespace.RepeatWrapping;
             texture.repeat.set(textureSet.repeat.x, textureSet.repeat.y);
+
+            // Correct colour-space: diffuse is sRGB, everything else is linear data
+            if (type === 'diffuse') {
+              texture.colorSpace = THREE__namespace.SRGBColorSpace;
+            } else {
+              texture.colorSpace = THREE__namespace.LinearSRGBColorSpace;
+            }
+
+            // Roughness maps don't benefit much from mipmaps — skip them to save GPU memory
+            if (type === 'roughness') {
+              texture.generateMipmaps = false;
+              texture.minFilter = THREE__namespace.LinearFilter;
+            }
+
+            // Cap anisotropy to balance quality vs memory
+            texture.anisotropy = MAX_ANISOTROPY;
           });
           console.log("Texture set ".concat(setName, " loaded successfully"));
           return _context2.a(2, {
@@ -24905,173 +24926,88 @@ var EnvironmentManager = /*#__PURE__*/function () {
     this.sceneViewer = sceneViewer;
   }
 
+  // ──────────────────────────────────────────────
+  //  Skybox / environment map
+  // ──────────────────────────────────────────────
+
   /**
-   * Create skybox with HDR environment mapping
+   * Create a lightweight procedural sky (default).
+   *
+   * Builds a gradient-sky sphere + hemisphere light, then bakes a small
+   * PMREM environment map for PBR reflections.  Total GPU cost is ~1-2 MB
+   * compared to ~50-70 MB for the previous HDR pipeline.
    */
   return _createClass(EnvironmentManager, [{
     key: "createSkybox",
-    value: (function () {
+    value: function () {
       var _createSkybox = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var component, pmremGenerator, loaders, applyEnvironmentMap, _loop, _ret, _i, _loaders, ambientLight, skyScene;
-        return _regenerator().w(function (_context3) {
-          while (1) switch (_context3.n) {
+        var component, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
             case 0:
               component = this.sceneViewer;
-              pmremGenerator = new THREE__namespace.PMREMGenerator(component.renderer);
-              pmremGenerator.compileEquirectangularShader();
-              loaders = [{
-                type: 'hdr',
-                loader: new RGBELoader(),
-                paths: ['/skyboxes/kloofendal_48d_partly_cloudy_puresky_2k.hdr', '/skyboxes/kloofendal_48d_partly_cloudy_puresky_1k.hdr']
-              }, {
-                type: 'jpeg',
-                loader: component.textureLoader,
-                paths: ['/skyboxes/sky_fallback.jpg']
-              }];
-              applyEnvironmentMap = function applyEnvironmentMap(envTexture, type) {
-                try {
-                  var _component$scene$envi, _component$scene$back;
-                  envTexture.mapping = THREE__namespace.EquirectangularReflectionMapping;
-                  var processedEnvMap = pmremGenerator.fromEquirectangular(envTexture).texture;
-                  if ((_component$scene$envi = component.scene.environment) !== null && _component$scene$envi !== void 0 && _component$scene$envi.dispose) component.scene.environment.dispose();
-                  if ((_component$scene$back = component.scene.background) !== null && _component$scene$back !== void 0 && _component$scene$back.dispose) component.scene.background.dispose();
-                  component.scene.environment = processedEnvMap;
-                  component.scene.background = processedEnvMap;
-                  envTexture.dispose();
-                  console.log("\u2705 ".concat(type.toUpperCase(), " environment map applied successfully"));
-                  return true;
-                } catch (error) {
-                  console.warn("\u274C Failed to apply ".concat(type, " environment map:"), error);
-                  return false;
-                }
-              };
-              _loop = /*#__PURE__*/_regenerator().m(function _loop() {
-                var _loaders$_i, type, loader, paths, _iterator, _step, _loop2, _ret2, _t2;
-                return _regenerator().w(function (_context2) {
-                  while (1) switch (_context2.n) {
-                    case 0:
-                      _loaders$_i = _loaders[_i], type = _loaders$_i.type, loader = _loaders$_i.loader, paths = _loaders$_i.paths;
-                      _iterator = _createForOfIteratorHelper(paths);
-                      _context2.p = 1;
-                      _loop2 = /*#__PURE__*/_regenerator().m(function _loop2() {
-                        var path, texture, _t;
-                        return _regenerator().w(function (_context) {
-                          while (1) switch (_context.n) {
-                            case 0:
-                              path = _step.value;
-                              _context.p = 1;
-                              console.log("\uD83D\uDD04 Attempting to load ".concat(type.toUpperCase(), ": ").concat(path));
-                              _context.n = 2;
-                              return new Promise(function (resolve, reject) {
-                                var timeout = setTimeout(function () {
-                                  return reject(new Error('Timeout'));
-                                }, 10000);
-                                loader.load(path, function (tex) {
-                                  clearTimeout(timeout);
-                                  resolve(tex);
-                                }, undefined, function (err) {
-                                  clearTimeout(timeout);
-                                  reject(err);
-                                });
-                              });
-                            case 2:
-                              texture = _context.v;
-                              if (!applyEnvironmentMap(texture, type)) {
-                                _context.n = 3;
-                                break;
-                              }
-                              pmremGenerator.dispose();
-                              return _context.a(2, {
-                                v: {
-                                  v: void 0
-                                }
-                              });
-                            case 3:
-                              _context.n = 5;
-                              break;
-                            case 4:
-                              _context.p = 4;
-                              _t = _context.v;
-                              console.warn("\u26A0\uFE0F Failed to load ".concat(path, ":"), _t.message);
-                            case 5:
-                              return _context.a(2);
-                          }
-                        }, _loop2, null, [[1, 4]]);
-                      });
-                      _iterator.s();
-                    case 2:
-                      if ((_step = _iterator.n()).done) {
-                        _context2.n = 5;
-                        break;
-                      }
-                      return _context2.d(_regeneratorValues(_loop2()), 3);
-                    case 3:
-                      _ret2 = _context2.v;
-                      if (!_ret2) {
-                        _context2.n = 4;
-                        break;
-                      }
-                      return _context2.a(2, _ret2.v);
-                    case 4:
-                      _context2.n = 2;
-                      break;
-                    case 5:
-                      _context2.n = 7;
-                      break;
-                    case 6:
-                      _context2.p = 6;
-                      _t2 = _context2.v;
-                      _iterator.e(_t2);
-                    case 7:
-                      _context2.p = 7;
-                      _iterator.f();
-                      return _context2.f(7);
-                    case 8:
-                      return _context2.a(2);
-                  }
-                }, _loop, null, [[1, 6, 7, 8]]);
-              });
-              _i = 0, _loaders = loaders;
-            case 1:
-              if (!(_i < _loaders.length)) {
-                _context3.n = 4;
-                break;
-              }
-              return _context3.d(_regeneratorValues(_loop()), 2);
+              _context.p = 1;
+              _context.n = 2;
+              return this._applyProceduralSky(component);
             case 2:
-              _ret = _context3.v;
-              if (!_ret) {
-                _context3.n = 3;
-                break;
-              }
-              return _context3.a(2, _ret.v);
-            case 3:
-              _i++;
-              _context3.n = 1;
+              console.log('✅ Procedural sky environment applied');
+              _context.n = 4;
               break;
+            case 3:
+              _context.p = 3;
+              _t = _context.v;
+              console.warn('⚠️ Procedural sky failed, applying plain color fallback:', _t);
+              this.setColorBackground();
             case 4:
-              console.log('🎨 Using procedural sky fallback');
-              ambientLight = new THREE__namespace.AmbientLight(0xffffff, 0.6);
-              component.scene.add(ambientLight);
-              skyScene = new THREE__namespace.Scene(); // Create hemisphere light with Z-up orientation - sky color up, ground color down
-              skyScene.add(new THREE__namespace.HemisphereLight(0x87CEEB, 0x444477, 1));
-              component.scene.environment = pmremGenerator.fromScene(skyScene).texture;
-              component.scene.background = new THREE__namespace.Color(0x87CEEB);
-              pmremGenerator.dispose();
-            case 5:
-              return _context3.a(2);
+              return _context.a(2);
           }
-        }, _callee, this);
+        }, _callee, this, [[1, 3]]);
       }));
       function createSkybox() {
         return _createSkybox.apply(this, arguments);
       }
       return createSkybox;
     }()
+    /**
+     * Build a procedural sky environment.
+     *
+     * Uses two separate, lightweight resources:
+     *  - **Background**: Canvas-rendered gradient texture mapped as equirectangular
+     *    (512 × 256 px ≈ 0.5 MB GPU).
+     *  - **Environment**: PMREM baked from a HemisphereLight scene for PBR IBL
+     *    reflections (~1 MB GPU).
+     *
+     * Custom ShaderMaterials are intentionally avoided inside the PMREM pipeline
+     * because `PMREMGenerator.fromScene()` uses its own cube-face cameras that
+     * can produce black output with non-standard shaders.
+     * @private
+     */
+  }, {
+    key: "_applyProceduralSky",
+    value: function _applyProceduralSky(component) {
+      var _component$scene$envi, _component$scene$back;
+      // Dispose of existing textures
+      if ((_component$scene$envi = component.scene.environment) !== null && _component$scene$envi !== void 0 && _component$scene$envi.dispose) component.scene.environment.dispose();
+      if ((_component$scene$back = component.scene.background) !== null && _component$scene$back !== void 0 && _component$scene$back.dispose) component.scene.background.dispose();
+
+      // ── 1. Solid-colour background ──────────────────────────────────────────
+      // A plain THREE.Color is coordinate-system agnostic (no equirectangular
+      // mapping that assumes Y-up), cheap (zero GPU textures), and looks clean.
+      component.scene.background = new THREE__namespace.Color(0xbcddeb); // light sky blue
+
+      // ── 2. PMREM env-map from HemisphereLight for PBR IBL reflections ───────
+      // Intensity must be high enough to light MeshPhysicalMaterial surfaces
+      // that the directional lights don't reach evenly (wall backs, crevices).
+      var pmremGenerator = new THREE__namespace.PMREMGenerator(component.renderer);
+      var lightScene = new THREE__namespace.Scene();
+      lightScene.add(new THREE__namespace.HemisphereLight(0xbcddeb, 0x444477, 3.0));
+      component.scene.environment = pmremGenerator.fromScene(lightScene).texture;
+      pmremGenerator.dispose();
+    }
+
     /**
      * Setup scene lighting
      */
-    )
   }, {
     key: "setupLighting",
     value: function setupLighting() {
@@ -25097,15 +25033,27 @@ var EnvironmentManager = /*#__PURE__*/function () {
       component.scene.add(sunLight);
       // component.scene.add(sunLight.target)
 
-      // // Ambient hemispheric light
-      // const ambientLight = new THREE.HemisphereLight(0xffffff, 0x444466, 0.35)
-      // component.scene.add(ambientLight)
+      // Flat ambient light – ensures no surface is ever fully black regardless
+      // of orientation.  Low intensity so it doesn't wash out lit surfaces.
+      var flatAmbient = new THREE__namespace.AmbientLight(0xffffff, 1.0);
+      component.scene.add(flatAmbient);
+
+      // Hemispheric ambient – adds sky/ground colour tint on surfaces the
+      // directional lights miss (essential without an HDR environment map).
+      var ambientLight = new THREE__namespace.HemisphereLight(0xffffff, 0x444466, 1.0);
+      component.scene.add(ambientLight);
 
       // Fill light (secondary directional light) - adjusted for Z-up coordinate system with flipped Y
-      var fillLight = new THREE__namespace.DirectionalLight(0xffffff, 2.0);
+      var fillLight = new THREE__namespace.DirectionalLight(0xffffff, 3.0);
       fillLight.position.set(10, -10, 10); // X=-10, Y=-10 (flipped), Z=10 (up in Z-up system)
       component.scene.add(fillLight);
 
+      // Back-fill light – illuminates rear-facing walls and equipment backs
+      // that the sun and primary fill can't reach.
+      var backFillLight = new THREE__namespace.DirectionalLight(0xddeeff, 3.0);
+      backFillLight.position.set(-10, 10, 8);
+      component.scene.add(backFillLight);
+
       // // Rim light (for edge definition)
       // const rimLight = new THREE.DirectionalLight(0xffffff, 0.9)
       // rimLight.position.set(0, 0, -20)
@@ -25134,9 +25082,9 @@ var EnvironmentManager = /*#__PURE__*/function () {
     key: "addTexturedGround",
     value: (function () {
       var _addTexturedGround = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-        var component, groundSize, groundGeometry, groundMaterial, ground, texturedMaterial, _t3;
-        return _regenerator().w(function (_context4) {
-          while (1) switch (_context4.n) {
+        var component, groundSize, groundGeometry, groundMaterial, ground, texturedMaterial, _t2;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
               component = this.sceneViewer;
               console.debug('Starting addTexturedGround...');
@@ -25155,23 +25103,23 @@ var EnvironmentManager = /*#__PURE__*/function () {
               ground.uuid = 'GROUND'; // Set UUID to match JSON data structure
               ground.userData.isBaseGround = true;
               component.scene.add(ground);
-              _context4.p = 1;
+              _context2.p = 1;
               console.debug('Loading concrete texture set...');
-              _context4.n = 2;
+              _context2.n = 2;
               return loadTextureSetAndCreateMaterial('gravel_embedded_concrete', component.textureLoader);
             case 2:
-              texturedMaterial = _context4.v;
+              texturedMaterial = _context2.v;
               ground.material = texturedMaterial;
               ground.material.needsUpdate = true;
               console.log('✅ Ground material updated with textures');
-              _context4.n = 4;
+              _context2.n = 4;
               break;
             case 3:
-              _context4.p = 3;
-              _t3 = _context4.v;
-              console.warn('Error loading ground textures:', _t3);
+              _context2.p = 3;
+              _t2 = _context2.v;
+              console.warn('Error loading ground textures:', _t2);
             case 4:
-              return _context4.a(2);
+              return _context2.a(2);
           }
         }, _callee2, this, [[1, 3]]);
       }));
@@ -25188,9 +25136,9 @@ var EnvironmentManager = /*#__PURE__*/function () {
     key: "addBrickWalls",
     value: (function () {
       var _addBrickWalls = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-        var component, wallHeight, wallThickness, groundSize, halfGroundSize, brickMaterial, createWalls, texturedBrickMaterial, _t4;
-        return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.n) {
+        var component, wallHeight, wallThickness, groundSize, halfGroundSize, brickMaterial, createWalls, texturedBrickMaterial, _t3;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
             case 0:
               component = this.sceneViewer;
               console.debug('Starting addBrickWalls...');
@@ -25292,12 +25240,12 @@ var EnvironmentManager = /*#__PURE__*/function () {
               };
               createWalls(brickMaterial);
               console.debug('Basic brick walls created');
-              _context5.p = 1;
+              _context3.p = 1;
               console.debug('Loading brick texture set...');
-              _context5.n = 2;
+              _context3.n = 2;
               return loadTextureSetAndCreateMaterial('brick', component.textureLoader);
             case 2:
-              texturedBrickMaterial = _context5.v;
+              texturedBrickMaterial = _context3.v;
               component.scene.traverse(function (object) {
                 if (object.isMesh && object.userData.isBrickWall) {
                   object.material = texturedBrickMaterial;
@@ -25305,14 +25253,14 @@ var EnvironmentManager = /*#__PURE__*/function () {
                 }
               });
               console.log('✅ Brick walls updated with textures');
-              _context5.n = 4;
+              _context3.n = 4;
               break;
             case 3:
-              _context5.p = 3;
-              _t4 = _context5.v;
-              console.warn('Error loading brick textures:', _t4);
+              _context3.p = 3;
+              _t3 = _context3.v;
+              console.warn('Error loading brick textures:', _t3);
             case 4:
-              return _context5.a(2);
+              return _context3.a(2);
           }
         }, _callee3, this, [[1, 3]]);
       }));
@@ -25361,23 +25309,23 @@ var EnvironmentManager = /*#__PURE__*/function () {
     key: "initializeEnvironment",
     value: (function () {
       var _initializeEnvironment = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-        return _regenerator().w(function (_context6) {
-          while (1) switch (_context6.n) {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
             case 0:
-              _context6.n = 1;
+              _context4.n = 1;
               return this.createSkybox();
             case 1:
               this.setupLighting();
-              _context6.n = 2;
+              _context4.n = 2;
               return this.addTexturedGround();
             case 2:
-              _context6.n = 3;
+              _context4.n = 3;
               return this.addBrickWalls();
             case 3:
               this.addHorizonFog();
               console.log('Environment initialization completed');
             case 4:
-              return _context6.a(2);
+              return _context4.a(2);
           }
         }, _callee4, this);
       }));
@@ -25418,60 +25366,50 @@ var EnvironmentManager = /*#__PURE__*/function () {
 
     /**
      * Set the skybox type dynamically
-     * @param {string} skyboxType - 'HDR', 'Fallback', or 'Color'
+     * @param {'Procedural'|'HDR'|'Color'} skyboxType
      */
   }, {
     key: "setSkyboxType",
     value: (function () {
       var _setSkyboxType = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(skyboxType) {
-        var component, _component$scene$envi3, _component$scene$back3, _pmremGenerator, _t5, _t6;
-        return _regenerator().w(function (_context7) {
-          while (1) switch (_context7.n) {
+        var component, _component$scene$envi3, _component$scene$back3, _t4, _t5;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
             case 0:
               component = this.sceneViewer;
-              _context7.p = 1;
+              _context5.p = 1;
               console.log("\uD83C\uDF0C Changing skybox type to: ".concat(skyboxType));
 
               // Dispose of current environment textures
-              if ((_component$scene$envi3 = component.scene.environment) !== null && _component$scene$envi3 !== void 0 && _component$scene$envi3.dispose) {
-                component.scene.environment.dispose();
-              }
-              if ((_component$scene$back3 = component.scene.background) !== null && _component$scene$back3 !== void 0 && _component$scene$back3.dispose) {
-                component.scene.background.dispose();
-              }
-              _pmremGenerator = new THREE__namespace.PMREMGenerator(component.renderer);
-              _pmremGenerator.compileEquirectangularShader();
-              _t5 = skyboxType;
-              _context7.n = _t5 === 'HDR' ? 2 : _t5 === 'Fallback' ? 4 : _t5 === 'Color' ? 6 : 7;
+              if ((_component$scene$envi3 = component.scene.environment) !== null && _component$scene$envi3 !== void 0 && _component$scene$envi3.dispose) component.scene.environment.dispose();
+              if ((_component$scene$back3 = component.scene.background) !== null && _component$scene$back3 !== void 0 && _component$scene$back3.dispose) component.scene.background.dispose();
+              _t4 = skyboxType;
+              _context5.n = _t4 === 'Procedural' ? 2 : _t4 === 'HDR' ? 3 : _t4 === 'Color' ? 5 : 6;
               break;
             case 2:
-              _context7.n = 3;
-              return this.loadHDRSkybox(_pmremGenerator);
+              this._applyProceduralSky(component);
+              return _context5.a(3, 7);
             case 3:
-              return _context7.a(3, 8);
+              _context5.n = 4;
+              return this._loadHDRSkybox(component);
             case 4:
-              _context7.n = 5;
-              return this.loadFallbackSkybox(_pmremGenerator);
+              return _context5.a(3, 7);
             case 5:
-              return _context7.a(3, 8);
+              this._setColorBackground(component);
+              return _context5.a(3, 7);
             case 6:
-              this.setColorBackground();
-              return _context7.a(3, 8);
+              console.warn("Unknown skybox type: ".concat(skyboxType, ", using Procedural"));
+              this._applyProceduralSky(component);
             case 7:
-              console.warn("Unknown skybox type: ".concat(skyboxType, ", falling back to HDR"));
-              _context7.n = 8;
-              return this.loadHDRSkybox(_pmremGenerator);
+              console.log("\u2705 Skybox type changed to: ".concat(skyboxType));
+              return _context5.a(2, true);
             case 8:
-              _pmremGenerator.dispose();
-              console.log("Skybox type changed to: ".concat(skyboxType));
-              return _context7.a(2, true);
-            case 9:
-              _context7.p = 9;
-              _t6 = _context7.v;
-              console.error('❌ Error setting skybox type:', _t6);
-              return _context7.a(2, false);
+              _context5.p = 8;
+              _t5 = _context5.v;
+              console.error('❌ Error setting skybox type:', _t5);
+              return _context5.a(2, false);
           }
-        }, _callee5, this, [[1, 9]]);
+        }, _callee5, this, [[1, 8]]);
       }));
       function setSkyboxType(_x) {
         return _setSkyboxType.apply(this, arguments);
@@ -25479,29 +25417,34 @@ var EnvironmentManager = /*#__PURE__*/function () {
       return setSkyboxType;
     }()
     /**
-     * Load HDR skybox specifically
+     * Load HDR skybox on demand (high quality, high memory).
+     * Tries 1k first to save memory; falls back to color on failure.
+     * @private
      */
     )
   }, {
-    key: "loadHDRSkybox",
+    key: "_loadHDRSkybox",
     value: (function () {
-      var _loadHDRSkybox = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(pmremGenerator) {
-        var component, rgbeLoader, hdrPaths, _loop3, _ret3, _i2, _hdrPaths;
-        return _regenerator().w(function (_context9) {
-          while (1) switch (_context9.n) {
+      var _loadHDRSkybox2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(component) {
+        var rgbeLoader, pmremGenerator, hdrPaths, _loop, _ret, _i, _hdrPaths;
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.n) {
             case 0:
-              component = this.sceneViewer;
               rgbeLoader = new RGBELoader();
-              hdrPaths = ['/skyboxes/kloofendal_48d_partly_cloudy_puresky_2k.hdr', '/skyboxes/kloofendal_48d_partly_cloudy_puresky_1k.hdr'];
-              _loop3 = /*#__PURE__*/_regenerator().m(function _loop3() {
-                var path, texture, processedEnvMap, _t7;
-                return _regenerator().w(function (_context8) {
-                  while (1) switch (_context8.n) {
+              pmremGenerator = new THREE__namespace.PMREMGenerator(component.renderer);
+              pmremGenerator.compileEquirectangularShader();
+
+              // Prefer the 1k variant (~20 MB GPU) over 2k (~50 MB GPU)
+              hdrPaths = ['/skyboxes/kloofendal_48d_partly_cloudy_puresky_1k.hdr', '/skyboxes/kloofendal_48d_partly_cloudy_puresky_2k.hdr'];
+              _loop = /*#__PURE__*/_regenerator().m(function _loop() {
+                var path, texture, processedEnvMap, _t6;
+                return _regenerator().w(function (_context6) {
+                  while (1) switch (_context6.n) {
                     case 0:
-                      path = _hdrPaths[_i2];
-                      _context8.p = 1;
+                      path = _hdrPaths[_i];
+                      _context6.p = 1;
                       console.log("\uD83D\uDD04 Loading HDR: ".concat(path));
-                      _context8.n = 2;
+                      _context6.n = 2;
                       return new Promise(function (resolve, reject) {
                         var timeout = setTimeout(function () {
                           return reject(new Error('Timeout'));
@@ -25515,123 +25458,79 @@ var EnvironmentManager = /*#__PURE__*/function () {
                         });
                       });
                     case 2:
-                      texture = _context8.v;
+                      texture = _context6.v;
                       texture.mapping = THREE__namespace.EquirectangularReflectionMapping;
                       processedEnvMap = pmremGenerator.fromEquirectangular(texture).texture;
                       component.scene.environment = processedEnvMap;
                       component.scene.background = processedEnvMap;
                       texture.dispose();
+                      pmremGenerator.dispose();
                       console.log('✅ HDR skybox loaded successfully');
-                      return _context8.a(2, {
+                      return _context6.a(2, {
                         v: void 0
                       });
                     case 3:
-                      _context8.p = 3;
-                      _t7 = _context8.v;
-                      console.warn("\u26A0\uFE0F Failed to load HDR skybox ".concat(path, ":"), _t7.message);
+                      _context6.p = 3;
+                      _t6 = _context6.v;
+                      console.warn("\u26A0\uFE0F Failed to load HDR skybox ".concat(path, ":"), _t6.message);
                     case 4:
-                      return _context8.a(2);
+                      return _context6.a(2);
                   }
-                }, _loop3, null, [[1, 3]]);
+                }, _loop, null, [[1, 3]]);
               });
-              _i2 = 0, _hdrPaths = hdrPaths;
+              _i = 0, _hdrPaths = hdrPaths;
             case 1:
-              if (!(_i2 < _hdrPaths.length)) {
-                _context9.n = 4;
+              if (!(_i < _hdrPaths.length)) {
+                _context7.n = 4;
                 break;
               }
-              return _context9.d(_regeneratorValues(_loop3()), 2);
+              return _context7.d(_regeneratorValues(_loop()), 2);
             case 2:
-              _ret3 = _context9.v;
-              if (!_ret3) {
-                _context9.n = 3;
+              _ret = _context7.v;
+              if (!_ret) {
+                _context7.n = 3;
                 break;
               }
-              return _context9.a(2, _ret3.v);
+              return _context7.a(2, _ret.v);
             case 3:
-              _i2++;
-              _context9.n = 1;
+              _i++;
+              _context7.n = 1;
               break;
             case 4:
+              pmremGenerator.dispose();
               throw new Error('Failed to load any HDR skybox');
             case 5:
-              return _context9.a(2);
+              return _context7.a(2);
           }
-        }, _callee6, this);
+        }, _callee6);
       }));
-      function loadHDRSkybox(_x2) {
-        return _loadHDRSkybox.apply(this, arguments);
+      function _loadHDRSkybox(_x2) {
+        return _loadHDRSkybox2.apply(this, arguments);
       }
-      return loadHDRSkybox;
+      return _loadHDRSkybox;
     }()
     /**
-     * Load fallback JPEG skybox
+     * Set solid color background with basic ambient lighting.
+     * @private
      */
     )
   }, {
-    key: "loadFallbackSkybox",
-    value: (function () {
-      var _loadFallbackSkybox = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(pmremGenerator) {
-        var component, texture, processedEnvMap, _t8;
-        return _regenerator().w(function (_context0) {
-          while (1) switch (_context0.n) {
-            case 0:
-              component = this.sceneViewer;
-              _context0.p = 1;
-              console.log('🔄 Loading fallback skybox');
-              _context0.n = 2;
-              return new Promise(function (resolve, reject) {
-                var timeout = setTimeout(function () {
-                  return reject(new Error('Timeout'));
-                }, 10000);
-                component.textureLoader.load('/skyboxes/sky_fallback.jpg', function (tex) {
-                  clearTimeout(timeout);
-                  resolve(tex);
-                }, undefined, function (err) {
-                  clearTimeout(timeout);
-                  reject(err);
-                });
-              });
-            case 2:
-              texture = _context0.v;
-              texture.mapping = THREE__namespace.EquirectangularReflectionMapping;
-              processedEnvMap = pmremGenerator.fromEquirectangular(texture).texture;
-              component.scene.environment = processedEnvMap;
-              component.scene.background = processedEnvMap;
-              texture.dispose();
-              console.log('✅ Fallback skybox loaded successfully');
-              _context0.n = 4;
-              break;
-            case 3:
-              _context0.p = 3;
-              _t8 = _context0.v;
-              console.warn('⚠️ Failed to load fallback skybox:', _t8.message);
-              throw _t8;
-            case 4:
-              return _context0.a(2);
-          }
-        }, _callee7, this, [[1, 3]]);
-      }));
-      function loadFallbackSkybox(_x3) {
-        return _loadFallbackSkybox.apply(this, arguments);
-      }
-      return loadFallbackSkybox;
-    }()
+    key: "_setColorBackground",
+    value: function _setColorBackground(component) {
+      component.scene.environment = null;
+      component.scene.background = new THREE__namespace.Color(0xffffff);
+      var ambientLight = new THREE__namespace.AmbientLight(0xffffff, 0.6);
+      component.scene.add(ambientLight);
+      console.log('✅ Color background set successfully');
+    }
+
     /**
-     * Set solid color background
+     * Public convenience alias for setColorBackground (backwards compat)
      */
-    )
   }, {
     key: "setColorBackground",
     value: function setColorBackground() {
-      var component = this.sceneViewer;
-      component.scene.environment = null;
-      component.scene.background = new THREE__namespace.Color(0xffffff); // White background
-
-      // Add basic ambient lighting since we don't have environment lighting
-      var ambientLight = new THREE__namespace.AmbientLight(0xffffff, 0.6);
-      component.scene.add(ambientLight);
-      console.log('✅ Color background set successfully');
+      this._setColorBackground(this.sceneViewer);
     }
   }]);
 }();
@@ -31012,18 +30911,32 @@ var AnimationManager = /*#__PURE__*/function (_BaseDisposable) {
       if (sceneViewer.performanceMonitorManager) {
         sceneViewer.performanceMonitorManager.beginFrame();
       }
+      try {
+        // Update controls
+        sceneViewer.controls.update();
 
-      // Update controls
-      sceneViewer.controls.update();
-
-      // Render the scene
-      sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+        // Render the scene
+        sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+      } catch (renderError) {
+        // Catch WebGL or rendering errors to prevent the animation loop from
+        // producing a permanent white screen. Log once and continue so that
+        // subsequent frames can recover if the problematic object is removed.
+        if (!this._hasLoggedRenderError) {
+          console.error('❌ AnimationManager: Render error caught — scene may contain disposed resources:', renderError);
+          this._hasLoggedRenderError = true;
+        }
+      }
 
       // Render tooltips if tooltipsManager exists
       if (sceneViewer.tooltipsManager) {
         sceneViewer.tooltipsManager.render();
       }
 
+      // Update component tooltip screen position
+      if (sceneViewer.componentTooltipManager) {
+        sceneViewer.componentTooltipManager.update();
+      }
+
       // End performance monitoring frame
       if (sceneViewer.performanceMonitorManager) {
         sceneViewer.performanceMonitorManager.endFrame();
@@ -31394,7 +31307,10 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               }
               this.dragData.previewObject = cachedModel.clone();
 
-              // Clone materials to avoid affecting other objects
+              // Clone geometries and materials to fully isolate the preview from the cache.
+              // Without this, disposing the preview would invalidate shared GPU buffers
+              // and cause the scene to go white.
+              this._cloneGeometries(this.dragData.previewObject);
               this._cloneMaterials(this.dragData.previewObject);
 
               // Store original colors BEFORE making transparent
@@ -31533,6 +31449,7 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               return _context3.a(3, 11);
             case 9:
               deviceModel = cachedDevice.clone();
+              this._cloneGeometries(deviceModel);
               this._cloneMaterials(deviceModel);
               this._storeOriginalColors(deviceModel);
               deviceModel.userData = {
@@ -31585,16 +31502,38 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
           if (Array.isArray(child.material)) {
             // Handle material arrays
             child.material = child.material.map(function (material) {
-              return material.clone();
+              var cloned = material.clone();
+              cloned.userData._isClonedMaterial = true;
+              return cloned;
             });
           } else {
             // Handle single materials
             child.material = child.material.clone();
+            child.material.userData._isClonedMaterial = true;
           }
         }
       });
     }
 
+    /**
+     * Clone all geometries in an object hierarchy to avoid shared geometry buffer issues.
+     * Three.js Object3D.clone() shares geometry references between the original and clone.
+     * Disposing shared geometry invalidates GPU buffers for ALL objects using that geometry,
+     * which causes the scene to go white. This method gives each mesh its own geometry copy.
+     * @param {THREE.Object3D} object - The object to clone geometries for
+     * @private
+     */
+  }, {
+    key: "_cloneGeometries",
+    value: function _cloneGeometries(object) {
+      object.traverse(function (child) {
+        if (child.isMesh && child.geometry) {
+          child.geometry = child.geometry.clone();
+          child.userData._isClonedGeometry = true;
+        }
+      });
+    }
+
     /**
      * Store original colors from all materials in an object hierarchy
      * @param {THREE.Object3D} object - The object to store colors from
@@ -31973,18 +31912,27 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
       if (this.dragData.previewObject) {
         this.sceneViewer.scene.remove(this.dragData.previewObject);
 
-        // Dispose of geometry and materials properly
+        // Dispose of CLONED geometry and materials only.
+        // Both geometries and materials were cloned during preview creation
+        // via _cloneGeometries() and _cloneMaterials(), so they are safe to dispose.
+        // IMPORTANT: Never dispose geometry/materials that are shared with the model cache.
         this.dragData.previewObject.traverse(function (child) {
-          if (child.geometry) {
-            child.geometry.dispose();
-          }
-          if (child.material) {
-            if (Array.isArray(child.material)) {
-              child.material.forEach(function (material) {
-                return material.dispose();
-              });
-            } else {
-              child.material.dispose();
+          if (child.isMesh) {
+            // Only dispose geometry if it was cloned for this preview
+            if (child.geometry && child.userData._isClonedGeometry) {
+              child.geometry.dispose();
+            }
+            // Only dispose material if it was cloned for this preview
+            if (child.material) {
+              if (Array.isArray(child.material)) {
+                child.material.forEach(function (material) {
+                  if (material.userData._isClonedMaterial) {
+                    material.dispose();
+                  }
+                });
+              } else if (child.material.userData._isClonedMaterial) {
+                child.material.dispose();
+              }
             }
           }
         });
@@ -33080,6 +33028,317 @@ var SceneTooltipsManager = /*#__PURE__*/function (_BaseDisposable) {
   }]);
 }(BaseDisposable);
 
+// ---------------------------------------------------------------------------
+// Inline styles (injected once into the document head)
+// ---------------------------------------------------------------------------
+var TOOLTIP_STYLES = "\n.cp-tooltip {\n  position: absolute;\n  pointer-events: auto;\n  z-index: 10000;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 13px;\n  line-height: 1.4;\n  user-select: none;\n  min-width: 200px;\n  max-width: 280px;\n  transform: translate(-50%, -100%);\n  margin-top: -12px;\n  transition: opacity 0.15s ease;\n}\n\n.cp-tooltip__card {\n  background: rgba(28, 32, 40, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__header {\n  padding: 10px 14px;\n  font-weight: 600;\n  font-size: 14px;\n  color: #e8ecf1;\n  background: rgba(255, 255, 255, 0.04);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  letter-spacing: 0.2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 I/O Devices section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__io-section {\n  position: relative;\n}\n\n.cp-tooltip__io-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  color: #a4adba;\n  cursor: pointer;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.cp-tooltip__io-trigger:hover {\n  background: rgba(255, 255, 255, 0.06);\n  color: #e8ecf1;\n}\n\n.cp-tooltip__io-trigger-label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.6px;\n  font-weight: 500;\n}\n\n.cp-tooltip__io-arrow {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.cp-tooltip__io-section.expanded .cp-tooltip__io-arrow {\n  transform: rotate(90deg);\n}\n\n/* \u2500\u2500 Device list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__device-list {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.25s ease;\n}\n\n.cp-tooltip__io-section.expanded .cp-tooltip__device-list {\n  max-height: 300px;\n}\n\n.cp-tooltip__device-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 14px 6px 20px;\n  color: #c1c8d1;\n  font-size: 12px;\n  border-top: 1px solid rgba(255, 255, 255, 0.04);\n  transition: background 0.1s ease;\n}\n\n.cp-tooltip__device-item:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n.cp-tooltip__device-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #4fc3f7;\n  flex-shrink: 0;\n}\n\n.cp-tooltip__device-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__no-devices {\n  padding: 8px 14px;\n  color: #6b7280;\n  font-size: 12px;\n  font-style: italic;\n}\n\n/* \u2500\u2500 Caret arrow pointing down \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__caret {\n  width: 0;\n  height: 0;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-top: 7px solid rgba(28, 32, 40, 0.95);\n  margin: 0 auto;\n  position: relative;\n  top: -1px;\n}\n";
+var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
+  /**
+   * @param {Object} sceneViewer - The sceneViewer instance
+   */
+  function ComponentTooltipManager(sceneViewer) {
+    var _this;
+    _classCallCheck(this, ComponentTooltipManager);
+    _this = _callSuper(this, ComponentTooltipManager);
+    _this.sceneViewer = sceneViewer;
+    _this.selectedObject = null;
+    _this.tooltipEl = null;
+    _this._styleInjected = false;
+    _this._ioExpanded = false;
+    _this._injectStyles();
+    return _this;
+  }
+
+  // -----------------------------------------------------------------------
+  // Lifecycle
+  // -----------------------------------------------------------------------
+
+  /**
+   * Called automatically by BaseDisposable.dispose()
+   * @override
+   */
+  _inherits(ComponentTooltipManager, _BaseDisposable);
+  return _createClass(ComponentTooltipManager, [{
+    key: "_doDispose",
+    value: function _doDispose() {
+      this.hide();
+      this._removeStyleTag();
+      this.nullifyProperties('sceneViewer', 'selectedObject', 'tooltipEl');
+    }
+
+    // -----------------------------------------------------------------------
+    // Public API
+    // -----------------------------------------------------------------------
+
+    /**
+     * Should be called when an object is selected or deselected.
+     * @param {THREE.Object3D|null} object
+     */
+  }, {
+    key: "onSelectionChanged",
+    value: function onSelectionChanged(object) {
+      var _object$userData;
+      if (!object) {
+        this.hide();
+        return;
+      }
+      var objectType = (_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType;
+      if (objectType !== 'component') {
+        this.hide();
+        return;
+      }
+      this.selectedObject = object;
+      this._ioExpanded = false;
+      this._buildTooltip(object);
+    }
+
+    /**
+     * Update tooltip screen position. Call once per frame (from the animation loop).
+     */
+  }, {
+    key: "update",
+    value: function update() {
+      if (!this.tooltipEl || !this.selectedObject) return;
+      this._positionTooltip();
+    }
+
+    /**
+     * Remove the tooltip from the DOM.
+     */
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.tooltipEl) {
+        this.tooltipEl.remove();
+        this.tooltipEl = null;
+      }
+      this.selectedObject = null;
+      this._ioExpanded = false;
+    }
+
+    // -----------------------------------------------------------------------
+    // Internal — build
+    // -----------------------------------------------------------------------
+
+    /** Inject the stylesheet once into the document head */
+  }, {
+    key: "_injectStyles",
+    value: function _injectStyles() {
+      if (this._styleInjected) return;
+      this._styleTag = document.createElement('style');
+      this._styleTag.setAttribute('data-cp-tooltip', '');
+      this._styleTag.textContent = TOOLTIP_STYLES;
+      document.head.appendChild(this._styleTag);
+      this._styleInjected = true;
+      this.registerDOMElement(this._styleTag);
+    }
+
+    /** Remove the injected stylesheet */
+  }, {
+    key: "_removeStyleTag",
+    value: function _removeStyleTag() {
+      if (this._styleTag && this._styleTag.parentNode) {
+        this._styleTag.parentNode.removeChild(this._styleTag);
+      }
+      this._styleTag = null;
+      this._styleInjected = false;
+    }
+
+    /**
+     * Gather I/O device children from a component's Three.js hierarchy.
+     * @param {THREE.Object3D} object
+     * @returns {{ label: string, deviceId: string }[]}
+     */
+  }, {
+    key: "_getIODevices",
+    value: function _getIODevices(object) {
+      var devices = [];
+      object.traverse(function (child) {
+        var _child$userData;
+        if (((_child$userData = child.userData) === null || _child$userData === void 0 ? void 0 : _child$userData.objectType) === 'io-device') {
+          devices.push({
+            label: child.userData.attachmentLabel || child.name || child.userData.deviceId || 'Unknown Device',
+            deviceId: child.userData.deviceId || ''
+          });
+        }
+      });
+      return devices;
+    }
+
+    /**
+     * Build and show the tooltip for the given object.
+     * @param {THREE.Object3D} object
+     */
+  }, {
+    key: "_buildTooltip",
+    value: function _buildTooltip(object) {
+      var _this2 = this;
+      // Remove any existing tooltip first
+      this.hide();
+      // Re-assign selected object since hide() clears it
+      this.selectedObject = object;
+      var container = this._getContainer();
+      if (!container) return;
+
+      // Ensure the container supports absolute positioning
+      var containerStyle = window.getComputedStyle(container);
+      if (containerStyle.position === 'static') {
+        container.style.position = 'relative';
+      }
+
+      // Gather data — extract the friendly name, stripping the " (component-id)" suffix
+      var rawName = object.name || '';
+      var componentName = rawName.replace(/\s*\([^)]*\)\s*$/, '') || 'Unnamed Component';
+      var devices = this._getIODevices(object);
+      var isSmart = devices.length > 0;
+
+      // Root element
+      var root = document.createElement('div');
+      root.className = 'cp-tooltip';
+
+      // Card
+      var card = document.createElement('div');
+      card.className = 'cp-tooltip__card';
+
+      // Header
+      var header = document.createElement('div');
+      header.className = 'cp-tooltip__header';
+      header.textContent = componentName;
+      card.appendChild(header);
+
+      // I/O Devices section
+      if (isSmart) {
+        var ioSection = document.createElement('div');
+        ioSection.className = 'cp-tooltip__io-section';
+
+        // Trigger row
+        var trigger = document.createElement('div');
+        trigger.className = 'cp-tooltip__io-trigger';
+        var label = document.createElement('span');
+        label.className = 'cp-tooltip__io-trigger-label';
+        label.textContent = "I/O Devices (".concat(devices.length, ")");
+        var arrow = document.createElement('span');
+        arrow.className = 'cp-tooltip__io-arrow';
+        arrow.textContent = '▶';
+        trigger.appendChild(label);
+        trigger.appendChild(arrow);
+
+        // Device list
+        var list = document.createElement('div');
+        list.className = 'cp-tooltip__device-list';
+        devices.forEach(function (device) {
+          var item = document.createElement('div');
+          item.className = 'cp-tooltip__device-item';
+          var dot = document.createElement('span');
+          dot.className = 'cp-tooltip__device-dot';
+          var name = document.createElement('span');
+          name.className = 'cp-tooltip__device-name';
+          name.textContent = device.label;
+          item.appendChild(dot);
+          item.appendChild(name);
+          list.appendChild(item);
+        });
+        ioSection.appendChild(trigger);
+        ioSection.appendChild(list);
+
+        // Hover expand/collapse
+        trigger.addEventListener('mouseenter', function () {
+          ioSection.classList.add('expanded');
+          _this2._ioExpanded = true;
+        });
+        ioSection.addEventListener('mouseleave', function () {
+          ioSection.classList.remove('expanded');
+          _this2._ioExpanded = false;
+        });
+        card.appendChild(ioSection);
+      } else {
+        // Non-smart: show empty state
+        var noDevices = document.createElement('div');
+        noDevices.className = 'cp-tooltip__no-devices';
+        noDevices.textContent = 'No I/O devices attached';
+        card.appendChild(noDevices);
+      }
+      root.appendChild(card);
+
+      // Caret
+      var caret = document.createElement('div');
+      caret.className = 'cp-tooltip__caret';
+      root.appendChild(caret);
+
+      // Prevent clicks on tooltip from propagating to the scene
+      root.addEventListener('pointerdown', function (e) {
+        return e.stopPropagation();
+      });
+      root.addEventListener('click', function (e) {
+        return e.stopPropagation();
+      });
+
+      // Add to the renderer container so coordinates are relative to the viewport
+      container.appendChild(root);
+      this.tooltipEl = root;
+
+      // Initial positioning
+      this._positionTooltip();
+    }
+
+    // -----------------------------------------------------------------------
+    // Internal — positioning
+    // -----------------------------------------------------------------------
+
+    /**
+     * Project the selected object's world position to screen space and
+     * position the tooltip element accordingly.
+     */
+  }, {
+    key: "_positionTooltip",
+    value: function _positionTooltip() {
+      var _this$sceneViewer, _this$sceneViewer2;
+      if (!this.tooltipEl || !this.selectedObject) return;
+      var container = this._getContainer();
+      var camera = (_this$sceneViewer = this.sceneViewer) === null || _this$sceneViewer === void 0 ? void 0 : _this$sceneViewer.camera;
+      var renderer = (_this$sceneViewer2 = this.sceneViewer) === null || _this$sceneViewer2 === void 0 ? void 0 : _this$sceneViewer2.renderer;
+      if (!container || !camera || !renderer) return;
+
+      // Compute bounding box to position above the component
+      var box = new THREE__namespace.Box3().setFromObject(this.selectedObject);
+      var center = box.getCenter(new THREE__namespace.Vector3());
+      // Use top of bounding box (Z-up)
+      var topZ = box.max.z;
+      var worldPos = new THREE__namespace.Vector3(center.x, center.y, topZ);
+
+      // Project to NDC
+      var ndc = worldPos.clone().project(camera);
+
+      // NDC to pixel coords relative to the container
+      var rect = container.getBoundingClientRect();
+      var x = (ndc.x + 1) / 2 * rect.width;
+      var y = (-ndc.y + 1) / 2 * rect.height;
+
+      // Hide if behind camera
+      if (ndc.z > 1) {
+        this.tooltipEl.style.display = 'none';
+        return;
+      }
+      this.tooltipEl.style.display = '';
+      this.tooltipEl.style.left = "".concat(x, "px");
+      this.tooltipEl.style.top = "".concat(y, "px");
+    }
+
+    /**
+     * Get the DOM element where the Three.js canvas currently lives.
+     * In QuadViewport the canvas is moved out of the original hidden
+     * container, so we must use the renderer's actual parent element.
+     * @returns {HTMLElement|null}
+     */
+  }, {
+    key: "_getContainer",
+    value: function _getContainer() {
+      var _this$sceneViewer3;
+      return ((_this$sceneViewer3 = this.sceneViewer) === null || _this$sceneViewer3 === void 0 || (_this$sceneViewer3 = _this$sceneViewer3.renderer) === null || _this$sceneViewer3 === void 0 || (_this$sceneViewer3 = _this$sceneViewer3.domElement) === null || _this$sceneViewer3 === void 0 ? void 0 : _this$sceneViewer3.parentElement) || null;
+    }
+  }]);
+}(BaseDisposable);
+
 /**
  * Viewport2DInstance
  * Represents a single 2D viewport with its own Konva stage and configuration
@@ -34338,6 +34597,11 @@ var CentralPlantInternals = /*#__PURE__*/function () {
         this.centralPlant.managers.tooltipsManager = new SceneTooltipsManager(this.centralPlant.sceneViewer.$refs.container, this.centralPlant.sceneViewer.camera, this.centralPlant.sceneViewer.scene);
         this.centralPlant.sceneViewer.tooltipsManager = this.centralPlant.managers.tooltipsManager;
         console.log('🔍 Tooltip manager initialized:', this.centralPlant.managers.tooltipsManager);
+
+        // Initialize the component tooltip manager (screen-space tooltip on selection)
+        this.centralPlant.managers.componentTooltipManager = new ComponentTooltipManager(this.centralPlant.sceneViewer);
+        this.centralPlant.sceneViewer.componentTooltipManager = this.centralPlant.managers.componentTooltipManager;
+        console.log('🔍 Component tooltip manager initialized');
       }
     }
 
@@ -35088,8 +35352,21 @@ var CentralPlantInternals = /*#__PURE__*/function () {
         // Clone the cached model to create a new instance
         var componentModel = cachedModel;
 
-        // Set the component properties
-        componentModel.uuid = componentId;
+        // Clone materials to isolate this component instance from the model cache.
+        // Without this, shared materials would cause visual side-effects when one
+        // component's material is modified (e.g., selection highlighting).
+        componentModel.traverse(function (child) {
+          if (child.isMesh && child.material) {
+            if (Array.isArray(child.material)) {
+              child.material = child.material.map(function (m) {
+                return m.clone();
+              });
+            } else {
+              child.material = child.material.clone();
+            }
+          }
+        });
+
         // Set the component properties
         componentModel.uuid = componentId;
 
@@ -35446,7 +35723,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.1.78
+   * @version 0.1.80
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.
@@ -37714,7 +37991,7 @@ var sceneViewer = /*#__PURE__*/function (_BaseDisposable) {
               this.centralPlant.attachToComponent();
 
               // Sync our managers tracking object after attachment
-              managerKeys = ['threeJSResourceManager', 'performanceMonitorManager', 'settingsManager', 'sceneExportManager', 'componentManager', 'sceneInitializationManager', 'environmentManager', 'keyboardControlsManager', 'pathfindingManager', 'sceneOperationsManager', 'animationManager', 'cameraControlsManager', 'componentDragManager', 'tooltipsManager']; // Populate our managers tracking object
+              managerKeys = ['threeJSResourceManager', 'performanceMonitorManager', 'settingsManager', 'sceneExportManager', 'componentManager', 'sceneInitializationManager', 'environmentManager', 'keyboardControlsManager', 'pathfindingManager', 'sceneOperationsManager', 'animationManager', 'cameraControlsManager', 'componentDragManager', 'tooltipsManager', 'componentTooltipManager']; // Populate our managers tracking object
               managerKeys.forEach(function (key) {
                 if (_this2[key]) {
                   _this2.managers[key] = _this2[key];
@@ -37992,6 +38269,10 @@ var sceneViewer = /*#__PURE__*/function (_BaseDisposable) {
       this.transformManager.on({
         onModeChange: this.onModeChange.bind(this),
         onSelectionChanged: function onSelectionChanged(object) {
+          // Update the component tooltip on selection changes
+          if (_this4.componentTooltipManager) {
+            _this4.componentTooltipManager.onSelectionChanged(object);
+          }
           if (object) {
             var _object$userData;
             // Object selected
@@ -38417,6 +38698,12 @@ var sceneViewer = /*#__PURE__*/function (_BaseDisposable) {
         this.tooltipsManager = null;
       }
 
+      // Clean up component tooltip manager
+      if (this.componentTooltipManager) {
+        this.componentTooltipManager.dispose('ComponentTooltipManager');
+        this.componentTooltipManager = null;
+      }
+
       // Fallback cleanup if Three.js resource manager not available
       if (!this.threeJSResourceManager) {
         // Fallback cleanup if disposal manager not available
@@ -41044,6 +41331,19 @@ var Rendering3D = /*#__PURE__*/function (_BaseDisposable) {
         this.renderer.useLegacyLights = false;
         container.appendChild(this.renderer.domElement);
 
+        // Register WebGL context lost/restored handlers for resilience.
+        // If the GPU context is lost (e.g., due to disposed buffers or driver issues),
+        // these handlers prevent a permanent white screen.
+        this._onContextLost = function (event) {
+          event.preventDefault();
+          console.warn('⚠️ WebGL context lost — rendering paused. The browser may restore it automatically.');
+        };
+        this._onContextRestored = function () {
+          console.log('✅ WebGL context restored — rendering will resume.');
+        };
+        this.renderer.domElement.addEventListener('webglcontextlost', this._onContextLost, false);
+        this.renderer.domElement.addEventListener('webglcontextrestored', this._onContextRestored, false);
+
         // Register resources for automatic cleanup
         this.registerDOMElement(this.renderer.domElement);
         this.registerDisposable(this.renderer, 'WebGLRenderer');
@@ -41254,6 +41554,18 @@ var Rendering3D = /*#__PURE__*/function (_BaseDisposable) {
         frameTime: 0
       };
 
+      // Remove WebGL context event listeners
+      if (this.renderer && this.renderer.domElement) {
+        if (this._onContextLost) {
+          this.renderer.domElement.removeEventListener('webglcontextlost', this._onContextLost, false);
+        }
+        if (this._onContextRestored) {
+          this.renderer.domElement.removeEventListener('webglcontextrestored', this._onContextRestored, false);
+        }
+      }
+      this._onContextLost = null;
+      this._onContextRestored = null;
+
       // Clear post processing
       this.postProcessing = {
         composer: null,
@@ -41278,6 +41590,7 @@ exports.CentralPlant = CentralPlant;
 exports.ComponentDataManager = ComponentDataManager;
 exports.ComponentDragManager = ComponentDragManager;
 exports.ComponentManager = ComponentManager;
+exports.ComponentTooltipManager = ComponentTooltipManager;
 exports.EnvironmentManager = EnvironmentManager;
 exports.KeyboardControlsManager = KeyboardControlsManager;
 exports.ModelManager = ModelManager;