@2112-lab/central-plant 0.1.62 → 0.1.64

package/dist/bundle/index.js

@@ -17751,6 +17751,7 @@ var ModelPreloader = /*#__PURE__*/function () {
     this.preloadingPromise = null;
     this.componentDictionary = null;
     this.modelsBasePath = '/library/models/'; // Default local path
+    this.urlResolver = null; // Optional function to resolve model URLs (for S3 authentication)
 
     console.log('🚀 ModelPreloader initialized with GLB support');
   }
@@ -17773,6 +17774,27 @@ var ModelPreloader = /*#__PURE__*/function () {
       console.log("\uD83D\uDCC2 Models base path set to: ".concat(this.modelsBasePath));
     }
 
+    /**
+     * Set a URL resolver function for model loading
+     * @param {Function} resolverFn - Function that takes modelKey and returns Promise<string> URL
+     * @example
+     * // Sandbox can provide S3 signed URL resolver
+     * modelPreloader.setUrlResolver(async (modelKey) => {
+     *   const url = await Storage.get(`models/${modelKey}`)
+     *   return url
+     * })
+     */
+  }, {
+    key: "setUrlResolver",
+    value: function setUrlResolver(resolverFn) {
+      if (typeof resolverFn !== 'function') {
+        console.warn('⚠️ urlResolver must be a function');
+        return;
+      }
+      this.urlResolver = resolverFn;
+      console.log('🔗 URL resolver set for model loading');
+    }
+
     /**
      * Preload all models from the component dictionary
      * @param {Object} componentDictionary - The component dictionary object
@@ -17881,59 +17903,94 @@ var ModelPreloader = /*#__PURE__*/function () {
   }, {
     key: "preloadSingleModel",
     value: (function () {
-      var _preloadSingleModel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(modelKey) {
+      var _preloadSingleModel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(modelKey) {
         var _this2 = this;
         var loadPromise;
-        return _regenerator().w(function (_context2) {
-          while (1) switch (_context2.n) {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
             case 0:
               if (!this.modelCache.has(modelKey)) {
-                _context2.n = 1;
+                _context3.n = 1;
                 break;
               }
               console.log("\uD83C\uDFAF Model ".concat(modelKey, " already cached, skipping"));
-              return _context2.a(2, this.modelCache.get(modelKey));
+              return _context3.a(2, this.modelCache.get(modelKey));
             case 1:
               if (!this.loadingPromises.has(modelKey)) {
-                _context2.n = 2;
+                _context3.n = 2;
                 break;
               }
               console.log("\u23F3 Model ".concat(modelKey, " already loading, waiting for completion"));
-              return _context2.a(2, this.loadingPromises.get(modelKey));
+              return _context3.a(2, this.loadingPromises.get(modelKey));
             case 2:
               console.log("\uD83D\uDD04 Starting preload of GLB model: ".concat(modelKey));
-              loadPromise = new Promise(function (resolve, reject) {
-                var modelPath = "".concat(_this2.modelsBasePath).concat(modelKey);
-                console.log("\uD83D\uDCC2 Loading from: ".concat(modelPath));
-
-                // Load GLB model
-                _this2.gltfLoader.load(modelPath, function (gltf) {
-                  console.log("\u2705 Successfully preloaded GLB model: ".concat(modelKey));
-                  // Cache the scene for future use
-                  _this2.modelCache.set(modelKey, gltf.scene);
-                  // Remove from loading promises
-                  _this2.loadingPromises.delete(modelKey);
-                  resolve(gltf.scene);
-                }, function (progress) {
-                  // Optional: track loading progress
-                  if (progress.lengthComputable) {
-                    var percentage = progress.loaded / progress.total * 100;
-                    if (percentage % 25 === 0) {
-                      // Log every 25%
-                      console.log("\uD83D\uDCCA Loading GLB ".concat(modelKey, ": ").concat(percentage.toFixed(0), "%"));
+              loadPromise = new Promise(/*#__PURE__*/function () {
+                var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(resolve, reject) {
+                  var modelPath, _t;
+                  return _regenerator().w(function (_context2) {
+                    while (1) switch (_context2.n) {
+                      case 0:
+                        if (!_this2.urlResolver) {
+                          _context2.n = 5;
+                          break;
+                        }
+                        _context2.p = 1;
+                        _context2.n = 2;
+                        return _this2.urlResolver(modelKey);
+                      case 2:
+                        modelPath = _context2.v;
+                        console.log("\uD83D\uDD17 Resolved URL for ".concat(modelKey, ":"), modelPath.substring(0, 100) + '...');
+                        _context2.n = 4;
+                        break;
+                      case 3:
+                        _context2.p = 3;
+                        _t = _context2.v;
+                        console.error("\u274C Failed to resolve URL for ".concat(modelKey, ":"), _t);
+                        reject(_t);
+                        return _context2.a(2);
+                      case 4:
+                        _context2.n = 6;
+                        break;
+                      case 5:
+                        modelPath = "".concat(_this2.modelsBasePath).concat(modelKey);
+                        console.log("\uD83D\uDCC2 Loading from: ".concat(modelPath));
+                      case 6:
+                        // Load GLB model
+                        _this2.gltfLoader.load(modelPath, function (gltf) {
+                          console.log("\u2705 Successfully preloaded GLB model: ".concat(modelKey));
+                          // Cache the scene for future use
+                          _this2.modelCache.set(modelKey, gltf.scene);
+                          // Remove from loading promises
+                          _this2.loadingPromises.delete(modelKey);
+                          resolve(gltf.scene);
+                        }, function (progress) {
+                          // Optional: track loading progress
+                          if (progress.lengthComputable) {
+                            var percentage = progress.loaded / progress.total * 100;
+                            if (percentage % 25 === 0) {
+                              // Log every 25%
+                              console.log("\uD83D\uDCCA Loading GLB ".concat(modelKey, ": ").concat(percentage.toFixed(0), "%"));
+                            }
+                          }
+                        }, function (error) {
+                          console.error("\u274C Failed to preload GLB model ".concat(modelKey, ":"), error);
+                          // Remove from loading promises
+                          _this2.loadingPromises.delete(modelKey);
+                          reject(error);
+                        });
+                      case 7:
+                        return _context2.a(2);
                     }
-                  }
-                }, function (error) {
-                  console.error("\u274C Failed to preload GLB model ".concat(modelKey, ":"), error);
-                  // Remove from loading promises
-                  _this2.loadingPromises.delete(modelKey);
-                  reject(error);
-                });
-              }); // Cache the loading promise
+                  }, _callee2, null, [[1, 3]]);
+                }));
+                return function (_x3, _x4) {
+                  return _ref.apply(this, arguments);
+                };
+              }()); // Cache the loading promise
               this.loadingPromises.set(modelKey, loadPromise);
-              return _context2.a(2, loadPromise);
+              return _context3.a(2, loadPromise);
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
       function preloadSingleModel(_x2) {
         return _preloadSingleModel.apply(this, arguments);
@@ -18553,6 +18610,7 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
     _this.lastCacheUpdate = 0;
     _this.cacheTimeout = 5000; // 5 seconds cache timeout
     _this.componentDictionary = null;
+    _this.dictionaryLoadPromise = null; // Track dictionary loading state
 
     // Register this manager with the sceneViewer if needed
     if (_this.sceneViewer && _this.sceneViewer.managers) {
@@ -18560,66 +18618,145 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
     }
 
     // Load component dictionary
-    _this._loadComponentDictionary();
+    _this.dictionaryLoadPromise = _this._loadComponentDictionary();
     return _this;
   }
 
   /**
-   * Get available components from the component dictionary
-   * @param {Object} options - Configuration options
-   * @param {string|string[]} options.category - Filter by category (single category or array of categories)
-   * @param {string} options.name - Filter by component name (partial match, case-insensitive)
-   * @returns {Array} Array of available component objects from the dictionary with metadata always included
+   * Ensure dictionary is loaded before accessing it
+   * @returns {Promise<boolean>} True if dictionary is loaded, false otherwise
    */
   _inherits(ComponentDataManager, _BaseDisposable);
   return _createClass(ComponentDataManager, [{
-    key: "getDictionaryComponents",
-    value: function getDictionaryComponents() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var _options$category = options.category,
-        category = _options$category === void 0 ? null : _options$category,
-        _options$name = options.name,
-        name = _options$name === void 0 ? null : _options$name;
-
-      // Always include metadata
-      var enhancedOptions = _objectSpread2(_objectSpread2({}, options), {}, {
-        includeMetadata: true
-      });
-      if (!this.componentDictionary) {
-        console.warn('⚠️ getDictionaryComponents(): Component dictionary not loaded');
-        return [];
+    key: "ensureDictionaryLoaded",
+    value: (function () {
+      var _ensureDictionaryLoaded = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              if (!this.componentDictionary) {
+                _context.n = 1;
+                break;
+              }
+              return _context.a(2, true);
+            case 1:
+              if (!this.dictionaryLoadPromise) {
+                _context.n = 3;
+                break;
+              }
+              _context.n = 2;
+              return this.dictionaryLoadPromise;
+            case 2:
+              return _context.a(2, !!this.componentDictionary);
+            case 3:
+              return _context.a(2, false);
+          }
+        }, _callee, this);
+      }));
+      function ensureDictionaryLoaded() {
+        return _ensureDictionaryLoaded.apply(this, arguments);
       }
-      var components = [];
-
-      // Process each component in the dictionary
-      for (var _i = 0, _Object$entries = Object.entries(this.componentDictionary); _i < _Object$entries.length; _i++) {
-        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-          key = _Object$entries$_i[0],
-          component = _Object$entries$_i[1];
-        // Skip the categories entry
-        if (key === 'categories') continue;
-
-        // Filter by category if specified (supports single category or array of categories)
-        if (category) {
-          var categoriesArray = Array.isArray(category) ? category : [category];
-          if (!categoriesArray.includes(component.category)) continue;
-        }
-
-        // Format the component data
-        var formattedComponent = this._formatDictionaryComponent(key, component, enhancedOptions);
-
-        // Filter by name if specified (partial match, case-insensitive)
-        if (name && typeof name === 'string' && name.trim().length > 0) {
-          var nameFilter = name.toLowerCase().trim();
-          if (!formattedComponent.name || !formattedComponent.name.toLowerCase().includes(nameFilter)) {
-            continue;
+      return ensureDictionaryLoaded;
+    }()
+    /**
+     * Get available components from the component dictionary
+     * @param {Object} options - Configuration options
+     * @param {string|string[]} options.category - Filter by category (single category or array of categories)
+     * @param {string} options.name - Filter by component name (partial match, case-insensitive)
+     * @returns {Promise<Array>} Array of available component objects from the dictionary with metadata always included
+     */
+    )
+  }, {
+    key: "getDictionaryComponents",
+    value: (function () {
+      var _getDictionaryComponents = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var options,
+          _options$category,
+          category,
+          _options$name,
+          name,
+          enhancedOptions,
+          components,
+          _i,
+          _Object$entries,
+          _Object$entries$_i,
+          key,
+          component,
+          categoriesArray,
+          formattedComponent,
+          nameFilter,
+          _args2 = arguments;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              options = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
+              _context2.n = 1;
+              return this.ensureDictionaryLoaded();
+            case 1:
+              _options$category = options.category, category = _options$category === void 0 ? null : _options$category, _options$name = options.name, name = _options$name === void 0 ? null : _options$name; // Always include metadata
+              enhancedOptions = _objectSpread2(_objectSpread2({}, options), {}, {
+                includeMetadata: true
+              });
+              if (this.componentDictionary) {
+                _context2.n = 2;
+                break;
+              }
+              console.warn('⚠️ getDictionaryComponents(): Component dictionary not loaded');
+              return _context2.a(2, []);
+            case 2:
+              components = []; // Process each component in the dictionary
+              _i = 0, _Object$entries = Object.entries(this.componentDictionary);
+            case 3:
+              if (!(_i < _Object$entries.length)) {
+                _context2.n = 8;
+                break;
+              }
+              _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], component = _Object$entries$_i[1];
+              if (!(key === 'categories')) {
+                _context2.n = 4;
+                break;
+              }
+              return _context2.a(3, 7);
+            case 4:
+              if (!category) {
+                _context2.n = 5;
+                break;
+              }
+              categoriesArray = Array.isArray(category) ? category : [category];
+              if (categoriesArray.includes(component.category)) {
+                _context2.n = 5;
+                break;
+              }
+              return _context2.a(3, 7);
+            case 5:
+              // Format the component data
+              formattedComponent = this._formatDictionaryComponent(key, component, enhancedOptions); // Filter by name if specified (partial match, case-insensitive)
+              if (!(name && typeof name === 'string' && name.trim().length > 0)) {
+                _context2.n = 6;
+                break;
+              }
+              nameFilter = name.toLowerCase().trim();
+              if (!(!formattedComponent.name || !formattedComponent.name.toLowerCase().includes(nameFilter))) {
+                _context2.n = 6;
+                break;
+              }
+              return _context2.a(3, 7);
+            case 6:
+              components.push(formattedComponent);
+            case 7:
+              _i++;
+              _context2.n = 3;
+              break;
+            case 8:
+              return _context2.a(2, components);
           }
-        }
-        components.push(formattedComponent);
+        }, _callee2, this);
+      }));
+      function getDictionaryComponents() {
+        return _getDictionaryComponents.apply(this, arguments);
       }
-      return components;
-    }
-
+      return getDictionaryComponents;
+    }()
     /**
      * Get scene hierarchy by directly traversing the scene
      * @param {Object} options - Scene hierarchy options
@@ -18627,6 +18764,7 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
      * @param {string} options.name - Filter by component name (partial match, case-insensitive)
      * @returns {Array} Array of scene component objects with connectors and gateways
      */
+    )
   }, {
     key: "getSceneHierarchy",
     value: function getSceneHierarchy() {
@@ -18767,9 +18905,133 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
       }];
     }
 
+    /**
+     * Extend component dictionary with additional components (e.g., from S3)
+     * @param {Object} additionalComponents - Object with component definitions to add
+     * @returns {Promise<boolean>} True if components were added successfully
+     */
+  }, {
+    key: "extendComponentDictionary",
+    value: (function () {
+      var _extendComponentDictionary = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(additionalComponents) {
+        var _this$sceneViewer, addedCount, modelPreloader, _t;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              if (!(!additionalComponents || _typeof(additionalComponents) !== 'object')) {
+                _context3.n = 1;
+                break;
+              }
+              console.warn('⚠️ extendComponentDictionary(): Invalid components object');
+              return _context3.a(2, false);
+            case 1:
+              _context3.n = 2;
+              return this.ensureDictionaryLoaded();
+            case 2:
+              if (this.componentDictionary) {
+                _context3.n = 3;
+                break;
+              }
+              console.warn('⚠️ extendComponentDictionary(): Component dictionary not loaded yet');
+              return _context3.a(2, false);
+            case 3:
+              _context3.p = 3;
+              // Merge additional components into dictionary
+              addedCount = Object.keys(additionalComponents).length;
+              Object.assign(this.componentDictionary, additionalComponents);
+
+              // Update ModelPreloader's dictionary reference
+              // This ensures drag-and-drop can find S3 components
+              modelPreloader = (_this$sceneViewer = this.sceneViewer) === null || _this$sceneViewer === void 0 || (_this$sceneViewer = _this$sceneViewer.centralPlant) === null || _this$sceneViewer === void 0 || (_this$sceneViewer = _this$sceneViewer.utilities) === null || _this$sceneViewer === void 0 ? void 0 : _this$sceneViewer.modelPreloader;
+              if (modelPreloader) {
+                modelPreloader.componentDictionary = this.componentDictionary;
+                console.log("\uD83D\uDD04 Updated ModelPreloader's dictionary reference (".concat(Object.keys(this.componentDictionary).length, " total components)"));
+              }
+
+              // Clear cache to force refresh
+              this.clearCache();
+              console.log("\u2705 extendComponentDictionary(): Added ".concat(addedCount, " components to dictionary"));
+              return _context3.a(2, true);
+            case 4:
+              _context3.p = 4;
+              _t = _context3.v;
+              console.error('❌ extendComponentDictionary(): Error extending dictionary:', _t);
+              return _context3.a(2, false);
+          }
+        }, _callee3, this, [[3, 4]]);
+      }));
+      function extendComponentDictionary(_x) {
+        return _extendComponentDictionary.apply(this, arguments);
+      }
+      return extendComponentDictionary;
+    }()
+    /**
+     * Remove S3 components from the component dictionary
+     * @returns {Promise<boolean>} True if components were removed successfully
+     */
+    )
+  }, {
+    key: "removeS3Components",
+    value: (function () {
+      var _removeS3Components = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        var _this3 = this;
+        var _this$sceneViewer2, keysToRemove, _i2, _Object$entries2, _Object$entries2$_i, key, component, modelPreloader, _t2;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              _context4.n = 1;
+              return this.ensureDictionaryLoaded();
+            case 1:
+              if (this.componentDictionary) {
+                _context4.n = 2;
+                break;
+              }
+              console.warn('⚠️ removeS3Components(): Component dictionary not loaded yet');
+              return _context4.a(2, false);
+            case 2:
+              _context4.p = 2;
+              // Find and remove all S3 components
+              keysToRemove = [];
+              for (_i2 = 0, _Object$entries2 = Object.entries(this.componentDictionary); _i2 < _Object$entries2.length; _i2++) {
+                _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2), key = _Object$entries2$_i[0], component = _Object$entries2$_i[1];
+                if (component.isS3Component) {
+                  keysToRemove.push(key);
+                }
+              }
+
+              // Remove the S3 components
+              keysToRemove.forEach(function (key) {
+                delete _this3.componentDictionary[key];
+              });
+
+              // Update ModelPreloader's dictionary reference
+              modelPreloader = (_this$sceneViewer2 = this.sceneViewer) === null || _this$sceneViewer2 === void 0 || (_this$sceneViewer2 = _this$sceneViewer2.centralPlant) === null || _this$sceneViewer2 === void 0 || (_this$sceneViewer2 = _this$sceneViewer2.utilities) === null || _this$sceneViewer2 === void 0 ? void 0 : _this$sceneViewer2.modelPreloader;
+              if (modelPreloader) {
+                modelPreloader.componentDictionary = this.componentDictionary;
+                console.log("\uD83D\uDD04 Updated ModelPreloader's dictionary reference (".concat(Object.keys(this.componentDictionary).length, " total components)"));
+              }
+
+              // Clear cache to force refresh
+              this.clearCache();
+              console.log("\u2705 removeS3Components(): Removed ".concat(keysToRemove.length, " S3 components from dictionary"));
+              return _context4.a(2, true);
+            case 3:
+              _context4.p = 3;
+              _t2 = _context4.v;
+              console.error('❌ removeS3Components(): Error removing S3 components:', _t2);
+              return _context4.a(2, false);
+          }
+        }, _callee4, this, [[2, 3]]);
+      }));
+      function removeS3Components() {
+        return _removeS3Components.apply(this, arguments);
+      }
+      return removeS3Components;
+    }()
     /**
      * Clear the component cache
      */
+    )
   }, {
     key: "clearCache",
     value: function clearCache() {
@@ -18780,46 +19042,47 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
     /**
      * Load component dictionary from static file
      * @private
+     * @returns {Promise<void>} Promise that resolves when dictionary is loaded
      */
   }, {
     key: "_loadComponentDictionary",
     value: (function () {
-      var _loadComponentDictionary2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var response, _t;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+      var _loadComponentDictionary2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+        var response, _t3;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
             case 0:
-              _context.p = 0;
-              _context.n = 1;
+              _context5.p = 0;
+              _context5.n = 1;
               return fetch('/library/component-dictionary.json');
             case 1:
-              response = _context.v;
+              response = _context5.v;
               if (!response.ok) {
-                _context.n = 3;
+                _context5.n = 3;
                 break;
               }
-              _context.n = 2;
+              _context5.n = 2;
               return response.json();
             case 2:
-              this.componentDictionary = _context.v;
+              this.componentDictionary = _context5.v;
               console.log('📚 ComponentDataManager: Component dictionary loaded successfully');
-              _context.n = 4;
+              _context5.n = 4;
               break;
             case 3:
               console.warn('⚠️ ComponentDataManager: Could not load component dictionary');
               this.componentDictionary = null;
             case 4:
-              _context.n = 6;
+              _context5.n = 6;
               break;
             case 5:
-              _context.p = 5;
-              _t = _context.v;
-              console.warn('⚠️ ComponentDataManager: Error loading component dictionary:', _t);
+              _context5.p = 5;
+              _t3 = _context5.v;
+              console.warn('⚠️ ComponentDataManager: Error loading component dictionary:', _t3);
               this.componentDictionary = null;
             case 6:
-              return _context.a(2);
+              return _context5.a(2);
           }
-        }, _callee, this, [[0, 5]]);
+        }, _callee5, this, [[0, 5]]);
       }));
       function _loadComponentDictionary() {
         return _loadComponentDictionary2.apply(this, arguments);
@@ -18840,10 +19103,10 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
       if (!this.componentDictionary) return 'unknown';
 
       // Look for component in dictionary
-      for (var _i2 = 0, _Object$entries2 = Object.entries(this.componentDictionary); _i2 < _Object$entries2.length; _i2++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
-          key = _Object$entries2$_i[0],
-          component = _Object$entries2$_i[1];
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.componentDictionary); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
+          key = _Object$entries3$_i[0],
+          component = _Object$entries3$_i[1];
         if (key === 'categories') continue;
         if (name && name.toLowerCase().includes(key.toLowerCase())) {
           return component.category || 'unknown';
@@ -18869,7 +19132,7 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_traverseScene",
     value: function _traverseScene(object) {
-      var _this3 = this;
+      var _this4 = this;
       var components = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (!object) return components;
@@ -18885,7 +19148,7 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
       // Recursively traverse children
       if (object.children && object.children.length > 0) {
         object.children.forEach(function (child) {
-          _this3._traverseScene(child, components, options);
+          _this4._traverseScene(child, components, options);
         });
       }
       return components;
@@ -19054,7 +19317,10 @@ var ComponentDataManager = /*#__PURE__*/function (_BaseDisposable) {
         modelKey: component.modelKey,
         modelType: component.modelType,
         thumbnail: component.thumbnail,
-        tags: component.tags || []
+        tags: component.tags || [],
+        // Preserve S3 metadata
+        isS3Component: component.isS3Component,
+        s3Path: component.s3Path
       };
       return _objectSpread2(_objectSpread2({}, baseData), {}, {
         metadata: component.metadata || {},
@@ -24863,6 +25129,9 @@ var KeyboardControlsManager = /*#__PURE__*/function () {
     key: "setupKeyboardControls",
     value: function setupKeyboardControls() {
       this.handleKeyDown = function (event) {
+        // Guard against undefined event or key
+        if (!event || !event.key) return;
+
         // Sample Ctrl+Z example
         if (event.ctrlKey && (event.key.toLowerCase() === 'z' || event.code === 'KeyZ')) {
           // method call here
@@ -30297,134 +30566,235 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
      * @param {string} componentId - Library ID of the component to drag
      * @param {HTMLElement} sourceElement - The DOM element being dragged
      * @param {MouseEvent|TouchEvent} event - The initiating event
-     * @returns {boolean} True if drag started successfully
+     * @returns {Promise<boolean>} True if drag started successfully
      */
   }, {
     key: "startComponentDrag",
-    value: function startComponentDrag(componentId, sourceElement, event) {
-      var _this$sceneViewer$$re, _event$touches$, _event$touches$2;
-      if (!this.enabled || this.isDragging) return false;
-      if (!this.sceneViewer || !this.sceneViewer.scene || !this.sceneViewer.camera) {
-        console.warn('ComponentDragManager: Scene not ready for drag operations');
-        return false;
-      }
-      console.log('🎯 Starting component drag:', componentId);
-      this.isDragging = true;
-      this.dragData.componentId = componentId;
-      this.dragData.dragElement = sourceElement;
-
-      // Find the actual 3D canvas and use its parent as drop zone
-      // The scene might be in QuadViewport, so we need to find the perspective canvas
-      var canvases = document.querySelectorAll('canvas');
-      var perspectiveCanvas = Array.from(canvases).find(function (canvas) {
-        return canvas.parentElement && canvas.parentElement.classList.contains('perspective-container');
-      });
-      this.dragData.dropZone = perspectiveCanvas ? perspectiveCanvas.parentElement : (_this$sceneViewer$$re = this.sceneViewer.$refs) === null || _this$sceneViewer$$re === void 0 ? void 0 : _this$sceneViewer$$re.container;
-
-      // Store starting position
-      var clientX = event.clientX || event.touches && ((_event$touches$ = event.touches[0]) === null || _event$touches$ === void 0 ? void 0 : _event$touches$.clientX) || 0;
-      var clientY = event.clientY || event.touches && ((_event$touches$2 = event.touches[0]) === null || _event$touches$2 === void 0 ? void 0 : _event$touches$2.clientY) || 0;
-      this.dragData.startPosition = {
-        x: clientX,
-        y: clientY
-      };
-      this.dragData.currentPosition = {
-        x: clientX,
-        y: clientY
-      };
-
-      // Create preview object
-      this._createPreviewObject(componentId);
-
-      // Add global event listeners
-      document.addEventListener('mousemove', this.handleGlobalMouseMove, false);
-      document.addEventListener('mouseup', this.handleGlobalMouseUp, false);
-      document.addEventListener('touchmove', this.handleGlobalMouseMove, false);
-      document.addEventListener('touchend', this.handleGlobalMouseUp, false);
-
-      // Update mouse position and preview
-      this._updateMousePosition(clientX, clientY);
-      this._updatePreviewPosition();
+    value: (function () {
+      var _startComponentDrag = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(componentId, sourceElement, event) {
+        var _this$sceneViewer$$re, _event$touches$, _event$touches$2;
+        var canvases, perspectiveCanvas, clientX, clientY;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              if (!(!this.enabled || this.isDragging)) {
+                _context.n = 1;
+                break;
+              }
+              return _context.a(2, false);
+            case 1:
+              if (!(!this.sceneViewer || !this.sceneViewer.scene || !this.sceneViewer.camera)) {
+                _context.n = 2;
+                break;
+              }
+              console.warn('ComponentDragManager: Scene not ready for drag operations');
+              return _context.a(2, false);
+            case 2:
+              console.log('🎯 Starting component drag:', componentId);
+              this.isDragging = true;
+              this.dragData.componentId = componentId;
+              this.dragData.dragElement = sourceElement;
+
+              // Find the actual 3D canvas and use its parent as drop zone
+              // The scene might be in QuadViewport, so we need to find the perspective canvas
+              canvases = document.querySelectorAll('canvas');
+              perspectiveCanvas = Array.from(canvases).find(function (canvas) {
+                return canvas.parentElement && canvas.parentElement.classList.contains('perspective-container');
+              });
+              this.dragData.dropZone = perspectiveCanvas ? perspectiveCanvas.parentElement : (_this$sceneViewer$$re = this.sceneViewer.$refs) === null || _this$sceneViewer$$re === void 0 ? void 0 : _this$sceneViewer$$re.container;
+
+              // Store starting position
+              clientX = event.clientX || event.touches && ((_event$touches$ = event.touches[0]) === null || _event$touches$ === void 0 ? void 0 : _event$touches$.clientX) || 0;
+              clientY = event.clientY || event.touches && ((_event$touches$2 = event.touches[0]) === null || _event$touches$2 === void 0 ? void 0 : _event$touches$2.clientY) || 0;
+              this.dragData.startPosition = {
+                x: clientX,
+                y: clientY
+              };
+              this.dragData.currentPosition = {
+                x: clientX,
+                y: clientY
+              };
 
-      // Add visual feedback to source element
-      if (sourceElement) {
-        sourceElement.style.opacity = '0.5';
-        sourceElement.style.transform = 'scale(0.95)';
+              // Create preview object (async to wait for loading models)
+              _context.n = 3;
+              return this._createPreviewObject(componentId);
+            case 3:
+              // Add global event listeners
+              document.addEventListener('mousemove', this.handleGlobalMouseMove, false);
+              document.addEventListener('mouseup', this.handleGlobalMouseUp, false);
+              document.addEventListener('touchmove', this.handleGlobalMouseMove, false);
+              document.addEventListener('touchend', this.handleGlobalMouseUp, false);
+
+              // Update mouse position and preview
+              this._updateMousePosition(clientX, clientY);
+              this._updatePreviewPosition();
+
+              // Add visual feedback to source element
+              if (sourceElement) {
+                sourceElement.style.opacity = '0.5';
+                sourceElement.style.transform = 'scale(0.95)';
+              }
+              return _context.a(2, true);
+          }
+        }, _callee, this);
+      }));
+      function startComponentDrag(_x, _x2, _x3) {
+        return _startComponentDrag.apply(this, arguments);
       }
-      return true;
-    }
-
+      return startComponentDrag;
+    }()
     /**
      * Create a preview object for the component being dragged
      * @param {string} componentId - Library ID of the component
      * @private
      */
+    )
   }, {
     key: "_createPreviewObject",
-    value: function _createPreviewObject(componentId) {
-      var _this$sceneViewer$cen;
-      // Try to get the actual component model from modelPreloader
-      var modelPreloader = (_this$sceneViewer$cen = this.sceneViewer.centralPlant) === null || _this$sceneViewer$cen === void 0 || (_this$sceneViewer$cen = _this$sceneViewer$cen.utilities) === null || _this$sceneViewer$cen === void 0 ? void 0 : _this$sceneViewer$cen.modelPreloader;
-      if (modelPreloader && modelPreloader.componentDictionary) {
-        var componentData = modelPreloader.componentDictionary[componentId];
-        if (componentData && componentData.modelKey) {
-          // Try to get cached model first
-          var cachedModel = modelPreloader.getCachedModelWithDimensions(componentData.modelKey, componentId);
-          if (cachedModel) {
-            this.dragData.previewObject = cachedModel.clone();
-
-            // Clone materials to avoid affecting other objects
-            this._cloneMaterials(this.dragData.previewObject);
-
-            // Store original colors BEFORE making transparent
-            this._storeOriginalColors(this.dragData.previewObject);
-
-            // Make the preview semi-transparent
-            this._setPreviewTransparency(this.dragData.previewObject, 0.5);
-            this.dragData.previewObject.userData = {
-              isPreview: true,
-              componentId: componentId,
-              originalOpacity: 1.0
-            };
-
-            // Position off-screen initially
-            this.dragData.previewObject.position.set(1000, 1000, 1000);
-            this.sceneViewer.scene.add(this.dragData.previewObject);
-            console.log('📦 Created GLB preview object for:', componentId);
-            return;
-          }
-        }
-      }
-
-      // Fallback: Create a simple preview mesh if model not available
-      var geometry = new THREE__namespace.BoxGeometry(1, 1, 1);
-      var material = new THREE__namespace.MeshPhysicalMaterial({
-        color: 0x4CAF50,
-        transparent: true,
-        opacity: 0.5,
-        wireframe: true
-      });
-      this.dragData.previewObject = new THREE__namespace.Mesh(geometry, material);
-      this.dragData.previewObject.userData = {
-        isPreview: true,
-        componentId: componentId,
-        originalOpacity: 0.7
-      };
-
-      // Store original color for fallback mesh
-      this.dragData.previewObject.material.userData.originalColor = 0x4CAF50;
-
-      // Position off-screen initially
-      this.dragData.previewObject.position.set(1000, 1000, 1000);
-      this.sceneViewer.scene.add(this.dragData.previewObject);
-      console.log('📦 Created fallback preview object for:', componentId);
-    }
-
-    /**
-     * Clone all materials in an object hierarchy to avoid shared material issues
-     * @param {THREE.Object3D} object - The object to clone materials for
+    value: (function () {
+      var _createPreviewObject2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(componentId) {
+        var _this$sceneViewer$cen;
+        var modelPreloader, componentData, cachedModel, geometry, material, _t, _t2;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              // Try to get the actual component model from modelPreloader
+              modelPreloader = (_this$sceneViewer$cen = this.sceneViewer.centralPlant) === null || _this$sceneViewer$cen === void 0 || (_this$sceneViewer$cen = _this$sceneViewer$cen.utilities) === null || _this$sceneViewer$cen === void 0 ? void 0 : _this$sceneViewer$cen.modelPreloader; // DEBUG: Log what we're looking for
+              console.log("\uD83D\uDD0D ComponentDragManager: Looking for component: \"".concat(componentId, "\""));
+              console.log("\uD83D\uDD0D ModelPreloader available:", !!modelPreloader);
+              console.log("\uD83D\uDD0D ComponentDictionary available:", !!(modelPreloader !== null && modelPreloader !== void 0 && modelPreloader.componentDictionary));
+              if (!(modelPreloader && modelPreloader.componentDictionary)) {
+                _context2.n = 13;
+                break;
+              }
+              console.log("\uD83D\uDCDA Available dictionary keys:", Object.keys(modelPreloader.componentDictionary));
+              componentData = modelPreloader.componentDictionary[componentId]; // DEBUG: Log lookup result
+              if (!componentData) {
+                console.error("\u274C Component \"".concat(componentId, "\" not found in ModelPreloader dictionary"));
+                console.log("\uD83D\uDCCB Full dictionary:", modelPreloader.componentDictionary);
+              } else {
+                console.log("\u2705 Found component data for \"".concat(componentId, "\":"), {
+                  modelKey: componentData.modelKey,
+                  isS3Component: componentData.isS3Component,
+                  s3Path: componentData.s3Path
+                });
+              }
+              if (!(componentData && componentData.modelKey)) {
+                _context2.n = 11;
+                break;
+              }
+              // Try to get cached model first
+              cachedModel = modelPreloader.getCachedModelWithDimensions(componentData.modelKey, componentId); // If not cached but currently loading, wait for it
+              if (!(!cachedModel && modelPreloader.loadingPromises && modelPreloader.loadingPromises.has(componentData.modelKey))) {
+                _context2.n = 4;
+                break;
+              }
+              console.log("\u23F3 Waiting for ".concat(componentData.modelKey, " to finish loading..."));
+              _context2.p = 1;
+              _context2.n = 2;
+              return modelPreloader.loadingPromises.get(componentData.modelKey);
+            case 2:
+              cachedModel = modelPreloader.getCachedModelWithDimensions(componentData.modelKey, componentId);
+              _context2.n = 4;
+              break;
+            case 3:
+              _context2.p = 3;
+              _t = _context2.v;
+              console.warn("\u26A0\uFE0F Failed to wait for model ".concat(componentData.modelKey, ":"), _t);
+            case 4:
+              if (cachedModel) {
+                _context2.n = 8;
+                break;
+              }
+              console.log("\uD83D\uDD04 Model ".concat(componentData.modelKey, " not cached, attempting to load..."));
+              _context2.p = 5;
+              _context2.n = 6;
+              return modelPreloader.preloadSingleModel(componentData.modelKey);
+            case 6:
+              cachedModel = modelPreloader.getCachedModelWithDimensions(componentData.modelKey, componentId);
+              _context2.n = 8;
+              break;
+            case 7:
+              _context2.p = 7;
+              _t2 = _context2.v;
+              console.warn("\u26A0\uFE0F Failed to preload model ".concat(componentData.modelKey, ":"), _t2);
+            case 8:
+              if (!cachedModel) {
+                _context2.n = 9;
+                break;
+              }
+              this.dragData.previewObject = cachedModel.clone();
+
+              // Clone materials to avoid affecting other objects
+              this._cloneMaterials(this.dragData.previewObject);
+
+              // Store original colors BEFORE making transparent
+              this._storeOriginalColors(this.dragData.previewObject);
+
+              // Make the preview semi-transparent
+              this._setPreviewTransparency(this.dragData.previewObject, 0.5);
+              this.dragData.previewObject.userData = {
+                isPreview: true,
+                componentId: componentId,
+                originalOpacity: 1.0
+              };
+
+              // Position off-screen initially
+              this.dragData.previewObject.position.set(1000, 1000, 1000);
+              this.sceneViewer.scene.add(this.dragData.previewObject);
+              console.log("\u2705 Created ".concat(componentData.isS3Component ? 'S3' : 'static', " GLB preview object for: ").concat(componentId));
+              return _context2.a(2);
+            case 9:
+              console.warn("\u26A0\uFE0F Failed to load model for ".concat(componentId, ", will use fallback"));
+            case 10:
+              _context2.n = 12;
+              break;
+            case 11:
+              console.warn("\u26A0\uFE0F No modelKey found for component ".concat(componentId));
+            case 12:
+              _context2.n = 14;
+              break;
+            case 13:
+              console.warn("\u26A0\uFE0F ModelPreloader or component dictionary not available");
+            case 14:
+              // Fallback: Create a simple preview mesh if model not available
+              geometry = new THREE__namespace.BoxGeometry(1, 1, 1);
+              material = new THREE__namespace.MeshPhysicalMaterial({
+                color: 0x4CAF50,
+                transparent: true,
+                opacity: 0.5,
+                wireframe: true
+              });
+              this.dragData.previewObject = new THREE__namespace.Mesh(geometry, material);
+              this.dragData.previewObject.userData = {
+                isPreview: true,
+                componentId: componentId,
+                originalOpacity: 0.7
+              };
+
+              // Store original color for fallback mesh
+              this.dragData.previewObject.material.userData.originalColor = 0x4CAF50;
+
+              // Position off-screen initially
+              this.dragData.previewObject.position.set(1000, 1000, 1000);
+              this.sceneViewer.scene.add(this.dragData.previewObject);
+              console.log("\u26A0\uFE0F Created fallback wireframe preview for: ".concat(componentId));
+            case 15:
+              return _context2.a(2);
+          }
+        }, _callee2, this, [[5, 7], [1, 3]]);
+      }));
+      function _createPreviewObject(_x4) {
+        return _createPreviewObject2.apply(this, arguments);
+      }
+      return _createPreviewObject;
+    }()
+    /**
+     * Clone all materials in an object hierarchy to avoid shared material issues
+     * @param {THREE.Object3D} object - The object to clone materials for
      * @private
      */
+    )
   }, {
     key: "_cloneMaterials",
     value: function _cloneMaterials(object) {
@@ -30880,16 +31250,54 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
     value: function enableElementDrag(element, componentId) {
       var _this3 = this;
       if (!element || !componentId) return;
-      var handleMouseDown = function handleMouseDown(event) {
-        if (event.button !== 0) return; // Only left mouse button
-        event.preventDefault();
-        _this3.startComponentDrag(componentId, element, event);
-      };
-      var handleTouchStart = function handleTouchStart(event) {
-        if (event.touches.length !== 1) return; // Only single touch
-        event.preventDefault();
-        _this3.startComponentDrag(componentId, element, event);
-      };
+      var handleMouseDown = /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(event) {
+          return _regenerator().w(function (_context3) {
+            while (1) switch (_context3.n) {
+              case 0:
+                if (!(event.button !== 0)) {
+                  _context3.n = 1;
+                  break;
+                }
+                return _context3.a(2);
+              case 1:
+                // Only left mouse button
+                event.preventDefault();
+                _context3.n = 2;
+                return _this3.startComponentDrag(componentId, element, event);
+              case 2:
+                return _context3.a(2);
+            }
+          }, _callee3);
+        }));
+        return function handleMouseDown(_x5) {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      var handleTouchStart = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(event) {
+          return _regenerator().w(function (_context4) {
+            while (1) switch (_context4.n) {
+              case 0:
+                if (!(event.touches.length !== 1)) {
+                  _context4.n = 1;
+                  break;
+                }
+                return _context4.a(2);
+              case 1:
+                // Only single touch
+                event.preventDefault();
+                _context4.n = 2;
+                return _this3.startComponentDrag(componentId, element, event);
+              case 2:
+                return _context4.a(2);
+            }
+          }, _callee4);
+        }));
+        return function handleTouchStart(_x6) {
+          return _ref2.apply(this, arguments);
+        };
+      }();
       element.addEventListener('mousedown', handleMouseDown, false);
       element.addEventListener('touchstart', handleTouchStart, false);
 
@@ -34054,7 +34462,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.1.62
+   * @version 0.1.64
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.
@@ -35077,48 +35485,70 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
      * @param {Object} [options={}] - Configuration options for component listing
      * @param {string} [options.category] - Filter by category (e.g., 'pumps', 'chillers')
      * @param {string} [options.name] - Filter by component name (partial match)
-     * @returns {Array<Object>} Array of component objects with detailed information
+     * @returns {Promise<Array<Object>>} Array of component objects with detailed information
      * @description Retrieves available component information from the library dictionary with flexible filtering options.
      * Metadata is always included for complete component details.
      * @example
      * // Get all available components from dictionary
-     * const availableComponents = centralPlant.getComponents();
+     * const availableComponents = await centralPlant.getComponents();
      * console.log(`${availableComponents.length} components available in library`);
      * 
      * @example
      * // Filter by category
-     * const availablePumps = centralPlant.getComponents({ category: 'pumps' });
+     * const availablePumps = await centralPlant.getComponents({ category: 'pumps' });
      * 
      * @example
      * // Filter by multiple categories
-     * const availableEquipment = centralPlant.getComponents({ category: ['pumps', 'chillers'] });
+     * const availableEquipment = await centralPlant.getComponents({ category: ['pumps', 'chillers'] });
      * 
      * @example
      * // Filter by name pattern
-     * const towers = centralPlant.getComponents({ name: 'tower' });
+     * const towers = await centralPlant.getComponents({ name: 'tower' });
      */
   }, {
     key: "getComponents",
-    value: function getComponents() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      // Validate filter options using centralized validator
-      var validation = this.internals.validator.validateComponentFilter(options);
-      if (!validation.isValid) {
-        console.warn('⚠️ getComponents(): Invalid filter options provided:', validation.message);
-        return [];
-      }
-      try {
-        // Always include metadata
-        var enhancedOptions = _objectSpread2(_objectSpread2({}, options), {}, {
-          includeMetadata: true
-        });
-        return this.managers.componentDataManager.getDictionaryComponents(enhancedOptions);
-      } catch (error) {
-        console.error('❌ getDictionaryComponents(): Error retrieving available components:', error);
-        return [];
+    value: (function () {
+      var _getComponents = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var options,
+          validation,
+          enhancedOptions,
+          _args2 = arguments,
+          _t;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              options = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
+              // Validate filter options using centralized validator
+              validation = this.internals.validator.validateComponentFilter(options);
+              if (validation.isValid) {
+                _context2.n = 1;
+                break;
+              }
+              console.warn('⚠️ getComponents(): Invalid filter options provided:', validation.message);
+              return _context2.a(2, []);
+            case 1:
+              _context2.p = 1;
+              // Always include metadata
+              enhancedOptions = _objectSpread2(_objectSpread2({}, options), {}, {
+                includeMetadata: true
+              });
+              _context2.n = 2;
+              return this.managers.componentDataManager.getDictionaryComponents(enhancedOptions);
+            case 2:
+              return _context2.a(2, _context2.v);
+            case 3:
+              _context2.p = 3;
+              _t = _context2.v;
+              console.error('❌ getDictionaryComponents(): Error retrieving available components:', _t);
+              return _context2.a(2, []);
+          }
+        }, _callee2, this, [[1, 3]]);
+      }));
+      function getComponents() {
+        return _getComponents.apply(this, arguments);
       }
-    }
-
+      return getComponents;
+    }()
     /**
      * Get scene hierarchy with components, connectors, and gateways
      * @param {Object} [options={}] - Configuration options for scene hierarchy listing
@@ -35144,6 +35574,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
      * // Filter by name pattern
      * const sceneTowers = centralPlant.getSceneHierarchy({ name: 'cooling' });
      */
+    )
   }, {
     key: "getSceneHierarchy",
     value: function getSceneHierarchy() {
@@ -35192,6 +35623,90 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
       }
     }
 
+    /**
+     * Extend component dictionary with additional components (e.g., from S3)
+     * @param {Object} additionalComponents - Object with component definitions to add
+     * @returns {Promise<boolean>} True if components were added successfully, false otherwise
+     * @description Allows sandbox to register additional components (like S3 components) into the
+     * component dictionary at runtime. These components will then be available through getComponents()
+     * and can be used with addComponent().
+     * @example
+     * // Register S3 components
+     * const s3Components = {
+     *   'custom-pump-1.0.0': {
+     *     modelKey: 'CUSTOM-PUMP.glb',
+     *     name: 'Custom Pump',
+     *     category: 'pumps',
+     *     // ... other component properties
+     *   }
+     * }
+     * const success = await centralPlant.extendComponentDictionary(s3Components)
+     */
+  }, {
+    key: "extendComponentDictionary",
+    value: (function () {
+      var _extendComponentDictionary = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(additionalComponents) {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              if (this.managers.componentDataManager) {
+                _context3.n = 1;
+                break;
+              }
+              console.warn('⚠️ extendComponentDictionary(): Component data manager not available');
+              return _context3.a(2, false);
+            case 1:
+              _context3.n = 2;
+              return this.managers.componentDataManager.extendComponentDictionary(additionalComponents);
+            case 2:
+              return _context3.a(2, _context3.v);
+          }
+        }, _callee3, this);
+      }));
+      function extendComponentDictionary(_x2) {
+        return _extendComponentDictionary.apply(this, arguments);
+      }
+      return extendComponentDictionary;
+    }()
+    /**
+     * Remove S3 components from component dictionary
+     * @returns {Promise<boolean>} True if components were removed successfully, false otherwise
+     * @description Removes all S3 components from the component dictionary, typically called when
+     * user signs out or when S3 components need to be refreshed
+     * @example
+     * // Remove all S3 components from dictionary
+     * const success = await centralPlant.removeS3Components();
+     * if (success) {
+     *   console.log('S3 components removed');
+     * }
+     */
+    )
+  }, {
+    key: "removeS3Components",
+    value: (function () {
+      var _removeS3Components = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              if (this.managers.componentDataManager) {
+                _context4.n = 1;
+                break;
+              }
+              console.warn('⚠️ removeS3Components(): Component data manager not available');
+              return _context4.a(2, false);
+            case 1:
+              _context4.n = 2;
+              return this.managers.componentDataManager.removeS3Components();
+            case 2:
+              return _context4.a(2, _context4.v);
+          }
+        }, _callee4, this);
+      }));
+      function removeS3Components() {
+        return _removeS3Components.apply(this, arguments);
+      }
+      return removeS3Components;
+    }()
     /**
      * Select an object (component, connector, or gateway) in the scene by its ID
      * @param {string} objectId - The UUID or name of the object to select
@@ -35228,6 +35743,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
      *   centralPlant.selectComponent(targetObject.uuid);
      * }
      */
+    )
   }, {
     key: "selectComponent",
     value: function selectComponent(objectId) {
@@ -35388,51 +35904,51 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "initialize2DViewport",
     value: function () {
-      var _initialize2DViewport = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(container) {
+      var _initialize2DViewport = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(container) {
         var viewType,
           instanceKey,
           success,
-          _args2 = arguments,
-          _t;
-        return _regenerator().w(function (_context2) {
-          while (1) switch (_context2.n) {
+          _args5 = arguments,
+          _t2;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
             case 0:
-              viewType = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 'top';
-              instanceKey = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : null;
+              viewType = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : 'top';
+              instanceKey = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : null;
               if (container) {
-                _context2.n = 1;
+                _context5.n = 1;
                 break;
               }
               console.warn('⚠️ initialize2DViewport(): No container provided');
-              return _context2.a(2, false);
+              return _context5.a(2, false);
             case 1:
               if (this.managers.viewport2DManager) {
-                _context2.n = 2;
+                _context5.n = 2;
                 break;
               }
               console.warn('⚠️ initialize2DViewport(): Viewport2D manager not available');
-              return _context2.a(2, false);
+              return _context5.a(2, false);
             case 2:
-              _context2.p = 2;
-              _context2.n = 3;
+              _context5.p = 2;
+              _context5.n = 3;
               return this.managers.viewport2DManager.initialize(container, viewType, instanceKey);
             case 3:
-              success = _context2.v;
+              success = _context5.v;
               if (success) {
                 console.log("\u2705 2D viewport initialized successfully (".concat(viewType, " view, key: ").concat(instanceKey || viewType, ")"));
               } else {
                 console.warn("\u26A0\uFE0F Failed to initialize 2D viewport (".concat(viewType, " view)"));
               }
-              return _context2.a(2, success);
+              return _context5.a(2, success);
             case 4:
-              _context2.p = 4;
-              _t = _context2.v;
-              console.error('❌ initialize2DViewport(): Error initializing 2D viewport:', _t);
-              return _context2.a(2, false);
+              _context5.p = 4;
+              _t2 = _context5.v;
+              console.error('❌ initialize2DViewport(): Error initializing 2D viewport:', _t2);
+              return _context5.a(2, false);
           }
-        }, _callee2, this, [[2, 4]]);
+        }, _callee5, this, [[2, 4]]);
       }));
-      function initialize2DViewport(_x2) {
+      function initialize2DViewport(_x3) {
         return _initialize2DViewport.apply(this, arguments);
       }
       return initialize2DViewport;
@@ -35525,6 +36041,41 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
       }
     }
 
+    /**
+     * Set a URL resolver function for model loading (for S3 authentication)
+     * @param {Function} resolverFn - Function that takes modelKey and returns Promise<string> URL
+     * @returns {boolean} True if resolver was set successfully, false otherwise
+     * @description Allows sandbox to provide a resolver function that handles S3 authentication
+     * and generates signed URLs for model files. This keeps central-plant free of AWS dependencies.
+     * @example
+     * // In sandbox with AWS Amplify Storage
+     * centralPlant.setModelUrlResolver(async (modelKey) => {
+     *   const signedUrl = await Storage.get(`models/${modelKey}`)
+     *   return signedUrl
+     * })
+     */
+  }, {
+    key: "setModelUrlResolver",
+    value: function setModelUrlResolver(resolverFn) {
+      if (!resolverFn || typeof resolverFn !== 'function') {
+        console.warn('⚠️ setModelUrlResolver(): Resolver function is required');
+        return false;
+      }
+      try {
+        var _modelPreloader = this.getUtility('modelPreloader');
+        if (!_modelPreloader) {
+          console.warn('⚠️ setModelUrlResolver(): Model preloader utility not available');
+          return false;
+        }
+        _modelPreloader.setUrlResolver(resolverFn);
+        console.log('✅ setModelUrlResolver(): URL resolver set successfully');
+        return true;
+      } catch (error) {
+        console.error('❌ setModelUrlResolver(): Error setting resolver:', error);
+        return false;
+      }
+    }
+
     /**
      * Initialize model preloading from component dictionary
      * @param {string} [basePath='/library/'] - Base path for both dictionary and models (can be local path or S3 URL)
@@ -35543,22 +36094,22 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "initializeModelPreloading",
     value: (function () {
-      var _initializeModelPreloading = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var _initializeModelPreloading = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
         var basePath,
           normalizedBasePath,
           dictionaryPath,
           modelsBasePath,
           response,
           componentDictionary,
-          _modelPreloader,
+          _modelPreloader2,
           progress,
-          _args3 = arguments,
-          _t2;
-        return _regenerator().w(function (_context3) {
-          while (1) switch (_context3.n) {
+          _args6 = arguments,
+          _t3;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
             case 0:
-              basePath = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '/library/';
-              _context3.p = 1;
+              basePath = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : '/library/';
+              _context6.p = 1;
               // Ensure basePath ends with a slash
               normalizedBasePath = basePath.endsWith('/') ? basePath : "".concat(basePath, "/");
               dictionaryPath = "".concat(normalizedBasePath, "component-dictionary.json");
@@ -35569,39 +36120,39 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
               console.log("\uFFFD Models path: ".concat(modelsBasePath));
 
               // Load the component dictionary
-              _context3.n = 2;
+              _context6.n = 2;
               return fetch(dictionaryPath);
             case 2:
-              response = _context3.v;
+              response = _context6.v;
               if (response.ok) {
-                _context3.n = 3;
+                _context6.n = 3;
                 break;
               }
               throw new Error("Failed to load component dictionary: ".concat(response.status));
             case 3:
-              _context3.n = 4;
+              _context6.n = 4;
               return response.json();
             case 4:
-              componentDictionary = _context3.v;
+              componentDictionary = _context6.v;
               console.log('📚 Component dictionary loaded:', Object.keys(componentDictionary));
 
               // Start preloading all models with the specified base path
-              _modelPreloader = this.getUtility('modelPreloader');
-              _context3.n = 5;
-              return _modelPreloader.preloadAllModels(componentDictionary, modelsBasePath);
+              _modelPreloader2 = this.getUtility('modelPreloader');
+              _context6.n = 5;
+              return _modelPreloader2.preloadAllModels(componentDictionary, modelsBasePath);
             case 5:
-              progress = _context3.v;
+              progress = _context6.v;
               console.log('🎉 Model preloading completed:', progress);
-              return _context3.a(2, progress);
+              return _context6.a(2, progress);
             case 6:
-              _context3.p = 6;
-              _t2 = _context3.v;
-              console.error('❌ Failed to initialize model preloading:', _t2);
-              throw _t2;
+              _context6.p = 6;
+              _t3 = _context6.v;
+              console.error('❌ Failed to initialize model preloading:', _t3);
+              throw _t3;
             case 7:
-              return _context3.a(2);
+              return _context6.a(2);
           }
-        }, _callee3, this, [[1, 6]]);
+        }, _callee6, this, [[1, 6]]);
       }));
       function initializeModelPreloading() {
         return _initializeModelPreloading.apply(this, arguments);
@@ -35618,57 +36169,57 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "importScene",
     value: (function () {
-      var _importScene = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(jsonData) {
-        var validation, _t3;
-        return _regenerator().w(function (_context4) {
-          while (1) switch (_context4.n) {
+      var _importScene = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(jsonData) {
+        var validation, _t4;
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.n) {
             case 0:
               if (jsonData) {
-                _context4.n = 1;
+                _context7.n = 1;
                 break;
               }
               console.error('❌ No JSON data provided for import');
-              return _context4.a(2, false);
+              return _context7.a(2, false);
             case 1:
-              _context4.p = 1;
+              _context7.p = 1;
               // Validate scene data structure
               validation = this.internals.validateAndAnalyzeSceneData(jsonData);
               if (validation.isValid) {
-                _context4.n = 2;
+                _context7.n = 2;
                 break;
               }
               console.error('❌ Invalid scene data format:', validation.message);
-              return _context4.a(2, false);
+              return _context7.a(2, false);
             case 2:
-              _context4.n = 3;
+              _context7.n = 3;
               return this.setImportedSceneData(jsonData);
             case 3:
               if (!(this.sceneViewer && this.sceneViewer.sceneOperationsManager)) {
-                _context4.n = 5;
+                _context7.n = 5;
                 break;
               }
-              _context4.n = 4;
+              _context7.n = 4;
               return this.sceneViewer.sceneOperationsManager.loadSceneFromData(jsonData);
             case 4:
               console.log('✅ Scene imported successfully');
-              return _context4.a(2, true);
+              return _context7.a(2, true);
             case 5:
               console.error('❌ SceneViewer not available for scene loading');
-              return _context4.a(2, false);
+              return _context7.a(2, false);
             case 6:
-              _context4.n = 8;
+              _context7.n = 8;
               break;
             case 7:
-              _context4.p = 7;
-              _t3 = _context4.v;
-              console.error('❌ Error importing scene:', _t3);
-              return _context4.a(2, false);
+              _context7.p = 7;
+              _t4 = _context7.v;
+              console.error('❌ Error importing scene:', _t4);
+              return _context7.a(2, false);
             case 8:
-              return _context4.a(2);
+              return _context7.a(2);
           }
-        }, _callee4, this, [[1, 7]]);
+        }, _callee7, this, [[1, 7]]);
       }));
-      function importScene(_x3) {
+      function importScene(_x4) {
         return _importScene.apply(this, arguments);
       }
       return importScene;
@@ -35690,33 +36241,33 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "exportSceneJSON",
     value: (function () {
-      var _exportSceneJSON = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+      var _exportSceneJSON = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
         var filename,
-          _args5 = arguments,
-          _t4;
-        return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.n) {
+          _args8 = arguments,
+          _t5;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.n) {
             case 0:
-              filename = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : null;
+              filename = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : null;
               if (this.managers.sceneExportManager) {
-                _context5.n = 1;
+                _context8.n = 1;
                 break;
               }
               console.error('❌ Scene export manager not available');
-              return _context5.a(2, false);
+              return _context8.a(2, false);
             case 1:
-              _context5.p = 1;
-              _context5.n = 2;
+              _context8.p = 1;
+              _context8.n = 2;
               return this.managers.sceneExportManager.downloadSceneJSON(filename);
             case 2:
-              return _context5.a(2, _context5.v);
+              return _context8.a(2, _context8.v);
             case 3:
-              _context5.p = 3;
-              _t4 = _context5.v;
-              console.error('❌ Error exporting scene as JSON:', _t4);
-              return _context5.a(2, false);
+              _context8.p = 3;
+              _t5 = _context8.v;
+              console.error('❌ Error exporting scene as JSON:', _t5);
+              return _context8.a(2, false);
           }
-        }, _callee5, this, [[1, 3]]);
+        }, _callee8, this, [[1, 3]]);
       }));
       function exportSceneJSON() {
         return _exportSceneJSON.apply(this, arguments);
@@ -35741,33 +36292,33 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "exportSceneGLTF",
     value: (function () {
-      var _exportSceneGLTF = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+      var _exportSceneGLTF = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
         var filename,
-          _args6 = arguments,
-          _t5;
-        return _regenerator().w(function (_context6) {
-          while (1) switch (_context6.n) {
+          _args9 = arguments,
+          _t6;
+        return _regenerator().w(function (_context9) {
+          while (1) switch (_context9.n) {
             case 0:
-              filename = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : null;
+              filename = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : null;
               if (this.managers.sceneExportManager) {
-                _context6.n = 1;
+                _context9.n = 1;
                 break;
               }
               console.error('❌ Scene export manager not available');
-              return _context6.a(2, false);
+              return _context9.a(2, false);
             case 1:
-              _context6.p = 1;
-              _context6.n = 2;
+              _context9.p = 1;
+              _context9.n = 2;
               return this.managers.sceneExportManager.exportSceneAsGLTF(filename, false);
             case 2:
-              return _context6.a(2, _context6.v);
+              return _context9.a(2, _context9.v);
             case 3:
-              _context6.p = 3;
-              _t5 = _context6.v;
-              console.error('❌ Error exporting scene as GLTF:', _t5);
-              return _context6.a(2, false);
+              _context9.p = 3;
+              _t6 = _context9.v;
+              console.error('❌ Error exporting scene as GLTF:', _t6);
+              return _context9.a(2, false);
           }
-        }, _callee6, this, [[1, 3]]);
+        }, _callee9, this, [[1, 3]]);
       }));
       function exportSceneGLTF() {
         return _exportSceneGLTF.apply(this, arguments);
@@ -35793,33 +36344,33 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "exportSceneGLB",
     value: (function () {
-      var _exportSceneGLB = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      var _exportSceneGLB = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
         var filename,
-          _args7 = arguments,
-          _t6;
-        return _regenerator().w(function (_context7) {
-          while (1) switch (_context7.n) {
+          _args0 = arguments,
+          _t7;
+        return _regenerator().w(function (_context0) {
+          while (1) switch (_context0.n) {
             case 0:
-              filename = _args7.length > 0 && _args7[0] !== undefined ? _args7[0] : null;
+              filename = _args0.length > 0 && _args0[0] !== undefined ? _args0[0] : null;
               if (this.managers.sceneExportManager) {
-                _context7.n = 1;
+                _context0.n = 1;
                 break;
               }
               console.error('❌ Scene export manager not available');
-              return _context7.a(2, false);
+              return _context0.a(2, false);
             case 1:
-              _context7.p = 1;
-              _context7.n = 2;
+              _context0.p = 1;
+              _context0.n = 2;
               return this.managers.sceneExportManager.exportSceneAsGLB(filename);
             case 2:
-              return _context7.a(2, _context7.v);
+              return _context0.a(2, _context0.v);
             case 3:
-              _context7.p = 3;
-              _t6 = _context7.v;
-              console.error('❌ Error exporting scene as GLB:', _t6);
-              return _context7.a(2, false);
+              _context0.p = 3;
+              _t7 = _context0.v;
+              console.error('❌ Error exporting scene as GLB:', _t7);
+              return _context0.a(2, false);
           }
-        }, _callee7, this, [[1, 3]]);
+        }, _callee0, this, [[1, 3]]);
       }));
       function exportSceneGLB() {
         return _exportSceneGLB.apply(this, arguments);
@@ -35858,18 +36409,18 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "loadSceneFromData",
     value: (function () {
-      var _loadSceneFromData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(sceneData) {
-        return _regenerator().w(function (_context8) {
-          while (1) switch (_context8.n) {
+      var _loadSceneFromData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1(sceneData) {
+        return _regenerator().w(function (_context1) {
+          while (1) switch (_context1.n) {
             case 0:
-              _context8.n = 1;
+              _context1.n = 1;
               return this.setImportedSceneData(sceneData);
             case 1:
-              return _context8.a(2, true);
+              return _context1.a(2, true);
           }
-        }, _callee8, this);
+        }, _callee1, this);
       }));
-      function loadSceneFromData(_x4) {
+      function loadSceneFromData(_x5) {
         return _loadSceneFromData.apply(this, arguments);
       }
       return loadSceneFromData;