@2112-lab/central-plant 0.2.8 → 0.2.10

package/dist/bundle/index.js

@@ -25783,10 +25783,19 @@ function createPathfindingRequest(startConnector, endConnector) {
   };
 }
 
+/**
+ * The official set of flow-related attribute keys that can be set on a path.
+ * These attributes belong to the full path and are inherited by all segments.
+ *
+ * @type {string[]}
+ */
+var FLOW_ATTRIBUTE_KEYS = ['flowDirection', 'flowSpeed', 'flowTemperature', 'flowMaterial'];
+
 /**
  * Data structure for storing path information with segments.
  * Tracks both computed and declared (manually edited) segments.
- * 
+ * Also stores path-level flow attributes shared by all segments.
+ *
  * Business logic layer - stores coordinate data without Three.js dependencies.
  */
 var PathData = /*#__PURE__*/function () {
@@ -25806,16 +25815,60 @@ var PathData = /*#__PURE__*/function () {
      * @type {Array<{start: {x, y, z}, end: {x, y, z}, isDeclared: boolean, modifiedAt: number|null}>}
      */
     this.segments = [];
+
+    /**
+     * Path-level flow attributes shared by all segments within this path.
+     * Keys must come from FLOW_ATTRIBUTE_KEYS. Values are application-defined.
+     * @type {Record<string, any>}
+     */
+    this.flowAttributes = {};
     this.createdAt = Date.now();
   }
 
   /**
-   * Add a computed segment (from pathfinding algorithm)
-   * 
-   * @param {{x: number, y: number, z: number}} start - Start coordinate
-   * @param {{x: number, y: number, z: number}} end - End coordinate
+   * Set a flow attribute on this path.
+   * All segments within this path inherit the value.
+   *
+   * @param {string} key - Attribute key (should be one of FLOW_ATTRIBUTE_KEYS)
+   * @param {any} value - Attribute value
    */
   return _createClass(PathData, [{
+    key: "setFlowAttribute",
+    value: function setFlowAttribute(key, value) {
+      this.flowAttributes[key] = value;
+    }
+
+    /**
+     * Get the declared value of a flow attribute.
+     * Returns null if the attribute has not been set.
+     *
+     * @param {string} key - Attribute key
+     * @returns {any|null}
+     */
+  }, {
+    key: "getFlowAttribute",
+    value: function getFlowAttribute(key) {
+      return Object.prototype.hasOwnProperty.call(this.flowAttributes, key) ? this.flowAttributes[key] : null;
+    }
+
+    /**
+     * Get a shallow copy of all declared flow attributes.
+     *
+     * @returns {Record<string, any>}
+     */
+  }, {
+    key: "getAllFlowAttributes",
+    value: function getAllFlowAttributes() {
+      return _objectSpread2({}, this.flowAttributes);
+    }
+
+    /**
+     * Add a computed segment (from pathfinding algorithm)
+     * 
+     * @param {{x: number, y: number, z: number}} start - Start coordinate
+     * @param {{x: number, y: number, z: number}} end - End coordinate
+     */
+  }, {
     key: "addSegment",
     value: function addSegment(start, end) {
       this.segments.push({
@@ -25892,6 +25945,7 @@ var PathData = /*#__PURE__*/function () {
         segments: this.segments.map(function (seg) {
           return _objectSpread2({}, seg);
         }),
+        flowAttributes: _objectSpread2({}, this.flowAttributes),
         createdAt: this.createdAt
       };
     }
@@ -25952,6 +26006,7 @@ var PathData = /*#__PURE__*/function () {
       pathData.segments = json.segments.map(function (seg) {
         return _objectSpread2({}, seg);
       });
+      pathData.flowAttributes = json.flowAttributes ? _objectSpread2({}, json.flowAttributes) : {};
       pathData.createdAt = json.createdAt || Date.now();
       return pathData;
     }
@@ -26109,16 +26164,58 @@ var PathRenderingManager = /*#__PURE__*/function (_BaseDisposable) {
       emissive: 0
     });
     _this.registerDisposable(_this._gatewayGeometry, _this._gatewayMaterial);
+
+    /**
+     * Map of pathId -> THREE.Material for per-path color control.
+     * pathId format: "${from}-->${to}"
+     * All segments within a path share the same material instance.
+     * @type {Map<string, THREE.Material>}
+     */
+    _this._pathMaterials = new Map();
     return _this;
   }
 
   /**
-   * Get path colors for visual distinction
-   * @param {number} index - Path index
-   * @returns {string} Hex color string
+   * Dispose all tracked per-path materials and clear the map.
+   * Called at the start of createPipePaths to clean up stale materials.
+   * @private
    */
   _inherits(PathRenderingManager, _BaseDisposable);
   return _createClass(PathRenderingManager, [{
+    key: "_clearPathMaterials",
+    value: function _clearPathMaterials() {
+      this._pathMaterials.forEach(function (mat) {
+        return mat.dispose();
+      });
+      this._pathMaterials.clear();
+    }
+
+    /**
+     * Update the color of all pipe segments belonging to a specific path.
+     * Operates on the shared per-path material — no scene traversal needed.
+     *
+     * @param {string} from - Source connector ID
+     * @param {string} to - Target connector ID
+     * @param {string|number} color - Any value accepted by THREE.Color.set()
+     */
+  }, {
+    key: "updatePathColor",
+    value: function updatePathColor(from, to, color) {
+      var pathId = "".concat(from, "-->").concat(to);
+      var mat = this._pathMaterials.get(pathId);
+      if (mat) {
+        mat.color.set(color);
+      } else {
+        console.warn("\u26A0\uFE0F PathRenderingManager.updatePathColor: no material found for path \"".concat(pathId, "\""));
+      }
+    }
+
+    /**
+     * Get path colors for visual distinction
+     * @param {number} index - Path index
+     * @returns {string} Hex color string
+     */
+  }, {
     key: "getPathColor",
     value: function getPathColor(index) {
       var colors = [
@@ -26273,7 +26370,11 @@ var PathRenderingManager = /*#__PURE__*/function (_BaseDisposable) {
       var globalSegmentIndex = maxExistingIndex + 1;
       console.log("\uD83D\uDD22 Starting segment index at ".concat(globalSegmentIndex, " (max existing: ").concat(maxExistingIndex, ")"));
       var pipeRadius = 0.1;
-      var pipeMaterial = this.createPipeMaterial(crosscubeTextureSet);
+      // Base material created once; per-path materials are cloned from it below.
+      var baseMaterial = this.createPipeMaterial(crosscubeTextureSet);
+
+      // Dispose previous path materials (they were attached to now-removed segments)
+      this._clearPathMaterials();
       paths.forEach(function (pathData, index) {
         if (pathData.path && pathData.path.length >= 2) {
           // Convert path points to Vector3 objects for consistent handling
@@ -26290,6 +26391,12 @@ var PathRenderingManager = /*#__PURE__*/function (_BaseDisposable) {
             }
           });
 
+          // Create a per-path material clone so each path can have its color updated independently.
+          var pathId = "".concat(pathData.from, "-->").concat(pathData.to);
+          var perPathMaterial = baseMaterial.clone();
+          _this3._pathMaterials.set(pathId, perPathMaterial);
+          console.log("\uD83C\uDFA8 Created per-path material for \"".concat(pathId, "\""));
+
           // Check if endpoints are component connectors (from pathfinder result)
           var fromIsComponentConnector = pathData.fromObjectType === 'component-connector';
           var toIsComponentConnector = pathData.toObjectType === 'component-connector';
@@ -26314,13 +26421,13 @@ var PathRenderingManager = /*#__PURE__*/function (_BaseDisposable) {
             var cylinderGeometry = new THREE__namespace.CylinderGeometry(pipeRadius, pipeRadius, length, 16, 1, false);
 
             // Determine material (debug red if rectified and in dev mode)
-            var materialToUse = pipeMaterial;
+            var materialToUse = perPathMaterial;
 
             // Check for dev mode (strict localhost only)
             var isDev = typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
             if (isDev && pathData.rectifiedSegments && pathData.rectifiedSegments.includes(j)) {
-              // Create red debug material by cloning the pipe material to match the look
-              materialToUse = pipeMaterial.clone();
+              // Create red debug material by cloning the per-path material to match the look
+              materialToUse = perPathMaterial.clone();
               materialToUse.color.setHex(0xff0000);
               console.log("\uD83C\uDFA8 Coloring rectified segment ".concat(j, " red"));
             }
@@ -26382,7 +26489,7 @@ var PathRenderingManager = /*#__PURE__*/function (_BaseDisposable) {
             sceneViewer.scene.add(cylinder);
 
             // Add smooth elbow joints only at actual direction changes (not at every point)
-            _this3.createAndAddElbowIfNeeded(pathPoints, j, pipeRadius, pipeMaterial, pathData, index, cylinder // Pass the segment so elbow can be added as a child
+            _this3.createAndAddElbowIfNeeded(pathPoints, j, pipeRadius, perPathMaterial, pathData, index, cylinder // Pass the segment so elbow can be added as a child
             );
           }
         }
@@ -26487,6 +26594,9 @@ var PathRenderingManager = /*#__PURE__*/function (_BaseDisposable) {
     value: function dispose() {
       console.log('🗑️ Disposing PathRenderingManager...');
 
+      // Dispose per-path materials
+      this._clearPathMaterials();
+
       // Call parent dispose to clean up registered resources (shared gateway geometry/material)
       _superPropGet(PathRenderingManager, "dispose", this, 3)([]);
 
@@ -27923,7 +28033,11 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
     key: "_executePathfinding",
     value: (function () {
       var _executePathfinding2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(sceneData, connections) {
-        var _sceneDataCopy$childr, _sceneDataCopy$childr2, _pathfindingResult$pa, _pathfindingResult$pa2;
+        var _this4 = this,
+          _sceneDataCopy$childr,
+          _sceneDataCopy$childr2,
+          _pathfindingResult$pa,
+          _pathfindingResult$pa2;
         var options,
           _options$context,
           context,
@@ -27984,6 +28098,15 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
 
               // Create pipe paths with materials using the paths from pathfinder
               this.renderingManager.createPipePaths(pathfindingResult.paths, this.crosscubeTextureSet);
+
+              // ── Stage 3b: Ensure PathData entries exist for all rendered paths ──────
+              // This preserves any flowAttributes already set on existing entries.
+              if (pathfindingResult.paths) {
+                pathfindingResult.paths.forEach(function (path) {
+                  var pathId = "".concat(path.from, "-->").concat(path.to);
+                  _this4._getOrCreatePathData(pathId, path.from, path.to);
+                });
+              }
               timers.pathRendering = performance.now() - renderStart;
 
               // ── Performance Summary ────────────────────────────────────────────
@@ -28021,6 +28144,26 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
       return this.sceneDataManager.getSimplifiedSceneData();
     }
 
+    /**
+     * Return an existing PathData for pathId from the store, or create and register a new one.
+     * Preserves existing flowAttributes when the entry already exists.
+     *
+     * @param {string} pathId - Canonical path identifier "${from}-->${to}"
+     * @param {string} from - Source connector ID
+     * @param {string} to - Target connector ID
+     * @returns {PathData}
+     * @private
+     */
+  }, {
+    key: "_getOrCreatePathData",
+    value: function _getOrCreatePathData(pathId, from, to) {
+      if (!this.pathDataStore.has(pathId)) {
+        var pd = new PathData(pathId, from, to);
+        this.pathDataStore.set(pathId, pd);
+      }
+      return this.pathDataStore.get(pathId);
+    }
+
     /**
      * Initialize pathfinder and create paths
      */
@@ -28028,12 +28171,33 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
     key: "initializePathfinder",
     value: (function () {
       var _initializePathfinder = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(data, crosscubeTextureSet) {
-        var pathfindingResult;
+        var _this5 = this,
+          _this$sceneViewer;
+        var pathfindingResult, originalToSubPaths, fromEndpointAttrs, flowMgr;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
               this.crosscubeTextureSet = crosscubeTextureSet;
 
+              // ── Pre-load declared flowAttributes from connections JSON ─────────────
+              // This must happen before pathfinding so that PathData entries carrying
+              // flowAttributes are available for visualization right after rendering.
+              if (Array.isArray(data.connections)) {
+                data.connections.forEach(function (conn) {
+                  if (conn.flowAttributes && _typeof(conn.flowAttributes) === 'object') {
+                    var pathId = "".concat(conn.from, "-->").concat(conn.to);
+                    var pd = _this5._getOrCreatePathData(pathId, conn.from, conn.to);
+                    Object.entries(conn.flowAttributes).forEach(function (_ref) {
+                      var _ref2 = _slicedToArray(_ref, 2),
+                        key = _ref2[0],
+                        value = _ref2[1];
+                      pd.setFlowAttribute(key, value);
+                    });
+                    console.log("\uD83C\uDF0A Loaded flowAttributes for path \"".concat(pathId, "\":"), conn.flowAttributes);
+                  }
+                });
+              }
+
               // Use shared pathfinding logic with gateway creation enabled
               _context2.n = 1;
               return this._executePathfinding(data.scene, data.connections, {
@@ -28042,6 +28206,83 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
               });
             case 1:
               pathfindingResult = _context2.v;
+              // ── Propagate flowAttributes to gateway-split rendered paths ──────────
+              // The pathfinder may split a connection A→B through gateway waypoints,
+              // producing sub-paths like A→G and G→B with different pathIds.
+              // We need to copy the original connection's flowAttributes onto every
+              // rendered sub-path entry in pathDataStore so the visualisation can
+              // find them by their rendered pathId.
+              if (Array.isArray(data.connections) && pathfindingResult) {
+                // Pass 1: use the explicit gateway connection mappings to get a precise
+                //         original→sub-path map.
+                originalToSubPaths = new Map(); // origPathId → Set<renderedPathId>
+                if (pathfindingResult.gateways) {
+                  pathfindingResult.gateways.forEach(function (gateway) {
+                    var _ref3 = gateway.connections || {},
+                      removed = _ref3.removed,
+                      added = _ref3.added;
+                    if (!(removed !== null && removed !== void 0 && removed.length) || !(added !== null && added !== void 0 && added.length)) return;
+                    removed.forEach(function (removedConn) {
+                      var origId = "".concat(removedConn.from, "-->").concat(removedConn.to);
+                      if (!originalToSubPaths.has(origId)) originalToSubPaths.set(origId, new Set());
+                      added.forEach(function (addedConn) {
+                        originalToSubPaths.get(origId).add("".concat(addedConn.from, "-->").concat(addedConn.to));
+                      });
+                    });
+                  });
+                }
+                data.connections.forEach(function (conn) {
+                  if (!conn.flowAttributes) return;
+                  var origId = "".concat(conn.from, "-->").concat(conn.to);
+                  var subPathIds = new Set(originalToSubPaths.get(origId) || []);
+                  subPathIds.add(origId); // include the direct path if it wasn't rewired
+
+                  subPathIds.forEach(function (subPathId) {
+                    var pd = _this5.pathDataStore.get(subPathId);
+                    if (pd && Object.keys(pd.flowAttributes).length === 0) {
+                      Object.entries(conn.flowAttributes).forEach(function (_ref4) {
+                        var _ref5 = _slicedToArray(_ref4, 2),
+                          key = _ref5[0],
+                          value = _ref5[1];
+                        pd.setFlowAttribute(key, value);
+                      });
+                      console.log("\uD83C\uDF0A Propagated flowAttributes to sub-path \"".concat(subPathId, "\" from \"").concat(origId, "\""));
+                    }
+                  });
+                });
+
+                // Pass 2: endpoint fallback for any rendered path still missing attributes
+                // (covers Gateway→Gateway intermediate segments not captured by gateway.connections.added)
+                fromEndpointAttrs = new Map(); // connectorId → flowAttributes
+                data.connections.forEach(function (conn) {
+                  if (conn.flowAttributes && !fromEndpointAttrs.has(conn.from)) {
+                    fromEndpointAttrs.set(conn.from, conn.flowAttributes);
+                  }
+                });
+                this.pathDataStore.forEach(function (pd, pathId) {
+                  if (Object.keys(pd.flowAttributes).length > 0) return;
+                  var sepIdx = pathId.indexOf('-->');
+                  if (sepIdx === -1) return;
+                  var from = pathId.slice(0, sepIdx);
+                  var attrs = fromEndpointAttrs.get(from);
+                  if (attrs) {
+                    Object.entries(attrs).forEach(function (_ref6) {
+                      var _ref7 = _slicedToArray(_ref6, 2),
+                        key = _ref7[0],
+                        value = _ref7[1];
+                      return pd.setFlowAttribute(key, value);
+                    });
+                    console.log("\uD83C\uDF0A Endpoint-matched flowAttributes for path \"".concat(pathId, "\""));
+                  }
+                });
+              }
+
+              // ── Apply flow visualizations now that paths are rendered ──────────────
+              flowMgr = (_this$sceneViewer = this.sceneViewer) === null || _this$sceneViewer === void 0 || (_this$sceneViewer = _this$sceneViewer.managers) === null || _this$sceneViewer === void 0 ? void 0 : _this$sceneViewer.pathFlowManager;
+              if (flowMgr) {
+                flowMgr.applyAllVisualizations();
+              }
+
               // Update connections with rewired connections
               if (pathfindingResult.rewiredConnections) {
                 // data.connections = pathfindingResult.rewiredConnections;
@@ -28221,6 +28462,262 @@ var PathfindingManager = /*#__PURE__*/function (_BaseDisposable) {
   }]);
 }(BaseDisposable);
 
+// ── Temperature visualisation constants ────────────────────────────────────
+
+/** Minimum temperature in the colour ramp (maps to pure blue). */
+var TEMP_MIN = 0;
+
+/** Maximum temperature in the colour ramp (maps to pure red). */
+var TEMP_MAX = 100;
+
+/**
+ * Convert a temperature value to a CSS hex colour string using a blue→red HSL
+ * ramp.  Values are clamped to [TEMP_MIN, TEMP_MAX].
+ *
+ * • TEMP_MIN  →  hsl(240, 80%, 50%)  — blue
+ * • TEMP_MAX  →  hsl(0,   80%, 50%)  — red
+ *
+ * @param {number} temp
+ * @returns {string} CSS hex colour string e.g. '#2255cc'
+ */
+function temperatureToColor(temp) {
+  var clamped = Math.max(TEMP_MIN, Math.min(TEMP_MAX, temp));
+  var t = (clamped - TEMP_MIN) / (TEMP_MAX - TEMP_MIN); // 0 (cold) → 1 (hot)
+  // Map t=0 → hue 240 (blue), t=1 → hue 0 (red)
+  var hue = Math.round(240 - t * 240);
+  return "hsl(".concat(hue, ", 80%, 50%)");
+}
+
+// ── PathFlowManager ─────────────────────────────────────────────────────────
+
+var PathFlowManager = /*#__PURE__*/function (_BaseDisposable) {
+  /**
+   * @param {Object} sceneViewer - The central sceneViewer hub
+   */
+  function PathFlowManager(sceneViewer) {
+    var _this;
+    _classCallCheck(this, PathFlowManager);
+    _this = _callSuper(this, PathFlowManager);
+    _this.sceneViewer = sceneViewer;
+
+    /**
+     * Runtime-only attribute overrides.
+     * Map<pathId, Record<attributeKey, value>>
+     * Cleared when the session ends or resetDerived() is called.
+     * @type {Map<string, Record<string, any>>}
+     */
+    _this._derivedStore = new Map();
+    return _this;
+  }
+
+  // ── Public API — attribute write ──────────────────────────────────────────
+
+  /**
+   * Set a declared (persistent) flow attribute on a path.
+   * The value is stored in PathData and will be serialised with the scene.
+   * Triggers a visual update.
+   *
+   * @param {string} pathId - e.g. "PUMP-1-CONN-1-->CHILLER-1-CONN-2"
+   * @param {string} key    - One of FLOW_ATTRIBUTE_KEYS
+   * @param {any}    value
+   */
+  _inherits(PathFlowManager, _BaseDisposable);
+  return _createClass(PathFlowManager, [{
+    key: "setDeclared",
+    value: function setDeclared(pathId, key, value) {
+      var pd = this._getPathData(pathId);
+      if (!pd) {
+        console.warn("PathFlowManager.setDeclared: no PathData found for \"".concat(pathId, "\""));
+        return;
+      }
+      pd.setFlowAttribute(key, value);
+      this.applyVisualizationForPath(pathId);
+    }
+
+    /**
+     * Set a derived (runtime) flow attribute on a path.
+     * Overrides the declared value during this session but is not persisted.
+     * Triggers a visual update.
+     *
+     * @param {string} pathId
+     * @param {string} key
+     * @param {any}    value
+     */
+  }, {
+    key: "setDerived",
+    value: function setDerived(pathId, key, value) {
+      if (!this._derivedStore.has(pathId)) {
+        this._derivedStore.set(pathId, {});
+      }
+      this._derivedStore.get(pathId)[key] = value;
+      this.applyVisualizationForPath(pathId);
+    }
+
+    /**
+     * Clear derived overrides for one path or all paths, then re-apply
+     * visualizations so that declared values take effect again.
+     *
+     * @param {string} [pathId] - Omit to reset all paths.
+     */
+  }, {
+    key: "resetDerived",
+    value: function resetDerived(pathId) {
+      var _this2 = this;
+      if (pathId !== undefined) {
+        this._derivedStore.delete(pathId);
+        this.applyVisualizationForPath(pathId);
+      } else {
+        var affected = _toConsumableArray(this._derivedStore.keys());
+        this._derivedStore.clear();
+        affected.forEach(function (id) {
+          return _this2.applyVisualizationForPath(id);
+        });
+      }
+    }
+
+    // ── Public API — attribute read ───────────────────────────────────────────
+
+    /**
+     * Resolve the effective value of a single attribute for a path.
+     * Resolution order: derived > declared > null.
+     *
+     * @param {string} pathId
+     * @param {string} key
+     * @returns {any|null}
+     */
+  }, {
+    key: "resolve",
+    value: function resolve(pathId, key) {
+      var derived = this._derivedStore.get(pathId);
+      if (derived && Object.prototype.hasOwnProperty.call(derived, key)) {
+        return derived[key];
+      }
+      var pd = this._getPathData(pathId);
+      if (pd) {
+        return pd.getFlowAttribute(key);
+      }
+      return null;
+    }
+
+    /**
+     * Resolve all four flow attributes for a path as a plain object.
+     * Each key is either the effective value or null if unset.
+     *
+     * @param {string} pathId
+     * @returns {{ flowDirection: any, flowSpeed: any, flowTemperature: any, flowMaterial: any }}
+     */
+  }, {
+    key: "resolveAll",
+    value: function resolveAll(pathId) {
+      var _this3 = this;
+      return Object.fromEntries(FLOW_ATTRIBUTE_KEYS.map(function (key) {
+        return [key, _this3.resolve(pathId, key)];
+      }));
+    }
+
+    // ── Visualization ─────────────────────────────────────────────────────────
+
+    /**
+     * Compute and apply the visual colour for a single path based on its resolved
+     * flow attributes.  Currently maps flowTemperature to a blue→red colour ramp.
+     * No-ops gracefully if the path has no renderable attributes or no pipe
+     * material exists yet.
+     *
+     * @param {string} pathId
+     */
+  }, {
+    key: "applyVisualizationForPath",
+    value: function applyVisualizationForPath(pathId) {
+      var temp = this.resolve(pathId, 'flowTemperature');
+      if (temp === null || temp === undefined) {
+        return; // No temperature declared — leave default pipe color
+      }
+      var color = temperatureToColor(temp);
+      var renderingManager = this._getRenderingManager();
+      if (!renderingManager) return;
+
+      // pathId = "from-->to"; extract the two halves
+      var sepIdx = pathId.indexOf('-->');
+      if (sepIdx === -1) {
+        console.warn("PathFlowManager: malformed pathId \"".concat(pathId, "\""));
+        return;
+      }
+      var from = pathId.slice(0, sepIdx);
+      var to = pathId.slice(sepIdx + 3);
+      renderingManager.updatePathColor(from, to, color);
+      console.log("\uD83C\uDF21\uFE0F PathFlowManager: \"".concat(pathId, "\" \u2192 flowTemperature ").concat(temp, " \u2192 ").concat(color));
+    }
+
+    /**
+     * Apply visualizations for every known path (union of pathDataStore and derived store).
+     * Call this after scene load or after bulk attribute changes.
+     */
+  }, {
+    key: "applyAllVisualizations",
+    value: function applyAllVisualizations() {
+      var _this4 = this;
+      var pathIds = new Set();
+      var pfMgr = this._getPathfindingManager();
+      if (pfMgr !== null && pfMgr !== void 0 && pfMgr.pathDataStore) {
+        pfMgr.pathDataStore.forEach(function (_, id) {
+          return pathIds.add(id);
+        });
+      }
+      this._derivedStore.forEach(function (_, id) {
+        return pathIds.add(id);
+      });
+      pathIds.forEach(function (id) {
+        return _this4.applyVisualizationForPath(id);
+      });
+      console.log("\uD83C\uDF0A PathFlowManager.applyAllVisualizations: processed ".concat(pathIds.size, " path(s)"));
+    }
+
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this._derivedStore.clear();
+      this.sceneViewer = null;
+      _superPropGet(PathFlowManager, "dispose", this, 3)([]);
+    }
+
+    // ── Private helpers ───────────────────────────────────────────────────────
+
+    /**
+     * @returns {import('../../core/pathfindingData.js').PathData|null}
+     * @private
+     */
+  }, {
+    key: "_getPathData",
+    value: function _getPathData(pathId) {
+      var _this$_getPathfinding, _this$_getPathfinding2;
+      return (_this$_getPathfinding = (_this$_getPathfinding2 = this._getPathfindingManager()) === null || _this$_getPathfinding2 === void 0 || (_this$_getPathfinding2 = _this$_getPathfinding2.pathDataStore) === null || _this$_getPathfinding2 === void 0 ? void 0 : _this$_getPathfinding2.get(pathId)) !== null && _this$_getPathfinding !== void 0 ? _this$_getPathfinding : null;
+    }
+
+    /**
+     * @returns {import('../pathfinding/pathfindingManager.js').PathfindingManager|null}
+     * @private
+     */
+  }, {
+    key: "_getPathfindingManager",
+    value: function _getPathfindingManager() {
+      var _this$sceneViewer$man, _this$sceneViewer;
+      return (_this$sceneViewer$man = (_this$sceneViewer = this.sceneViewer) === null || _this$sceneViewer === void 0 || (_this$sceneViewer = _this$sceneViewer.managers) === null || _this$sceneViewer === void 0 ? void 0 : _this$sceneViewer.pathfindingManager) !== null && _this$sceneViewer$man !== void 0 ? _this$sceneViewer$man : null;
+    }
+
+    /**
+     * @returns {import('../pathfinding/PathRenderingManager.js').PathRenderingManager|null}
+     * @private
+     */
+  }, {
+    key: "_getRenderingManager",
+    value: function _getRenderingManager() {
+      var _this$_getPathfinding3, _this$_getPathfinding4;
+      return (_this$_getPathfinding3 = (_this$_getPathfinding4 = this._getPathfindingManager()) === null || _this$_getPathfinding4 === void 0 ? void 0 : _this$_getPathfinding4.renderingManager) !== null && _this$_getPathfinding3 !== void 0 ? _this$_getPathfinding3 : null;
+    }
+  }]);
+}(BaseDisposable);
+
 var BehaviorManager = /*#__PURE__*/function (_BaseDisposable) {
   function BehaviorManager(sceneViewer) {
     var _this;
@@ -36156,6 +36653,7 @@ var CentralPlantInternals = /*#__PURE__*/function () {
       this.centralPlant.managers.environmentManager = new EnvironmentManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.keyboardControlsManager = new KeyboardControlsManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.pathfindingManager = new PathfindingManager(this.centralPlant.sceneViewer);
+      this.centralPlant.managers.pathFlowManager = new PathFlowManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.behaviorManager = new BehaviorManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.sceneOperationsManager = new SceneOperationsManager(this.centralPlant.sceneViewer);
       this.centralPlant.managers.animationManager = new AnimationManager(this.centralPlant.sceneViewer);
@@ -37318,7 +37816,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.2.8
+   * @version 0.2.10
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.
@@ -40335,7 +40833,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', 'behaviorManager', 'sceneOperationsManager', 'animationManager', 'cameraControlsManager', 'componentDragManager', 'tooltipsManager', 'componentTooltipManager']; // Populate our managers tracking object
+              managerKeys = ['threeJSResourceManager', 'performanceMonitorManager', 'settingsManager', 'sceneExportManager', 'componentManager', 'sceneInitializationManager', 'environmentManager', 'keyboardControlsManager', 'pathfindingManager', 'pathFlowManager', 'behaviorManager', 'sceneOperationsManager', 'animationManager', 'cameraControlsManager', 'componentDragManager', 'tooltipsManager', 'componentTooltipManager']; // Populate our managers tracking object
               managerKeys.forEach(function (key) {
                 if (_this2[key]) {
                   _this2.managers[key] = _this2[key];
@@ -43951,10 +44449,12 @@ exports.ComponentDragManager = ComponentDragManager;
 exports.ComponentManager = ComponentManager;
 exports.ComponentTooltipManager = ComponentTooltipManager;
 exports.EnvironmentManager = EnvironmentManager;
+exports.FLOW_ATTRIBUTE_KEYS = FLOW_ATTRIBUTE_KEYS;
 exports.KeyboardControlsManager = KeyboardControlsManager;
 exports.ModelManager = ModelManager;
 exports.OperationHistoryManager = OperationHistoryManager;
 exports.PathData = PathData;
+exports.PathFlowManager = PathFlowManager;
 exports.PathfindingManager = PathfindingManager;
 exports.PerformanceMonitorManager = PerformanceMonitorManager;
 exports.Rendering2D = rendering2D;