@2112-lab/central-plant 0.3.26 → 0.3.28

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

@@ -35,7 +35,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.3.26
+   * @version 0.3.28
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.
@@ -1069,107 +1069,6 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
       };
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // BEHAVIORS API
-    // ─────────────────────────────────────────────────────────────────────────
-
-    /**
-     * Get all behavior definitions currently stored in the BehaviorManager.
-     * @returns {Array<Object>} Array of behavior definition objects, or empty array.
-     * @example
-     * const behaviors = centralPlant.getBehaviors()
-     * behaviors.forEach(b => console.log(b.id, b.input, b.output))
-     */
-  }, {
-    key: "getBehaviors",
-    value: function getBehaviors() {
-      var _this$sceneViewer4;
-      var bm = (_this$sceneViewer4 = this.sceneViewer) === null || _this$sceneViewer4 === void 0 || (_this$sceneViewer4 = _this$sceneViewer4.managers) === null || _this$sceneViewer4 === void 0 ? void 0 : _this$sceneViewer4.behaviorManager;
-      if (!bm) {
-        console.warn('⚠️ getBehaviors(): BehaviorManager not available');
-        return [];
-      }
-      return bm.getBehaviors();
-    }
-
-    /**
-     * Add a behavior definition at runtime.
-     * @param {Object} behaviorDef - Full behavior definition object (must have unique `id`)
-     * @returns {boolean} True if added successfully, false otherwise
-     * @example
-     * centralPlant.addBehavior({
-     *   id: 'my-behavior',
-     *   input: { attachment: 'device-01', dataPoint: 'boolean-status-01' },
-     *   output: { attachment: 'light-01', child: 'indicator-mesh-01' },
-     *   conditions: [{ when: 'dataPoint.value === true', actions: [{ set: 'material.emissiveIntensity', value: 1.0 }] }]
-     * })
-     */
-  }, {
-    key: "addBehavior",
-    value: function addBehavior(behaviorDef) {
-      var _this$sceneViewer5, _this$sceneViewer6;
-      var bm = (_this$sceneViewer5 = this.sceneViewer) === null || _this$sceneViewer5 === void 0 || (_this$sceneViewer5 = _this$sceneViewer5.managers) === null || _this$sceneViewer5 === void 0 ? void 0 : _this$sceneViewer5.behaviorManager;
-      if (!bm) {
-        console.warn('⚠️ addBehavior(): BehaviorManager not available');
-        return false;
-      }
-      // Also persist into currentSceneData so export includes it
-      if ((_this$sceneViewer6 = this.sceneViewer) !== null && _this$sceneViewer6 !== void 0 && _this$sceneViewer6.currentSceneData) {
-        if (!Array.isArray(this.sceneViewer.currentSceneData.behaviors)) {
-          this.sceneViewer.currentSceneData.behaviors = [];
-        }
-        this.sceneViewer.currentSceneData.behaviors.push(behaviorDef);
-      }
-      return bm.addBehavior(behaviorDef);
-    }
-
-    /**
-     * Remove a behavior definition by id.
-     * @param {string} behaviorId
-     * @returns {boolean} True if removed, false if not found
-     * @example
-     * centralPlant.removeBehavior('my-behavior')
-     */
-  }, {
-    key: "removeBehavior",
-    value: function removeBehavior(behaviorId) {
-      var _this$sceneViewer7, _this$sceneViewer8;
-      var bm = (_this$sceneViewer7 = this.sceneViewer) === null || _this$sceneViewer7 === void 0 || (_this$sceneViewer7 = _this$sceneViewer7.managers) === null || _this$sceneViewer7 === void 0 ? void 0 : _this$sceneViewer7.behaviorManager;
-      if (!bm) {
-        console.warn('⚠️ removeBehavior(): BehaviorManager not available');
-        return false;
-      }
-      // Also remove from currentSceneData
-      if ((_this$sceneViewer8 = this.sceneViewer) !== null && _this$sceneViewer8 !== void 0 && (_this$sceneViewer8 = _this$sceneViewer8.currentSceneData) !== null && _this$sceneViewer8 !== void 0 && _this$sceneViewer8.behaviors) {
-        var idx = this.sceneViewer.currentSceneData.behaviors.findIndex(function (b) {
-          return b.id === behaviorId;
-        });
-        if (idx !== -1) this.sceneViewer.currentSceneData.behaviors.splice(idx, 1);
-      }
-      return bm.removeBehavior(behaviorId);
-    }
-
-    /**
-     * Simulate an IO device state value arriving and trigger any matching behaviors.
-     * Useful for live testing in the UI or for integration with real data feeds.
-     * @param {string} attachmentId - The attachment id of the input io-device
-     * @param {string} stateId      - The state id on that device
-     * @param {*}      value        - The new state value
-     * @example
-     * centralPlant.triggerState('pump-push-button-01', 'power', true)
-     */
-  }, {
-    key: "triggerState",
-    value: function triggerState(attachmentId, stateId, value, parentUuid) {
-      var _this$sceneViewer9;
-      var bm = (_this$sceneViewer9 = this.sceneViewer) === null || _this$sceneViewer9 === void 0 || (_this$sceneViewer9 = _this$sceneViewer9.managers) === null || _this$sceneViewer9 === void 0 ? void 0 : _this$sceneViewer9.behaviorManager;
-      if (!bm) {
-        console.warn('⚠️ triggerState(): BehaviorManager not available');
-        return;
-      }
-      bm.triggerState(attachmentId, stateId, value, parentUuid);
-    }
-
     /**
      * Set the state of an I/O device instance in the Three.js scene.
      *
@@ -1202,15 +1101,9 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "setIoDeviceState",
     value: function setIoDeviceState(attachmentId, stateId, value, parentUuid) {
-      var _this$sceneViewer0, _this$sceneViewer1, _this$sceneViewer10;
-      var bm = (_this$sceneViewer0 = this.sceneViewer) === null || _this$sceneViewer0 === void 0 || (_this$sceneViewer0 = _this$sceneViewer0.managers) === null || _this$sceneViewer0 === void 0 ? void 0 : _this$sceneViewer0.behaviorManager;
-      if (!bm) {
-        console.warn('⚠️ setIoDeviceState(): BehaviorManager not available');
-        return false;
-      }
-
+      var _this$sceneViewer4, _this$sceneViewer5, _this$sceneViewer6;
       // 1. Persist via state adapter if one has been configured
-      var stateAdapter = (_this$sceneViewer1 = this.sceneViewer) === null || _this$sceneViewer1 === void 0 || (_this$sceneViewer1 = _this$sceneViewer1.managers) === null || _this$sceneViewer1 === void 0 || (_this$sceneViewer1 = _this$sceneViewer1.componentTooltipManager) === null || _this$sceneViewer1 === void 0 ? void 0 : _this$sceneViewer1._stateAdapter;
+      var stateAdapter = (_this$sceneViewer4 = this.sceneViewer) === null || _this$sceneViewer4 === void 0 || (_this$sceneViewer4 = _this$sceneViewer4.managers) === null || _this$sceneViewer4 === void 0 || (_this$sceneViewer4 = _this$sceneViewer4.componentTooltipManager) === null || _this$sceneViewer4 === void 0 ? void 0 : _this$sceneViewer4._stateAdapter;
       if (stateAdapter !== null && stateAdapter !== void 0 && stateAdapter.setState) {
         var scopedKey = parentUuid ? "".concat(parentUuid, "::").concat(attachmentId) : attachmentId;
         try {
@@ -1220,11 +1113,11 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
         }
       }
 
-      // 2. Apply Three.js behavior changes
-      bm.triggerState(attachmentId, stateId, value, parentUuid);
+      // 2. Apply io-animation changes
+      (_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, stateId, value, parentUuid);
 
       // 3. Emit event for host apps that don't use the state adapter (e.g. cp3d-viewer)
-      (_this$sceneViewer10 = this.sceneViewer) === null || _this$sceneViewer10 === void 0 || _this$sceneViewer10.emit('io-device-state-changed', {
+      (_this$sceneViewer6 = this.sceneViewer) === null || _this$sceneViewer6 === void 0 || _this$sceneViewer6.emit('io-device-state-changed', {
         attachmentId: attachmentId,
         stateId: stateId,
         value: value,
@@ -1246,8 +1139,8 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
   }, {
     key: "getSceneAttachments",
     value: function getSceneAttachments() {
-      var _this$sceneViewer11;
-      var scene = (_this$sceneViewer11 = this.sceneViewer) === null || _this$sceneViewer11 === void 0 ? void 0 : _this$sceneViewer11.scene;
+      var _this$sceneViewer7;
+      var scene = (_this$sceneViewer7 = this.sceneViewer) === null || _this$sceneViewer7 === void 0 ? void 0 : _this$sceneViewer7.scene;
       if (!scene) return [];
       var results = [];
       scene.traverse(function (obj) {

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

@@ -19,7 +19,6 @@ var environmentManager = require('../managers/environment/environmentManager.js'
 var keyboardControlsManager = require('../managers/controls/keyboardControlsManager.js');
 var pathfindingManager = require('../managers/pathfinding/pathfindingManager.js');
 var PathFlowManager = require('../managers/pathfinding/PathFlowManager.js');
-var BehaviorManager = require('../managers/behaviors/BehaviorManager.js');
 var sceneOperationsManager = require('../managers/scene/sceneOperationsManager.js');
 var animationManager = require('../managers/scene/animationManager.js');
 var cameraControlsManager = require('../managers/controls/cameraControlsManager.js');
@@ -28,8 +27,10 @@ var sceneTooltipsManager = require('../managers/scene/sceneTooltipsManager.js');
 var componentTooltipManager = require('../managers/scene/componentTooltipManager.js');
 var viewport2DManager = require('../managers/scene/viewport2DManager.js');
 var IoAnimationManager = require('../managers/behaviors/IoAnimationManager.js');
+var IoOutlineManager = require('../managers/behaviors/IoOutlineManager.js');
 var nameUtils = require('../utils/nameUtils.js');
 var ioDeviceUtils = require('../utils/ioDeviceUtils.js');
+var boundingBoxUtils = require('../utils/boundingBoxUtils.js');
 var modelPreloader = require('../rendering/modelPreloader.js');
 
 function _interopNamespace(e) {
@@ -167,13 +168,13 @@ var CentralPlantInternals = /*#__PURE__*/function () {
       this.centralPlant.managers.keyboardControlsManager = new keyboardControlsManager.KeyboardControlsManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.pathfindingManager = new pathfindingManager.PathfindingManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.pathFlowManager = new PathFlowManager.PathFlowManager(this.centralPlant.sceneViewer);
-      this.centralPlant.managers.behaviorManager = new BehaviorManager.BehaviorManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.sceneOperationsManager = new sceneOperationsManager.SceneOperationsManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.animationManager = new animationManager.AnimationManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.cameraControlsManager = new cameraControlsManager.CameraControlsManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.componentDragManager = new componentDragManager.ComponentDragManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.viewport2DManager = new viewport2DManager.Viewport2DManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.ioAnimationManager = new IoAnimationManager.IoAnimationManager(this.centralPlant.sceneViewer);
+      this.centralPlant.managers.ioOutlineManager = new IoOutlineManager.IoOutlineManager(this.centralPlant.sceneViewer);
 
       // All managers are now stored in the managers collection and will be attached via attachToComponent()
     }
@@ -944,7 +945,7 @@ var CentralPlantInternals = /*#__PURE__*/function () {
         return false;
       }
       try {
-        var _componentData$childr, _componentData$childr2, _this$centralPlant$sc7, _componentData$childr3, _componentData$defaul;
+        var _componentData$childr, _componentData$childr2, _this$centralPlant$sc7, _componentData$childr3;
         // Generate a unique component ID if not provided
         var componentId = options.customId || this.generateUniqueComponentId(libraryId);
 
@@ -1176,20 +1177,25 @@ var CentralPlantInternals = /*#__PURE__*/function () {
           }
         }
 
-        // Register default behaviors for smart components so the BehaviorManager
-        // responds to tooltip-driven state changes immediately after drop.
-        // (The scene-load path uses _processBehaviors instead, which runs on loadSceneData.)
-        if ((_componentData$defaul = componentData.defaultBehaviors) !== null && _componentData$defaul !== void 0 && _componentData$defaul.length) {
-          var _this$centralPlant$sc9, _som$registerBehavior;
-          var som = (_this$centralPlant$sc9 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc9 === void 0 ? void 0 : _this$centralPlant$sc9.sceneOperationsManager;
-          som === null || som === void 0 || (_som$registerBehavior = som.registerBehaviorsForComponentInstance) === null || _som$registerBehavior === void 0 || _som$registerBehavior.call(som, componentData, componentId);
-        }
-
         // Notify the component manager about the new component
         if (componentManager.registerComponent) {
           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 boundingBoxUtils.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) {
@@ -1243,18 +1249,18 @@ var CentralPlantInternals = /*#__PURE__*/function () {
   }, {
     key: "deleteComponent",
     value: function deleteComponent(componentId) {
-      var _this$centralPlant$sc0;
+      var _this$centralPlant$sc9;
       // Check if component manager is available
-      var componentManager = (_this$centralPlant$sc0 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc0 === void 0 ? void 0 : _this$centralPlant$sc0.componentManager;
+      var componentManager = (_this$centralPlant$sc9 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc9 === void 0 ? void 0 : _this$centralPlant$sc9.componentManager;
       if (!componentManager) {
         console.error('❌ deleteComponent(): Component manager not available');
         return false;
       }
       try {
-        var _this$centralPlant$sc1, _this$centralPlant$sc10, _sceneData$scene2, _sceneData$scene3;
+        var _this$centralPlant$sc0, _this$centralPlant$sc1, _sceneData$scene2, _sceneData$scene3;
         console.log("\uD83D\uDDD1\uFE0F deleteComponent(): Deleting component ".concat(componentId));
-        var threeScene = (_this$centralPlant$sc1 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc1 === void 0 ? void 0 : _this$centralPlant$sc1.scene;
-        var sceneData = (_this$centralPlant$sc10 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc10 === void 0 ? void 0 : _this$centralPlant$sc10.currentSceneData;
+        var threeScene = (_this$centralPlant$sc0 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc0 === void 0 ? void 0 : _this$centralPlant$sc0.scene;
+        var sceneData = (_this$centralPlant$sc1 = this.centralPlant.sceneViewer) === null || _this$centralPlant$sc1 === void 0 ? void 0 : _this$centralPlant$sc1.currentSceneData;
 
         // Step 1: Resolve the actual Three.js UUID from componentId.
         // The UI emits object.name (e.g. "Pump (PUMP-1)") as the selection ID, but

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

@@ -102,7 +102,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', '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];
@@ -290,7 +290,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)
@@ -417,6 +431,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();
+          }
         }
       });
 

package/dist/cjs/src/index.js

@@ -13,7 +13,6 @@ var sceneExportManager = require('./managers/scene/sceneExportManager.js');
 var sceneTooltipsManager = require('./managers/scene/sceneTooltipsManager.js');
 var componentTooltipManager = require('./managers/scene/componentTooltipManager.js');
 var sceneHierarchyManager = require('./managers/scene/sceneHierarchyManager.js');
-var BehaviorManager = require('./managers/behaviors/BehaviorManager.js');
 var IoAnimationManager = require('./managers/behaviors/IoAnimationManager.js');
 var componentManager = require('./managers/components/componentManager.js');
 var animationManager = require('./managers/scene/animationManager.js');
@@ -68,7 +67,6 @@ exports.SceneExportManager = sceneExportManager.SceneExportManager;
 exports.SceneTooltipsManager = sceneTooltipsManager.SceneTooltipsManager;
 exports.ComponentTooltipManager = componentTooltipManager.ComponentTooltipManager;
 exports.SceneHierarchyManager = sceneHierarchyManager.SceneHierarchyManager;
-exports.BehaviorManager = BehaviorManager.BehaviorManager;
 exports.IoAnimationManager = IoAnimationManager.IoAnimationManager;
 exports.ComponentManager = componentManager.ComponentManager;
 exports.AnimationManager = animationManager.AnimationManager;

package/dist/cjs/src/managers/behaviors/IoAnimationManager.js

@@ -243,6 +243,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 _rollupPluginBabelHelpers.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.
@@ -474,7 +494,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));
     }
 
     /**

package/dist/cjs/src/managers/behaviors/IoOutlineManager.js

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