@2112-lab/central-plant 0.1.76 → 0.1.78

package/dist/bundle/index.js

@@ -3403,6 +3403,331 @@ function getObjectsByType(scene, typePredicate) {
   return results;
 }
 
+/**
+ * Creates a wireframe box helper (LineSegments) from a Box3, visually identical
+ * to THREE.BoxHelper but driven by an explicit Box3 instead of setFromObject().
+ * 
+ * @param {THREE.Box3} box3 - The bounding box to visualize
+ * @param {number} color - Line color (hex)
+ * @returns {THREE.LineSegments} A wireframe box matching BoxHelper's visual style
+ * @private
+ */
+function _createBoxHelperFromBox3(box3, color) {
+  var indices = new Uint16Array([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7]);
+  var positions = new Float32Array(8 * 3);
+  var geometry = new THREE__namespace.BufferGeometry();
+  geometry.setIndex(new THREE__namespace.BufferAttribute(indices, 1));
+  geometry.setAttribute('position', new THREE__namespace.BufferAttribute(positions, 3));
+  var helper = new THREE__namespace.LineSegments(geometry, new THREE__namespace.LineBasicMaterial({
+    color: color,
+    toneMapped: false
+  }));
+  helper.matrixAutoUpdate = false;
+
+  // Populate positions from box3
+  _updateBoxHelperPositions(helper, box3);
+  return helper;
+}
+
+/**
+ * Updates a box helper's geometry positions from a Box3.
+ * Matches the vertex layout used by THREE.BoxHelper.
+ * 
+ * @param {THREE.LineSegments} helper - The wireframe helper to update
+ * @param {THREE.Box3} box3 - The bounding box
+ * @private
+ */
+function _updateBoxHelperPositions(helper, box3) {
+  if (box3.isEmpty()) return;
+  var min = box3.min;
+  var max = box3.max;
+  var position = helper.geometry.attributes.position;
+  var array = position.array;
+
+  // Same vertex layout as THREE.BoxHelper
+  array[0] = max.x;
+  array[1] = max.y;
+  array[2] = max.z;
+  array[3] = min.x;
+  array[4] = max.y;
+  array[5] = max.z;
+  array[6] = min.x;
+  array[7] = min.y;
+  array[8] = max.z;
+  array[9] = max.x;
+  array[10] = min.y;
+  array[11] = max.z;
+  array[12] = max.x;
+  array[13] = max.y;
+  array[14] = min.z;
+  array[15] = min.x;
+  array[16] = max.y;
+  array[17] = min.z;
+  array[18] = min.x;
+  array[19] = min.y;
+  array[20] = min.z;
+  array[21] = max.x;
+  array[22] = min.y;
+  array[23] = min.z;
+  position.needsUpdate = true;
+  helper.geometry.computeBoundingSphere();
+}
+
+/**
+ * Computes a bounding box for a Three.js object, excluding descendant meshes
+ * that belong to subtrees rooted at objects with excluded objectTypes.
+ * 
+ * This mirrors what THREE.Box3.expandByObject() does internally, but with a
+ * filter predicate that skips meshes whose ancestry (up to the root object)
+ * includes any excluded objectType.
+ * 
+ * @param {THREE.Object3D} object - The root object to compute bbox for
+ * @param {string[]} excludeTypes - userData.objectType values to exclude (e.g., ['io-device', 'connector'])
+ * @returns {THREE.Box3} The filtered bounding box in world space
+ * 
+ * @example
+ * // Compute bbox for pump body only, excluding io-devices and connectors
+ * const pumpBodyBBox = computeFilteredBoundingBox(pumpModel, ['io-device', 'connector'])
+ */
+function computeFilteredBoundingBox(object) {
+  var excludeTypes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var box = new THREE__namespace.Box3();
+  var tempBox = new THREE__namespace.Box3();
+  var hasGeometry = false;
+
+  // Build a Set for O(1) lookups
+  var excludeSet = new Set(excludeTypes);
+  object.updateWorldMatrix(false, true);
+  object.traverse(function (child) {
+    // Only process nodes with geometry (Mesh, SkinnedMesh, etc.)
+    if (!child.geometry) return;
+
+    // Walk up the ancestry from child to root object, checking for excluded types.
+    // If any ancestor (excluding the root object itself) has an excluded objectType,
+    // this mesh belongs to an excluded subtree — skip it.
+    var ancestor = child;
+    while (ancestor && ancestor !== object) {
+      var _ancestor$userData;
+      if ((_ancestor$userData = ancestor.userData) !== null && _ancestor$userData !== void 0 && _ancestor$userData.objectType && excludeSet.has(ancestor.userData.objectType)) {
+        return; // Skip — this mesh belongs to an excluded subtree
+      }
+      ancestor = ancestor.parent;
+    }
+
+    // Include this mesh's geometry in the bounding box
+    child.geometry.computeBoundingBox();
+    if (child.geometry.boundingBox) {
+      tempBox.copy(child.geometry.boundingBox);
+      tempBox.applyMatrix4(child.matrixWorld);
+      if (!hasGeometry) {
+        box.copy(tempBox);
+        hasGeometry = true;
+      } else {
+        box.union(tempBox);
+      }
+    }
+  });
+  if (!hasGeometry) {
+    // Fallback: return a zero-size box at the object's world position
+    var position = new THREE__namespace.Vector3();
+    object.getWorldPosition(position);
+    box.setFromCenterAndSize(position, new THREE__namespace.Vector3(0, 0, 0));
+    console.warn("[boundingBoxUtils] computeFilteredBoundingBox: No geometry found for ".concat(object.uuid, ", returning empty box"));
+  }
+  return box;
+}
+
+/**
+ * Computes individual world-space bounding boxes for each io-device child
+ * of a component. Uses standard THREE.Box3.setFromObject() on each io-device
+ * since io-devices don't have their own sub-devices that need filtering.
+ * 
+ * @param {THREE.Object3D} componentObject - The component's Three.js object
+ * @returns {Array<{uuid: string, userData: Object, worldBoundingBox: {min: number[], max: number[]}}>}
+ *   Array of io-device bounding box descriptors ready for injection into scene data
+ * 
+ * @example
+ * const ioDeviceBBoxes = computeIODeviceBoundingBoxes(pumpModel)
+ * // Returns: [{ uuid: 'signal-light-1', userData: {...}, worldBoundingBox: { min: [...], max: [...] } }]
+ */
+function computeIODeviceBoundingBoxes(componentObject) {
+  var results = [];
+  var _iterator = _createForOfIteratorHelper(componentObject.children),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _child$userData;
+      var child = _step.value;
+      if (((_child$userData = child.userData) === null || _child$userData === void 0 ? void 0 : _child$userData.objectType) !== 'io-device') continue;
+      var bbox = new THREE__namespace.Box3().setFromObject(child);
+      if (!bbox.isEmpty()) {
+        results.push({
+          uuid: child.uuid,
+          userData: {
+            objectType: 'io-device',
+            deviceId: child.userData.deviceId || null,
+            attachmentId: child.userData.attachmentId || null,
+            parentComponentId: child.userData.parentComponentId || componentObject.uuid
+          },
+          worldBoundingBox: {
+            min: [bbox.min.x, bbox.min.y, bbox.min.z],
+            max: [bbox.max.x, bbox.max.y, bbox.max.z]
+          }
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return results;
+}
+
+/**
+ * Creates bounding box helpers for a selected object. For smart components
+ * (components with io-device children), this produces:
+ * - One filtered helper for the component body (excluding io-devices and connectors)
+ * - One helper per io-device child
+ * 
+ * For non-smart components and other objects, produces a single standard BoxHelper.
+ * 
+ * Each helper is tagged with metadata in userData for update tracking:
+ * - `isBoundingBox: true`
+ * - `sourceObjectUuid: string` — the object this helper represents
+ * - `isFiltered: boolean` — whether filtered computation was used
+ * - `excludeTypes: string[]` — types excluded (for recomputation)
+ * 
+ * @param {THREE.Object3D} object - The selected scene object
+ * @param {number} color - Line color (hex), default green
+ * @returns {THREE.LineSegments[]} Array of box helpers to add to the scene
+ * 
+ * @example
+ * const helpers = createSelectionBoxHelpers(pumpModel, 0x00ff00)
+ * helpers.forEach(h => scene.add(h))
+ */
+function createSelectionBoxHelpers(object) {
+  var _object$children;
+  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0x00ff00;
+  var helpers = [];
+  var excludeTypes = ['io-device', 'connector'];
+
+  // Check if this object has io-device children (smart component)
+  var hasIODevices = (_object$children = object.children) === null || _object$children === void 0 ? void 0 : _object$children.some(function (child) {
+    var _child$userData2;
+    return ((_child$userData2 = child.userData) === null || _child$userData2 === void 0 ? void 0 : _child$userData2.objectType) === 'io-device';
+  });
+  if (hasIODevices) {
+    // 1. Create filtered helper for the component body
+    var filteredBox = computeFilteredBoundingBox(object, excludeTypes);
+    var componentHelper = _createBoxHelperFromBox3(filteredBox, color);
+    componentHelper.isHelper = true;
+    componentHelper.userData = {
+      isBoundingBox: true,
+      sourceObjectUuid: object.uuid,
+      isFiltered: true,
+      excludeTypes: excludeTypes
+    };
+    helpers.push(componentHelper);
+
+    // 2. Create individual helpers for each io-device
+    var _iterator2 = _createForOfIteratorHelper(object.children),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _child$userData3;
+        var child = _step2.value;
+        if (((_child$userData3 = child.userData) === null || _child$userData3 === void 0 ? void 0 : _child$userData3.objectType) !== 'io-device') continue;
+        var deviceBox = new THREE__namespace.Box3().setFromObject(child);
+        if (deviceBox.isEmpty()) continue;
+        var deviceHelper = _createBoxHelperFromBox3(deviceBox, color);
+        deviceHelper.isHelper = true;
+        deviceHelper.userData = {
+          isBoundingBox: true,
+          sourceObjectUuid: child.uuid,
+          isFiltered: false,
+          isIODevice: true,
+          parentComponentUuid: object.uuid
+        };
+        helpers.push(deviceHelper);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  } else {
+    // Standard BoxHelper for non-smart objects
+    var boxHelper = new THREE__namespace.BoxHelper(object, color);
+    boxHelper.isHelper = true;
+    boxHelper.userData = {
+      isBoundingBox: true,
+      sourceObjectUuid: object.uuid,
+      isFiltered: false
+    };
+    helpers.push(boxHelper);
+  }
+  return helpers;
+}
+
+/**
+ * Updates a set of bounding box helpers to reflect current object transforms.
+ * Handles both standard BoxHelpers and filtered/io-device helpers.
+ * 
+ * @param {THREE.LineSegments[]} helpers - Array of box helpers
+ * @param {THREE.Object3D[]} selectedObjects - The selected scene objects
+ * @param {THREE.Scene} scene - The scene (for finding objects by uuid)
+ */
+function updateSelectionBoxHelpers(helpers, selectedObjects, scene) {
+  var _iterator3 = _createForOfIteratorHelper(helpers),
+    _step3;
+  try {
+    var _loop = function _loop() {
+      var helper = _step3.value;
+      var _helper$userData = helper.userData,
+        sourceObjectUuid = _helper$userData.sourceObjectUuid,
+        isFiltered = _helper$userData.isFiltered,
+        excludeTypes = _helper$userData.excludeTypes,
+        isIODevice = _helper$userData.isIODevice,
+        parentComponentUuid = _helper$userData.parentComponentUuid;
+      var sourceObject;
+      if (isIODevice && parentComponentUuid) {
+        var _parent$children;
+        // Find the parent component first, then the io-device child
+        var parent = scene.getObjectByProperty('uuid', parentComponentUuid);
+        sourceObject = parent === null || parent === void 0 || (_parent$children = parent.children) === null || _parent$children === void 0 ? void 0 : _parent$children.find(function (c) {
+          return c.uuid === sourceObjectUuid;
+        });
+      } else {
+        sourceObject = selectedObjects.find(function (obj) {
+          return obj.uuid === sourceObjectUuid;
+        }) || scene.getObjectByProperty('uuid', sourceObjectUuid);
+      }
+      if (!sourceObject) return 1; // continue
+      sourceObject.updateMatrixWorld(true);
+      if (isFiltered && excludeTypes) {
+        // Recompute filtered bbox
+        var box = computeFilteredBoundingBox(sourceObject, excludeTypes);
+        _updateBoxHelperPositions(helper, box);
+      } else if (isIODevice) {
+        // Recompute io-device bbox
+        var _box = new THREE__namespace.Box3().setFromObject(sourceObject);
+        _updateBoxHelperPositions(helper, _box);
+      } else if (helper.update) {
+        // Standard BoxHelper — use built-in update
+        helper.update();
+      }
+    };
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      if (_loop()) continue;
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+}
+
 var TransformControlsManager = /*#__PURE__*/function () {
   function TransformControlsManager(scene, camera, renderer) {
     var orbitControls = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -4318,23 +4643,16 @@ var TransformControlsManager = /*#__PURE__*/function () {
         return;
       }
       try {
-        // Create individual bounding boxes for each selected object
+        // Create bounding box helpers for each selected object
+        // Smart components get filtered helpers (component body + individual io-device boxes)
         this.selectedObjects.forEach(function (obj) {
-          var boundingBoxHelper = new THREE__namespace.BoxHelper(obj, _this5.config.boundingBoxColor);
-
-          // Mark it as a helper to avoid selection
-          boundingBoxHelper.isHelper = true;
-          boundingBoxHelper.userData = {
-            isBoundingBox: true
-          };
-
-          // Add to scene
-          _this5.scene.add(boundingBoxHelper);
-
-          // Store in array for later cleanup
-          _this5.boundingBoxHelpers.push(boundingBoxHelper);
+          var helpers = createSelectionBoxHelpers(obj, _this5.config.boundingBoxColor);
+          helpers.forEach(function (helper) {
+            _this5.scene.add(helper);
+            _this5.boundingBoxHelpers.push(helper);
+          });
         });
-        console.log("\uD83D\uDCE6 Bounding boxes created for ".concat(this.selectedObjects.length, " object(s)"));
+        console.log("\uD83D\uDCE6 Bounding boxes created for ".concat(this.selectedObjects.length, " object(s) (").concat(this.boundingBoxHelpers.length, " helpers)"));
       } catch (error) {
         console.warn('⚠️ Failed to create bounding boxes:', error);
       }
@@ -4465,21 +4783,19 @@ var TransformControlsManager = /*#__PURE__*/function () {
       // Update bounding boxes for all selected objects
       if (this.selectedObjects.length > 0 && this.boundingBoxHelpers.length > 0) {
         try {
-          // Update each bounding box helper
-          this.boundingBoxHelpers.forEach(function (helper, index) {
-            var obj = _this6.selectedObjects[index];
-            if (obj) {
-              // Force object matrix update to ensure correct bounding box
-              obj.updateMatrixWorld(true);
-
-              // Update bounding box
-              helper.update();
-
-              // Also update the cached bounding box if it exists
-              if (_this6.boundingBoxCache.has(obj)) {
-                var updatedBoundingBox = new THREE__namespace.Box3().setFromObject(obj);
-                _this6.boundingBoxCache.set(obj, updatedBoundingBox);
-              }
+          // Ensure all selected objects have up-to-date matrices
+          this.selectedObjects.forEach(function (obj) {
+            return obj.updateMatrixWorld(true);
+          });
+
+          // Use the centralized update function which handles filtered, io-device, and standard helpers
+          updateSelectionBoxHelpers(this.boundingBoxHelpers, this.selectedObjects, this.scene);
+
+          // Also update the cached bounding box if it exists
+          this.selectedObjects.forEach(function (obj) {
+            if (_this6.boundingBoxCache.has(obj)) {
+              var updatedBoundingBox = new THREE__namespace.Box3().setFromObject(obj);
+              _this6.boundingBoxCache.set(obj, updatedBoundingBox);
             }
           });
         } catch (error) {
@@ -27401,20 +27717,63 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
           // Find the actual component object in the scene
           var componentObject = _this3.sceneViewer.scene.getObjectByProperty('uuid', child.uuid);
           if (componentObject) {
-            // Compute world bounding box
-            var _worldBBox = new THREE__namespace.Box3().setFromObject(componentObject);
-            console.log("\uD83D\uDD04 Updated worldBoundingBox for component ".concat(child.uuid, ": min=[").concat(_worldBBox.min.x.toFixed(2), ", ").concat(_worldBBox.min.y.toFixed(2), ", ").concat(_worldBBox.min.z.toFixed(2), "], max=[").concat(_worldBBox.max.x.toFixed(2), ", ").concat(_worldBBox.max.y.toFixed(2), ", ").concat(_worldBBox.max.z.toFixed(2), "]"));
+            // Compute FILTERED bounding box — excludes io-device and connector subtrees
+            // so the component body bbox is tight-fitting and doesn't envelop attached devices
+            var filteredBBox = computeFilteredBoundingBox(componentObject, ['io-device', 'connector']);
+            console.log("\uD83D\uDD04 Updated worldBoundingBox for component ".concat(child.uuid, " (filtered): min=[").concat(filteredBBox.min.x.toFixed(2), ", ").concat(filteredBBox.min.y.toFixed(2), ", ").concat(filteredBBox.min.z.toFixed(2), "], max=[").concat(filteredBBox.max.x.toFixed(2), ", ").concat(filteredBBox.max.y.toFixed(2), ", ").concat(filteredBBox.max.z.toFixed(2), "]"));
 
-            // Return enriched component data with worldBoundingBox in userData
-            // Note: pathfinder expects arrays [x, y, z] format for min/max
-            return _objectSpread2(_objectSpread2({}, child), {}, {
+            // Build the enriched component entry
+            var enrichedChild = _objectSpread2(_objectSpread2({}, child), {}, {
               userData: _objectSpread2(_objectSpread2({}, child.userData), {}, {
                 worldBoundingBox: {
-                  min: [_worldBBox.min.x, _worldBBox.min.y, _worldBBox.min.z],
-                  max: [_worldBBox.max.x, _worldBBox.max.y, _worldBBox.max.z]
+                  min: [filteredBBox.min.x, filteredBBox.min.y, filteredBBox.min.z],
+                  max: [filteredBBox.max.x, filteredBBox.max.y, filteredBBox.max.z]
                 }
               })
             });
+
+            // Compute separate bounding boxes for each attached io-device
+            // These are injected as children so the pathfinder treats each as an independent obstacle
+            var ioDeviceBBoxes = computeIODeviceBoundingBoxes(componentObject);
+            if (ioDeviceBBoxes.length > 0) {
+              // Ensure children array exists (may already contain connectors)
+              if (!enrichedChild.children) {
+                enrichedChild.children = [];
+              }
+
+              // Inject io-device entries with their own worldBoundingBox
+              ioDeviceBBoxes.forEach(function (deviceBBox) {
+                // Check if this io-device already exists in scene data children
+                var existingIndex = enrichedChild.children.findIndex(function (c) {
+                  return c.uuid === deviceBBox.uuid;
+                });
+                if (existingIndex >= 0) {
+                  // Update existing entry with bounding box
+                  enrichedChild.children[existingIndex] = _objectSpread2(_objectSpread2({}, enrichedChild.children[existingIndex]), {}, {
+                    userData: _objectSpread2(_objectSpread2({}, enrichedChild.children[existingIndex].userData), {}, {
+                      objectType: 'io-device',
+                      worldBoundingBox: deviceBBox.worldBoundingBox
+                    })
+                  });
+                } else {
+                  // Create new entry for the io-device
+                  enrichedChild.children.push({
+                    uuid: deviceBBox.uuid,
+                    userData: _objectSpread2(_objectSpread2({}, deviceBBox.userData), {}, {
+                      worldBoundingBox: deviceBBox.worldBoundingBox
+                    }),
+                    children: []
+                  });
+                }
+                console.log("\uD83D\uDCE6 Injected io-device bbox for ".concat(deviceBBox.uuid, ": min=[").concat(deviceBBox.worldBoundingBox.min.map(function (v) {
+                  return v.toFixed(2);
+                }).join(', '), "], max=[").concat(deviceBBox.worldBoundingBox.max.map(function (v) {
+                  return v.toFixed(2);
+                }).join(', '), "]"));
+              });
+              console.log("\uD83D\uDCE6 Injected ".concat(ioDeviceBBoxes.length, " io-device bounding box(es) for component ").concat(child.uuid));
+            }
+            return enrichedChild;
           } else {
             console.warn("\u26A0\uFE0F Could not find component object in scene: ".concat(child.uuid));
           }
@@ -29477,6 +29836,8 @@ var SceneOperationsManager = /*#__PURE__*/function () {
 
     /**
      * Helper function to compute world bounding boxes
+     * For components: uses filtered bbox (excludes io-device and connector subtrees)
+     * For io-devices: computes separate bounding boxes and injects them as children
      */
   }, {
     key: "computeWorldBoundingBoxes",
@@ -29515,12 +29876,46 @@ var SceneOperationsManager = /*#__PURE__*/function () {
           };
           jsonObject = _findJsonObject(data.scene.children);
           if (jsonObject) {
-            // Compute world bounding box
-            var boundingBox = new THREE__namespace.Box3().setFromObject(object);
-
             // Store in JSON userData for pathfinder (skip for gateways - they're just routing points)
             if (!jsonObject.userData) jsonObject.userData = {};
-            if (jsonObject.userData.objectType !== 'gateway') {
+            if (jsonObject.userData.objectType === 'component') {
+              // For components: compute filtered bounding box (excludes io-device and connector subtrees)
+              var filteredBBox = computeFilteredBoundingBox(object, ['io-device', 'connector']);
+              jsonObject.userData.worldBoundingBox = {
+                min: filteredBBox.min.toArray(),
+                max: filteredBBox.max.toArray()
+              };
+              console.log("Added filtered world bounding box for component:", jsonObject.userData.worldBoundingBox);
+
+              // Compute and inject separate io-device bounding boxes as children
+              var ioDeviceBBoxes = computeIODeviceBoundingBoxes(object);
+              if (ioDeviceBBoxes.length > 0) {
+                if (!jsonObject.children) jsonObject.children = [];
+                ioDeviceBBoxes.forEach(function (deviceBBox) {
+                  var existingIndex = jsonObject.children.findIndex(function (c) {
+                    return c.uuid === deviceBBox.uuid;
+                  });
+                  if (existingIndex >= 0) {
+                    // Update existing entry
+                    if (!jsonObject.children[existingIndex].userData) jsonObject.children[existingIndex].userData = {};
+                    jsonObject.children[existingIndex].userData.objectType = 'io-device';
+                    jsonObject.children[existingIndex].userData.worldBoundingBox = deviceBBox.worldBoundingBox;
+                  } else {
+                    // Create new entry
+                    jsonObject.children.push({
+                      uuid: deviceBBox.uuid,
+                      userData: _objectSpread2(_objectSpread2({}, deviceBBox.userData), {}, {
+                        worldBoundingBox: deviceBBox.worldBoundingBox
+                      }),
+                      children: []
+                    });
+                  }
+                });
+                console.log("\uD83D\uDCE6 Injected ".concat(ioDeviceBBoxes.length, " io-device bbox(es) for component ").concat(jsonObject.uuid));
+              }
+            } else if (jsonObject.userData.objectType !== 'gateway') {
+              // For non-component, non-gateway objects: standard bounding box
+              var boundingBox = new THREE__namespace.Box3().setFromObject(object);
               jsonObject.userData.worldBoundingBox = {
                 min: boundingBox.min.toArray(),
                 max: boundingBox.max.toArray()
@@ -30938,7 +31333,7 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               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;
+                _context2.n = 14;
                 break;
               }
               console.log("\uD83D\uDCDA Available dictionary keys:", Object.keys(modelPreloader.componentDictionary));
@@ -30954,7 +31349,7 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
                 });
               }
               if (!(componentData && componentData.modelKey)) {
-                _context2.n = 11;
+                _context2.n = 12;
                 break;
               }
               // Try to get cached model first
@@ -30994,7 +31389,7 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               console.warn("\u26A0\uFE0F Failed to preload model ".concat(componentData.modelKey, ":"), _t2);
             case 8:
               if (!cachedModel) {
-                _context2.n = 9;
+                _context2.n = 10;
                 break;
               }
               this.dragData.previewObject = cachedModel.clone();
@@ -31005,6 +31400,14 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               // Store original colors BEFORE making transparent
               this._storeOriginalColors(this.dragData.previewObject);
 
+              // For smart components, load and attach IO device models to the preview
+              if (!(componentData.isSmart && componentData.attachedDevices)) {
+                _context2.n = 9;
+                break;
+              }
+              _context2.n = 9;
+              return this._attachIODeviceModelsToPreview(this.dragData.previewObject, componentData, modelPreloader);
+            case 9:
               // Make the preview semi-transparent
               this._setPreviewTransparency(this.dragData.previewObject, 0.5);
               this.dragData.previewObject.userData = {
@@ -31018,19 +31421,19 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               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;
+              console.warn("\u26A0\uFE0F Failed to load model for ".concat(componentId, ", will use fallback"));
             case 11:
-              console.warn("\u26A0\uFE0F No modelKey found for component ".concat(componentId));
-            case 12:
-              _context2.n = 14;
+              _context2.n = 13;
               break;
+            case 12:
+              console.warn("\u26A0\uFE0F No modelKey found for component ".concat(componentId));
             case 13:
-              console.warn("\u26A0\uFE0F ModelPreloader or component dictionary not available");
+              _context2.n = 15;
+              break;
             case 14:
+              console.warn("\u26A0\uFE0F ModelPreloader or component dictionary not available");
+            case 15:
               // Fallback: Create a simple preview mesh if model not available
               geometry = new THREE__namespace.BoxGeometry(1, 1, 1);
               material = new THREE__namespace.MeshPhysicalMaterial({
@@ -31053,7 +31456,7 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
               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:
+            case 16:
               return _context2.a(2);
           }
         }, _callee2, this, [[5, 7], [1, 3]]);
@@ -31063,6 +31466,111 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
       }
       return _createPreviewObject;
     }()
+    /**
+     * Load and attach IO device models to a smart component preview
+     * @param {THREE.Object3D} parentObject - The parent preview object
+     * @param {Object} componentData - Component dictionary entry (must have attachedDevices)
+     * @param {Object} modelPreloader - ModelPreloader instance
+     * @private
+     */
+    )
+  }, {
+    key: "_attachIODeviceModelsToPreview",
+    value: (function () {
+      var _attachIODeviceModelsToPreview2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(parentObject, componentData, modelPreloader) {
+        var _i, _Object$entries, _Object$entries$_i, attachmentId, attachment, _modelPreloader$compo, _attachment$attachmen, deviceData, cachedDevice, _modelPreloader$loadi, deviceModel, pos, _t3;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              if (componentData.attachedDevices) {
+                _context3.n = 1;
+                break;
+              }
+              return _context3.a(2);
+            case 1:
+              _i = 0, _Object$entries = Object.entries(componentData.attachedDevices);
+            case 2:
+              if (!(_i < _Object$entries.length)) {
+                _context3.n = 12;
+                break;
+              }
+              _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), attachmentId = _Object$entries$_i[0], attachment = _Object$entries$_i[1];
+              _context3.p = 3;
+              deviceData = (_modelPreloader$compo = modelPreloader.componentDictionary) === null || _modelPreloader$compo === void 0 ? void 0 : _modelPreloader$compo[attachment.deviceId];
+              if (!(!deviceData || !deviceData.modelKey)) {
+                _context3.n = 4;
+                break;
+              }
+              console.warn("\u26A0\uFE0F IO device ".concat(attachment.deviceId, " not found in dictionary for preview"));
+              return _context3.a(3, 11);
+            case 4:
+              // Ensure device model is loaded
+              cachedDevice = modelPreloader.getCachedModelWithDimensions(deviceData.modelKey, attachment.deviceId);
+              if (cachedDevice) {
+                _context3.n = 8;
+                break;
+              }
+              if (!((_modelPreloader$loadi = modelPreloader.loadingPromises) !== null && _modelPreloader$loadi !== void 0 && _modelPreloader$loadi.has(deviceData.modelKey))) {
+                _context3.n = 6;
+                break;
+              }
+              _context3.n = 5;
+              return modelPreloader.loadingPromises.get(deviceData.modelKey);
+            case 5:
+              _context3.n = 7;
+              break;
+            case 6:
+              _context3.n = 7;
+              return modelPreloader.preloadSingleModel(deviceData.modelKey);
+            case 7:
+              cachedDevice = modelPreloader.getCachedModelWithDimensions(deviceData.modelKey, attachment.deviceId);
+            case 8:
+              if (cachedDevice) {
+                _context3.n = 9;
+                break;
+              }
+              console.warn("\u26A0\uFE0F Could not load IO device model: ".concat(deviceData.modelKey));
+              return _context3.a(3, 11);
+            case 9:
+              deviceModel = cachedDevice.clone();
+              this._cloneMaterials(deviceModel);
+              this._storeOriginalColors(deviceModel);
+              deviceModel.userData = {
+                objectType: 'io-device',
+                deviceId: attachment.deviceId,
+                attachmentId: attachmentId,
+                attachmentLabel: attachment.attachmentLabel
+              };
+              if ((_attachment$attachmen = attachment.attachmentPoint) !== null && _attachment$attachmen !== void 0 && _attachment$attachmen.position) {
+                pos = attachment.attachmentPoint.position;
+                deviceModel.position.set(pos.x || 0, pos.y || 0, pos.z || 0);
+              }
+
+              // IO device models use their natural (1:1) scale — the stored
+              // attachmentPoint.scale value is for the connector marker sphere.
+              deviceModel.scale.setScalar(1);
+              parentObject.add(deviceModel);
+              console.log("\u2705 Attached IO device preview: ".concat(attachment.attachmentLabel || attachment.deviceId));
+              _context3.n = 11;
+              break;
+            case 10:
+              _context3.p = 10;
+              _t3 = _context3.v;
+              console.warn("\u26A0\uFE0F Could not attach IO device model ".concat(attachment.deviceId, " to preview:"), _t3);
+            case 11:
+              _i++;
+              _context3.n = 2;
+              break;
+            case 12:
+              return _context3.a(2);
+          }
+        }, _callee3, this, [[3, 10]]);
+      }));
+      function _attachIODeviceModelsToPreview(_x5, _x6, _x7) {
+        return _attachIODeviceModelsToPreview2.apply(this, arguments);
+      }
+      return _attachIODeviceModelsToPreview;
+    }()
     /**
      * Clone all materials in an object hierarchy to avoid shared material issues
      * @param {THREE.Object3D} object - The object to clone materials for
@@ -31210,8 +31718,8 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
       });
 
       // Check for overlaps
-      for (var _i = 0, _sceneMeshes = sceneMeshes; _i < _sceneMeshes.length; _i++) {
-        var mesh = _sceneMeshes[_i];
+      for (var _i2 = 0, _sceneMeshes = sceneMeshes; _i2 < _sceneMeshes.length; _i2++) {
+        var mesh = _sceneMeshes[_i2];
         var meshBBox = new THREE__namespace.Box3().setFromObject(mesh);
         if (previewBBox.intersectsBox(meshBBox)) {
           console.log('⚠️ ComponentDragManager: Overlap detected with:', mesh.userData.objectType || mesh.name || mesh.uuid);
@@ -31525,50 +32033,50 @@ var ComponentDragManager = /*#__PURE__*/function (_BaseDisposable) {
       var _this3 = this;
       if (!element || !componentId) return;
       var handleMouseDown = /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(event) {
-          return _regenerator().w(function (_context3) {
-            while (1) switch (_context3.n) {
+        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(event) {
+          return _regenerator().w(function (_context4) {
+            while (1) switch (_context4.n) {
               case 0:
                 if (!(event.button !== 0)) {
-                  _context3.n = 1;
+                  _context4.n = 1;
                   break;
                 }
-                return _context3.a(2);
+                return _context4.a(2);
               case 1:
                 // Only left mouse button
                 event.preventDefault();
-                _context3.n = 2;
+                _context4.n = 2;
                 return _this3.startComponentDrag(componentId, element, event);
               case 2:
-                return _context3.a(2);
+                return _context4.a(2);
             }
-          }, _callee3);
+          }, _callee4);
         }));
-        return function handleMouseDown(_x5) {
+        return function handleMouseDown(_x8) {
           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) {
+        var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(event) {
+          return _regenerator().w(function (_context5) {
+            while (1) switch (_context5.n) {
               case 0:
                 if (!(event.touches.length !== 1)) {
-                  _context4.n = 1;
+                  _context5.n = 1;
                   break;
                 }
-                return _context4.a(2);
+                return _context5.a(2);
               case 1:
                 // Only single touch
                 event.preventDefault();
-                _context4.n = 2;
+                _context5.n = 2;
                 return _this3.startComponentDrag(componentId, element, event);
               case 2:
-                return _context4.a(2);
+                return _context5.a(2);
             }
-          }, _callee4);
+          }, _callee5);
         }));
-        return function handleTouchStart(_x6) {
+        return function handleTouchStart(_x9) {
           return _ref2.apply(this, arguments);
         };
       }();
@@ -34710,6 +35218,11 @@ var CentralPlantInternals = /*#__PURE__*/function () {
           });
         }
 
+        // Add attached IO device models for smart components
+        if (componentData.isSmart && componentData.attachedDevices) {
+          this._attachIODevicesToComponent(componentModel, componentData, modelPreloader, componentId);
+        }
+
         // Notify the component manager about the new component
         if (componentManager.registerComponent) {
           componentManager.registerComponent(componentModel);
@@ -34760,6 +35273,74 @@ var CentralPlantInternals = /*#__PURE__*/function () {
       }
     }
 
+    /**
+     * Attach IO device models to a smart component from cached models.
+     * Each device referenced in componentData.attachedDevices is looked up
+     * in the model preloader cache, cloned, positioned, and added as a child.
+     * @param {THREE.Object3D} componentModel - The parent component model
+     * @param {Object} componentData - Component dictionary entry (has attachedDevices)
+     * @param {Object} modelPreloader - ModelPreloader instance
+     * @param {string} parentComponentId - The parent component's UUID
+     * @private
+     */
+  }, {
+    key: "_attachIODevicesToComponent",
+    value: function _attachIODevicesToComponent(componentModel, componentData, modelPreloader, parentComponentId) {
+      var attachedDevices = componentData.attachedDevices;
+      console.log("\uD83D\uDD0C addComponent(): Attaching ".concat(Object.keys(attachedDevices).length, " IO devices to smart component"));
+      for (var _i = 0, _Object$entries = Object.entries(attachedDevices); _i < _Object$entries.length; _i++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+          attachmentId = _Object$entries$_i[0],
+          attachment = _Object$entries$_i[1];
+        try {
+          var _modelPreloader$compo, _attachment$attachmen;
+          var deviceData = (_modelPreloader$compo = modelPreloader.componentDictionary) === null || _modelPreloader$compo === void 0 ? void 0 : _modelPreloader$compo[attachment.deviceId];
+          if (!deviceData || !deviceData.modelKey) {
+            console.warn("\u26A0\uFE0F IO device ".concat(attachment.deviceId, " not found in dictionary, skipping"));
+            continue;
+          }
+          var deviceModel = modelPreloader.getCachedModelWithDimensions(deviceData.modelKey, attachment.deviceId);
+          if (!deviceModel) {
+            console.warn("\u26A0\uFE0F IO device model not in cache: ".concat(deviceData.modelKey, ", skipping"));
+            continue;
+          }
+
+          // Name the device model
+          deviceModel.name = "".concat(attachment.attachmentLabel || 'IO Device', " (").concat(attachmentId, ")");
+
+          // Set user data for identification
+          deviceModel.userData = {
+            objectType: 'io-device',
+            deviceId: attachment.deviceId,
+            attachmentId: attachmentId,
+            attachmentLabel: attachment.attachmentLabel,
+            parentComponentId: parentComponentId
+          };
+
+          // Position at the attachment point
+          if ((_attachment$attachmen = attachment.attachmentPoint) !== null && _attachment$attachmen !== void 0 && _attachment$attachmen.position) {
+            var pos = attachment.attachmentPoint.position;
+            deviceModel.position.set(pos.x || 0, pos.y || 0, pos.z || 0);
+          }
+
+          // IO device models are authored at the same real-world unit scale
+          // as the host component, so keep them at their natural (1:1) size.
+          // Note: attachmentPoint.scale is the connector marker sphere size,
+          // NOT a desired device model scale.
+          deviceModel.scale.setScalar(1);
+
+          // Add as child of the component
+          componentModel.add(deviceModel);
+          console.log("\u2705 Attached IO device: ".concat(attachment.attachmentLabel || attachment.deviceId, " at"), {
+            position: deviceModel.position,
+            scale: deviceModel.scale
+          });
+        } catch (err) {
+          console.error("\u274C Error attaching IO device ".concat(attachment.deviceId, ":"), err);
+        }
+      }
+    }
+
     /**
      * Delete a component from the scene by componentId (internal implementation)
      * @param {string} componentId - The UUID of the component to delete
@@ -34865,7 +35446,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.1.76
+   * @version 0.1.78
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.