fix(canvas): align magnetism tests and connection-line lint

components/canvas/__tests__/use-node-local-data.test.tsx

@@ -699,6 +699,7 @@ describe("favorite retention in strict local node flows", () => {
     vi.doMock("@xyflow/react", () => ({
       Handle: () => null,
       Position: { Left: "left", Right: "right" },
+      useConnection: () => ({ inProgress: false }),
     }));
 
     const importedModule = (await import(modulePath)) as {

components/canvas/canvas-connection-magnetism-context.tsx

@@ -18,6 +18,11 @@ type CanvasConnectionMagnetismState = {
 const CanvasConnectionMagnetismContext =
   createContext<CanvasConnectionMagnetismState | null>(null);
 
+const FALLBACK_MAGNETISM_STATE: CanvasConnectionMagnetismState = {
+  activeTarget: null,
+  setActiveTarget: () => undefined,
+};
+
 export function CanvasConnectionMagnetismProvider({
   children,
 }: {
@@ -42,10 +47,5 @@ export function CanvasConnectionMagnetismProvider({
 
 export function useCanvasConnectionMagnetism(): CanvasConnectionMagnetismState {
   const context = useContext(CanvasConnectionMagnetismContext);
-  if (!context) {
-    throw new Error(
-      "useCanvasConnectionMagnetism must be used within CanvasConnectionMagnetismProvider",
-    );
-  }
-  return context;
+  return context ?? FALLBACK_MAGNETISM_STATE;
 }

components/canvas/custom-connection-line.tsx

@@ -53,6 +53,8 @@ export default function CustomConnectionLine({
 }: ConnectionLineComponentProps) {
   const { getNodes, getEdges } = useReactFlow();
   const { activeTarget, setActiveTarget } = useCanvasConnectionMagnetism();
+  const fromHandleId = fromHandle?.id;
+  const fromNodeId = fromNode?.id;
 
   const fromHandleType =
     fromHandle?.type === "source" || fromHandle?.type === "target"
@@ -60,19 +62,19 @@ export default function CustomConnectionLine({
       : null;
 
   const resolvedMagnetTarget = useMemo(() => {
-    if (!fromHandleType || !fromNode?.id) {
+    if (!fromHandleType || !fromNodeId) {
       return null;
     }
 
     return resolveCanvasMagnetTarget({
       point: { x: toX, y: toY },
-      fromNodeId: fromNode.id,
-      fromHandleId: fromHandle?.id ?? undefined,
+      fromNodeId,
+      fromHandleId: fromHandleId ?? undefined,
       fromHandleType,
       nodes: getNodes(),
       edges: getEdges(),
     });
-  }, [fromHandle?.id, fromHandleType, fromNode?.id, getEdges, getNodes, toX, toY]);
+  }, [fromHandleId, fromHandleType, fromNodeId, getEdges, getNodes, toX, toY]);
 
   useEffect(() => {
     if (hasSameMagnetTarget(activeTarget, resolvedMagnetTarget)) {
@@ -119,7 +121,7 @@ export default function CustomConnectionLine({
       [path] = getStraightPath(pathParams);
   }
 
-  const [r, g, b] = connectionLineAccentRgb(fromNode.type, fromHandle.id);
+  const [r, g, b] = connectionLineAccentRgb(fromNode.type, fromHandleId);
   const opacity = connectionStatus === "invalid" ? 0.45 : 1;
   const strokeWidth = snappedTarget ? 3.25 : 2.5;
   const filter = snappedTarget