@procaaso/alphinity-ui-components 1.0.3 → 1.0.5

package/dist/index.cjs

@@ -83,6 +83,7 @@ __export(index_exports, {
   useSelection: () => useSelection,
   useSimulation: () => useSimulation,
   useTelemetry: () => useTelemetry,
+  useTelemetryStatus: () => useTelemetryStatus,
   useTheme: () => useTheme,
   useViewBox: () => useViewBox,
   validateDiagram: () => validateDiagram
@@ -1785,35 +1786,10 @@ var ThemeToggle = ({
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
-  "valve-ball": {
-    id: "valve-ball",
-    name: "Ball Valve",
-    category: "valve",
-    viewBox: { x: 0, y: 0, width: 50, height: 50 },
-    ports: [
-      { id: "inlet", x: 0, y: 25, type: "inlet", direction: "in" },
-      { id: "outlet", x: 50, y: 25, type: "outlet", direction: "out" }
-    ],
-    svgContent: `
-      <g>
-        <!-- Valve body -->
-        <rect x="15" y="10" width="20" height="30" fill="#546e7a" stroke="#263238" stroke-width="2" rx="2"/>
-        <!-- Ball indicator -->
-        <circle cx="25" cy="25" r="6" fill="#ffa726" stroke="#e65100" stroke-width="1.5"/>
-        <!-- Inlet/outlet lines -->
-        <line x1="0" y1="25" x2="15" y2="25" stroke="#263238" stroke-width="3" stroke-linecap="round"/>
-        <line x1="35" y1="25" x2="50" y2="25" stroke="#263238" stroke-width="3" stroke-linecap="round"/>
-      </g>
-    `,
-    metadata: {
-      description: "Ball valve for flow control",
-      tags: ["valve", "control", "shutoff"]
-    }
-  },
   "valve-gate": {
     id: "valve-gate",
     name: "Gate Valve (Powered)",
@@ -1826,11 +1802,11 @@ var mockSymbolLibrary = {
     svgContent: `
       <g>
         <!-- Actuator box -->
-        <rect x="16.74" y="0" width="18.02" height="18.02" fill="#edeeef" stroke="#666666" pointer-events="all"/>
+        <rect x="16.74" y="0" width="18.02" height="18.02" fill="var(--symbol-fill, #edeeef)" stroke="var(--symbol-stroke, #666666)" pointer-events="all"/>
         <!-- Actuator stem -->
-        <path d="M 25.75 18.02 L 25.75 36.05" fill="none" stroke="#666666" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 25.75 18.02 L 25.75 36.05" fill="none" stroke="var(--symbol-stroke, #666666)" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
         <!-- Valve body (two triangles forming diamond) -->
-        <path d="M 0 20.6 L 25.75 36.05 L 0 51.5 Z M 51.5 20.6 L 25.75 36.05 L 51.5 51.5 Z" fill="#edeeef" stroke="#666666" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 0 20.6 L 25.75 36.05 L 0 51.5 Z M 51.5 20.6 L 25.75 36.05 L 51.5 51.5 Z" fill="var(--symbol-fill, #edeeef)" stroke="var(--symbol-stroke, #666666)" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
       </g>
     `,
     metadata: {
@@ -1838,84 +1814,1143 @@ var mockSymbolLibrary = {
       tags: ["valve", "gate", "powered", "actuator"]
     }
   },
-  "pump-centrifugal": {
-    id: "pump-centrifugal",
-    name: "Centrifugal Pump",
+  "pump-positive-displacement": {
+    id: "pump-positive-displacement",
+    name: "Positive Displacement Pump",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 80, height: 60 },
+    viewBox: { x: 0, y: 0, width: 56.25, height: 56.25 },
     ports: [
-      { id: "inlet", x: 10, y: 30, type: "inlet", direction: "in" },
-      { id: "outlet", x: 70, y: 30, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 28.125, type: "inlet", direction: "in" },
+      { id: "outlet", x: 56.25, y: 28.125, type: "outlet", direction: "out" }
+    ],
+    svgContent: `
+      <g transform="scale(0.5625)">
+        <!-- Outer circle -->
+        <ellipse 
+          cx="50" 
+          cy="50" 
+          rx="50" 
+          ry="50" 
+          fill="var(--symbol-fill, #edeeef)"
+          stroke="var(--symbol-stroke, rgb(0, 0, 0))"
+          stroke-width="1"
+        />
+        
+        <!-- Diagonal line from top to bottom-right -->
+        <path 
+          d="M 50 0 L 100 50 L 50 100" 
+          fill="none" 
+          stroke="var(--symbol-stroke, rgb(0, 0, 0))"
+          stroke-width="1"
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Center square -->
+        <rect 
+          x="35" 
+          y="35" 
+          width="30" 
+          height="30" 
+          fill="none" 
+          stroke="var(--symbol-stroke, rgb(0, 0, 0))"
+          stroke-width="1"
+        />
+      </g>
+    `,
+    metadata: {
+      description: "Positive displacement pump (ISO standard)",
+      tags: ["pump", "positive-displacement", "iso"]
+    }
+  },
+  "vannefold-bottom": {
+    id: "vannefold-bottom",
+    name: "Vannefold Block (Bottom)",
+    category: "valve",
+    viewBox: { x: -0.5, y: -0.5, width: 88, height: 67.785156 },
+    ports: [
+      { id: "bottom-inlet", x: 0, y: 25, type: "control", direction: "in" },
+      { id: "top-outlet", x: 48, y: 65, type: "control", direction: "out" }
     ],
     svgContent: `
       <g>
-        <!-- Pump casing -->
-        <circle cx="40" cy="30" r="22" fill="#4fc3f7" stroke="#0277bd" stroke-width="2.5"/>
-        <!-- Impeller -->
-        <path d="M 40 30 L 50 20 M 40 30 L 50 40 M 40 30 L 30 40 M 40 30 L 30 20" 
-              stroke="#01579b" stroke-width="2.5" stroke-linecap="round"/>
-        <!-- Center hub -->
-        <circle cx="40" cy="30" r="5" fill="#0277bd" stroke="#01579b" stroke-width="1.5"/>
-        <!-- Inlet pipe -->
-        <line x1="0" y1="30" x2="18" y2="30" stroke="#0277bd" stroke-width="4" stroke-linecap="round"/>
-        <!-- Outlet pipe -->
-        <line x1="62" y1="30" x2="80" y2="30" stroke="#0277bd" stroke-width="4" stroke-linecap="round"/>
+        <!-- Bottom inlet pipe -->
+        <path 
+          d="M 3,29.785156 H 0 v -10 h 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16"
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Top outlet pipe -->
+        <path 
+          d="m 43,49.785156 v -3 h 10 v 3 m -10,14 v 3 h 10 v -3 m -8,-15 v 16 m 6,-16 v 16"
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Main block outer -->
+        <rect 
+          x="7" 
+          y="0" 
+          width="80" 
+          height="59.785156" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Main block inner -->
+        <rect 
+          x="9" 
+          y="2" 
+          width="76" 
+          height="55.785156" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Bolt holes -->
+        <ellipse cx="15" cy="7" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="7" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="7" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="7" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="51.785156" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="51.785156" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="51.785156" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="51.785156" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+      
       </g>
     `,
     metadata: {
-      description: "Centrifugal pump for fluid transfer",
-      tags: ["pump", "centrifugal", "transfer"]
+      description: "Vannefold heat exchanger block with bottom inlet configuration",
+      tags: ["heat-exchanger", "vannefold", "fold", "bottom"]
     }
   },
-  "vessel-tank": {
-    id: "vessel-tank",
-    name: "Storage Tank",
-    category: "vessel",
-    viewBox: { x: 0, y: 0, width: 60, height: 80 },
+  "vannefold-middle": {
+    id: "vannefold-middle",
+    name: "Vannefold Block (Middle)",
+    category: "valve",
+    viewBox: { x: -0.5, y: -0.5, width: 95, height: 53.097656 },
     ports: [
-      { id: "inlet", x: 30, y: 10, type: "inlet", direction: "in" },
-      { id: "outlet", x: 30, y: 70, type: "outlet", direction: "out" }
+      { id: "left-inlet", x: 0, y: 27.3125, type: "control", direction: "in" },
+      { id: "right-outlet", x: 95, y: 27.3125, type: "control", direction: "out" }
     ],
     svgContent: `
       <g>
-        <!-- Tank body -->
-        <rect x="10" y="15" width="40" height="50" fill="#66bb6a" stroke="#2e7d32" stroke-width="2.5" rx="3"/>
-        <!-- Tank bottom (rounded) -->
-        <ellipse cx="30" cy="65" rx="20" ry="8" fill="#66bb6a" stroke="#2e7d32" stroke-width="2.5"/>
-        <!-- Liquid level indicator -->
-        <rect x="12" y="35" width="36" height="28" fill="#4dd0e1" opacity="0.6"/>
-        <!-- Inlet pipe -->
-        <line x1="30" y1="0" x2="30" y2="15" stroke="#2e7d32" stroke-width="3" stroke-linecap="round"/>
-        <!-- Outlet pipe -->
-        <line x1="30" y1="65" x2="30" y2="80" stroke="#2e7d32" stroke-width="3" stroke-linecap="round"/>
+        <!-- Left inlet pipe -->
+        <path 
+          d="M 3,22.3125 H 0 v 10 H 3 m 14,-10 h 3 v 10 h -3 m -15,-8 h 16 m -16,6 h 16"
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Main block outer -->
+        <rect 
+          x="7" 
+          y="0" 
+          width="80" 
+          height="52.097656" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Main block inner -->
+        <rect 
+          x="9" 
+          y="0" 
+          width="76" 
+          height="52.097656" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Bolt holes -->
+        <ellipse cx="15" cy="5.3125" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="5.3125" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="5.3125" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="5.3125" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="47.3125" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="47.3125" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="47.3125" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="47.3125" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
       </g>
     `,
     metadata: {
-      description: "Storage vessel for liquids",
-      tags: ["vessel", "tank", "storage"]
+      description: "Vannefold heat exchanger block with side inlet configuration",
+      tags: ["heat-exchanger", "vannefold", "fold", "middle"]
     }
   },
-  "instrument-indicator": {
-    id: "instrument-indicator",
-    name: "Instrument Indicator",
-    category: "instrument",
-    viewBox: { x: 0, y: 0, width: 40, height: 40 },
+  "vannefold-top": {
+    id: "vannefold-top",
+    name: "Vannefold Block (Top)",
+    category: "valve",
+    viewBox: { x: -0.5, y: -0.5, width: 95, height: 60.785156 },
+    ports: [
+      { id: "bottom-inlet", x: 0, y: 35, type: "control", direction: "in" },
+      { id: "top-outlet", x: 48, y: 0, type: "control", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Bottom inlet pipe -->
+        <path 
+          d="M 3,30 H 0 V 40 H 3 M 17,30 h 3 V 40 H 17 M 2,32 H 18 M 2,38 H 18"
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Main block outer -->
+        <rect 
+          x="7" 
+          y="0" 
+          width="80" 
+          height="59.785156" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Main block inner -->
+        <rect 
+          x="9" 
+          y="2" 
+          width="76" 
+          height="57.785156" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Bolt holes -->
+        <ellipse cx="15" cy="8" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="8" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="8" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="8" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="55" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="55" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="55" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="55" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        
+      </g>
+    `,
+    metadata: {
+      description: "Vannefold heat exchanger block with bottom inlet and top outlet configuration",
+      tags: ["heat-exchanger", "vannefold", "fold", "top"]
+    }
+  },
+  "vannefold-top-top-inlet": {
+    id: "vannefold-top-top-inlet",
+    name: "Vannefold Block (Top, Top Inlet)",
+    category: "valve",
+    viewBox: { x: 0, y: 0, width: 88, height: 67.576004 },
+    ports: [
+      { id: "top-inlet", x: 47, y: 0, type: "control", direction: "in" },
+      { id: "bottom-outlet", x: 0, y: 42, type: "control", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Top inlet pipe flange -->
+        <path 
+          d="M 52,3 V 1.3598666e-8 H 42 V 3 m 10,14 v 3 H 42 V 17 M 50,2 V 18 M 44,2 v 16" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Bottom outlet pipe flange -->
+        <path 
+          d="M 3,36.79085 H 0 v 10 h 3 m 14,-10 h 3 v 10 h -3 m -15,-8 h 16 m -16,6 h 16" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Main block outer -->
+        <rect 
+          x="7" 
+          y="6.7908498" 
+          width="80" 
+          height="59.785156" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Main block inner -->
+        <rect 
+          x="9" 
+          y="8.7908498" 
+          width="76" 
+          height="57.785156" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Bolt holes -->
+        <ellipse cx="15" cy="14.79085" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="14.79085" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="61.79085" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="61.79085" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="14.79085" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="14.79085" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="61.79085" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="79" cy="61.79085" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        
+      </g>
+    `,
+    metadata: {
+      description: "Vannefold heat exchanger block with top inlet and bottom outlet configuration",
+      tags: ["heat-exchanger", "vannefold", "fold", "top", "top-inlet"]
+    }
+  },
+  "vannefold-left": {
+    id: "vannefold-left",
+    name: "Vannefold Block (Left)",
+    category: "valve",
+    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    ports: [
+      { id: "left-inlet", x: 0, y: 41.5, type: "control", direction: "in" },
+      { id: "right-outlet", x: 42, y: 87, type: "control", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Left inlet pipe flange -->
+        <path 
+          d="M 3,46.5 H 2.8789924e-8 v -10 H 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Right outlet pipe flange -->
+        <path 
+          d="m 37,70.5 v -3 h 10 v 3 m -10,14 v 3 h 10 v -3 m -8,-15 v 16 m 6,-16 v 16" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Main block outer -->
+        <rect 
+          x="7" 
+          y="0.5" 
+          width="59.785156" 
+          height="80" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Main block inner -->
+        <rect 
+          x="9" 
+          y="2.5" 
+          width="57.785156" 
+          height="76" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Bolt holes -->
+        <ellipse cx="15" cy="8.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="8.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="62" cy="8.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="62" cy="8.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="72.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="15" cy="72.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="62" cy="72.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="62" cy="72.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        
+    `,
+    metadata: {
+      description: "Vannefold heat exchanger block with left inlet and right outlet, vertical orientation",
+      tags: ["heat-exchanger", "vannefold", "fold", "left", "vertical"]
+    }
+  },
+  "vannefold-right": {
+    id: "vannefold-right",
+    name: "Vannefold Block (Right)",
+    category: "valve",
+    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
     ports: [
-      { id: "signal", x: 20, y: 40, type: "signal", direction: "bi" }
+      { id: "right-inlet", x: 67.785156, y: 41.5, type: "control", direction: "in" },
+      { id: "left-outlet", x: 24.785156, y: 87.5, type: "control", direction: "out" }
     ],
     svgContent: `
       <g>
-        <!-- Instrument circle -->
-        <circle cx="20" cy="20" r="15" fill="#fff" stroke="#616161" stroke-width="2"/>
-        <!-- Inner circle -->
-        <circle cx="20" cy="20" r="12" fill="none" stroke="#616161" stroke-width="1"/>
-        <!-- Signal line -->
-        <line x1="20" y1="35" x2="20" y2="40" stroke="#616161" stroke-width="2" stroke-linecap="round"/>
+        <!-- Right inlet pipe flange -->
+        <path 
+          d="m 63.785156,46.5 h 3 v -10 h -3 m -14,10 h -3 v -10 h 3 m 15,8 h -16 m 16,-6 h -16" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Left outlet pipe flange -->
+        <path 
+          d="m 29.785156,70.5 v -3 h -10 v 3 m 10,14 v 3 h -10 v -3 m 8,-15 v 16 m -6,-16 v 16" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+        />
+        
+        <!-- Main block outer -->
+        <rect 
+          x="0" 
+          y="0.5" 
+          width="59.785156" 
+          height="80" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Main block inner -->
+        <rect 
+          x="0" 
+          y="2.5" 
+          width="57.785156" 
+          height="76" 
+          fill="var(--symbol-fill, #eaeaea)" 
+          stroke="var(--symbol-stroke, #000000)"
+        />
+        
+        <!-- Bolt holes -->
+        <ellipse cx="51.785156" cy="8.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="51.785156" cy="8.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="4.785156" cy="8.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="4.785156" cy="8.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="51.785156" cy="72.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="51.785156" cy="72.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="4.785156" cy="72.5" rx="5" ry="5" fill="#ffffff" stroke="var(--symbol-stroke, #000000)" />
+        <ellipse cx="4.785156" cy="72.5" rx="3" ry="3" fill="none" stroke="var(--symbol-stroke, #000000)" />
+        
+    `,
+    metadata: {
+      description: "Vannefold heat exchanger block with right inlet and left outlet, vertical orientation",
+      tags: ["heat-exchanger", "vannefold", "fold", "right", "vertical"]
+    }
+  },
+  "pixer": {
+    id: "pixer",
+    name: "Pixer",
+    category: "pump",
+    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    ports: [
+      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
+      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
+      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+    ],
+    svgContent: `
+      <g transform="scale(0.196875) translate(-195, -186)">
+        <!-- Top mounting flange -->
+        <rect 
+          width="141.313" 
+          height="9.872" 
+          transform="translate(252.392 185.89)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Motor housing top -->
+        <rect 
+          width="106.614" 
+          height="2.468" 
+          transform="translate(269.742 199.918)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="106.614" 
+          height="5.835" 
+          transform="translate(269.742 202.384)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="106.614" 
+          height="2.468" 
+          transform="translate(269.742 208.222)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Bottom mounting flange -->
+        <rect 
+          width="221.702" 
+          height="2.401" 
+          transform="translate(212.199 395.587)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="221.702" 
+          height="6.269" 
+          transform="translate(212.199 397.988)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="221.702" 
+          height="2.65" 
+          transform="translate(212.199 404.257)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Motor housing transition -->
+        <path 
+          d="M444.7,228.776l17.117,4.1H568.429l17.089-4.085a.032.032,0,0,0,0-.062H444.705a.028.028,0,0,0-.007.046Z" 
+          transform="translate(-192.059 -32.959)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Bottom flange -->
+        <rect 
+          width="256" 
+          height="9.872" 
+          transform="translate(195.05 411.066)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        <path 
+          d="M195.05,1148.286l17.149-4.156H433.9l17.149,4.156Z" 
+          transform="translate(0 -737.221)" 
+          fill="var(--symbol-fill, #e2e2e2)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        
+        <!-- Vessel top cone -->
+        <path 
+          d="M451.05,328.356h-256l74.692-34.946H376.358Z" 
+          transform="translate(0 -82.72)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Main vessel body -->
+        <rect 
+          width="256" 
+          height="59.803" 
+          transform="translate(195.05 245.636)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        <rect 
+          width="256" 
+          height="76.892" 
+          transform="translate(195.05 308.417)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Vessel bottom transitions -->
+        <path 
+          d="M449.265,705.7H196.773l-1.654-1.465a.014.014,0,0,1,0-.023H451.078Z" 
+          transform="translate(-0.049 -398.769)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <path 
+          d="M449.278,710.66H196.793l-1.663,1.462v.016H451.086s.012,0,0-.016Z" 
+          transform="translate(-0.062 -403.731)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <path 
+          d="M433.9,1060.758H212.2L195.05,1050.48h256Z" 
+          transform="translate(0 -665.171)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Agitator blades/impellers (simplified without gradients) -->
+        <ellipse 
+          cx="15.454" 
+          cy="6.096" 
+          rx="15.454" 
+          ry="6.096" 
+          transform="translate(307.486 228.161)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #c0c0c0)"
+        />
+        <ellipse 
+          cx="15.454" 
+          cy="5.3" 
+          rx="15.454" 
+          ry="5.3" 
+          transform="translate(307.486 229.753)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <ellipse 
+          cx="5.174" 
+          cy="15.117" 
+          rx="5.174" 
+          ry="15.117" 
+          transform="translate(367.144 236.079) rotate(-77.61)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M947,380.271s1.631-2.83,8.084-2.235c5.427.5,16.927,2.855,20.574,8.26" 
+          transform="translate(-578.512 -147.764)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        <ellipse 
+          cx="15.117" 
+          cy="5.174" 
+          rx="15.117" 
+          ry="5.174" 
+          transform="translate(247 232.438) rotate(-12.39)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M456.439,380.271s-1.631-2.83-8.073-2.235c-5.43.5-16.93,2.855-20.576,8.26" 
+          transform="translate(-179.058 -147.764)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        <ellipse 
+          cx="1.651" 
+          cy="15.082" 
+          rx="1.651" 
+          ry="15.082" 
+          transform="translate(406.71 230.174) rotate(-68.13)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M1119,375.62a119.876,119.876,0,0,1,26.193,10.419" 
+          transform="translate(-710.84 -145.969)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        <ellipse 
+          cx="15.082" 
+          cy="1.651" 
+          rx="15.082" 
+          ry="1.651" 
+          transform="translate(210.225 238.342) rotate(-21.87)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M293.943,375.62a119.829,119.829,0,0,0-26.193,10.419" 
+          transform="translate(-55.932 -145.969)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+      </g>
+    `,
+    metadata: {
+      description: "Pixer mixer/agitator vessel with top-mounted drive",
+      tags: ["vessel", "mixer", "agitator", "pixer", "tank"]
+    }
+  },
+  "pixer-barb": {
+    id: "pixer-barb",
+    name: "Pixer (Hose Barb)",
+    category: "pump",
+    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    ports: [
+      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
+      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
+      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+    ],
+    svgContent: `
+      <g transform="scale(0.196875) translate(-195, -186)">
+        <!-- Hose barb ridges at top -->
+        <rect 
+          width="20" 
+          height="2" 
+          transform="translate(313 173)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="0.5" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <rect 
+          width="20" 
+          height="2" 
+          transform="translate(313 177)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="0.5" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <rect 
+          width="20" 
+          height="2" 
+          transform="translate(313 181)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="0.5" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        
+        <!-- Taper from barb to motor housing -->
+        <path 
+          d="M 313,183 L 269.742,199.918 L 376.356,199.918 L 333,183 Z" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        
+        <!-- Motor housing top -->
+        <rect 
+          width="106.614" 
+          height="2.468" 
+          transform="translate(269.742 199.918)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="106.614" 
+          height="5.835" 
+          transform="translate(269.742 202.384)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="106.614" 
+          height="2.468" 
+          transform="translate(269.742 208.222)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Bottom mounting flange -->
+        <rect 
+          width="221.702" 
+          height="2.401" 
+          transform="translate(212.199 395.587)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="221.702" 
+          height="6.269" 
+          transform="translate(212.199 397.988)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <rect 
+          width="221.702" 
+          height="2.65" 
+          transform="translate(212.199 404.257)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Bottom flange -->
+        <rect 
+          width="256" 
+          height="9.872" 
+          transform="translate(195.05 411.066)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        <path 
+          d="M195.05,1148.286l17.149-4.156H433.9l17.149,4.156Z" 
+          transform="translate(0 -737.221)" 
+          fill="var(--symbol-fill, #e2e2e2)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        
+        <!-- Vessel top cone -->
+        <path 
+          d="M451.05,328.356h-256l74.692-34.946H376.358Z" 
+          transform="translate(0 -82.72)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Main vessel body -->
+        <rect 
+          width="256" 
+          height="59.803" 
+          transform="translate(195.05 245.636)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        <rect 
+          width="256" 
+          height="76.892" 
+          transform="translate(195.05 308.417)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Vessel bottom transitions -->
+        <path 
+          d="M449.265,705.7H196.773l-1.654-1.465a.014.014,0,0,1,0-.023H451.078Z" 
+          transform="translate(-0.049 -398.769)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <path 
+          d="M449.278,710.66H196.793l-1.663,1.462v.016H451.086s.012,0,0-.016Z" 
+          transform="translate(-0.062 -403.731)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        <path 
+          d="M433.9,1060.758H212.2L195.05,1050.48h256Z" 
+          transform="translate(0 -665.171)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Agitator blades/impellers (simplified without gradients) -->
+        <ellipse 
+          cx="15.454" 
+          cy="6.096" 
+          rx="15.454" 
+          ry="6.096" 
+          transform="translate(307.486 228.161)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #c0c0c0)"
+        />
+        <ellipse 
+          cx="15.454" 
+          cy="5.3" 
+          rx="15.454" 
+          ry="5.3" 
+          transform="translate(307.486 229.753)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <ellipse 
+          cx="5.174" 
+          cy="15.117" 
+          rx="5.174" 
+          ry="15.117" 
+          transform="translate(367.144 236.079) rotate(-77.61)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M947,380.271s1.631-2.83,8.084-2.235c5.427.5,16.927,2.855,20.574,8.26" 
+          transform="translate(-578.512 -147.764)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        <ellipse 
+          cx="15.117" 
+          cy="5.174" 
+          rx="15.117" 
+          ry="5.174" 
+          transform="translate(247 232.438) rotate(-12.39)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M456.439,380.271s-1.631-2.83-8.073-2.235c-5.43.5-16.93,2.855-20.576,8.26" 
+          transform="translate(-179.058 -147.764)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        <ellipse 
+          cx="1.651" 
+          cy="15.082" 
+          rx="1.651" 
+          ry="15.082" 
+          transform="translate(406.71 230.174) rotate(-68.13)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M1119,375.62a119.876,119.876,0,0,1,26.193,10.419" 
+          transform="translate(-710.84 -145.969)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+        <ellipse 
+          cx="15.082" 
+          cy="1.651" 
+          rx="15.082" 
+          ry="1.651" 
+          transform="translate(210.225 238.342) rotate(-21.87)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #d0d0d0)"
+        />
+        <path 
+          d="M293.943,375.62a119.829,119.829,0,0,0-26.193,10.419" 
+          transform="translate(-55.932 -145.969)" 
+          fill="none" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1"
+        />
+      </g>
+    `,
+    metadata: {
+      description: "Pixer mixer/agitator vessel with tapered hose barb connection at top",
+      tags: ["vessel", "mixer", "agitator", "pixer", "tank", "hose-barb"]
+    }
+  },
+  "vessel-balloon": {
+    id: "vessel-balloon",
+    name: "Vessel",
+    category: "vessel",
+    viewBox: { x: 0, y: 0, width: 50.625, height: 91 },
+    ports: [
+      { id: "top", type: "inlet", x: 25.3125, y: 0 },
+      { id: "left", type: "inlet", x: 5, y: 39 },
+      { id: "right", type: "outlet", x: 45.625, y: 39 },
+      { id: "bottom", type: "outlet", x: 25.3125, y: 91 }
+    ],
+    svgContent: `
+      <g transform="scale(0.196875) translate(-195, -100)">
+        <!-- Top opening nozzle -->
+        <rect 
+          width="65" 
+          height="19.5" 
+          transform="translate(290.5, 100)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Transition from nozzle to dome -->
+        <path 
+          d="M 290.5,119.5 L 238,152 L 408,152 L 355.5,119.5 Z" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Upper balloon dome - rounded bulge -->
+        <path 
+          d="M 238,152 C 185,210 150,320 180,395 L 466,395 C 496,320 461,210 408,152 Z" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Tapered vessel body -->
+        <path 
+          d="M 180,395 L 269.742,530 L 376.356,530 L 466,395 Z" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+        
+        <!-- Bottom cone -->
+        <path 
+          d="M 269.742,530 L 280,555 L 366,555 L 376.356,530 Z" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10"
+          stroke-width="1" 
+          fill="var(--symbol-fill, #e0e0e0)"
+        />
+        
+        <!-- Bottom flange matching pixer top dimensions -->
+        <rect 
+          width="141.313" 
+          height="9.872" 
+          transform="translate(252.392, 555)" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-miterlimit="10" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #eaeaea)"
+        />
+      </g>
+    `,
+    metadata: {
+      description: "Balloon-shaped vessel with rounded top and tapered bottom, designed to fit on standard pixer",
+      tags: ["vessel", "storage", "tank", "balloon"]
+    }
+  },
+  "psr-f": {
+    id: "psr-f",
+    name: "PSR F",
+    category: "instrument",
+    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    ports: [
+      { id: "top", type: "signal", x: 28.5, y: 14.25 },
+      { id: "right", type: "signal", x: 42.75, y: 28.5 },
+      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
+      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+    ],
+    svgContent: `
+      <g transform="scale(0.5) translate(28.5, 28.5)">
+        <!-- Circle background -->
+        <ellipse 
+          cx="28.5" 
+          cy="28.5" 
+          rx="28.5" 
+          ry="28.5" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #ffffff)"
+        />
+        
+        <!-- Letter F -->
+        <text 
+          x="28.5" 
+          y="38" 
+          text-anchor="middle" 
+          font-family="'Times New Roman', Georgia, serif" 
+          font-size="34" 
+          font-weight="normal" 
+          font-style="italic" 
+          fill="var(--symbol-stroke, #000000)"
+        >F</text>
       </g>
     `,
     metadata: {
-      description: "Generic instrument indicator",
-      tags: ["instrument", "indicator", "measurement"]
+      description: "PSR F instrument symbol - Flow indicator",
+      tags: ["instrument", "psr", "flow", "indicator"]
+    }
+  },
+  "psr-p": {
+    id: "psr-p",
+    name: "PSR P",
+    category: "instrument",
+    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    ports: [
+      { id: "top", type: "signal", x: 28.5, y: 14.25 },
+      { id: "right", type: "signal", x: 42.75, y: 28.5 },
+      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
+      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+    ],
+    svgContent: `
+      <g transform="scale(0.5) translate(28.5, 28.5)">
+        <!-- Circle background -->
+        <ellipse 
+          cx="28.5" 
+          cy="28.5" 
+          rx="28.5" 
+          ry="28.5" 
+          stroke="var(--symbol-stroke, #000000)" 
+          stroke-width="1" 
+          fill="var(--symbol-fill, #ffffff)"
+        />
+        
+        <!-- Letter P -->
+        <text 
+          x="28.5" 
+          y="38" 
+          text-anchor="middle" 
+          font-family="'Times New Roman', Georgia, serif" 
+          font-size="34" 
+          font-weight="normal" 
+          font-style="italic" 
+          fill="var(--symbol-stroke, #000000)"
+        >P</text>
+      </g>
+    `,
+    metadata: {
+      description: "PSR P instrument symbol - Pressure indicator",
+      tags: ["instrument", "psr", "pressure", "indicator"]
     }
   }
 };
@@ -1995,6 +3030,24 @@ function NodeRenderer({
         `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
       );
     }
+    const getStatusColor = (status) => {
+      switch (status) {
+        case "running":
+          return "#22c55e";
+        // Green
+        case "alarm":
+          return "#ef4444";
+        // Red
+        case "warning":
+          return "#f59e0b";
+        // Orange
+        case "stopped":
+        default:
+          return "#edeeef";
+      }
+    };
+    const fillColor = node.customColors?.fill ?? getStatusColor(node.status);
+    const strokeColor = node.customColors?.stroke ?? "rgb(0, 0, 0)";
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "g",
       {
@@ -2003,6 +3056,11 @@ function NodeRenderer({
         "data-selected": isSelected,
         "data-dragging": isDragging,
         transform: transforms.join(" "),
+        style: {
+          "--symbol-fill": fillColor,
+          "--symbol-stroke": strokeColor,
+          cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default"
+        },
         onClick: (e) => {
           e.stopPropagation();
           onNodeClick?.(node.id, e);
@@ -2022,9 +3080,6 @@ function NodeRenderer({
             onNodeDragStart?.(node.id, e);
           }
         },
-        style: {
-          cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default"
-        },
         children: [
           isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "rect",
@@ -2077,6 +3132,9 @@ function PipeRenderer({
   onPipeClick,
   enableWaypointEditing = false,
   onWaypointDragStart,
+  onWaypointClick,
+  selectedWaypointPipeId,
+  selectedWaypointIndex,
   editingPipeId,
   draggingWaypointIndex,
   waypointDragOffset,
@@ -2097,7 +3155,7 @@ function PipeRenderer({
     });
     const pointsString = displayPoints.map((point) => `${point.x},${point.y}`).join(" ");
     const pipeStyle = pipe.style || {};
-    const stroke = isSelected ? "#3b82f6" : pipeStyle.stroke || "#263238";
+    const stroke = isSelected ? "#3b82f6" : pipeStyle.stroke || "#94a1b8";
     const strokeWidth = isSelected ? (pipeStyle.strokeWidth || 3) + 2 : pipeStyle.strokeWidth || 3;
     const strokeDasharray = pipeStyle.strokeDasharray;
     const opacity = pipeStyle.opacity !== void 0 ? pipeStyle.opacity : 1;
@@ -2146,10 +3204,11 @@ function PipeRenderer({
           ] }),
           displayPoints.map((point, idx) => {
             const isEndpoint = idx === 0 || idx === displayPoints.length - 1;
+            const isSelectedWaypoint = selectedWaypointPipeId === pipe.id && selectedWaypointIndex === idx;
             const isDragging = isEditing && draggingWaypointIndex === idx;
-            const waypointSize = isDragging ? 8 : showEditingControls ? 6 : isSelected ? 3 : 2;
-            const waypointOpacity = isDragging ? 1 : showEditingControls ? 0.9 : isSelected ? 0.8 : 0.5;
-            const waypointColor = isEndpoint && showEditingControls ? "#f59e0b" : isDragging ? "#10b981" : stroke;
+            const waypointSize = isSelectedWaypoint ? 8 : isDragging ? 8 : showEditingControls ? 6 : isSelected ? 3 : 2;
+            const waypointOpacity = isSelectedWaypoint ? 1 : isDragging ? 1 : showEditingControls ? 0.9 : isSelected ? 0.8 : 0.5;
+            const waypointColor = isSelectedWaypoint ? "#3b82f6" : isEndpoint && showEditingControls ? "#f59e0b" : isDragging ? "#10b981" : stroke;
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "circle",
               {
@@ -2165,6 +3224,12 @@ function PipeRenderer({
                   cursor: showEditingControls ? isDragging ? "grabbing" : "grab" : "default"
                 },
                 pointerEvents: showEditingControls ? "all" : "none",
+                onClick: (e) => {
+                  if (showEditingControls) {
+                    e.stopPropagation();
+                    onWaypointClick?.(pipe.id, idx);
+                  }
+                },
                 onMouseDown: (e) => {
                   if (showEditingControls) {
                     e.stopPropagation();
@@ -2241,7 +3306,13 @@ function PipeRenderer({
 
 // src/components/PIDCanvas/DataOverlay.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function DataOverlay({ nodeId, x, y, telemetry }) {
+function DataOverlay({
+  nodeId,
+  x,
+  y,
+  telemetry,
+  scale = 1
+}) {
   const { value, display, history } = telemetry;
   const showValue = display?.showValue ?? true;
   const showStatus = display?.showStatus ?? true;
@@ -2281,9 +3352,9 @@ function DataOverlay({ nodeId, x, y, telemetry }) {
   const displayText = value.unit ? `${formattedValue} ${value.unit}` : formattedValue;
   const sparklinePath = (() => {
     if (!showSparkline || !history || history.length < 2) return "";
-    const width = 70;
-    const height = 20;
-    const padding = 5;
+    const width = 70 * scale;
+    const height = 20 * scale;
+    const padding = 5 * scale;
     const effectiveWidth = width - padding * 2;
     const effectiveHeight = height - padding * 2;
     const min = Math.min(...history);
@@ -2297,21 +3368,22 @@ function DataOverlay({ nodeId, x, y, telemetry }) {
     return `M ${points.join(" L ")}`;
   })();
   const hasSparkline = showSparkline && sparklinePath;
-  const overlayHeight = label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22;
+  const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale;
+  const overlayWidth = 80 * scale;
   const displayX = x + offsetX;
   const displayY = y + offsetY;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "rect",
       {
-        x: displayX - 40,
-        y: displayY - 25,
-        width: "80",
+        x: displayX - overlayWidth / 2,
+        y: displayY - 25 * scale,
+        width: overlayWidth,
         height: overlayHeight,
-        rx: "4",
+        rx: 4 * scale,
         fill: colors.bg,
         stroke: colors.border,
-        strokeWidth: "1",
+        strokeWidth: 1 * scale,
         opacity: "0.95",
         filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
       }
@@ -2320,9 +3392,9 @@ function DataOverlay({ nodeId, x, y, telemetry }) {
       "text",
       {
         x: displayX,
-        y: displayY - 15,
+        y: displayY - 15 * scale,
         textAnchor: "middle",
-        fontSize: "8",
+        fontSize: 8 * scale,
         fontWeight: "600",
         fill: finalTextColor,
         opacity: "0.9",
@@ -2333,31 +3405,41 @@ function DataOverlay({ nodeId, x, y, telemetry }) {
       "text",
       {
         x: displayX,
-        y: label ? displayY - 3 : displayY - 9,
+        y: label ? displayY - 3 * scale : displayY - 9 * scale,
         textAnchor: "middle",
-        fontSize: "11",
+        fontSize: 11 * scale,
         fontWeight: "700",
         fill: finalTextColor,
         letterSpacing: "0.02em",
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: displayX + 35, cy: displayY - 18, r: "3", fill: finalTextColor, opacity: "0.9", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "animate",
+    showStatus && value.status !== "normal" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "circle",
       {
-        attributeName: "opacity",
-        values: "0.9;0.3;0.9",
-        dur: "1.5s",
-        repeatCount: "indefinite"
+        cx: displayX + 35 * scale,
+        cy: displayY - 18 * scale,
+        r: 3 * scale,
+        fill: finalTextColor,
+        opacity: "0.9",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            values: "0.9;0.3;0.9",
+            dur: "1.5s",
+            repeatCount: "indefinite"
+          }
+        )
       }
-    ) }),
+    ),
     value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "text",
       {
         x: displayX,
-        y: displayY + 5,
+        y: displayY + 5 * scale,
         textAnchor: "middle",
-        fontSize: "7",
+        fontSize: 7 * scale,
         fontWeight: "500",
         fill: finalTextColor,
         opacity: "0.7",
@@ -2368,13 +3450,13 @@ function DataOverlay({ nodeId, x, y, telemetry }) {
         ]
       }
     ),
-    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { transform: `translate(${displayX - 35}, ${displayY + (label ? 5 : 0)})`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    hasSparkline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { transform: `translate(${displayX - 35 * scale}, ${displayY + (label ? 5 : 0) * scale})`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "path",
       {
         d: sparklinePath,
         fill: "none",
         stroke: sparklineColor || finalTextColor,
-        strokeWidth: "1.5",
+        strokeWidth: 1.5 * scale,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         opacity: "0.9"
@@ -2383,8 +3465,145 @@ function DataOverlay({ nodeId, x, y, telemetry }) {
   ] });
 }
 
-// src/diagram/hooks/useViewBox.ts
+// src/components/PIDCanvas/PositionPanel.tsx
 var import_react8 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function PositionPanel({
+  selectedNode,
+  selectedWaypoint,
+  onPositionChange,
+  onWaypointPositionChange,
+  position = "top-right"
+}) {
+  const [x, setX] = (0, import_react8.useState)("");
+  const [y, setY] = (0, import_react8.useState)("");
+  (0, import_react8.useEffect)(() => {
+    if (selectedNode) {
+      setX(selectedNode.transform.x.toFixed(2));
+      setY(selectedNode.transform.y.toFixed(2));
+    } else if (selectedWaypoint) {
+      setX(selectedWaypoint.position.x.toFixed(2));
+      setY(selectedWaypoint.position.y.toFixed(2));
+    }
+  }, [selectedNode, selectedWaypoint]);
+  if (!selectedNode && !selectedWaypoint) {
+    return null;
+  }
+  const handleXChange = (value) => {
+    setX(value);
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+      if (selectedNode && onPositionChange) {
+        onPositionChange(selectedNode.id, numValue, selectedNode.transform.y);
+      } else if (selectedWaypoint && onWaypointPositionChange) {
+        onWaypointPositionChange(
+          selectedWaypoint.pipeId,
+          selectedWaypoint.pointIndex,
+          numValue,
+          selectedWaypoint.position.y
+        );
+      }
+    }
+  };
+  const handleYChange = (value) => {
+    setY(value);
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+      if (selectedNode && onPositionChange) {
+        onPositionChange(selectedNode.id, selectedNode.transform.x, numValue);
+      } else if (selectedWaypoint && onWaypointPositionChange) {
+        onWaypointPositionChange(
+          selectedWaypoint.pipeId,
+          selectedWaypoint.pointIndex,
+          selectedWaypoint.position.x,
+          numValue
+        );
+      }
+    }
+  };
+  const handleBlur = () => {
+    if (selectedNode) {
+      setX(selectedNode.transform.x.toFixed(2));
+      setY(selectedNode.transform.y.toFixed(2));
+    } else if (selectedWaypoint) {
+      setX(selectedWaypoint.position.x.toFixed(2));
+      setY(selectedWaypoint.position.y.toFixed(2));
+    }
+  };
+  const positionStyles = {
+    "top-left": { top: 10, left: 10 },
+    "top-right": { top: 10, right: 10 },
+    "bottom-left": { bottom: 10, left: 10 },
+    "bottom-right": { bottom: 10, right: 10 }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        ...positionStyles[position],
+        backgroundColor: "white",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        padding: "12px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+        zIndex: 1e3,
+        minWidth: "180px",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginBottom: "8px", fontWeight: 600, color: "#333" }, children: "Position" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: { width: "16px", color: "#666" }, children: "X:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "input",
+              {
+                type: "number",
+                value: x,
+                onChange: (e) => handleXChange(e.target.value),
+                onBlur: handleBlur,
+                style: {
+                  flex: 1,
+                  padding: "4px 8px",
+                  border: "1px solid #ddd",
+                  borderRadius: "3px",
+                  fontSize: "13px"
+                },
+                step: "1"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: { width: "16px", color: "#666" }, children: "Y:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "input",
+              {
+                type: "number",
+                value: y,
+                onChange: (e) => handleYChange(e.target.value),
+                onBlur: handleBlur,
+                style: {
+                  flex: 1,
+                  padding: "4px 8px",
+                  border: "1px solid #ddd",
+                  borderRadius: "3px",
+                  fontSize: "13px"
+                },
+                step: "1"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginTop: "8px", fontSize: "11px", color: "#888" }, children: "Use arrow keys to nudge (\xB11px)" })
+      ]
+    }
+  );
+}
+
+// src/diagram/hooks/useViewBox.ts
+var import_react9 = require("react");
 function useViewBox(options) {
   const {
     initialViewBox,
@@ -2395,16 +3614,16 @@ function useViewBox(options) {
     zoomSensitivity = 1e-3,
     allowLeftClickPan = true
   } = options;
-  const [viewBox, setViewBox] = (0, import_react8.useState)(initialViewBox);
-  const svgRef = (0, import_react8.useRef)(null);
-  const isPanningRef = (0, import_react8.useRef)(false);
-  const lastMousePosRef = (0, import_react8.useRef)({ x: 0, y: 0 });
-  const spaceKeyDownRef = (0, import_react8.useRef)(false);
-  const lastTouchDistanceRef = (0, import_react8.useRef)(null);
-  const resetViewBox = (0, import_react8.useCallback)(() => {
+  const [viewBox, setViewBox] = (0, import_react9.useState)(initialViewBox);
+  const svgRef = (0, import_react9.useRef)(null);
+  const isPanningRef = (0, import_react9.useRef)(false);
+  const lastMousePosRef = (0, import_react9.useRef)({ x: 0, y: 0 });
+  const spaceKeyDownRef = (0, import_react9.useRef)(false);
+  const lastTouchDistanceRef = (0, import_react9.useRef)(null);
+  const resetViewBox = (0, import_react9.useCallback)(() => {
     setViewBox(initialViewBox);
   }, [initialViewBox]);
-  const zoomIn = (0, import_react8.useCallback)(() => {
+  const zoomIn = (0, import_react9.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.min(1 / minZoom, currentZoom * 1.25);
@@ -2421,7 +3640,7 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, minZoom]);
-  const zoomOut = (0, import_react8.useCallback)(() => {
+  const zoomOut = (0, import_react9.useCallback)(() => {
     setViewBox((prev) => {
       const currentZoom = initialViewBox.width / prev.width;
       const newZoom = Math.max(1 / maxZoom, currentZoom * 0.8);
@@ -2438,7 +3657,35 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
-  (0, import_react8.useEffect)(() => {
+  const fitToContent = (0, import_react9.useCallback)((bounds, padding = 50) => {
+    const contentWidth = bounds.maxX - bounds.minX;
+    const contentHeight = bounds.maxY - bounds.minY;
+    if (contentWidth === 0 || contentHeight === 0) {
+      return;
+    }
+    const paddedWidth = contentWidth + padding * 2;
+    const paddedHeight = contentHeight + padding * 2;
+    const aspectRatio = initialViewBox.width / initialViewBox.height;
+    const contentAspectRatio = paddedWidth / paddedHeight;
+    let newWidth;
+    let newHeight;
+    if (contentAspectRatio > aspectRatio) {
+      newWidth = paddedWidth;
+      newHeight = paddedWidth / aspectRatio;
+    } else {
+      newHeight = paddedHeight;
+      newWidth = paddedHeight * aspectRatio;
+    }
+    const centerX = bounds.minX + contentWidth / 2;
+    const centerY = bounds.minY + contentHeight / 2;
+    setViewBox({
+      x: centerX - newWidth / 2,
+      y: centerY - newHeight / 2,
+      width: newWidth,
+      height: newHeight
+    });
+  }, [initialViewBox]);
+  (0, import_react9.useEffect)(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
     const handleWheel = (e) => {
@@ -2471,7 +3718,7 @@ function useViewBox(options) {
     svg.addEventListener("wheel", handleWheel, { passive: false });
     return () => svg.removeEventListener("wheel", handleWheel);
   }, [enableZoom, zoomSensitivity, minZoom, initialViewBox]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enablePan || !svgRef.current) return;
     const svg = svgRef.current;
     const handleMouseDown = (e) => {
@@ -2547,7 +3794,7 @@ function useViewBox(options) {
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [enablePan, allowLeftClickPan]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!svgRef.current) return;
     if (!enablePan && !enableZoom) return;
     const svg = svgRef.current;
@@ -2638,7 +3885,7 @@ function useViewBox(options) {
       svg.removeEventListener("touchend", handleTouchEnd);
     };
   }, [enablePan, enableZoom, minZoom, initialViewBox]);
-  const screenToWorld = (0, import_react8.useCallback)(
+  const screenToWorld = (0, import_react9.useCallback)(
     (screenX, screenY) => {
       const svg = svgRef.current;
       if (!svg) return { x: screenX, y: screenY };
@@ -2669,21 +3916,23 @@ function useViewBox(options) {
     resetViewBox,
     zoomIn,
     zoomOut,
+    fitToContent,
+    setViewBox,
     screenToWorld,
     svgRef
   };
 }
 
 // src/diagram/hooks/useSelection.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useSelection(options = {}) {
   const {
     multiSelect = true,
     initialSelection = { selectedNodeIds: /* @__PURE__ */ new Set(), selectedPipeIds: /* @__PURE__ */ new Set() },
     onSelectionChange
   } = options;
-  const [selection, setSelection] = (0, import_react9.useState)(initialSelection);
-  const notifyChange = (0, import_react9.useCallback)(
+  const [selection, setSelection] = (0, import_react10.useState)(initialSelection);
+  const notifyChange = (0, import_react10.useCallback)(
     (newSelection) => {
       if (onSelectionChange) {
         onSelectionChange(newSelection);
@@ -2691,15 +3940,15 @@ function useSelection(options = {}) {
     },
     [onSelectionChange]
   );
-  const isNodeSelected = (0, import_react9.useCallback)(
+  const isNodeSelected = (0, import_react10.useCallback)(
     (nodeId) => selection.selectedNodeIds.has(nodeId),
     [selection.selectedNodeIds]
   );
-  const isPipeSelected = (0, import_react9.useCallback)(
+  const isPipeSelected = (0, import_react10.useCallback)(
     (pipeId) => selection.selectedPipeIds.has(pipeId),
     [selection.selectedPipeIds]
   );
-  const selectNode = (0, import_react9.useCallback)(
+  const selectNode = (0, import_react10.useCallback)(
     (nodeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newNodeIds = new Set(isMultiSelect && multiSelect ? prev.selectedNodeIds : []);
@@ -2718,7 +3967,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const selectPipe = (0, import_react9.useCallback)(
+  const selectPipe = (0, import_react10.useCallback)(
     (pipeId, isMultiSelect = false) => {
       setSelection((prev) => {
         const newPipeIds = new Set(isMultiSelect && multiSelect ? prev.selectedPipeIds : []);
@@ -2737,7 +3986,7 @@ function useSelection(options = {}) {
     },
     [multiSelect, notifyChange]
   );
-  const clearSelection = (0, import_react9.useCallback)(() => {
+  const clearSelection = (0, import_react10.useCallback)(() => {
     const newSelection = {
       selectedNodeIds: /* @__PURE__ */ new Set(),
       selectedPipeIds: /* @__PURE__ */ new Set()
@@ -2745,7 +3994,7 @@ function useSelection(options = {}) {
     setSelection(newSelection);
     notifyChange(newSelection);
   }, [notifyChange]);
-  const selectNodes = (0, import_react9.useCallback)(
+  const selectNodes = (0, import_react10.useCallback)(
     (nodeIds) => {
       const newSelection = {
         selectedNodeIds: new Set(nodeIds),
@@ -2756,7 +4005,7 @@ function useSelection(options = {}) {
     },
     [notifyChange]
   );
-  const selectPipes = (0, import_react9.useCallback)(
+  const selectPipes = (0, import_react10.useCallback)(
     (pipeIds) => {
       const newSelection = {
         selectedNodeIds: /* @__PURE__ */ new Set(),
@@ -2780,23 +4029,23 @@ function useSelection(options = {}) {
 }
 
 // src/diagram/hooks/useTelemetry.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useTelemetry(options = {}) {
   const {
     initialBindings = [],
     onTelemetryChange,
     refreshInterval = 0
   } = options;
-  const [telemetry, setTelemetry] = (0, import_react10.useState)(() => {
+  const [telemetry, setTelemetry] = (0, import_react11.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     initialBindings.forEach((binding) => {
       map.set(binding.nodeId, binding);
     });
     return map;
   });
-  const telemetryRef = (0, import_react10.useRef)(telemetry);
+  const telemetryRef = (0, import_react11.useRef)(telemetry);
   telemetryRef.current = telemetry;
-  const notifyChange = (0, import_react10.useCallback)(
+  const notifyChange = (0, import_react11.useCallback)(
     (newTelemetry) => {
       if (onTelemetryChange) {
         onTelemetryChange(newTelemetry);
@@ -2804,7 +4053,7 @@ function useTelemetry(options = {}) {
     },
     [onTelemetryChange]
   );
-  const updateTelemetry = (0, import_react10.useCallback)(
+  const updateTelemetry = (0, import_react11.useCallback)(
     (nodeId, value) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -2834,7 +4083,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const updateTelemetryBatch = (0, import_react10.useCallback)(
+  const updateTelemetryBatch = (0, import_react11.useCallback)(
     (updates) => {
       setTelemetry((prev) => {
         const newMap = new Map(prev);
@@ -2888,16 +4137,16 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  const getTelemetry = (0, import_react10.useCallback)(
+  const getTelemetry = (0, import_react11.useCallback)(
     (nodeId) => telemetryRef.current.get(nodeId),
     []
   );
-  const clearTelemetry = (0, import_react10.useCallback)(() => {
+  const clearTelemetry = (0, import_react11.useCallback)(() => {
     const newMap = /* @__PURE__ */ new Map();
     setTelemetry(newMap);
     notifyChange(newMap);
   }, [notifyChange]);
-  const setBindings = (0, import_react10.useCallback)(
+  const setBindings = (0, import_react11.useCallback)(
     (bindings) => {
       const newMap = /* @__PURE__ */ new Map();
       bindings.forEach((binding) => {
@@ -2908,7 +4157,7 @@ function useTelemetry(options = {}) {
     },
     [notifyChange]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (refreshInterval <= 0) return;
     const intervalId = setInterval(() => {
       notifyChange(telemetryRef.current);
@@ -2925,8 +4174,50 @@ function useTelemetry(options = {}) {
   };
 }
 
+// src/diagram/hooks/useTelemetryStatus.ts
+var import_react12 = require("react");
+function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
+  const { enabled = true, mapStatus } = options;
+  (0, import_react12.useEffect)(() => {
+    if (!enabled) return;
+    const defaultMapStatus = (telemetryStatus) => {
+      switch (telemetryStatus) {
+        case "normal":
+          return "running";
+        case "warning":
+          return "warning";
+        case "alarm":
+        case "fault":
+          return "alarm";
+        case "off":
+          return "stopped";
+        default:
+          return "stopped";
+      }
+    };
+    const statusMapper = mapStatus || defaultMapStatus;
+    let needsUpdate = false;
+    const updatedNodes = diagram.nodes.map((node) => {
+      const binding = telemetry.get(node.id);
+      if (!binding) return node;
+      const newStatus = statusMapper(binding.value.status);
+      if (node.status !== newStatus) {
+        needsUpdate = true;
+        return { ...node, status: newStatus };
+      }
+      return node;
+    });
+    if (needsUpdate) {
+      setDiagram({
+        ...diagram,
+        nodes: updatedNodes
+      });
+    }
+  }, [telemetry, diagram, setDiagram, enabled, mapStatus]);
+}
+
 // src/diagram/hooks/useDrag.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -2936,23 +4227,23 @@ function useDrag(options = {}) {
     dragThreshold = 3,
     screenToWorld = (x, y) => ({ x, y })
   } = options;
-  const [dragState, setDragState] = (0, import_react11.useState)({
+  const [dragState, setDragState] = (0, import_react13.useState)({
     isDragging: false,
     startPosition: null,
     offset: { x: 0, y: 0 },
     draggedId: null
   });
-  const [isListening, setIsListening] = (0, import_react11.useState)(false);
-  const dragStartRef = (0, import_react11.useRef)(null);
-  const hasMovedRef = (0, import_react11.useRef)(false);
-  const applySnap = (0, import_react11.useCallback)(
+  const [isListening, setIsListening] = (0, import_react13.useState)(false);
+  const dragStartRef = (0, import_react13.useRef)(null);
+  const hasMovedRef = (0, import_react13.useRef)(false);
+  const applySnap = (0, import_react13.useCallback)(
     (value) => {
       if (snapToGrid <= 0) return value;
       return Math.round(value / snapToGrid) * snapToGrid;
     },
     [snapToGrid]
   );
-  const handleMouseMove = (0, import_react11.useCallback)(
+  const handleMouseMove = (0, import_react13.useCallback)(
     (event) => {
       if (!dragStartRef.current) return;
       const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
@@ -2993,7 +4284,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleMouseUp = (0, import_react11.useCallback)(
+  const handleMouseUp = (0, import_react13.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -3030,7 +4321,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  const handleTouchMove = (0, import_react11.useCallback)(
+  const handleTouchMove = (0, import_react13.useCallback)(
     (event) => {
       if (!dragStartRef.current || event.touches.length !== 1) return;
       const touch = event.touches[0];
@@ -3073,7 +4364,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
   );
-  const handleTouchEnd = (0, import_react11.useCallback)(
+  const handleTouchEnd = (0, import_react13.useCallback)(
     (event) => {
       if (!dragStartRef.current || !hasMovedRef.current) {
         dragStartRef.current = null;
@@ -3111,7 +4402,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -3126,7 +4417,7 @@ function useDrag(options = {}) {
       document.removeEventListener("touchcancel", handleTouchEnd);
     };
   }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const startDrag = (0, import_react11.useCallback)(
+  const startDrag = (0, import_react13.useCallback)(
     (id, event, itemPosition) => {
       event.stopPropagation();
       let clientX;
@@ -3156,7 +4447,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld]
   );
-  const cancelDrag = (0, import_react11.useCallback)(() => {
+  const cancelDrag = (0, import_react13.useCallback)(() => {
     dragStartRef.current = null;
     hasMovedRef.current = false;
     setIsListening(false);
@@ -3167,7 +4458,7 @@ function useDrag(options = {}) {
       draggedId: null
     });
   }, []);
-  const isDraggingItem = (0, import_react11.useCallback)(
+  const isDraggingItem = (0, import_react13.useCallback)(
     (id) => dragState.isDragging && dragState.draggedId === id,
     [dragState.isDragging, dragState.draggedId]
   );
@@ -3180,7 +4471,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -3191,7 +4482,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -3300,7 +4591,7 @@ function nodeHasPort(node, portId) {
 }
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function PIDCanvas({
   diagram,
   className = "",
@@ -3323,36 +4614,291 @@ function PIDCanvas({
   onPaste,
   onSymbolDrop,
   onPipeCreated,
+  onMounted,
   telemetry,
   ...props
 }) {
-  const [localDiagram, setLocalDiagram] = (0, import_react13.useState)(diagram);
-  const [dragOverPosition, setDragOverPosition] = (0, import_react13.useState)(null);
-  const [isConnecting, setIsConnecting] = (0, import_react13.useState)(false);
-  const [connectionSource, setConnectionSource] = (0, import_react13.useState)(null);
-  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react13.useState)(null);
-  const [connectionCursor, setConnectionCursor] = (0, import_react13.useState)(null);
-  const [hoveredNode, setHoveredNode] = (0, import_react13.useState)(null);
-  const [hoveredPort, setHoveredPort] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
-    setLocalDiagram(diagram);
+  const [localDiagram, setLocalDiagram] = (0, import_react15.useState)(diagram);
+  const [dragOverPosition, setDragOverPosition] = (0, import_react15.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react15.useState)(false);
+  const [connectionSource, setConnectionSource] = (0, import_react15.useState)(null);
+  const [connectionSourcePort, setConnectionSourcePort] = (0, import_react15.useState)(null);
+  const [connectionCursor, setConnectionCursor] = (0, import_react15.useState)(null);
+  const [hoveredNode, setHoveredNode] = (0, import_react15.useState)(null);
+  const [hoveredPort, setHoveredPort] = (0, import_react15.useState)(null);
+  const [selectedWaypoint, setSelectedWaypoint] = (0, import_react15.useState)(null);
+  const historyStack = (0, import_react15.useRef)([]);
+  const redoStack = (0, import_react15.useRef)([]);
+  const isUndoRedoAction = (0, import_react15.useRef)(false);
+  const isInternalChange = (0, import_react15.useRef)(false);
+  const lastInternalDiagram = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
+    const isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
+    if (isExternal) {
+      setLocalDiagram(diagram);
+      if (!isUndoRedoAction.current) {
+        historyStack.current = [];
+        redoStack.current = [];
+      }
+    }
+    isInternalChange.current = false;
   }, [diagram]);
   const {
     viewBox: controlledViewBox,
     svgRef,
-    screenToWorld
+    screenToWorld,
+    fitToContent: fitToContentViewBox,
+    setViewBox
   } = useViewBox({
     initialViewBox: diagram.viewBox,
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
+  const calculateContentBounds = (0, import_react15.useCallback)(() => {
+    const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
+    if (nodes2.length === 0) {
+      return null;
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    nodes2.forEach((node) => {
+      const symbol = getSymbolDefinition(node.symbolId);
+      if (!symbol) return;
+      const nodeMinX = node.transform.x;
+      const nodeMinY = node.transform.y;
+      const nodeMaxX = node.transform.x + symbol.viewBox.width;
+      const nodeMaxY = node.transform.y + symbol.viewBox.height;
+      minX = Math.min(minX, nodeMinX);
+      minY = Math.min(minY, nodeMinY);
+      maxX = Math.max(maxX, nodeMaxX);
+      maxY = Math.max(maxY, nodeMaxY);
+    });
+    return { minX, minY, maxX, maxY };
+  }, [localDiagram.nodes]);
+  (0, import_react15.useEffect)(() => {
+    if (onMounted) {
+      const controls = {
+        fitToContent: (padding = 50) => {
+          const bounds = calculateContentBounds();
+          if (bounds) {
+            fitToContentViewBox(bounds, padding);
+          }
+        },
+        setZoom: (zoomLevel) => {
+          const centerX = controlledViewBox.x + controlledViewBox.width / 2;
+          const centerY = controlledViewBox.y + controlledViewBox.height / 2;
+          const newWidth = diagram.viewBox.width / zoomLevel;
+          const newHeight = diagram.viewBox.height / zoomLevel;
+          setViewBox({
+            x: centerX - newWidth / 2,
+            y: centerY - newHeight / 2,
+            width: newWidth,
+            height: newHeight
+          });
+        },
+        getZoom: () => {
+          return diagram.viewBox.width / controlledViewBox.width;
+        }
+      };
+      onMounted(controls);
+    }
+  }, [
+    onMounted,
+    calculateContentBounds,
+    fitToContentViewBox,
+    setViewBox,
+    controlledViewBox,
+    diagram.viewBox
+  ]);
   const { selection, selectNode, selectPipe, clearSelection } = useSelection({
     multiSelect: features.multiSelect ?? true,
     onSelectionChange
   });
   const dragEnabled = features.dragNodes ?? false;
   const selectionEnabled = features.selection ?? false;
-  const handleDragEnd = (0, import_react13.useCallback)(
+  const containerRef = (0, import_react15.useRef)(null);
+  const pushToHistory = (0, import_react15.useCallback)((currentDiagram) => {
+    if (isUndoRedoAction.current) return;
+    const snapshot = JSON.parse(JSON.stringify(currentDiagram));
+    historyStack.current.push(snapshot);
+    if (historyStack.current.length > 15) {
+      historyStack.current.shift();
+    }
+    redoStack.current = [];
+  }, []);
+  const undo = (0, import_react15.useCallback)(() => {
+    if (historyStack.current.length === 0) return;
+    isUndoRedoAction.current = true;
+    const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
+    redoStack.current.push(currentSnapshot);
+    const previousState = historyStack.current.pop();
+    isInternalChange.current = true;
+    lastInternalDiagram.current = previousState;
+    setLocalDiagram(previousState);
+    onDiagramChange?.(previousState);
+    setTimeout(() => {
+      isUndoRedoAction.current = false;
+    }, 0);
+  }, [localDiagram, onDiagramChange]);
+  const redo = (0, import_react15.useCallback)(() => {
+    if (redoStack.current.length === 0) return;
+    isUndoRedoAction.current = true;
+    const currentSnapshot = JSON.parse(JSON.stringify(localDiagram));
+    historyStack.current.push(currentSnapshot);
+    const nextState = redoStack.current.pop();
+    isInternalChange.current = true;
+    lastInternalDiagram.current = nextState;
+    setLocalDiagram(nextState);
+    onDiagramChange?.(nextState);
+    setTimeout(() => {
+      isUndoRedoAction.current = false;
+    }, 0);
+  }, [localDiagram, onDiagramChange]);
+  (0, import_react15.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      const isCtrlOrCmd = e.ctrlKey || e.metaKey;
+      if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if (isCtrlOrCmd && e.key === "z" && e.shiftKey) {
+        e.preventDefault();
+        redo();
+      } else if (isCtrlOrCmd && e.key === "y") {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [undo, redo]);
+  (0, import_react15.useEffect)(() => {
+    if (!features.dragNodes) return;
+    const handleKeyDown = (e) => {
+      if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      const nudgeAmount = e.shiftKey ? 10 : 1;
+      let dx = 0;
+      let dy = 0;
+      switch (e.key) {
+        case "ArrowLeft":
+          dx = -nudgeAmount;
+          e.preventDefault();
+          break;
+        case "ArrowRight":
+          dx = nudgeAmount;
+          e.preventDefault();
+          break;
+        case "ArrowUp":
+          dy = -nudgeAmount;
+          e.preventDefault();
+          break;
+        case "ArrowDown":
+          dy = nudgeAmount;
+          e.preventDefault();
+          break;
+        default:
+          return;
+      }
+      if (selectedWaypoint) {
+        pushToHistory(localDiagram);
+        const updatedPipes = localDiagram.pipes.map((pipe) => {
+          if (pipe.id === selectedWaypoint.pipeId) {
+            const updatedRoutePoints = pipe.routePoints.map(
+              (point, idx) => idx === selectedWaypoint.pointIndex ? { x: point.x + dx, y: point.y + dy } : point
+            );
+            return { ...pipe, routePoints: updatedRoutePoints };
+          }
+          return pipe;
+        });
+        const updatedDiagram = { ...localDiagram, pipes: updatedPipes };
+        isInternalChange.current = true;
+        lastInternalDiagram.current = updatedDiagram;
+        setLocalDiagram(updatedDiagram);
+        onDiagramChange?.(updatedDiagram);
+        return;
+      }
+      if (selectionEnabled && selection.selectedNodeIds.size > 0) {
+        pushToHistory(localDiagram);
+        const updatedNodes = localDiagram.nodes.map(
+          (node) => selection.selectedNodeIds.has(node.id) ? {
+            ...node,
+            transform: {
+              ...node.transform,
+              x: node.transform.x + dx,
+              y: node.transform.y + dy
+            }
+          } : node
+        );
+        const updatedDiagram = { ...localDiagram, nodes: updatedNodes };
+        isInternalChange.current = true;
+        lastInternalDiagram.current = updatedDiagram;
+        setLocalDiagram(updatedDiagram);
+        onDiagramChange?.(updatedDiagram);
+        selection.selectedNodeIds.forEach((nodeId) => {
+          const node = updatedNodes.find((n) => n.id === nodeId);
+          if (node) {
+            onNodeMove?.(nodeId, node.transform.x, node.transform.y);
+          }
+        });
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    selectionEnabled,
+    features.dragNodes,
+    selection.selectedNodeIds,
+    selectedWaypoint,
+    localDiagram,
+    onDiagramChange,
+    onNodeMove,
+    pushToHistory
+  ]);
+  const handlePositionChange = (0, import_react15.useCallback)(
+    (nodeId, x, y) => {
+      pushToHistory(localDiagram);
+      const updatedNodes = localDiagram.nodes.map(
+        (node) => node.id === nodeId ? {
+          ...node,
+          transform: {
+            ...node.transform,
+            x,
+            y
+          }
+        } : node
+      );
+      const updatedDiagram = { ...localDiagram, nodes: updatedNodes };
+      isInternalChange.current = true;
+      lastInternalDiagram.current = updatedDiagram;
+      setLocalDiagram(updatedDiagram);
+      onDiagramChange?.(updatedDiagram);
+      onNodeMove?.(nodeId, x, y);
+    },
+    [localDiagram, onDiagramChange, onNodeMove, pushToHistory]
+  );
+  const handleWaypointPositionChange = (0, import_react15.useCallback)(
+    (pipeId, pointIndex, x, y) => {
+      pushToHistory(localDiagram);
+      const updatedPipes = localDiagram.pipes.map((pipe) => {
+        if (pipe.id === pipeId) {
+          const updatedRoutePoints = pipe.routePoints.map(
+            (point, idx) => idx === pointIndex ? { x, y } : point
+          );
+          return { ...pipe, routePoints: updatedRoutePoints };
+        }
+        return pipe;
+      });
+      const updatedDiagram = { ...localDiagram, pipes: updatedPipes };
+      setLocalDiagram(updatedDiagram);
+      onDiagramChange?.(updatedDiagram);
+    },
+    [localDiagram, onDiagramChange, pushToHistory]
+  );
+  const handleDragEnd = (0, import_react15.useCallback)(
     (nodeId, offset, finalPosition) => {
       const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
       if (dragDistance < 2) {
@@ -3361,6 +4907,7 @@ function PIDCanvas({
         }
         return;
       }
+      pushToHistory(localDiagram);
       const updatedNodes = localDiagram.nodes.map(
         (node) => node.id === nodeId ? {
           ...node,
@@ -3398,11 +4945,13 @@ function PIDCanvas({
         nodes: updatedNodes,
         pipes: updatedPipes
       };
+      isInternalChange.current = true;
+      lastInternalDiagram.current = updatedDiagram;
       setLocalDiagram(updatedDiagram);
       onDiagramChange?.(updatedDiagram);
       onNodeMove?.(nodeId, finalPosition.x, finalPosition.y);
     },
-    [localDiagram, onDiagramChange, onNodeMove, selectionEnabled, selectNode]
+    [localDiagram, onDiagramChange, onNodeMove, selectionEnabled, selectNode, pushToHistory]
   );
   const { dragState, startDrag } = useDrag({
     snapToGrid: features.snapToGrid ?? 0,
@@ -3413,6 +4962,7 @@ function PIDCanvas({
     snapToGrid: features.snapToGrid ?? 0,
     screenToWorld,
     onDragEnd: (pipeId, _offset, finalPosition) => {
+      pushToHistory(localDiagram);
       const [actualPipeId, pointIndex] = pipeId.split(":");
       const idx = parseInt(pointIndex, 10);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
@@ -3423,11 +4973,13 @@ function PIDCanvas({
         return { ...pipe, routePoints: updatedRoutePoints };
       });
       const updatedDiagram = { ...localDiagram, pipes: updatedPipes };
+      isInternalChange.current = true;
+      lastInternalDiagram.current = updatedDiagram;
       setLocalDiagram(updatedDiagram);
       onDiagramChange?.(updatedDiagram);
     }
   });
-  const handleNodeDragStart = (0, import_react13.useCallback)(
+  const handleNodeDragStart = (0, import_react15.useCallback)(
     (nodeId, event) => {
       const node = localDiagram.nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -3435,7 +4987,16 @@ function PIDCanvas({
     },
     [localDiagram.nodes, startDrag]
   );
-  const handleWaypointDragStart = (0, import_react13.useCallback)(
+  const handleWaypointClick = (0, import_react15.useCallback)(
+    (pipeId, pointIndex) => {
+      setSelectedWaypoint({ pipeId, pointIndex });
+      if (selectionEnabled) {
+        clearSelection();
+      }
+    },
+    [selectionEnabled, clearSelection]
+  );
+  const handleWaypointDragStart = (0, import_react15.useCallback)(
     (pipeId, pointIndex, event) => {
       const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
       if (!pipe || pointIndex >= pipe.routePoints.length) return;
@@ -3444,8 +5005,9 @@ function PIDCanvas({
     },
     [localDiagram.pipes, startWaypointDrag]
   );
-  const handlePipeSegmentClick = (0, import_react13.useCallback)(
+  const handlePipeSegmentClick = (0, import_react15.useCallback)(
     (pipeId, position, segmentIndex) => {
+      pushToHistory(localDiagram);
       const updatedPipes = localDiagram.pipes.map((pipe) => {
         if (pipe.id !== pipeId) return pipe;
         const updatedRoutePoints = [
@@ -3459,13 +5021,14 @@ function PIDCanvas({
       setLocalDiagram(updatedDiagram);
       onDiagramChange?.(updatedDiagram);
     },
-    [localDiagram, onDiagramChange]
+    [localDiagram, onDiagramChange, pushToHistory]
   );
   const telemetryEnabled = features.telemetry ?? false;
-  const handleDelete = (0, import_react13.useCallback)(() => {
+  const handleDelete = (0, import_react15.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
+    pushToHistory(localDiagram);
     const updatedNodes = localDiagram.nodes.filter((node) => !selectedNodeIds.has(node.id));
     const updatedPipes = localDiagram.pipes.filter(
       (pipe) => !selectedPipeIds.has(pipe.id) && !selectedNodeIds.has(pipe.fromNodeId) && !selectedNodeIds.has(pipe.toNodeId)
@@ -3475,18 +5038,28 @@ function PIDCanvas({
       nodes: updatedNodes,
       pipes: updatedPipes
     };
+    isInternalChange.current = true;
+    lastInternalDiagram.current = updatedDiagram;
     setLocalDiagram(updatedDiagram);
     clearSelection();
     onDiagramChange?.(updatedDiagram);
     onDelete?.(Array.from(selectedNodeIds), Array.from(selectedPipeIds));
-  }, [selection, localDiagram, selectionEnabled, clearSelection, onDiagramChange, onDelete]);
-  const handleCopy = (0, import_react13.useCallback)(() => {
+  }, [
+    selection,
+    localDiagram,
+    selectionEnabled,
+    clearSelection,
+    onDiagramChange,
+    onDelete,
+    pushToHistory
+  ]);
+  const handleCopy = (0, import_react15.useCallback)(() => {
     if (!selectionEnabled) return;
     const { selectedNodeIds, selectedPipeIds } = selection;
     if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
     onItemsCopied?.(Array.from(selectedNodeIds), Array.from(selectedPipeIds));
   }, [selection, selectionEnabled, onItemsCopied]);
-  const handlePaste = (0, import_react13.useCallback)(() => {
+  const handlePaste = (0, import_react15.useCallback)(() => {
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
@@ -3536,12 +5109,17 @@ function PIDCanvas({
     }
     onPipeClick?.(pipeId);
   };
-  const handleCanvasClick = () => {
+  const handleCanvasClick = (e) => {
+    const target = e.target;
+    if (target.closest(".pipe-route-point")) {
+      return;
+    }
     if (selectionEnabled) {
       clearSelection();
     }
+    setSelectedWaypoint(null);
   };
-  const handleDragOver = (0, import_react13.useCallback)(
+  const handleDragOver = (0, import_react15.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -3550,9 +5128,9 @@ function PIDCanvas({
       const worldPos = screenToWorld(event.clientX, event.clientY);
       setDragOverPosition(worldPos);
     },
-    [features.allowSymbolDrop, screenToWorld]
+    [features.allowSymbolDrop, screenToWorld, svgRef]
   );
-  const handleDrop = (0, import_react13.useCallback)(
+  const handleDrop = (0, import_react15.useCallback)(
     (event) => {
       if (!features.allowSymbolDrop) return;
       event.preventDefault();
@@ -3563,12 +5141,12 @@ function PIDCanvas({
       const worldPos = screenToWorld(event.clientX, event.clientY);
       onSymbolDrop?.(symbolId, worldPos);
     },
-    [features.allowSymbolDrop, screenToWorld, onSymbolDrop]
+    [features.allowSymbolDrop, screenToWorld, onSymbolDrop, svgRef]
   );
-  const handleDragLeave = (0, import_react13.useCallback)(() => {
+  const handleDragLeave = (0, import_react15.useCallback)(() => {
     setDragOverPosition(null);
   }, []);
-  const handleMouseMove = (0, import_react13.useCallback)(
+  const handleMouseMove = (0, import_react15.useCallback)(
     (event) => {
       const connectionModeEnabled = features.connectionMode ?? false;
       if (connectionModeEnabled) {
@@ -3587,7 +5165,7 @@ function PIDCanvas({
             const distance = Math.sqrt(
               (worldPos.x - portPos.x) ** 2 + (worldPos.y - portPos.y) ** 2
             );
-            if (distance < 10) {
+            if (distance < 15) {
               foundPort = port.id;
               foundNode = node.id;
               break;
@@ -3604,9 +5182,11 @@ function PIDCanvas({
   const { name } = diagram;
   const viewBox = controlledViewBox;
   const displayDiagram = localDiagram;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const selectedNode = selectionEnabled && selection.selectedNodeIds.size === 1 ? localDiagram.nodes.find((n) => selection.selectedNodeIds.has(n.id)) || null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
+      ref: containerRef,
       className: `pid-canvas ${className}`.trim(),
       style: {
         width: "100%",
@@ -3617,223 +5197,287 @@ function PIDCanvas({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        "svg",
-        {
-          ref: svgRef,
-          width: "100%",
-          height: "100%",
-          viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`,
-          preserveAspectRatio: "xMidYMid meet",
-          style: {
-            display: "block"
-          },
-          "aria-label": `P&ID diagram: ${name}`,
-          role: "img",
-          onClick: handleCanvasClick,
-          onMouseMove: handleMouseMove,
-          onDragOver: handleDragOver,
-          onDrop: handleDrop,
-          onDragLeave: handleDragLeave,
-          children: [
-            features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("defs", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "svg",
+          {
+            ref: svgRef,
+            width: "100%",
+            height: "100%",
+            viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            style: {
+              display: "block"
+            },
+            "aria-label": `P&ID diagram: ${name}`,
+            role: "img",
+            onClick: handleCanvasClick,
+            onMouseMove: handleMouseMove,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onDragLeave: handleDragLeave,
+            children: [
+              features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("defs", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "rect",
+                  {
+                    x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
+                    y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
+                    width: Math.ceil(viewBox.width * 3 / 25) * 25,
+                    height: Math.ceil(viewBox.height * 3 / 25) * 25,
+                    fill: "url(#grid-major)"
+                  }
+                )
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "rect",
                 {
                   x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
                   y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
                   width: Math.ceil(viewBox.width * 3 / 25) * 25,
                   height: Math.ceil(viewBox.height * 3 / 25) * 25,
-                  fill: "url(#grid-major)"
+                  fill: features.backgroundColor ?? "#ffffff"
                 }
-              )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "rect",
-              {
-                x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
-                y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
-                width: Math.ceil(viewBox.width * 3 / 25) * 25,
-                height: Math.ceil(viewBox.height * 3 / 25) * 25,
-                fill: features.backgroundColor ?? "#ffffff"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              PipeRenderer,
-              {
-                pipes: displayDiagram.pipes,
-                selectedPipeIds: selectionEnabled ? selection.selectedPipeIds : void 0,
-                onPipeClick: selectionEnabled ? handlePipeClick : void 0,
-                enableWaypointEditing: false,
-                onWaypointDragStart: void 0,
-                editingPipeId: null,
-                draggingWaypointIndex: null,
-                waypointDragOffset: void 0,
-                onPipeSegmentClick: void 0
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              NodeRenderer,
-              {
-                nodes: displayDiagram.nodes,
-                selectedNodeIds: selectionEnabled ? selection.selectedNodeIds : void 0,
-                onNodeClick: selectionEnabled || features.connectionMode ? handleNodeClick : void 0,
-                onNodeDoubleClick: selectionEnabled ? handleNodeDoubleClick : void 0,
-                enableDrag: dragEnabled && !isConnecting,
-                onNodeDragStart: dragEnabled && !isConnecting ? handleNodeDragStart : void 0,
-                draggingNodeId: dragState.draggedId,
-                dragOffset: dragState.offset
-              }
-            ),
-            (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              PipeRenderer,
-              {
-                pipes: displayDiagram.pipes,
-                selectedPipeIds: selectionEnabled ? selection.selectedPipeIds : void 0,
-                onPipeClick: void 0,
-                enableWaypointEditing: true,
-                onWaypointDragStart: handleWaypointDragStart,
-                editingPipeId: waypointDragState.draggedId?.split(":")[0] || null,
-                draggingWaypointIndex: waypointDragState.draggedId ? parseInt(waypointDragState.draggedId.split(":")[1], 10) : null,
-                waypointDragOffset: waypointDragState.offset,
-                onPipeSegmentClick: handlePipeSegmentClick
-              }
-            ),
-            telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
-              const binding = telemetry.get(node.id);
-              if (!binding) return null;
-              const symbol = getSymbolDefinition(node.symbolId);
-              if (!symbol) return null;
-              const overlayY = node.transform.y - symbol.viewBox.height / 2 - 10;
-              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                DataOverlay,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                PipeRenderer,
                 {
-                  nodeId: node.id,
-                  x: node.transform.x,
-                  y: overlayY,
-                  telemetry: binding
-                },
-                `telemetry-${node.id}`
-              );
-            }) }),
-            dragOverPosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "circle",
-              {
-                cx: dragOverPosition.x,
-                cy: dragOverPosition.y,
-                r: 20,
-                fill: "#3b82f6",
-                opacity: 0.3,
-                stroke: "#3b82f6",
-                strokeWidth: 2,
-                pointerEvents: "none"
-              }
-            ),
-            isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
-              const sourceNode = displayDiagram.nodes.find((n) => n.id === connectionSource);
-              if (!sourceNode) return null;
-              const symbol = getSymbolDefinition(sourceNode.symbolId);
-              let lineStartX = sourceNode.transform.x;
-              let lineStartY = sourceNode.transform.y;
-              if (connectionSourcePort && symbol?.ports) {
-                const port = symbol.ports.find((p) => p.id === connectionSourcePort);
-                if (port) {
-                  const portPos = getPortWorldPosition(sourceNode, connectionSourcePort);
-                  if (portPos) {
-                    lineStartX = portPos.x;
-                    lineStartY = portPos.y;
-                  }
+                  pipes: displayDiagram.pipes,
+                  selectedPipeIds: selectionEnabled ? selection.selectedPipeIds : void 0,
+                  onPipeClick: selectionEnabled ? handlePipeClick : void 0,
+                  enableWaypointEditing: false,
+                  onWaypointDragStart: void 0,
+                  editingPipeId: null,
+                  draggingWaypointIndex: null,
+                  waypointDragOffset: void 0,
+                  onPipeSegmentClick: void 0
                 }
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  "circle",
-                  {
-                    cx: sourceNode.transform.x,
-                    cy: sourceNode.transform.y,
-                    r: 30,
-                    fill: "none",
-                    stroke: "#10b981",
-                    strokeWidth: 3,
-                    opacity: 0.6
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  "line",
-                  {
-                    x1: lineStartX,
-                    y1: lineStartY,
-                    x2: connectionCursor.x,
-                    y2: connectionCursor.y,
-                    stroke: "#10b981",
-                    strokeWidth: 2,
-                    strokeDasharray: "5,5",
-                    opacity: 0.8
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  "circle",
-                  {
-                    cx: connectionCursor.x,
-                    cy: connectionCursor.y,
-                    r: 8,
-                    fill: "#10b981",
-                    opacity: 0.6
-                  }
-                )
-              ] });
-            })() }),
-            features.connectionMode && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { id: "port-indicators", pointerEvents: "none", children: displayDiagram.nodes.map((node) => {
-              const symbol = getSymbolDefinition(node.symbolId);
-              if (!symbol?.ports) return null;
-              return symbol.ports.map((port) => {
-                const portPos = getPortWorldPosition(node, port.id);
-                if (!portPos) return null;
-                const isHovered = hoveredPort === port.id && hoveredNode === node.id;
-                const isSourcePort = node.id === connectionSource && port.id === connectionSourcePort;
-                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  "circle",
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                NodeRenderer,
+                {
+                  nodes: displayDiagram.nodes,
+                  selectedNodeIds: selectionEnabled ? selection.selectedNodeIds : void 0,
+                  onNodeClick: selectionEnabled || features.connectionMode ? handleNodeClick : void 0,
+                  onNodeDoubleClick: selectionEnabled ? handleNodeDoubleClick : void 0,
+                  enableDrag: dragEnabled && !isConnecting,
+                  onNodeDragStart: dragEnabled && !isConnecting ? handleNodeDragStart : void 0,
+                  draggingNodeId: dragState.draggedId,
+                  dragOffset: dragState.offset
+                }
+              ),
+              (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                PipeRenderer,
+                {
+                  pipes: displayDiagram.pipes,
+                  selectedPipeIds: selectionEnabled ? selection.selectedPipeIds : void 0,
+                  onPipeClick: void 0,
+                  enableWaypointEditing: true,
+                  onWaypointClick: handleWaypointClick,
+                  onWaypointDragStart: handleWaypointDragStart,
+                  selectedWaypointPipeId: selectedWaypoint?.pipeId || null,
+                  selectedWaypointIndex: selectedWaypoint?.pointIndex ?? null,
+                  editingPipeId: waypointDragState.draggedId?.split(":")[0] || null,
+                  draggingWaypointIndex: waypointDragState.draggedId ? parseInt(waypointDragState.draggedId.split(":")[1], 10) : null,
+                  waypointDragOffset: waypointDragState.offset,
+                  onPipeSegmentClick: handlePipeSegmentClick
+                }
+              ),
+              telemetryEnabled && telemetry && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
+                const binding = telemetry.get(node.id);
+                if (!binding) return null;
+                const symbol = getSymbolDefinition(node.symbolId);
+                if (!symbol) return null;
+                const overlayX = node.transform.x + symbol.viewBox.width / 2;
+                const overlayY = node.transform.y + symbol.viewBox.height + 50;
+                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  DataOverlay,
                   {
-                    cx: portPos.x,
-                    cy: portPos.y,
-                    r: isHovered ? 8 : 5,
-                    fill: isSourcePort ? "#10b981" : isHovered ? "#3b82f6" : "#94a3b8",
-                    stroke: isSourcePort ? "#059669" : isHovered ? "#2563eb" : "#64748b",
-                    strokeWidth: isHovered || isSourcePort ? 2 : 1,
-                    opacity: isHovered || isSourcePort ? 1 : 0.6
+                    nodeId: node.id,
+                    x: overlayX,
+                    y: overlayY,
+                    telemetry: binding,
+                    scale: features.telemetryScale ?? 1
                   },
-                  `${node.id}-${port.id}`
+                  `telemetry-${node.id}`
                 );
-              });
-            }) })
-          ]
-        }
-      )
+              }) }),
+              dragOverPosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                "circle",
+                {
+                  cx: dragOverPosition.x,
+                  cy: dragOverPosition.y,
+                  r: 20,
+                  fill: "#3b82f6",
+                  opacity: 0.3,
+                  stroke: "#3b82f6",
+                  strokeWidth: 2,
+                  pointerEvents: "none"
+                }
+              ),
+              isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
+                const sourceNode = displayDiagram.nodes.find((n) => n.id === connectionSource);
+                if (!sourceNode) return null;
+                const symbol = getSymbolDefinition(sourceNode.symbolId);
+                let lineStartX = sourceNode.transform.x;
+                let lineStartY = sourceNode.transform.y;
+                if (connectionSourcePort && symbol?.ports) {
+                  const port = symbol.ports.find((p) => p.id === connectionSourcePort);
+                  if (port) {
+                    const portPos = getPortWorldPosition(sourceNode, connectionSourcePort);
+                    if (portPos) {
+                      lineStartX = portPos.x;
+                      lineStartY = portPos.y;
+                    }
+                  }
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "circle",
+                    {
+                      cx: lineStartX,
+                      cy: lineStartY,
+                      r: 30,
+                      fill: "none",
+                      stroke: "#10b981",
+                      strokeWidth: 3,
+                      opacity: 0.6
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "line",
+                    {
+                      x1: lineStartX,
+                      y1: lineStartY,
+                      x2: connectionCursor.x,
+                      y2: connectionCursor.y,
+                      stroke: "#10b981",
+                      strokeWidth: 2,
+                      strokeDasharray: "5,5",
+                      opacity: 0.8
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "circle",
+                    {
+                      cx: connectionCursor.x,
+                      cy: connectionCursor.y,
+                      r: 8,
+                      fill: "#10b981",
+                      opacity: 0.6
+                    }
+                  )
+                ] });
+              })() }),
+              features.connectionMode && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { id: "port-indicators", children: displayDiagram.nodes.map((node) => {
+                const symbol = getSymbolDefinition(node.symbolId);
+                if (!symbol?.ports) return null;
+                return symbol.ports.map((port) => {
+                  const portPos = getPortWorldPosition(node, port.id);
+                  if (!portPos) return null;
+                  const isHovered = hoveredPort === port.id && hoveredNode === node.id;
+                  const isSourcePort = node.id === connectionSource && port.id === connectionSourcePort;
+                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "circle",
+                      {
+                        cx: portPos.x,
+                        cy: portPos.y,
+                        r: 15,
+                        fill: "transparent",
+                        style: { cursor: "pointer" },
+                        pointerEvents: "auto",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          if (isConnecting && connectionSource) {
+                            if (connectionSource !== node.id) {
+                              onPipeCreated?.(
+                                connectionSource,
+                                node.id,
+                                connectionSourcePort || void 0,
+                                port.id
+                              );
+                              setIsConnecting(false);
+                              setConnectionSource(null);
+                              setConnectionSourcePort(null);
+                              setConnectionCursor(null);
+                              setHoveredPort(null);
+                            }
+                          } else {
+                            setIsConnecting(true);
+                            setConnectionSource(node.id);
+                            setConnectionSourcePort(port.id);
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      "circle",
+                      {
+                        cx: portPos.x,
+                        cy: portPos.y,
+                        r: isHovered ? 8 : 5,
+                        fill: isSourcePort ? "#10b981" : isHovered ? "#3b82f6" : "#94a3b8",
+                        stroke: isSourcePort ? "#059669" : isHovered ? "#2563eb" : "#64748b",
+                        strokeWidth: isHovered || isSourcePort ? 2 : 1,
+                        opacity: isHovered || isSourcePort ? 1 : 0.6,
+                        pointerEvents: "none"
+                      }
+                    )
+                  ] }, `${node.id}-${port.id}`);
+                });
+              }) })
+            ]
+          }
+        ),
+        features.dragNodes && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          PositionPanel,
+          {
+            selectedNode,
+            selectedWaypoint: selectedWaypoint ? {
+              pipeId: selectedWaypoint.pipeId,
+              pointIndex: selectedWaypoint.pointIndex,
+              position: localDiagram.pipes.find((p) => p.id === selectedWaypoint.pipeId)?.routePoints[selectedWaypoint.pointIndex] || { x: 0, y: 0 }
+            } : null,
+            onPositionChange: handlePositionChange,
+            onWaypointPositionChange: handleWaypointPositionChange,
+            position: "top-right"
+          }
+        )
+      ]
     }
   );
 }
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
-var import_react14 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function SymbolLibrary({
   className = "",
   onSymbolDragStart,
   showCategories = true,
   categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
 }) {
-  const [selectedCategory, setSelectedCategory] = (0, import_react14.useState)("all");
-  const [searchQuery, setSearchQuery] = (0, import_react14.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react16.useState)("all");
+  const [searchQuery, setSearchQuery] = (0, import_react16.useState)("");
   const symbolIds = getAvailableSymbols();
   const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
+  const categoryMap = {
+    Valves: "valve",
+    Pumps: "pump",
+    Tanks: "vessel",
+    Instruments: "instrument",
+    Displays: "display"
+  };
   const filteredSymbols = allSymbols.filter((symbol) => {
-    const matchesCategory = selectedCategory === "all" || symbol.category === selectedCategory;
+    const actualCategory = categoryMap[selectedCategory] || selectedCategory;
+    const matchesCategory = selectedCategory === "all" || symbol.category === actualCategory;
     const matchesSearch = searchQuery === "" || symbol.name.toLowerCase().includes(searchQuery.toLowerCase()) || symbol.id.toLowerCase().includes(searchQuery.toLowerCase());
     return matchesCategory && matchesSearch;
   });
@@ -3842,9 +5486,9 @@ function SymbolLibrary({
     event.dataTransfer.effectAllowed = "copy";
     onSymbolDragStart?.(symbol.id, event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: styles.title, children: "Symbol Library" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { style: styles.title, children: "Symbol Library" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         type: "text",
@@ -3854,8 +5498,8 @@ function SymbolLibrary({
         style: styles.searchInput
       }
     ) }),
-    showCategories && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: styles.categories, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    showCategories && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: styles.categories, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           onClick: () => setSelectedCategory("all"),
@@ -3866,7 +5510,7 @@ function SymbolLibrary({
           children: "All"
         }
       ),
-      categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           onClick: () => setSelectedCategory(category),
@@ -3879,7 +5523,7 @@ function SymbolLibrary({
         category
       ))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         draggable: true,
@@ -3887,15 +5531,15 @@ function SymbolLibrary({
         style: styles.symbolCard,
         title: symbol.metadata?.description || symbol.name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.symbolPreview, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.symbolPreview, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "svg",
             {
               viewBox: `${symbol.viewBox.x} ${symbol.viewBox.y} ${symbol.viewBox.width} ${symbol.viewBox.height}`,
               style: styles.symbolSvg,
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: styles.symbolName, children: symbol.name })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: styles.symbolName, children: symbol.name })
         ]
       },
       symbol.id
@@ -4004,7 +5648,7 @@ var styles = {
 };
 
 // src/components/NodeConfigPanel/NodeConfigPanel.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function NodeConfigPanel({
   node,
   binding,
@@ -4023,15 +5667,15 @@ function NodeConfigPanel({
     padding: "20px",
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, style: defaultStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className, style: defaultStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
       "Configure: ",
       node.id
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         {
           type: "text",
@@ -4047,10 +5691,10 @@ function NodeConfigPanel({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
             {
               type: "number",
@@ -4071,9 +5715,9 @@ function NodeConfigPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
             {
               type: "number",
@@ -4095,9 +5739,9 @@ function NodeConfigPanel({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "number",
@@ -4117,9 +5761,9 @@ function NodeConfigPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "number",
@@ -4144,9 +5788,9 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
-      !binding ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
+      !binding ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           onClick: () => {
@@ -4189,9 +5833,9 @@ function NodeConfigPanel({
           },
           children: "+ Add Telemetry"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "number",
@@ -4213,8 +5857,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "text",
@@ -4236,8 +5880,8 @@ function NodeConfigPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
             {
               type: "checkbox",
@@ -4259,8 +5903,8 @@ function NodeConfigPanel({
           ),
           "Show Sparkline"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: "12px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginTop: "12px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "label",
             {
               style: {
@@ -4272,10 +5916,10 @@ function NodeConfigPanel({
               children: "Telemetry Position Offset:"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "input",
                 {
                   type: "number",
@@ -4302,9 +5946,9 @@ function NodeConfigPanel({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "input",
                 {
                   type: "number",
@@ -4332,8 +5976,8 @@ function NodeConfigPanel({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: "16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "label",
               {
                 style: {
@@ -4345,10 +5989,10 @@ function NodeConfigPanel({
                 children: "Display Colors:"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "input",
                   {
                     type: "color",
@@ -4374,7 +6018,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "input",
                   {
                     type: "text",
@@ -4404,10 +6048,10 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            binding.display?.showSparkline && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            binding.display?.showSparkline && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "input",
                   {
                     type: "color",
@@ -4433,7 +6077,7 @@ function NodeConfigPanel({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "input",
                   {
                     type: "text",
@@ -4463,9 +6107,9 @@ function NodeConfigPanel({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "input",
                 {
                   type: "text",
@@ -4493,20 +6137,20 @@ function NodeConfigPanel({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
             ] })
           ] }),
           " "
         ] })
       ] })
     ] }),
-    binding && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
+    binding && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
       ["highHigh", "high", "low", "lowLow"].map((key) => {
         const label = key === "highHigh" ? "High-High (\u2265)" : key === "high" ? "High (\u2265)" : key === "low" ? "Low (\u2264)" : "Low-Low (\u2264)";
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "input",
             {
               type: "number",
@@ -4530,8 +6174,8 @@ function NodeConfigPanel({
         ] }, key);
       })
     ] }),
-    binding && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
+    binding && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
       ["normal", "warning", "alarm", "fault", "off"].map((status) => {
         const defaultColors = {
           normal: "#10b981",
@@ -4541,13 +6185,13 @@ function NodeConfigPanel({
           off: "#6b7280"
         };
         const label = status === "normal" ? "Normal" : status === "warning" ? "Warning" : status === "alarm" ? "Alarm" : status === "fault" ? "Fault" : "Off";
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
             label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "input",
               {
                 type: "color",
@@ -4568,7 +6212,7 @@ function NodeConfigPanel({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "input",
               {
                 type: "text",
@@ -4595,7 +6239,7 @@ function NodeConfigPanel({
         ] }, status);
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "button",
       {
         onClick: onRemove,
@@ -4835,7 +6479,7 @@ var DEFAULT_THRESHOLDS = {
 };
 
 // src/diagram/hooks/useSimulation.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -4846,7 +6490,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -4949,6 +6593,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   useSelection,
   useSimulation,
   useTelemetry,
+  useTelemetryStatus,
   useTheme,
   useViewBox,
   validateDiagram