@2112-lab/central-plant 0.1.0 → 0.1.1

package/dist/bundle/index.js

@@ -528,17 +528,17 @@ var debugLogger = /*#__PURE__*/Object.freeze({
   materialLogger: materialLogger
 });
 
-/**
- * Animation Manager
- * Handles animation loops and timing
+/**
+ * Animation Manager
+ * Handles animation loops and timing
  */
 var animationFrameId = null;
 var isAnimating = false;
 var lastTime = 0;
 var callbacks = [];
 
-/**
- * Start the animation loop
+/**
+ * Start the animation loop
  */
 function startAnimation(component) {
   if (isAnimating) return;
@@ -573,8 +573,8 @@ function startAnimation(component) {
   logger.info('Animation loop started');
 }
 
-/**
- * Stop the animation loop
+/**
+ * Stop the animation loop
  */
 function stopAnimation() {
   if (!isAnimating) return;
@@ -586,8 +586,8 @@ function stopAnimation() {
   logger.info('Animation loop stopped');
 }
 
-/**
- * Register an animation callback
+/**
+ * Register an animation callback
  */
 function addAnimationCallback(callback) {
   if (typeof callback !== 'function') {
@@ -598,8 +598,8 @@ function addAnimationCallback(callback) {
   return callback;
 }
 
-/**
- * Remove an animation callback
+/**
+ * Remove an animation callback
  */
 function removeAnimationCallback(callback) {
   var index = callbacks.indexOf(callback);
@@ -610,8 +610,8 @@ function removeAnimationCallback(callback) {
   return false;
 }
 
-/**
- * Execute all registered animation callbacks
+/**
+ * Execute all registered animation callbacks
  */
 function executeCallbacks(time, deltaTime) {
   callbacks.forEach(function (callback) {
@@ -623,8 +623,8 @@ function executeCallbacks(time, deltaTime) {
   });
 }
 
-/**
- * Check if animation is running
+/**
+ * Check if animation is running
  */
 function isAnimationRunning() {
   return isAnimating;
@@ -647,15 +647,15 @@ var animationManager$1 = /*#__PURE__*/Object.freeze({
   'default': animationManager
 });
 
-/**
- * Load a component from data
+/**
+ * Load a component from data
  */
 function loadComponent(_x) {
   return _loadComponent.apply(this, arguments);
 }
 
-/**
- * Place a component in the scene
+/**
+ * Place a component in the scene
  */
 function _loadComponent() {
   _loadComponent = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(componentData) {
@@ -716,8 +716,8 @@ function placeComponent(component, position, rotation, scene) {
   return component;
 }
 
-/**
- * Remove a component from the scene
+/**
+ * Remove a component from the scene
  */
 function removeComponent(componentId, scene) {
   if (!scene) {
@@ -742,8 +742,8 @@ function removeComponent(componentId, scene) {
   }
 }
 
-/**
- * Get a component by ID
+/**
+ * Get a component by ID
  */
 function getComponentById(id, scene) {
   if (!scene) {
@@ -774,8 +774,8 @@ var componentManager$1 = /*#__PURE__*/Object.freeze({
   'default': componentManager
 });
 
-/**
- * Dispose a Three.js object including geometry, material, and textures
+/**
+ * Dispose a Three.js object including geometry, material, and textures
  */
 function disposeObject(object) {
   if (!object) return;
@@ -806,8 +806,8 @@ function disposeObject(object) {
   }
 }
 
-/**
- * Dispose a Three.js material and its textures
+/**
+ * Dispose a Three.js material and its textures
  */
 function disposeMaterial(material) {
   if (!material) return;
@@ -824,8 +824,8 @@ function disposeMaterial(material) {
   material.dispose();
 }
 
-/**
- * Clean up a Three.js scene
+/**
+ * Clean up a Three.js scene
  */
 function cleanupScene(scene) {
   if (!scene) {
@@ -842,8 +842,8 @@ function cleanupScene(scene) {
   logger.info('Scene cleared and disposed');
 }
 
-/**
- * Clean up a Three.js renderer
+/**
+ * Clean up a Three.js renderer
  */
 function cleanupRenderer(renderer) {
   if (!renderer) {
@@ -860,8 +860,8 @@ function cleanupRenderer(renderer) {
   logger.info('Renderer disposed');
 }
 
-/**
- * Clean up Nuxt-specific event listeners
+/**
+ * Clean up Nuxt-specific event listeners
  */
 function cleanupNuxtEventListeners() {
   if (typeof window === 'undefined' || !window.$nuxt) {
@@ -876,8 +876,8 @@ function cleanupNuxtEventListeners() {
   }
 }
 
-/**
- * Comprehensive cleanup of Three.js resources
+/**
+ * Comprehensive cleanup of Three.js resources
  */
 function cleanupThreeJsResources(component) {
   if (!component) return;
@@ -938,6 +938,47 @@ var disposalManager$1 = /*#__PURE__*/Object.freeze({
 // We'll need to import RGBELoader from three examples
 var RGBELoader$2;
 
+/**
+ * Helper function to get asset paths that works in both bundled and modular contexts
+ * @param {string} assetPath - Relative path from the assets directory
+ * @returns {string} - The full path to the asset
+ */
+function getAssetPath$1(assetPath) {
+  // Strip leading slash if present
+  if (assetPath.startsWith('/')) {
+    assetPath = assetPath.substring(1);
+  }
+
+  // In browser context, check for different module formats
+  if (typeof window !== 'undefined') {
+    // For bundled version, assets should be in dist/bundle/assets/
+    // For ESM/CJS, assets should be in their respective folders
+
+    // Try to determine if we're using the bundled version or ESM/CJS
+    var isBundled = typeof CentralPlantUtils !== 'undefined';
+
+    // Check if we're running in a Nuxt.js environment (localhost:3000 is a common dev server)
+    var isNuxtEnv = window.location.hostname === 'localhost' && (window.location.port === '3000' || window.location.port === '3001');
+    if (isNuxtEnv) {
+      // In Nuxt.js environment, assets are likely in the /static directory at the root
+      return "/".concat(assetPath); // No /assets/ prefix in the URL path
+    } else if (isBundled) {
+      // Get the base URL for the module
+      var baseUrl = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.js', document.baseURI).href));
+      // In bundled format, assets are in the assets folder next to the bundle
+      return new URL("./assets/".concat(assetPath), baseUrl).href;
+    } else {
+      // Get the base URL for the module
+      var _baseUrl = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.js', document.baseURI).href));
+      // In ESM/CJS format, need to go up relative to current module path
+      return new URL("../assets/".concat(assetPath), _baseUrl).href;
+    }
+  }
+
+  // In Node.js context
+  return "assets/".concat(assetPath);
+}
+
 // Dynamic import for browser compatibility
 function importThreeLoaders() {
   return _importThreeLoaders.apply(this, arguments);
@@ -974,13 +1015,17 @@ function _importThreeLoaders() {
   }));
   return _importThreeLoaders.apply(this, arguments);
 }
-var loadTextureSetAndCreateMaterial$1;
+var textureConfig$2 = {
+  loadTextureSetAndCreateMaterial: null,
+  checkThreeJSCompatibility: null,
+  forceUpdateMaterials: null
+};
 function importTextureConfig() {
   return _importTextureConfig.apply(this, arguments);
 }
 function _importTextureConfig() {
   _importTextureConfig = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
-    var module, _t1;
+    var module, importedFunctions, _t1;
     return _regenerator().w(function (_context1) {
       while (1) switch (_context1.n) {
         case 0:
@@ -994,8 +1039,28 @@ function _importTextureConfig() {
           return Promise.resolve().then(function () { return textureConfig$1; });
         case 2:
           module = _context1.v;
-          loadTextureSetAndCreateMaterial$1 = module.loadTextureSetAndCreateMaterial;
-          console.log('✅ TextureConfig imported successfully:', loadTextureSetAndCreateMaterial$1 ? 'Available' : 'Undefined');
+          // Store all exported functions
+          textureConfig$2.loadTextureSetAndCreateMaterial = module.loadTextureSetAndCreateMaterial;
+          textureConfig$2.checkThreeJSCompatibility = module.checkThreeJSCompatibility;
+          textureConfig$2.forceUpdateMaterials = module.forceUpdateMaterials;
+
+          // Check what was successfully imported
+          importedFunctions = Object.entries(textureConfig$2).filter(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2);
+              _ref3[0];
+              var fn = _ref3[1];
+            return typeof fn === 'function';
+          }).map(function (_ref4) {
+            var _ref5 = _slicedToArray(_ref4, 1),
+              name = _ref5[0];
+            return name;
+          });
+          console.log("\u2705 TextureConfig imported successfully with functions: ".concat(importedFunctions.join(', ')));
+
+          // Run compatibility check if available
+          if (typeof textureConfig$2.checkThreeJSCompatibility === 'function') {
+            textureConfig$2.checkThreeJSCompatibility();
+          }
           return _context1.a(2, true);
         case 3:
           _context1.p = 3;
@@ -1051,15 +1116,15 @@ var EnvironmentManager = /*#__PURE__*/function () {
       }
       return initLoaders;
     }()
-    /**
-     * Create skybox with HDR environment mapping
+    /**
+     * Create skybox with HDR environment mapping
      */
   }, {
     key: "createSkybox",
     value: (function () {
       var _createSkybox = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
         var _this = this;
-        var component, isContextLost, pmremGenerator, loaders, applyEnvironmentMap, _loop, _ret, _i, _loaders, _t4, _t5, _t6;
+        var component, isContextLost, pmremGenerator, hdrPath1, hdrPath2, jpgPath, loaders, applyEnvironmentMap, _loop, _ret, _i, _loaders, _t4, _t5, _t6;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.n) {
             case 0:
@@ -1126,22 +1191,23 @@ var EnvironmentManager = /*#__PURE__*/function () {
               this.createFallbackEnvironment();
               return _context4.a(2);
             case 9:
+              // Get resolved paths for better debugging
+              hdrPath1 = getAssetPath$1('skyboxes/kloofendal_48d_partly_cloudy_puresky_2k.hdr');
+              hdrPath2 = getAssetPath$1('skyboxes/kloofendal_48d_partly_cloudy_puresky_1k.hdr');
+              jpgPath = getAssetPath$1('skyboxes/sky_fallback.jpg');
+              console.log('🔍 Resolved HDR paths:', {
+                hdr2k: hdrPath1,
+                hdr1k: hdrPath2,
+                jpg: jpgPath
+              });
               loaders = [{
                 type: 'hdr',
                 loader: new RGBELoader$2(),
-                paths: [
-                // Try local paths first
-                '/skyboxes/kloofendal_48d_partly_cloudy_puresky_2k.hdr', '/skyboxes/kloofendal_48d_partly_cloudy_puresky_1k.hdr',
-                // Fall back to S3 paths
-                'https://central-plant-assets.s3.us-east-1.amazonaws.com/skyboxes/kloofendal_48d_partly_cloudy_puresky_2k.hdr', 'https://central-plant-assets.s3.us-east-1.amazonaws.com/skyboxes/kloofendal_48d_partly_cloudy_puresky_1k.hdr']
+                paths: [hdrPath1, hdrPath2]
               }, {
                 type: 'jpeg',
                 loader: component.textureLoader || new THREE__namespace.TextureLoader(),
-                paths: [
-                // Try local paths first
-                '/skyboxes/sky_fallback.jpg',
-                // Fall back to S3 path
-                'https://central-plant-assets.s3.us-east-1.amazonaws.com/skyboxes/sky_fallback.jpg']
+                paths: [jpgPath]
               }]; // Configure texture loaders with CORS settings
               loaders.forEach(function (_ref) {
                 var loader = _ref.loader;
@@ -1208,7 +1274,7 @@ var EnvironmentManager = /*#__PURE__*/function () {
                             case 0:
                               path = _step.value;
                               _context2.p = 1;
-                              if (!path.startsWith('/')) {
+                              if (!(path.startsWith('/') && !path.includes('://'))) {
                                 _context2.n = 3;
                                 break;
                               }
@@ -1348,8 +1414,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
       }
       return createSkybox;
     }()
-    /**
-     * Create a fallback environment when renderer issues occur
+    /**
+     * Create a fallback environment when renderer issues occur
      */
     )
   }, {
@@ -1369,8 +1435,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
       component.scene.background = new THREE__namespace.Color(0x87CEEB);
     }
 
-    /**
-     * Create procedural sky when textures fail to load
+    /**
+     * Create procedural sky when textures fail to load
      */
   }, {
     key: "createProceduralSky",
@@ -1410,8 +1476,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Setup scene lighting
+    /**
+     * Setup scene lighting
      */
   }, {
     key: "setupLighting",
@@ -1460,8 +1526,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
       logger.info('Scene lighting setup complete');
     }
 
-    /**
-     * Create ground plane
+    /**
+     * Create ground plane
      */
   }, {
     key: "createGround",
@@ -1495,8 +1561,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
       return ground;
     }
 
-    /**
-     * Create walls for the environment
+    /**
+     * Create walls for the environment
      */
   }, {
     key: "createWalls",
@@ -1560,8 +1626,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
       return walls;
     }
 
-    /**
-     * Set fog in the scene
+    /**
+     * Set fog in the scene
      */
   }, {
     key: "setFog",
@@ -1575,15 +1641,15 @@ var EnvironmentManager = /*#__PURE__*/function () {
       }
       component.scene.fog = new THREE__namespace.FogExp2(color, density);
       logger.info('Scene fog applied');
-    }
-    /**
-     * Initialize the default environment
-     */
+    } /**
+      * Initialize the default environment
+      */
   }, {
     key: "initializeEnvironment",
     value: (function () {
       var _initializeEnvironment = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-        var component, loadersReady, textureConfigReady, _t7;
+        var _this2 = this;
+        var component, loadersReady, textureConfigReady, ground, walls, _t7;
         return _regenerator().w(function (_context5) {
           while (1) switch (_context5.n) {
             case 0:
@@ -1609,39 +1675,91 @@ var EnvironmentManager = /*#__PURE__*/function () {
               _t7 = _context5.v;
               console.warn('⚠️ Error initializing environment loaders:', _t7);
             case 5:
-              // Configure renderer for proper HDR rendering if it exists
-              if (component && component.renderer) {
-                // Ensure proper tone mapping is set for HDR
+              if (component) {
+                _context5.n = 6;
+                break;
+              }
+              logger.error('❌ Cannot initialize environment: component is null');
+              return _context5.a(2);
+            case 6:
+              if (component.renderer) {
+                _context5.n = 7;
+                break;
+              }
+              logger.error('❌ Cannot initialize environment: renderer is null');
+              return _context5.a(2);
+            case 7:
+              // Configure renderer for proper HDR rendering
+              console.log('🎨 Configuring renderer for environment...');
+
+              // Don't override existing settings from sceneInitializationManager
+              // Just ensure we have reasonable values set
+              if (!component.renderer.toneMapping) {
                 component.renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping;
-                component.renderer.toneMappingExposure = 1.0;
-                // For all Three.js versions from r152+
-                if (component.renderer.outputColorSpace !== undefined) {
-                  component.renderer.outputColorSpace = THREE__namespace.SRGBColorSpace;
-                }
-                // For older Three.js versions (legacy support)
-                else if (component.renderer.outputEncoding !== undefined) {
-                  component.renderer.outputEncoding = THREE__namespace.sRGBEncoding;
-                }
-                logger.info("Renderer configured for HDR:\n        - Tone mapping: ".concat(component.renderer.toneMapping, "\n        - Color space: ").concat(component.renderer.outputColorSpace || component.renderer.outputEncoding));
               }
+              component.renderer.toneMappingExposure = 1.0;
+
+              // Ensure correct color space is set based on Three.js version
+              if (component.renderer.outputColorSpace !== undefined) {
+                component.renderer.outputColorSpace = THREE__namespace.SRGBColorSpace; // For newer Three.js
+                console.log('✅ Set SRGBColorSpace for renderer (newer Three.js)');
+              } else if (component.renderer.outputEncoding !== undefined) {
+                component.renderer.outputEncoding = THREE__namespace.sRGBEncoding; // For older Three.js
+                console.log('✅ Set sRGBEncoding for renderer (older Three.js)');
+              }
+              logger.info("Renderer configured for HDR:\n      - Tone mapping: ".concat(component.renderer.toneMapping, "\n      - Color space: ").concat(component.renderer.outputColorSpace || component.renderer.outputEncoding));
 
               // Create skybox (includes base lighting)
-              _context5.n = 6;
+              _context5.n = 8;
               return this.createSkybox();
-            case 6:
+            case 8:
               // Add additional lighting
               this.setupLighting();
 
               // Use textured ground instead of basic ground
-              _context5.n = 7;
+              console.log('🌍 Creating ground with texture...');
+              _context5.n = 9;
               return this.addTexturedGround();
-            case 7:
-              // No walls or fog by default
-              // await this.addBrickWalls();
-              // this.addHorizonFog();
+            case 9:
+              ground = _context5.v;
+              if (!ground) {
+                logger.error('❌ Failed to create textured ground');
+              } else {
+                logger.info('✅ Ground created successfully');
+              }
 
-              logger.info('Environment initialization complete');
-            case 8:
+              // Add walls with textures
+              console.log('🧱 Creating walls with textures...');
+              _context5.n = 10;
+              return this.addBrickWalls();
+            case 10:
+              walls = _context5.v;
+              if (!walls || walls.length === 0) {
+                logger.warn('⚠️ No walls were created');
+              } else {
+                logger.info("\u2705 Created ".concat(walls.length, " walls"));
+              }
+
+              // Add atmospheric fog
+              this.addHorizonFog();
+              logger.info('Environment initialization complete'); // Force material refresh to ensure textures are applied correctly
+              this.forceRefreshMaterials();
+
+              // Force renderer refresh
+              if (component.renderer && component.scene && component.camera) {
+                component.renderer.render(component.scene, component.camera);
+                console.log('🔄 Forced initial render to refresh scene');
+
+                // Schedule another render after a short delay to catch any async texture loading
+                setTimeout(function () {
+                  if (component.renderer && !component.isDestroyed) {
+                    _this2.forceRefreshMaterials();
+                    component.renderer.render(component.scene, component.camera);
+                    console.log('🔄 Performed delayed render to catch async texture loads');
+                  }
+                }, 1000);
+              }
+            case 11:
               return _context5.a(2);
           }
         }, _callee3, this, [[1, 4]]);
@@ -1651,74 +1769,149 @@ var EnvironmentManager = /*#__PURE__*/function () {
       }
       return initializeEnvironment;
     }()
-    /**
-     * Add textured ground with materials from textureConfig
+    /**
+     * Add textured ground with materials from textureConfig
      */
     )
   }, {
     key: "addTexturedGround",
     value: (function () {
       var _addTexturedGround = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-        var component, groundMaterial, groundGeometry, ground, _t8;
+        var component, groundMaterial, debugMaterial, groundGeometry, ground, debugGround, errorGeometry, errorMaterial, errorGround, _t8;
         return _regenerator().w(function (_context6) {
           while (1) switch (_context6.n) {
             case 0:
-              if (loadTextureSetAndCreateMaterial$1) {
-                _context6.n = 1;
+              if (textureConfig$2.loadTextureSetAndCreateMaterial) {
+                _context6.n = 2;
                 break;
               }
+              console.log('🔄 TextureConfig module not yet loaded, importing now...');
               _context6.n = 1;
               return importTextureConfig();
             case 1:
+              if (textureConfig$2.loadTextureSetAndCreateMaterial) {
+                _context6.n = 2;
+                break;
+              }
+              console.error('❌ Failed to load textureConfig module, falling back to basic ground');
+              return _context6.a(2, this.createGround());
+            case 2:
               component = this.component;
               if (!(!component || !component.scene)) {
-                _context6.n = 2;
+                _context6.n = 3;
                 break;
               }
               logger.warn('Cannot create textured ground: component or scene not available');
               return _context6.a(2, null);
-            case 2:
+            case 3:
+              // Force texture loading with crossOrigin support
+              if (!component.textureLoader) {
+                console.log('🔄 Creating texture loader in component');
+                component.textureLoader = new THREE__namespace.TextureLoader();
+                component.textureLoader.setCrossOrigin('anonymous');
+              }
+
               // Remove existing ground if present
               component.scene.traverse(function (object) {
                 if (object.userData && object.userData.type === 'ground') {
                   component.scene.remove(object);
                 }
               });
-              _context6.p = 3;
-              _context6.n = 4;
-              return loadTextureSetAndCreateMaterial$1(component, 'gravel_embedded_concrete');
-            case 4:
+              _context6.p = 4;
+              console.log('🌍 Creating textured ground plane...');
+              // Use the gravel_embedded_concrete texture set
+              console.log('🔄 Loading ground material textures...');
+              _context6.n = 5;
+              return textureConfig$2.loadTextureSetAndCreateMaterial(component, 'gravel_embedded_concrete');
+            case 5:
               groundMaterial = _context6.v;
-              groundGeometry = new THREE__namespace.PlaneGeometry(100, 100);
+              if (groundMaterial) {
+                _context6.n = 6;
+                break;
+              }
+              throw new Error('Failed to create ground material');
+            case 6:
+              console.log('✅ Ground material created');
+
+              // First create a colored material to verify the mesh creation works
+              debugMaterial = new THREE__namespace.MeshBasicMaterial({
+                color: 0x22ff22,
+                // Bright green for visibility 
+                wireframe: false,
+                side: THREE__namespace.DoubleSide
+              }); // Create a composite ground with both materials
+              groundGeometry = new THREE__namespace.PlaneGeometry(100, 100); // Create the main ground mesh
               ground = new THREE__namespace.Mesh(groundGeometry, groundMaterial);
               ground.rotation.x = -Math.PI / 2; // Rotate to be horizontal
               ground.position.y = -0.01; // Slightly below origin
               ground.receiveShadow = true;
 
+              // Create a debug ground mesh slightly below the main ground
+              debugGround = new THREE__namespace.Mesh(groundGeometry, debugMaterial);
+              debugGround.rotation.x = -Math.PI / 2;
+              debugGround.position.y = -0.02; // Below the main ground
+              debugGround.visible = false; // Hide by default
+
               // Set user data for identification
               ground.userData = {
                 isEnvironmentObject: true,
+                isBaseGround: true,
                 type: 'ground'
               };
+              debugGround.userData = {
+                isEnvironmentObject: true,
+                type: 'ground-debug'
+              };
+
+              // Add both to scene
               component.scene.add(ground);
+              component.scene.add(debugGround);
+
+              // Log some properties about the created ground
+              console.log('🌍 Textured ground created with properties:', {
+                material: groundMaterial.type,
+                hasMap: !!groundMaterial.map,
+                hasNormalMap: !!groundMaterial.normalMap,
+                hasRoughnessMap: !!groundMaterial.roughnessMap,
+                hasMetalnessMap: !!groundMaterial.metalnessMap,
+                hasAoMap: !!groundMaterial.aoMap,
+                hasBumpMap: !!groundMaterial.bumpMap,
+                materialColor: groundMaterial.color ? "#".concat(groundMaterial.color.getHexString()) : 'none'
+              });
               logger.info('Textured ground created');
               return _context6.a(2, ground);
-            case 5:
-              _context6.p = 5;
+            case 7:
+              _context6.p = 7;
               _t8 = _context6.v;
               logger.error('Error creating textured ground:', _t8);
-              // Fallback to simple ground
-              return _context6.a(2, this.createGround());
+              // Create a bright colored ground so it's obvious something was wrong
+              errorGeometry = new THREE__namespace.PlaneGeometry(100, 100);
+              errorMaterial = new THREE__namespace.MeshBasicMaterial({
+                color: 0xff0000,
+                wireframe: true,
+                side: THREE__namespace.DoubleSide
+              });
+              errorGround = new THREE__namespace.Mesh(errorGeometry, errorMaterial);
+              errorGround.rotation.x = -Math.PI / 2;
+              errorGround.position.y = -0.01;
+              errorGround.userData = {
+                isEnvironmentObject: true,
+                isBaseGround: true,
+                type: 'ground-error'
+              };
+              component.scene.add(errorGround);
+              console.error('⚠️ Fallback to error ground (red wireframe) due to texture loading failure:', _t8);
+              return _context6.a(2, errorGround);
           }
-        }, _callee4, this, [[3, 5]]);
+        }, _callee4, this, [[4, 7]]);
       }));
       function addTexturedGround() {
         return _addTexturedGround.apply(this, arguments);
       }
       return addTexturedGround;
     }()
-    /**
-     * Add brick walls with materials from textureConfig
+    /**
+     * Add brick walls with materials from textureConfig
      */
     )
   }, {
@@ -1729,31 +1922,41 @@ var EnvironmentManager = /*#__PURE__*/function () {
         return _regenerator().w(function (_context7) {
           while (1) switch (_context7.n) {
             case 0:
-              if (loadTextureSetAndCreateMaterial$1) {
-                _context7.n = 1;
+              if (textureConfig$2.loadTextureSetAndCreateMaterial) {
+                _context7.n = 2;
                 break;
               }
+              console.log('🔄 TextureConfig module not yet loaded for brick walls, importing now...');
               _context7.n = 1;
               return importTextureConfig();
             case 1:
+              if (textureConfig$2.loadTextureSetAndCreateMaterial) {
+                _context7.n = 2;
+                break;
+              }
+              console.error('❌ Failed to load textureConfig module for brick walls');
+              return _context7.a(2, this.createWalls());
+            case 2:
               component = this.component;
               if (!(!component || !component.scene)) {
-                _context7.n = 2;
+                _context7.n = 3;
                 break;
               }
               logger.warn('Cannot create brick walls: component or scene not available');
               return _context7.a(2, []);
-            case 2:
+            case 3:
               // Remove existing walls if present
               component.scene.traverse(function (object) {
                 if (object.userData && object.userData.type === 'wall') {
                   component.scene.remove(object);
                 }
               });
-              _context7.p = 3;
-              _context7.n = 4;
-              return loadTextureSetAndCreateMaterial$1(component, 'brick');
-            case 4:
+              _context7.p = 4;
+              // Use the brick texture set
+              console.log('🧱 Loading brick wall material textures...');
+              _context7.n = 5;
+              return textureConfig$2.loadTextureSetAndCreateMaterial(component, 'brick');
+            case 5:
               wallMaterial = _context7.v;
               walls = [];
               wallHeight = 20;
@@ -1793,22 +1996,22 @@ var EnvironmentManager = /*#__PURE__*/function () {
               }
               logger.info('Textured environment walls created');
               return _context7.a(2, walls);
-            case 5:
-              _context7.p = 5;
+            case 6:
+              _context7.p = 6;
               _t9 = _context7.v;
               logger.error('Error creating brick walls:', _t9);
               // Fallback to simple walls
               return _context7.a(2, this.createWalls());
           }
-        }, _callee5, this, [[3, 5]]);
+        }, _callee5, this, [[4, 6]]);
       }));
       function addBrickWalls() {
         return _addBrickWalls.apply(this, arguments);
       }
       return addBrickWalls;
     }()
-    /**
-     * Add horizon fog effect
+    /**
+     * Add horizon fog effect
      */
     )
   }, {
@@ -1828,10 +2031,10 @@ var EnvironmentManager = /*#__PURE__*/function () {
       logger.info('Horizon fog applied');
     }
 
-    /**
-     * Helper to check if a texture exists locally in static directory
-     * @param {string} path - Relative path to texture in static directory
-     * @returns {Promise<boolean>}
+    /**
+     * Helper to check if a texture exists locally in static directory
+     * @param {string} path - Relative path to texture in static directory
+     * @returns {Promise<boolean>}
      */
   }, {
     key: "checkLocalTextureExists",
@@ -1859,9 +2062,8 @@ var EnvironmentManager = /*#__PURE__*/function () {
                   return resolve(false);
                 };
 
-                // Create full path relative to app root
-                var fullPath = window.location.origin + '/' + path;
-                img.src = fullPath;
+                // Use the path directly - it should already be processed by getAssetPath
+                img.src = path;
 
                 // Set a timeout in case the image load hangs
                 setTimeout(function () {
@@ -1877,15 +2079,106 @@ var EnvironmentManager = /*#__PURE__*/function () {
         return _checkLocalTextureExists.apply(this, arguments);
       }
       return checkLocalTextureExists;
-    }())
+    }()
+    /**
+    * Force refresh all materials in the scene
+    * Helpful for ensuring textures are correctly displayed
+    */
+    )
+  }, {
+    key: "forceRefreshMaterials",
+    value: function forceRefreshMaterials() {
+      var component = this.component;
+      if (!component || !component.scene) {
+        logger.warn('Cannot refresh materials: component or scene not available');
+        return;
+      }
+      console.log('🔄 Forcing material refresh for all objects...');
+      var updatedMaterials = 0;
+      var textureFixes = 0;
+
+      // Import helper functions if available
+      var hasValidImageData = textureConfig$2.hasValidImageData || function (texture) {
+        return texture && texture.image;
+      };
+      var createPlaceholderTexture = textureConfig$2.createPlaceholderTexture || function () {
+        return null;
+      };
+
+      // Traverse all meshes in the scene
+      component.scene.traverse(function (object) {
+        if (object.isMesh && object.material) {
+          // Handle both single materials and material arrays
+          var materials = Array.isArray(object.material) ? object.material : [object.material];
+          materials.forEach(function (material) {
+            if (material) {
+              // Update material properties
+              material.needsUpdate = true;
+
+              // Ensure color values are properly set
+              if (material.color) {
+                if (typeof material.color.convertSRGBToLinear === 'function') {
+                  material.color.convertSRGBToLinear();
+                }
+              }
+
+              // Check for maps and ensure they're correctly configured
+              var maps = ['map', 'normalMap', 'roughnessMap', 'metalnessMap', 'aoMap', 'bumpMap'];
+              maps.forEach(function (mapType) {
+                var map = material[mapType];
+                if (map) {
+                  // Check if this texture might trigger the warning
+                  var hasValidData = hasValidImageData(map);
+                  if (!hasValidData) {
+                    console.warn("\u26A0\uFE0F Found texture without valid image data in ".concat(mapType, " for object ").concat(object.name || object.uuid));
+
+                    // Create and use a placeholder texture for now
+                    if (createPlaceholderTexture) {
+                      var placeholderColor = mapType === 'normalMap' ? 0x8080ff : 0xcccccc;
+                      var placeholder = createPlaceholderTexture(placeholderColor);
+                      if (placeholder) {
+                        material[mapType] = placeholder;
+                        textureFixes++;
+                        console.log("\uD83D\uDD04 Replaced missing image texture with placeholder for ".concat(mapType));
+                      }
+                    }
+                  } else {
+                    map.needsUpdate = true;
+
+                    // Ensure correct color space for diffuse maps
+                    if (mapType === 'map' && map.colorSpace !== undefined) {
+                      map.colorSpace = THREE__namespace.SRGBColorSpace;
+                    } else if (mapType === 'map' && map.encoding !== undefined) {
+                      map.encoding = THREE__namespace.sRGBEncoding;
+                    }
+                  }
+                }
+              });
+              updatedMaterials++;
+            }
+          });
+        }
+      });
+
+      // Use the dedicated function from textureConfig if available
+      if (textureConfig$2.forceUpdateMaterials) {
+        textureConfig$2.forceUpdateMaterials(component.scene);
+      }
+      console.log("\u2705 Refreshed ".concat(updatedMaterials, " materials, fixed ").concat(textureFixes, " texture warnings"));
+
+      // Force a renderer update if possible
+      if (component.renderer && component.camera) {
+        component.renderer.render(component.scene, component.camera);
+      }
+    }
   }]);
 }();
 
 // Create a singleton instance
 var environmentManager = null;
 
-/**
- * Get the global environment manager instance
+/**
+ * Get the global environment manager instance
  */
 function getEnvironmentManager() {
   var component = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -1926,9 +2219,9 @@ var environmentManager$2 = /*#__PURE__*/Object.freeze({
   'default': environmentManager$1
 });
 
-/**
- * Hot-Reload Manager Module
- * Handles development environment hot-reload detection and cleanup
+/**
+ * Hot-Reload Manager Module
+ * Handles development environment hot-reload detection and cleanup
  */
 
 // Check if we're in a browser environment
@@ -1952,8 +2245,8 @@ var HotReloadManager = /*#__PURE__*/function () {
     this.intervalIds = new Set();
   }
 
-  /**
-   * Setup hot-reload handling for development environment
+  /**
+   * Setup hot-reload handling for development environment
    */
   return _createClass(HotReloadManager, [{
     key: "setupHotReloadHandling",
@@ -1995,8 +2288,8 @@ var HotReloadManager = /*#__PURE__*/function () {
       console.log('✅ [Hot-Reload] Hot-reload handling setup completed');
     }
 
-    /**
-     * Cleanup hot-reload handlers (development only)
+    /**
+     * Cleanup hot-reload handlers (development only)
      */
   }, {
     key: "cleanupHotReloadHandlers",
@@ -2037,8 +2330,8 @@ var HotReloadManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Track a timeout ID for cleanup on component destruction
+    /**
+     * Track a timeout ID for cleanup on component destruction
      */
   }, {
     key: "trackTimeout",
@@ -2049,8 +2342,8 @@ var HotReloadManager = /*#__PURE__*/function () {
       return timeoutId;
     }
 
-    /**
-     * Track an interval ID for cleanup on component destruction
+    /**
+     * Track an interval ID for cleanup on component destruction
      */
   }, {
     key: "trackInterval",
@@ -2061,8 +2354,8 @@ var HotReloadManager = /*#__PURE__*/function () {
       return intervalId;
     }
 
-    /**
-     * Clear a tracked timeout and remove from tracking
+    /**
+     * Clear a tracked timeout and remove from tracking
      */
   }, {
     key: "clearTrackedTimeout",
@@ -2075,8 +2368,8 @@ var HotReloadManager = /*#__PURE__*/function () {
       return false;
     }
 
-    /**
-     * Clear a tracked interval and remove from tracking
+    /**
+     * Clear a tracked interval and remove from tracking
      */
   }, {
     key: "clearTrackedInterval",
@@ -2089,8 +2382,8 @@ var HotReloadManager = /*#__PURE__*/function () {
       return false;
     }
 
-    /**
-     * Clear all tracked timeouts and intervals
+    /**
+     * Clear all tracked timeouts and intervals
      */
   }, {
     key: "clearAllTrackedTimers",
@@ -2111,10 +2404,10 @@ var HotReloadManager = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Simple utility to handle hot-reload for componentId
- * @param {string} instanceId - Unique instance identifier for the component
- * @param {Function} cleanupMethod - Method to call to clean up resources
+/**
+ * Simple utility to handle hot-reload for componentId
+ * @param {string} instanceId - Unique instance identifier for the component
+ * @param {Function} cleanupMethod - Method to call to clean up resources
  */
 function handleHotReload(instanceId, cleanupMethod) {
   if (!isBrowser || !isDev) return;
@@ -2140,16 +2433,16 @@ function handleHotReload(instanceId, cleanupMethod) {
   });
 }
 
-/**
- * Check if we're currently hot-reloading
+/**
+ * Check if we're currently hot-reloading
  */
 function isHotReloading() {
   return isDev && isBrowser && window._hotReloadRegistry && window._hotReloadRegistry.size > 0;
 }
 
-/**
- * Clean up resources for a component before hot-reload
- * @param {string} instanceId - ID of the component instance to clean up
+/**
+ * Clean up resources for a component before hot-reload
+ * @param {string} instanceId - ID of the component instance to clean up
  */
 function cleanupForHotReload(instanceId) {
   if (!isBrowser || !isDev || !window._hotReloadRegistry) return;
@@ -2176,17 +2469,17 @@ var hotReloadManager$1 = /*#__PURE__*/Object.freeze({
   'default': hotReloadManager
 });
 
-/**
- * Keyboard Controls Manager
- * Manages keyboard shortcuts and controls
+/**
+ * Keyboard Controls Manager
+ * Manages keyboard shortcuts and controls
  */
 
 // Store registered key handlers
 var keyHandlers = new Map();
 var isListening = false;
 
-/**
- * Initialize keyboard controls
+/**
+ * Initialize keyboard controls
  */
 function initKeyboardControls() {
   if (typeof window === 'undefined') {
@@ -2204,8 +2497,8 @@ function initKeyboardControls() {
   logger.info('Keyboard controls initialized');
 }
 
-/**
- * Clean up keyboard controls
+/**
+ * Clean up keyboard controls
  */
 function cleanupKeyboardControls() {
   if (typeof window === 'undefined' || !isListening) {
@@ -2218,8 +2511,8 @@ function cleanupKeyboardControls() {
   logger.info('Keyboard controls cleaned up');
 }
 
-/**
- * Handler for keydown events
+/**
+ * Handler for keydown events
  */
 function handleKeyDown(event) {
   // Get key or combination
@@ -2233,8 +2526,8 @@ function handleKeyDown(event) {
   }
 }
 
-/**
- * Handler for keyup events
+/**
+ * Handler for keyup events
  */
 function handleKeyUp(event) {
   var keyCombo = getKeyCombo(event);
@@ -2247,8 +2540,8 @@ function handleKeyUp(event) {
   }
 }
 
-/**
- * Register a key handler
+/**
+ * Register a key handler
  */
 function registerKeyHandler(key, callback) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -2269,16 +2562,16 @@ function registerKeyHandler(key, callback) {
   return normalizedKey;
 }
 
-/**
- * Unregister a key handler
+/**
+ * Unregister a key handler
  */
 function unregisterKeyHandler(key) {
   var normalizedKey = normalizeKey(key);
   return keyHandlers.delete(normalizedKey);
 }
 
-/**
- * Get all registered key handlers
+/**
+ * Get all registered key handlers
  */
 function getRegisteredKeyHandlers() {
   var handlers = [];
@@ -2291,15 +2584,15 @@ function getRegisteredKeyHandlers() {
   return handlers;
 }
 
-/**
- * Helper function to normalize key format
+/**
+ * Helper function to normalize key format
  */
 function normalizeKey(key) {
   return key.toLowerCase();
 }
 
-/**
- * Helper function to get key combo string from event
+/**
+ * Helper function to get key combo string from event
  */
 function getKeyCombo(event) {
   var combo = '';
@@ -2311,8 +2604,8 @@ function getKeyCombo(event) {
   return combo;
 }
 
-/**
- * Setup common keyboard controls for a Three.js scene
+/**
+ * Setup common keyboard controls for a Three.js scene
  */
 function setupCommonControls(component) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -2432,10 +2725,10 @@ var ModelPreloader = /*#__PURE__*/function () {
       }
       return initLoader;
     }()
-    /**
-     * Preload all models from the component dictionary
-     * @param {Object} componentDictionary - The component dictionary object
-     * @returns {Promise} Promise that resolves when all models are loaded
+    /**
+     * Preload all models from the component dictionary
+     * @param {Object} componentDictionary - The component dictionary object
+     * @returns {Promise} Promise that resolves when all models are loaded
      */
   }, {
     key: "preloadAllModels",
@@ -2445,6 +2738,7 @@ var ModelPreloader = /*#__PURE__*/function () {
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.n) {
             case 0:
+              console.log('preloadAllModels called with:', componentDictionary ? "Dictionary of ".concat(Object.keys(componentDictionary).length, " components") : 'No dictionary provided');
               if (!this.isPreloading) {
                 _context4.n = 1;
                 break;
@@ -2456,7 +2750,14 @@ var ModelPreloader = /*#__PURE__*/function () {
                 _context4.n = 2;
                 break;
               }
-              throw new Error('Component dictionary is required to preload models');
+              console.error('❌ Component dictionary is required to preload models');
+              return _context4.a(2, {
+                total: 0,
+                success: 0,
+                failed: 1,
+                skipped: 0,
+                error: 'Component dictionary is required'
+              });
             case 2:
               this.isPreloading = true;
               this.componentDictionary = componentDictionary;
@@ -2585,12 +2886,87 @@ var ModelPreloader = /*#__PURE__*/function () {
       }
       return preloadAllModels;
     }()
-    /**
-     * Convert a model key to a URL
-     * @param {string} modelKey - The model key from the dictionary
-     * @returns {string} The URL for the model
+    /**
+     * Load a component model by its ID
+     * @param {string} componentId - The component ID from the dictionary
+     * @param {Function} callback - Optional callback function to call when loading completes
+     * @returns {Promise} Promise that resolves with the loaded model
      */
     )
+  }, {
+    key: "loadComponentById",
+    value: (function () {
+      var _loadComponentById = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(componentId, callback) {
+        var component, modelUrl, model, _t4;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
+            case 0:
+              if (this.componentDictionary) {
+                _context5.n = 1;
+                break;
+              }
+              console.warn('⚠️ No component dictionary available for loadComponentById');
+              if (callback) callback(null);
+              return _context5.a(2, null);
+            case 1:
+              component = this.componentDictionary[componentId];
+              if (!(!component || !component.modelKey)) {
+                _context5.n = 2;
+                break;
+              }
+              console.warn("\u26A0\uFE0F No component or model key found for ID: ".concat(componentId));
+              if (callback) callback(null);
+              return _context5.a(2, null);
+            case 2:
+              _context5.p = 2;
+              modelUrl = this.getModelUrlFromKey(component.modelKey);
+              _context5.n = 3;
+              return this.preloadModel(component.modelKey, modelUrl);
+            case 3:
+              model = _context5.v;
+              if (callback) callback(model);
+              return _context5.a(2, model);
+            case 4:
+              _context5.p = 4;
+              _t4 = _context5.v;
+              console.error("\u274C Failed to load component model for ID: ".concat(componentId), _t4);
+              if (callback) callback(null);
+              return _context5.a(2, null);
+          }
+        }, _callee4, this, [[2, 4]]);
+      }));
+      function loadComponentById(_x3, _x4) {
+        return _loadComponentById.apply(this, arguments);
+      }
+      return loadComponentById;
+    }()
+    /**
+     * Get a cached model by its key
+     * @param {string} modelKey - The model key
+     * @returns {Object|null} The loaded model or null if not found
+     */
+    )
+  }, {
+    key: "getCachedModel",
+    value: function getCachedModel(modelKey) {
+      return this.modelCache.get(modelKey) || null;
+    }
+
+    /**
+     * Get all cache keys
+     * @returns {Array} Array of model keys in the cache
+     */
+  }, {
+    key: "getCacheKeys",
+    value: function getCacheKeys() {
+      return Array.from(this.modelCache.keys());
+    }
+
+    /**
+     * Convert a model key to a URL
+     * @param {string} modelKey - The model key from the dictionary
+     * @returns {string} The URL for the model
+     */
   }, {
     key: "getModelUrlFromKey",
     value: function getModelUrlFromKey(modelKey) {
@@ -2598,45 +2974,45 @@ var ModelPreloader = /*#__PURE__*/function () {
       return modelKey;
     }
 
-    /**
-     * Preload a specific model
-     * @param {string} modelKey - The model key
-     * @param {string} modelUrl - The URL to the model
-     * @returns {Promise} Promise that resolves with the loaded model
+    /**
+     * Preload a specific model
+     * @param {string} modelKey - The model key
+     * @param {string} modelUrl - The URL to the model
+     * @returns {Promise} Promise that resolves with the loaded model
      */
   }, {
     key: "preloadModel",
     value: (function () {
-      var _preloadModel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(modelKey, modelUrl) {
+      var _preloadModel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(modelKey, modelUrl) {
         var _this2 = this;
         var loadPromise;
-        return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.n) {
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
             case 0:
               if (this.gltfLoader) {
-                _context5.n = 2;
+                _context6.n = 2;
                 break;
               }
-              _context5.n = 1;
+              _context6.n = 1;
               return this.initLoader();
             case 1:
               if (this.gltfLoader) {
-                _context5.n = 2;
+                _context6.n = 2;
                 break;
               }
               throw new Error('GLTFLoader is not available');
             case 2:
               if (!this.modelCache.has(modelKey)) {
-                _context5.n = 3;
+                _context6.n = 3;
                 break;
               }
-              return _context5.a(2, this.modelCache.get(modelKey));
+              return _context6.a(2, this.modelCache.get(modelKey));
             case 3:
               if (!this.loadingPromises.has(modelKey)) {
-                _context5.n = 4;
+                _context6.n = 4;
                 break;
               }
-              return _context5.a(2, this.loadingPromises.get(modelKey));
+              return _context6.a(2, this.loadingPromises.get(modelKey));
             case 4:
               // Start loading the model
               loadPromise = new Promise(function (resolve, reject) {
@@ -2665,19 +3041,19 @@ var ModelPreloader = /*#__PURE__*/function () {
                 });
               }); // Store the loading promise
               this.loadingPromises.set(modelKey, loadPromise);
-              return _context5.a(2, loadPromise);
+              return _context6.a(2, loadPromise);
           }
-        }, _callee4, this);
+        }, _callee5, this);
       }));
-      function preloadModel(_x3, _x4) {
+      function preloadModel(_x5, _x6) {
         return _preloadModel.apply(this, arguments);
       }
       return preloadModel;
     }()
-    /**
-     * Get a model from the cache
-     * @param {string} modelKey - The model key
-     * @returns {Object|null} The loaded model or null if not found
+    /**
+     * Get a model from the cache
+     * @param {string} modelKey - The model key
+     * @returns {Object|null} The loaded model or null if not found
      */
     )
   }, {
@@ -2686,8 +3062,8 @@ var ModelPreloader = /*#__PURE__*/function () {
       return this.modelCache.get(modelKey) || null;
     }
 
-    /**
-     * Clear the model cache
+    /**
+     * Clear the model cache
      */
   }, {
     key: "clearCache",
@@ -2695,9 +3071,9 @@ var ModelPreloader = /*#__PURE__*/function () {
       this.modelCache.clear();
     }
 
-    /**
-     * Get statistics about the model cache
-     * @returns {Object} Cache statistics
+    /**
+     * Get statistics about the model cache
+     * @returns {Object} Cache statistics
      */
   }, {
     key: "getCacheStats",
@@ -2710,24 +3086,62 @@ var ModelPreloader = /*#__PURE__*/function () {
       };
     }
   }]);
-}(); // Create singleton instance
-var modelPreloader = new ModelPreloader();
+}(); // Create singleton instance with explicit methods
+var modelPreloader$1 = new ModelPreloader();
+
+// Ensure the model preloader is fully initialized
+if (typeof window !== 'undefined') {
+  // Only run in browser environment
+  modelPreloader$1.initLoader().catch(function (err) {
+    console.warn('Error initializing model preloader:', err);
+  });
+}
 
-var modelPreloader$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': modelPreloader,
-  ModelPreloader: ModelPreloader
-});
+// Create a simple proxy object with all methods explicitly defined
+// This helps ensure webpack correctly recognizes all methods
+var explicitModelPreloader = {
+  // Core methods from original implementation
+  preloadAllModels: function preloadAllModels(componentDictionary) {
+    return modelPreloader$1.preloadAllModels(componentDictionary);
+  },
+  preloadModel: function preloadModel(modelKey, modelUrl) {
+    return modelPreloader$1.preloadModel(modelKey, modelUrl);
+  },
+  getModel: function getModel(modelKey) {
+    return modelPreloader$1.getModel(modelKey);
+  },
+  clearCache: function clearCache() {
+    return modelPreloader$1.clearCache();
+  },
+  getCacheStats: function getCacheStats() {
+    return modelPreloader$1.getCacheStats();
+  },
+  getModelUrlFromKey: function getModelUrlFromKey(modelKey) {
+    return modelPreloader$1.getModelUrlFromKey(modelKey);
+  },
+  // Added methods
+  loadComponentById: function loadComponentById(componentId, callback) {
+    return modelPreloader$1.loadComponentById(componentId, callback);
+  },
+  getCachedModel: function getCachedModel(modelKey) {
+    return modelPreloader$1.getCachedModel(modelKey);
+  },
+  getCacheKeys: function getCacheKeys() {
+    return modelPreloader$1.getCacheKeys();
+  },
+  // Original model cache access
+  modelCache: modelPreloader$1.modelCache
+};
 
-/**
- * Name Utilities
- * Common helper functions for name and UUID generation
+/**
+ * Name Utilities
+ * Common helper functions for name and UUID generation
  */
 
-/**
- * Generate UUID from name using consistent transformation rules
- * @param {string} name - The name to convert to UUID
- * @returns {string} The generated UUID
+/**
+ * Generate UUID from name using consistent transformation rules
+ * @param {string} name - The name to convert to UUID
+ * @returns {string} The generated UUID
  */
 function generateUuidFromName(name) {
   if (!name) return null;
@@ -2742,11 +3156,11 @@ function generateUuidFromName(name) {
   return uuid;
 }
 
-/**
- * Check if two names would generate the same UUID
- * @param {string} name1 - First name
- * @param {string} name2 - Second name
- * @returns {boolean} Whether the names generate the same UUID
+/**
+ * Check if two names would generate the same UUID
+ * @param {string} name1 - First name
+ * @param {string} name2 - Second name
+ * @returns {boolean} Whether the names generate the same UUID
  */
 function namesGenerateSameUuid(name1, name2) {
   var uuid1 = generateUuidFromName(name1);
@@ -2754,11 +3168,11 @@ function namesGenerateSameUuid(name1, name2) {
   return uuid1 && uuid2 && uuid1 === uuid2;
 }
 
-/**
- * Find an object in a Three.js scene by hardcoded UUID with fallback strategies
- * @param {THREE.Scene} scene - The Three.js scene to search
- * @param {string} targetUuid - The UUID to search for
- * @returns {THREE.Object3D|null} The found object or null
+/**
+ * Find an object in a Three.js scene by hardcoded UUID with fallback strategies
+ * @param {THREE.Scene} scene - The Three.js scene to search
+ * @param {string} targetUuid - The UUID to search for
+ * @returns {THREE.Object3D|null} The found object or null
  */
 function findObjectByHardcodedUuid(scene, targetUuid) {
   if (!scene || !targetUuid) return null;
@@ -2791,10 +3205,10 @@ function findObjectByHardcodedUuid(scene, targetUuid) {
   return foundObject;
 }
 
-/**
- * Get the hardcoded UUID for an object, prioritizing original over current
- * @param {THREE.Object3D} object - The Three.js object
- * @returns {string|null} The hardcoded UUID or null
+/**
+ * Get the hardcoded UUID for an object, prioritizing original over current
+ * @param {THREE.Object3D} object - The Three.js object
+ * @returns {string|null} The hardcoded UUID or null
  */
 function getHardcodedUuid(object) {
   var _object$userData;
@@ -2825,9 +3239,9 @@ var nameUtils = /*#__PURE__*/Object.freeze({
   getHardcodedUuid: getHardcodedUuid
 });
 
-/**
- * ConnectionManager class
- * Handles object connections in the pathfinding system with improved safety for missing data
+/**
+ * ConnectionManager class
+ * Handles object connections in the pathfinding system with improved safety for missing data
  */
 var ConnectionManager = /*#__PURE__*/function () {
   function ConnectionManager(sceneManager) {
@@ -2835,10 +3249,10 @@ var ConnectionManager = /*#__PURE__*/function () {
     this.sceneManager = sceneManager;
   }
 
-  /**
-   * Safely cluster connections by shared objects
-   * @param {Array<Object>} connections - Array of connections between objects (or null/undefined)
-   * @returns {Array<Object>} Array of clusters
+  /**
+   * Safely cluster connections by shared objects
+   * @param {Array<Object>} connections - Array of connections between objects (or null/undefined)
+   * @returns {Array<Object>} Array of clusters
    */
   return _createClass(ConnectionManager, [{
     key: "clusterConnections",
@@ -2937,9 +3351,9 @@ var ConnectionManager$1 = /*#__PURE__*/Object.freeze({
   'default': ConnectionManager
 });
 
-/**
- * Pathfinder class
- * Enhanced version with better error handling for missing data
+/**
+ * Pathfinder class
+ * Enhanced version with better error handling for missing data
  */
 var Pathfinder = /*#__PURE__*/function () {
   function Pathfinder(sceneData) {
@@ -2948,9 +3362,9 @@ var Pathfinder = /*#__PURE__*/function () {
     this.connectionManager = new ConnectionManager();
   }
 
-  /**
-   * Find paths in the scene
-   * @returns {Array} Array of paths
+  /**
+   * Find paths in the scene
+   * @returns {Array} Array of paths
    */
   return _createClass(Pathfinder, [{
     key: "findPaths",
@@ -2992,11 +3406,11 @@ var Pathfinder = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Generate paths for a single cluster
-     * @param {Object} cluster - The cluster to generate paths for
-     * @returns {Array} Array of paths for this cluster
-     * @private
+    /**
+     * Generate paths for a single cluster
+     * @param {Object} cluster - The cluster to generate paths for
+     * @returns {Array} Array of paths for this cluster
+     * @private
      */
   }, {
     key: "_generatePathsForCluster",
@@ -3033,8 +3447,8 @@ var PathfindingManager = /*#__PURE__*/function () {
     this.pathfinder = new Pathfinder(component === null || component === void 0 ? void 0 : component.sceneData);
   }
 
-  /**
-   * Get pathfinder version information
+  /**
+   * Get pathfinder version information
    */
   return _createClass(PathfindingManager, [{
     key: "getPathfinderVersionInfo",
@@ -3065,8 +3479,8 @@ var PathfindingManager = /*#__PURE__*/function () {
       }
       return getPathfinderVersionInfo;
     }()
-    /**
-     * Log pathfinder version information
+    /**
+     * Log pathfinder version information
      */
     )
   }, {
@@ -3109,8 +3523,8 @@ var PathfindingManager = /*#__PURE__*/function () {
       }
       return logPathfinderVersion;
     }()
-    /**
-     * Get path colors for visual distinction
+    /**
+     * Get path colors for visual distinction
      */
     )
   }, {
@@ -3120,8 +3534,8 @@ var PathfindingManager = /*#__PURE__*/function () {
       return colors[index % colors.length];
     }
 
-    /**
-     * Initialize pathfinder and create paths
+    /**
+     * Initialize pathfinder and create paths
      */
   }, {
     key: "initializePathfinder",
@@ -3175,8 +3589,8 @@ var PathfindingManager = /*#__PURE__*/function () {
       }
       return initializePathfinder;
     }()
-    /**
-     * Remove all existing paths from the scene
+    /**
+     * Remove all existing paths from the scene
      */
     )
   }, {
@@ -3217,8 +3631,8 @@ var PathfindingManager = /*#__PURE__*/function () {
       console.log("Removed ".concat(objectsToRemove.length, " path objects"));
     }
 
-    /**
-     * Material factory function to reduce duplication
+    /**
+     * Material factory function to reduce duplication
      */
   }, {
     key: "createPipeMaterial",
@@ -3233,8 +3647,8 @@ var PathfindingManager = /*#__PURE__*/function () {
       return material;
     }
 
-    /**
-     * Helper function to create pipe paths
+    /**
+     * Helper function to create pipe paths
      */
   }, {
     key: "createPipePaths",
@@ -3296,8 +3710,8 @@ var PathfindingManager = /*#__PURE__*/function () {
 // Create a singleton instance
 var pathfindingManager = null;
 
-/**
- * Get the global pathfinding manager instance
+/**
+ * Get the global pathfinding manager instance
  */
 function getPathfindingManager() {
   var component = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -3388,8 +3802,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
     this._update = this._update.bind(this);
   }
 
-  /**
-   * Start the performance monitor
+  /**
+   * Start the performance monitor
    */
   return _createClass(PerformanceMonitor, [{
     key: "start",
@@ -3406,8 +3820,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       logger.info('Performance monitoring started');
     }
 
-    /**
-     * Stop the performance monitor
+    /**
+     * Stop the performance monitor
      */
   }, {
     key: "stop",
@@ -3416,8 +3830,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       logger.info('Performance monitoring stopped');
     }
 
-    /**
-     * Reset statistics
+    /**
+     * Reset statistics
      */
   }, {
     key: "reset",
@@ -3445,8 +3859,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       logger.info('Performance statistics reset');
     }
 
-    /**
-     * Update method called every animation frame
+    /**
+     * Update method called every animation frame
      */
   }, {
     key: "_update",
@@ -3488,8 +3902,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       requestAnimationFrame(this._update);
     }
 
-    /**
-     * Update statistics for a specific metric
+    /**
+     * Update statistics for a specific metric
      */
   }, {
     key: "_updateStat",
@@ -3518,8 +3932,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       }, 0) / stats.history.length;
     }
 
-    /**
-     * Get WebGL info from the renderer
+    /**
+     * Get WebGL info from the renderer
      */
   }, {
     key: "_getWebGLInfo",
@@ -3552,8 +3966,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       this.stats.memory.programs = ((_info$programs = info.programs) === null || _info$programs === void 0 ? void 0 : _info$programs.length) || 0;
     }
 
-    /**
-     * Get system memory info
+    /**
+     * Get system memory info
      */
   }, {
     key: "_getMemoryInfo",
@@ -3569,8 +3983,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Get GPU info if available
+    /**
+     * Get GPU info if available
      */
   }, {
     key: "_getGPUInfo",
@@ -3592,8 +4006,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       this.stats.gpu.extensions = gl.getSupportedExtensions();
     }
 
-    /**
-     * Check for performance warnings
+    /**
+     * Check for performance warnings
      */
   }, {
     key: "_checkWarnings",
@@ -3666,8 +4080,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Register an event callback
+    /**
+     * Register an event callback
      */
   }, {
     key: "on",
@@ -3676,8 +4090,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       this.callbacks[event].push(callback);
     }
 
-    /**
-     * Remove an event callback
+    /**
+     * Remove an event callback
      */
   }, {
     key: "off",
@@ -3689,8 +4103,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Trigger callbacks for an event
+    /**
+     * Trigger callbacks for an event
      */
   }, {
     key: "_triggerCallbacks",
@@ -3705,8 +4119,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       });
     }
 
-    /**
-     * Log performance summary to console
+    /**
+     * Log performance summary to console
      */
   }, {
     key: "logSummary",
@@ -3727,8 +4141,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       return this.stats;
     }
 
-    /**
-     * Export performance data
+    /**
+     * Export performance data
      */
   }, {
     key: "exportData",
@@ -3742,8 +4156,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       };
     }
 
-    /**
-     * Get active warnings
+    /**
+     * Get active warnings
      */
   }, {
     key: "_getActiveWarnings",
@@ -3790,8 +4204,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
       return warnings;
     }
 
-    /**
-     * Set warning thresholds
+    /**
+     * Set warning thresholds
      */
   }, {
     key: "setWarningThresholds",
@@ -3801,8 +4215,8 @@ var PerformanceMonitor$1 = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Performance UI class for displaying performance statistics
+/**
+ * Performance UI class for displaying performance statistics
  */
 var PerformanceUI$1 = /*#__PURE__*/function () {
   function PerformanceUI(monitor, container) {
@@ -3818,8 +4232,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
     this._setupUpdateLoop();
   }
 
-  /**
-   * Create the UI element
+  /**
+   * Create the UI element
    */
   return _createClass(PerformanceUI, [{
     key: "_createUI",
@@ -3872,8 +4286,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       this.element.style.pointerEvents = 'none';
     }
 
-    /**
-     * Set UI theme
+    /**
+     * Set UI theme
      */
   }, {
     key: "setTheme",
@@ -3890,8 +4304,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Setup update loop for refreshing the UI
+    /**
+     * Setup update loop for refreshing the UI
      */
   }, {
     key: "_setupUpdateLoop",
@@ -3929,8 +4343,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       setInterval(updateStats, 500);
     }
 
-    /**
-     * Get color for a metric based on its value
+    /**
+     * Get color for a metric based on its value
      */
   }, {
     key: "_getMetricColor",
@@ -3952,8 +4366,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
     }
 
-    /**
-     * Format number for display
+    /**
+     * Format number for display
      */
   }, {
     key: "_formatNumber",
@@ -3966,8 +4380,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       return number.toString();
     }
 
-    /**
-     * Show the UI
+    /**
+     * Show the UI
      */
   }, {
     key: "show",
@@ -3983,8 +4397,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Hide the UI
+    /**
+     * Hide the UI
      */
   }, {
     key: "hide",
@@ -3995,8 +4409,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       this.element.style.pointerEvents = 'none';
     }
 
-    /**
-     * Toggle visibility
+    /**
+     * Toggle visibility
      */
   }, {
     key: "toggle",
@@ -4008,8 +4422,8 @@ var PerformanceUI$1 = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Clean up resources
+    /**
+     * Clean up resources
      */
   }, {
     key: "dispose",
@@ -4032,22 +4446,22 @@ var performanceMonitor$1 = /*#__PURE__*/Object.freeze({
   'default': performanceMonitor
 });
 
-/**
- * Class for managing scene export operations
+/**
+ * Class for managing scene export operations
  */
 var SceneExportManager = /*#__PURE__*/function () {
-  /**
-   * Create a SceneExportManager
-   * @param {Object} componentInstance - The component instance containing scene data
+  /**
+   * Create a SceneExportManager
+   * @param {Object} componentInstance - The component instance containing scene data
    */
   function SceneExportManager(componentInstance) {
     _classCallCheck(this, SceneExportManager);
     this.component = componentInstance;
   }
 
-  /**
-   * Export function that recreates the JSON data structure from current scene objects
-   * @returns {Object|null} The exported scene data as JSON object or null if export failed
+  /**
+   * Export function that recreates the JSON data structure from current scene objects
+   * @returns {Object|null} The exported scene data as JSON object or null if export failed
    */
   return _createClass(SceneExportManager, [{
     key: "exportSceneData",
@@ -4215,10 +4629,10 @@ var SceneExportManager = /*#__PURE__*/function () {
       return exportData;
     }
 
-    /**
-     * Helper function to download the exported scene data as JSON file
-     * @param {string} filename - Optional filename for the export
-     * @returns {boolean} Success status of the download operation
+    /**
+     * Helper function to download the exported scene data as JSON file
+     * @param {string} filename - Optional filename for the export
+     * @returns {boolean} Success status of the download operation
      */
   }, {
     key: "downloadSceneExport",
@@ -4264,10 +4678,10 @@ var SceneExportManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Export scene data as JSON string
-     * @param {boolean} pretty - Whether to format the JSON with indentation
-     * @returns {string|null} JSON string or null if export failed
+    /**
+     * Export scene data as JSON string
+     * @param {boolean} pretty - Whether to format the JSON with indentation
+     * @returns {string|null} JSON string or null if export failed
      */
   }, {
     key: "exportSceneDataAsString",
@@ -4280,9 +4694,9 @@ var SceneExportManager = /*#__PURE__*/function () {
       return pretty ? JSON.stringify(exportData, null, 2) : JSON.stringify(exportData);
     }
 
-    /**
-     * Get export metadata
-     * @returns {Object|null} Export metadata or null if scene is not available
+    /**
+     * Get export metadata
+     * @returns {Object|null} Export metadata or null if scene is not available
      */
   }, {
     key: "getExportMetadata",
@@ -4305,10 +4719,10 @@ var SceneExportManager = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Factory function to get SceneExportManager instance
- * @param {CentralPlantComponent} component - The component instance 
- * @returns {SceneExportManager} SceneExportManager instance
+/**
+ * Factory function to get SceneExportManager instance
+ * @param {CentralPlantComponent} component - The component instance 
+ * @returns {SceneExportManager} SceneExportManager instance
  */
 function getSceneExportManager(component) {
   return new SceneExportManager(component);
@@ -4416,8 +4830,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
     importThreeJSDependencies();
   }
 
-  /**
-   * Initialize the Three.js scene, camera, and renderer
+  /**
+   * Initialize the Three.js scene, camera, and renderer
    */
   return _createClass(SceneInitializationManager, [{
     key: "initializeScene",
@@ -4470,8 +4884,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       }
       return initializeScene;
     }()
-    /**
-     * Setup the WebGL renderer
+    /**
+     * Setup the WebGL renderer
      */
     )
   }, {
@@ -4548,8 +4962,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       }
       return setupRenderer;
     }()
-    /**
-     * Setup orbit controls
+    /**
+     * Setup orbit controls
      */
     )
   }, {
@@ -4576,8 +4990,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       return this.setupControlsInternal(container, options);
     }
 
-    /**
-     * Internal method to setup controls after dependencies are loaded
+    /**
+     * Internal method to setup controls after dependencies are loaded
      */
   }, {
     key: "setupControlsInternal",
@@ -4609,8 +5023,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       return component.controls;
     }
 
-    /**
-     * Initialize performance monitoring
+    /**
+     * Initialize performance monitoring
      */
   }, {
     key: "initializePerformanceMonitoring",
@@ -4671,8 +5085,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       }
       return initializePerformanceMonitoring;
     }()
-    /**
-     * Expose performance monitoring to global scope for debugging
+    /**
+     * Expose performance monitoring to global scope for debugging
      */
     )
   }, {
@@ -4729,8 +5143,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Setup resize handler for responsive rendering
+    /**
+     * Setup resize handler for responsive rendering
      */
   }, {
     key: "setupResizeHandler",
@@ -4766,8 +5180,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
       logger.info('Resize handler initialized');
     }
 
-    /**
-     * Cleanup resize handler
+    /**
+     * Cleanup resize handler
      */
   }, {
     key: "cleanupResizeHandler",
@@ -4783,8 +5197,8 @@ var SceneInitializationManager = /*#__PURE__*/function () {
 // Create a singleton instance
 var sceneInitializationManager = null;
 
-/**
- * Get the global scene initialization manager instance
+/**
+ * Get the global scene initialization manager instance
  */
 function getSceneInitializationManager() {
   var component = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -4837,15 +5251,15 @@ var sceneInitializationManager$2 = /*#__PURE__*/Object.freeze({
   'default': sceneInitializationManager$1
 });
 
-/**
- * SceneOperationsManager
- * Handles scene loading, clearing, and object management operations
+/**
+ * SceneOperationsManager
+ * Handles scene loading, clearing, and object management operations
  */
 
 var THREE$1;
 
-/**
- * Dynamically import ThreeJS when in browser environment
+/**
+ * Dynamically import ThreeJS when in browser environment
  */
 function importDependencies$1() {
   return _importDependencies$1.apply(this, arguments);
@@ -4880,13 +5294,13 @@ function _importDependencies$1() {
   return _importDependencies$1.apply(this, arguments);
 }
 
-/**
- * Class for managing scene operations like loading, clearing, and object management
+/**
+ * Class for managing scene operations like loading, clearing, and object management
  */
 var SceneOperationsManager = /*#__PURE__*/function () {
-  /**
-   * Create a SceneOperationsManager
-   * @param {Object} component - The component with scene, camera, renderer, etc.
+  /**
+   * Create a SceneOperationsManager
+   * @param {Object} component - The component with scene, camera, renderer, etc.
    */
   function SceneOperationsManager(component) {
     _classCallCheck(this, SceneOperationsManager);
@@ -4898,8 +5312,8 @@ var SceneOperationsManager = /*#__PURE__*/function () {
     }
   }
 
-  /**
-   * Clear scene objects while preserving base environment
+  /**
+   * Clear scene objects while preserving base environment
    */
   return _createClass(SceneOperationsManager, [{
     key: "clearSceneObjects",
@@ -4975,9 +5389,9 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       console.log('✅ Scene clear operation completed');
     }
 
-    /**
-     * Ensure transform controls remain properly attached after scene operations
-     * @param {boolean} attachToSelected - Whether to attach to selected object
+    /**
+     * Ensure transform controls remain properly attached after scene operations
+     * @param {boolean} attachToSelected - Whether to attach to selected object
      */
   }, {
     key: "ensureTransformControlsAttached",
@@ -4995,8 +5409,8 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Deselect any selected object
+    /**
+     * Deselect any selected object
      */
   }, {
     key: "deselectObject",
@@ -5008,9 +5422,9 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Load scene data from JSON
-     * @param {Object|string} sceneData - Scene data object or JSON string
+    /**
+     * Load scene data from JSON
+     * @param {Object|string} sceneData - Scene data object or JSON string
      */
   }, {
     key: "loadSceneData",
@@ -5052,10 +5466,10 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       return true;
     }
 
-    /**
-     * Load scene objects from parsed scene data
-     * @param {Object} sceneObject - The root scene object from parsed data
-     * @private
+    /**
+     * Load scene objects from parsed scene data
+     * @param {Object} sceneObject - The root scene object from parsed data
+     * @private
      */
   }, {
     key: "_loadSceneObjects",
@@ -5074,11 +5488,11 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Create a Three.js object from object data
-     * @param {Object} objectData - The object data from parsed scene
-     * @returns {THREE.Object3D} The created object or null if invalid
-     * @private
+    /**
+     * Create a Three.js object from object data
+     * @param {Object} objectData - The object data from parsed scene
+     * @returns {THREE.Object3D} The created object or null if invalid
+     * @private
      */
   }, {
     key: "_createObjectFromData",
@@ -5136,11 +5550,11 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       return object;
     }
 
-    /**
-     * Set up object properties based on type
-     * @param {THREE.Object3D} object - The object to set up
-     * @param {Object} objectData - The object data
-     * @private
+    /**
+     * Set up object properties based on type
+     * @param {THREE.Object3D} object - The object to set up
+     * @param {Object} objectData - The object data
+     * @private
      */
   }, {
     key: "_setupObjectByType",
@@ -5209,10 +5623,10 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Load connections from scene data
-     * @param {Array} connections - Array of connection objects
-     * @private
+    /**
+     * Load connections from scene data
+     * @param {Array} connections - Array of connection objects
+     * @private
      */
   }, {
     key: "_loadConnections",
@@ -5246,10 +5660,46 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       });
     }
 
-    /**
-     * Find object in scene by name
-     * @param {string} name - The name to search for
-     * @returns {THREE.Object3D|null} The found object or null
+    /**
+     * Ensure scene elements are visible
+     * Makes sure all scene elements are properly visible and within camera view
+     */
+  }, {
+    key: "ensureSceneElementsVisible",
+    value: function ensureSceneElementsVisible() {
+      var component = this.component;
+      if (!component.scene || !component.camera) {
+        console.warn('⚠️ Cannot ensure scene elements visibility: scene or camera missing');
+        return false;
+      }
+
+      // Reset camera position if it's too close to origin
+      if (component.camera.position.length() < 5) {
+        component.camera.position.set(10, 10, 10);
+        component.camera.lookAt(0, 0, 0);
+        if (component.controls) {
+          component.controls.target.set(0, 0, 0);
+          component.controls.update();
+        }
+      }
+
+      // Check if scene has any visible objects
+      var hasVisibleObjects = false;
+      component.scene.traverse(function (child) {
+        if (child.visible && child !== component.scene && !child.isLight) {
+          hasVisibleObjects = true;
+        }
+      });
+      if (!hasVisibleObjects) {
+        console.warn('⚠️ Scene has no visible objects');
+      }
+      return hasVisibleObjects;
+    }
+
+    /**
+     * Find object in scene by name
+     * @param {string} name - The name to search for
+     * @returns {THREE.Object3D|null} The found object or null
      */
   }, {
     key: "findObjectByName",
@@ -5266,10 +5716,10 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       return foundObject;
     }
 
-    /**
-     * Find object in scene by UUID
-     * @param {string} uuid - The UUID to search for
-     * @returns {THREE.Object3D|null} The found object or null
+    /**
+     * Find object in scene by UUID
+     * @param {string} uuid - The UUID to search for
+     * @returns {THREE.Object3D|null} The found object or null
      */
   }, {
     key: "findObjectByUuid",
@@ -5286,9 +5736,9 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       return foundObject;
     }
 
-    /**
-     * Remove an object from the scene
-     * @param {THREE.Object3D} object - The object to remove
+    /**
+     * Remove an object from the scene
+     * @param {THREE.Object3D} object - The object to remove
      */
   }, {
     key: "removeObject",
@@ -5319,12 +5769,12 @@ var SceneOperationsManager = /*#__PURE__*/function () {
       return true;
     }
 
-    /**
-     * Duplicate an object in the scene
-     * @param {THREE.Object3D} sourceObject - The object to duplicate
-     * @param {Object} [options] - Options for duplication
-     * @param {THREE.Vector3} [options.positionOffset] - Position offset for the duplicate
-     * @returns {THREE.Object3D|null} The duplicated object or null if failed
+    /**
+     * Duplicate an object in the scene
+     * @param {THREE.Object3D} sourceObject - The object to duplicate
+     * @param {Object} [options] - Options for duplication
+     * @param {THREE.Vector3} [options.positionOffset] - Position offset for the duplicate
+     * @returns {THREE.Object3D|null} The duplicated object or null if failed
      */
   }, {
     key: "duplicateObject",
@@ -5360,10 +5810,10 @@ var SceneOperationsManager = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Factory function to get SceneOperationsManager instance
- * @param {CentralPlantComponent} component - The component instance 
- * @returns {SceneOperationsManager} SceneOperationsManager instance
+/**
+ * Factory function to get SceneOperationsManager instance
+ * @param {CentralPlantComponent} component - The component instance 
+ * @returns {SceneOperationsManager} SceneOperationsManager instance
  */
 function getSceneOperationsManager(component) {
   return new SceneOperationsManager(component);
@@ -5376,9 +5826,51 @@ var sceneOperationsManager = /*#__PURE__*/Object.freeze({
   'default': SceneOperationsManager
 });
 
+/**
+ * Helper function to get asset paths that works in both bundled and modular contexts
+ * @param {string} assetPath - Relative path from the assets directory
+ * @returns {string} - The full path to the asset
+ */
+function getAssetPath(assetPath) {
+  // Strip leading slash if present
+  if (assetPath.startsWith('/')) {
+    assetPath = assetPath.substring(1);
+  }
+
+  // In browser context, check for different module formats
+  if (typeof window !== 'undefined') {
+    // For bundled version, assets should be in dist/bundle/assets/
+    // For ESM/CJS, assets should be in their respective folders
+
+    // Try to determine if we're using the bundled version or ESM/CJS
+    var isBundled = typeof CentralPlantUtils !== 'undefined';
+
+    // Check if we're running in a Nuxt.js environment (localhost:3000 is a common dev server)
+    var isNuxtEnv = window.location.hostname === 'localhost' && (window.location.port === '3000' || window.location.port === '3001');
+    if (isNuxtEnv) {
+      // In Nuxt.js environment, assets are likely in the /static directory at the root
+      return "/".concat(assetPath); // No /assets/ prefix in the URL path
+    } else if (isBundled) {
+      // Get the base URL for the module
+      var baseUrl = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.js', document.baseURI).href));
+      // In bundled format, assets are in the assets folder next to the bundle
+      return new URL("./assets/".concat(assetPath), baseUrl).href;
+    } else {
+      // Get the base URL for the module
+      var _baseUrl = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.js', document.baseURI).href));
+      // In ESM/CJS format, need to go up relative to current module path
+      return new URL("../assets/".concat(assetPath), _baseUrl).href;
+    }
+  }
+
+  // In Node.js context
+  return "assets/".concat(assetPath);
+}
 var TEXTURE_SETS = {
   // Light metallic texture using the gravel_embedded_concrete with metallic properties
   light_metal: {
+    // Local path first, with fallback to S3
+    localPath: 'textures/gravel_embedded_concrete_1k',
     path: 'https://central-plant-assets.s3.us-east-1.amazonaws.com/textures/gravel_embedded_concrete_1k',
     files: {
       diffuse: 'diffuse.jpg',
@@ -5404,6 +5896,8 @@ var TEXTURE_SETS = {
     }
   },
   brick: {
+    // Local path first, with fallback to S3
+    localPath: 'textures/pavement_03_1k',
     path: 'https://central-plant-assets.s3.us-east-1.amazonaws.com/textures/pavement_03_1k',
     files: {
       diffuse: 'diffuse.jpg',
@@ -5426,6 +5920,8 @@ var TEXTURE_SETS = {
     }
   },
   gravel_embedded_concrete: {
+    // Local path first, with fallback to S3
+    localPath: 'textures/gravel_embedded_concrete_1k',
     path: 'https://central-plant-assets.s3.us-east-1.amazonaws.com/textures/gravel_embedded_concrete_1k',
     files: {
       diffuse: 'diffuse.jpg',
@@ -5446,8 +5942,8 @@ var TEXTURE_SETS = {
   }
 };
 
-/**
- * Create a Three.js texture with appropriate settings
+/**
+ * Create a Three.js texture with appropriate settings
  */
 function createTexture(textureLoader, url) {
   var repeat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
@@ -5458,86 +5954,467 @@ function createTexture(textureLoader, url) {
     textureLoader = new THREE__namespace.TextureLoader();
   }
   try {
-    var texture = textureLoader.load(url);
-    texture.wrapS = THREE__namespace.RepeatWrapping;
-    texture.wrapT = THREE__namespace.RepeatWrapping;
-    texture.repeat.set(repeat.x, repeat.y);
-    texture.colorSpace = THREE__namespace.SRGBColorSpace;
-    return texture;
+    console.log("\uD83D\uDD0D Beginning texture load from: ".concat(url));
+
+    // Create placeholder texture for immediate use
+    // This will prevent the "no image data found" warning
+    var placeholderTexture = createPlaceholderTexture(0xcccccc);
+
+    // Create a promise to track when the real texture is loaded
+    var loadPromise = new Promise(function (resolve, reject) {
+      textureLoader.load(url, function (loadedTexture) {
+        console.log("\u2705 Successfully loaded texture from: ".concat(url));
+
+        // Check if the loaded texture has valid image data
+        if (loadedTexture.image && (loadedTexture.image instanceof HTMLImageElement && loadedTexture.image.complete || !(loadedTexture.image instanceof HTMLImageElement))) {
+          console.log("\u2705 Image data verified for ".concat(url));
+
+          // Explicitly set colorSpace for all textures to ensure proper rendering
+          if (loadedTexture.colorSpace !== undefined) {
+            loadedTexture.colorSpace = THREE__namespace.SRGBColorSpace;
+            console.log("\uD83C\uDFA8 Set colorSpace to SRGBColorSpace for ".concat(url));
+          } else if (loadedTexture.encoding !== undefined) {
+            loadedTexture.encoding = THREE__namespace.sRGBEncoding;
+            console.log("\uD83C\uDFA8 Set encoding to sRGBEncoding for ".concat(url));
+          }
+
+          // Configure texture properties
+          loadedTexture.wrapS = THREE__namespace.RepeatWrapping;
+          loadedTexture.wrapT = THREE__namespace.RepeatWrapping;
+          loadedTexture.repeat.set(repeat.x, repeat.y);
+          loadedTexture.needsUpdate = true;
+          resolve(loadedTexture);
+        } else {
+          console.warn("\u26A0\uFE0F Loaded texture from ".concat(url, " but image data is not ready"));
+          reject(new Error('Texture loaded but image data not ready'));
+        }
+      }, function (progressEvent) {
+        if (progressEvent.lengthComputable) {
+          var percentComplete = progressEvent.loaded / progressEvent.total * 100;
+          console.log("Loading texture ".concat(url, ": ").concat(Math.round(percentComplete), "% complete"));
+        }
+      }, function (error) {
+        console.error("\u274C Error loading texture from ".concat(url, ":"), error);
+        reject(error);
+      });
+    });
+
+    // Configure placeholder texture properties
+    placeholderTexture.wrapS = THREE__namespace.RepeatWrapping;
+    placeholderTexture.wrapT = THREE__namespace.RepeatWrapping;
+    placeholderTexture.repeat.set(repeat.x, repeat.y);
+
+    // Store the load promise and url for later reference
+    placeholderTexture.loadPromise = loadPromise;
+    placeholderTexture.url = url;
+
+    // When the real texture loads, we'll swap it in
+    loadPromise.then(function (realTexture) {
+      // Copy all properties from the real texture to the placeholder
+      Object.keys(realTexture).forEach(function (key) {
+        // Skip certain properties that shouldn't be copied
+        if (['uuid', 'id', 'version', 'isTexture'].includes(key)) return;
+        placeholderTexture[key] = realTexture[key];
+      });
+      placeholderTexture.image = realTexture.image;
+      placeholderTexture.source = realTexture.source;
+      placeholderTexture.needsUpdate = true;
+      console.log("\uD83D\uDD04 Updated placeholder texture with real image data for ".concat(url));
+    }).catch(function () {
+      console.warn("\u26A0\uFE0F Using placeholder for texture: ".concat(url));
+    });
+    return placeholderTexture;
   } catch (error) {
     console.error("Failed to load texture: ".concat(url), error);
-    return null;
+    return createPlaceholderTexture(0xdd3333); // Red placeholder for errors
   }
 }
 
-/**
- * Load a texture set and create a material
+/**
+ * Load a texture set and create a material
  */
 function loadTextureSetAndCreateMaterial(_x, _x2) {
   return _loadTextureSetAndCreateMaterial.apply(this, arguments);
 }
+
+/**
+ * Check if a texture has valid image data
+ * @param {THREE.Texture} texture - The texture to check
+ * @returns {boolean} - Whether the texture has valid image data
+ */
 function _loadTextureSetAndCreateMaterial() {
-  _loadTextureSetAndCreateMaterial = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(component, textureSetName) {
-    var textureSet, textureLoader, repeat, loadedTextures, loadTexture, material;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
+  _loadTextureSetAndCreateMaterial = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(component, textureSetName) {
+    var _textureSet$materialP2;
+    var textureSet, textureLoader, repeat, loadedTextures, checkFileExists, loadTexture, texturePromises, hasAnyTextures, _textureSet$materialP, fallbackColor, texturesWithValidData, _i2, _Object$entries, _Object$entries$_i, type, texture, material;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
         case 0:
           if (component) {
-            _context.n = 1;
+            _context4.n = 1;
             break;
           }
           console.warn('Component is required for texture loading');
-          return _context.a(2, new THREE__namespace.MeshStandardMaterial({
+          return _context4.a(2, new THREE__namespace.MeshStandardMaterial({
             color: 0xaaaaaa
           }));
         case 1:
           textureSet = TEXTURE_SETS[textureSetName];
           if (textureSet) {
-            _context.n = 2;
+            _context4.n = 2;
             break;
           }
           console.warn("Texture set not found: ".concat(textureSetName));
-          return _context.a(2, new THREE__namespace.MeshStandardMaterial({
+          return _context4.a(2, new THREE__namespace.MeshStandardMaterial({
             color: 0xaaaaaa
           }));
         case 2:
-          textureLoader = component.textureLoader || new THREE__namespace.TextureLoader();
+          console.log("\uD83C\uDF08 Loading texture set: ".concat(textureSetName));
+          textureLoader = component.textureLoader || new THREE__namespace.TextureLoader(); // Set cross-origin attribute to allow texture loading from different domains
+          if (typeof textureLoader.setCrossOrigin === 'function') {
+            textureLoader.setCrossOrigin('anonymous');
+            console.log('📡 Set cross-origin to anonymous for texture loading');
+          }
           repeat = textureSet.repeat || {
             x: 1,
             y: 1
           };
-          loadedTextures = {}; // Function to load a specific texture from the set
-          loadTexture = function loadTexture(type) {
-            if (!textureSet.files[type]) return null;
-            var url = "".concat(textureSet.path, "/").concat(textureSet.files[type]);
-            return createTexture(textureLoader, url, repeat);
-          }; // Load all textures in the set
-          Object.keys(textureSet.files).forEach(function (type) {
-            loadedTextures[type] = loadTexture(type);
+          loadedTextures = {}; // Function to check if a file exists
+          checkFileExists = /*#__PURE__*/function () {
+            var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url) {
+              return _regenerator().w(function (_context) {
+                while (1) switch (_context.n) {
+                  case 0:
+                    if (!(typeof window !== 'undefined')) {
+                      _context.n = 1;
+                      break;
+                    }
+                    return _context.a(2, new Promise(function (resolve) {
+                      var img = new Image();
+                      img.onload = function () {
+                        return resolve(true);
+                      };
+                      img.onerror = function () {
+                        return resolve(false);
+                      };
+                      img.src = url;
+                      setTimeout(function () {
+                        return resolve(false);
+                      }, 2000);
+                    }));
+                  case 1:
+                    return _context.a(2, false);
+                }
+              }, _callee);
+            }));
+            return function checkFileExists(_x3) {
+              return _ref.apply(this, arguments);
+            };
+          }(); // Function to load a specific texture from the set
+          loadTexture = /*#__PURE__*/function () {
+            var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(type) {
+              var paths, _i, _paths, path, exists;
+              return _regenerator().w(function (_context2) {
+                while (1) switch (_context2.n) {
+                  case 0:
+                    if (textureSet.files[type]) {
+                      _context2.n = 1;
+                      break;
+                    }
+                    return _context2.a(2, null);
+                  case 1:
+                    // Try multiple paths to find the texture
+                    paths = []; // 1. Try local bundled path first
+                    if (textureSet.localPath) {
+                      paths.push(getAssetPath("".concat(textureSet.localPath, "/").concat(textureSet.files[type])));
+                    }
+
+                    // 2. Try direct path to static folder
+                    paths.push("/textures/".concat(textureSetName, "_1k/").concat(textureSet.files[type]));
+
+                    // 3. Try remote path as fallback
+                    if (textureSet.path) {
+                      paths.push("".concat(textureSet.path, "/").concat(textureSet.files[type]));
+                    }
+                    console.log("\uD83D\uDD0D Will try loading texture ".concat(type, " from paths:"), paths);
+
+                    // Try each path until one works
+                    _i = 0, _paths = paths;
+                  case 2:
+                    if (!(_i < _paths.length)) {
+                      _context2.n = 6;
+                      break;
+                    }
+                    path = _paths[_i];
+                    console.log("\uD83D\uDD04 Checking if texture exists at: ".concat(path));
+                    _context2.n = 3;
+                    return checkFileExists(path);
+                  case 3:
+                    exists = _context2.v;
+                    if (!exists) {
+                      _context2.n = 4;
+                      break;
+                    }
+                    console.log("\u2705 Texture found at: ".concat(path));
+                    return _context2.a(2, createTexture(textureLoader, path, repeat));
+                  case 4:
+                    console.log("\u274C Texture not found at: ".concat(path));
+                  case 5:
+                    _i++;
+                    _context2.n = 2;
+                    break;
+                  case 6:
+                    console.error("\u274C Failed to load ".concat(type, " texture from any path"));
+                    return _context2.a(2, null);
+                }
+              }, _callee2);
+            }));
+            return function loadTexture(_x4) {
+              return _ref2.apply(this, arguments);
+            };
+          }(); // Load all textures in the set
+          texturePromises = Object.keys(textureSet.files).map(/*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(type) {
+              return _regenerator().w(function (_context3) {
+                while (1) switch (_context3.n) {
+                  case 0:
+                    _context3.n = 1;
+                    return loadTexture(type);
+                  case 1:
+                    loadedTextures[type] = _context3.v;
+                    return _context3.a(2, {
+                      type: type,
+                      texture: loadedTextures[type]
+                    });
+                }
+              }, _callee3);
+            }));
+            return function (_x5) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+          _context4.n = 3;
+          return Promise.all(texturePromises);
+        case 3:
+          // Log successful texture loads
+          Object.entries(loadedTextures).forEach(function (_ref4) {
+            var _ref5 = _slicedToArray(_ref4, 2),
+              type = _ref5[0],
+              texture = _ref5[1];
+            console.log("".concat(texture ? '✅' : '❌', " ").concat(type, " texture: ").concat(texture ? 'Loaded' : 'Failed'));
+          }); // Create material with textures and properties
+          console.log('Creating material with loaded textures and properties:', textureSet.materialProps);
+
+          // Check if we have at least one texture that's not null
+          hasAnyTextures = Object.values(loadedTextures).some(function (texture) {
+            return texture !== null;
           });
+          if (hasAnyTextures) {
+            _context4.n = 4;
+            break;
+          }
+          console.warn('⚠️ No textures loaded successfully for material. Using fallback color material.');
+
+          // Create a colored material as fallback
+          fallbackColor = ((_textureSet$materialP = textureSet.materialProps) === null || _textureSet$materialP === void 0 ? void 0 : _textureSet$materialP.color) || 0xaaaaaa;
+          return _context4.a(2, new THREE__namespace.MeshStandardMaterial({
+            color: fallbackColor,
+            roughness: 0.8,
+            metalness: 0.2,
+            side: THREE__namespace.DoubleSide
+          }));
+        case 4:
+          // Verify if the textures have valid image data
+          texturesWithValidData = {};
+          for (_i2 = 0, _Object$entries = Object.entries(loadedTextures); _i2 < _Object$entries.length; _i2++) {
+            _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2), type = _Object$entries$_i[0], texture = _Object$entries$_i[1];
+            if (texture && hasValidImageData(texture)) {
+              console.log("\u2705 Texture '".concat(type, "' has valid image data"));
+              texturesWithValidData[type] = texture;
+            } else if (texture) {
+              console.log("\u26A0\uFE0F Texture '".concat(type, "' doesn't have valid image data yet"));
+              // Keep the texture even if it doesn't have valid data yet
+              // Our createTexture function now handles this with placeholders
+              texturesWithValidData[type] = texture;
+            }
+          }
+
+          // Create the standard material with loaded textures
+          material = new THREE__namespace.MeshStandardMaterial(_objectSpread2(_objectSpread2({
+            map: texturesWithValidData.diffuse,
+            normalMap: texturesWithValidData.normal,
+            roughnessMap: texturesWithValidData.roughness,
+            metalnessMap: texturesWithValidData.metalness,
+            aoMap: texturesWithValidData.ao,
+            displacementMap: texturesWithValidData.displacement
+          }, textureSet.materialProps), {}, {
+            side: THREE__namespace.DoubleSide // Always set DoubleSide to avoid rendering issues
+          })); // Ensure color is applied even if textures are loading
+
+          if ((!material.map || !hasValidImageData(material.map)) && (_textureSet$materialP2 = textureSet.materialProps) !== null && _textureSet$materialP2 !== void 0 && _textureSet$materialP2.color) {
+            material.color = new THREE__namespace.Color(textureSet.materialProps.color);
+            console.log("\uD83C\uDFA8 Applied fallback color: #".concat(material.color.getHexString()));
+          }
 
-          // Create material with textures and properties
-          material = new THREE__namespace.MeshStandardMaterial(_objectSpread2({
-            map: loadedTextures.diffuse,
-            normalMap: loadedTextures.normal,
-            roughnessMap: loadedTextures.roughness,
-            metalnessMap: loadedTextures.metalness,
-            aoMap: loadedTextures.ao,
-            displacementMap: loadedTextures.displacement
-          }, textureSet.materialProps)); // Add the environment map if available from the component
+          // Make sure material updates when textures load
+          material.needsUpdate = true;
+
+          // Add the environment map if available from the component
           if (component.scene && component.scene.environment) {
             material.envMap = component.scene.environment;
+            console.log('🌐 Added environment map to material');
           }
-          return _context.a(2, material);
+
+          // Set up texture load monitoring for each texture with a load promise
+          Object.entries(texturesWithValidData).forEach(function (_ref6) {
+            var _ref7 = _slicedToArray(_ref6, 2),
+              type = _ref7[0],
+              texture = _ref7[1];
+            if (texture && texture.loadPromise) {
+              texture.loadPromise.then(function () {
+                console.log("\u2705 Texture '".concat(type, "' finished loading, updating material"));
+                material.needsUpdate = true;
+              }).catch(function (error) {
+                console.warn("\u26A0\uFE0F Failed to load '".concat(type, "' texture:"), error);
+              });
+            }
+          });
+          return _context4.a(2, material);
       }
-    }, _callee);
+    }, _callee4);
   }));
   return _loadTextureSetAndCreateMaterial.apply(this, arguments);
 }
+function hasValidImageData(texture) {
+  if (!texture) return false;
+
+  // Check if image exists
+  if (!texture.image) return false;
+
+  // For image objects, check width and height
+  if (texture.image instanceof HTMLImageElement || texture.image instanceof HTMLCanvasElement) {
+    return texture.image.width > 0 && texture.image.height > 0;
+  }
+
+  // For other image types (like ImageBitmap)
+  if (texture.image.data && Array.isArray(texture.image.data)) {
+    return texture.image.data.length > 0;
+  }
+  return false;
+}
+
+/**
+ * Create a placeholder colored texture when image loading fails
+ * @param {number} color - The color for the placeholder texture
+ * @param {number} size - The size of the texture in pixels
+ * @returns {THREE.Texture} - A colored placeholder texture
+ */
+function createPlaceholderTexture() {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0xcccccc;
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 64;
+  // Create a canvas element
+  var canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+
+  // Get the 2D context and fill with color
+  var context = canvas.getContext('2d');
+  if (context) {
+    var hexColor = '#' + color.toString(16).padStart(6, '0');
+    context.fillStyle = hexColor;
+    context.fillRect(0, 0, size, size);
+
+    // Optional: Add a pattern to make it obvious it's a placeholder
+    context.fillStyle = '#' + (color + 0x222222 & 0xffffff).toString(16);
+    context.fillRect(0, 0, size / 2, size / 2);
+    context.fillRect(size / 2, size / 2, size / 2, size / 2);
+  }
+
+  // Create a texture from the canvas
+  var texture = new THREE__namespace.CanvasTexture(canvas);
+  texture.needsUpdate = true;
+
+  // Set proper color space
+  if (texture.colorSpace !== undefined) {
+    texture.colorSpace = THREE__namespace.SRGBColorSpace;
+  } else if (texture.encoding !== undefined) {
+    texture.encoding = THREE__namespace.sRGBEncoding;
+  }
+  return texture;
+}
+
+/**
+ * Helper function to check Three.js compatibility and configuration
+ */
+function checkThreeJSCompatibility() {
+  console.group('🔍 Three.js Compatibility Check');
+
+  // Check Three.js version
+  console.log('Three.js version:', THREE__namespace.REVISION);
+
+  // Check color space constants
+  console.log('Color space support:', {
+    SRGBColorSpace: typeof THREE__namespace.SRGBColorSpace !== 'undefined',
+    LinearSRGBColorSpace: typeof THREE__namespace.LinearSRGBColorSpace !== 'undefined',
+    sRGBEncoding: typeof THREE__namespace.sRGBEncoding !== 'undefined'
+  });
+
+  // Check texture-related features
+  console.log('Texture features:', {
+    TextureLoader: typeof THREE__namespace.TextureLoader === 'function',
+    RepeatWrapping: typeof THREE__namespace.RepeatWrapping !== 'undefined',
+    MirroredRepeatWrapping: typeof THREE__namespace.MirroredRepeatWrapping !== 'undefined'
+  });
+
+  // Check shader and material features
+  console.log('Material features:', {
+    MeshStandardMaterial: typeof THREE__namespace.MeshStandardMaterial === 'function',
+    MeshBasicMaterial: typeof THREE__namespace.MeshBasicMaterial === 'function',
+    ShaderMaterial: typeof THREE__namespace.ShaderMaterial === 'function'
+  });
+  console.groupEnd();
+  return {
+    version: THREE__namespace.REVISION,
+    hasNewColorSpace: typeof THREE__namespace.SRGBColorSpace !== 'undefined',
+    hasOldEncoding: typeof THREE__namespace.sRGBEncoding !== 'undefined',
+    hasTextureLoader: typeof THREE__namespace.TextureLoader === 'function'
+  };
+}
+function forceUpdateMaterials(scene) {
+  if (!scene) return;
+  console.log('🔄 Forcing update on all scene materials...');
+  var materialCount = 0;
+  scene.traverse(function (node) {
+    if (node.isMesh && node.material) {
+      var materials = Array.isArray(node.material) ? node.material : [node.material];
+      materials.forEach(function (material) {
+        if (material) {
+          material.needsUpdate = true;
+          materialCount++;
+
+          // Ensure maps are properly set
+          if (material.map) {
+            material.map.needsUpdate = true;
+          }
+          if (material.normalMap) {
+            material.normalMap.needsUpdate = true;
+          }
+          if (material.roughnessMap) {
+            material.roughnessMap.needsUpdate = true;
+          }
+        }
+      });
+    }
+  });
+  console.log("\u2705 Updated ".concat(materialCount, " materials in the scene"));
+}
 var textureConfig = {
   TEXTURE_SETS: TEXTURE_SETS,
   createTexture: createTexture,
-  loadTextureSetAndCreateMaterial: loadTextureSetAndCreateMaterial
+  loadTextureSetAndCreateMaterial: loadTextureSetAndCreateMaterial,
+  checkThreeJSCompatibility: checkThreeJSCompatibility,
+  forceUpdateMaterials: forceUpdateMaterials,
+  hasValidImageData: hasValidImageData,
+  createPlaceholderTexture: createPlaceholderTexture
 };
 
 var textureConfig$1 = /*#__PURE__*/Object.freeze({
@@ -5545,25 +6422,27 @@ var textureConfig$1 = /*#__PURE__*/Object.freeze({
   TEXTURE_SETS: TEXTURE_SETS,
   createTexture: createTexture,
   loadTextureSetAndCreateMaterial: loadTextureSetAndCreateMaterial,
+  checkThreeJSCompatibility: checkThreeJSCompatibility,
+  forceUpdateMaterials: forceUpdateMaterials,
   'default': textureConfig
 });
 
-/**
- * Transform Controls Manager for Three.js
- * Provides modular object transformation capabilities with position, rotation, and scale controls
+/**
+ * Transform Controls Manager for Three.js
+ * Provides modular object transformation capabilities with position, rotation, and scale controls
  */
 
 var THREE;
 var TransformControls$2;
 
-/**
- * Dynamically import ThreeJS and TransformControls when in browser environment
+/**
+ * Dynamically import ThreeJS and TransformControls when in browser environment
  */
 function importDependencies() {
   return _importDependencies.apply(this, arguments);
 }
-/**
- * Class for managing object transform controls in a 3D scene
+/**
+ * Class for managing object transform controls in a 3D scene
  */
 function _importDependencies() {
   _importDependencies = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
@@ -5618,12 +6497,12 @@ function _importDependencies() {
   return _importDependencies.apply(this, arguments);
 }
 var TransformControlsManager = /*#__PURE__*/function () {
-  /**
-   * Create a TransformControlsManager
-   * @param {THREE.Scene} scene - The Three.js scene
-   * @param {THREE.Camera} camera - The Three.js camera
-   * @param {THREE.WebGLRenderer} renderer - The Three.js renderer
-   * @param {THREE.OrbitControls} orbitControls - Optional orbit controls for camera
+  /**
+   * Create a TransformControlsManager
+   * @param {THREE.Scene} scene - The Three.js scene
+   * @param {THREE.Camera} camera - The Three.js camera
+   * @param {THREE.WebGLRenderer} renderer - The Three.js renderer
+   * @param {THREE.OrbitControls} orbitControls - Optional orbit controls for camera
    */
   function TransformControlsManager(scene, camera, renderer) {
     var _this = this;
@@ -5708,8 +6587,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
     }
   }
 
-  /**
-   * Initialize the transform controls
+  /**
+   * Initialize the transform controls
    */
   return _createClass(TransformControlsManager, [{
     key: "init",
@@ -5738,9 +6617,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
       return init;
     }()
-    /**
-     * Register event callbacks
-     * @param {Object} callbacks - Object containing callback functions
+    /**
+     * Register event callbacks
+     * @param {Object} callbacks - Object containing callback functions
      */
     )
   }, {
@@ -5763,8 +6642,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Create transform controls and add to scene
+    /**
+     * Create transform controls and add to scene
      */
   }, {
     key: "createTransformControls",
@@ -5797,8 +6676,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Set up event listeners for transform controls
+    /**
+     * Set up event listeners for transform controls
      */
   }, {
     key: "setupEventListeners",
@@ -5866,8 +6745,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Set up keyboard controls for transform operations
+    /**
+     * Set up keyboard controls for transform operations
      */
   }, {
     key: "setupKeyboardControls",
@@ -5954,8 +6833,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       document.addEventListener('keydown', this.eventHandlers.keydown);
     }
 
-    /**
-     * Remove all event listeners
+    /**
+     * Remove all event listeners
      */
   }, {
     key: "removeEventListeners",
@@ -5975,9 +6854,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Select an object for transformation
-     * @param {THREE.Object3D} object - The object to transform
+    /**
+     * Select an object for transformation
+     * @param {THREE.Object3D} object - The object to transform
      */
   }, {
     key: "selectObject",
@@ -6008,8 +6887,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       return object;
     }
 
-    /**
-     * Deselect the currently selected object
+    /**
+     * Deselect the currently selected object
      */
   }, {
     key: "deselectObject",
@@ -6039,9 +6918,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       return null;
     }
 
-    /**
-     * Set transformation mode
-     * @param {string} mode - The transform mode ('translate', 'rotate', or 'scale')
+    /**
+     * Set transformation mode
+     * @param {string} mode - The transform mode ('translate', 'rotate', or 'scale')
      */
   }, {
     key: "setMode",
@@ -6071,8 +6950,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Toggle coordinate space between world and local
+    /**
+     * Toggle coordinate space between world and local
      */
   }, {
     key: "toggleSpace",
@@ -6082,8 +6961,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       this.transformControls.setSpace(this.currentSpace);
     }
 
-    /**
-     * Toggle visibility of transform controls
+    /**
+     * Toggle visibility of transform controls
      */
   }, {
     key: "toggleVisibility",
@@ -6094,9 +6973,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Set enabled state of transform controls
-     * @param {boolean} enabled - Whether transform controls should be enabled
+    /**
+     * Set enabled state of transform controls
+     * @param {boolean} enabled - Whether transform controls should be enabled
      */
   }, {
     key: "setEnabled",
@@ -6113,8 +6992,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Update axis visibility based on config
+    /**
+     * Update axis visibility based on config
      */
   }, {
     key: "updateAxisVisibility",
@@ -6125,9 +7004,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       this.transformControls.showZ = this.config.showZ;
     }
 
-    /**
-     * Show bounding box for an object
-     * @param {THREE.Object3D} object - The object to show bounding box for
+    /**
+     * Show bounding box for an object
+     * @param {THREE.Object3D} object - The object to show bounding box for
      */
   }, {
     key: "showBoundingBox",
@@ -6154,8 +7033,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       object.userData.worldBoundingBox = boundingBox;
     }
 
-    /**
-     * Hide bounding box helper
+    /**
+     * Hide bounding box helper
      */
   }, {
     key: "hideBoundingBox",
@@ -6166,8 +7045,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Update bounding box for selected object
+    /**
+     * Update bounding box for selected object
      */
   }, {
     key: "updateBoundingBox",
@@ -6189,10 +7068,10 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Capture object transformation data
-     * @param {THREE.Object3D} object - The object to capture transform from
-     * @returns {Object} Object containing position, rotation and scale data
+    /**
+     * Capture object transformation data
+     * @param {THREE.Object3D} object - The object to capture transform from
+     * @returns {Object} Object containing position, rotation and scale data
      */
   }, {
     key: "captureObjectTransform",
@@ -6217,12 +7096,12 @@ var TransformControlsManager = /*#__PURE__*/function () {
       };
     }
 
-    /**
-     * Set snap values for transformations
-     * @param {Object} options - Snap options
-     * @param {number} options.translation - Translation snap value
-     * @param {number} options.rotation - Rotation snap value in degrees
-     * @param {number} options.scale - Scale snap value
+    /**
+     * Set snap values for transformations
+     * @param {Object} options - Snap options
+     * @param {number} options.translation - Translation snap value
+     * @param {number} options.rotation - Rotation snap value in degrees
+     * @param {number} options.scale - Scale snap value
      */
   }, {
     key: "setSnapValues",
@@ -6251,9 +7130,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Set size of transform controls
-     * @param {number} size - The size factor for transform controls
+    /**
+     * Set size of transform controls
+     * @param {number} size - The size factor for transform controls
      */
   }, {
     key: "setSize",
@@ -6264,8 +7143,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
     }
 
-    /**
-     * Clean up resources and remove event listeners
+    /**
+     * Clean up resources and remove event listeners
      */
   }, {
     key: "dispose",
@@ -6284,10 +7163,10 @@ var TransformControlsManager = /*#__PURE__*/function () {
       console.log('🧹 TransformControlsManager disposed');
     }
 
-    /**
-     * Ensures transform controls are properly attached to the scene
-     * @param {boolean} allowVisible - Whether to allow controls to be visible when reattached
-     * @returns {boolean} - True if controls were reattached, false if already attached
+    /**
+     * Ensures transform controls are properly attached to the scene
+     * @param {boolean} allowVisible - Whether to allow controls to be visible when reattached
+     * @returns {boolean} - True if controls were reattached, false if already attached
      */
   }, {
     key: "ensureSceneAttachment",
@@ -6308,9 +7187,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       return false; // Already properly attached
     }
 
-    /**
-     * Get current transform data for the selected object
-     * @returns {Object|null} Object containing position, rotation, scale, and world coordinates
+    /**
+     * Get current transform data for the selected object
+     * @returns {Object|null} Object containing position, rotation, scale, and world coordinates
      */
   }, {
     key: "getTransformData",
@@ -6360,13 +7239,13 @@ var TransformControlsManager = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Factory function to get TransformControlsManager instance
- * @param {THREE.Scene} scene - The Three.js scene
- * @param {THREE.Camera} camera - The Three.js camera
- * @param {THREE.WebGLRenderer} renderer - The Three.js renderer
- * @param {THREE.OrbitControls} orbitControls - Optional orbit controls for camera
- * @returns {TransformControlsManager} TransformControlsManager instance
+/**
+ * Factory function to get TransformControlsManager instance
+ * @param {THREE.Scene} scene - The Three.js scene
+ * @param {THREE.Camera} camera - The Three.js camera
+ * @param {THREE.WebGLRenderer} renderer - The Three.js renderer
+ * @param {THREE.OrbitControls} orbitControls - Optional orbit controls for camera
+ * @returns {TransformControlsManager} TransformControlsManager instance
  */
 function getTransformControlsManager(scene, camera, renderer, orbitControls) {
   return new TransformControlsManager(scene, camera, renderer, orbitControls);
@@ -6379,60 +7258,62 @@ var transformControlsManager = /*#__PURE__*/Object.freeze({
   'default': TransformControlsManager
 });
 
-/**
- * @module CentralPlant/Utils
- * @description Central Plant Utilities Module
- * 
- * This is the main entry point for all utility functions and classes
- * used in the Central Plant application. Import this module to access
- * all utility functions through a single interface.
- * 
- * @example
- * // Import the entire utilities module
- * import CentralPlant from 'central-plant';
- * 
- * // Use a specific utility
- * CentralPlant.modelPreloader.preloadAllModels(...);
- * 
- * @example
- * // Import specific modules
- * import { modelPreloader, nameUtils } from 'CentralPlant';
- * 
- * // Use them directly
- * modelPreloader.preloadAllModels(...);
- * 
- * @example
- * // Import common functions directly
- * import { getHardcodedUuid, logger } from 'CentralPlant';
- * 
- * // Use functions directly
- * const uuid = getHardcodedUuid(object);
- * logger.info('Operation completed');
+/**
+ * @module CentralPlant/Utils
+ * @description Central Plant Utilities Module
+ * 
+ * This is the main entry point for all utility functions and classes
+ * used in the Central Plant application. Import this module to access
+ * all utility functions through a single interface.
+ * 
+ * @example
+ * // Import the entire utilities module
+ * import CentralPlant from 'central-plant';
+ * 
+ * // Use a specific utility
+ * CentralPlant.modelPreloader.preloadAllModels(...);
+ * 
+ * @example
+ * // Import specific modules
+ * import { modelPreloader, nameUtils } from 'CentralPlant';
+ * 
+ * // Use them directly
+ * modelPreloader.preloadAllModels(...);
+ * 
+ * @example
+ * // Import common functions directly
+ * import { getHardcodedUuid, logger } from 'CentralPlant';
+ * 
+ * // Use functions directly
+ * const uuid = getHardcodedUuid(object);
+ * logger.info('Operation completed');
  */
+// Use the explicit modelPreloader object as the named export
+var modelPreloader = explicitModelPreloader;
 
-/**
- * Central API object that provides access to all utility modules
- * @type {Object}
- * @property {Object} animation - Animation management utilities
- * @property {Object} component - Component management utilities
- * @property {Object} debug - Debugging and logging utilities
- * @property {Object} disposal - Resource disposal utilities
- * @property {Object} environment - 3D environment management utilities
- * @property {Object} hotReload - Hot reload handling utilities
- * @property {Object} keyboardControls - Keyboard controls management
- * @property {Object} modelPreloader - Model preloading utilities
- * @property {Object} name - Name and UUID management utilities
- * @property {Object} pathfinding - Pathfinding utilities
- * @property {Object} performance - Performance monitoring utilities
- * @property {Object} sceneExport - Scene export utilities
- * @property {Object} sceneInitialization - Scene initialization utilities
- * @property {Object} sceneOperations - Scene operations utilities
- * @property {Object} texture - Texture management utilities
- * @property {Object} transformControls - Transform controls utilities
- * @property {Object} pathfinder - Pathfinder utilities
- * @property {Object} connectionManager - Connection management utilities
+/**
+ * Central API object that provides access to all utility modules
+ * @type {Object}
+ * @property {Object} animation - Animation management utilities
+ * @property {Object} component - Component management utilities
+ * @property {Object} debug - Debugging and logging utilities
+ * @property {Object} disposal - Resource disposal utilities
+ * @property {Object} environment - 3D environment management utilities
+ * @property {Object} hotReload - Hot reload handling utilities
+ * @property {Object} keyboardControls - Keyboard controls management
+ * @property {Object} modelPreloader - Model preloading utilities
+ * @property {Object} name - Name and UUID management utilities
+ * @property {Object} pathfinding - Pathfinding utilities
+ * @property {Object} performance - Performance monitoring utilities
+ * @property {Object} sceneExport - Scene export utilities
+ * @property {Object} sceneInitialization - Scene initialization utilities
+ * @property {Object} sceneOperations - Scene operations utilities
+ * @property {Object} texture - Texture management utilities
+ * @property {Object} transformControls - Transform controls utilities
+ * @property {Object} pathfinder - Pathfinder utilities
+ * @property {Object} connectionManager - Connection management utilities
  */
-var CentralPlantUtils = {
+var CentralPlantUtils$1 = {
   animation: animationManager$1,
   component: componentManager$1,
   debug: debugLogger,
@@ -6440,7 +7321,7 @@ var CentralPlantUtils = {
   environment: environmentManager$2,
   hotReload: hotReloadManager$1,
   keyboardControls: keyboardControlsManager$1,
-  modelPreloader: modelPreloader$1,
+  modelPreloader: modelPreloader,
   name: nameUtils,
   pathfinding: pathfindingManager$2,
   performance: performanceMonitor$1,
@@ -14233,7 +15114,7 @@ exports.Pathfinder = Pathfinder$1;
 exports.animationManager = animationManager$1;
 exports.componentManager = componentManager$1;
 exports.debugLogger = debugLogger;
-exports["default"] = CentralPlantUtils;
+exports["default"] = CentralPlantUtils$1;
 exports.disposalManager = disposalManager$1;
 exports.environmentManager = environmentManager$2;
 exports.findObjectByHardcodedUuid = findObjectByHardcodedUuid;
@@ -14246,7 +15127,7 @@ exports.hotReloadManager = hotReloadManager$1;
 exports.keyboardControlsManager = keyboardControlsManager$1;
 exports.logger = logger;
 exports.modelLogger = modelLogger;
-exports.modelPreloader = modelPreloader$1;
+exports.modelPreloader = modelPreloader;
 exports.nameUtils = nameUtils;
 exports.pathfinderLogger = pathfinderLogger;
 exports.pathfindingManager = pathfindingManager$2;