@2112-lab/central-plant 0.1.78 → 0.1.80

package/dist/cjs/src/managers/environment/textureConfig.js

@@ -25,6 +25,8 @@ function _interopNamespace(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 
+/** 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: {
@@ -161,10 +163,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 = _rollupPluginBabelHelpers.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, {

package/dist/cjs/src/managers/scene/animationManager.js

@@ -62,18 +62,32 @@ var AnimationManager = /*#__PURE__*/function (_BaseDisposable) {
       if (sceneViewer.performanceMonitorManager) {
         sceneViewer.performanceMonitorManager.beginFrame();
       }
-
-      // Update controls
-      sceneViewer.controls.update();
-
-      // Render the scene
-      sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+      try {
+        // Update controls
+        sceneViewer.controls.update();
+
+        // 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();

package/dist/cjs/src/managers/scene/componentTooltipManager.js

@@ -0,0 +1,340 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var THREE = require('three');
+var baseDisposable = require('../../core/baseDisposable.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+// ---------------------------------------------------------------------------
+// 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;
+    _rollupPluginBabelHelpers.classCallCheck(this, ComponentTooltipManager);
+    _this = _rollupPluginBabelHelpers.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
+   */
+  _rollupPluginBabelHelpers.inherits(ComponentTooltipManager, _BaseDisposable);
+  return _rollupPluginBabelHelpers.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.BaseDisposable);
+
+exports.ComponentTooltipManager = ComponentTooltipManager;

package/dist/cjs/src/rendering/rendering3D.js

@@ -480,6 +480,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');
@@ -690,6 +703,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,

package/dist/esm/src/core/centralPlant.js

@@ -15,7 +15,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.

package/dist/esm/src/core/centralPlantInternals.js

@@ -19,6 +19,7 @@ import { AnimationManager } from '../managers/scene/animationManager.js';
 import { CameraControlsManager } from '../managers/controls/cameraControlsManager.js';
 import { ComponentDragManager } from '../managers/controls/componentDragManager.js';
 import { SceneTooltipsManager } from '../managers/scene/sceneTooltipsManager.js';
+import { ComponentTooltipManager } from '../managers/scene/componentTooltipManager.js';
 import { Viewport2DManager } from '../managers/scene/viewport2DManager.js';
 import { generateUuidFromName, getHardcodedUuid, findObjectByHardcodedUuid, generateUniqueComponentId } from '../utils/nameUtils.js';
 import modelPreloader from '../rendering/modelPreloader.js';
@@ -151,6 +152,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');
       }
     }
 
@@ -901,8 +907,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;
 

package/dist/esm/src/core/sceneViewer.js

@@ -98,7 +98,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];
@@ -376,6 +376,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
@@ -801,6 +805,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

package/dist/esm/src/index.js

@@ -7,6 +7,7 @@ export { SceneInitializationManager } from './managers/scene/sceneInitialization
 export { SceneOperationsManager } from './managers/scene/sceneOperationsManager.js';
 export { SceneExportManager } from './managers/scene/sceneExportManager.js';
 export { SceneTooltipsManager } from './managers/scene/sceneTooltipsManager.js';
+export { ComponentTooltipManager } from './managers/scene/componentTooltipManager.js';
 export { SceneHierarchyManager } from './managers/scene/sceneHierarchyManager.js';
 export { ComponentManager } from './managers/components/componentManager.js';
 export { AnimationManager } from './managers/scene/animationManager.js';

package/dist/esm/src/managers/controls/componentDragManager.js

@@ -228,7 +228,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
@@ -367,6 +370,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 = {
@@ -419,16 +423,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
@@ -807,18 +833,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();
+              }
             }
           }
         });