pseudo-states appear to be working + variables only exist within the scope where they are created

src/VisualEditor/ArrowSVG.tsx

@@ -22,11 +22,16 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
       data-uid={uid}
       data-parts="start end" />
 
-    {props.errors.length > 0 && <text className="error" x={(start.x + end.x) / 2 + 5} y={(start.y + end.y) / 2} data-uid={uid} data-parts="start end">{props.errors.join(' ')}</text>}
+    {props.errors.length > 0 && <text
+      className="error"
+      x={(start.x + end.x) / 2 + 5}
+      y={(start.y + end.y) / 2}
+      textAnchor="middle"
+      data-uid={uid}
+      data-parts="start end">{props.errors.join(' ')}</text>}
 
     <path
       className="pathHelper"
-      // markerEnd='url(#arrowEnd)'
       d={`M ${start.x} ${start.y}
             ${arcOrLine}
             ${end.x} ${end.y}`}