@2112-lab/central-plant 0.3.26 → 0.3.27

package/dist/bundle/index.js

@@ -3611,6 +3611,34 @@ function computeIODeviceBoundingBoxes(componentObject) {
  * const helpers = createSelectionBoxHelpers(pumpModel, 0x00ff00)
  * helpers.forEach(h => scene.add(h))
  */
+/**
+ * Returns a filtered bounding box for `object`, using a cache stored on
+ * `object.userData._filteredBBoxCache`.  The cache key is the serialised
+ * world-matrix elements string; if the object has moved the cache is
+ * automatically invalidated and recomputed.
+ *
+ * This avoids the expensive full-traverse on every selection event for
+ * large smart components with many child meshes.
+ *
+ * @param {THREE.Object3D} object
+ * @param {string[]} excludeTypes
+ * @returns {THREE.Box3}
+ */
+function computeFilteredBoundingBoxCached(object, excludeTypes) {
+  object.updateMatrixWorld(true);
+  var matrixKey = object.matrixWorld.elements.join(',');
+  var cache = object.userData._filteredBBoxCache;
+  if (cache && cache.matrixKey === matrixKey) {
+    return new THREE__namespace.Box3(_construct(THREE__namespace.Vector3, _toConsumableArray(cache.min)), _construct(THREE__namespace.Vector3, _toConsumableArray(cache.max)));
+  }
+  var box = computeFilteredBoundingBox(object, excludeTypes);
+  object.userData._filteredBBoxCache = {
+    matrixKey: matrixKey,
+    min: box.min.toArray(),
+    max: box.max.toArray()
+  };
+  return box;
+}
 function createSelectionBoxHelpers(object) {
   var _object$children;
   var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0x00ff00;
@@ -3624,7 +3652,7 @@ function createSelectionBoxHelpers(object) {
   });
   if (hasIODevices) {
     // 1. Create filtered helper for the component body
-    var filteredBox = computeFilteredBoundingBox(object, excludeTypes);
+    var filteredBox = computeFilteredBoundingBoxCached(object, excludeTypes);
     var componentHelper = _createBoxHelperFromBox3(filteredBox, color);
     componentHelper.isHelper = true;
     componentHelper.userData = {
@@ -3634,33 +3662,6 @@ function createSelectionBoxHelpers(object) {
       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);
@@ -3684,11 +3685,11 @@ function createSelectionBoxHelpers(object) {
  * @param {THREE.Scene} scene - The scene (for finding objects by uuid)
  */
 function updateSelectionBoxHelpers(helpers, selectedObjects, scene) {
-  var _iterator3 = _createForOfIteratorHelper(helpers),
-    _step3;
+  var _iterator2 = _createForOfIteratorHelper(helpers),
+    _step2;
   try {
     var _loop = function _loop() {
-      var helper = _step3.value;
+      var helper = _step2.value;
       var _helper$userData = helper.userData,
         sourceObjectUuid = _helper$userData.sourceObjectUuid,
         isFiltered = _helper$userData.isFiltered,
@@ -3711,25 +3712,21 @@ function updateSelectionBoxHelpers(helpers, selectedObjects, scene) {
       if (!sourceObject) return 1; // continue
       sourceObject.updateMatrixWorld(true);
       if (isFiltered && excludeTypes) {
-        // Recompute filtered bbox
-        var box = computeFilteredBoundingBox(sourceObject, excludeTypes);
+        // Recompute filtered bbox (uses cache when the object hasn't moved)
+        var box = computeFilteredBoundingBoxCached(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;) {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       if (_loop()) continue;
     }
   } catch (err) {
-    _iterator3.e(err);
+    _iterator2.e(err);
   } finally {
-    _iterator3.f();
+    _iterator2.f();
   }
 }
 
@@ -3823,8 +3820,17 @@ var TransformControlsManager = /*#__PURE__*/function () {
       onModeChange: null,
       onObjectRemoved: null,
       onSelectionChanged: null,
-      onIODeviceClick: null
+      onIODeviceClick: null,
+      onIODeviceDrag: null,
+      onIODeviceDragEnd: null
     };
+
+    // IO device drag tracking state
+    this._ioDragMesh = null;
+    this._ioDragStartX = 0;
+    this._ioDragStartY = 0;
+    this._ioDragMoved = false;
+    this._suppressNextClick = false;
     this.init();
   }
 
@@ -3904,6 +3910,12 @@ var TransformControlsManager = /*#__PURE__*/function () {
       if (callbacks.onIODeviceClick) {
         this.callbacks.onIODeviceClick = callbacks.onIODeviceClick;
       }
+      if (callbacks.onIODeviceDrag) {
+        this.callbacks.onIODeviceDrag = callbacks.onIODeviceDrag;
+      }
+      if (callbacks.onIODeviceDragEnd) {
+        this.callbacks.onIODeviceDragEnd = callbacks.onIODeviceDragEnd;
+      }
       console.log('🔗 Transform controls callbacks registered');
     }
     /**
@@ -4110,6 +4122,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
     value: function setupKeyboardControls() {
       var _this3 = this;
       this.eventHandlers.keydown = function (event) {
+        // Restore perspective camera when pressing Escape from ortho face view
+        if (event.code === 'Escape') {
+          _this3._restorePerspectiveCamera();
+        }
+
         // Only handle keys when transform controls are active
         if (!_this3.transformControls.enabled || _this3.transformState.isTransforming) {
           return;
@@ -4144,9 +4161,82 @@ var TransformControlsManager = /*#__PURE__*/function () {
       var raycaster = new THREE__namespace.Raycaster();
       var mouse = new THREE__namespace.Vector2();
 
-      // Click handler: first click selects (bounding box), second click on same object shows tooltip
+      // ── IO device drag ────────────────────────────────────────────────────
+      // Detect pointerdown on an IO device mesh and convert a drag gesture into
+      // state changes.  Up/right = positive direction, down/left = negative.
+      this.eventHandlers.pointerdown = function (event) {
+        if (_this4.transformState.isTransforming) return;
+        if (!_this4.callbacks.onIODeviceDrag) return;
+        _this4._calculateMousePosition(event, mouse);
+        raycaster.setFromCamera(mouse, _this4.camera);
+        var allIntersects = raycaster.intersectObjects(_this4.scene.children, true);
+        var ioDeviceObject = null;
+        var _iterator = _createForOfIteratorHelper(allIntersects),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var hit = _step.value;
+            var obj = hit.object;
+            while (obj) {
+              var _obj$userData;
+              if (((_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.objectType) === 'io-device') {
+                ioDeviceObject = obj;
+                break;
+              }
+              obj = obj.parent;
+            }
+            if (ioDeviceObject) break;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        if (!ioDeviceObject) return;
+
+        // Begin session
+        _this4._ioDragMesh = ioDeviceObject;
+        _this4._ioDragStartX = event.clientX;
+        _this4._ioDragStartY = event.clientY;
+        _this4._ioDragMoved = false;
+        if (_this4.orbitControls) _this4.orbitControls.enabled = false;
+        _this4.callbacks.onIODeviceDrag(ioDeviceObject, 0, true);
+        var onMove = function onMove(e) {
+          var dx = e.clientX - _this4._ioDragStartX;
+          var dy = e.clientY - _this4._ioDragStartY;
+          if (Math.abs(dx) > 4 || Math.abs(dy) > 4) _this4._ioDragMoved = true;
+          // Up (−screenY) and right (+screenX) are positive
+          var signedDelta = _this4._ioDragStartY - e.clientY + (e.clientX - _this4._ioDragStartX);
+          _this4.callbacks.onIODeviceDrag(_this4._ioDragMesh, signedDelta, false);
+        };
+        var _onUp = function onUp() {
+          window.removeEventListener('pointermove', onMove);
+          window.removeEventListener('pointerup', _onUp);
+          if (_this4.orbitControls) _this4.orbitControls.enabled = true;
+          if (_this4._ioDragMoved) {
+            // Suppress the click event that will fire after this pointerup
+            _this4._suppressNextClick = true;
+          }
+          if (_this4.callbacks.onIODeviceDragEnd) {
+            _this4.callbacks.onIODeviceDragEnd(_this4._ioDragMesh);
+          }
+          _this4._ioDragMesh = null;
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', _onUp);
+      };
+      this.renderer.domElement.addEventListener('pointerdown', this.eventHandlers.pointerdown);
+
+      // Click handler: left-click selects the object (bounding box + transform controls).
+      // Right-click on a component shows the tooltip.
       this.eventHandlers.click = function (event) {
         var _targetObject$userDat;
+        // Suppress click that follows an IO device drag
+        if (_this4._suppressNextClick) {
+          _this4._suppressNextClick = false;
+          return;
+        }
+
         // Skip if currently transforming
         if (_this4.transformState.isTransforming) {
           return;
@@ -4159,15 +4249,15 @@ var TransformControlsManager = /*#__PURE__*/function () {
         // Check for direct io-device mesh click (before bounding box selection)
         if (_this4.callbacks.onIODeviceClick) {
           var allIntersects = raycaster.intersectObjects(_this4.scene.children, true);
-          var _iterator = _createForOfIteratorHelper(allIntersects),
-            _step;
+          var _iterator2 = _createForOfIteratorHelper(allIntersects),
+            _step2;
           try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var hit = _step.value;
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var hit = _step2.value;
               var obj = hit.object;
               while (obj) {
-                var _obj$userData;
-                if (((_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.objectType) === 'io-device') {
+                var _obj$userData2;
+                if (((_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.objectType) === 'io-device') {
                   _this4.callbacks.onIODeviceClick(obj);
                   return;
                 }
@@ -4175,9 +4265,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
               }
             }
           } catch (err) {
-            _iterator.e(err);
+            _iterator2.e(err);
           } finally {
-            _iterator.f();
+            _iterator2.f();
           }
         }
 
@@ -4212,23 +4302,194 @@ var TransformControlsManager = /*#__PURE__*/function () {
           return;
         }
 
-        // Check if the clicked object is already selected
-        var isAlreadySelected = _this4.selectedObjects.length === 1 && _this4.selectedObjects[0] === targetObject;
-        if (isAlreadySelected) {
-          // Second click on already-selected object: Full selection including tooltips
-          _this4.selectObject(targetObject);
-        } else {
-          // First click on a new object: Transform controls and bounding box only
-          // Always deselect first (this clears tooltips via the callback)
+        // Left-click: select for transform only (bounding box, no tooltip)
+        if (!_this4.selectedObjects.includes(targetObject)) {
           _this4.deselectObject();
-
-          // Then select the new object if there is one (this shows transform controls and bounding box)
-          if (targetObject) {
-            _this4.selectObjectForTransformOnly(targetObject);
-          }
         }
+        _this4.selectObjectForTransformOnly(targetObject);
       };
       this.renderer.domElement.addEventListener('click', this.eventHandlers.click);
+
+      // Right-click handler: show tooltip for the clicked component.
+      this.eventHandlers.contextmenu = function (event) {
+        var _targetObject$userDat2;
+        event.preventDefault();
+        if (_this4.transformState.isTransforming) return;
+        _this4._calculateMousePosition(event, mouse);
+        raycaster.setFromCamera(mouse, _this4.camera);
+        var targetObject = _this4._findTargetObject(raycaster, objectFilter);
+        if (!targetObject) return;
+        var objectType = (_targetObject$userDat2 = targetObject.userData) === null || _targetObject$userDat2 === void 0 ? void 0 : _targetObject$userDat2.objectType;
+        if (objectType !== 'component' && objectType !== 'gateway' && objectType !== 'segment') return;
+
+        // Ensure the object is selected, then show the full tooltip.
+        if (!_this4.selectedObjects.includes(targetObject)) {
+          _this4.deselectObject();
+          _this4.selectObjectForTransformOnly(targetObject);
+        }
+        _this4.selectObject(targetObject);
+      };
+      this.renderer.domElement.addEventListener('contextmenu', this.eventHandlers.contextmenu);
+
+      // Double-click handler: switch to orthographic camera fixed to the clicked face.
+      // Press Escape to restore the perspective camera.
+      this.eventHandlers.dblclick = function (event) {
+        if (_this4.transformState.isTransforming) return;
+        var sv = _this4.sceneViewer;
+        if (!sv) return;
+        _this4._calculateMousePosition(event, mouse);
+        raycaster.setFromCamera(_this4.camera, _this4.camera); // ensure raycaster uses current camera
+        raycaster.setFromCamera(mouse, _this4.camera);
+
+        // Raycast directly against scene meshes to obtain the face normal
+        var allHits = raycaster.intersectObjects(_this4.scene.children, true).filter(function (h) {
+          var _h$object$userData, _h$object$userData2;
+          return !((_h$object$userData = h.object.userData) !== null && _h$object$userData !== void 0 && _h$object$userData.isTransformControls) && !((_h$object$userData2 = h.object.userData) !== null && _h$object$userData2 !== void 0 && _h$object$userData2.isBoundingBox);
+        });
+        if (!allHits.length || !allHits[0].face) return;
+        var hit = allHits[0];
+
+        // Walk up to find the component root
+        var componentObj = hit.object;
+        while (componentObj) {
+          var _componentObj$userDat;
+          if (((_componentObj$userDat = componentObj.userData) === null || _componentObj$userDat === void 0 ? void 0 : _componentObj$userDat.objectType) === 'component') break;
+          componentObj = componentObj.parent;
+        }
+        if (!componentObj) return;
+
+        // Transform face normal from local object space to world space
+        var normalMatrix = new THREE__namespace.Matrix3().getNormalMatrix(hit.object.matrixWorld);
+        var worldNormal = hit.face.normal.clone().applyMatrix3(normalMatrix).normalize();
+
+        // Snap to the closest cardinal axis (Z-up: ±X, ±Y, ±Z)
+        var cardinals = [new THREE__namespace.Vector3(1, 0, 0), new THREE__namespace.Vector3(-1, 0, 0), new THREE__namespace.Vector3(0, 1, 0), new THREE__namespace.Vector3(0, -1, 0), new THREE__namespace.Vector3(0, 0, 1), new THREE__namespace.Vector3(0, 0, -1)];
+        var faceDir = cardinals.reduce(function (best, c) {
+          return c.dot(worldNormal) > best.dot(worldNormal) ? c : best;
+        });
+
+        // Bounding box of the component
+        var bbox = new THREE__namespace.Box3().setFromObject(componentObj);
+        var center = bbox.getCenter(new THREE__namespace.Vector3());
+        var size = bbox.getSize(new THREE__namespace.Vector3());
+
+        // Ortho half-extents: axes perpendicular to the face direction
+        var isXFace = Math.abs(faceDir.x) > 0.5;
+        var isYFace = Math.abs(faceDir.y) > 0.5;
+        var halfW, halfH;
+        if (isXFace) {
+          halfW = size.y / 2;
+          halfH = size.z / 2;
+        } else if (isYFace) {
+          halfW = size.x / 2;
+          halfH = size.z / 2;
+        } else {
+          halfW = size.x / 2;
+          halfH = size.y / 2;
+        }
+        var padding = 1.6;
+        var domEl = sv.renderer.domElement;
+        var aspect = domEl.clientWidth / (domEl.clientHeight || 1);
+
+        // Frustum must satisfy both:
+        //   frustumHalfW >= halfW * padding   (object fits horizontally)
+        //   frustumHalfH >= halfH * padding   (object fits vertically)
+        //   frustumHalfW / frustumHalfH == aspect  (no squishing)
+        var minHalfH = halfH * padding;
+        var minHalfW = halfW * padding;
+        var frustumHalfH = Math.max(minHalfH, minHalfW / aspect);
+        var frustumHalfW = frustumHalfH * aspect;
+        var isZFace = Math.abs(faceDir.z) > 0.5;
+        var upVec = isZFace ? new THREE__namespace.Vector3(0, 1, 0) : new THREE__namespace.Vector3(0, 0, 1);
+
+        // Store the perspective camera snapshot on first entry
+        if (!sv._perspCameraSnapshot) {
+          var _sv$controls$target$c, _sv$controls, _sv$controls2, _sv$controls3, _sv$controls4;
+          sv._perspCameraSnapshot = {
+            camera: sv.camera,
+            controlsTarget: (_sv$controls$target$c = (_sv$controls = sv.controls) === null || _sv$controls === void 0 || (_sv$controls = _sv$controls.target) === null || _sv$controls === void 0 ? void 0 : _sv$controls.clone()) !== null && _sv$controls$target$c !== void 0 ? _sv$controls$target$c : new THREE__namespace.Vector3(),
+            controlsMinDist: (_sv$controls2 = sv.controls) === null || _sv$controls2 === void 0 ? void 0 : _sv$controls2.minDistance,
+            controlsMaxDist: (_sv$controls3 = sv.controls) === null || _sv$controls3 === void 0 ? void 0 : _sv$controls3.maxDistance,
+            controlsMaxPolar: (_sv$controls4 = sv.controls) === null || _sv$controls4 === void 0 ? void 0 : _sv$controls4.maxPolarAngle
+          };
+        }
+
+        // Build the orthographic camera
+        var ortho = new THREE__namespace.OrthographicCamera(-frustumHalfW, frustumHalfW, frustumHalfH, -frustumHalfH, 0.01, 1000);
+        ortho.up.copy(upVec);
+        var dist = Math.max(size.x, size.y, size.z) * 3;
+        ortho.position.copy(center).addScaledVector(faceDir, dist);
+        ortho.lookAt(center);
+        // Store half-extents for resize updates (pre-aspect values so resize can recompute)
+        ortho.userData._orthoHalfExtents = {
+          halfW: halfW * padding,
+          halfH: halfH * padding
+        };
+        ortho.updateProjectionMatrix();
+        sv.camera = ortho;
+        _this4.camera = ortho;
+        if (sv.controls) {
+          sv.controls.object = ortho;
+          sv.controls.target.copy(center);
+          sv.controls.minDistance = 0.1;
+          sv.controls.maxDistance = 500;
+          sv.controls.maxPolarAngle = Math.PI;
+          sv.controls.update();
+
+          // Exit ortho mode when the camera actually moves (orbit/pan/zoom).
+          // Using 'change' instead of 'start' so a simple click (e.g. io-device
+          // toggle) never triggers the exit — only real camera movement does.
+          // Skip the first 'change' that fires from controls.update() below.
+          var _skipChanges = 1;
+          var _onOrbitChange = function onOrbitChange() {
+            if (_skipChanges-- > 0) return;
+            sv.controls.removeEventListener('change', _onOrbitChange);
+            _this4._orthoOrbitStartListener = null;
+            _this4._restorePerspectiveCamera();
+          };
+          sv.controls.addEventListener('change', _onOrbitChange);
+          _this4._orthoOrbitStartListener = {
+            controls: sv.controls,
+            fn: _onOrbitChange
+          };
+        }
+        console.log('📐 Switched to orthographic face view:', faceDir);
+      };
+      this.renderer.domElement.addEventListener('dblclick', this.eventHandlers.dblclick);
+    }
+
+    /**
+     * Restore the perspective camera after an orthographic face view.
+     * Safe to call when not in ortho mode (no-op).
+     * @private
+     */
+  }, {
+    key: "_restorePerspectiveCamera",
+    value: function _restorePerspectiveCamera() {
+      var sv = this.sceneViewer;
+      if (!(sv !== null && sv !== void 0 && sv._perspCameraSnapshot)) return;
+
+      // Clean up any pending orbit-change listener
+      if (this._orthoOrbitStartListener) {
+        var _this$_orthoOrbitStar = this._orthoOrbitStartListener,
+          controls = _this$_orthoOrbitStar.controls,
+          fn = _this$_orthoOrbitStar.fn;
+        controls.removeEventListener('change', fn);
+        this._orthoOrbitStartListener = null;
+      }
+      var snap = sv._perspCameraSnapshot;
+      sv.camera = snap.camera;
+      this.camera = snap.camera;
+      if (sv.controls) {
+        sv.controls.object = snap.camera;
+        sv.controls.target.copy(snap.controlsTarget);
+        if (snap.controlsMinDist != null) sv.controls.minDistance = snap.controlsMinDist;
+        if (snap.controlsMaxDist != null) sv.controls.maxDistance = snap.controlsMaxDist;
+        if (snap.controlsMaxPolar != null) sv.controls.maxPolarAngle = snap.controlsMaxPolar;
+        sv.controls.update();
+      }
+      sv._perspCameraSnapshot = null;
+      console.log('📐 Restored perspective camera from ortho face view');
     }
 
     /**
@@ -4378,11 +4639,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
       var isNewSegmentHorizontal = this._isSegmentHorizontal(segment);
 
       // Check if all existing segments have the same orientation
-      var _iterator2 = _createForOfIteratorHelper(existingSegments),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(existingSegments),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var existingSegment = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var existingSegment = _step3.value;
           var isExistingHorizontal = this._isSegmentHorizontal(existingSegment);
 
           // Disallow mixing horizontal and vertical
@@ -4391,9 +4652,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
       return true;
     }
@@ -4845,12 +5106,12 @@ var TransformControlsManager = /*#__PURE__*/function () {
     value: function _applyDeltaToBoundingBoxHelpers() {
       if (!this._dragStartGroupPosition || this.boundingBoxHelpers.length === 0) return;
       var delta = this.multiSelectionGroup.position.clone().sub(this._dragStartGroupPosition);
-      var _iterator3 = _createForOfIteratorHelper(this.boundingBoxHelpers),
-        _step3;
+      var _iterator4 = _createForOfIteratorHelper(this.boundingBoxHelpers),
+        _step4;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           var _helper$geometry2;
-          var helper = _step3.value;
+          var helper = _step4.value;
           var startPositions = helper.userData._dragStartPositions;
           var posAttr = (_helper$geometry2 = helper.geometry) === null || _helper$geometry2 === void 0 || (_helper$geometry2 = _helper$geometry2.attributes) === null || _helper$geometry2 === void 0 ? void 0 : _helper$geometry2.position;
           if (!startPositions || !posAttr) continue;
@@ -4864,9 +5125,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
           posAttr.needsUpdate = true;
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator3.f();
+        _iterator4.f();
       }
     }
 
@@ -5244,11 +5505,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
       var objectFilter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var objectsWithBounds = this.getSelectableObjectsWithBounds(objectFilter);
       var intersections = [];
-      var _iterator4 = _createForOfIteratorHelper(objectsWithBounds),
-        _step4;
+      var _iterator5 = _createForOfIteratorHelper(objectsWithBounds),
+        _step5;
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var item = _step4.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var item = _step5.value;
           var object = item.object,
             boundingBox = item.boundingBox;
 
@@ -5268,9 +5529,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
 
         // Sort by distance (closest first)
       } catch (err) {
-        _iterator4.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator4.f();
+        _iterator5.f();
       }
       intersections.sort(function (a, b) {
         return a.distance - b.distance;
@@ -5656,8 +5917,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
     key: "_updateSegmentReference",
     value: function _updateSegmentReference(oldSegment, newSegment, index) {
       var selectedIndex = this.selectedObjects.findIndex(function (obj) {
-        var _obj$userData2;
-        return obj.uuid === oldSegment.uuid || ((_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.originalUuid) === oldSegment.uuid;
+        var _obj$userData3;
+        return obj.uuid === oldSegment.uuid || ((_obj$userData3 = obj.userData) === null || _obj$userData3 === void 0 ? void 0 : _obj$userData3.originalUuid) === oldSegment.uuid;
       });
       if (selectedIndex !== -1 && newSegment) {
         // Clear bounding box cache
@@ -6044,9 +6305,21 @@ var TransformControlsManager = /*#__PURE__*/function () {
       if (this.eventHandlers.keydown) {
         window.removeEventListener('keydown', this.eventHandlers.keydown);
       }
+      if (this.eventHandlers.pointerdown) {
+        this.renderer.domElement.removeEventListener('pointerdown', this.eventHandlers.pointerdown);
+      }
       if (this.eventHandlers.click) {
         this.renderer.domElement.removeEventListener('click', this.eventHandlers.click);
       }
+      if (this.eventHandlers.contextmenu) {
+        this.renderer.domElement.removeEventListener('contextmenu', this.eventHandlers.contextmenu);
+      }
+      if (this.eventHandlers.dblclick) {
+        this.renderer.domElement.removeEventListener('dblclick', this.eventHandlers.dblclick);
+      }
+
+      // Restore perspective camera if disposed while in ortho face view
+      this._restorePerspectiveCamera();
 
       // Remove sceneViewer event listener
       if (this._objectTransformedListener && this.sceneViewer && typeof this.sceneViewer.off === 'function') {
@@ -31463,7 +31736,7 @@ var ModelManager = /*#__PURE__*/function () {
     key: "loadLibraryModel",
     value: function () {
       var _loadLibraryModel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(targetMesh, jsonEntry, componentData) {
-        var component, _jsonEntry$userData, _jsonEntry$userData2, _jsonEntry$userData3, originalProps, connectorChildren, gltfScene, libraryModel, _this$sceneViewer, ioAnimMgr, _loop, _i, _Object$entries, _jsonEntry$userData4, _t;
+        var component, _jsonEntry$userData, _jsonEntry$userData2, _jsonEntry$userData3, originalProps, connectorChildren, gltfScene, libraryModel, _this$sceneViewer, ioAnimMgr, _loop, _i, _Object$entries, warmFn, _jsonEntry$userData4, _t;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
@@ -31560,6 +31833,20 @@ var ModelManager = /*#__PURE__*/function () {
             case 8:
               // Replace mesh in scene
               this._replaceMeshInScene(targetMesh, libraryModel, originalProps.parent, component);
+
+              // Pre-warm the filtered bounding-box cache for smart components so the
+              // first selection is instant.  Deferred to idle time so it does not
+              // block the current frame.
+              if (componentData.isSmart) {
+                warmFn = function warmFn() {
+                  return computeFilteredBoundingBoxCached(libraryModel, ['io-device', 'connector']);
+                };
+                if (typeof requestIdleCallback !== 'undefined') {
+                  requestIdleCallback(warmFn);
+                } else {
+                  setTimeout(warmFn, 0);
+                }
+              }
               console.log("\uD83C\uDF89 ".concat((_jsonEntry$userData3 = jsonEntry.userData) === null || _jsonEntry$userData3 === void 0 ? void 0 : _jsonEntry$userData3.libraryId, " GLB model successfully rendered in scene"));
               return _context2.a(2, libraryModel);
             case 9:
@@ -34791,11 +35078,18 @@ var AnimationManager = /*#__PURE__*/function (_BaseDisposable) {
         sceneViewer.performanceMonitorManager.beginFrame();
       }
       try {
+        var _sceneViewer$managers;
         // Update controls
         sceneViewer.controls.update();
 
-        // Render the scene
-        sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+        // Render the scene — route through the outline manager when active so
+        // the mask pass and screen-space composite run after the main render.
+        var ioOutline = (_sceneViewer$managers = sceneViewer.managers) === null || _sceneViewer$managers === void 0 ? void 0 : _sceneViewer$managers.ioOutlineManager;
+        if (ioOutline !== null && ioOutline !== void 0 && ioOutline.isActive) {
+          ioOutline.render();
+        } else {
+          sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+        }
       } catch (renderError) {
         // Catch WebGL or rendering errors to prevent the animation loop from
         // producing a permanent white screen. Log once and continue so that
@@ -37069,6 +37363,169 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
       console.log("\uD83D\uDD04 [IODevice] Toggled ".concat(scopedAttachmentId, ".").concat(dpId, ": ").concat(currentVal, " \u2192 ").concat(newVal));
     }
 
+    // ── IO device drag-to-state ─────────────────────────────────────────────
+
+    /**
+     * Begin tracking a drag gesture on an IO device mesh.
+     * Records the initial state of each animation data point so that
+     * `updateIODeviceDrag` can compute relative offsets from it.
+     *
+     * @param {THREE.Object3D} ioDeviceObject
+     */
+  }, {
+    key: "startIODeviceDrag",
+    value: function startIODeviceDrag(ioDeviceObject) {
+      var _this$sceneViewer3,
+        _this2 = this;
+      if (!ioDeviceObject || !this._stateAdapter) return;
+      var ud = ioDeviceObject.userData;
+      var attachmentId = ud === null || ud === void 0 ? void 0 : ud.attachmentId;
+      if (!attachmentId) return;
+      var parentUuid = null;
+      var obj = ioDeviceObject.parent;
+      while (obj) {
+        var _obj$userData2;
+        if (((_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.objectType) === 'component') {
+          parentUuid = obj.uuid;
+          break;
+        }
+        obj = obj.parent;
+      }
+      var scopedAttachmentId = this._getScopedAttachmentKey(attachmentId, parentUuid);
+      var ioAnimMgr = (_this$sceneViewer3 = this.sceneViewer) === null || _this$sceneViewer3 === void 0 || (_this$sceneViewer3 = _this$sceneViewer3.managers) === null || _this$sceneViewer3 === void 0 ? void 0 : _this$sceneViewer3.ioAnimationManager;
+      var dataPoints = ((ioAnimMgr === null || ioAnimMgr === void 0 ? void 0 : ioAnimMgr.getAnimationDataPoints(parentUuid, attachmentId)) || []).concat((ud === null || ud === void 0 ? void 0 : ud.dataPoints) || [])
+      // deduplicate by id
+      .filter(function (dp, i, arr) {
+        return arr.findIndex(function (d) {
+          return d.id === dp.id;
+        }) === i;
+      });
+      var dpSessions = [];
+      var _iterator = _createForOfIteratorHelper(dataPoints),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var _this2$_stateAdapter$;
+          var dp = _step.value;
+          var stateType = (dp.stateType || '').toLowerCase();
+          if (stateType !== 'binary' && stateType !== 'boolean' && stateType !== 'enum') return 1; // continue
+          var curVal = (_this2$_stateAdapter$ = _this2._stateAdapter.getState(scopedAttachmentId, dp.id)) !== null && _this2$_stateAdapter$ !== void 0 ? _this2$_stateAdapter$ : dp.defaultValue;
+          if (stateType === 'binary' || stateType === 'boolean') {
+            dpSessions.push({
+              dp: dp,
+              scopedAttachmentId: scopedAttachmentId,
+              attachmentId: attachmentId,
+              parentUuid: parentUuid,
+              stateType: 'binary',
+              lastApplied: curVal
+            });
+          } else {
+            var _dp$stateConfig;
+            var opts = ((_dp$stateConfig = dp.stateConfig) === null || _dp$stateConfig === void 0 ? void 0 : _dp$stateConfig.options) || [];
+            var curIdx = opts.findIndex(function (o) {
+              return String(o) === String(curVal);
+            });
+            dpSessions.push({
+              dp: dp,
+              scopedAttachmentId: scopedAttachmentId,
+              attachmentId: attachmentId,
+              parentUuid: parentUuid,
+              stateType: 'enum',
+              opts: opts,
+              startIdx: curIdx >= 0 ? curIdx : 0,
+              lastAppliedIdx: curIdx >= 0 ? curIdx : 0
+            });
+          }
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          if (_loop()) continue;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      this._ioDragSession = dpSessions.length ? {
+        dpSessions: dpSessions
+      } : null;
+    }
+
+    /**
+     * Update animated mesh state while a drag is in progress.
+     * Called continuously during pointermove.
+     *
+     * Sign convention: up/right = positive `signedDelta`.
+     * - Binary:  > +20 px → true/on state,  < −20 px → false/off state.
+     * - Enum:    each ±30 px step advances/retreats one option in the list.
+     *
+     * @param {number} signedDelta - Cumulative signed pixel displacement since drag start
+     */
+  }, {
+    key: "updateIODeviceDrag",
+    value: function updateIODeviceDrag(signedDelta) {
+      var session = this._ioDragSession;
+      if (!session) return;
+      var BINARY_THRESHOLD = 20;
+      var ENUM_STEP_PX = 30;
+      var _iterator2 = _createForOfIteratorHelper(session.dpSessions),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var dps = _step2.value;
+          if (dps.stateType === 'binary') {
+            var newVal = void 0;
+            if (signedDelta > BINARY_THRESHOLD) {
+              newVal = true;
+            } else if (signedDelta < -BINARY_THRESHOLD) {
+              newVal = false;
+            } else {
+              continue; // dead zone
+            }
+            if (newVal === dps.lastApplied) continue;
+            dps.lastApplied = newVal;
+            this._applyDpState(dps, newVal);
+          } else if (dps.stateType === 'enum') {
+            var steps = Math.round(signedDelta / ENUM_STEP_PX);
+            var newIdx = Math.max(0, Math.min(dps.opts.length - 1, dps.startIdx + steps));
+            if (newIdx === dps.lastAppliedIdx) continue;
+            dps.lastAppliedIdx = newIdx;
+            this._applyDpState(dps, dps.opts[newIdx]);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+
+    /**
+     * Clean up drag session state on pointerup.
+     */
+  }, {
+    key: "endIODeviceDrag",
+    value: function endIODeviceDrag() {
+      this._ioDragSession = null;
+    }
+
+    /**
+     * Apply a new value to a data point, updating Vuex state and firing behavior/animation triggers.
+     * @private
+     */
+  }, {
+    key: "_applyDpState",
+    value: function _applyDpState(_ref2, newVal) {
+      var _this$_stateAdapter, _this$sceneViewer4, _this$sceneViewer5;
+      var scopedAttachmentId = _ref2.scopedAttachmentId,
+        attachmentId = _ref2.attachmentId,
+        parentUuid = _ref2.parentUuid,
+        dp = _ref2.dp;
+      var dpId = dp.id;
+      (_this$_stateAdapter = this._stateAdapter) === null || _this$_stateAdapter === void 0 || _this$_stateAdapter.setState(scopedAttachmentId, dpId, newVal);
+      (_this$sceneViewer4 = this.sceneViewer) === null || _this$sceneViewer4 === void 0 || (_this$sceneViewer4 = _this$sceneViewer4.managers) === null || _this$sceneViewer4 === void 0 || (_this$sceneViewer4 = _this$sceneViewer4.behaviorManager) === null || _this$sceneViewer4 === void 0 || _this$sceneViewer4.triggerState(attachmentId, dpId, newVal, parentUuid);
+      (_this$sceneViewer5 = this.sceneViewer) === null || _this$sceneViewer5 === void 0 || (_this$sceneViewer5 = _this$sceneViewer5.managers) === null || _this$sceneViewer5 === void 0 || (_this$sceneViewer5 = _this$sceneViewer5.ioAnimationManager) === null || _this$sceneViewer5 === void 0 || _this$sceneViewer5.triggerState(attachmentId, dpId, newVal, parentUuid);
+    }
+
     /**
      * Should be called when an object is selected or deselected.
      * @param {THREE.Object3D|null} object
@@ -37182,18 +37639,18 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_getIODevices",
     value: function _getIODevices(object) {
-      var _this2 = this;
+      var _this3 = this;
       var devices = [];
       var parentUuid = object.uuid; // The component's own UUID
       object.traverse(function (child) {
         var _child$userData;
         if (((_child$userData = child.userData) === null || _child$userData === void 0 ? void 0 : _child$userData.objectType) === 'io-device') {
-          var _this2$sceneViewer$ma, _this2$sceneViewer;
+          var _this3$sceneViewer$ma, _this3$sceneViewer;
           var attachmentId = child.userData.attachmentId || '';
 
           // Use only data points from the animate window (animationConfig).
           // The static ioConfig.states[] snapshot on userData is intentionally ignored.
-          var dataPoints = (_this2$sceneViewer$ma = (_this2$sceneViewer = _this2.sceneViewer) === null || _this2$sceneViewer === void 0 || (_this2$sceneViewer = _this2$sceneViewer.managers) === null || _this2$sceneViewer === void 0 || (_this2$sceneViewer = _this2$sceneViewer.ioAnimationManager) === null || _this2$sceneViewer === void 0 ? void 0 : _this2$sceneViewer.getAnimationDataPoints(parentUuid, attachmentId)) !== null && _this2$sceneViewer$ma !== void 0 ? _this2$sceneViewer$ma : [];
+          var dataPoints = (_this3$sceneViewer$ma = (_this3$sceneViewer = _this3.sceneViewer) === null || _this3$sceneViewer === void 0 || (_this3$sceneViewer = _this3$sceneViewer.managers) === null || _this3$sceneViewer === void 0 || (_this3$sceneViewer = _this3$sceneViewer.ioAnimationManager) === null || _this3$sceneViewer === void 0 ? void 0 : _this3$sceneViewer.getAnimationDataPoints(parentUuid, attachmentId)) !== null && _this3$sceneViewer$ma !== void 0 ? _this3$sceneViewer$ma : [];
 
           // When data points come from animationConfig they already carry direction:'input'.
           // Pass null so _buildDataPointRow uses the per-dp direction instead of the
@@ -37203,7 +37660,7 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
             label: child.userData.attachmentLabel || child.name || child.userData.deviceId || 'Unknown Device',
             deviceId: child.userData.deviceId || '',
             attachmentId: attachmentId,
-            scopedAttachmentId: _this2._getScopedAttachmentKey(attachmentId, parentUuid),
+            scopedAttachmentId: _this3._getScopedAttachmentKey(attachmentId, parentUuid),
             dataPoints: dataPoints,
             direction: deviceDirection
           });
@@ -37219,7 +37676,7 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_buildTooltip",
     value: function _buildTooltip(object) {
-      var _this3 = this;
+      var _this4 = this;
       // Remove any existing tooltip first
       this.hide();
       // Re-assign selected object since hide() clears it
@@ -37290,7 +37747,7 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
           // Use scopedAttachmentId to ensure state is isolated per component instance
           if (device.scopedAttachmentId && device.dataPoints.length > 0) {
             device.dataPoints.forEach(function (dp) {
-              var row = _this3._buildDataPointRow(device.scopedAttachmentId, dp, device.direction, device.attachmentId);
+              var row = _this4._buildDataPointRow(device.scopedAttachmentId, dp, device.direction, device.attachmentId);
               list.appendChild(row);
             });
           }
@@ -37301,11 +37758,11 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
         // Hover expand/collapse
         trigger.addEventListener('mouseenter', function () {
           ioSection.classList.add('expanded');
-          _this3._ioExpanded = true;
+          _this4._ioExpanded = true;
         });
         ioSection.addEventListener('mouseleave', function () {
           ioSection.classList.remove('expanded');
-          _this3._ioExpanded = false;
+          _this4._ioExpanded = false;
         });
         card.appendChild(ioSection);
       } else {
@@ -37349,11 +37806,11 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_positionTooltip",
     value: function _positionTooltip() {
-      var _this$sceneViewer3, _this$sceneViewer4;
+      var _this$sceneViewer6, _this$sceneViewer7;
       if (!this.tooltipEl || !this.selectedObject) return;
       var container = this._getContainer();
-      var camera = (_this$sceneViewer3 = this.sceneViewer) === null || _this$sceneViewer3 === void 0 ? void 0 : _this$sceneViewer3.camera;
-      var renderer = (_this$sceneViewer4 = this.sceneViewer) === null || _this$sceneViewer4 === void 0 ? void 0 : _this$sceneViewer4.renderer;
+      var camera = (_this$sceneViewer6 = this.sceneViewer) === null || _this$sceneViewer6 === void 0 ? void 0 : _this$sceneViewer6.camera;
+      var renderer = (_this$sceneViewer7 = this.sceneViewer) === null || _this$sceneViewer7 === void 0 ? void 0 : _this$sceneViewer7.renderer;
       if (!container || !camera || !renderer) return;
 
       // Compute bounding box to position above the component
@@ -37390,8 +37847,8 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_getContainer",
     value: function _getContainer() {
-      var _this$sceneViewer5;
-      return ((_this$sceneViewer5 = this.sceneViewer) === null || _this$sceneViewer5 === void 0 || (_this$sceneViewer5 = _this$sceneViewer5.renderer) === null || _this$sceneViewer5 === void 0 || (_this$sceneViewer5 = _this$sceneViewer5.domElement) === null || _this$sceneViewer5 === void 0 ? void 0 : _this$sceneViewer5.parentElement) || null;
+      var _this$sceneViewer8;
+      return ((_this$sceneViewer8 = this.sceneViewer) === null || _this$sceneViewer8 === void 0 || (_this$sceneViewer8 = _this$sceneViewer8.renderer) === null || _this$sceneViewer8 === void 0 || (_this$sceneViewer8 = _this$sceneViewer8.domElement) === null || _this$sceneViewer8 === void 0 ? void 0 : _this$sceneViewer8.parentElement) || null;
     }
 
     // -----------------------------------------------------------------------
@@ -37413,10 +37870,10 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_buildDataPointRow",
     value: function _buildDataPointRow(scopedAttachmentId, dp, deviceDirection, originalAttachmentId) {
-      var _ref2,
+      var _ref3,
         _this$_stateAdapter$g,
-        _this$_stateAdapter,
-        _this4 = this;
+        _this$_stateAdapter2,
+        _this5 = this;
       var row = document.createElement('div');
       row.className = 'cp-tooltip__dp-row';
       var nameEl = document.createElement('span');
@@ -37428,18 +37885,18 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
       // Device-level direction takes precedence; fall back to per-dp direction
       var resolvedDirection = deviceDirection || dp.direction || 'output';
       var isInput = resolvedDirection === 'input' || resolvedDirection === 'bidirectional';
-      var currentVal = (_ref2 = (_this$_stateAdapter$g = (_this$_stateAdapter = this._stateAdapter) === null || _this$_stateAdapter === void 0 ? void 0 : _this$_stateAdapter.getState(scopedAttachmentId, dpId)) !== null && _this$_stateAdapter$g !== void 0 ? _this$_stateAdapter$g : dp.defaultValue) !== null && _ref2 !== void 0 ? _ref2 : null;
+      var currentVal = (_ref3 = (_this$_stateAdapter$g = (_this$_stateAdapter2 = this._stateAdapter) === null || _this$_stateAdapter2 === void 0 ? void 0 : _this$_stateAdapter2.getState(scopedAttachmentId, dpId)) !== null && _this$_stateAdapter$g !== void 0 ? _this$_stateAdapter$g : dp.defaultValue) !== null && _ref3 !== void 0 ? _ref3 : null;
       if (isInput) {
         var ctrl = this._buildInputControl(dp, currentVal, function (newVal) {
-          var _this4$_stateAdapter, _this4$selectedObject, _this4$sceneViewer, _this4$sceneViewer2;
-          (_this4$_stateAdapter = _this4._stateAdapter) === null || _this4$_stateAdapter === void 0 || _this4$_stateAdapter.setState(scopedAttachmentId, dpId, newVal);
+          var _this5$_stateAdapter, _this5$selectedObject, _this5$sceneViewer, _this5$sceneViewer2;
+          (_this5$_stateAdapter = _this5._stateAdapter) === null || _this5$_stateAdapter === void 0 || _this5$_stateAdapter.setState(scopedAttachmentId, dpId, newVal);
           // Also fire BehaviorManager so any wired behaviors react immediately.
           // Pass the parent component UUID so behaviors scoped to a specific instance
           // don't bleed across clones that share the same attachmentId.
           // Use originalAttachmentId for behavior triggering as behaviors are keyed by original ID
-          var parentUuid = ((_this4$selectedObject = _this4.selectedObject) === null || _this4$selectedObject === void 0 ? void 0 : _this4$selectedObject.uuid) || null;
-          (_this4$sceneViewer = _this4.sceneViewer) === null || _this4$sceneViewer === void 0 || (_this4$sceneViewer = _this4$sceneViewer.managers) === null || _this4$sceneViewer === void 0 || (_this4$sceneViewer = _this4$sceneViewer.behaviorManager) === null || _this4$sceneViewer === void 0 || _this4$sceneViewer.triggerState(originalAttachmentId || scopedAttachmentId, dpId, newVal, parentUuid);
-          (_this4$sceneViewer2 = _this4.sceneViewer) === null || _this4$sceneViewer2 === void 0 || (_this4$sceneViewer2 = _this4$sceneViewer2.managers) === null || _this4$sceneViewer2 === void 0 || (_this4$sceneViewer2 = _this4$sceneViewer2.ioAnimationManager) === null || _this4$sceneViewer2 === void 0 || _this4$sceneViewer2.triggerState(originalAttachmentId || scopedAttachmentId, dpId, newVal, parentUuid);
+          var parentUuid = ((_this5$selectedObject = _this5.selectedObject) === null || _this5$selectedObject === void 0 ? void 0 : _this5$selectedObject.uuid) || null;
+          (_this5$sceneViewer = _this5.sceneViewer) === null || _this5$sceneViewer === void 0 || (_this5$sceneViewer = _this5$sceneViewer.managers) === null || _this5$sceneViewer === void 0 || (_this5$sceneViewer = _this5$sceneViewer.behaviorManager) === null || _this5$sceneViewer === void 0 || _this5$sceneViewer.triggerState(originalAttachmentId || scopedAttachmentId, dpId, newVal, parentUuid);
+          (_this5$sceneViewer2 = _this5.sceneViewer) === null || _this5$sceneViewer2 === void 0 || (_this5$sceneViewer2 = _this5$sceneViewer2.managers) === null || _this5$sceneViewer2 === void 0 || (_this5$sceneViewer2 = _this5$sceneViewer2.ioAnimationManager) === null || _this5$sceneViewer2 === void 0 || _this5$sceneViewer2.triggerState(originalAttachmentId || scopedAttachmentId, dpId, newVal, parentUuid);
         });
         row.appendChild(ctrl);
         this._stateElements.set(key, {
@@ -37448,9 +37905,9 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
           isInput: true
         });
       } else {
-        var _dp$stateConfig;
+        var _dp$stateConfig2;
         // unit suffix (optional, shown between name and badge)
-        var unit = (_dp$stateConfig = dp.stateConfig) === null || _dp$stateConfig === void 0 ? void 0 : _dp$stateConfig.unit;
+        var unit = (_dp$stateConfig2 = dp.stateConfig) === null || _dp$stateConfig2 === void 0 ? void 0 : _dp$stateConfig2.unit;
         if (unit) {
           var unitEl = document.createElement('span');
           unitEl.className = 'cp-tooltip__dp-unit';
@@ -37595,7 +38052,7 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "_refreshStateDisplays",
     value: function _refreshStateDisplays() {
-      var _this5 = this;
+      var _this6 = this;
       if (!this._stateAdapter || !this._stateElements.size) return;
       this._stateElements.forEach(function (entry, key) {
         if (entry.isInput) return; // interactive controls are user-driven; don't overwrite
@@ -37604,8 +38061,8 @@ var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
         if (sepIdx === -1) return;
         var scopedAttachmentId = key.slice(0, sepIdx);
         var dataPointId = key.slice(sepIdx + 2);
-        var val = _this5._stateAdapter.getState(scopedAttachmentId, dataPointId);
-        _this5._applyBadgeValue(entry.el, val, entry.dp);
+        var val = _this6._stateAdapter.getState(scopedAttachmentId, dataPointId);
+        _this6._applyBadgeValue(entry.el, val, entry.dp);
       });
     }
   }]);
@@ -37828,6 +38285,26 @@ var IoAnimationManager = /*#__PURE__*/function (_BaseDisposable) {
       return dps;
     }
 
+    /**
+     * Return the Three.js mesh objects that are animated for a given attachment.
+     * Used by IoOutlineManager to include animated meshes in the outline.
+     *
+     * @param {string} parentUuid
+     * @param {string} attachmentId
+     * @returns {THREE.Object3D[]}
+     */
+  }, {
+    key: "getAnimatedMeshes",
+    value: function getAnimatedMeshes(parentUuid, attachmentId) {
+      var key = this._key(parentUuid, attachmentId);
+      var entries = this._entries.get(key);
+      if (!(entries !== null && entries !== void 0 && entries.length)) return [];
+      // Deduplicate — multiple animations can target the same mesh
+      return _toConsumableArray(new Set(entries.map(function (e) {
+        return e.mesh;
+      })));
+    }
+
     /**
      * Remove all animation entries associated with a given host component.
      * Call when a component is removed from the scene.
@@ -38059,7 +38536,10 @@ var IoAnimationManager = /*#__PURE__*/function (_BaseDisposable) {
     value: function _applyTranslation(mesh, origPos, transform) {
       var _transform$x, _transform$y, _transform$z;
       if (!transform) return;
-      mesh.position.set(origPos.x + ((_transform$x = transform.x) !== null && _transform$x !== void 0 ? _transform$x : 0), origPos.y + ((_transform$y = transform.y) !== null && _transform$y !== void 0 ? _transform$y : 0), origPos.z + ((_transform$z = transform.z) !== null && _transform$z !== void 0 ? _transform$z : 0));
+      // X and Y are negated to match the sign convention used in the AnimateDevicesDialog
+      // preview (_syncViewerTransform negates x and y before calling setMeshPreviewOffset).
+      // Z is added directly (no negation) — matching the dialog's z handling.
+      mesh.position.set(origPos.x - ((_transform$x = transform.x) !== null && _transform$x !== void 0 ? _transform$x : 0), origPos.y - ((_transform$y = transform.y) !== null && _transform$y !== void 0 ? _transform$y : 0), origPos.z + ((_transform$z = transform.z) !== null && _transform$z !== void 0 ? _transform$z : 0));
     }
 
     /**
@@ -38130,6 +38610,235 @@ var IoAnimationManager = /*#__PURE__*/function (_BaseDisposable) {
   }]);
 }(BaseDisposable);
 
+/**
+ * Three.js layer reserved exclusively for the outline mask pass.
+ * Layer 20 is high enough to be well clear of typical app layer usage.
+ */
+var OUTLINE_LAYER = 20;
+
+// ── Shaders ──────────────────────────────────────────────────────────────────
+
+var VERT_SHADER = /* glsl */"\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position.xy, 0.0, 1.0);\n}\n";
+
+/**
+ * Screen-space outline shader.
+ *
+ * Samples in a circular kernel to find the nearest filled (silhouette) pixel.
+ * Applies a smooth alpha falloff at the outer edge using smoothstep so the
+ * outline fades cleanly rather than cutting off hard.
+ *
+ * RADIUS  — maximum distance in pixels from the silhouette edge to draw.
+ * SAMPLES — kernel half-extent; must be an integer ≥ ceil(RADIUS).
+ */
+var FRAG_SHADER = /* glsl */"\nuniform sampler2D tMask;\nuniform vec2 uInvSize;\nvarying vec2 vUv;\n\nconst float RADIUS  = 3.0;   // total outline width in pixels\nconst int   SAMPLES = 4;     // kernel half-extent (\u2265 ceil(RADIUS))\n\nvoid main() {\n  float center = texture2D(tMask, vUv).r;\n\n  // Pixels inside the silhouette: the main render already drew them.\n  if (center > 0.5) discard;\n\n  // Find the closest filled neighbour within the circular kernel.\n  float minDist = 99.0;\n  for (int x = -SAMPLES; x <= SAMPLES; x++) {\n    for (int y = -SAMPLES; y <= SAMPLES; y++) {\n      float dist = length(vec2(float(x), float(y)));\n      if (dist > RADIUS + 1.0) continue;   // skip corners outside circle\n      vec2 offset = vec2(float(x), float(y)) * uInvSize;\n      if (texture2D(tMask, vUv + offset).r > 0.5) {\n        minDist = min(minDist, dist);\n      }\n    }\n  }\n\n  if (minDist > RADIUS + 0.5) discard;\n\n  // Smooth alpha: full opacity near the edge, fades to 0 at RADIUS pixels out.\n  float alpha = 1.0 - smoothstep(RADIUS - 1.0, RADIUS + 0.5, minDist);\n  gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);\n}\n";
+var IoOutlineManager = /*#__PURE__*/function (_BaseDisposable) {
+  function IoOutlineManager(sceneViewer) {
+    var _this;
+    _classCallCheck(this, IoOutlineManager);
+    _this = _callSuper(this, IoOutlineManager);
+    _this.sceneViewer = sceneViewer;
+    _this._maskTarget = null;
+    _this._maskMat = null;
+    _this._overlayScene = null;
+    _this._overlayCamera = null;
+    _this._overlayMat = null;
+
+    /**
+     * Meshes that have been moved onto OUTLINE_LAYER, stored with their
+     * original layers.mask so they can be restored on clearance.
+     * @type {{ mesh: THREE.Mesh, originalMask: number }[]}
+     */
+    _this._layeredMeshes = [];
+
+    /** @type {boolean} Whether an outline is currently active. */
+    _this.isActive = false;
+    return _this;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // PUBLIC API
+  // ─────────────────────────────────────────────────────────────────────────
+
+  /**
+   * Set the objects to outline.  Pass an empty array (or call with no args)
+   * to remove the outline.
+   * @param {THREE.Object3D[]} objects
+   */
+  _inherits(IoOutlineManager, _BaseDisposable);
+  return _createClass(IoOutlineManager, [{
+    key: "setTargets",
+    value: function setTargets() {
+      var _this2 = this;
+      var objects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      this._clearLayeredMeshes();
+      if (!objects.length) {
+        this.isActive = false;
+        return;
+      }
+      objects.forEach(function (obj) {
+        obj.traverse(function (child) {
+          if (!child.isMesh) return;
+          var originalMask = child.layers.mask;
+          child.layers.enable(OUTLINE_LAYER);
+          _this2._layeredMeshes.push({
+            mesh: child,
+            originalMask: originalMask
+          });
+        });
+      });
+      this.isActive = this._layeredMeshes.length > 0;
+    }
+
+    /**
+     * Render one frame: main scene → mask pass → outline composite.
+     * Must be called instead of renderer.render() when isActive is true.
+     */
+  }, {
+    key: "render",
+    value: function render() {
+      var sv = this.sceneViewer;
+      var renderer = sv.renderer,
+        scene = sv.scene,
+        camera = sv.camera;
+      if (!renderer || !scene || !camera) return;
+
+      // ── Step 1: Normal scene render — sky, transparency, all unaffected ──
+      renderer.render(scene, camera);
+      if (!this.isActive) return;
+      this._ensureResources();
+      if (!this._maskTarget) return;
+
+      // Stash renderer / scene / camera state we are about to mutate
+      var prevBg = scene.background;
+      var prevOverride = scene.overrideMaterial;
+      var prevLayerMask = camera.layers.mask;
+      var prevAutoClear = renderer.autoClear;
+      var prevClearClr = renderer.getClearColor(new THREE__namespace.Color());
+      var prevClearA = renderer.getClearAlpha();
+
+      // ── Step 2: Render the device silhouette into the private mask target ──
+      scene.background = null; // transparent clear
+      scene.overrideMaterial = this._maskMat; // flat white for all geometry
+      camera.layers.set(OUTLINE_LAYER); // only see the device meshes
+      renderer.setClearColor(0x000000, 0);
+      renderer.autoClear = true;
+      renderer.setRenderTarget(this._maskTarget);
+      renderer.render(scene, camera);
+      renderer.setRenderTarget(null);
+
+      // Restore mutated state
+      scene.background = prevBg;
+      scene.overrideMaterial = prevOverride;
+      camera.layers.mask = prevLayerMask;
+      renderer.setClearColor(prevClearClr, prevClearA);
+
+      // ── Step 3: Composite the outline on top without clearing the framebuffer
+      renderer.autoClear = false;
+      renderer.render(this._overlayScene, this._overlayCamera);
+      renderer.autoClear = prevAutoClear;
+    }
+
+    /**
+     * Call when the canvas is resized to keep the mask target and shader in sync.
+     * @param {number} width
+     * @param {number} height
+     */
+  }, {
+    key: "setSize",
+    value: function setSize(width, height) {
+      if (this._maskTarget) this._maskTarget.setSize(width, height);
+      if (this._overlayMat) {
+        this._overlayMat.uniforms.uInvSize.value.set(1 / width, 1 / height);
+      }
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this._clearLayeredMeshes();
+      if (this._maskTarget) {
+        this._maskTarget.dispose();
+        this._maskTarget = null;
+      }
+      if (this._maskMat) {
+        this._maskMat.dispose();
+        this._maskMat = null;
+      }
+      if (this._overlayMat) {
+        this._overlayMat.dispose();
+        this._overlayMat = null;
+      }
+      _superPropGet(IoOutlineManager, "dispose", this, 3)([]);
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // PRIVATE
+    // ─────────────────────────────────────────────────────────────────────────
+
+    /** Lazy-initialise GPU resources on first use. */
+  }, {
+    key: "_ensureResources",
+    value: function _ensureResources() {
+      if (this._maskTarget) return;
+      var renderer = this.sceneViewer.renderer;
+      if (!renderer) return;
+      var size = renderer.getSize(new THREE__namespace.Vector2());
+      var w = size.x;
+      var h = size.y;
+
+      // Private render target — receives the flat white device silhouette
+      this._maskTarget = new THREE__namespace.WebGLRenderTarget(w, h);
+
+      // Flat white material used during the mask pass
+      this._maskMat = new THREE__namespace.MeshBasicMaterial({
+        color: 0xffffff
+      });
+
+      // Screen-space overlay: reads the mask and draws only the outline pixels
+      this._overlayMat = new THREE__namespace.ShaderMaterial({
+        uniforms: {
+          tMask: {
+            value: this._maskTarget.texture
+          },
+          uInvSize: {
+            value: new THREE__namespace.Vector2(1 / w, 1 / h)
+          }
+        },
+        vertexShader: VERT_SHADER,
+        fragmentShader: FRAG_SHADER,
+        transparent: true,
+        depthTest: false,
+        depthWrite: false
+      });
+      var quad = new THREE__namespace.Mesh(new THREE__namespace.PlaneGeometry(2, 2), this._overlayMat);
+      quad.frustumCulled = false;
+      this._overlayScene = new THREE__namespace.Scene();
+      this._overlayScene.add(quad);
+      this._overlayCamera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    }
+
+    /** Remove OUTLINE_LAYER from all tracked meshes and clear the list. */
+  }, {
+    key: "_clearLayeredMeshes",
+    value: function _clearLayeredMeshes() {
+      var _iterator = _createForOfIteratorHelper(this._layeredMeshes),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _step$value = _step.value,
+            mesh = _step$value.mesh,
+            originalMask = _step$value.originalMask;
+          mesh.layers.mask = originalMask;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      this._layeredMeshes = [];
+    }
+  }]);
+}(BaseDisposable);
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Flow-direction helpers (module-level)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -38252,6 +38961,7 @@ var CentralPlantInternals = /*#__PURE__*/function () {
       this.centralPlant.managers.componentDragManager = new ComponentDragManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.viewport2DManager = new Viewport2DManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.ioAnimationManager = new IoAnimationManager(this.centralPlant.sceneViewer);
+      this.centralPlant.managers.ioOutlineManager = new IoOutlineManager(this.centralPlant.sceneViewer);
 
       // All managers are now stored in the managers collection and will be attached via attachToComponent()
     }
@@ -39268,6 +39978,20 @@ var CentralPlantInternals = /*#__PURE__*/function () {
           componentManager.registerComponent(componentModel);
         }
 
+        // Pre-warm the filtered bounding-box cache for smart components so the
+        // first selection is instant.  Deferred to idle time so it does not
+        // block the current frame.
+        if (componentData.isSmart) {
+          var warmFn = function warmFn() {
+            return computeFilteredBoundingBoxCached(componentModel, ['io-device', 'connector']);
+          };
+          if (typeof requestIdleCallback !== 'undefined') {
+            requestIdleCallback(warmFn);
+          } else {
+            setTimeout(warmFn, 0);
+          }
+        }
+
         // EMIT COMPONENT ADDED EVENT
         // This allows UI components (like SceneHierarchy) to update reactively
         if (this.centralPlant.sceneViewer.emit) {
@@ -39547,7 +40271,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.3.26
+   * @version 0.3.27
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.
@@ -42564,7 +43288,7 @@ var sceneViewer = /*#__PURE__*/function (_BaseDisposable) {
               this.centralPlant.attachToComponent();
 
               // Sync our managers tracking object after attachment
-              managerKeys = ['threeJSResourceManager', 'performanceMonitorManager', 'settingsManager', 'sceneExportManager', 'componentManager', 'sceneInitializationManager', 'environmentManager', 'keyboardControlsManager', 'pathfindingManager', 'pathFlowManager', 'behaviorManager', 'ioAnimationManager', 'sceneOperationsManager', 'animationManager', 'cameraControlsManager', 'componentDragManager', 'tooltipsManager', 'componentTooltipManager']; // Populate our managers tracking object
+              managerKeys = ['threeJSResourceManager', 'performanceMonitorManager', 'settingsManager', 'sceneExportManager', 'componentManager', 'sceneInitializationManager', 'environmentManager', 'keyboardControlsManager', 'pathfindingManager', 'pathFlowManager', 'behaviorManager', 'ioAnimationManager', 'ioOutlineManager', 'sceneOperationsManager', 'animationManager', 'cameraControlsManager', 'componentDragManager', 'tooltipsManager', 'componentTooltipManager']; // Populate our managers tracking object
               managerKeys.forEach(function (key) {
                 if (_this2[key]) {
                   _this2.managers[key] = _this2[key];
@@ -42752,7 +43476,21 @@ var sceneViewer = /*#__PURE__*/function (_BaseDisposable) {
       }
 
       // Update camera aspect ratio
-      this.camera.aspect = width / height;
+      if (this.camera.isPerspectiveCamera) {
+        this.camera.aspect = width / height;
+      } else if (this.camera.isOrthographicCamera) {
+        var _this$camera$userData;
+        var aspect = width / height;
+        var extents = (_this$camera$userData = this.camera.userData) === null || _this$camera$userData === void 0 ? void 0 : _this$camera$userData._orthoHalfExtents;
+        if (extents) {
+          var frustumHalfH = Math.max(extents.halfH, extents.halfW / aspect);
+          var frustumHalfW = frustumHalfH * aspect;
+          this.camera.left = -frustumHalfW;
+          this.camera.right = frustumHalfW;
+          this.camera.top = frustumHalfH;
+          this.camera.bottom = -frustumHalfH;
+        }
+      }
       this.camera.updateProjectionMatrix();
 
       // Update renderer size (updateStyle=true to sync canvas CSS)
@@ -42879,6 +43617,45 @@ var sceneViewer = /*#__PURE__*/function (_BaseDisposable) {
           if (_this4.componentTooltipManager) {
             _this4.componentTooltipManager.toggleIODeviceBinaryState(ioDeviceObject);
           }
+        },
+        onIODeviceDrag: function onIODeviceDrag(ioDeviceObject, signedDelta, isStart) {
+          if (isStart) {
+            var _ioDeviceObject$userD, _this4$managers$ioAni, _this4$managers, _this4$managers2;
+            // Resolve parentUuid by walking up to the host component.
+            // Use userData.originalUuid (the custom componentId) because that
+            // is what IoAnimationManager uses as the map key — NOT obj.uuid.
+            var parentUuid = null;
+            var obj = ioDeviceObject.parent;
+            while (obj) {
+              var _obj$userData;
+              if (((_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.objectType) === 'component') {
+                parentUuid = obj.userData.originalUuid || obj.uuid;
+                break;
+              }
+              obj = obj.parent;
+            }
+            var attachmentId = (_ioDeviceObject$userD = ioDeviceObject.userData) === null || _ioDeviceObject$userD === void 0 ? void 0 : _ioDeviceObject$userD.attachmentId;
+            // When animated meshes are available, outline ONLY them so their
+            // silhouette is isolated and the outline ring is visible around
+            // them specifically (not swallowed by the larger device body).
+            // Fall back to the whole device group when none are registered.
+            var animatedMeshes = attachmentId && parentUuid ? (_this4$managers$ioAni = (_this4$managers = _this4.managers) === null || _this4$managers === void 0 || (_this4$managers = _this4$managers.ioAnimationManager) === null || _this4$managers === void 0 ? void 0 : _this4$managers.getAnimatedMeshes(parentUuid, attachmentId)) !== null && _this4$managers$ioAni !== void 0 ? _this4$managers$ioAni : [] : [];
+            var targets = animatedMeshes.length > 0 ? animatedMeshes : [ioDeviceObject];
+            (_this4$managers2 = _this4.managers) === null || _this4$managers2 === void 0 || (_this4$managers2 = _this4$managers2.ioOutlineManager) === null || _this4$managers2 === void 0 || _this4$managers2.setTargets(targets);
+          }
+          if (!_this4.componentTooltipManager) return;
+          if (isStart) {
+            _this4.componentTooltipManager.startIODeviceDrag(ioDeviceObject);
+          } else {
+            _this4.componentTooltipManager.updateIODeviceDrag(signedDelta);
+          }
+        },
+        onIODeviceDragEnd: function onIODeviceDragEnd(ioDeviceObject) {
+          var _this4$managers3;
+          (_this4$managers3 = _this4.managers) === null || _this4$managers3 === void 0 || (_this4$managers3 = _this4$managers3.ioOutlineManager) === null || _this4$managers3 === void 0 || _this4$managers3.setTargets([]);
+          if (_this4.componentTooltipManager) {
+            _this4.componentTooltipManager.endIODeviceDrag();
+          }
         }
       });