fix(reactivity-ui): fix graph connection arrow and line alignment, fix arrow not inhereting connection dynamic color

src/dev-toolbar/reactivity/index.tsx

@@ -7,6 +7,7 @@ import { Text } from '../../ui/Text.js';
 import { FitIcon, GraphIcon, PauseIcon, PlayIcon } from '../icons.js';
 import { formatValue, typeName } from './format.js';
 import {
+  ARROW_SIZE,
   edgePath,
   layoutGraph,
   NODE_HEIGHT,
@@ -526,31 +527,51 @@ export default function ReactivityViewer(props: ReactivityViewerProps): JSX.Elem
                         <marker
                           id="solid-reactivity-arrow"
                           viewBox="0 0 10 10"
-                          refX="9"
+                          refX="0"
                           refY="5"
-                          markerWidth="6"
-                          markerHeight="6"
+                          markerUnits="userSpaceOnUse"
+                          markerWidth={ARROW_SIZE}
+                          markerHeight={ARROW_SIZE}
                           orient="auto-start-reverse"
                         >
-                          <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
+                          <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke" />
+                        </marker>
+                        <marker
+                          id="solid-reactivity-arrow-active"
+                          viewBox="0 0 10 10"
+                          refX="2"
+                          refY="5"
+                          markerUnits="userSpaceOnUse"
+                          markerWidth={ARROW_SIZE + 2}
+                          markerHeight={ARROW_SIZE + 2}
+                          orient="auto-start-reverse"
+                        >
+                          <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke" />
                         </marker>
                       </defs>
                       <For each={visibleEdges()}>
-                        {(edge) => (
-                          <Show when={layout().nodes.get(edge.from)}>
-                            {(from) => (
-                              <Show when={layout().nodes.get(edge.to)}>
-                                {(to) => (
-                                  <path
-                                    data-solid-reactivity-edge={edgeRoleOf(edge)}
-                                    d={edgePath(from(), to())}
-                                    marker-end="url(#solid-reactivity-arrow)"
-                                  />
-                                )}
-                              </Show>
-                            )}
-                          </Show>
-                        )}
+                        {(edge) => {
+                          const role = () => edgeRoleOf(edge);
+                          return (
+                            <Show when={layout().nodes.get(edge.from)}>
+                              {(from) => (
+                                <Show when={layout().nodes.get(edge.to)}>
+                                  {(to) => (
+                                    <path
+                                      data-solid-reactivity-edge={role()}
+                                      d={edgePath(from(), to())}
+                                      marker-end={
+                                        role() === 'plain' || role() === 'muted'
+                                          ? 'url(#solid-reactivity-arrow)'
+                                          : 'url(#solid-reactivity-arrow-active)'
+                                      }
+                                    />
+                                  )}
+                                </Show>
+                              )}
+                            </Show>
+                          );
+                        }}
                       </For>
                     </svg>
 

src/dev-toolbar/reactivity/layout.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import {
+  ARROW_SIZE,
   edgePath,
   layoutGraph,
   LAYER_GAP,
@@ -125,14 +126,15 @@ describe('layoutGraph', () => {
 });
 
 describe('edgePath', () => {
-  it('starts at the right edge of the source and ends at the left edge of the target', () => {
+  it('starts at the right edge of the source and ends arrow-size before the left edge of the target', () => {
     const from = { id: 'a', layer: 0, index: 0, x: 0, y: 0 };
     const to = { id: 'b', layer: 1, index: 0, x: 280, y: 0 };
     const middle = NODE_HEIGHT / 2;
-    const curve = Math.max((to.x - NODE_WIDTH) * 0.5, 40);
+    const endX = to.x - ARROW_SIZE;
+    const curve = Math.max((endX - NODE_WIDTH) * 0.5, 40);
 
     expect(edgePath(from, to)).toBe(
-      `M ${NODE_WIDTH} ${middle} C ${NODE_WIDTH + curve} ${middle}, ${to.x - curve} ${middle}, ${to.x} ${middle}`,
+      `M ${NODE_WIDTH} ${middle} C ${NODE_WIDTH + curve} ${middle}, ${endX - curve} ${middle}, ${endX} ${middle}`,
     );
   });
 

src/dev-toolbar/reactivity/layout.ts

@@ -5,6 +5,7 @@ export const NODE_HEIGHT = 44;
 export const LAYER_GAP = 76;
 export const ROW_GAP = 14;
 export const PADDING = 24;
+export const ARROW_SIZE = 8;
 
 export interface LayoutInput {
   id: string;
@@ -270,7 +271,7 @@ export function placeHoverCard(input: HoverCardInput): HoverCardPlacement {
 export function edgePath(from: LayoutNode, to: LayoutNode): string {
   const startX = from.x + NODE_WIDTH;
   const startY = from.y + NODE_HEIGHT / 2;
-  const endX = to.x;
+  const endX = to.x - ARROW_SIZE;
   const endY = to.y + NODE_HEIGHT / 2;
   const distance = Math.max(Math.abs(endX - startX) * 0.5, 40);
   return `M ${startX} ${startY} C ${startX + distance} ${startY}, ${endX - distance} ${endY}, ${endX} ${endY}`;

src/dev-toolbar/reactivity/styles.css

@@ -183,6 +183,7 @@
   fill: none;
   stroke: var(--start-dt-border);
   stroke-width: 1.5;
+  stroke-linecap: round;
 }
 
 [data-solid-reactivity-edge='muted'] {